Skip to content

[NOT MERGE] PoC: Storybook a11y testing in CI#217434

Closed
smith wants to merge 36 commits intoelastic:mainfrom
smith:nls/sb-a11y
Closed

[NOT MERGE] PoC: Storybook a11y testing in CI#217434
smith wants to merge 36 commits intoelastic:mainfrom
smith:nls/sb-a11y

Conversation

@smith
Copy link
Copy Markdown
Contributor

@smith smith commented Apr 8, 2025

This PR follows these docs:

To run the axe tests on all the APM stories, do:

yarn storybook apm & # Have the APM storybook running on localhost:9001
cd x-pack/solutions/observability/plugins/apm
npx test-storybook --url http://localhost:9001

What was done in this PR:

  • Added test-runner.ts for apm
  • skipped, disabled failings for now
    For CI
  • Added a helper script/command to package.jsontest:storybook, to call these tests easier
  • Created a sh file in .buildkite/scripts/steps/storybooks/ to call the new command in CI. Made sure to chmod +x the sh file.
  • Added a step to .buildkite/pipelines/pull_request/storybooks.yml. The step have soft_fail: true for now  and calls the new sh script.

Note

Removed some outdated snapshots when running the tests locally, not sure why they show up as they are not related with APM

@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Apr 8, 2025

🤖 Jobs for this PR can be triggered through checkboxes. 🚧

ℹ️ To trigger the CI, please tick the checkbox below 👇

  • Click to trigger kibana-pull-request for this PR!
  • Click to trigger kibana-deploy-project-from-pr for this PR!
  • Click to trigger kibana-deploy-cloud-from-pr for this PR!

@MiriamAparicio MiriamAparicio self-assigned this Apr 8, 2025
@MiriamAparicio
Copy link
Copy Markdown
Contributor

Example of violations results in storybook UI
image

smith and others added 4 commits April 23, 2025 12:33
This is how far I got partially following these docs:

* https://storybook.js.org/docs/writing-tests/accessibility-testing
* https://storybook.js.org/docs/writing-tests/test-runner

To run the axe tests on all the APM stories, do:

```sh
yarn storybook apm & # Have the APM storybook running on localhost:9001
cd x-pack/solutions/observability/plugins/apm
npx test-storybook --url http://localhost:9001
```

At the end you should get:

```
Test Suites: 28 failed, 15 passed, 43 total
Tests:       46 failed, 26 passed, 72 total
Snapshots:   0 total
Time:        49.085 s
Ran all test suites.
```

Neat!

What's missing from this PR?

* This needs to run in CI
* But for every plugin? Maybe only run it for plugins that have added a test-runner.ts file?
* I have not looked at the results. Some could be failing because the component is failing to render, some do have actual a11y violations. Some are passing, some are failing.
* There's a ton of warnings
* I think there's a way to get the test feedback red/green in the storybook UI.
* I just added the test-runner.ts to the apm plugin and have not tried any others.
* It updated a bunch of unrelated snapshots. I did run it with `-u` because it said there were snapshot updated but I have no idea why ones in api integrations are being deleted.
@kibanamachine kibanamachine requested a review from a team May 5, 2025 10:06
@MiriamAparicio
Copy link
Copy Markdown
Contributor

ci:build-storybooks

@MiriamAparicio MiriamAparicio changed the title PoC: Storybook a11y testing in CI [NOT MERGE] PoC: Storybook a11y testing in CI May 8, 2025
@MiriamAparicio
Copy link
Copy Markdown
Contributor

This PR is waiting for elastic/synthetics#999 to be merged

…urce-definitions/scripts/fix-location-collection.ts'
STORYBOOK_PID=$!

echo "Waiting for Storybook to be ready..."
sleep 60
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we're going to be waiting for a server to be available we should do it by polling the server until it's ready, rather than waiting 60s no matter what. Probably just by putting curl with a HEAD request in a while loop.

@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Jun 2, 2025

💔 Build Failed

Failed CI Steps

History

cc @MiriamAparicio

@smith smith closed this Oct 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants