Merge pull request #2 from wintondeshong/master

Anchors, Buttons and Icon Handling

Author: wintondeshong

package.json

@@ -84,6 +84,11 @@
         "dist"
     ],
     "jest": {
+        "collectCoverageFrom": [
+            "src/**/*.ts*",
+            "!src/**/*.stories.ts*",
+            "!src/tests/**/*"
+        ],
         "moduleNameMapper": {
             "react-spring": "<rootDir>/node_modules/react-spring/web.cjs",
             "react-spring/renderprops": "<rootDir>/node_modules/react-spring/renderprops.cjs"

src/atoms/anchors/anchor.test.tsx

@@ -4,7 +4,7 @@ import { Anchor } from "./anchor";
 import faker from "faker";
 import { MemoryRouter } from "react-router-dom";
 
-describe("anchor", () => {
+describe("Anchor", () => {
     it("when default props, renders link with correct url", async () => {
         // Arrange
         const expected = `/some/random/path/${faker.random.word()}`;

src/atoms/buttons/button.test.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { render, wait } from "@testing-library/react";
+import { Button } from "./button";
+import faker from "faker";
+import { ButtonSizes } from "../constants/button-sizes";
+import { ButtonStyles } from "../constants/button-styles";
+
+describe("Button", () => {
+    it("when default props, renders button children", async () => {
+        // Arrange
+        const expected = faker.random.words();
+
+        // Act
+        const { getByText } = render(<Button>{expected}</Button>);
+
+        // Assert
+        expect(getByText(expected)).not.toBeNull();
+    });
+
+    it("when accessibleText provided, renders child accessible span", () => {
+        // Arrange
+        const expected = faker.random.word();
+
+        // Act
+        const { getByText } = render(
+            <Button accessibleText={expected}></Button>
+        );
+
+        // Assert
+        expect(getByText(expected)).not.toBeUndefined();
+    });
+
+    it("when cssClassName provided, adds provided className to button", () => {
+        // Arrange
+        const expected = faker.random.word();
+
+        // Act
+        const { container } = render(<Button cssClassName={expected}></Button>);
+
+        // Assert
+        expect(container.firstChild.className).toContain(expected);
+    });
+
+    it("when size provided, adds size className to button", () => {
+        // Arrange
+        const expected = ButtonSizes.Large;
+
+        // Act
+        const { container } = render(<Button size={expected}></Button>);
+
+        // Assert
+        expect(container.firstChild.className).toContain(`-${expected}`);
+    });
+
+    it(`when style of '${ButtonStyles.None}', has className of only 'none'`, () => {
+        // Arrange
+        const expected = ButtonStyles.None;
+
+        // Act
+        const { container } = render(<Button style={expected}></Button>);
+
+        // Assert
+        expect(container.firstChild.className).toBe(`-${expected}`);
+    });
+
+    it("when style provided, adds style className to button", () => {
+        // Arrange
+        const expected = ButtonStyles.Destructive;
+
+        // Act
+        const { container } = render(<Button style={expected}></Button>);
+
+        // Assert
+        expect(container.firstChild.className).toContain(`-${expected}`);
+    });
+});

src/atoms/buttons/button.tsx

@@ -2,6 +2,7 @@ import { ButtonSizes } from "../constants/button-sizes";
 import { ButtonStyles } from "../constants/button-styles";
 import { ButtonTypes } from "../constants/button-types";
 import React, { forwardRef } from "react";
+import { StringUtils } from "andculturecode-javascript-core";
 
 // -----------------------------------------------------------------------------------------
 // #region Interfaces
@@ -54,22 +55,18 @@ const Button: React.RefForwardingComponent<
         value,
     } = props;
 
-    const classNames = ["c-button"];
-
-    if (style === ButtonStyles.None) {
-        classNames[0] = "";
-    }
+    let classNames = style === ButtonStyles.None ? [] : ["c-button"];
 
     if (size != null) {
-        classNames.push(size);
+        classNames.push(`-${size}`);
     }
 
     if (style != null) {
-        classNames.push(style);
+        classNames.push(`-${style}`);
     }
 
-    if (cssClassName != null && cssClassName.length > 0) {
-        classNames.push(cssClassName);
+    if (StringUtils.hasValue(cssClassName)) {
+        classNames.push(cssClassName!);
     }
 
     return (

src/atoms/constants/svg-icons.tsx src/atoms/constants/svg-icons.tssrc/atoms/constants/svg-icons.tsx renamed to src/atoms/constants/svg-icons.ts

@@ -25,6 +25,10 @@ import { ReactComponent as Share } from "../../assets/icons/16px/Share.svg";
 import { ReactComponent as Trashcan } from "../../assets/icons/16px/Trashcan.svg";
 import { ReactComponent as WarningLarge } from "../../assets/icons/24px/Warning.svg";
 
+// -----------------------------------------------------------------------------------------
+// #region Constants
+// -----------------------------------------------------------------------------------------
+
 const SvgIcons: SvgIcon[] = [
     { type: Icons.Checkmark, base: Checkmark, large: CheckmarkLarge },
     { type: Icons.ChevronDown, base: ChevronDown, large: ChevronDownLarge },
@@ -44,4 +48,20 @@ const SvgIcons: SvgIcon[] = [
     { type: Icons.Warning, base: WarningLarge, large: WarningLarge },
 ];
 
-export { SvgIcons };
+// #endregion Constants
+
+// -----------------------------------------------------------------------------------------
+// #region Functions
+// -----------------------------------------------------------------------------------------
+
+const getSvgIconByType = (type: Icons) => SvgIcons.find((i) => i.type === type);
+
+// #endregion Functions
+
+// -----------------------------------------------------------------------------------------
+// #region Exports
+// -----------------------------------------------------------------------------------------
+
+export { getSvgIconByType, SvgIcons };
+
+// #endregion Exports

src/atoms/icons/icon.test.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { render, wait } from "@testing-library/react";
+import { Icon } from "./icon";
+import faker from "faker";
+import { Icons } from "../constants/icons";
+import { IconUtils } from "../../utilities/icon-utils";
+import { getSvgIconByType } from "../constants/svg-icons";
+import { IconSizes } from "../constants/icon-sizes";
+import { SvgIcon } from "../interfaces/svg-icon";
+
+describe("Icon", () => {
+    test("given icon type not found, when default props, renders bare icon <i>", async () => {
+        // Arrange & Act
+        const { container } = render(<Icon type={Icons.Checkmark} />);
+
+        // Assert
+        expect(container.firstChild.nodeName).toBe("I");
+    });
+
+    describe("given icon type exists", () => {
+        let registeredIcon: SvgIcon;
+
+        beforeEach(() => {
+            IconUtils.clearRegistry();
+            registeredIcon = getSvgIconByType(Icons.ChevronUp);
+            IconUtils.registerSvgIcon(registeredIcon);
+        });
+
+        test("when default props, renders matching base icon", async () => {
+            // Arrange & Act
+            const { container } = render(<Icon type={registeredIcon.type} />);
+
+            // Assert
+            expect(container.firstChild.nodeName).toBe("svg");
+        });
+
+        test.each`
+            size
+            ${IconSizes.Base}
+            ${IconSizes.Large}
+        `("when size of $size, renders icon", async ({ size }) => {
+            // Arrange & Act
+            const { container } = render(
+                <Icon size={size} type={registeredIcon.type} />
+            );
+
+            // Assert
+            expect(container.firstChild.nodeName).toBe("svg");
+            expect(container.firstChild.getAttribute("class")).toContain(
+                `-${size}`
+            );
+        });
+
+        test("when cssClassName provided, renders with className set", async () => {
+            // Arrange
+            const expected = faker.random.word();
+
+            // Act
+            const { container } = render(
+                <Icon cssClassName={expected} type={registeredIcon.type} />
+            );
+
+            // Assert
+            expect(container.firstChild.nodeName).toBe("svg");
+            expect(container.firstChild.getAttribute("class")).toContain(
+                expected
+            );
+        });
+    }); // end 'given icon type exists'
+});