marcopanandClaude Opus 4.8
bcaf6708de
The interface is now fully English regardless of the chat language (session titles stay in whatever language the user typed). Changed the right-rail subtitle to 'Datamart Builder with Human In The Loop'. Translated all chrome: new-question/settings dialogs, workflow phase strip (F1-F8), session rail, steer input, widgets (select/multiselect/freetext/fallback/reserved controls) and viewers (SQL, results, schema linking). Test matchers updated in lockstep. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
import { render, screen, waitFor } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { SqlViewer } from "./SqlViewer";
|
|
|
|
vi.mock("./highlight", () => ({
|
|
highlightSql: vi.fn().mockResolvedValue('<pre data-testid="hl">SELECT 1</pre>'),
|
|
}));
|
|
|
|
const blocks = [
|
|
{
|
|
name: "base_orders",
|
|
fields: 5,
|
|
testStatus: "passed" as const,
|
|
sql: "SELECT id, amount FROM orders",
|
|
comments: { amount: "importo lordo" },
|
|
},
|
|
{
|
|
name: "final_query",
|
|
fields: 3,
|
|
testStatus: "failed" as const,
|
|
sql: "SELECT * FROM base_orders",
|
|
},
|
|
];
|
|
|
|
test("(a) renders headers with name, field count, and test-status badge", async () => {
|
|
render(<SqlViewer blocks={blocks} />);
|
|
// Drain the pending highlightSql microtasks inside act() before asserting,
|
|
// so no React act() warning is emitted (pristine output).
|
|
await waitFor(() => expect(screen.getAllByTestId("hl")).toHaveLength(2));
|
|
|
|
// Headers should be visible
|
|
expect(screen.getByText("base_orders")).toBeInTheDocument();
|
|
expect(screen.getByText("final_query")).toBeInTheDocument();
|
|
|
|
// Field counts
|
|
expect(screen.getByText(/5 campi/i)).toBeInTheDocument();
|
|
expect(screen.getByText(/3 campi/i)).toBeInTheDocument();
|
|
|
|
// Test-status badges
|
|
expect(screen.getByText(/passed/i)).toBeInTheDocument();
|
|
expect(screen.getByText(/failed/i)).toBeInTheDocument();
|
|
});
|
|
|
|
test("(b) bodies start expanded and clicking header collapses then re-expands", async () => {
|
|
const user = userEvent.setup();
|
|
render(<SqlViewer blocks={blocks} />);
|
|
|
|
// Both highlighted bodies should appear after async highlight resolves
|
|
await waitFor(() => {
|
|
expect(screen.getAllByTestId("hl")).toHaveLength(2);
|
|
});
|
|
|
|
// Collapse the first block by clicking its header
|
|
const firstHeader = screen.getByRole("button", { name: /base_orders/i });
|
|
await user.click(firstHeader);
|
|
|
|
// Now only one highlighted block visible
|
|
await waitFor(() => {
|
|
expect(screen.getAllByTestId("hl")).toHaveLength(1);
|
|
});
|
|
|
|
// Re-expand
|
|
await user.click(firstHeader);
|
|
await waitFor(() => {
|
|
expect(screen.getAllByTestId("hl")).toHaveLength(2);
|
|
});
|
|
});
|
|
|
|
test("(c) layout toggle flips its label between Orizzontale and Verticale", async () => {
|
|
render(<SqlViewer blocks={blocks} />);
|
|
await waitFor(() => expect(screen.getAllByTestId("hl")).toHaveLength(2));
|
|
|
|
// Default layout is vertical, so the toggle offers "Orizzontale".
|
|
const toggle = screen.getByRole("button", { name: /horizontal/i });
|
|
expect(toggle).toBeInTheDocument();
|
|
|
|
await userEvent.click(toggle);
|
|
|
|
// After switching to horizontal, the toggle now offers "Verticale".
|
|
expect(
|
|
screen.getByRole("button", { name: /vertical/i })
|
|
).toBeInTheDocument();
|
|
expect(
|
|
screen.queryByRole("button", { name: /horizontal/i })
|
|
).not.toBeInTheDocument();
|
|
});
|