mptyl/ThothII
1
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

style(frontend): compact CTE plan spacing

Browse Source
This commit is contained in:
User
2026-07-15 12:09:04 +02:00
parent 00c1af5a5a
commit 6b0da84a3d
2 changed files with 32 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/viewers/CtePlanViewer.test.tsx
+26 -12
View File
@@ -68,21 +68,16 @@ test("renders strategy, question, and a chain strip with CTE names in order", ()
expect(screen.getAllByText("impianti_recenti").length).toBeGreaterThan(0);
});
test("uses semantic CTE headings and explicit responsive card padding", () => {
test("uses compact vertical and responsive lateral CTE card padding", () => {
const { container } = render(<CtePlanViewer plan={plan} />);
expect(screen.getByRole("heading", { level: 3, name: "pazienti_idonei" })).toBeInTheDocument();
for (const header of container.querySelectorAll('[data-slot="card-header"]')) {
expect(header).toHaveClass(
"p-4",
"sm:p-5",
"[&.border-b]:pb-4",
"sm:[&.border-b]:pb-5"
);
expect(header).toHaveClass("px-3", "py-2", "sm:px-4", "[&.border-b]:pb-2");
expect(header).not.toHaveClass("p-4", "sm:p-5", "sm:[&.border-b]:pb-5");
}
for (const content of container.querySelectorAll('[data-slot="card-content"]')) {
expect(content).toHaveClass("p-4", "sm:p-5");
expect(content).toHaveClass("px-3", "py-2", "sm:px-4");
expect(content).not.toHaveClass("p-4", "sm:p-5");
}
for (const card of container.querySelectorAll('[data-slot="card"]')) {
expect(card).toHaveClass("shadow-none");
@@ -147,7 +142,8 @@ test("groups filters in one bordered divided list with accessible padded rows",
expect(list).toHaveClass("border", "divide-y");
for (const filter of filters) {
expect(filter.parentElement).toBe(list);
expect(filter).toHaveClass("p-3", "sm:p-4");
expect(filter).toHaveClass("px-3", "py-2", "sm:px-4");
expect(filter).not.toHaveClass("p-3", "sm:p-4");
}
lists.push(list!);
}
@@ -161,10 +157,28 @@ test("renders rationale as a plain top-divided section", () => {
const rationale = screen
.getByText("Base della catena: riduce il volume prima dei join")
.closest("section");
expect(rationale).toHaveClass("border-t", "pt-4");
expect(rationale).toHaveClass("border-t");
expect(rationale).not.toHaveClass("border-l-2", "bg-primary/5", "rounded-lg");
});
test("uses the same compact padding for table rows and rationale dividers", () => {
render(<CtePlanViewer plan={plan} />);
const card = getCteCard("pazienti_idonei");
const tableName = within(card).getByText("pazienti");
expect(tableName.parentElement).toHaveClass("px-3", "py-2", "sm:px-4");
expect(tableName.parentElement).not.toHaveClass("p-3", "sm:p-4");
const filterRationale = within(card).getByText("Solo pazienti in follow-up").parentElement;
expect(filterRationale).toHaveClass("pt-2");
expect(filterRationale).not.toHaveClass("pt-3");
const cteRationale = within(card)
.getByText("Base della catena: riduce il volume prima dei join")
.closest("section");
expect(cteRationale).toHaveClass("border-t", "pt-2");
expect(cteRationale).not.toHaveClass("pt-4");
});
test("shows 'no dependencies' for a CTE with an empty depends_on", () => {
render(<CtePlanViewer plan={plan} />);
expect(screen.getByText(/no dependencies/i)).toBeInTheDocument();