Issue #36 Backfill tests for Molecules/LinkCard

Add tests for molecules linkcard

Author: brandongregoryscott

src/molecules/link-card/link-card.test.tsx

@@ -1,3 +1,59 @@
+import React from "react";
+import faker from "faker";
+import { LinkCard, LinkCardIconClassName } from "./link-card";
+import { TestUtils } from "../../tests/test-utils";
+import { LinkCardTypes } from "../constants/link-card-types";
+
 describe("LinkCard", () => {
-    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/36", () => {});
+    test("when default props, renders LinkCard", () => {
+        // Arrange
+        const expected = faker.random.words();
+        const label = faker.random.words();
+
+        // Act
+        const { getByText } = TestUtils.renderWithRouter(
+            <LinkCard label={label}>{expected}</LinkCard>
+        );
+
+        //Assert
+        expect(getByText(expected)).not.toBeNil();
+    });
+
+    test(`when type prop is button, renders ${LinkCardTypes.Button}`, () => {
+        // Arrange
+        const expected = faker.random.words();
+        const label = faker.random.words();
+        const type = LinkCardTypes.Button;
+
+        // Act
+        const { container } = TestUtils.renderWithRouter(
+            <LinkCard label={label} type={type}>
+                {expected}
+            </LinkCard>
+        );
+        const result = container.getElementsByTagName("button")[0];
+
+        // Assert
+        expect(result).not.toBeNil();
+    });
+
+    test(`when default props and include icon, renders with class name ${LinkCardIconClassName}`, () => {
+        // Arrange
+        const expected = faker.random.words();
+        const label = faker.random.words();
+
+        // Act
+        const { container } = TestUtils.renderWithRouter(
+            <LinkCard label={label} includeIcon={true}>
+                {expected}
+            </LinkCard>
+        );
+        const result = container.getElementsByClassName(
+            LinkCardIconClassName
+        )[0];
+
+        // Assert
+        expect(result).not.toBeNil();
+        expect(result.classList).toContain(LinkCardIconClassName);
+    });
 });

src/molecules/link-card/link-card.tsx

@@ -13,6 +13,7 @@ import { ParagraphSizes } from "../../atoms/constants/paragraph-sizes";
 // -------------------------------------------------------------------------------------------------
 
 const COMPONENT_CLASS = "c-link-card";
+export const LinkCardIconClassName = "-with-icon";
 
 // #endregion Constants
 
@@ -39,12 +40,13 @@ export interface LinkCardProps {
 const LinkCard: React.FC<LinkCardProps> = (props: LinkCardProps) => {
     const cssClassNames = [COMPONENT_CLASS];
     if (props.includeIcon) {
-        cssClassNames.push("-with-icon");
+        cssClassNames.push(LinkCardIconClassName);
     }
 
     const cssClassNamesFlat = cssClassNames.join(" ");
     const iconType = props.iconType ?? Icons.Lightbulb;
     const type = props.type ?? LinkCardTypes.Link;
+    const to = props.to ?? "#";
 
     const renderChildren = () => (
         <React.Fragment>
@@ -78,7 +80,7 @@ const LinkCard: React.FC<LinkCardProps> = (props: LinkCardProps) => {
             )}
             {// if
             type === LinkCardTypes.Link && (
-                <Anchor cssClassName={cssClassNamesFlat} to={props.to}>
+                <Anchor cssClassName={cssClassNamesFlat} to={to}>
                     {renderChildren()}
                 </Anchor>
             )}

src/tests/test-utils.ts

@@ -0,0 +1,34 @@
+import { MemoryRouter } from "react-router-dom";
+import { render } from "@testing-library/react";
+import { ReactElement } from "react";
+
+// -----------------------------------------------------------------------------------------
+// #region Functions
+// -----------------------------------------------------------------------------------------
+
+/**
+ * Returns a React component wrapped in a MemoryRouter. Used for Components that
+ * must be rendered inside a Route Component.
+ *
+ * @param component
+ * @param route
+ * @returns {ReactComponent}
+ */
+
+const _renderWithRouter = (component: ReactElement, route: string = "/") => {
+    window.history.pushState({}, "Test page", route);
+
+    return render(component, { wrapper: MemoryRouter });
+};
+
+// #endregion Functions
+
+// -----------------------------------------------------------------------------------------
+// #region Exports
+// -----------------------------------------------------------------------------------------
+
+export const TestUtils = {
+    renderWithRouter: _renderWithRouter,
+};
+
+// #endregion Exports