From df82ee4fb83cb3ab70ab48d033357d771a2d4f7b Mon Sep 17 00:00:00 2001
From: Marcus Blais <31868036+blai0264@users.noreply.github.com>
Date: Thu, 23 May 2024 13:36:29 -0400
Subject: [PATCH] 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 <31868510+will0684@users.noreply.github.com>
Co-authored-by: Jordan <jordan.walcaraz@gmail.com>
---
 .../fragment_components/ArticleCTA.test.js    | 16 +++++++
 .../BasicTextWithImage.test.js                | 18 ++++++++
 .../fragment_components/Button.test.js        | 23 ++++++++++
 .../ImageVerticalLineContent.test.js          | 21 ++++++++++
 .../ImageWithCollapse.stories.js              |  6 +--
 .../ImageWithCollapse.test.js                 | 42 +++++++++++++++++++
 .../QuoteVerticalLineContent.stories.js       |  2 +-
 .../QuoteVerticalLineContent.test.js          | 23 ++++++++++
 .../fragment_components/TextContent.test.js   | 17 ++++++++
 .../TextWithImage.stories.js                  |  4 +-
 .../fragment_components/TextWithImage.test.js | 29 +++++++++++++
 11 files changed, 195 insertions(+), 6 deletions(-)
 create mode 100644 components/fragment_renderer/fragment_components/ArticleCTA.test.js
 create mode 100644 components/fragment_renderer/fragment_components/BasicTextWithImage.test.js
 create mode 100644 components/fragment_renderer/fragment_components/Button.test.js
 create mode 100644 components/fragment_renderer/fragment_components/ImageVerticalLineContent.test.js
 create mode 100644 components/fragment_renderer/fragment_components/ImageWithCollapse.test.js
 create mode 100644 components/fragment_renderer/fragment_components/QuoteVerticalLineContent.test.js
 create mode 100644 components/fragment_renderer/fragment_components/TextContent.test.js
 create mode 100644 components/fragment_renderer/fragment_components/TextWithImage.test.js

diff --git a/components/fragment_renderer/fragment_components/ArticleCTA.test.js b/components/fragment_renderer/fragment_components/ArticleCTA.test.js
new file mode 100644
index 0000000000..0190c6186c
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/components/fragment_renderer/fragment_components/BasicTextWithImage.test.js b/components/fragment_renderer/fragment_components/BasicTextWithImage.test.js
new file mode 100644
index 0000000000..53a2843fd9
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/components/fragment_renderer/fragment_components/Button.test.js b/components/fragment_renderer/fragment_components/Button.test.js
new file mode 100644
index 0000000000..e63ae5f9e5
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/components/fragment_renderer/fragment_components/ImageVerticalLineContent.test.js b/components/fragment_renderer/fragment_components/ImageVerticalLineContent.test.js
new file mode 100644
index 0000000000..34ce010335
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/components/fragment_renderer/fragment_components/ImageWithCollapse.stories.js b/components/fragment_renderer/fragment_components/ImageWithCollapse.stories.js
index b34d30cf33..91542a5ba2 100644
--- a/components/fragment_renderer/fragment_components/ImageWithCollapse.stories.js
+++ b/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>
diff --git a/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js b/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js
new file mode 100644
index 0000000000..b2a57f25cf
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.stories.js b/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.stories.js
index cd1d25e8cb..7c0be892b6 100644
--- a/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.stories.js
+++ b/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.stories.js
@@ -17,7 +17,7 @@ Default.args = {
       content: [
         {
           nodeType: "text",
-          value: "Quote Text ",
+          value: "Quote Text",
         },
       ],
     },
diff --git a/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.test.js b/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.test.js
new file mode 100644
index 0000000000..5da07c029c
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/components/fragment_renderer/fragment_components/TextContent.test.js b/components/fragment_renderer/fragment_components/TextContent.test.js
new file mode 100644
index 0000000000..7c05555f3b
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/components/fragment_renderer/fragment_components/TextWithImage.stories.js b/components/fragment_renderer/fragment_components/TextWithImage.stories.js
index 1e516606fb..596b26adc7 100644
--- a/components/fragment_renderer/fragment_components/TextWithImage.stories.js
+++ b/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",
diff --git a/components/fragment_renderer/fragment_components/TextWithImage.test.js b/components/fragment_renderer/fragment_components/TextWithImage.test.js
new file mode 100644
index 0000000000..303d0085ea
--- /dev/null
+++ b/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();
+  });
+});