[CORL-720] Integratejest-axe (#2741)

* feat: axe checks for tests

* test: add another axe check

* fix: tests

src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap

@@ -253,6 +253,75 @@ exports[`renders comment stream 1`] = `
               className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments StreamContainer-tabBarRoot"
               role="tablist"
             >
+              <div
+                className="StreamContainer-featuredCommentsTabContainer"
+              >
+                <li
+                  className="Tab-root"
+                  id="tab-FEATURED_COMMENTS"
+                  role="presentation"
+                >
+                  <button
+                    aria-controls="tabPane-FEATURED_COMMENTS"
+                    aria-selected={true}
+                    className="BaseButton-root Tab-button Tab-secondary StreamContainer-featuredCommentsTabButton Tab-active StreamContainer-fixedTab coral coral-tabBarSecondary-tab coral-tabBarComments-featured StreamContainer-featuredCommentsTab"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    role="tab"
+                    type="button"
+                  >
+                    <div
+                      className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
+                    >
+                      <span>
+                        Featured
+                      </span>
+                      <span
+                        className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
+                        data-testid="comments-featuredCount"
+                      >
+                        <span
+                          className="Counter-text"
+                        >
+                          2
+                        </span>
+                      </span>
+                    </div>
+                  </button>
+                </li>
+                <div
+                  className="Popover-root Tooltip-root StreamContainer-featuredCommentsInfo coral coral-tabBarComments-featuredTooltip"
+                >
+                  <button
+                    aria-label="Toggle featured comments tooltip"
+                    className="BaseButton-root TooltipButton-button"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <i
+                      aria-hidden="true"
+                      className="Icon-root Icon-sm Icon-colorPrimary"
+                    >
+                      info
+                    </i>
+                  </button>
+                  <div
+                    aria-hidden={true}
+                    aria-labelledby="comments-featuredCommentPopover-ariainfo"
+                    id="comments-featuredCommentPopover"
+                    role="dialog"
+                  />
+                </div>
+              </div>
               <li
                 className="Tab-root"
                 id="tab-ALL_COMMENTS"
@@ -261,7 +330,7 @@ exports[`renders comment stream 1`] = `
                 <button
                   aria-controls="tabPane-ALL_COMMENTS"
                   aria-selected={false}
-                  className="BaseButton-root Tab-button Tab-secondary coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
+                  className="BaseButton-root Tab-button Tab-secondary StreamContainer-fixedTab coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}

src/core/client/stream/test/comments/featured/renderFeaturedStream.spec.tsx

@@ -53,4 +53,5 @@ it("renders comment stream", async () => {
     within(testRenderer.root).getByTestID("comments-featuredComments-log")
   );
   expect(within(testRenderer.root).toJSON()).toMatchSnapshot();
+  expect(await within(testRenderer.root).axe()).toHaveNoViolations();
 });

src/core/client/stream/test/comments/permalink/permalinkView.spec.tsx

@@ -93,6 +93,7 @@ it("renders permalink view", async () => {
     within(testRenderer.root).getByTestID("current-tab-pane")
   );
   expect(within(tabPane).toJSON()).toMatchSnapshot();
+  expect(await within(testRenderer.root).axe()).toHaveNoViolations();
 });
 
 it("show all comments", async () => {

src/core/client/stream/test/comments/permalink/permalinkViewPostReply.spec.tsx

@@ -125,6 +125,8 @@ it("post a reply", async () => {
     }),
   });
 
+  expect(await within(form).axe()).toHaveNoViolations();
+
   // Write reply .
   act(() => rte.props.onChange({ html: "<b>Hello world!</b>" }));
   act(() => {

src/core/client/stream/test/comments/stream/editComment.spec.tsx

@@ -100,6 +100,7 @@ it("edit a comment", async () => {
       .props.onClick()
   );
   expect(within(comment).toJSON()).toMatchSnapshot("edit form");
+  expect(await within(comment).axe()).toHaveNoViolations();
 
   act(() =>
     testRenderer.root

src/core/client/stream/test/comments/stream/loadMore.spec.tsx

@@ -119,6 +119,8 @@ it("loads more comments", async () => {
     within(testRenderer.root).getByTestID("comments-allComments-log")
   );
 
+  expect(await within(streamLog).axe()).toHaveNoViolations();
+
   // Get amount of comments before.
   const commentsBefore = within(streamLog).getAllByTestID(/^comment-/).length;
 

src/core/client/stream/test/comments/stream/renderReplies.spec.tsx

@@ -42,4 +42,5 @@ it("renders reply list", async () => {
   );
   // Wait for loading.
   expect(within(commentReplyList).toJSON()).toMatchSnapshot();
+  expect(await within(commentReplyList).axe()).toHaveNoViolations();
 });

src/core/client/stream/test/comments/stream/renderStream.spec.tsx

@@ -45,4 +45,5 @@ it("renders comment stream", async () => {
     within(testRenderer.root).getByTestID("comments-allComments-log")
   );
   expect(within(testRenderer.root).toJSON()).toMatchSnapshot();
+  expect(await within(testRenderer.root).axe()).toHaveNoViolations();
 });

src/core/client/stream/test/configure/renderConfigure.spec.tsx

@@ -1,6 +1,6 @@
 import sinon from "sinon";
 
-import { act, wait, waitForElement, within } from "coral-framework/testHelpers";
+import { act, waitForElement, within } from "coral-framework/testHelpers";
 
 import { moderators, settings, stories } from "../fixtures";
 import create from "./create";
@@ -42,11 +42,7 @@ async function createTestRenderer(
 }
 
 it("renders configure", async () => {
-  const { tabPane } = await createTestRenderer();
-
-  await act(async () => {
-    await wait(() => {
-      expect(within(tabPane).toJSON()).toMatchSnapshot();
-    });
-  });
+  const { tabPane, testRenderer } = await createTestRenderer();
+  expect(within(tabPane).toJSON()).toMatchSnapshot();
+  expect(await within(testRenderer.root).axe()).toHaveNoViolations();
 });

src/core/client/stream/test/profile/account.spec.tsx

@@ -67,6 +67,7 @@ it("renders the empty settings pane", async () => {
     testRenderer: { root },
   } = await createTestRenderer();
   expect(within(root).toJSON()).toMatchSnapshot();
+  expect(await within(root).axe()).toHaveNoViolations();
 });
 
 it("doesn't show the change password pane when local auth is disabled", async () => {
@@ -112,6 +113,7 @@ it("render password change form", async () => {
   const newPassword = await waitForElement(() =>
     within(form).getByID("newPassword", { exact: false })
   );
+  expect(await within(changePassword).axe()).toHaveNoViolations();
 
   // Submit an empty form.
   act(() => {

src/core/client/stream/test/profile/changeEmail.spec.tsx

@@ -9,7 +9,7 @@ import {
   within,
 } from "coral-framework/testHelpers";
 
-import { baseUser, settings, stories } from "../fixtures";
+import { settings, stories, userWithEmail } from "../fixtures";
 import create from "./create";
 
 const story = stories[0];
@@ -23,7 +23,7 @@ async function createTestRenderer(
       createResolversStub<GQLResolver>({
         Query: {
           settings: () => settings,
-          viewer: () => baseUser,
+          viewer: () => userWithEmail,
           stream: () => story,
         },
       }),
@@ -49,7 +49,7 @@ describe("change email form", () => {
     const setup = await createTestRenderer({
       resolvers: createResolversStub<GQLResolver>({
         Query: {
-          viewer: () => baseUser,
+          viewer: () => userWithEmail,
         },
         Mutation: {
           updateEmail: ({ variables }) => {
@@ -58,7 +58,7 @@ describe("change email form", () => {
             });
             return {
               user: {
-                ...baseUser,
+                ...userWithEmail,
                 email: "updated_email@test.com",
               },
             };
@@ -77,6 +77,7 @@ describe("change email form", () => {
     act(() => {
       editButton.props.onClick();
     });
+    expect(await within(changeEmail).axe()).toHaveNoViolations();
     const form = within(changeEmail).getByType("form");
     act(() => {
       form.props.onSubmit();

src/core/client/stream/test/profile/changeUsername.spec.tsx

@@ -76,7 +76,9 @@ describe("with recently changed username", () => {
     const form = within(changeUsername).queryByType("form");
     const message = within(changeUsername).queryByText(
       "Your username has been changed in the last 14 days",
-      { exact: false }
+      {
+        exact: false,
+      }
     );
     expect(form).toBeNull();
     expect(message).toBeTruthy();
@@ -106,10 +108,13 @@ describe("with new username", () => {
     act(() => {
       editButton.props.onClick();
     });
+    expect(await within(changeUsername).axe()).toHaveNoViolations();
     within(changeUsername).getByType("form");
     const message = within(changeUsername).queryByText(
       "Your username has been changed in the last 14 days",
-      { exact: false }
+      {
+        exact: false,
+      }
     );
     expect(message).toBeNull();
   });

src/core/client/stream/test/profile/deleteAccount.spec.tsx

@@ -109,6 +109,8 @@ describe("delete account steps", () => {
         nextButton.props.onClick();
       });
     }
+
+    expect(await within(modal).axe()).toHaveNoViolations();
     const form = within(modal).getByType("form");
     const confirm = within(modal).getByTestID("confirm-page-confirmation");
     const password = within(modal).getByTestID("confirm-page-password");

src/core/client/stream/test/profile/myComments.spec.tsx

@@ -87,6 +87,7 @@ it("renders profile", async () => {
     within(testRenderer.root).getByTestID("profile-commentHistory")
   );
   expect(within(commentHistory).toJSON()).toMatchSnapshot();
+  expect(await within(commentHistory).axe()).toHaveNoViolations();
 });
 
 it("loads more comments", async () => {

src/core/client/stream/test/profile/notificationSettings.spec.tsx

@@ -73,6 +73,7 @@ it("render notifications form", async () => {
   const container = await waitForElement(() =>
     within(testRenderer.root).getByTestID("profile-account-notifications")
   );
+  expect(await within(container).axe()).toHaveNoViolations();
   const form = within(container).getByType("form");
 
   // Get the form fields.