Create unit test for fragment render component

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();
+  });
+});

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,
 };
 

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,
 };
 

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,
 };
 

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,
 };
 

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,
 };
 

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,
 };
 

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();
   });

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,
 };
 

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,
 };
 

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,
 };