Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: accessibility tests #194

Merged
merged 7 commits into from
Oct 29, 2024
Merged

feat: accessibility tests #194

merged 7 commits into from
Oct 29, 2024

Conversation

melniiv
Copy link
Contributor

@melniiv melniiv commented Oct 28, 2024

Description

  • Installed and configured with a11y plugin for storybook which allows to run the AXE tests automatically in the UI when storybook is running and run from scripts
  • configured scripts
  • Fixed found accessibility issues

Issues

Closes

HCRC-123:

Related

Testing

Automated tests

Manual testing

Screenshots

Additional notes

@karisal-anders
Copy link
Contributor

Tried with node 20.18.0 on Windows 11 with "yarn" + "yarn storybook", and then when storybook was running, "yarn test-storybook" in another terminal. Needed to install web browsers for testing first though, so "yarn playwright install" and then "yarn test-storybook" went through. All tests passed:

All tests passed (Click to expand)
$ yarn test-storybook
yarn run v1.22.22
$ test-storybook
[test-storybook] The "preRender" hook is deprecated and will be removed in later versions. Please use "preVisit" instead in your test-runner config file.
[test-storybook] The "postRender" hook is deprecated and will be removed in later versions. Please use "postVisit" instead in your test-runner config file.
jest-haste-map: duplicate manual mock found: articles.mock.d
  The following files share their name; please delete one of them:
    * <rootDir>\dist\src\core\archiveSearchPageContent\__mocks__\articles.mock.d.ts
    * <rootDir>\dist\cjs\src\core\archiveSearchPageContent\__mocks__\articles.mock.d.ts

jest-haste-map: duplicate manual mock found: pageChildrenSearch.mock.d
  The following files share their name; please delete one of them:
    * <rootDir>\dist\src\core\archiveSearchPageContent\__mocks__\pageChildrenSearch.mock.d.ts
    * <rootDir>\dist\cjs\src\core\archiveSearchPageContent\__mocks__\pageChildrenSearch.mock.d.ts

jest-haste-map: duplicate manual mock found: categories.mock.d
  The following files share their name; please delete one of them:
    * <rootDir>\dist\src\core\archiveSearchPageContent\__mocks__\categories.mock.d.ts
    * <rootDir>\dist\cjs\src\core\archiveSearchPageContent\__mocks__\categories.mock.d.ts

jest-haste-map: duplicate manual mock found: pages.mock.d
  The following files share their name; please delete one of them:
    * <rootDir>\dist\src\core\archiveSearchPageContent\__mocks__\pages.mock.d.ts
    * <rootDir>\dist\cjs\src\core\archiveSearchPageContent\__mocks__\pages.mock.d.ts

jest-haste-map: duplicate manual mock found: card.mock.d
  The following files share their name; please delete one of them:
    * <rootDir>\dist\src\core\card\__mocks__\card.mock.d.ts
    * <rootDir>\dist\cjs\src\core\card\__mocks__\card.mock.d.ts

jest-haste-map: duplicate manual mock found: navigationMenu.mock.d
  The following files share their name; please delete one of them:
    * <rootDir>\dist\src\core\navigation\__mocks__\navigationMenu.mock.d.ts
    * <rootDir>\dist\cjs\src\core\navigation\__mocks__\navigationMenu.mock.d.ts

jest-haste-map: duplicate manual mock found: navigationLanguages.mock.d
  The following files share their name; please delete one of them:
    * <rootDir>\dist\src\core\navigation\__mocks__\navigationLanguages.mock.d.ts
    * <rootDir>\dist\cjs\src\core\navigation\__mocks__\navigationLanguages.mock.d.ts

jest-haste-map: duplicate manual mock found: navigationUniversalBarMenu.mock.d
  The following files share their name; please delete one of them:
    * <rootDir>\dist\src\core\navigation\__mocks__\navigationUniversalBarMenu.mock.d.ts
    * <rootDir>\dist\cjs\src\core\navigation\__mocks__\navigationUniversalBarMenu.mock.d.ts

jest-haste-map: duplicate manual mock found: article.mock.d
  The following files share their name; please delete one of them:
    * <rootDir>\dist\src\core\pageContent\__mocks__\article.mock.d.ts
    * <rootDir>\dist\cjs\src\core\pageContent\__mocks__\article.mock.d.ts

jest-haste-map: duplicate manual mock found: pageWithDiverseContent.mock.d
  The following files share their name; please delete one of them:
    * <rootDir>\dist\src\core\pageContent\__mocks__\pageWithDiverseContent.mock.d.ts
    * <rootDir>\dist\cjs\src\core\pageContent\__mocks__\pageWithDiverseContent.mock.d.ts

jest-haste-map: duplicate manual mock found: page.mock.d
  The following files share their name; please delete one of them:
    * <rootDir>\dist\src\core\pageContent\__mocks__\page.mock.d.ts
    * <rootDir>\dist\cjs\src\core\pageContent\__mocks__\page.mock.d.ts

jest-haste-map: duplicate manual mock found: notification.mock.d
  The following files share their name; please delete one of them:
    * <rootDir>\dist\src\core\notification\__mocks__\notification.mock.d.ts
    * <rootDir>\dist\cjs\src\core\notification\__mocks__\notification.mock.d.ts

 PASS   browser: chromium  src/core/pageModules/SocialMediaFeedModule/SocialMediaFeedModule.stories.tsx (9.762 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/core/pageModules/ImageGalleryModule/ImageGalleryModule.stories.tsx (9.763 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/core/pageModules/StepsModule/StepsModule.stories.tsx (9.854 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/core/link/Link.stories.tsx (9.855 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/core/cardsList/CardsList.stories.tsx (9.968 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/common/components/htmlToReact/HtmlToReact.stories.tsx (10.39 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/core/pageModules/CardsModule/CardsModule.stories.tsx (13.044 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/core/carousel/Carousel.stories.tsx (13.546 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/core/page/Page.stories.tsx (13.72 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/apollo/apollo-custom-template.stories.tsx (13.83 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/core/collection/Collection.stories.tsx (14.35 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/core/archiveSearchPage/ArchiveSearchPage.stories.tsx (14.757 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/apollo/apollo.stories.tsx (14.803 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/core/card/Card.stories.tsx (14.915 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/common/components/grid/Grid.stories.tsx
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/common/components/text/Text.stories.tsx (5.217 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/core/linkBox/Link.stories.tsx (5.308 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/core/pageModules/ContentModule/ContentModule.stories.tsx (5.438 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/core/pageModules/CardModule/CardModule.stories.tsx (5.551 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/core/card/LargeCard.stories.tsx (5.51 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/core/contentContainer/ContentContainer.stories.tsx
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/common/components/list/List.stories.tsx
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/core/pageSection/PageSection.stories.tsx
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/core/pageContent/PageContent.stories.tsx (16.166 s)
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/core/hero/Hero.stories.tsx
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

 PASS   browser: chromium  src/common/components/tag/Tag.stories.tsx
  ● Console

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)

    console.log
      No accessibility violations detected!

      at DefaultTerminalReporter.<anonymous> (node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:47:41)


Test Suites: 26 passed, 26 total
Tests:       49 passed, 49 total
Snapshots:   0 total
Time:        21.324 s
Ran all test suites.
Done in 22.75s.

There were some warnings given by test-storybook:

[test-storybook] The "preRender" hook is deprecated and will be removed in later versions. Please use "preVisit" instead in your test-runner config file.
[test-storybook] The "postRender" hook is deprecated and will be removed in later versions. Please use "postVisit" instead in your test-runner config file.
jest-haste-map: duplicate manual mock found: articles.mock.d
  The following files share their name; please delete one of them:
    * <rootDir>\dist\src\core\archiveSearchPageContent\__mocks__\articles.mock.d.ts
    * <rootDir>\dist\cjs\src\core\archiveSearchPageContent\__mocks__\articles.mock.d.ts
...

See the "All tests passed (Click to expand)" for all the warnings.

await injectAxe(page);
},
postRender: async (page) => {
// after the story has been rendered rn AXE checksonly on root not the whole page
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
// after the story has been rendered rn AXE checksonly on root not the whole page
// after the story has been rendered, run AXE checks only on root, not the whole page

Copy link
Contributor Author

Choose a reason for hiding this comment

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

fixed

Comment on lines 11 to 13
const INTEGRITY_CHECKSUM = '3d6b9f06410d179a7f7404d4bf4c3c70'
const activeClientIds = new Set()
const INTEGRITY_CHECKSUM = '3d6b9f06410d179a7f7404d4bf4c3c70';
const activeClientIds = new Set();

Copy link
Contributor

Choose a reason for hiding this comment

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

This file starts with:

/* eslint-disable */
/* tslint:disable */
/**
 * Mock Service Worker (1.2.3).
 * @see https://github.com/mswjs/msw
 * - Please do NOT modify this file.
 * - Please do NOT serve this file on production.
 */

This file should probably be completely ignored by prettier also so it doesn't try to change anything in this file.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

fixed

@melniiv
Copy link
Contributor Author

melniiv commented Oct 28, 2024

fixed the jest warnings

Copy link
Contributor

@karisal-anders karisal-anders left a comment

Choose a reason for hiding this comment

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

Looks ok otherwise, only the jest-haste-map warnings still at the beginning of "test-storybook"'s output i.e.

$ yarn test-storybook
yarn run v1.22.22
$ test-storybook
jest-haste-map: duplicate manual mock found: articles.mock.d
  The following files share their name; please delete one of them:
    * <rootDir>\dist\src\core\archiveSearchPageContent\__mocks__\articles.mock.d.ts
    * <rootDir>\dist\cjs\src\core\archiveSearchPageContent\__mocks__\articles.mock.d.ts

jest-haste-map: duplicate manual mock found: categories.mock.d
  The following files share their name; please delete one of them:
    * <rootDir>\dist\src\core\archiveSearchPageContent\__mocks__\categories.mock.d.ts
    * <rootDir>\dist\cjs\src\core\archiveSearchPageContent\__mocks__\categories.mock.d.ts
...

@karisal-anders
Copy link
Contributor

Looks ok otherwise, only the jest-haste-map warnings still at the beginning of "test-storybook"'s output i.e.

$ yarn test-storybook
yarn run v1.22.22
$ test-storybook
jest-haste-map: duplicate manual mock found: articles.mock.d
  The following files share their name; please delete one of them:
    * <rootDir>\dist\src\core\archiveSearchPageContent\__mocks__\articles.mock.d.ts
    * <rootDir>\dist\cjs\src\core\archiveSearchPageContent\__mocks__\articles.mock.d.ts

jest-haste-map: duplicate manual mock found: categories.mock.d
  The following files share their name; please delete one of them:
    * <rootDir>\dist\src\core\archiveSearchPageContent\__mocks__\categories.mock.d.ts
    * <rootDir>\dist\cjs\src\core\archiveSearchPageContent\__mocks__\categories.mock.d.ts
...

"yarn build" + "yarn storybook" in one terminal, then "yarn test-storybook" -> jest-haste-map warnings went away. So basically "yarn build" helped with removing the jest-haste-map warnings when running the storybook tests.

@melniiv melniiv merged commit cf9beb7 into main Oct 29, 2024
1 check passed
@melniiv melniiv deleted the tests-improvements branch October 29, 2024 09:21
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.

2 participants