@knotpad/app 0.1.0 → 0.1.1

package/components/notes/note-editor.test.tsx

@@ -1,372 +0,0 @@
-// @vitest-environment jsdom
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
-import { NoteEditor } from "@/components/notes/note-editor";
-
-let isMobile = false;
-
-vi.mock("next/navigation", () => ({
-  useRouter: () => ({ refresh: vi.fn() }),
-}));
-
-vi.mock("@/components/kanban/kanban-status-context", () => ({
-  useKanbanStatuses: () => [],
-}));
-
-vi.mock("@/components/ui/toast", () => ({
-  useToast: () => vi.fn(),
-}));
-
-vi.mock("@/lib/use-is-mobile", () => ({
-  useIsMobile: () => isMobile,
-}));
-
-vi.mock("@/components/notes/note-preview-pane", () => ({
-  PreviewPane: ({
-    content,
-    onToggleTask,
-  }: {
-    content: string;
-    onToggleTask: (index: number) => void;
-  }) => {
-    const taskLines = content
-      .split("\n")
-      .filter((line) => /^\s*(?:[-*]|\d+\.)\s+\[[ x]\]/.test(line));
-
-    return (
-      <div data-testid="preview-pane">
-        {taskLines.map((line, index) => (
-          <button
-            key={`${index}-${line}`}
-            type="button"
-            onClick={() => onToggleTask(index)}
-          >
-            {`Toggle preview task ${index}`}
-          </button>
-        ))}
-      </div>
-    );
-  },
-}));
-
-beforeAll(() => {
-  vi.stubGlobal(
-    "ResizeObserver",
-    class {
-      observe() {}
-      disconnect() {}
-    }
-  );
-});
-
-beforeEach(() => {
-  window.localStorage.clear();
-  isMobile = false;
-});
-
-afterEach(() => {
-  cleanup();
-  vi.useRealTimers();
-});
-
-describe("NoteEditor", () => {
-  it("shows a compact editing help affordance", () => {
-    render(
-      <NoteEditor
-        note={{
-          id: "n1",
-          title: "Title",
-          content: "",
-          isLocked: false,
-          version: 1,
-          tasks: [],
-          folder: null,
-        }}
-        members={[]}
-        notesList={[]}
-        tasksList={[]}
-      />
-    );
-
-    expect(screen.getByText("Editing help")).toBeInTheDocument();
-    expect(screen.getByText("/ commands")).toBeInTheDocument();
-  });
-
-  it("persists the selected view mode", async () => {
-    const user = userEvent.setup();
-
-    render(
-      <NoteEditor
-        note={{
-          id: "n1",
-          title: "Title",
-          content: "",
-          isLocked: false,
-          version: 1,
-          tasks: [],
-          folder: null,
-        }}
-        members={[]}
-        notesList={[]}
-        tasksList={[]}
-      />
-    );
-
-    await user.click(screen.getByRole("button", { name: "Preview only" }));
-
-    expect(window.localStorage.getItem("brief:notes-view-mode")).toBe("\"preview\"");
-  });
-
-  it("switches between edit, split, and preview modes", async () => {
-    const user = userEvent.setup();
-
-    render(
-      <NoteEditor
-        note={{
-          id: "n1",
-          title: "Title",
-          content: "",
-          isLocked: false,
-          version: 1,
-          tasks: [],
-          folder: null,
-        }}
-        members={[]}
-        notesList={[]}
-        tasksList={[]}
-      />
-    );
-
-    expect(screen.getByPlaceholderText(/write a note/i)).toBeInTheDocument();
-    expect(screen.queryByTestId("preview-pane")).not.toBeInTheDocument();
-
-    await user.click(screen.getByRole("button", { name: "Split view" }));
-    expect(screen.getByPlaceholderText(/write a note/i)).toBeInTheDocument();
-    expect(screen.getByTestId("preview-pane")).toBeInTheDocument();
-
-    await user.click(screen.getByRole("button", { name: "Preview only" }));
-    expect(screen.getByTestId("preview-pane")).toBeInTheDocument();
-    expect(screen.queryByPlaceholderText(/write a note/i)).not.toBeInTheDocument();
-
-    await user.click(screen.getByRole("button", { name: "Edit only" }));
-    expect(screen.getByPlaceholderText(/write a note/i)).toBeInTheDocument();
-    expect(screen.queryByTestId("preview-pane")).not.toBeInTheDocument();
-  });
-
-  it("hides split mode on mobile", () => {
-    isMobile = true;
-
-    render(
-      <NoteEditor
-        note={{
-          id: "n1",
-          title: "Title",
-          content: "",
-          isLocked: false,
-          version: 1,
-          tasks: [],
-          folder: null,
-        }}
-        members={[]}
-        notesList={[]}
-        tasksList={[]}
-      />
-    );
-
-    expect(screen.queryByRole("button", { name: "Split view" })).not.toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Edit only" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Preview only" })).toBeInTheDocument();
-  });
-
-  it("falls back from split mode to edit mode on mobile", () => {
-    isMobile = true;
-    window.localStorage.setItem("brief:notes-view-mode", JSON.stringify("split"));
-
-    render(
-      <NoteEditor
-        note={{
-          id: "n1",
-          title: "Title",
-          content: "",
-          isLocked: false,
-          version: 1,
-          tasks: [],
-          folder: null,
-        }}
-        members={[]}
-        notesList={[]}
-        tasksList={[]}
-      />
-    );
-
-    expect(screen.getByPlaceholderText(/write a note/i)).toBeInTheDocument();
-    expect(screen.queryByTestId("preview-pane")).not.toBeInTheDocument();
-  });
-
-  it("shows empty-state help when no slash commands match", async () => {
-    const user = userEvent.setup();
-
-    render(
-      <NoteEditor
-        note={{
-          id: "n1",
-          title: "Title",
-          content: "",
-          isLocked: false,
-          version: 1,
-          tasks: [],
-          folder: null,
-        }}
-        members={[]}
-        notesList={[]}
-        tasksList={[]}
-      />
-    );
-
-    await user.click(screen.getByPlaceholderText(/write a note/i));
-    await user.keyboard("/zzz");
-
-    expect(
-      screen.getByText((_, element) =>
-        element?.textContent === "No commands match /zzz. Try `/date`, `/table`, or `/h1`."
-      )
-    ).toBeInTheDocument();
-  });
-
-  it("shows saved feedback after a successful autosave", async () => {
-    vi.stubGlobal(
-      "fetch",
-      vi.fn().mockResolvedValue({
-        ok: true,
-        json: vi.fn().mockResolvedValue({ version: 2, tasks: [] }),
-      })
-    );
-
-    const user = userEvent.setup();
-
-    render(
-      <NoteEditor
-        note={{
-          id: "n1",
-          title: "Title",
-          content: "",
-          isLocked: false,
-          version: 1,
-          tasks: [],
-          folder: null,
-        }}
-        members={[]}
-        notesList={[]}
-        tasksList={[]}
-      />
-    );
-
-    await user.click(screen.getByPlaceholderText(/write a note/i));
-    await user.keyboard("Hello");
-
-    await waitFor(() => {
-      expect(fetch).toHaveBeenCalledTimes(1);
-    }, { timeout: 2000 });
-
-    await waitFor(() => {
-      expect(screen.getByText("Saved just now")).toBeInTheDocument();
-    }, { timeout: 2000 });
-  });
-
-  it("toggles preview checkboxes for '*' task items and preserves the marker", async () => {
-    const fetchMock = vi.fn().mockImplementation((input: RequestInfo | URL) => {
-      if (String(input).startsWith("/api/tasks/")) {
-        return Promise.resolve({ ok: true, json: vi.fn().mockResolvedValue({}) });
-      }
-
-      return Promise.resolve({
-        ok: true,
-        json: vi.fn().mockResolvedValue({ version: 2, tasks: [] }),
-      });
-    });
-    vi.stubGlobal("fetch", fetchMock);
-
-    const user = userEvent.setup();
-
-    render(
-      <NoteEditor
-        note={{
-          id: "n1",
-          title: "Title",
-          content: "* [ ] Ship preview toggle\n",
-          isLocked: false,
-          version: 1,
-          tasks: [],
-          folder: null,
-        }}
-        members={[]}
-        notesList={[]}
-        tasksList={[{ id: "t1", title: "Ship preview toggle", noteTitle: "Title" }]}
-      />
-    );
-
-    await user.click(screen.getByRole("button", { name: "Split view" }));
-    await user.click(screen.getByRole("button", { name: "Toggle preview task 0" }));
-
-    expect(screen.getByPlaceholderText(/write a note/i)).toHaveValue("* [x] Ship preview toggle\n");
-
-    await waitFor(() => {
-      expect(fetchMock).toHaveBeenCalledWith(
-        "/api/tasks/t1",
-        expect.objectContaining({
-          method: "PATCH",
-          body: JSON.stringify({ status: "DONE" }),
-        })
-      );
-    });
-  });
-
-  it("toggles preview checkboxes for ordered task items and preserves the marker", async () => {
-    const fetchMock = vi.fn().mockImplementation((input: RequestInfo | URL) => {
-      if (String(input).startsWith("/api/tasks/")) {
-        return Promise.resolve({ ok: true, json: vi.fn().mockResolvedValue({}) });
-      }
-
-      return Promise.resolve({
-        ok: true,
-        json: vi.fn().mockResolvedValue({ version: 2, tasks: [] }),
-      });
-    });
-    vi.stubGlobal("fetch", fetchMock);
-
-    const user = userEvent.setup();
-
-    render(
-      <NoteEditor
-        note={{
-          id: "n1",
-          title: "Title",
-          content: "1. [ ] Ship ordered preview toggle\n",
-          isLocked: false,
-          version: 1,
-          tasks: [],
-          folder: null,
-        }}
-        members={[]}
-        notesList={[]}
-        tasksList={[{ id: "t2", title: "Ship ordered preview toggle", noteTitle: "Title" }]}
-      />
-    );
-
-    await user.click(screen.getByRole("button", { name: "Split view" }));
-    await user.click(screen.getByRole("button", { name: "Toggle preview task 0" }));
-
-    expect(screen.getByPlaceholderText(/write a note/i)).toHaveValue("1. [x] Ship ordered preview toggle\n");
-
-    await waitFor(() => {
-      expect(fetchMock).toHaveBeenCalledWith(
-        "/api/tasks/t2",
-        expect.objectContaining({
-          method: "PATCH",
-          body: JSON.stringify({ status: "DONE" }),
-        })
-      );
-    });
-  });
-});