@knotpad/app 0.1.5 → 0.1.7

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

@@ -0,0 +1,372 @@
+// @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" }),
+        })
+      );
+    });
+  });
+});