Fragment component tests (#1021)

* Unit testing for ArticleCTA component

* Unit testing for BasicTextWithImage component

* Unit testing for Button component

* fixed typos in ImageWithCollapse.stories.js

* Unit testing for ImageWithCollapse component

* Unit testing for QuoteVerticalLineContent component

* Unit testing for ImageVerticalLineContent component

* Unit testing for TextContent component

* Unit testing for TextWithImage component

* updated alt arg value to match unit test query

* fix dcterms metadata to better support AA (#1019)

* Font Optimization (#1020)

* setup google fonts to be served locally

* implement fonts using next/font

* apply Lato and Notosans variables directly to Modal

* remove duplicate main landmark

* fix duplicate main landmarks in error pages

* added on click test-case for ImageWithCollapse.test

* small update to ImageWithCollapse.test

---------

Co-authored-by: Jordan Willis <[email protected]>
Co-authored-by: Jordan <[email protected]>

components/fragment_renderer/fragment_components/ArticleCTA.test.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import ArticleCTA from "./ArticleCTA";
+import { Default } from "./ArticleCTA.stories.js";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+expect.extend(toHaveNoViolations);
+
+describe("ArticleCTA", () => {
+  test("renders ArticleCTA component with default props", async () => {
+    const { container } = render(<ArticleCTA {...Default.args} />);
+    expect(screen.getByText("This is a body")).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

components/fragment_renderer/fragment_components/BasicTextWithImage.test.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import BasicTextWithImage from "./BasicTextWithImage";
+import { Default } from "./BasicTextWithImage.stories.js";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+expect.extend(toHaveNoViolations);
+
+describe("BasicTextWithImage", () => {
+  test("renders BasicTextWithImage component with default props", async () => {
+    const { container } = render(<BasicTextWithImage {...Default.args} />);
+    expect(screen.getByAltText("image alt text")).toBeInTheDocument();
+    expect(screen.getByText((content) => content.startsWith("Every week")))
+      .toBeInTheDocument;
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

components/fragment_renderer/fragment_components/Button.test.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Button from "./Button";
+import { Primary } from "./Button.stories.js";
+import { Secondary } from "./Button.stories.js";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+expect.extend(toHaveNoViolations);
+
+describe("Button", () => {
+  test("renders Button component with Primary props", async () => {
+    const { container } = render(<Button {...Primary.args} />);
+    expect(screen.getByText("Primary Button")).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+  test("renders Button component with Secondary props", async () => {
+    const { container } = render(<Button {...Secondary.args} />);
+    expect(screen.getByText("Secondary Button")).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

components/fragment_renderer/fragment_components/ImageVerticalLineContent.test.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import ImageVerticalLineContent from "./ImageVerticalLineContent";
+import { Default } from "./ImageVerticalLineContent.stories.js";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+expect.extend(toHaveNoViolations);
+
+describe("ImageVerticalLineContent", () => {
+  test("renders ImageVerticalLineContent component with default props", async () => {
+    const { container } = render(
+      <ImageVerticalLineContent {...Default.args} />
+    );
+    expect(screen.getByAltText("image alt text")).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.startsWith("Every week"))
+    ).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

components/fragment_renderer/fragment_components/ImageWithCollapse.stories.js

@@ -21,10 +21,10 @@ Default.args = {
   longDesc: "Test Description",
   children: [
     <p>First paragraph tag</p>,
-    <p>Second paragprahp tag</p>,
+    <p>Second paragraph tag</p>,
     <ul>
-      <li>Unorderded list item 1</li>
-      <li>Unorderded list item 2</li>
+      <li>Unordered list item 1</li>
+      <li>Unordered list item 2</li>
     </ul>,
     <ol>
       <li>Ordered list item 1</li>

components/fragment_renderer/fragment_components/ImageWithCollapse.test.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import ImageWithCollapse from "./ImageWithCollapse";
+import { Default } from "./ImageWithCollapse.stories.js";
+import { axe, toHaveNoViolations } from "jest-axe";
+import { userEvent } from "../../../node_modules/@storybook/test/dist/index";
+
+expect.extend(toHaveNoViolations);
+
+describe("ImageWithCollapse", () => {
+  test("renders ImageWithCollapse component with default props", async () => {
+    const { container } = render(<ImageWithCollapse {...Default.args} />);
+    expect(screen.getByAltText("image alt text")).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.startsWith("Every"))
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.startsWith("Example Title"))
+    ).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  test("on click renders Collapse component with default props", async () => {
+    const { container } = render(<ImageWithCollapse {...Default.args} />);
+    const collapse = screen.getByText((content) =>
+      content.startsWith("Example Title")
+    );
+    userEvent.click(collapse);
+    expect(
+      screen.getByText((content) => content.startsWith("First"))
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.startsWith("Unordered list item 1"))
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.startsWith("Ordered list item 1"))
+    ).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

components/fragment_renderer/fragment_components/QuoteVerticalLineContent.stories.js

@@ -17,7 +17,7 @@ Default.args = {
       content: [
         {
           nodeType: "text",
-          value: "Quote Text ",
+          value: "Quote Text",
         },
       ],
     },

components/fragment_renderer/fragment_components/QuoteVerticalLineContent.test.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import QuoteVerticalLineContent from "./QuoteVerticalLineContent";
+import { Default } from "./QuoteVerticalLineContent.stories.js";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+expect.extend(toHaveNoViolations);
+
+describe("QuoteVerticalLineContent", () => {
+  test("renders QuoteVerticalLineContent component with default props", async () => {
+    const { container } = render(
+      <QuoteVerticalLineContent {...Default.args} />
+    );
+    expect(
+      screen.getByText((content) => content.startsWith("Quote Text"))
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.startsWith("Explanation Text"))
+    ).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

components/fragment_renderer/fragment_components/TextContent.test.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import TextContent from "./TextContent";
+import { Default } from "./TextContent.stories.js";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+expect.extend(toHaveNoViolations);
+
+describe("TextContent", () => {
+  test("renders TextContent component with default props", async () => {
+    const { container } = render(<TextContent {...Default.args} />);
+    expect(screen.getByText((content) => content.startsWith("Every week")))
+      .toBeInTheDocument;
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

components/fragment_renderer/fragment_components/TextWithImage.stories.js

@@ -13,7 +13,7 @@ export const Vertical = Template.bind({});
 
 Default.args = {
   src: "/image2.png",
-  alt: "alt",
+  alt: "image alt text",
   width: 359,
   height: 260,
   layout: "default",
@@ -33,7 +33,7 @@ Default.args = {
 
 Vertical.args = {
   src: "/image2.png",
-  alt: "alt",
+  alt: "image alt text",
   width: 359,
   height: 260,
   layout: "image-vertical-line-content",

components/fragment_renderer/fragment_components/TextWithImage.test.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import TextWithImage from "./TextWithImage";
+import { Default } from "./TextWithImage.stories.js";
+import { Vertical } from "./TextWithImage.stories.js";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+expect.extend(toHaveNoViolations);
+
+describe("TextWithImage", () => {
+  test("renders TextWithImage component with default props", async () => {
+    const { container } = render(<TextWithImage {...Default.args} />);
+    expect(screen.getByAltText("image alt text")).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.startsWith("Every week"))
+    ).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+  test("renders TextWithImage component with Vertical props", async () => {
+    const { container } = render(<TextWithImage {...Vertical.args} />);
+    expect(screen.getByAltText("image alt text")).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.startsWith("Every week"))
+    ).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});