stack/apps/web/src/components/widgets/__tests__/QuickCaptureWidget.test.tsx

/**
 * 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() as typeof global.fetch;

describe("QuickCaptureWidget", (): void => {
  beforeEach((): void => {
    vi.clearAllMocks();
  });

  it("should render input field", (): void => {
    render(<QuickCaptureWidget id="quick-capture-1" />);

    expect(screen.getByRole("textbox")).toBeInTheDocument();
  });

  it("should render submit button", (): void => {
    render(<QuickCaptureWidget id="quick-capture-1" />);

    expect(screen.getByRole("button", { name: /add|capture|submit/i })).toBeInTheDocument();
  });

  it("should allow text input", async (): Promise<void> => {
    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 (): Promise<void> => {
    const user = userEvent.setup();
    vi.mocked(global.fetch).mockResolvedValueOnce({
      ok: true,
      json: () => ({ 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 (): Promise<void> => {
    const user = userEvent.setup();
    vi.mocked(global.fetch).mockResolvedValueOnce({
      ok: true,
      json: () => ({ 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 (): Promise<void> => {
    const user = userEvent.setup();
    vi.mocked(global.fetch).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 (): Promise<void> => {
    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 (): Promise<void> => {
    const user = userEvent.setup();
    vi.mocked(global.fetch).mockResolvedValueOnce({
      ok: true,
      json: () => ({ 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 (): Promise<void> => {
    const user = userEvent.setup();
    vi.mocked(global.fetch).mockResolvedValueOnce({
      ok: true,
      json: () => ({ 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();
    });
  });
});