From 858178d6878229c0ac413d3ea5a4f799d6114ecb Mon Sep 17 00:00:00 2001 From: nsfisis Date: Sun, 7 Dec 2025 18:29:26 +0900 Subject: feat(client): add edit card modal with form validation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add EditCardModal component allowing users to edit existing cards. Includes Edit button on each card in the deck detail page and comprehensive unit tests. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- src/client/components/EditCardModal.test.tsx | 411 +++++++++++++++++++++++++++ src/client/components/EditCardModal.tsx | 210 ++++++++++++++ src/client/pages/DeckDetailPage.tsx | 19 ++ 3 files changed, 640 insertions(+) create mode 100644 src/client/components/EditCardModal.test.tsx create mode 100644 src/client/components/EditCardModal.tsx (limited to 'src') diff --git a/src/client/components/EditCardModal.test.tsx b/src/client/components/EditCardModal.test.tsx new file mode 100644 index 0000000..f37698f --- /dev/null +++ b/src/client/components/EditCardModal.test.tsx @@ -0,0 +1,411 @@ +/** + * @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 { EditCardModal } from "./EditCardModal"; + +// Mock fetch globally +const mockFetch = vi.fn(); +global.fetch = mockFetch; + +describe("EditCardModal", () => { + const mockCard = { + id: "card-123", + front: "Test front", + back: "Test back", + }; + + const defaultProps = { + isOpen: true, + deckId: "deck-456", + card: mockCard, + onClose: vi.fn(), + onCardUpdated: 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("does not render when card is null", () => { + render(); + + expect(screen.queryByRole("dialog")).toBeNull(); + }); + + it("renders modal when open with card", () => { + render(); + + expect(screen.getByRole("dialog")).toBeDefined(); + expect(screen.getByRole("heading", { name: "Edit Card" })).toBeDefined(); + expect(screen.getByLabelText("Front")).toBeDefined(); + expect(screen.getByLabelText("Back")).toBeDefined(); + expect(screen.getByRole("button", { name: "Cancel" })).toBeDefined(); + expect(screen.getByRole("button", { name: "Save" })).toBeDefined(); + }); + + it("populates form with card values", () => { + render(); + + expect(screen.getByLabelText("Front")).toHaveProperty( + "value", + "Test front", + ); + expect(screen.getByLabelText("Back")).toHaveProperty("value", "Test back"); + }); + + it("disables save button when front is empty", async () => { + const user = userEvent.setup(); + render(); + + const frontInput = screen.getByLabelText("Front"); + await user.clear(frontInput); + + const saveButton = screen.getByRole("button", { name: "Save" }); + expect(saveButton).toHaveProperty("disabled", true); + }); + + it("disables save button when back is empty", async () => { + const user = userEvent.setup(); + render(); + + const backInput = screen.getByLabelText("Back"); + await user.clear(backInput); + + const saveButton = screen.getByRole("button", { name: "Save" }); + expect(saveButton).toHaveProperty("disabled", true); + }); + + it("enables save button when both front and back have content", () => { + render(); + + const saveButton = screen.getByRole("button", { name: "Save" }); + expect(saveButton).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(); + + // Click on the backdrop (the dialog element itself) + const dialog = screen.getByRole("dialog"); + await user.click(dialog); + + expect(onClose).toHaveBeenCalledTimes(1); + }); + + it("does not call onClose when clicking inside the modal content", async () => { + const user = userEvent.setup(); + const onClose = vi.fn(); + render(); + + // Click on an element inside the modal + await user.click(screen.getByLabelText("Front")); + + expect(onClose).not.toHaveBeenCalled(); + }); + + it("updates card with new front", async () => { + const user = userEvent.setup(); + const onClose = vi.fn(); + const onCardUpdated = vi.fn(); + + mockFetch.mockResolvedValue({ + ok: true, + json: async () => ({ + card: { + id: "card-123", + front: "Updated front", + back: "Test back", + }, + }), + }); + + render( + , + ); + + const frontInput = screen.getByLabelText("Front"); + await user.clear(frontInput); + await user.type(frontInput, "Updated front"); + await user.click(screen.getByRole("button", { name: "Save" })); + + await waitFor(() => { + expect(mockFetch).toHaveBeenCalledWith( + "/api/decks/deck-456/cards/card-123", + { + method: "PUT", + headers: { + "Content-Type": "application/json", + Authorization: "Bearer access-token", + }, + body: JSON.stringify({ + front: "Updated front", + back: "Test back", + }), + }, + ); + }); + + expect(onCardUpdated).toHaveBeenCalledTimes(1); + expect(onClose).toHaveBeenCalledTimes(1); + }); + + it("updates card with new back", async () => { + const user = userEvent.setup(); + const onClose = vi.fn(); + const onCardUpdated = vi.fn(); + + mockFetch.mockResolvedValue({ + ok: true, + json: async () => ({ + card: { + id: "card-123", + front: "Test front", + back: "Updated back", + }, + }), + }); + + render( + , + ); + + const backInput = screen.getByLabelText("Back"); + await user.clear(backInput); + await user.type(backInput, "Updated back"); + await user.click(screen.getByRole("button", { name: "Save" })); + + await waitFor(() => { + expect(mockFetch).toHaveBeenCalledWith( + "/api/decks/deck-456/cards/card-123", + { + method: "PUT", + headers: { + "Content-Type": "application/json", + Authorization: "Bearer access-token", + }, + body: JSON.stringify({ + front: "Test front", + back: "Updated back", + }), + }, + ); + }); + + expect(onCardUpdated).toHaveBeenCalledTimes(1); + expect(onClose).toHaveBeenCalledTimes(1); + }); + + it("trims whitespace from front and back", async () => { + const user = userEvent.setup(); + + mockFetch.mockResolvedValue({ + ok: true, + json: async () => ({ card: { id: "card-123" } }), + }); + + const cardWithWhitespace = { + ...mockCard, + front: " Front ", + back: " Back ", + }; + render(); + + await user.click(screen.getByRole("button", { name: "Save" })); + + await waitFor(() => { + expect(mockFetch).toHaveBeenCalledWith( + "/api/decks/deck-456/cards/card-123", + { + method: "PUT", + headers: { + "Content-Type": "application/json", + Authorization: "Bearer access-token", + }, + body: JSON.stringify({ + front: "Front", + back: "Back", + }), + }, + ); + }); + }); + + it("shows loading state during submission", async () => { + const user = userEvent.setup(); + + mockFetch.mockImplementation(() => new Promise(() => {})); // Never resolves + + render(); + + await user.click(screen.getByRole("button", { name: "Save" })); + + expect(screen.getByRole("button", { name: "Saving..." })).toBeDefined(); + expect(screen.getByRole("button", { name: "Saving..." })).toHaveProperty( + "disabled", + true, + ); + expect(screen.getByRole("button", { name: "Cancel" })).toHaveProperty( + "disabled", + true, + ); + expect(screen.getByLabelText("Front")).toHaveProperty("disabled", true); + expect(screen.getByLabelText("Back")).toHaveProperty("disabled", true); + }); + + it("displays API error message", async () => { + const user = userEvent.setup(); + + mockFetch.mockResolvedValue({ + ok: false, + status: 400, + json: async () => ({ error: "Card not found" }), + }); + + render(); + + await user.click(screen.getByRole("button", { name: "Save" })); + + await waitFor(() => { + expect(screen.getByRole("alert").textContent).toContain("Card not found"); + }); + }); + + it("displays generic error on unexpected failure", async () => { + const user = userEvent.setup(); + + mockFetch.mockRejectedValue(new Error("Network error")); + + render(); + + await user.click(screen.getByRole("button", { name: "Save" })); + + await waitFor(() => { + expect(screen.getByRole("alert").textContent).toContain( + "Failed to update card. Please try again.", + ); + }); + }); + + it("displays error when not authenticated", async () => { + const user = userEvent.setup(); + + vi.mocked(apiClient.getAuthHeader).mockReturnValue(undefined); + + render(); + + await user.click(screen.getByRole("button", { name: "Save" })); + + await waitFor(() => { + expect(screen.getByRole("alert").textContent).toContain( + "Not authenticated", + ); + }); + }); + + it("updates form when card prop changes", () => { + const { rerender } = render(); + + expect(screen.getByLabelText("Front")).toHaveProperty( + "value", + "Test front", + ); + + const newCard = { + ...mockCard, + front: "New front", + back: "New back", + }; + rerender(); + + expect(screen.getByLabelText("Front")).toHaveProperty("value", "New front"); + expect(screen.getByLabelText("Back")).toHaveProperty("value", "New back"); + }); + + it("clears error when modal is closed", async () => { + const user = userEvent.setup(); + const onClose = vi.fn(); + + mockFetch.mockResolvedValue({ + ok: false, + status: 400, + json: async () => ({ error: "Some error" }), + }); + + const { rerender } = render( + , + ); + + // Trigger error + await user.click(screen.getByRole("button", { name: "Save" })); + await waitFor(() => { + expect(screen.getByRole("alert")).toBeDefined(); + }); + + // Close and reopen the modal + await user.click(screen.getByRole("button", { name: "Cancel" })); + rerender(); + + // Error should be cleared + expect(screen.queryByRole("alert")).toBeNull(); + }); +}); diff --git a/src/client/components/EditCardModal.tsx b/src/client/components/EditCardModal.tsx new file mode 100644 index 0000000..2d04581 --- /dev/null +++ b/src/client/components/EditCardModal.tsx @@ -0,0 +1,210 @@ +import { type FormEvent, useEffect, useState } from "react"; +import { ApiClientError, apiClient } from "../api"; + +interface Card { + id: string; + front: string; + back: string; +} + +interface EditCardModalProps { + isOpen: boolean; + deckId: string; + card: Card | null; + onClose: () => void; + onCardUpdated: () => void; +} + +export function EditCardModal({ + isOpen, + deckId, + card, + onClose, + onCardUpdated, +}: EditCardModalProps) { + const [front, setFront] = useState(""); + const [back, setBack] = useState(""); + const [error, setError] = useState(null); + const [isSubmitting, setIsSubmitting] = useState(false); + + // Sync form state when card changes + useEffect(() => { + if (card) { + setFront(card.front); + setBack(card.back); + setError(null); + } + }, [card]); + + const handleClose = () => { + setError(null); + onClose(); + }; + + const handleSubmit = async (e: FormEvent) => { + e.preventDefault(); + if (!card) return; + + setError(null); + setIsSubmitting(true); + + try { + const authHeader = apiClient.getAuthHeader(); + if (!authHeader) { + throw new ApiClientError("Not authenticated", 401); + } + + const res = await fetch(`/api/decks/${deckId}/cards/${card.id}`, { + method: "PUT", + headers: { + "Content-Type": "application/json", + ...authHeader, + }, + body: JSON.stringify({ + front: front.trim(), + back: back.trim(), + }), + }); + + if (!res.ok) { + const errorBody = await res.json().catch(() => ({})); + throw new ApiClientError( + (errorBody as { error?: string }).error || + `Request failed with status ${res.status}`, + res.status, + ); + } + + onCardUpdated(); + onClose(); + } catch (err) { + if (err instanceof ApiClientError) { + setError(err.message); + } else { + setError("Failed to update card. Please try again."); + } + } finally { + setIsSubmitting(false); + } + }; + + if (!isOpen || !card) { + return null; + } + + const isFormValid = front.trim() && back.trim(); + + return ( +
{ + if (e.target === e.currentTarget) { + handleClose(); + } + }} + onKeyDown={(e) => { + if (e.key === "Escape") { + handleClose(); + } + }} + > +
+

+ Edit Card +

+ +
+ {error && ( +
+ {error} +
+ )} + +
+ +