From 38032877e97ea89e1a7f8406e2cc0a1c1146e866 Mon Sep 17 00:00:00 2001 From: mptyl Date: Sun, 28 Jun 2026 12:53:59 +0200 Subject: [PATCH] test(frontend): settle async highlight in SqlViewer test (pristine output) + assert toggle flip Test (a) now drains pending highlightSql microtasks inside act() via waitFor before synchronous header assertions, eliminating the React act() warning. Test (c) asserts the layout toggle label flips Orizzontale -> Verticale rather than merely existing. Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/viewers/SqlViewer.test.tsx | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/frontend/src/viewers/SqlViewer.test.tsx b/frontend/src/viewers/SqlViewer.test.tsx index c0de4b6f..4f623b1b 100644 --- a/frontend/src/viewers/SqlViewer.test.tsx +++ b/frontend/src/viewers/SqlViewer.test.tsx @@ -24,7 +24,11 @@ const blocks = [ test("(a) renders headers with name, field count, and test-status badge", async () => { render(); - // Headers should be visible immediately + // 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(); @@ -62,14 +66,21 @@ test("(b) bodies start expanded and clicking header collapses then re-expands", }); }); -test("(c) layout toggle switches between vertical and horizontal", async () => { +test("(c) layout toggle flips its label between Orizzontale and Verticale", async () => { render(); + await waitFor(() => expect(screen.getAllByTestId("hl")).toHaveLength(2)); - const toggle = screen.getByRole("button", { name: /orizzontale|verticale/i }); + // Default layout is vertical, so the toggle offers "Orizzontale". + const toggle = screen.getByRole("button", { name: /orizzontale/i }); expect(toggle).toBeInTheDocument(); + await userEvent.click(toggle); - // After click the label should flip + + // After switching to horizontal, the toggle now offers "Verticale". expect( - screen.getByRole("button", { name: /orizzontale|verticale/i }) + screen.getByRole("button", { name: /verticale/i }) ).toBeInTheDocument(); + expect( + screen.queryByRole("button", { name: /orizzontale/i }) + ).not.toBeInTheDocument(); });