|
| 1 | +// @vitest-environment jsdom |
| 2 | + |
| 3 | +import { fireEvent, render, screen } from "@testing-library/react"; |
| 4 | +import { beforeEach, describe, expect, it, vi } from "vitest"; |
| 5 | +import { AgentTokenTrendSection } from "./agent-token-trend-section"; |
| 6 | + |
| 7 | +const navigateMock = vi.fn(); |
| 8 | + |
| 9 | +vi.mock("react-router-dom", async () => { |
| 10 | + const actual = await vi.importActual<typeof import("react-router-dom")>("react-router-dom"); |
| 11 | + |
| 12 | + return { |
| 13 | + ...actual, |
| 14 | + useNavigate: () => navigateMock, |
| 15 | + }; |
| 16 | +}); |
| 17 | + |
| 18 | +vi.mock("../../../../lib/i18n", () => ({ |
| 19 | + useTranslation: () => (key: string) => { |
| 20 | + const translations: Record<string, string> = { |
| 21 | + "workspace.agent_instructions.token_trend.collapse_label": "Collapse Token Trend", |
| 22 | + "workspace.agent_instructions.token_trend.expand_label": "Expand Token Trend", |
| 23 | + "workspace.agent_instructions.token_trend.more_data": "More Data", |
| 24 | + "workspace.agent_instructions.token_trend.title": "Token Trend", |
| 25 | + }; |
| 26 | + |
| 27 | + return translations[key] ?? key; |
| 28 | + }, |
| 29 | +})); |
| 30 | + |
| 31 | +vi.mock("./agent-instructions-token-trend", () => ({ |
| 32 | + AgentInstructionsTokenTrend: ({ workspacePath }: { workspacePath: string }) => ( |
| 33 | + <div data-testid="agent-token-trend" data-workspace-path={workspacePath} /> |
| 34 | + ), |
| 35 | +})); |
| 36 | + |
| 37 | +describe("AgentTokenTrendSection", () => { |
| 38 | + beforeEach(() => { |
| 39 | + navigateMock.mockClear(); |
| 40 | + }); |
| 41 | + |
| 42 | + it("renders token trend with collapsible standalone sidebar section chrome", () => { |
| 43 | + render(<AgentTokenTrendSection workspacePath="/repo/project" />); |
| 44 | + |
| 45 | + const heading = screen.getByRole("heading", { level: 2, name: "Token Trend" }); |
| 46 | + const section = heading.closest("section"); |
| 47 | + const toggle = screen.getByRole("button", { name: "Collapse Token Trend" }); |
| 48 | + |
| 49 | + expect(section).toHaveClass("workspace-sidebar-section"); |
| 50 | + expect(section).toHaveClass("workspace-agent-token-trend-section"); |
| 51 | + expect(heading).toHaveClass("workspace-sidebar-section__title"); |
| 52 | + expect(toggle).toHaveClass("workspace-sidebar-section__chevron"); |
| 53 | + expect(toggle).toHaveAttribute("aria-expanded", "true"); |
| 54 | + expect(toggle).toHaveAttribute("aria-controls"); |
| 55 | + expect(screen.getByTestId("agent-token-trend")).toHaveAttribute( |
| 56 | + "data-workspace-path", |
| 57 | + "/repo/project" |
| 58 | + ); |
| 59 | + |
| 60 | + fireEvent.click(toggle); |
| 61 | + |
| 62 | + expect(screen.queryByTestId("agent-token-trend")).not.toBeInTheDocument(); |
| 63 | + expect(screen.getByRole("button", { name: "Expand Token Trend" })).toHaveAttribute( |
| 64 | + "aria-expanded", |
| 65 | + "false" |
| 66 | + ); |
| 67 | + }); |
| 68 | + |
| 69 | + it("navigates to work analysis scoped to the current workspace from the more data action", () => { |
| 70 | + render(<AgentTokenTrendSection workspacePath="/repo/project" />); |
| 71 | + |
| 72 | + const moreDataButton = screen.getByRole("button", { name: "More Data" }); |
| 73 | + |
| 74 | + expect(moreDataButton.closest(".workspace-sidebar-section__actions")).toHaveClass( |
| 75 | + "workspace-sidebar-panel__actions" |
| 76 | + ); |
| 77 | + |
| 78 | + fireEvent.click(moreDataButton); |
| 79 | + |
| 80 | + expect(navigateMock).toHaveBeenCalledWith( |
| 81 | + "/settings?section=analysis&workspacePath=%2Frepo%2Fproject" |
| 82 | + ); |
| 83 | + }); |
| 84 | +}); |
0 commit comments