9c5dc07166
- Reduce mobile media query button heights from 44px to 36px across all dashboard components - Update mobile CSS tests (nav bar, board, modals, mission planning) to expect 36px touch targets - Add CSS testing patterns to project memory for consistent test guidelines
86 lines
2.9 KiB
TypeScript
86 lines
2.9 KiB
TypeScript
import { describe, expect, it } from "vitest";
|
|
import { readFileSync } from "fs";
|
|
import { resolve } from "path";
|
|
|
|
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] ?? "";
|
|
}
|
|
|
|
function extractMobileMediaBlocks(content: string): string {
|
|
const blocks: string[] = [];
|
|
const regex = /@media\s*\(\s*max-width:\s*768px\s*\)\s*\{/g;
|
|
let match;
|
|
|
|
while ((match = regex.exec(content)) !== null) {
|
|
const startIdx = match.index + match[0].length;
|
|
let braceCount = 1;
|
|
let endIdx = startIdx;
|
|
|
|
while (braceCount > 0 && endIdx < content.length) {
|
|
if (content[endIdx] === "{") braceCount += 1;
|
|
if (content[endIdx] === "}") braceCount -= 1;
|
|
endIdx += 1;
|
|
}
|
|
|
|
if (braceCount === 0) {
|
|
blocks.push(content.slice(startIdx, endIdx - 1));
|
|
}
|
|
}
|
|
|
|
return blocks.join("\n");
|
|
}
|
|
|
|
describe("mobile-nav-bar.css", () => {
|
|
const cssPath = resolve(__dirname, "../styles.css");
|
|
const cssContent = readFileSync(cssPath, "utf-8");
|
|
const mobileMediaBlock = extractMobileMediaBlocks(cssContent);
|
|
|
|
it("tab bar has fixed position", () => {
|
|
const block = extractRuleBlock(cssContent, ".mobile-nav-bar");
|
|
expect(block).toContain("position: fixed");
|
|
expect(block).toContain("bottom: 0");
|
|
});
|
|
|
|
it("tab bar display toggles in mobile media query", () => {
|
|
const block = extractRuleBlock(cssContent, ".mobile-nav-bar");
|
|
expect(block).toContain("display: none");
|
|
expect(cssContent).toContain("@media (max-width: 768px)");
|
|
expect(cssContent).toMatch(/@media\s*\(max-width:\s*768px\)\s*\{[\s\S]*?\.mobile-nav-bar\s*\{[\s\S]*?display:\s*flex[;\s]/);
|
|
});
|
|
|
|
it("tab touch targets are at least 36px", () => {
|
|
const block = extractRuleBlock(cssContent, ".mobile-nav-tab");
|
|
expect(block).toContain("min-height: 36px");
|
|
});
|
|
|
|
it("footer-aware positioning places nav above footer", () => {
|
|
expect(cssContent).toContain(".mobile-nav-bar--with-footer");
|
|
expect(cssContent).toContain("bottom: 32px");
|
|
});
|
|
|
|
it("defines bottom sheet animation", () => {
|
|
expect(cssContent).toContain("@keyframes mobile-more-sheet-in");
|
|
});
|
|
|
|
it("uses safe-area inset for bottom spacing", () => {
|
|
expect(cssContent).toContain("env(safe-area-inset-bottom");
|
|
});
|
|
|
|
it("tab bar includes z-index", () => {
|
|
const block = extractRuleBlock(cssContent, ".mobile-nav-bar");
|
|
expect(block).toContain("z-index: 45");
|
|
});
|
|
|
|
it("sheet items maintain 36px touch targets", () => {
|
|
const block = extractRuleBlock(cssContent, ".mobile-more-item");
|
|
expect(block).toContain("min-height: 36px");
|
|
});
|
|
|
|
it("defines content padding rule for mobile nav", () => {
|
|
expect(mobileMediaBlock).toContain(".project-content--with-mobile-nav");
|
|
expect(cssContent).toContain(".project-content--with-footer.project-content--with-mobile-nav");
|
|
});
|
|
});
|