fix(test): load app CSS in Cypress component tests / 修复 Cypress 组件测试未加载应用 CSS (#614)

edwingao28 · web-flow · commit 2b0dd5a325f1 · 2026-07-22T13:33:30.000-07:00
* test: load app CSS in Cypress component tests

中文：在 Cypress 组件测试中统一加载应用 CSS，并增加 Tailwind 可见性与尺寸回归测试。

* test: scope Header mobile navigation assertions

中文：将 Header 移动端导航断言限定在汉堡菜单容器内（新增 mobile-menu testid），并验证桌面导航在小屏幕下隐藏。

* fix: keep selector category tooltips above dropdowns

中文：提高 selector 分类 Tooltip 的局部层级，避免其被 MultiSelect 选项遮挡。
diff --git a/packages/app/cypress/component/component-css.cy.tsx b/packages/app/cypress/component/component-css.cy.tsx
@@ -0,0 +1,19 @@
+describe('component CSS harness', () => {
+  it('loads Tailwind visibility and sizing utilities', () => {
+    cy.mount(
+      <button type="button" data-testid="css-probe" className="hidden size-11">
+        probe
+      </button>,
+    );
+
+    cy.get('[data-testid="css-probe"]').then(($probe) => {
+      const style = getComputedStyle($probe[0]);
+
+      expect({ display: style.display, width: style.width, height: style.height }).to.deep.equal({
+        display: 'none',
+        width: '44px',
+        height: '44px',
+      });
+    });
+  });
+});
diff --git a/packages/app/cypress/component/header.cy.tsx b/packages/app/cypress/component/header.cy.tsx
@@ -72,10 +72,16 @@ describe('Header', () => {
 
   it('shows mobile hamburger menu on small viewports', () => {
     cy.viewport(375, 812);
-    cy.get('[data-testid="mobile-menu-toggle"]').should('be.visible');
-    cy.get('[data-testid="mobile-menu-toggle"]').click();
-    cy.contains('Dashboard').should('be.visible');
-    cy.contains('Comparisons').should('be.visible');
-    cy.contains('Supporters').should('be.visible');
+    cy.get('[data-testid="nav-link-dashboard"]').should('not.be.visible');
+    cy.get('[data-testid="mobile-menu-toggle"]')
+      .should('be.visible')
+      .and('have.attr', 'aria-expanded', 'false')
+      .click()
+      .should('have.attr', 'aria-expanded', 'true');
+    cy.get('[data-testid="mobile-menu"]').within(() => {
+      cy.contains('a', 'Dashboard').should('be.visible').and('have.attr', 'href', '/inference');
+      cy.contains('a', 'Comparisons').should('be.visible').and('have.attr', 'href', '/compare');
+      cy.contains('a', 'Supporters').should('be.visible').and('have.attr', 'href', '/quotes');
+    });
   });
 });
diff --git a/packages/app/cypress/support/component-index.html b/packages/app/cypress/support/component-index.html
@@ -4,6 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Components App</title>
+    <!-- Used by Next.js to inject CSS. -->
+    <noscript id="__next_css__DO_NOT_USE__"></noscript>
   </head>
   <body>
     <div data-cy-root></div>
diff --git a/packages/app/cypress/support/component.ts b/packages/app/cypress/support/component.ts
@@ -1,5 +1,7 @@
 import { mount } from 'cypress/react';
 
+import '@/app/globals.css';
+
 declare global {
   namespace Cypress {
     interface Chainable {
diff --git a/packages/app/src/components/header/header.tsx b/packages/app/src/components/header/header.tsx
@@ -215,7 +215,10 @@ export const Header = ({ starCount }: { starCount?: number | null }) => {
                 </svg>
               </button>
               {mobileMenuOpen && (
-                <div className="absolute right-0 top-full mt-2 z-50 flex flex-col rounded-lg border border-border bg-background p-1.5 shadow-lg min-w-40">
+                <div
+                  data-testid="mobile-menu"
+                  className="absolute right-0 top-full mt-2 z-50 flex flex-col rounded-lg border border-border bg-background p-1.5 shadow-lg min-w-40"
+                >
                   {navLinks.map(({ href, displayHref, label, event }) => (
                     <Link
                       key={href}
diff --git a/packages/app/src/components/ui/chart-selectors.tsx b/packages/app/src/components/ui/chart-selectors.tsx
@@ -77,7 +77,7 @@ function CategorySectionTitle({ label, reason }: { label: string; reason: string
             data-testid={`selector-category-${label.toLowerCase().replaceAll(' ', '-')}-info`}
           />
         </TooltipTrigger>
-        <TooltipContent side="top" collisionPadding={10}>
+        <TooltipContent side="top" collisionPadding={10} className="z-[130]">
           <span>{reason}</span>
         </TooltipContent>
       </TooltipRoot>
