From b51d4efaa1e5e0417d4306c02797f424938766cb Mon Sep 17 00:00:00 2001 From: nsfisis Date: Wed, 31 Dec 2025 02:38:05 +0900 Subject: feat(client): add NoteTypesPage for note type management MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implement Phase 6 of the roadmap - NoteType list page with CRUD modals: - NoteTypesPage displays all user's note types with templates and reversible badge - CreateNoteTypeModal for creating new note types with templates - EditNoteTypeModal for updating existing note types - DeleteNoteTypeModal with constraint warning - Navigation link from HomePage header - Comprehensive tests for all components (65 new tests) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- src/client/components/CreateNoteTypeModal.test.tsx | 318 +++++++++++++++++++++ 1 file changed, 318 insertions(+) create mode 100644 src/client/components/CreateNoteTypeModal.test.tsx (limited to 'src/client/components/CreateNoteTypeModal.test.tsx') diff --git a/src/client/components/CreateNoteTypeModal.test.tsx b/src/client/components/CreateNoteTypeModal.test.tsx new file mode 100644 index 0000000..9536f53 --- /dev/null +++ b/src/client/components/CreateNoteTypeModal.test.tsx @@ -0,0 +1,318 @@ +/** + * @vitest-environment jsdom + */ +import { cleanup, render, screen, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; +import { apiClient } from "../api/client"; + +vi.mock("../api/client", () => ({ + apiClient: { + getAuthHeader: vi.fn(), + }, + ApiClientError: class ApiClientError extends Error { + constructor( + message: string, + public status: number, + public code?: string, + ) { + super(message); + this.name = "ApiClientError"; + } + }, +})); + +// Import after mock is set up +import { CreateNoteTypeModal } from "./CreateNoteTypeModal"; + +// Mock fetch globally +const mockFetch = vi.fn(); +global.fetch = mockFetch; + +describe("CreateNoteTypeModal", () => { + const defaultProps = { + isOpen: true, + onClose: vi.fn(), + onNoteTypeCreated: vi.fn(), + }; + + beforeEach(() => { + vi.clearAllMocks(); + vi.mocked(apiClient.getAuthHeader).mockReturnValue({ + Authorization: "Bearer access-token", + }); + }); + + afterEach(() => { + cleanup(); + vi.restoreAllMocks(); + }); + + it("does not render when closed", () => { + render(); + + expect(screen.queryByRole("dialog")).toBeNull(); + }); + + it("renders modal when open", () => { + render(); + + expect(screen.getByRole("dialog")).toBeDefined(); + expect( + screen.getByRole("heading", { name: "Create Note Type" }), + ).toBeDefined(); + expect(screen.getByLabelText("Name")).toBeDefined(); + expect(screen.getByLabelText("Front Template")).toBeDefined(); + expect(screen.getByLabelText("Back Template")).toBeDefined(); + expect(screen.getByLabelText("Create reversed cards")).toBeDefined(); + expect(screen.getByRole("button", { name: "Cancel" })).toBeDefined(); + expect(screen.getByRole("button", { name: "Create" })).toBeDefined(); + }); + + it("has default template values", () => { + render(); + + expect(screen.getByLabelText("Front Template")).toHaveProperty( + "value", + "{{Front}}", + ); + expect(screen.getByLabelText("Back Template")).toHaveProperty( + "value", + "{{Back}}", + ); + }); + + it("disables create button when name is empty", () => { + render(); + + const createButton = screen.getByRole("button", { name: "Create" }); + expect(createButton).toHaveProperty("disabled", true); + }); + + it("enables create button when name has content", async () => { + const user = userEvent.setup(); + render(); + + const nameInput = screen.getByLabelText("Name"); + await user.type(nameInput, "My Note Type"); + + const createButton = screen.getByRole("button", { name: "Create" }); + expect(createButton).toHaveProperty("disabled", false); + }); + + it("calls onClose when Cancel is clicked", async () => { + const user = userEvent.setup(); + const onClose = vi.fn(); + render(); + + await user.click(screen.getByRole("button", { name: "Cancel" })); + + expect(onClose).toHaveBeenCalledTimes(1); + }); + + it("calls onClose when clicking outside the modal", async () => { + const user = userEvent.setup(); + const onClose = vi.fn(); + render(); + + const dialog = screen.getByRole("dialog"); + await user.click(dialog); + + expect(onClose).toHaveBeenCalledTimes(1); + }); + + it("creates note type with all fields", async () => { + const user = userEvent.setup(); + const onClose = vi.fn(); + const onNoteTypeCreated = vi.fn(); + + mockFetch.mockResolvedValue({ + ok: true, + json: async () => ({ + noteType: { + id: "note-type-1", + name: "Test Note Type", + frontTemplate: "{{Front}}", + backTemplate: "{{Back}}", + isReversible: true, + }, + }), + }); + + render( + , + ); + + await user.type(screen.getByLabelText("Name"), "Test Note Type"); + // Keep default templates and just toggle reversible + await user.click(screen.getByLabelText("Create reversed cards")); + await user.click(screen.getByRole("button", { name: "Create" })); + + await waitFor(() => { + expect(mockFetch).toHaveBeenCalledWith("/api/note-types", { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: "Bearer access-token", + }, + body: JSON.stringify({ + name: "Test Note Type", + frontTemplate: "{{Front}}", + backTemplate: "{{Back}}", + isReversible: true, + }), + }); + }); + + expect(onNoteTypeCreated).toHaveBeenCalledTimes(1); + expect(onClose).toHaveBeenCalledTimes(1); + }); + + it("trims whitespace from text fields", async () => { + const user = userEvent.setup(); + + mockFetch.mockResolvedValue({ + ok: true, + json: async () => ({ noteType: { id: "note-type-1" } }), + }); + + render(); + + await user.type(screen.getByLabelText("Name"), " Test Note Type "); + await user.click(screen.getByRole("button", { name: "Create" })); + + await waitFor(() => { + expect(mockFetch).toHaveBeenCalledWith( + "/api/note-types", + expect.objectContaining({ + body: expect.stringContaining('"name":"Test Note Type"'), + }), + ); + }); + }); + + it("shows loading state during submission", async () => { + const user = userEvent.setup(); + + mockFetch.mockImplementation(() => new Promise(() => {})); // Never resolves + + render(); + + await user.type(screen.getByLabelText("Name"), "Test Note Type"); + await user.click(screen.getByRole("button", { name: "Create" })); + + expect(screen.getByRole("button", { name: "Creating..." })).toBeDefined(); + expect(screen.getByRole("button", { name: "Creating..." })).toHaveProperty( + "disabled", + true, + ); + expect(screen.getByRole("button", { name: "Cancel" })).toHaveProperty( + "disabled", + true, + ); + expect(screen.getByLabelText("Name")).toHaveProperty("disabled", true); + }); + + it("displays API error message", async () => { + const user = userEvent.setup(); + + mockFetch.mockResolvedValue({ + ok: false, + status: 400, + json: async () => ({ error: "Note type name already exists" }), + }); + + render(); + + await user.type(screen.getByLabelText("Name"), "Test Note Type"); + await user.click(screen.getByRole("button", { name: "Create" })); + + await waitFor(() => { + expect(screen.getByRole("alert").textContent).toContain( + "Note type name already exists", + ); + }); + }); + + it("displays generic error on unexpected failure", async () => { + const user = userEvent.setup(); + + mockFetch.mockRejectedValue(new Error("Network error")); + + render(); + + await user.type(screen.getByLabelText("Name"), "Test Note Type"); + await user.click(screen.getByRole("button", { name: "Create" })); + + await waitFor(() => { + expect(screen.getByRole("alert").textContent).toContain( + "Failed to create note type. Please try again.", + ); + }); + }); + + it("displays error when not authenticated", async () => { + const user = userEvent.setup(); + + vi.mocked(apiClient.getAuthHeader).mockReturnValue(undefined); + + render(); + + await user.type(screen.getByLabelText("Name"), "Test Note Type"); + await user.click(screen.getByRole("button", { name: "Create" })); + + await waitFor(() => { + expect(screen.getByRole("alert").textContent).toContain( + "Not authenticated", + ); + }); + }); + + it("resets form when closed and reopened", async () => { + const user = userEvent.setup(); + const onClose = vi.fn(); + + const { rerender } = render( + , + ); + + // Type something in the form + await user.type(screen.getByLabelText("Name"), "Test Note Type"); + await user.click(screen.getByLabelText("Create reversed cards")); + + // Click cancel to close + await user.click(screen.getByRole("button", { name: "Cancel" })); + + // Reopen the modal + rerender( + , + ); + + // Form should be reset + expect(screen.getByLabelText("Name")).toHaveProperty("value", ""); + expect(screen.getByLabelText("Front Template")).toHaveProperty( + "value", + "{{Front}}", + ); + expect(screen.getByLabelText("Back Template")).toHaveProperty( + "value", + "{{Back}}", + ); + expect(screen.getByLabelText("Create reversed cards")).toHaveProperty( + "checked", + false, + ); + }); +}); -- cgit v1.2.3-70-g09d2