ece4a667f9
- Restructure Header.tsx to render Scripts as a submenu of Terminal in compact/tablet overflow menus - Add submenu toggle state, keyboard navigation, and click-outside-to-close behavior - Add CSS for nested submenu styling with slide-in animation and depth indicators - Update Header tests to verify Scripts nested under Terminal with toggle interaction - Update mobile-header-controls and tablet-header-controls tests for new menu hierarchy - Update README documentation to reflect the Terminal > Scripts submenu structure
104 lines
3.8 KiB
TypeScript
104 lines
3.8 KiB
TypeScript
import { describe, it, expect } from "vitest";
|
|
import { readFileSync } from "fs";
|
|
import { resolve } from "path";
|
|
|
|
/**
|
|
* Stylesheet regression test for mobile header controls.
|
|
*
|
|
* This test verifies that the CSS file contains the necessary mobile
|
|
* header selectors and rules for:
|
|
* - Collapsed search trigger (.mobile-search-trigger)
|
|
* - Expanded mobile search panel (.mobile-search-expanded)
|
|
* - Compact overflow trigger (.compact-overflow-trigger)
|
|
* - Overflow menu popover (.mobile-overflow-menu, .mobile-overflow-item)
|
|
*
|
|
* The overflow trigger and menu styles are defined at the top level (shared
|
|
* by mobile and tablet viewports), while the mobile search styles remain
|
|
* inside @media (max-width: 768px) blocks.
|
|
*/
|
|
|
|
describe("mobile-header-controls.css", () => {
|
|
const cssPath = resolve(__dirname, "../styles.css");
|
|
const cssContent = readFileSync(cssPath, "utf-8");
|
|
|
|
// Extract all content from @media (max-width: 768px) blocks
|
|
// This is a simplified approach - we find all mobile media blocks and join them
|
|
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;
|
|
// Find the matching closing brace by counting braces
|
|
let braceCount = 1;
|
|
let endIdx = startIdx;
|
|
while (braceCount > 0 && endIdx < content.length) {
|
|
if (content[endIdx] === "{") braceCount++;
|
|
if (content[endIdx] === "}") braceCount--;
|
|
endIdx++;
|
|
}
|
|
if (braceCount === 0) {
|
|
blocks.push(content.slice(startIdx, endIdx - 1));
|
|
}
|
|
}
|
|
return blocks.join("\n");
|
|
}
|
|
|
|
const mobileCss = extractMobileMediaBlocks(cssContent);
|
|
|
|
it("contains at least one @media (max-width: 768px) block", () => {
|
|
expect(mobileCss.length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it("has mobile search trigger styles", () => {
|
|
expect(mobileCss).toContain(".mobile-search-trigger");
|
|
});
|
|
|
|
it("has mobile search expanded panel styles", () => {
|
|
expect(mobileCss).toContain(".mobile-search-expanded");
|
|
});
|
|
|
|
it("has compact overflow trigger styles at top level (shared mobile/tablet)", () => {
|
|
expect(cssContent).toContain(".compact-overflow-trigger");
|
|
});
|
|
|
|
it("has overflow menu styles at top level (shared mobile/tablet)", () => {
|
|
expect(cssContent).toContain(".mobile-overflow-menu");
|
|
expect(cssContent).toContain(".mobile-overflow-item");
|
|
});
|
|
|
|
it("has overflow menu item hover states", () => {
|
|
expect(cssContent).toMatch(/\.mobile-overflow-item:hover/);
|
|
});
|
|
|
|
it("has terminal submenu styles for nested scripts under terminal", () => {
|
|
expect(cssContent).toContain(".mobile-overflow-group");
|
|
expect(cssContent).toContain(".mobile-overflow-submenu");
|
|
expect(cssContent).toContain(".mobile-overflow-subitem");
|
|
expect(cssContent).toContain(".mobile-overflow-chevron");
|
|
});
|
|
|
|
it("does not contain obsolete mobile header search wrap rules", () => {
|
|
// The old @media (max-width: 640px) and @media (max-width: 480px)
|
|
// header search rules should be removed
|
|
const removedPatterns = [
|
|
/@media\s*\(\s*max-width:\s*640px\s*\)\s*\{[^}]*\.header-search/s,
|
|
/@media\s*\(\s*max-width:\s*480px\s*\)\s*\{[^}]*\.header-search/s,
|
|
];
|
|
|
|
for (const pattern of removedPatterns) {
|
|
expect(cssContent).not.toMatch(pattern);
|
|
}
|
|
});
|
|
|
|
it("has position relative on header-actions for absolute positioning", () => {
|
|
// Find the .header-actions rule and check for position: relative
|
|
const headerActionsMatch = cssContent.match(/\.header-actions\s*\{([^}]+)\}/);
|
|
expect(headerActionsMatch).toBeTruthy();
|
|
if (headerActionsMatch) {
|
|
expect(headerActionsMatch[1]).toContain("position: relative");
|
|
}
|
|
});
|
|
});
|