mission-control/tests/components/DebugView.test.tsx

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(
    <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
  );
}

describe("DebugView", () => {
  beforeEach(() => {
    resetMocks();
  });

  it("shows loading state initially", () => {
    renderWithProviders(<DebugView />);
    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(<DebugView />);

    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(<DebugView />);

    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(<DebugView />);

    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(<DebugView />);

    await waitFor(() => {
      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
    });

    expect(screen.getByTestId("health-indicator")).toHaveClass("bg-red-500");
  });

  it("displays 'data since' timestamp 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(<DebugView />);

    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 'all time' 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(<DebugView />);

    await waitFor(() => {
      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
    });

    expect(screen.getByText(/all time/i)).toBeInTheDocument();
  });
});