import { describe, it, expect, beforeEach, vi } from "vitest"; import { render, screen, waitFor } from "@testing-library/react"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { DebugView } from "@/components/DebugView"; import { setMockResponse, resetMocks } from "../mocks/tauri-api"; function renderWithProviders(ui: React.ReactElement) { const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false, }, }, }); return render( {ui} ); } describe("DebugView", () => { beforeEach(() => { resetMocks(); }); it("shows loading state initially", () => { renderWithProviders(); expect(screen.getByText(/loading/i)).toBeInTheDocument(); }); it("displays raw JSON data when loaded", async () => { const mockStatus = { last_sync: "2026-02-26T12:00:00Z", is_healthy: true, message: "Lore is healthy", summary: { open_issues: 5, authored_mrs: 2, reviewing_mrs: 3, }, }; setMockResponse("get_lore_status", mockStatus); renderWithProviders(); await waitFor(() => { expect(screen.queryByText(/loading/i)).not.toBeInTheDocument(); }); // Check that the debug heading is present expect(screen.getByText(/lore debug/i)).toBeInTheDocument(); // Check that the JSON is displayed (look for key properties) expect(screen.getByText(/is_healthy/)).toBeInTheDocument(); expect(screen.getByText(/open_issues/)).toBeInTheDocument(); expect(screen.getByText(/reviewing_mrs/)).toBeInTheDocument(); }); it("shows error state when fetch fails", async () => { setMockResponse("get_lore_status", Promise.reject(new Error("Connection failed"))); renderWithProviders(); await waitFor(() => { expect(screen.queryByText(/loading/i)).not.toBeInTheDocument(); }); expect(screen.getByText(/error/i)).toBeInTheDocument(); }); it("shows health status indicator", async () => { const mockStatus = { last_sync: "2026-02-26T12:00:00Z", is_healthy: true, message: "Lore is healthy", summary: { open_issues: 5, authored_mrs: 2, reviewing_mrs: 3, }, }; setMockResponse("get_lore_status", mockStatus); renderWithProviders(); await waitFor(() => { expect(screen.queryByText(/loading/i)).not.toBeInTheDocument(); }); expect(screen.getByTestId("health-indicator")).toBeInTheDocument(); expect(screen.getByTestId("health-indicator")).toHaveClass("bg-green-500"); }); it("shows unhealthy indicator when lore is not healthy", async () => { const mockStatus = { last_sync: null, is_healthy: false, message: "lore not configured", summary: null, }; setMockResponse("get_lore_status", mockStatus); renderWithProviders(); await waitFor(() => { expect(screen.queryByText(/loading/i)).not.toBeInTheDocument(); }); expect(screen.getByTestId("health-indicator")).toHaveClass("bg-red-500"); }); it("displays last sync time when available", async () => { const mockStatus = { last_sync: "2026-02-26T12:00:00Z", is_healthy: true, message: "Lore is healthy", summary: null, }; setMockResponse("get_lore_status", mockStatus); renderWithProviders(); await waitFor(() => { expect(screen.queryByText(/loading/i)).not.toBeInTheDocument(); }); // The timestamp appears in both the status section and raw JSON const syncTimeElements = screen.getAllByText(/2026-02-26T12:00:00Z/); expect(syncTimeElements.length).toBeGreaterThan(0); }); it("shows 'never' when last_sync is null", async () => { const mockStatus = { last_sync: null, is_healthy: false, message: "lore not configured", summary: null, }; setMockResponse("get_lore_status", mockStatus); renderWithProviders(); await waitFor(() => { expect(screen.queryByText(/loading/i)).not.toBeInTheDocument(); }); expect(screen.getByText(/never/i)).toBeInTheDocument(); }); });