Create unit test for fragment render component (#1032)

* 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 * stashing WIP changes for ImageWithCollapse.test.js * updated title path for fragment components * Created storybook entry for FragmentRender component * created unit test for FragmentRender component * add missing ISR_ENABLED ARG to Dockerfile (#1030) * add nullish coalescing operator to error page AA check (#1024) * upgrade nextjs version to fix issue with sharp and output:standalone (#1025) * [Snyk] Upgrade: react, react-dom (#1026) * fix: upgrade multiple dependencies with Snyk Snyk has created this PR to upgrade: - react from 18.2.0 to 18.3.1. See this package in yarn: - react-dom from 18.2.0 to 18.3.1. See this package in yarn: See this project in Snyk: https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr * update yarn.lock --------- Co-authored-by: snyk-bot <[email protected]> Co-authored-by: Jordan <[email protected]> * [Snyk] Upgrade i18next from 23.10.1 to 23.11.3 (#1027) * fix: upgrade i18next from 23.10.1 to 23.11.3 Snyk has created this PR to upgrade i18next from 23.10.1 to 23.11.3. See this package in yarn: i18next See this project in Snyk: https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr * update yarn.lock --------- Co-authored-by: snyk-bot <[email protected]> Co-authored-by: Jordan <[email protected]> * [Snyk] Upgrade @types/react from 18.2.79 to 18.3.1 (#1028) * fix: upgrade @types/react from 18.2.79 to 18.3.1 Snyk has created this PR to upgrade @types/react from 18.2.79 to 18.3.1. See this package in yarn: @types/react See this project in Snyk: https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr * update yarn.lock --------- Co-authored-by: snyk-bot <[email protected]> Co-authored-by: Jordan <[email protected]> * [Snyk] Upgrade joi from 17.13.0 to 17.13.1 (#1029) * fix: upgrade joi from 17.13.0 to 17.13.1 Snyk has created this PR to upgrade joi from 17.13.0 to 17.13.1. See this package in yarn: joi See this project in Snyk: https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr * update yarn.lock --------- Co-authored-by: snyk-bot <[email protected]> Co-authored-by: Jordan <[email protected]> * formatting --------- Co-authored-by: Jordan Willis <[email protected]> Co-authored-by: Jordan <[email protected]> Co-authored-by: Shaun Laughland <[email protected]> Co-authored-by: snyk-bot <[email protected]>
DTS-STN · May 31, 2024 · 373c5dc · 373c5dc
1 parent 32ae4dd
commit 373c5dc
Show file tree

Hide file tree

Showing 12 changed files with 1,344 additions and 9 deletions.
diff --git a/components/fragment_renderer/FragmentRender.stories.js b/components/fragment_renderer/FragmentRender.stories.js
diff --git a/components/fragment_renderer/FragmentRender.test.js b/components/fragment_renderer/FragmentRender.test.js
@@ -0,0 +1,71 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import FragmentRender from "./FragmentRender";
+import { axe, toHaveNoViolations } from "jest-axe";
+import {
+  ArticleCTA,
+  TextWithImage,
+  QuoteVerticalLineContent,
+  ImageWithCollapse,
+  Button,
+  TextContent,
+} from "./FragmentRender.stories";
+expect.extend(toHaveNoViolations);
+
+describe("FragmentRender", () => {
+  it("renders ArticleCTA component", async () => {
+    const { container } = render(<FragmentRender {...ArticleCTA.args} />);
+    expect(screen.getByText((content) => content.startsWith("Information")))
+      .toBeInTheDocument;
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+  it("renders TextWithImage component", async () => {
+    const { container } = render(<FragmentRender {...TextWithImage.args} />);
+    expect(screen.getByText("It takes time to learn about government benefits"))
+      .toBeInTheDocument;
+    expect(screen.getByAltText("Community workers helping people"))
+      .toBeInTheDocument;
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+  it("renders QuoteVerticalLineContent component", async () => {
+    const { container } = render(
+      <FragmentRender {...QuoteVerticalLineContent.args} />
+    );
+    expect(
+      screen.getByText(
+        "I didn’t like having to change my birth year to get an estimate"
+      )
+    ).toBeInTheDocument;
+    expect(screen.getByText((content) => content.startsWith("We now")))
+      .toBeInTheDocument;
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+  it("renders Button component", async () => {
+    const { container } = render(<FragmentRender {...Button.args} />);
+    expect(screen.getByText((content) => content.startsWith("Sign in")))
+      .toBeInTheDocument;
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+  it("renders TextContent component", async () => {
+    const { container } = render(<FragmentRender {...TextContent.args} />);
+    expect(screen.getByText((content) => content.startsWith("Alpha")))
+      .toBeInTheDocument;
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+  it("renders ImageWithCollapse component", async () => {
+    const { container } = render(
+      <FragmentRender {...ImageWithCollapse.args} />
+    );
+    expect(screen.getByText((content) => content.startsWith("Text version")))
+      .toBeInTheDocument;
+    expect(screen.getByAltText("Benefit news and updates page"))
+      .toBeInTheDocument;
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/components/fragment_renderer/fragment_components/ArticleCTA.stories.js b/components/fragment_renderer/fragment_components/ArticleCTA.stories.js
@@ -2,7 +2,7 @@ import * as React from "react";
 import ArticleCTA from "./ArticleCTA";
 
 export default {
-  title: "Components/Fragment_Renderer/ArticleCTA",
+  title: "Components/Fragment_Renderer/Fragment_Components/ArticleCTA",
   component: ArticleCTA,
 };
 

diff --git a/components/fragment_renderer/fragment_components/BasicTextWithImage.stories.js b/components/fragment_renderer/fragment_components/BasicTextWithImage.stories.js
@@ -2,7 +2,7 @@ import * as React from "react";
 import BasicTextWithImage from "./BasicTextWithImage";
 
 export default {
-  title: "Components/Fragment_Renderer/BasicTextWithImage",
+  title: "Components/Fragment_Renderer/Fragment_Components/BasicTextWithImage",
   component: BasicTextWithImage,
 };
 

diff --git a/components/fragment_renderer/fragment_components/Button.stories.js b/components/fragment_renderer/fragment_components/Button.stories.js
@@ -2,7 +2,7 @@ import * as React from "react";
 import Button from "./Button";
 
 export default {
-  title: "Components/Fragment_Renderer/Button",
+  title: "Components/Fragment_Renderer/Fragment_Components/Button",
   component: Button,
 };
 

diff --git a/components/fragment_renderer/fragment_components/ImageFragment.stories.js b/components/fragment_renderer/fragment_components/ImageFragment.stories.js
@@ -2,7 +2,7 @@ import * as React from "react";
 import ImageFragment from "./ImageFragment";
 
 export default {
-  title: "Components/Fragment_Renderer/ImageFragment",
+  title: "Components/Fragment_Renderer/Fragment_Components/ImageFragment",
   component: ImageFragment,
 };
 

diff --git a/components/fragment_renderer/fragment_components/ImageVerticalLineContent.stories.js b/components/fragment_renderer/fragment_components/ImageVerticalLineContent.stories.js
@@ -2,7 +2,8 @@ import * as React from "react";
 import ImageVerticalLineContent from "./ImageVerticalLineContent";
 
 export default {
-  title: "Components/Fragment_Renderer/ImageVerticalLineContent",
+  title:
+    "Components/Fragment_Renderer/Fragment_Components/ImageVerticalLineContent",
   component: ImageVerticalLineContent,
 };
 

diff --git a/components/fragment_renderer/fragment_components/ImageWithCollapse.stories.js b/components/fragment_renderer/fragment_components/ImageWithCollapse.stories.js
@@ -2,7 +2,7 @@ import * as React from "react";
 import ImageWithCollapse from "./ImageWithCollapse";
 
 export default {
-  title: "Components/Fragment_Renderer/ImageWithCollapse",
+  title: "Components/Fragment_Renderer/Fragment_Components/ImageWithCollapse",
   component: ImageWithCollapse,
 };
 

diff --git a/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js b/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js
@@ -36,6 +36,19 @@ describe("ImageWithCollapse", () => {
     expect(
       screen.getByText((content) => content.startsWith("Ordered list item 1"))
     ).toBeInTheDocument();
+
+    // const details = screen.getByTestId("details");
+    // const div = screen.getByTestId("div");
+    // const paragraph = div.getElementsByTagName("p")[0];
+    // const unordered = div.getElementsByTagName("ul")[0];
+    // const ordered = div.getElementsByTagName("ol")[0];
+    // userEvent.click(details);
+    // const open = details.hasAttribute("open")
+    // expect( await open).toBeTruthy();
+    // expect(await paragraph).toBeVisible();
+    // expect(await unordered).toBeVisible();
+    // expect(await ordered).toBeVisible();
+
     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
@@ -2,7 +2,8 @@ import * as React from "react";
 import QuoteVerticalLineContent from "./QuoteVerticalLineContent";
 
 export default {
-  title: "Components/Fragment_Renderer/QuoteVerticalLineContent",
+  title:
+    "Components/Fragment_Renderer/Fragment_Components/QuoteVerticalLineContent",
   component: QuoteVerticalLineContent,
 };
 

diff --git a/components/fragment_renderer/fragment_components/TextContent.stories.js b/components/fragment_renderer/fragment_components/TextContent.stories.js
@@ -2,7 +2,7 @@ import * as React from "react";
 import TextContent from "./TextContent";
 
 export default {
-  title: "Components/Fragment_Renderer/TextContent",
+  title: "Components/Fragment_Renderer/Fragment_Components/TextContent",
   component: TextContent,
 };
 

diff --git a/components/fragment_renderer/fragment_components/TextWithImage.stories.js b/components/fragment_renderer/fragment_components/TextWithImage.stories.js
@@ -2,7 +2,7 @@ import * as React from "react";
 import TextWithImage from "./TextWithImage";
 
 export default {
-  title: "Components/Fragment_Renderer/TextWithImage",
+  title: "Components/Fragment_Renderer/Fragment_Components/TextWithImage",
   component: TextWithImage,
 };