Issue #14 Backfill tests for Atoms/Heading and Atoms/HeadingIcon

Add tests for atoms heading and atomss heading icom

Author: brandongregoryscott

src/atoms/typography/heading-icon.test.tsx

@@ -1,5 +1,62 @@
 import React from "react";
+import faker from "faker";
+import { HeadingIcon } from "./heading-icon";
+import { render } from "@testing-library/react";
+import { Icons } from "../constants/icons";
+import { IconUtils } from "../../utilities/icon-utils";
+import { SvgIcon } from "../interfaces/svg-icon";
+import { getSvgIconByType } from "../constants/svg-icons";
+import { Icon } from "../icons/icon";
 
 describe("HeadingIcon", () => {
-    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/14", () => {});
+    let registeredIcon: SvgIcon;
+
+    beforeEach(() => {
+        IconUtils.clearRegistry();
+        registeredIcon = getSvgIconByType(Icons.ChevronUp);
+        IconUtils.registerSvgIcon(registeredIcon);
+    });
+
+    test("when default props, renders Heading with icon", () => {
+        // Arrange
+        const expected = faker.random.words();
+
+        // Act
+        const { getByText } = render(
+            <HeadingIcon type={registeredIcon.type}>{expected}</HeadingIcon>
+        );
+
+        // Assert
+        expect(getByText(expected)).not.toBeNil();
+    });
+
+    test("when type prop set and icon exists, renders Heading with set icon", () => {
+        // Arrange
+        const testHeading = faker.random.words();
+
+        // Act
+        const { container } = render(
+            <HeadingIcon type={registeredIcon.type}>{testHeading}</HeadingIcon>
+        );
+        const svgIcon = container.getElementsByTagName("svg");
+
+        // Assert
+        expect(svgIcon).toHaveLength(1);
+    });
+
+    test("when type prop set and icon does not exist, renders Heading with bare icon <i>", () => {
+        // Arrange
+        const expected = faker.random.words();
+
+        // Act
+        const { container } = render(
+            <HeadingIcon type={Icons.Lightbulb}>{expected}</HeadingIcon>
+        );
+        const svgIcon = container.getElementsByTagName("svg");
+        const bareIcon = container.getElementsByTagName("i");
+
+        // Assert
+        expect(svgIcon).toHaveLength(0);
+        expect(bareIcon).toHaveLength(1);
+    });
 });

src/atoms/typography/heading.test.tsx

@@ -1,5 +1,32 @@
 import React from "react";
+import faker from "faker";
+import { Heading } from "./heading";
+import { render } from "@testing-library/react";
 
 describe("Heading", () => {
-    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/14", () => {});
+    test("when default props, renders heading", () => {
+        // Assert
+        const expected = faker.random.words();
+
+        // Act
+        const { getByText } = render(<Heading>{expected}</Heading>);
+
+        // Assert
+        expect(getByText(expected)).not.toBeNil();
+    });
+
+    test("when cssClassName prop has value, renders with class name", () => {
+        // Act
+        const randomText = faker.random.words();
+        const testClassName = "testClassName";
+
+        // Arrange
+        const { container } = render(
+            <Heading cssClassName={testClassName}>{randomText}</Heading>
+        );
+        const result = container.getElementsByClassName(testClassName);
+
+        // Assert
+        expect(result[0]).not.toBeNil();
+    });
 });