Set up jest-axe for a11y testing #2262

beaesguerra · 2024-06-27T20:22:46Z

Summary:

Configure jest-axe
Adds toHaveNoA11yViolations matcher for jest tests
Configure jest await async lint rule for toHaveNoA11yViolations matcher. This is so we don't forget to await the a11y checks. Also fixing some linting issues that were caught when this rule was enabled
Adds an example a11y test for Title component

Note: this set up is similar to how jest-axe is set up in webapp (I referenced this jest-axe webapp PR!)

Test plan:

Run unit tests and linting to make sure there are no errors
Manually tested jest-axe is working by making sure that it catches expected a11y errors locally. Used this example with headings that are out of order:

test("expect a11y test to fail", async () => {
  // Arrange
  // Act
  const {container} = render(
      <div>
        <h1>title1</h1>
        <h3>title2</h3>
      </div>,
  );

  // Assert
  await expect(container).toHaveNoA11yViolations();
});

This is so we don't forget to await the a11y checks. Also fixing some linting issues that were caught when this rule was enabled

changeset-bot · 2024-06-27T20:22:50Z

🦋 Changeset detected

Latest commit: c969e7a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2024-06-27T20:25:28Z

Size Change: 0 B

Total Size: 97.1 kB

ℹ️ View Unchanged

Filename	Size
`packages/wonder-blocks-accordion/dist/es/index.js`	3.78 kB
`packages/wonder-blocks-banner/dist/es/index.js`	1.53 kB
`packages/wonder-blocks-birthday-picker/dist/es/index.js`	1.72 kB
`packages/wonder-blocks-breadcrumbs/dist/es/index.js`	1.13 kB
`packages/wonder-blocks-button/dist/es/index.js`	4.28 kB
`packages/wonder-blocks-cell/dist/es/index.js`	2.25 kB
`packages/wonder-blocks-clickable/dist/es/index.js`	3.3 kB
`packages/wonder-blocks-core/dist/es/index.js`	3.66 kB
`packages/wonder-blocks-data/dist/es/index.js`	6.34 kB
`packages/wonder-blocks-dropdown/dist/es/index.js`	14.4 kB
`packages/wonder-blocks-form/dist/es/index.js`	5.34 kB
`packages/wonder-blocks-grid/dist/es/index.js`	1.36 kB
`packages/wonder-blocks-i18n/dist/es/index.js`	4.6 kB
`packages/wonder-blocks-icon-button/dist/es/index.js`	3.23 kB
`packages/wonder-blocks-icon/dist/es/index.js`	1.06 kB
`packages/wonder-blocks-labeled-field/dist/es/index.js`	72 B
`packages/wonder-blocks-layout/dist/es/index.js`	1.94 kB
`packages/wonder-blocks-link/dist/es/index.js`	2.53 kB
`packages/wonder-blocks-modal/dist/es/index.js`	5.51 kB
`packages/wonder-blocks-pill/dist/es/index.js`	1.64 kB
`packages/wonder-blocks-popover/dist/es/index.js`	4.85 kB
`packages/wonder-blocks-progress-spinner/dist/es/index.js`	1.52 kB
`packages/wonder-blocks-search-field/dist/es/index.js`	1.54 kB
`packages/wonder-blocks-switch/dist/es/index.js`	2.09 kB
`packages/wonder-blocks-testing/dist/es/index.js`	3.94 kB
`packages/wonder-blocks-theming/dist/es/index.js`	693 B
`packages/wonder-blocks-timing/dist/es/index.js`	1.8 kB
`packages/wonder-blocks-tokens/dist/es/index.js`	1.74 kB
`packages/wonder-blocks-toolbar/dist/es/index.js`	855 B
`packages/wonder-blocks-tooltip/dist/es/index.js`	6.91 kB
`packages/wonder-blocks-typography/dist/es/index.js`	1.48 kB

_{compressed-size-action}

codecov · 2024-06-27T20:25:33Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.36%. Comparing base (dcafa86) to head (c969e7a).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2262      +/-   ##
==========================================
+ Coverage   93.91%   96.36%   +2.45%     
==========================================
  Files         248      248              
  Lines       29514    29514              
  Branches     2407     2538     +131     
==========================================
+ Hits        27717    28441     +724     
+ Misses       1793     1056     -737     
- Partials        4       17      +13

see 54 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update dcafa86...c969e7a. Read the comment docs.

github-actions · 2024-06-27T20:25:55Z

A new build was pushed to Chromatic! 🚀

undefined

Chromatic results:

Metric	Total
Captured snapshots	undefined
Tests with visual changes	undefined
Total stories	undefined
Inherited (not captured) snapshots [TurboSnap]	undefined
Tests on the build	undefined

…check

beaesguerra · 2024-06-27T20:34:01Z

packages/wonder-blocks-layout/src/util/test-util.test.ts

@@ -47,7 +47,7 @@ describe("Test utils", () => {
            await promise;

            // Assert
-            expect(promise).resolves.toHaveProperty("type", "resize");


Fixing this after the jest-await-async-matchers rule caught this

beaesguerra · 2024-06-27T20:37:49Z

packages/wonder-blocks-testing/src/__tests__/respond-with.test.ts

@@ -259,7 +259,7 @@ describe("RespondWith", () => {
            const act = Promise.race([settleableResponse, otherResponse]);

            // Assert
-            await expect(act).resolves;


The jest-await-async-matchers linting rule was complaining about this too. The suggested fix was to add await before it(...) where we define the test case, but that had errors too. Updating it to use toResolve instead seemed to fix it and the tests still pass. Let me know if you have any other suggestions for this!

beaesguerra · 2024-06-27T20:58:10Z

.github/workflows/node-ci-pr.yml

@@ -53,7 +53,7 @@ jobs:
        with:
            changed-files: ${{ steps.changed.outputs.files }}
            files: packages/ # Only look for changes in packages
-            globs: "!(**/__tests__/**), !(**/dist/*)" # Ignore test files
+            globs: "!(**/__tests__/**), !(**/dist/*), !(**/*.test.ts)" # Ignore test files


Excluding .test.ts files from the changeset check

It was failing previously because there was no changeset for the wonder-blocks-layout package. A changeset isn't needed since this package only has an updated test!

Error: Changeset entry required for @khanacademy/wonder-blocks-layout because there have been changes since the last release.

khan-actions-bot · 2024-06-27T21:07:36Z

Gerald

Required Reviewers

@Khan/wonder-blocks for changes to .eslintrc.js, package.json, yarn.lock, .changeset/rotten-bats-count.md, types/matchers.d.ts, .github/workflows/node-ci-pr.yml, config/jest/test.config.js, config/jest/matchers/to-have-no-a11y-violations.ts, packages/wonder-blocks-layout/src/util/test-util.test.ts, packages/wonder-blocks-testing/src/__tests__/respond-with.test.ts, packages/wonder-blocks-typography/src/components/__tests__/title.test.tsx

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

github-actions · 2024-06-27T21:07:50Z

npm Snapshot: NOT Published

🤕 Oh noes!! We couldn't find any changesets in this PR (7a516f9). As a result, we did not publish an npm snapshot for you.

jeresig

These changes all look reasonable to me, thank you Bea!

beaesguerra added 3 commits June 26, 2024 17:12

Adds toHaveNoA11yViolations for jest-axe tests

928643d

Add an example test that uses

31b5a6f

Configure jest await async lint rule for toHaveNoA11yViolations matcher

0dbde51

This is so we don't forget to await the a11y checks. Also fixing some linting issues that were caught when this rule was enabled

beaesguerra self-assigned this Jun 27, 2024

beaesguerra added 3 commits June 27, 2024 14:31

Merge branch 'main' into setup-jest-axe

3307417

add empty changeset

3e12e4c

Exclude test files that are not in a test directory in the changeset …

c969e7a

…check

beaesguerra commented Jun 27, 2024

View reviewed changes

beaesguerra marked this pull request as ready for review June 27, 2024 21:07

khan-actions-bot requested a review from a team June 27, 2024 21:07

jeresig approved these changes Jun 28, 2024

View reviewed changes

beaesguerra merged commit 69c6b37 into main Jun 28, 2024
41 of 43 checks passed

beaesguerra deleted the setup-jest-axe branch June 28, 2024 15:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Set up jest-axe for a11y testing #2262

Set up jest-axe for a11y testing #2262

Uh oh!

beaesguerra commented Jun 27, 2024 •

edited

Loading

Uh oh!

changeset-bot bot commented Jun 27, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Jun 27, 2024 •

edited

Loading

Uh oh!

codecov bot commented Jun 27, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Jun 27, 2024 •

edited

Loading

Uh oh!

beaesguerra Jun 27, 2024

Uh oh!

beaesguerra Jun 27, 2024

Uh oh!

beaesguerra Jun 27, 2024

Uh oh!

khan-actions-bot commented Jun 27, 2024

Uh oh!

github-actions bot commented Jun 27, 2024

Uh oh!

jeresig left a comment

Uh oh!

Uh oh!

Uh oh!

Set up jest-axe for a11y testing #2262

Set up jest-axe for a11y testing #2262

Uh oh!

Conversation

beaesguerra commented Jun 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary:

Test plan:

Uh oh!

changeset-bot bot commented Jun 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Jun 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jun 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions bot commented Jun 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

A new build was pushed to Chromatic! 🚀

Chromatic results:

Uh oh!

beaesguerra Jun 27, 2024

Choose a reason for hiding this comment

Uh oh!

beaesguerra Jun 27, 2024

Choose a reason for hiding this comment

Uh oh!

beaesguerra Jun 27, 2024

Choose a reason for hiding this comment

Uh oh!

khan-actions-bot commented Jun 27, 2024

Gerald

Uh oh!

github-actions bot commented Jun 27, 2024

npm Snapshot: NOT Published

Uh oh!

jeresig left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

beaesguerra commented Jun 27, 2024 •

edited

Loading

changeset-bot bot commented Jun 27, 2024 •

edited

Loading

github-actions bot commented Jun 27, 2024 •

edited

Loading

codecov bot commented Jun 27, 2024 •

edited

Loading

github-actions bot commented Jun 27, 2024 •

edited

Loading