root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test(FN-4986): complete Step 3 — update footer cluster alignment assertions

Browse Source 
Fusion-Task-Id: FN-4986
Fusion-Task-Lineage: d7a2c969-f3ea-4f93-bcdb-f86521845fce
This commit is contained in:
Fusion (runfusion.ai)
2026-05-17 21:27:39 -07:00
committed by gsxdsm
parent 10d00423a4
commit 53e0372bc9
3 changed files with 56 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
packages/dashboard/app/components/__tests__/TaskCard.footer-alignment.test.tsx
View File

@@ -123,4 +123,46 @@ describe("FN-4598 TaskCard footer chip alignment", () => {
expect(textStyle.transform).toMatch(/translateY\(1px\)|matrix\(1,\s*0,\s*0,\s*1,\s*0,\s*1\)/);
}
});
it("keeps github, retry, and timer as a single right-aligned cluster with token gap", () => {
const { container } = render(
<TaskCard
task={{
...makeTask(),
sourceType: "dashboard_ui",
column: "in-review",
retrySummary: { total: 2 },
executionStartedAt: "2026-05-12T00:00:00.000Z",
updatedAt: "2026-05-12T00:05:00.000Z",
}}
onOpenDetail={noop}
addToast={noop}
onOpenDetailWithTab={noop}
/>,
);
const footerRow = container.querySelector(".card-footer-row") as HTMLElement;
const githubChip = footerRow.querySelector(":scope > .card-github-tracking-chip") as HTMLElement;
const retryChip = footerRow.querySelector(":scope > .card-retry-badge") as HTMLElement;
const timerChip = footerRow.querySelector(":scope > .card-time-indicator") as HTMLElement;
expect(footerRow).toBeTruthy();
expect(githubChip).toBeTruthy();
expect(retryChip).toBeTruthy();
expect(timerChip).toBeTruthy();
const children = Array.from(footerRow.children);
expect(children).toContain(githubChip);
expect(children).toContain(retryChip);
expect(children).toContain(timerChip);
expect(children.indexOf(githubChip)).toBeLessThan(children.indexOf(retryChip));
expect(children.indexOf(retryChip)).toBeLessThan(children.indexOf(timerChip));
expect(getComputedStyle(githubChip).marginLeft).toBe("auto");
expect(getComputedStyle(retryChip).marginLeft).toBe("0px");
expect(getComputedStyle(timerChip).marginLeft).toBe("0px");
const footerStyle = getComputedStyle(footerRow);
expect(footerStyle.gap).toBe("var(--space-sm)");
});
});

15
packages/dashboard/app/components/__tests__/TaskCard.test.tsx
View File

@@ -1859,8 +1859,8 @@ describe("TaskCard", () => {
expect(trackingLink).not.toBeNull();
const css = loadAllAppCssBaseOnly();
expect(css).toMatch(/\.card-footer-row\s*>\s*\.card-source-provenance:first-of-type\s*\{[^}]*margin-left:\s*auto;[^}]*\}/);
expect(css).toMatch(/\.card-source-provenance\s*\+\s*\.card-source-provenance\s*\{[^}]*margin-left:\s*0;[^}]*\}/);
expect(css).toMatch(/\.card-footer-row\s*>\s*\.card-source-provenance:first-of-type[\s\S]*\.card-footer-row\s*>\s*\.card-time-indicator:first-of-type\s*\{[^}]*margin-left:\s*auto;[^}]*\}/);
expect(css).toMatch(/\.card-source-provenance\s*\+\s*\.card-source-provenance[\s\S]*\.card-footer-row\s*>\s*\.card-retry-badge\s*\+\s*\.card-time-indicator\s*\{[^}]*margin-left:\s*0;[^}]*\}/);
const provenanceRule = css.match(/\.card-source-provenance\s*\{[^}]*\}/)?.[0] ?? "";
expect(provenanceRule).not.toMatch(/margin-left\s*:\s*auto/);
});
@@ -1897,13 +1897,13 @@ describe("TaskCard", () => {
expect((sourceBadge as Element).nextElementSibling).toBe(trackingChip);
const css = loadAllAppCssBaseOnly();
expect(css).toMatch(/\.card-footer-row\s*>\s*\.card-source-provenance:first-of-type\s*\{[^}]*margin-left:\s*auto;[^}]*\}/);
expect(css).toMatch(/\.card-footer-row\s*>\s*\.card-source-provenance\s*\+\s*\.card-github-tracking-chip:first-of-type\s*\{[^}]*margin-left:\s*0;[^}]*\}/);
expect(css).toMatch(/\.card-footer-row\s*>\s*\.card-source-provenance:first-of-type[\s\S]*\.card-footer-row\s*>\s*\.card-time-indicator:first-of-type\s*\{[^}]*margin-left:\s*auto;[^}]*\}/);
expect(css).toMatch(/\.card-footer-row\s*>\s*\.card-source-provenance\s*\+\s*\.card-github-tracking-chip:first-of-type[\s\S]*\.card-footer-row\s*>\s*\.card-retry-badge\s*\+\s*\.card-time-indicator\s*\{[^}]*margin-left:\s*0;[^}]*\}/);
});
it("applies right-alignment rule when only tracking chip is rendered", () => {
const css = loadAllAppCssBaseOnly();
expect(css).toMatch(/\.card-footer-row\s*>\s*\.card-github-tracking-chip:first-of-type\s*\{[^}]*margin-left:\s*auto;[^}]*\}/);
expect(css).toMatch(/\.card-footer-row\s*>\s*\.card-source-provenance:first-of-type[\s\S]*\.card-footer-row\s*>\s*\.card-github-tracking-chip:first-of-type[\s\S]*\{[^}]*margin-left:\s*auto;[^}]*\}/);
const { container } = render(
<TaskCard
@@ -2221,7 +2221,7 @@ describe("TaskCard", () => {
}
});
it("FN-4923 keeps tracking chip grouped with files-changed while timer remains right-aligned", () => {
it("FN-4923 keeps tracking chip, retry/timer chips grouped as one right-aligned cluster with files-changed", () => {
const cleanupCss = mountCssForBadgeTests();
try {
const { container } = render(
@@ -2257,7 +2257,8 @@ describe("TaskCard", () => {
expect(trackingChip).not.toBeNull();
expect(timerChip).not.toBeNull();
expect(filesChangedButton.compareDocumentPosition(trackingChip as HTMLElement)).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
expect(getComputedStyle(timerChip as HTMLElement).marginLeft).toBe("auto");
expect(getComputedStyle(trackingChip as HTMLElement).marginLeft).toBe("auto");
expect(getComputedStyle(timerChip as HTMLElement).marginLeft).toBe("0px");
} finally {
cleanupCss();
}

8
packages/dashboard/app/components/__tests__/board-mobile.test.tsx
View File

@@ -313,9 +313,13 @@ describe("TaskCard mobile", () => {
expectRuleToContain(css, ".card-footer-row", "flex-wrap: nowrap;");
});
it("keeps TaskCard timer chip in-flow and right-aligned in footer metadata row", () => {
it("keeps TaskCard footer-chip cluster anchored by first chip rules", () => {
const css = loadAllAppCss();
expectRuleToContain(css, ".card-time-indicator", "margin-left: auto;");
expectRuleToContain(css, ".card-footer-row > .card-time-indicator:first-of-type", "margin-left: auto;");
const timeIndicatorRule = css.match(/\.card-time-indicator\s*\{[^}]*\}/)?.[0] ?? "";
expect(timeIndicatorRule).not.toContain("margin-left: auto;");
expectRuleToContain(css, ".card-header-actions", "margin-left: auto;");
});