feat: add `vitest-axe` & update frontend tests #3549

jessicamcinchak · 2024-08-22T11:05:03Z

What is working here

Re-adds editor package.json script test:silent which CI Github workflows expect
Swaps out jest-axe for vitest-axe & updates all a11y tests in src/@planx/components & beyond
- Please note we have to install the pre-release version in order to access toHaveNoViolations (see thread)
- Adds import "vitest-axe/extend-expect"; to src/setupTests.ts
- Imports axe directly from vitest-axe and drops special config from src/testUtils.ts - does this seem okay? I don't think I've hit the SVG issue described in the code comment there yet / guessing it's old & since been resolved?
Updates LOTS of other jest -> vi mocks along the way
Adds per-test timeouts where necessary (see especially some public List component tests or editor Pay tests)
Un-comments tests & .skip()s problematic ones so they're easier to globally search for in the final migration stretch!

What's not working yet / let's address in a follow up PR ?

All tests relying on mockedAxios are skipped - getting a mockResolvedValueOnce function not defined error (FileUploadAndLabel, Send)
All tests relying on vi.spyOn() for the "default" function are skipped (see thread, haven't quite sorted solution yet) (PlanningConstraints)
Airbrake notifier tests - again a more complicated mock / spy to figure out!

Some unexpected linting stuff picked up with these changes has added extra noise to an already big PR, sorry!

…rd details (#3545)

github-actions · 2024-08-22T11:27:57Z

Removed vultr server and associated DNS entries

jessicamcinchak · 2024-08-23T08:29:29Z

Replace Jest with Vitest in Editor to fix CI build issues

jessicamcinchak · 2024-08-26T07:20:19Z

editor.planx.uk/src/@planx/components/Pay/Editor.test.tsx

@@ -107,10 +106,10 @@ describe("Pay component - Editor Modal", () => {
      expect(getByDisplayValue("myValue")).toBeInTheDocument();
    });

-    it("allows new values to be added", async () => {
+    it("allows new values to be added", { timeout: 20000 }, async () => {


rather than a single jest.setTimeout(2000) at the top of the file, I've gone for per-test timeouts like this as it seems useful/helpful to keep a more specific pulse on which frontend interactions are slow running / easier to work through them & optimise over time?

if preferred, we still have a per-file option of vi.setConfig({ testTimeout: 20000 })

This approach works well for me! Easier to come back and revisit a test at a time, than a whole suite at a time.

DafyddLlyr

Thanks so much for this - a whole lot covered and tidied up here.

A lot of the linting issues fixed have come from some of my recent PRs, will check what's going on with Husky and try to run git commit from a standard directory.

Let's merge this to dp/vite and then fix outstanding issues from there ✅

DafyddLlyr · 2024-08-26T10:18:24Z

editor.planx.uk/src/@planx/components/Confirmation/Public.tsx

-    state.saveToEmail,
-    state.$public,
-  ]);
+  const [sessionId, saveToEmail, $public, passport, govUkPayment, flowName] =


Quite a few Confirmation related changes in this PR - expecting these to go away once dp/vite has rebased to main 👍

DafyddLlyr · 2024-08-26T10:20:54Z

editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.test.tsx

@@ -41,7 +41,7 @@ describe("FileUploadAndLabel - Editor Modal", () => {
    expect(screen.getAllByText("File")).toHaveLength(1);
  });

-  it.skip("allows an Editor to add multiple rules", async () => {


Nice catch! Worth us probably checking out all existing skips() once this vite + vitest migration is done and maybe opening GitHub issues for them.

DafyddLlyr · 2024-08-26T10:22:37Z

editor.planx.uk/src/@planx/components/Pay/Editor.test.tsx

@@ -107,10 +106,10 @@ describe("Pay component - Editor Modal", () => {
      expect(getByDisplayValue("myValue")).toBeInTheDocument();
    });

-    it("allows new values to be added", async () => {
+    it("allows new values to be added", { timeout: 20000 }, async () => {


This approach works well for me! Easier to come back and revisit a test at a time, than a whole suite at a time.

DafyddLlyr · 2024-08-26T10:23:45Z

editor.planx.uk/src/@planx/components/PlanningConstraints/utils.test.ts


    expect(result).toEqual({
      intersectingConstraints: defaultIntersectingConstraints,
      nots: defaultNots,
    });
  });

+  // Intentional skip, not handling these edge cases yet!


Helpful comment!

DafyddLlyr · 2024-08-26T10:30:37Z

...planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings/PublicLinks.test.tsx

+    vi.spyOn(window, "location", "get").mockReturnValue(
+      mockWindowLocationObject,
+    );


nit: This might be something we can put in a beforeEach() (not for this PR, just a reminder to come back and take a look at this!)

Also getting a few linting issues in this file, will flag with @RODO94 tomorrow or open a quick PR here.

DafyddLlyr · 2024-08-26T10:34:46Z

editor.planx.uk/src/testUtils.tsx

+// export const axe = configureAxe({
+//   rules: {
+//     // Currently, jest-axe does not correctly evaluate this rule due to an issue with jsdom
+//     // https://github.com/dequelabs/axe-core/issues/2587
+//     // To pass this test, non-decorative MUI icons should always use the 'titleAccess' prop
+//     "svg-img-alt": { enabled: false },
+//   },
+// });


Nice to know we don't need this - if we see an error with titleAccess again or failing a11y tests we can revisit.

Will properly delete in follow-up PRs rather than leave commented-out here !

jessicamcinchak added 5 commits August 22, 2024 11:13

chore: update Confirmation banner description to use rich text & rewo…

c9d5939

…rd details (#3545)

rebase Confirmation tests

0b93863

wip

55a6260

add comment re Chai bug

3598e8b

fix prettier/linting differences?

ee794d5

jessicamcinchak added 2 commits August 22, 2024 20:22

update all @planx/components/*

7ec6cc0

use axe prerelease, it works!

c3cef25

jessicamcinchak marked this pull request as ready for review August 22, 2024 19:44

jessicamcinchak requested a review from a team August 22, 2024 19:44

jessicamcinchak marked this pull request as draft August 23, 2024 08:11

jessicamcinchak removed the request for review from a team August 23, 2024 08:11

jessicamcinchak added 2 commits August 23, 2024 20:14

working timeouts plus re-add test:silent script

85f9b44

fixes based on CI run

401731a

jessicamcinchak changed the title ~~wip: vitest-axe~~ feat: add vitest-axe & update frontend tests Aug 23, 2024

jessicamcinchak marked this pull request as ready for review August 23, 2024 18:40

jessicamcinchak requested a review from DafyddLlyr August 23, 2024 18:41

jessicamcinchak commented Aug 26, 2024

View reviewed changes

DafyddLlyr approved these changes Aug 26, 2024

View reviewed changes

jessicamcinchak merged commit 35b02c3 into dp/vite Aug 26, 2024
9 of 10 checks passed

jessicamcinchak deleted the jess/vite-axe branch August 26, 2024 10:41

This was referenced Aug 26, 2024

test: Setup and manage Airbrake mocks and spies in vitest #3558

Merged

test: Handle default export in swr #3559

Merged

test: Setup axios mocks in outstanding frontend tests #3567

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add `vitest-axe` & update frontend tests #3549

feat: add `vitest-axe` & update frontend tests #3549

jessicamcinchak commented Aug 22, 2024 •

edited

Loading

github-actions bot commented Aug 22, 2024 •

edited

Loading

jessicamcinchak commented Aug 23, 2024

jessicamcinchak Aug 26, 2024 •

edited

Loading

DafyddLlyr Aug 26, 2024

DafyddLlyr left a comment •

edited

Loading

DafyddLlyr Aug 26, 2024

DafyddLlyr Aug 26, 2024

DafyddLlyr Aug 26, 2024

DafyddLlyr Aug 26, 2024

DafyddLlyr Aug 26, 2024

DafyddLlyr Aug 26, 2024

jessicamcinchak Aug 26, 2024

feat: add vitest-axe & update frontend tests #3549

feat: add vitest-axe & update frontend tests #3549

Conversation

jessicamcinchak commented Aug 22, 2024 • edited Loading

github-actions bot commented Aug 22, 2024 • edited Loading

jessicamcinchak commented Aug 23, 2024

jessicamcinchak Aug 26, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DafyddLlyr left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

feat: add `vitest-axe` & update frontend tests #3549

feat: add `vitest-axe` & update frontend tests #3549

jessicamcinchak commented Aug 22, 2024 •

edited

Loading

github-actions bot commented Aug 22, 2024 •

edited

Loading

jessicamcinchak Aug 26, 2024 •

edited

Loading

DafyddLlyr left a comment •

edited

Loading