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

test(dashboard): restore FN-5476 mobile nav android overlap test

Browse Source 
Companion to 94bc43e04 — the contract test for FN-5476's Android
overlap fix was also dropped by the earlier accidental sweep.
Restored verbatim from the FN-5476 commit (496d27559).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-05-22 09:25:52 -07:00
parent 324cdeb12b
commit a9094d79dd
1 changed files with 37 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
packages/dashboard/app/__tests__/mobile-nav-bar-android-overlap.test.ts Normal file
View File

@@ -0,0 +1,37 @@
import { describe, expect, it } from "vitest";
import { loadAllAppCss } from "../test/cssFixture";
/**
* Android overlap contract:
* - MobileNavBar keeps a 44px SSR fallback token.
* - MobileNavBar.tsx republishs --mobile-nav-height at runtime from live DOM height.
* - Footer/content offsets consume the token, so Android's taller label line-box no longer overlaps.
*/
function extractRuleBlock(css: string, selector: string): string {
const escapedSelector = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
const match = css.match(new RegExp(`${escapedSelector}\\s*\\{([\\s\\S]*?)\\}`));
return match?.[1] ?? "";
}
describe("mobile nav / executor footer overlap contract", () => {
const css = loadAllAppCss();
it("keeps 44px :root fallback token", () => {
expect(css).toMatch(/:root\s*\{[\s\S]*--mobile-nav-height:\s*44px;/);
});
it("uses min-height var token for the nav bar", () => {
const navBlock = extractRuleBlock(css, ".mobile-nav-bar");
expect(navBlock).toContain("min-height: var(--mobile-nav-height)");
expect(navBlock).not.toContain("height: 44px");
});
it("positions executor footer above nav using the token on mobile", () => {
expect(css).toMatch(/@media\s*\(max-width:\s*768px\)\s*\{[\s\S]*\.executor-status-bar\s*\{[\s\S]*bottom:\s*calc\(var\(--mobile-nav-height\)\s*\+\s*env\(safe-area-inset-bottom,\s*0px\)\s*\+\s*var\(--standalone-bottom-gap\)\)/);
});
it("uses nav-height token in mobile project-content padding rules", () => {
expect(css).toMatch(/\.project-content--with-mobile-nav:not\(\.project-content--with-footer\)\s*\{[\s\S]*padding-bottom:\s*calc\(var\(--mobile-nav-height\)/);
expect(css).toMatch(/\.project-content--with-footer\.project-content--with-mobile-nav\s*\{[\s\S]*padding-bottom:\s*calc\([\s\S]*var\(--mobile-nav-height\)/);
});
});