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

[edwingao28]

Summary

• load src/app/globals.css from the shared Cypress component support file
• add Next.js's CSS insertion anchor to the component test document
• add a regression test for Tailwind visibility and sizing utilities
• scope Header mobile-navigation assertions to a stable mobile-menu test seam
• keep selector-category tooltips above the open MultiSelect panel

Closes #612.

Root cause

Cypress component tests mount React components without the application root layout, so globals.css was never loaded. As a result, Tailwind utilities such as hidden, responsive visibility classes, and sizing utilities were not applied, allowing visibility assertions to pass against an unstyled DOM.

Importing the stylesheet alone is insufficient because Next.js's development style loader also requires the #__next_css__DO_NOT_USE__ insertion anchor.

Once the component harness loaded the real application CSS, it exposed two previously hidden failures:

1. The Header mobile-navigation test selected the earlier, correctly hidden desktop link instead of the mobile link.
2. Selector-category tooltips used z-50, below the open MultiSelect panel at z-[120].

Why these changes are in one PR

The Header and tooltip failures are direct consequences of correcting the Cypress CSS environment. Landing only the harness change would leave the component suite red, while keeping the old assertions would preserve false-positive coverage.

The work remains separated into three reviewable commits:

1. load application CSS and add the regression probe
2. correct the Header mobile-navigation assertions
3. fix the tooltip stacking defect exposed by real CSS

Verification

• Regression probe failed before the harness fix with inline-block and 50.0938 × 21.5px
• Regression probe passed after the fix with display: none and 44 × 44px
• Electron component suite — 27 specs, 183/183 passing, retries=0
• Chrome component suite — 27 specs, 183/183 passing, retries=0
• Header component tests — 8/8 passing
• Chart selector component tests — 7/7 passing
• pnpm fmt
• pnpm lint
• pnpm typecheck
• confirmed globals.css is imported only once by the shared Cypress support file

中文说明

概述

• 在共享 Cypress component support file 中加载 src/app/globals.css
• 在组件测试文档中加入 Next.js CSS 插入锚点
• 增加 Tailwind 可见性及尺寸工具类的回归测试
• 通过稳定的 mobile-menu 测试入口限定 Header 移动端导航断言
• 确保 selector 分类 Tooltip 显示在已打开的 MultiSelect 面板上方

根因

Cypress 组件测试只挂载 React 组件，不会挂载应用根布局，因此此前从未加载 globals.css。这导致 hidden、响应式可见性和尺寸等 Tailwind 工具类没有生效，使部分可见性断言在未应用样式的 DOM 上错误通过。

仅导入样式表仍然不够，因为 Next.js development style loader 还需要 #__next_css__DO_NOT_USE__ CSS 插入锚点。

启用真实应用 CSS 后，测试暴露了两个此前被隐藏的问题：

1. Header 移动端测试选中了 DOM 中位置更靠前、但实际上已经隐藏的桌面导航链接。
2. selector 分类 Tooltip 使用 z-50，低于使用 z-[120] 的 MultiSelect 面板。

为什么放在同一个 PR

Header 和 Tooltip 失败都是修正 Cypress CSS 环境后直接暴露出来的结果。如果只合入测试环境修复，组件测试套件会保持失败；如果保留原有断言，则会继续产生 false positive。

本 PR 仍通过三个独立 commit 保持清晰的 review 和 bisect 边界：

1. 加载应用 CSS 并增加回归 probe
2. 修正 Header 移动端导航断言
3. 修复真实 CSS 暴露的 Tooltip 层级问题

验证

• 修复前 regression probe 为 inline-block、50.0938 × 21.5px
• 修复后 regression probe 为 display: none、44 × 44px
• Electron component suite — 27 specs，183/183 通过，retries=0
• Chrome component suite — 27 specs，183/183 通过，retries=0
• Header component tests — 8/8 通过
• Chart selector component tests — 7/7 通过
• pnpm fmt
• pnpm lint
• pnpm typecheck
• 确认 Cypress 仅在共享 support file 中加载一次 globals.css

---

Note

Low Risk
Test harness and assertion fixes plus a small z-index tweak on tooltips; no auth, data, or core business-logic changes.

Overview
Cypress component tests now mount with real app styles, fixing false-positive visibility checks that passed on an unstyled DOM.

The shared component support imports globals.css and the component index.html adds Next.js’s #__next_css__DO_NOT_USE__ anchor so Tailwind utilities apply in the harness. A new component CSS probe asserts hidden and size-11 resolve to display: none and 44×44px.

With CSS enabled, Header mobile-nav tests are tightened: desktop dashboard links are expected hidden on small viewports, the hamburger asserts aria-expanded, and links are scoped inside data-testid="mobile-menu". The mobile dropdown gains that test id in header.tsx.

Selector category tooltips get z-[130] on TooltipContent so they stack above the open MultiSelect panel (z-[120]).

^{Reviewed by Cursor Bugbot for commit 6fbd468. Bugbot is set up for automated code reviews on this repo. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
inferencemax-app	Ready	Preview, Comment	Jul 22, 2026 6:15pm

[github-actions]

Claude finished @edwingao28's task in 1m 42s —— View job

---

Review: PR #614 — load app CSS in Cypress component tests

🟢 LGTM — no blocking issues found.

I reviewed all 6 changed files, checked CI status, and verified the app renders at runtime.

What I checked:

• Cypress CSS harness (component.ts + component-index.html) — globals.css imported once in the shared support file; the #__next_css__DO_NOT_USE__ anchor is the correct mechanism for Next.js's dev style loader. Regression probe (size-11 → 44px, hidden → display: none) is accurate (size-11 = 2.75rem = 44px).
• Header test scoping — assertions now correctly target [data-testid="mobile-menu"] instead of matching the earlier hidden desktop link, and the added aria-expanded toggle assertion is a genuine behavior check. The data-testid addition to header.tsx is inert (no behavior change).
• Tooltip stacking fix — TooltipContent defaults to z-50; the MultiSelect panel is z-[120] (rendered inline absolute), so the previous tooltip sat behind it. Bumping to z-[130] via className is correctly merged by cn()/tailwind-merge (overrides z-50), and since the tooltip is portaled to <body> it escapes the panel's stacking context and now renders above it. No higher overlay conflicts (header is z-50).
• CI: Lint & Format ✅, Tests (Unit) ✅, Code Quality ✅ (E2E in progress at review time).
• Runtime: /inference loads with 0 console errors.

Test coverage and analytics requirements are satisfied — the new harness ships a regression test, and no new interactive elements were added (only a data-testid and a z-index class).