bfeea743f7
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Convert tasks, calendar, and dashboard pages from synchronous mock data to async loading pattern with useState/useEffect. Each page now shows a loading state via child components while data loads, and displays a PDA-friendly amber-styled message with a retry button if loading fails. This prepares these pages for real API integration by establishing the async data flow pattern. Child components (TaskList, Calendar, dashboard widgets) already handled isLoading props — now the pages actually use them. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import { describe, it, expect, vi } from "vitest";
|
|
import { render, screen, waitFor } from "@testing-library/react";
|
|
import TasksPage from "./page";
|
|
|
|
// Mock the TaskList component
|
|
vi.mock("@/components/tasks/TaskList", () => ({
|
|
TaskList: ({ tasks, isLoading }: { tasks: unknown[]; isLoading: boolean }): React.JSX.Element => (
|
|
<div data-testid="task-list">{isLoading ? "Loading" : `${String(tasks.length)} tasks`}</div>
|
|
),
|
|
}));
|
|
|
|
describe("TasksPage", (): void => {
|
|
it("should render the page title", (): void => {
|
|
render(<TasksPage />);
|
|
expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Tasks");
|
|
});
|
|
|
|
it("should show loading state initially", (): void => {
|
|
render(<TasksPage />);
|
|
expect(screen.getByTestId("task-list")).toHaveTextContent("Loading");
|
|
});
|
|
|
|
it("should render the TaskList with tasks after loading", async (): Promise<void> => {
|
|
render(<TasksPage />);
|
|
await waitFor((): void => {
|
|
expect(screen.getByTestId("task-list")).toHaveTextContent("4 tasks");
|
|
});
|
|
});
|
|
|
|
it("should have proper layout structure", (): void => {
|
|
const { container } = render(<TasksPage />);
|
|
const main = container.querySelector("main");
|
|
expect(main).toBeInTheDocument();
|
|
});
|
|
|
|
it("should render the subtitle text", (): void => {
|
|
render(<TasksPage />);
|
|
expect(screen.getByText("Organize your work at your own pace")).toBeInTheDocument();
|
|
});
|
|
});
|