import { describe, it, expect, beforeEach, vi } from "vitest"; import { render } from "@testing-library/react"; import { screen } from "@testing-library/react"; import { MemoryRouter, Route, Routes } from "react-router-dom"; import Resolution from "@/pages/Resolution"; import * as tauriCommands from "@/lib/tauriCommands"; vi.mock("@/lib/tauriCommands"); const mockIssueDetail = { issue: { id: "test-id", title: "Test Issue", description: "Test Description", severity: "P3", status: "open", category: "linux", source: "manual", created_at: "2026-01-01", updated_at: "2026-01-01", assigned_to: "", tags: "[]", }, log_files: [], image_attachments: [], resolution_steps: [ { id: "step-1", issue_id: "test-id", step_order: 1, why_question: "Why did the service crash?", answer: "Out of memory", evidence: "dmesg shows OOM killer", created_at: "2026-01-01", }, ], conversations: [], }; describe("Resolution Page", () => { beforeEach(() => { vi.clearAllMocks(); vi.mocked(tauriCommands.getIssueCmd).mockResolvedValue(mockIssueDetail); }); it("renders resolution steps with readable text", async () => { render( } /> ); const question = await screen.findByText("Why did the service crash?"); const answer = await screen.findByText("Out of memory"); const evidence = await screen.findByText("dmesg shows OOM killer"); // Check that text has proper contrast classes expect(question).toBeInTheDocument(); expect(answer).toBeInTheDocument(); expect(evidence).toBeInTheDocument(); // Check for readable color classes (not muted-foreground which is too dark) const questionParent = question.closest("p"); const answerParent = answer.closest("p"); const evidenceParent = evidence.closest("p"); expect(questionParent?.className).toContain("text-foreground"); expect(answerParent?.className).toMatch(/text-foreground/); expect(evidenceParent?.className).toMatch(/text-foreground/); }); });