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();
});
});