Tests for Button atom component

Author: wintondeshong

src/atoms/buttons/button.test.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { act, render, wait, fireEvent } from "@testing-library/react";
+import { Button } from "./button";
+import faker from "faker";
+import { MemoryRouter } from "react-router-dom";
+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
+        await wait(() => {
+            expect(getByText(expected)).not.toBeNull();
+        });
+    });
+
+    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 (