diff options
Diffstat (limited to 'src/client/components')
| -rw-r--r-- | src/client/components/DeleteNoteModal.test.tsx | 234 | ||||
| -rw-r--r-- | src/client/components/DeleteNoteModal.tsx | 152 |
2 files changed, 386 insertions, 0 deletions
diff --git a/src/client/components/DeleteNoteModal.test.tsx b/src/client/components/DeleteNoteModal.test.tsx new file mode 100644 index 0000000..85aaa14 --- /dev/null +++ b/src/client/components/DeleteNoteModal.test.tsx @@ -0,0 +1,234 @@ +/** + * @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"; +import { DeleteNoteModal } from "./DeleteNoteModal"; + +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"; + } + }, +})); + +const mockFetch = vi.fn(); +global.fetch = mockFetch; + +describe("DeleteNoteModal", () => { + const defaultProps = { + isOpen: true, + deckId: "deck-1", + noteId: "note-1", + onClose: vi.fn(), + onNoteDeleted: vi.fn(), + }; + + beforeEach(() => { + vi.clearAllMocks(); + vi.mocked(apiClient.getAuthHeader).mockReturnValue({ + Authorization: "Bearer access-token", + }); + }); + + afterEach(() => { + cleanup(); + }); + + it("renders delete confirmation dialog", () => { + render(<DeleteNoteModal {...defaultProps} />); + + expect(screen.getByRole("dialog")).toBeDefined(); + expect(screen.getByRole("heading", { name: "Delete Note" })).toBeDefined(); + expect( + screen.getByText("Are you sure you want to delete this note?"), + ).toBeDefined(); + expect( + screen.getByText( + "This will delete all cards generated from this note. This action cannot be undone.", + ), + ).toBeDefined(); + }); + + it("renders Cancel and Delete buttons", () => { + render(<DeleteNoteModal {...defaultProps} />); + + expect(screen.getByRole("button", { name: "Cancel" })).toBeDefined(); + expect(screen.getByRole("button", { name: "Delete" })).toBeDefined(); + }); + + it("does not render when isOpen is false", () => { + render(<DeleteNoteModal {...defaultProps} isOpen={false} />); + + expect(screen.queryByRole("dialog")).toBeNull(); + }); + + it("does not render when noteId is null", () => { + render(<DeleteNoteModal {...defaultProps} noteId={null} />); + + expect(screen.queryByRole("dialog")).toBeNull(); + }); + + it("calls onClose when Cancel button is clicked", async () => { + const user = userEvent.setup(); + const onClose = vi.fn(); + + render(<DeleteNoteModal {...defaultProps} onClose={onClose} />); + + await user.click(screen.getByRole("button", { name: "Cancel" })); + + expect(onClose).toHaveBeenCalledOnce(); + }); + + it("calls onClose when backdrop is clicked", async () => { + const user = userEvent.setup(); + const onClose = vi.fn(); + + render(<DeleteNoteModal {...defaultProps} onClose={onClose} />); + + // Click the backdrop (the dialog container) + const dialog = screen.getByRole("dialog"); + await user.click(dialog); + + expect(onClose).toHaveBeenCalledOnce(); + }); + + it("calls onClose when Escape key is pressed on the dialog", async () => { + const onClose = vi.fn(); + + render(<DeleteNoteModal {...defaultProps} onClose={onClose} />); + + // The dialog has onKeyDown handler - fire a keyboard event directly + const dialog = screen.getByRole("dialog"); + const event = new KeyboardEvent("keydown", { + key: "Escape", + bubbles: true, + }); + dialog.dispatchEvent(event); + + expect(onClose).toHaveBeenCalledOnce(); + }); + + it("deletes note and calls callbacks on success", async () => { + const user = userEvent.setup(); + const onClose = vi.fn(); + const onNoteDeleted = vi.fn(); + + mockFetch.mockResolvedValueOnce({ + ok: true, + json: async () => ({ success: true }), + }); + + render( + <DeleteNoteModal + {...defaultProps} + onClose={onClose} + onNoteDeleted={onNoteDeleted} + />, + ); + + await user.click(screen.getByRole("button", { name: "Delete" })); + + await waitFor(() => { + expect(mockFetch).toHaveBeenCalledWith("/api/decks/deck-1/notes/note-1", { + method: "DELETE", + headers: { Authorization: "Bearer access-token" }, + }); + }); + + expect(onNoteDeleted).toHaveBeenCalledOnce(); + expect(onClose).toHaveBeenCalledOnce(); + }); + + it("displays error message when delete fails", async () => { + const user = userEvent.setup(); + + mockFetch.mockResolvedValueOnce({ + ok: false, + status: 500, + json: async () => ({ error: "Failed to delete note" }), + }); + + render(<DeleteNoteModal {...defaultProps} />); + + await user.click(screen.getByRole("button", { name: "Delete" })); + + await waitFor(() => { + expect(screen.getByRole("alert").textContent).toContain( + "Failed to delete note", + ); + }); + }); + + it("shows Deleting... text while deleting", async () => { + const user = userEvent.setup(); + + // Create a promise that we can control + let resolveDelete: (value: unknown) => void; + const deletePromise = new Promise((resolve) => { + resolveDelete = resolve; + }); + + mockFetch.mockReturnValueOnce(deletePromise); + + render(<DeleteNoteModal {...defaultProps} />); + + await user.click(screen.getByRole("button", { name: "Delete" })); + + // Should show "Deleting..." while request is in progress + expect(screen.getByText("Deleting...")).toBeDefined(); + + // Resolve the delete request to cleanup + if (resolveDelete) { + resolveDelete({ + ok: true, + json: async () => ({ success: true }), + }); + } + }); + + it("disables buttons while deleting", async () => { + const user = userEvent.setup(); + + // Create a promise that we can control + let resolveDelete: (value: unknown) => void; + const deletePromise = new Promise((resolve) => { + resolveDelete = resolve; + }); + + mockFetch.mockReturnValueOnce(deletePromise); + + render(<DeleteNoteModal {...defaultProps} />); + + await user.click(screen.getByRole("button", { name: "Delete" })); + + // Both buttons should be disabled + expect(screen.getByRole("button", { name: "Cancel" })).toHaveProperty( + "disabled", + true, + ); + expect(screen.getByText("Deleting...").closest("button")).toHaveProperty( + "disabled", + true, + ); + + // Resolve the delete request to cleanup + if (resolveDelete) { + resolveDelete({ + ok: true, + json: async () => ({ success: true }), + }); + } + }); +}); diff --git a/src/client/components/DeleteNoteModal.tsx b/src/client/components/DeleteNoteModal.tsx new file mode 100644 index 0000000..8eec124 --- /dev/null +++ b/src/client/components/DeleteNoteModal.tsx @@ -0,0 +1,152 @@ +import { useState } from "react"; +import { ApiClientError, apiClient } from "../api"; + +interface DeleteNoteModalProps { + isOpen: boolean; + deckId: string; + noteId: string | null; + onClose: () => void; + onNoteDeleted: () => void; +} + +export function DeleteNoteModal({ + isOpen, + deckId, + noteId, + onClose, + onNoteDeleted, +}: DeleteNoteModalProps) { + const [error, setError] = useState<string | null>(null); + const [isDeleting, setIsDeleting] = useState(false); + + const handleClose = () => { + setError(null); + onClose(); + }; + + const handleDelete = async () => { + if (!noteId) return; + + setError(null); + setIsDeleting(true); + + try { + const authHeader = apiClient.getAuthHeader(); + if (!authHeader) { + throw new ApiClientError("Not authenticated", 401); + } + + const res = await fetch(`/api/decks/${deckId}/notes/${noteId}`, { + method: "DELETE", + headers: authHeader, + }); + + 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, + ); + } + + onNoteDeleted(); + onClose(); + } catch (err) { + if (err instanceof ApiClientError) { + setError(err.message); + } else { + setError("Failed to delete note. Please try again."); + } + } finally { + setIsDeleting(false); + } + }; + + if (!isOpen || !noteId) { + return null; + } + + return ( + <div + role="dialog" + aria-modal="true" + aria-labelledby="delete-note-title" + className="fixed inset-0 bg-ink/40 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fade-in" + onClick={(e) => { + if (e.target === e.currentTarget) { + handleClose(); + } + }} + onKeyDown={(e) => { + if (e.key === "Escape") { + handleClose(); + } + }} + > + <div className="bg-white rounded-2xl shadow-xl w-full max-w-md animate-scale-in"> + <div className="p-6"> + <div className="w-12 h-12 mx-auto mb-4 bg-error/10 rounded-full flex items-center justify-center"> + <svg + className="w-6 h-6 text-error" + fill="none" + stroke="currentColor" + viewBox="0 0 24 24" + aria-hidden="true" + > + <path + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth={2} + d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" + /> + </svg> + </div> + + <h2 + id="delete-note-title" + className="font-display text-xl font-medium text-ink text-center mb-2" + > + Delete Note + </h2> + + {error && ( + <div + role="alert" + className="bg-error/5 text-error text-sm px-4 py-3 rounded-lg border border-error/20 mb-4" + > + {error} + </div> + )} + + <p className="text-slate text-center mb-2"> + Are you sure you want to delete this note? + </p> + <p className="text-muted text-sm text-center mb-6"> + This will delete all cards generated from this note. This action + cannot be undone. + </p> + + <div className="flex gap-3 justify-center"> + <button + type="button" + onClick={handleClose} + disabled={isDeleting} + className="px-4 py-2 text-slate hover:bg-ivory rounded-lg transition-colors disabled:opacity-50 min-w-[100px]" + > + Cancel + </button> + <button + type="button" + onClick={handleDelete} + disabled={isDeleting} + className="px-4 py-2 bg-error hover:bg-error/90 text-white font-medium rounded-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed min-w-[100px]" + > + {isDeleting ? "Deleting..." : "Delete"} + </button> + </div> + </div> + </div> + </div> + ); +} |