test(RunResults): stage 3 — Cypress component tests for run-status pill - #698
Open
emilmilanov wants to merge 1 commit into
Open
test(RunResults): stage 3 — Cypress component tests for run-status pill#698emilmilanov wants to merge 1 commit into
emilmilanov wants to merge 1 commit into
Conversation
Extends the shared `assertions.ts` with a `run-status pill` describe block covering everything the pill can do, plus framework-specific `renderLink` integration tests in each cy.tsx spec. Both mount helpers (regular + a11y) now thread the `runStatus` prop through so stage 4 can build on the same wiring. Coverage in the shared module (runs against BOTH React and Vue — enforces DOM parity): - **Presence and segments** — pill absent without `runStatus`; renders BEFORE the test-counts pill in DOM order (contract lock); `#N` + status icon always; branch segment only when `branch` is set; divider only present with a second segment; long branch truncation at 260px. - **Link vs unlinked** — `#N` is `<a>` when `href` set / `<span>` otherwise; branch is ALWAYS `<span>` (regression guard for the `branchHref` removal in commit 8408c05). - **Variants** — `base` has no hover:after:shadow-*; `link` carries the status-colored hover border class; both variants render the same neutral gray-100 resting `::after` shadow (regression guard for the design-review change in commit 3b0b5c0). - **Status colors** — sample one status per palette bucket (jade / red / indigo / gray / orange) to lock in `RUN_STATUS_TEXT_CLASSES` and `RUN_STATUS_BORDER_CLASSES` without exhaustively repeating for each of the 8 statuses. - **Themes** — light `bg-gray-50` + gray-100 border shadow; dark `bg-gray-950` + gray-800 border shadow; branch text color inverts per theme. - **Runtime guard** — invalid status → no wrapper when test-counts also empty; invalid status + counts → wrapper renders without the pill; `console.warn` fires. Uses the global `console.warn` spy from cypress/support/component.ts and resets its history in afterEach so the global callCount(0) check still passes. Distinct invalid values per test because `warnInvalidRunStatus` dedupes by status. - **data-cy contract** — `run-status`, `run-status-build-number`, `run-status-icon`, `run-status-branch`, `run-status-branch-icon`. - **Spacing** — 8px segment padding-left, 0px right on the segment that hosts the divider (via `runStatusSegmentDividerAdjacent`), 8px branch padding, 8px inter-pill gap. - **Percy** — link/passed light, link/failed dark, and a combined row (run-status + branch + test counts). Broader coverage stays in the demo page. Framework-specific in each cy.tsx spec: - `renderLink also wraps the run-status #N segment` — verifies the same callback is used for both pills. Kept per-framework because React expects a `ReactNode` and Vue expects a `VNode` — no way to share the JSX in `assertions.ts`. Verified live: `yarn cy:run` on both `RunResultsReact.cy.tsx` and `RunResultsVue.cy.tsx` — 56 tests each, all passing. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
2 tasks
cypress-design
 |
||||||||||||||||||||||||||||
| Project |
cypress-design
|
| Branch Review |
runresults-runstatus-tests
|
| Run status |
|
| Run duration | 02m 15s |
| Commit |
|
| Committer | Emil Milanov |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
 |
0
|
 |
0
|
 |
0
|
 |
0
|
 |
2
|
| View all changes introduced in this branch ↗︎ | |
Warning
No Report: Something went wrong and we could not generate a report for the Application Quality products.
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.
Problem and goal
Stage 3 of the RunResults run-status pill work. Stacks on top of #696 — extends the shared
assertions.tswith a full test suite for the new run-status pill (56 tests total per framework, up from the previous 40).Every test in the shared module runs against BOTH React and Vue, so DOM parity between frameworks is enforced by construction — if one framework's rendering diverges from the other, its spec fails. This addresses the "silent drift risk" suggestion from the code review on #696.
What's tested
Shared (React + Vue via
assertions.ts)runStatus; renders BEFORE the test-counts pill in DOM order (contract lock);#N+ status icon always; branch segment only whenbranchis set; divider only present with a second segment; long branch truncation at 260px.#Nis<a>whenhrefset /<span>otherwise; branch is ALWAYS<span>(regression guard for thebranchHrefremoval in commit8408c052).basehas nohover:after:shadow-*;linkcarries the status-colored hover border class; both variants render the same neutral gray-100 resting::aftershadow (regression guard for the design-review change in3b0b5c08).bg-gray-50+ gray-100 border shadow; darkbg-gray-950+ gray-800 border shadow; branch text color inverts per theme.Framework-specific (in each cy.tsx spec)
Mount helper updates
All four spec files (React + Vue × regular + a11y) now thread the `runStatus` prop through their `mountStory` helper so stage 4 can build on the same wiring.
Verification
Test plan
Stacks on #696. Stage 4 (`runresults-runstatus-accessibility`) will stack on this.
🤖 Generated with Claude Code
Note
Low Risk
Test-only changes to Cypress specs and shared assertions; no runtime or API behavior is modified in this diff.
Overview
Adds stage 3 component-test coverage for the RunResults run-status pill, with no production code changes.
Shared
assertions.tsgains a largerun-status pillsuite that runs for both React and Vue: presence/DOM order before test counts, optional branch segment and divider, link vs span rules (including branch never linkable),basevslinkvariants, status color tokens, light/dark theming, invalid-status skip +console.warn(with spy reset inafterEach),data-cyselectors, spacing, and Percy snapshots.All four
mountStoryhelpers now passrunStatusso shared and a11y specs can exercise the pill.React and Vue specs each add one test that
renderLinkwraps the run-status #N segment (with forwardedclassName), since that JSX cannot live in the shared module.Reviewed by Cursor Bugbot for commit 5f9f6a5. Bugbot is set up for automated code reviews on this repo. Configure here.