Add feature spec coverage for the artifacts page
What this does
The project artifacts page had one browser test. It checked the table headers, expanded every row, and checked three file-type labels. Nothing else on the page had feature-spec coverage.
This adds five examples to the same file:
| Example | What it checks |
|---|---|
| Disabled action buttons | Download and Browse are disabled for a job with no archive and no metadata |
| Permission gating | a user who cannot delete artifacts sees no checkboxes and no Delete buttons |
| Single artifact delete | the confirm modal names the artifact, the row goes away, and the job stays expanded |
| Bulk selection controls | a maintainer sees the select-all checkbox and the per-job Delete button |
| Expired badge | an artifact past its expiry date is marked Expired |
Why now
The artifacts pages are moving to Vue 3 behind vue3_migrate_artifacts in !250423 (merged). That change was checked by hand in a browser. These specs make the same flows repeatable.
They are also useful straight away. Feature specs run with feature flags enabled, so once !250423 (merged) lands these examples exercise the page under Vue 3 on every pipeline.
Selectors
The spec queries controls the way a user finds them, not by data-testid:
- Disabled Download and Browse use
have_button(..., disabled: true).spec/support/capybara.rb:134already extends thedisabledfilter toaria-disabled, which is how Pajamas marks a button unavailable, so this matches without an attribute selector. - Deleting an artifact clicks the button by name, so the spec no longer scopes a row through
.vue-recycle-scroller__item-view. That class belongs to the vendored virtual scroller, not to us, and it would have broken on any scroller change.
To make the second one possible, the per-artifact Download and Delete buttons are now named after the artifact. Every row repeats them, so the accessible name used to be just "Delete", which is ambiguous for anyone using a screen reader and gave the spec nothing to address. This is the same defect class as #619205, applied to the buttons rather than the checkboxes.
One data-testid assertion remains, on the select-all checkbox. That control has no accessible name at all, so there is nothing semantic to match until #619205 is fixed. The spec links the issue at that line.
The existing example also had a malformed selector, missing its closing bracket, now replaced with all_by_testid.
Screenshots
The page is unchanged. Accessible names are invisible, so this is the point: the row still renders exactly as before, with the expanded artifacts, their sizes, and the per-artifact buttons.
![]() |
The part a screenshot cannot show, read from the rendered page:
| Artifact | Accessible name | Tooltip |
|---|---|---|
ci_build_artifacts.zip |
Download ci_build_artifacts.zip |
Download |
ci_build_artifacts_metadata.gz |
Download ci_build_artifacts_metadata.gz |
Download |
The tooltip stays short, so the visible label is still contained in the accessible name.
Not covered
- Bulk delete. The selection checkboxes have no accessible name, and the input is
opacity: 0; position: absolute; z-index: -1with a zero-height label. Capybara has nothing to click and nothing to address by name. Forcing it was flaky, so it is left out. #619205 tracks the accessibility defect; the coverage can follow once it is fixed. - Keyset pagination. It needs more than 20 jobs with artifacts, which is slow to set up.
spec/frontend/ci/artifacts/components/job_artifacts_table_spec.jsalready covers the cursor logic.
Test results
bundle exec rspec spec/features/projects/artifacts/user_views_project_artifacts_page_spec.rb — 6 examples, 0 failures.
References
- Closes #619189
- Related accessibility defect: #619205
- Vue 3 migration: !250423 (merged)
MR stack
| Goal | MR |
|---|---|
| Harden tests / guarantee fixes work | Add feature spec coverage for the artifacts page (!251287 - merged) |
| Clean up faulty dependency | Use one vendored copy of vue-virtual-scroller (!251351 - merged) |
| Fix Vite Vue 3 infection | Align Vite and webpack Vue 3 alias resolution (!251350 - merged) |
| Migration of artifacts entrypoints | Add Vue 3 rollout flag for the artifacts pages (!250423 - merged) |
