feat(#41): implement Widget/HUD system
- BaseWidget wrapper with loading/error states - WidgetRegistry for central widget management - WidgetGrid with react-grid-layout integration - TasksWidget, CalendarWidget, QuickCaptureWidget - useLayouts hooks for layout persistence - Comprehensive test suite (TDD approach)
This commit is contained in:
Jason Woltje
145
apps/web/src/components/widgets/__tests__/BaseWidget.test.tsx
Normal file
145
apps/web/src/components/widgets/__tests__/BaseWidget.test.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
/**
|
||||
* BaseWidget Component Tests
|
||||
* Following TDD - write tests first!
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { BaseWidget } from "../BaseWidget";
|
||||
|
||||
describe("BaseWidget", () => {
|
||||
const mockOnEdit = vi.fn();
|
||||
const mockOnRemove = vi.fn();
|
||||
|
||||
it("should render children content", () => {
|
||||
render(
|
||||
<BaseWidget
|
||||
id="test-widget"
|
||||
title="Test Widget"
|
||||
onEdit={mockOnEdit}
|
||||
onRemove={mockOnRemove}
|
||||
>
|
||||
<div>Widget Content</div>
|
||||
</BaseWidget>
|
||||
);
|
||||
|
||||
expect(screen.getByText("Widget Content")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should render title", () => {
|
||||
render(
|
||||
<BaseWidget
|
||||
id="test-widget"
|
||||
title="My Custom Widget"
|
||||
onEdit={mockOnEdit}
|
||||
onRemove={mockOnRemove}
|
||||
>
|
||||
<div>Content</div>
|
||||
</BaseWidget>
|
||||
);
|
||||
|
||||
expect(screen.getByText("My Custom Widget")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should call onEdit when edit button clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<BaseWidget
|
||||
id="test-widget"
|
||||
title="Test Widget"
|
||||
onEdit={mockOnEdit}
|
||||
onRemove={mockOnRemove}
|
||||
>
|
||||
<div>Content</div>
|
||||
</BaseWidget>
|
||||
);
|
||||
|
||||
const editButton = screen.getByRole("button", { name: /edit/i });
|
||||
await user.click(editButton);
|
||||
|
||||
expect(mockOnEdit).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("should call onRemove when remove button clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<BaseWidget
|
||||
id="test-widget"
|
||||
title="Test Widget"
|
||||
onEdit={mockOnEdit}
|
||||
onRemove={mockOnRemove}
|
||||
>
|
||||
<div>Content</div>
|
||||
</BaseWidget>
|
||||
);
|
||||
|
||||
const removeButton = screen.getByRole("button", { name: /remove/i });
|
||||
await user.click(removeButton);
|
||||
|
||||
expect(mockOnRemove).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("should not show control buttons when handlers not provided", () => {
|
||||
render(
|
||||
<BaseWidget id="test-widget" title="Test Widget">
|
||||
<div>Content</div>
|
||||
</BaseWidget>
|
||||
);
|
||||
|
||||
expect(screen.queryByRole("button", { name: /edit/i })).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole("button", { name: /remove/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should render with description when provided", () => {
|
||||
render(
|
||||
<BaseWidget
|
||||
id="test-widget"
|
||||
title="Test Widget"
|
||||
description="This is a test description"
|
||||
>
|
||||
<div>Content</div>
|
||||
</BaseWidget>
|
||||
);
|
||||
|
||||
expect(screen.getByText("This is a test description")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should apply custom className", () => {
|
||||
const { container } = render(
|
||||
<BaseWidget
|
||||
id="test-widget"
|
||||
title="Test Widget"
|
||||
className="custom-class"
|
||||
>
|
||||
<div>Content</div>
|
||||
</BaseWidget>
|
||||
);
|
||||
|
||||
expect(container.querySelector(".custom-class")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should render loading state", () => {
|
||||
render(
|
||||
<BaseWidget id="test-widget" title="Test Widget" isLoading={true}>
|
||||
<div>Content</div>
|
||||
</BaseWidget>
|
||||
);
|
||||
|
||||
expect(screen.getByText(/loading/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should render error state", () => {
|
||||
render(
|
||||
<BaseWidget
|
||||
id="test-widget"
|
||||
title="Test Widget"
|
||||
error="Something went wrong"
|
||||
>
|
||||
<div>Content</div>
|
||||
</BaseWidget>
|
||||
);
|
||||
|
||||
expect(screen.getByText("Something went wrong")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,117 @@
|
||||
/**
|
||||
* CalendarWidget Component Tests
|
||||
* Following TDD principles
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { render, screen, waitFor } from "@testing-library/react";
|
||||
import { CalendarWidget } from "../CalendarWidget";
|
||||
|
||||
global.fetch = vi.fn();
|
||||
|
||||
describe("CalendarWidget", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it("should render loading state initially", () => {
|
||||
(global.fetch as any).mockImplementation(() => new Promise(() => {}));
|
||||
|
||||
render(<CalendarWidget id="calendar-1" />);
|
||||
|
||||
expect(screen.getByText(/loading/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should render upcoming events", async () => {
|
||||
const mockEvents = [
|
||||
{
|
||||
id: "1",
|
||||
title: "Team Meeting",
|
||||
startTime: new Date(Date.now() + 3600000).toISOString(),
|
||||
endTime: new Date(Date.now() + 7200000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Project Review",
|
||||
startTime: new Date(Date.now() + 86400000).toISOString(),
|
||||
endTime: new Date(Date.now() + 90000000).toISOString(),
|
||||
},
|
||||
];
|
||||
|
||||
(global.fetch as any).mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => mockEvents,
|
||||
});
|
||||
|
||||
render(<CalendarWidget id="calendar-1" />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Team Meeting")).toBeInTheDocument();
|
||||
expect(screen.getByText("Project Review")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it("should handle empty event list", async () => {
|
||||
(global.fetch as any).mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => [],
|
||||
});
|
||||
|
||||
render(<CalendarWidget id="calendar-1" />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/no upcoming events/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it("should handle API errors gracefully", async () => {
|
||||
(global.fetch as any).mockRejectedValueOnce(new Error("API Error"));
|
||||
|
||||
render(<CalendarWidget id="calendar-1" />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/error/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it("should format event times correctly", async () => {
|
||||
const now = new Date();
|
||||
const startTime = new Date(now.getTime() + 3600000); // 1 hour from now
|
||||
|
||||
const mockEvents = [
|
||||
{
|
||||
id: "1",
|
||||
title: "Meeting",
|
||||
startTime: startTime.toISOString(),
|
||||
endTime: new Date(startTime.getTime() + 3600000).toISOString(),
|
||||
},
|
||||
];
|
||||
|
||||
(global.fetch as any).mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => mockEvents,
|
||||
});
|
||||
|
||||
render(<CalendarWidget id="calendar-1" />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Meeting")).toBeInTheDocument();
|
||||
// Should show time in readable format
|
||||
});
|
||||
});
|
||||
|
||||
it("should display current date", async () => {
|
||||
(global.fetch as any).mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => [],
|
||||
});
|
||||
|
||||
render(<CalendarWidget id="calendar-1" />);
|
||||
|
||||
await waitFor(() => {
|
||||
const currentDate = new Date().toLocaleDateString();
|
||||
// Widget should display current date or month
|
||||
expect(screen.getByTestId("calendar-header")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,148 @@
|
||||
/**
|
||||
* QuickCaptureWidget Component Tests
|
||||
* Following TDD principles
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi } 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();
|
||||
});
|
||||
});
|
||||
});
|
||||
127
apps/web/src/components/widgets/__tests__/TasksWidget.test.tsx
Normal file
127
apps/web/src/components/widgets/__tests__/TasksWidget.test.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
/**
|
||||
* TasksWidget Component Tests
|
||||
* Following TDD principles
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { render, screen, waitFor } from "@testing-library/react";
|
||||
import { TasksWidget } from "../TasksWidget";
|
||||
|
||||
// Mock fetch for API calls
|
||||
global.fetch = vi.fn();
|
||||
|
||||
describe("TasksWidget", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it("should render loading state initially", () => {
|
||||
(global.fetch as any).mockImplementation(() => new Promise(() => {}));
|
||||
|
||||
render(<TasksWidget id="tasks-1" />);
|
||||
|
||||
expect(screen.getByText(/loading/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should render task statistics", async () => {
|
||||
const mockTasks = [
|
||||
{ id: "1", title: "Task 1", status: "IN_PROGRESS", priority: "HIGH" },
|
||||
{ id: "2", title: "Task 2", status: "COMPLETED", priority: "MEDIUM" },
|
||||
{ id: "3", title: "Task 3", status: "NOT_STARTED", priority: "LOW" },
|
||||
];
|
||||
|
||||
(global.fetch as any).mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => mockTasks,
|
||||
});
|
||||
|
||||
render(<TasksWidget id="tasks-1" />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("3")).toBeInTheDocument(); // Total
|
||||
expect(screen.getByText("1")).toBeInTheDocument(); // In Progress
|
||||
expect(screen.getByText("1")).toBeInTheDocument(); // Completed
|
||||
});
|
||||
});
|
||||
|
||||
it("should render task list", async () => {
|
||||
const mockTasks = [
|
||||
{ id: "1", title: "Complete documentation", status: "IN_PROGRESS", priority: "HIGH" },
|
||||
{ id: "2", title: "Review PRs", status: "NOT_STARTED", priority: "MEDIUM" },
|
||||
];
|
||||
|
||||
(global.fetch as any).mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => mockTasks,
|
||||
});
|
||||
|
||||
render(<TasksWidget id="tasks-1" />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Complete documentation")).toBeInTheDocument();
|
||||
expect(screen.getByText("Review PRs")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it("should handle empty task list", async () => {
|
||||
(global.fetch as any).mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => [],
|
||||
});
|
||||
|
||||
render(<TasksWidget id="tasks-1" />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/no tasks/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it("should handle API errors gracefully", async () => {
|
||||
(global.fetch as any).mockRejectedValueOnce(new Error("API Error"));
|
||||
|
||||
render(<TasksWidget id="tasks-1" />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/error/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it("should display priority indicators", async () => {
|
||||
const mockTasks = [
|
||||
{ id: "1", title: "High priority task", status: "IN_PROGRESS", priority: "HIGH" },
|
||||
];
|
||||
|
||||
(global.fetch as any).mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => mockTasks,
|
||||
});
|
||||
|
||||
render(<TasksWidget id="tasks-1" />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("High priority task")).toBeInTheDocument();
|
||||
// Priority icon should be rendered (high priority = red)
|
||||
});
|
||||
});
|
||||
|
||||
it("should limit displayed tasks to 5", async () => {
|
||||
const mockTasks = Array.from({ length: 10 }, (_, i) => ({
|
||||
id: `${i + 1}`,
|
||||
title: `Task ${i + 1}`,
|
||||
status: "NOT_STARTED",
|
||||
priority: "MEDIUM",
|
||||
}));
|
||||
|
||||
(global.fetch as any).mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => mockTasks,
|
||||
});
|
||||
|
||||
render(<TasksWidget id="tasks-1" />);
|
||||
|
||||
await waitFor(() => {
|
||||
const taskElements = screen.getAllByText(/Task \d+/);
|
||||
expect(taskElements.length).toBeLessThanOrEqual(5);
|
||||
});
|
||||
});
|
||||
});
|
||||
135
apps/web/src/components/widgets/__tests__/WidgetGrid.test.tsx
Normal file
135
apps/web/src/components/widgets/__tests__/WidgetGrid.test.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
/**
|
||||
* WidgetGrid Component Tests
|
||||
* Following TDD - write tests first!
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { WidgetGrid } from "../WidgetGrid";
|
||||
import type { WidgetPlacement } from "@mosaic/shared";
|
||||
|
||||
// Mock react-grid-layout
|
||||
vi.mock("react-grid-layout", () => ({
|
||||
default: ({ children }: any) => <div data-testid="grid-layout">{children}</div>,
|
||||
Responsive: ({ children }: any) => <div data-testid="responsive-grid-layout">{children}</div>,
|
||||
}));
|
||||
|
||||
describe("WidgetGrid", () => {
|
||||
const mockLayout: WidgetPlacement[] = [
|
||||
{ i: "tasks-1", x: 0, y: 0, w: 2, h: 2 },
|
||||
{ i: "calendar-1", x: 2, y: 0, w: 2, h: 2 },
|
||||
];
|
||||
|
||||
const mockOnLayoutChange = vi.fn();
|
||||
|
||||
it("should render grid layout", () => {
|
||||
render(
|
||||
<WidgetGrid
|
||||
layout={mockLayout}
|
||||
onLayoutChange={mockOnLayoutChange}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId("grid-layout")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should render widgets from layout", () => {
|
||||
render(
|
||||
<WidgetGrid
|
||||
layout={mockLayout}
|
||||
onLayoutChange={mockOnLayoutChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// Should render correct number of widgets
|
||||
const widgets = screen.getAllByTestId(/widget-/);
|
||||
expect(widgets).toHaveLength(mockLayout.length);
|
||||
});
|
||||
|
||||
it("should call onLayoutChange when layout changes", () => {
|
||||
const { rerender } = render(
|
||||
<WidgetGrid
|
||||
layout={mockLayout}
|
||||
onLayoutChange={mockOnLayoutChange}
|
||||
/>
|
||||
);
|
||||
|
||||
const newLayout: WidgetPlacement[] = [
|
||||
{ i: "tasks-1", x: 1, y: 0, w: 2, h: 2 },
|
||||
{ i: "calendar-1", x: 2, y: 0, w: 2, h: 2 },
|
||||
];
|
||||
|
||||
rerender(
|
||||
<WidgetGrid
|
||||
layout={newLayout}
|
||||
onLayoutChange={mockOnLayoutChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// Layout change handler should be set up (actual calls handled by react-grid-layout)
|
||||
expect(mockOnLayoutChange).toBeDefined();
|
||||
});
|
||||
|
||||
it("should support edit mode", () => {
|
||||
render(
|
||||
<WidgetGrid
|
||||
layout={mockLayout}
|
||||
onLayoutChange={mockOnLayoutChange}
|
||||
isEditing={true}
|
||||
/>
|
||||
);
|
||||
|
||||
// In edit mode, widgets should have edit controls
|
||||
expect(screen.getByTestId("grid-layout")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should support read-only mode", () => {
|
||||
render(
|
||||
<WidgetGrid
|
||||
layout={mockLayout}
|
||||
onLayoutChange={mockOnLayoutChange}
|
||||
isEditing={false}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId("grid-layout")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should render empty state when no widgets", () => {
|
||||
render(
|
||||
<WidgetGrid
|
||||
layout={[]}
|
||||
onLayoutChange={mockOnLayoutChange}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText(/no widgets/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should handle widget removal", async () => {
|
||||
const mockOnRemoveWidget = vi.fn();
|
||||
render(
|
||||
<WidgetGrid
|
||||
layout={mockLayout}
|
||||
onLayoutChange={mockOnLayoutChange}
|
||||
onRemoveWidget={mockOnRemoveWidget}
|
||||
isEditing={true}
|
||||
/>
|
||||
);
|
||||
|
||||
// Widget removal should be supported
|
||||
expect(mockOnRemoveWidget).toBeDefined();
|
||||
});
|
||||
|
||||
it("should apply custom className", () => {
|
||||
const { container } = render(
|
||||
<WidgetGrid
|
||||
layout={mockLayout}
|
||||
onLayoutChange={mockOnLayoutChange}
|
||||
className="custom-grid"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(container.querySelector(".custom-grid")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,91 @@
|
||||
/**
|
||||
* Widget Registry Tests
|
||||
* Following TDD - write tests first!
|
||||
*/
|
||||
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { widgetRegistry } from "../WidgetRegistry";
|
||||
import { TasksWidget } from "../TasksWidget";
|
||||
import { CalendarWidget } from "../CalendarWidget";
|
||||
import { QuickCaptureWidget } from "../QuickCaptureWidget";
|
||||
|
||||
describe("WidgetRegistry", () => {
|
||||
it("should have a registry of widgets", () => {
|
||||
expect(widgetRegistry).toBeDefined();
|
||||
expect(typeof widgetRegistry).toBe("object");
|
||||
});
|
||||
|
||||
it("should include TasksWidget in registry", () => {
|
||||
expect(widgetRegistry.TasksWidget).toBeDefined();
|
||||
expect(widgetRegistry.TasksWidget.component).toBe(TasksWidget);
|
||||
});
|
||||
|
||||
it("should include CalendarWidget in registry", () => {
|
||||
expect(widgetRegistry.CalendarWidget).toBeDefined();
|
||||
expect(widgetRegistry.CalendarWidget.component).toBe(CalendarWidget);
|
||||
});
|
||||
|
||||
it("should include QuickCaptureWidget in registry", () => {
|
||||
expect(widgetRegistry.QuickCaptureWidget).toBeDefined();
|
||||
expect(widgetRegistry.QuickCaptureWidget.component).toBe(QuickCaptureWidget);
|
||||
});
|
||||
|
||||
it("should have correct metadata for TasksWidget", () => {
|
||||
const tasksWidget = widgetRegistry.TasksWidget;
|
||||
expect(tasksWidget.name).toBe("TasksWidget");
|
||||
expect(tasksWidget.displayName).toBe("Tasks");
|
||||
expect(tasksWidget.description).toBeDefined();
|
||||
expect(tasksWidget.defaultWidth).toBeGreaterThan(0);
|
||||
expect(tasksWidget.defaultHeight).toBeGreaterThan(0);
|
||||
expect(tasksWidget.minWidth).toBeGreaterThan(0);
|
||||
expect(tasksWidget.minHeight).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("should have correct metadata for CalendarWidget", () => {
|
||||
const calendarWidget = widgetRegistry.CalendarWidget;
|
||||
expect(calendarWidget.name).toBe("CalendarWidget");
|
||||
expect(calendarWidget.displayName).toBe("Calendar");
|
||||
expect(calendarWidget.description).toBeDefined();
|
||||
expect(calendarWidget.defaultWidth).toBeGreaterThan(0);
|
||||
expect(calendarWidget.defaultHeight).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("should have correct metadata for QuickCaptureWidget", () => {
|
||||
const quickCaptureWidget = widgetRegistry.QuickCaptureWidget;
|
||||
expect(quickCaptureWidget.name).toBe("QuickCaptureWidget");
|
||||
expect(quickCaptureWidget.displayName).toBe("Quick Capture");
|
||||
expect(quickCaptureWidget.description).toBeDefined();
|
||||
expect(quickCaptureWidget.defaultWidth).toBeGreaterThan(0);
|
||||
expect(quickCaptureWidget.defaultHeight).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("should export getWidgetByName helper", async () => {
|
||||
const { getWidgetByName } = await import("../WidgetRegistry");
|
||||
expect(typeof getWidgetByName).toBe("function");
|
||||
});
|
||||
|
||||
it("getWidgetByName should return correct widget", async () => {
|
||||
const { getWidgetByName } = await import("../WidgetRegistry");
|
||||
const widget = getWidgetByName("TasksWidget");
|
||||
expect(widget).toBeDefined();
|
||||
expect(widget?.component).toBe(TasksWidget);
|
||||
});
|
||||
|
||||
it("getWidgetByName should return undefined for invalid name", async () => {
|
||||
const { getWidgetByName } = await import("../WidgetRegistry");
|
||||
const widget = getWidgetByName("InvalidWidget");
|
||||
expect(widget).toBeUndefined();
|
||||
});
|
||||
|
||||
it("should export getAllWidgets helper", async () => {
|
||||
const { getAllWidgets } = await import("../WidgetRegistry");
|
||||
expect(typeof getAllWidgets).toBe("function");
|
||||
});
|
||||
|
||||
it("getAllWidgets should return array of all widgets", async () => {
|
||||
const { getAllWidgets } = await import("../WidgetRegistry");
|
||||
const widgets = getAllWidgets();
|
||||
expect(Array.isArray(widgets)).toBe(true);
|
||||
expect(widgets.length).toBeGreaterThanOrEqual(3);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user