Component tests refactor (#12010)

services/ui-src/src/components/accordions/AccordionItem.test.tsx

@@ -1,11 +1,12 @@
 import { render, screen } from "@testing-library/react";
-import { axe } from "jest-axe";
 import userEvent from "@testing-library/user-event";
-// utils
-import { RouterWrappedComponent } from "utils/testing/setupJest";
 // components
 import { Accordion } from "@chakra-ui/react";
 import { AccordionItem } from "components";
+// utils
+import { RouterWrappedComponent } from "utils/testing/setupJest";
+import { testA11y } from "utils/testing/commonTests";
+// verbiage
 import verbiage from "verbiage/pages/home";
 
 const accordionItemComponent = (
@@ -16,7 +17,7 @@ const accordionItemComponent = (
   </RouterWrappedComponent>
 );
 
-describe("Test AccordionItem", () => {
+describe("<AccordionItem />", () => {
   beforeEach(() => {
     render(accordionItemComponent);
   });
@@ -37,12 +38,6 @@ describe("Test AccordionItem", () => {
     expect(screen.queryByAltText("Expand")).toBeFalsy();
     expect(screen.getByAltText("Collapse")).toBeVisible();
   });
-});
 
-describe("Test AccordionItem accessibility", () => {
-  it("Should not have basic accessibility issues", async () => {
-    const { container } = render(accordionItemComponent);
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
+  testA11y(accordionItemComponent);
 });

services/ui-src/src/components/accordions/AccordionItem.tsx

@@ -36,6 +36,7 @@ export const AccordionItem = ({ label, children, ...props }: Props) => {
 };
 
 interface Props {
+  label: string;
   children?: ReactChild | ReactChild[];
   [key: string]: any;
 }

services/ui-src/src/components/accordions/FaqAccordion.test.tsx

@@ -1,10 +1,10 @@
 import { render, screen } from "@testing-library/react";
-import { axe } from "jest-axe";
 import userEvent from "@testing-library/user-event";
-// utils
-import { RouterWrappedComponent } from "utils/testing/setupJest";
 // components
 import { FaqAccordion } from "components";
+// utils
+import { RouterWrappedComponent } from "utils/testing/setupJest";
+import { testA11y } from "utils/testing/commonTests";
 
 const accordionItems = [
   {
@@ -19,7 +19,7 @@ const faqAccordionComponent = (
   </RouterWrappedComponent>
 );
 
-describe("Test FaqAccordion", () => {
+describe("<FaqAccordion />", () => {
   beforeEach(() => {
     render(faqAccordionComponent);
   });
@@ -41,12 +41,6 @@ describe("Test FaqAccordion", () => {
     expect(faqQuestion).toBeVisible();
     expect(screen.getByText(accordionItems[0].answer)).toBeVisible();
   });
-});
 
-describe("Test FaqAccordion accessibility", () => {
-  it("Should not have basic accessibility issues", async () => {
-    const { container } = render(faqAccordionComponent);
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
+  testA11y(faqAccordionComponent);
 });

services/ui-src/src/components/accordions/InstructionsAccordion.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+// components
+import { InstructionsAccordion } from "components";
+// utils
+import { testA11y } from "utils/testing/commonTests";
+
+export const mockAccordion = {
+  buttonLabel: "Instructions",
+  intro: [
+    {
+      type: "text",
+      as: "span",
+      content: "<b>Bold Instructions</b>",
+    },
+    {
+      type: "text",
+      as: "span",
+      content: "More instructions",
+    },
+  ],
+  list: [`List Item 1`, "List Item 2", `List Item 3`],
+  text: "Additional Text",
+};
+
+const accordionComponent = <InstructionsAccordion verbiage={mockAccordion} />;
+
+describe("<InstructionsAccordion />", () => {
+  beforeEach(() => {
+    render(accordionComponent);
+  });
+
+  test("Accordion is visible", () => {
+    expect(screen.getByText(mockAccordion.buttonLabel)).toBeVisible();
+  });
+
+  test("Accordion default closed state only shows the question", () => {
+    expect(screen.getByText(mockAccordion.buttonLabel)).toBeVisible();
+    expect(screen.getByText(mockAccordion.text)).not.toBeVisible();
+  });
+
+  test("Accordion should show answer on click", async () => {
+    const accordionQuestion = screen.getByText(mockAccordion.buttonLabel);
+    expect(accordionQuestion).toBeVisible();
+    expect(screen.getByText(mockAccordion.text)).not.toBeVisible();
+    await userEvent.click(accordionQuestion);
+    expect(accordionQuestion).toBeVisible();
+    expect(screen.getByText(mockAccordion.text)).toBeVisible();
+  });
+
+  testA11y(accordionComponent);
+});

services/ui-src/src/components/accordions/TemplateCardAccordion.test.tsx

@@ -1,56 +1,43 @@
 import { render, screen } from "@testing-library/react";
-import { axe } from "jest-axe";
 import userEvent from "@testing-library/user-event";
-// utils
-import { RouterWrappedComponent } from "utils/testing/setupJest";
 // components
 import { TemplateCardAccordion } from "components";
+// utils
+import { RouterWrappedComponent } from "utils/testing/setupJest";
+import { testA11y } from "utils/testing/commonTests";
+// verbiage
 import verbiage from "verbiage/pages/home";
 
+const { buttonLabel, text: accordionText } = verbiage.cards.MCPAR.accordion;
+
 const accordionComponent = (
   <RouterWrappedComponent>
     <TemplateCardAccordion verbiage={verbiage.cards.MCPAR.accordion} />
   </RouterWrappedComponent>
 );
 
-describe("Test TemplateCardAccordion", () => {
+describe("<TemplateCardAccordion />", () => {
   beforeEach(() => {
     render(accordionComponent);
   });
 
   test("Accordion is visible", () => {
-    expect(
-      screen.getByText(verbiage.cards.MCPAR.accordion.buttonLabel)
-    ).toBeVisible();
+    expect(screen.getByText(buttonLabel)).toBeVisible();
   });
 
   test("Accordion default closed state only shows the question", () => {
-    expect(
-      screen.getByText(verbiage.cards.MCPAR.accordion.buttonLabel)
-    ).toBeVisible();
-    expect(
-      screen.getByText(verbiage.cards.MCPAR.accordion.text)
-    ).not.toBeVisible();
+    expect(screen.getByText(buttonLabel)).toBeVisible();
+    expect(screen.getByText(accordionText)).not.toBeVisible();
   });
 
   test("Accordion should show answer on click", async () => {
-    const accordionQuestion = screen.getByText(
-      verbiage.cards.MCPAR.accordion.buttonLabel
-    );
+    const accordionQuestion = screen.getByText(buttonLabel);
     expect(accordionQuestion).toBeVisible();
-    expect(
-      screen.getByText(verbiage.cards.MCPAR.accordion.text)
-    ).not.toBeVisible();
+    expect(screen.getByText(accordionText)).not.toBeVisible();
     await userEvent.click(accordionQuestion);
     expect(accordionQuestion).toBeVisible();
-    expect(screen.getByText(verbiage.cards.MCPAR.accordion.text)).toBeVisible();
+    expect(screen.getByText(accordionText)).toBeVisible();
   });
-});
 
-describe("Test TemplateCardAccordion accessibility", () => {
-  it("Should not have basic accessibility issues", async () => {
-    const { container } = render(accordionComponent);
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
+  testA11y(accordionComponent);
 });

services/ui-src/src/components/accordions/TemplateCardAccordion.tsx

@@ -1,7 +1,7 @@
 // components
 import { Accordion, ListItem, Text, UnorderedList } from "@chakra-ui/react";
 import { AccordionItem, Table } from "components";
-// utils
+// types
 import { AnyObject } from "types";
 
 export const TemplateCardAccordion = ({ verbiage, ...props }: Props) => (

services/ui-src/src/components/alerts/Alert.test.tsx

@@ -1,8 +1,10 @@
 import { render, screen } from "@testing-library/react";
-import { axe } from "jest-axe";
-//components
+// components
 import { Alert } from "components";
+// types
 import { AlertTypes } from "types";
+// utils
+import { testA11y } from "utils/testing/commonTests";
 
 const alertComponent = (
   <Alert
@@ -13,22 +15,13 @@ const alertComponent = (
   />
 );
 
-describe("Test Alert Item", () => {
-  beforeEach(() => {
-    render(alertComponent);
-  });
-
+describe("<Alert />", () => {
   test("Alert is visible", () => {
+    render(alertComponent);
     expect(screen.getByText("Test alert!")).toBeVisible();
     expect(screen.getByText("This is for testing.")).toBeVisible();
     expect(screen.getByText("test-link")).toBeVisible();
   });
-});
 
-describe("Test Alert accessibility", () => {
-  it("Should not have basic accessibility issues", async () => {
-    const { container } = render(alertComponent);
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
+  testA11y(alertComponent);
 });

services/ui-src/src/components/alerts/Alert.tsx

@@ -11,12 +11,12 @@ import {
 } from "@chakra-ui/react";
 // types
 import { AlertTypes, CustomHtmlElement } from "types";
+// utils
+import { parseCustomHtml } from "utils";
 // assets
 import alertIcon from "assets/icons/icon_info_circle.png";
 import warningIcon from "assets/icons/icon_warning.png";
 import errorIcon from "assets/icons/icon_error_circle.png";
-// utils
-import { parseCustomHtml } from "utils";
 
 export const Alert = ({
   status,

services/ui-src/src/components/alerts/ErrorAlert.test.tsx

@@ -1,9 +1,12 @@
 import { render, screen } from "@testing-library/react";
-import { axe } from "jest-axe";
-//components
+// components
 import { ErrorAlert } from "components";
-import { genericErrorContent } from "verbiage/errors";
+// types
 import { ErrorVerbiage } from "types";
+// utils
+import { testA11y } from "utils/testing/commonTests";
+// verbiage
+import { genericErrorContent } from "verbiage/errors";
 
 const error: ErrorVerbiage = {
   title: "We've run into a problem",
@@ -12,7 +15,7 @@ const error: ErrorVerbiage = {
 
 const errorAlertComponent = <ErrorAlert error={error} />;
 
-describe("Test ErrorAlert component", () => {
+describe("<ErrorAlert />", () => {
   beforeEach(() => {
     render(errorAlertComponent);
   });
@@ -24,12 +27,6 @@ describe("Test ErrorAlert component", () => {
   test("ErrorAlert description is visible", () => {
     expect(screen.getByText(/Something went wrong on our end/)).toBeVisible();
   });
-});
 
-describe("Test ErrorAlert accessibility", () => {
-  it("Should not have basic accessibility issues", async () => {
-    const { container } = render(errorAlertComponent);
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
+  testA11y(errorAlertComponent);
 });

services/ui-src/src/components/alerts/ErrorAlert.tsx

@@ -1,8 +1,8 @@
+import { useRef } from "react";
 // components
 import { Box, Collapse } from "@chakra-ui/react";
 import { Alert } from "components";
-import { useRef } from "react";
-// utils
+// types
 import { AlertTypes, AnyObject, ErrorVerbiage } from "types";
 
 export const ErrorAlert = ({

services/ui-src/src/components/app/App.test.tsx

@@ -1,15 +1,15 @@
 import { render, screen } from "@testing-library/react";
 import { act } from "react-dom/test-utils";
-import { axe } from "jest-axe";
+// components
+import { App } from "components";
 // utils
+import { UserProvider, useStore } from "utils";
 import {
   mockNoUserStore,
   RouterWrappedComponent,
   mockUseStore,
 } from "utils/testing/setupJest";
-import { UserProvider, useStore } from "utils";
-//components
-import { App } from "components";
+import { testA11yAct } from "utils/testing/commonTests";
 
 jest.mock("utils/state/useStore");
 const mockedUseStore = useStore as jest.MockedFunction<typeof useStore>;
@@ -23,7 +23,7 @@ const appComponent = (
   </RouterWrappedComponent>
 );
 
-describe("Test App", () => {
+describe("<App />", () => {
   test("App is visible", async () => {
     await act(async () => {
       await render(appComponent);
@@ -38,13 +38,6 @@ describe("Test App", () => {
     });
     expect(screen.getByTestId("login-container")).toBeVisible();
   });
-});
 
-describe("App login page accessibility", () => {
-  it("Should not have basic accessibility issues", async () => {
-    const { container } = render(appComponent);
-    await act(async () => {
-      expect(await axe(container)).toHaveNoViolations();
-    });
-  });
+  testA11yAct(appComponent);
 });