test(z-order): comprehensive stacking gate across every overlay + page - #92
Merged
Conversation
Adds tests/e2e/z-order.spec.ts (@zOrder) + tests/helpers/zorder.ts: an elementFromPoint-based auditor that opens every floating overlay and asserts it is genuinely the topmost element across its area. Covers, on desktop and phone: the graph-selector + user-menu dropdowns, all four workspace filter dropdowns, the work-item details / create-work-item / create-graph modals, the Type/Status dropdowns nested INSIDE the details modal, the on-canvas node expand peek, the node context menu, the Ontology type-detail modal, the Settings visual-quality dropdown, the Admin create-user modal, toasts firing over an open modal, and the mobile More sheet. Real stacking bugs this class found and fixes: - ViewManager filter bar: backdrop-blur created a stacking context that trapped the filter dropdowns' z-50 behind the content; lift with explicit relative z-50 on the bar. - Toasts (NotificationContext): raised above modals so an alert is never hidden behind an open dialog. Adds stable data-testids to overlay panels that lacked them (graph-selector dropdown, user-menu dropdown, CustomDropdown menu, details Type/Status badges+dropdowns, Ontology/Admin modals, node context menu) plus a harmless window.__notify test hook to fire a toast on demand. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The develop→dev rename left ci.yml and comprehensive-tests.yml triggering on a branch that no longer exists, so no workflow ran on dev or its PRs. Update the push/pull_request branch filters to [main, dev]. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
🧪 Comprehensive Test Suite
Full-stack smoke gate runs in the CI workflow. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
A new z-order / stacking test category — the gap the user named: "simple z ordering of drop downs, modals, and alerts." It opens every floating overlay in the app and asserts (via
document.elementFromPoint) that the overlay is genuinely the topmost element across its own area — catching the symptom where a dropdown/modal/alert renders behind the nav, a panel, or each other.Coverage (desktop 1440 + phone 390)
z-[99999]inside abackdrop-blurmodal)Real bugs this found + fixes
backdrop-blurcreated a stacking context that pinned the dropdowns'z-50behind the content. Fixed with an explicitrelative z-50on the bar.Supporting changes
data-testids on overlay panels that lacked them (graph-selector dropdown, user-menu dropdown, CustomDropdown menu, details Type/Status badges + dropdowns, Ontology/Admin modals, node context menu).window.__notifyhook to fire a toast on demand from tests.Verification
tests/e2e/z-order.spec.ts— 18 pass / 2 skip (phone user-menu is off-canvas; desktop has no create FAB), 0 fail, on local dev.npm run typecheck(web) — clean.TEST_URL=http://localhost:3127 npm run test:smoke— 5/5.🤖 Generated with Claude Code