149 lines
4.2 KiB
TypeScript
149 lines
4.2 KiB
TypeScript
/**
|
|
* QuickCaptureWidget Component Tests
|
|
* Following TDD principles
|
|
*/
|
|
|
|
import { describe, it, expect, vi, beforeEach } from "vitest";
|
|
import { render, screen, waitFor } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { QuickCaptureWidget } from "../QuickCaptureWidget";
|
|
|
|
global.fetch = vi.fn();
|
|
|
|
describe("QuickCaptureWidget", () => {
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
it("should render input field", () => {
|
|
render(<QuickCaptureWidget id="quick-capture-1" />);
|
|
|
|
expect(screen.getByRole("textbox")).toBeInTheDocument();
|
|
});
|
|
|
|
it("should render submit button", () => {
|
|
render(<QuickCaptureWidget id="quick-capture-1" />);
|
|
|
|
expect(screen.getByRole("button", { name: /add|capture|submit/i })).toBeInTheDocument();
|
|
});
|
|
|
|
it("should allow text input", async () => {
|
|
const user = userEvent.setup();
|
|
render(<QuickCaptureWidget id="quick-capture-1" />);
|
|
|
|
const input = screen.getByRole("textbox");
|
|
await user.type(input, "Quick note for later");
|
|
|
|
expect(input).toHaveValue("Quick note for later");
|
|
});
|
|
|
|
it("should submit note when button clicked", async () => {
|
|
const user = userEvent.setup();
|
|
(global.fetch as any).mockResolvedValueOnce({
|
|
ok: true,
|
|
json: async () => ({ success: true }),
|
|
});
|
|
|
|
render(<QuickCaptureWidget id="quick-capture-1" />);
|
|
|
|
const input = screen.getByRole("textbox");
|
|
const button = screen.getByRole("button", { name: /add|capture|submit/i });
|
|
|
|
await user.type(input, "New quick note");
|
|
await user.click(button);
|
|
|
|
await waitFor(() => {
|
|
expect(global.fetch).toHaveBeenCalledWith(
|
|
expect.stringContaining("/api"),
|
|
expect.objectContaining({
|
|
method: "POST",
|
|
})
|
|
);
|
|
});
|
|
});
|
|
|
|
it("should clear input after successful submission", async () => {
|
|
const user = userEvent.setup();
|
|
(global.fetch as any).mockResolvedValueOnce({
|
|
ok: true,
|
|
json: async () => ({ success: true }),
|
|
});
|
|
|
|
render(<QuickCaptureWidget id="quick-capture-1" />);
|
|
|
|
const input = screen.getByRole("textbox");
|
|
const button = screen.getByRole("button", { name: /add|capture|submit/i });
|
|
|
|
await user.type(input, "Test note");
|
|
await user.click(button);
|
|
|
|
await waitFor(() => {
|
|
expect(input).toHaveValue("");
|
|
});
|
|
});
|
|
|
|
it("should handle submission errors", async () => {
|
|
const user = userEvent.setup();
|
|
(global.fetch as any).mockRejectedValueOnce(new Error("API Error"));
|
|
|
|
render(<QuickCaptureWidget id="quick-capture-1" />);
|
|
|
|
const input = screen.getByRole("textbox");
|
|
const button = screen.getByRole("button", { name: /add|capture|submit/i });
|
|
|
|
await user.type(input, "Test note");
|
|
await user.click(button);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByText(/error|failed/i)).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
it("should not submit empty notes", async () => {
|
|
const user = userEvent.setup();
|
|
render(<QuickCaptureWidget id="quick-capture-1" />);
|
|
|
|
const button = screen.getByRole("button", { name: /add|capture|submit/i });
|
|
await user.click(button);
|
|
|
|
expect(global.fetch).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("should support keyboard shortcut (Enter)", async () => {
|
|
const user = userEvent.setup();
|
|
(global.fetch as any).mockResolvedValueOnce({
|
|
ok: true,
|
|
json: async () => ({ success: true }),
|
|
});
|
|
|
|
render(<QuickCaptureWidget id="quick-capture-1" />);
|
|
|
|
const input = screen.getByRole("textbox");
|
|
await user.type(input, "Quick note{Enter}");
|
|
|
|
await waitFor(() => {
|
|
expect(global.fetch).toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
it("should show success feedback after submission", async () => {
|
|
const user = userEvent.setup();
|
|
(global.fetch as any).mockResolvedValueOnce({
|
|
ok: true,
|
|
json: async () => ({ success: true }),
|
|
});
|
|
|
|
render(<QuickCaptureWidget id="quick-capture-1" />);
|
|
|
|
const input = screen.getByRole("textbox");
|
|
const button = screen.getByRole("button", { name: /add|capture|submit/i });
|
|
|
|
await user.type(input, "Test note");
|
|
await user.click(button);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByText(/success|saved|captured/i)).toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|