Merge pull request #57 from SaidShah/add-tests-for-atoms-radio-button

Added tests for radio button

Author: wintondeshong

src/atoms/forms/radio-button-input.test.tsx

@@ -1,6 +1,9 @@
 import React from "react";
-import { render } from "@testing-library/react";
-import { RadioButton } from "./radio-button-input";
+import { render, fireEvent, wait } from "@testing-library/react";
+import {
+    RadioButton,
+    RadioButtonSelectedClassName,
+} from "./radio-button-input";
 import faker from "faker";
 import uuid from "uuid";
 
@@ -22,4 +25,50 @@ describe("RadioButton", () => {
         // Assert
         expect(getByLabelText(expected)).not.toBeNull();
     });
+
+    test(`when checked prop is true, renders check ${RadioButtonSelectedClassName} class name`, () => {
+        // Arrange
+        const expected = faker.random.word();
+
+        // Act
+        const { container } = render(
+            <RadioButton
+                checked={true}
+                id={uuid()}
+                label={expected}
+                name={faker.random.word()}
+            />
+        );
+        const result = container.querySelector(
+            "." + RadioButtonSelectedClassName
+        );
+
+        // Assert
+        expect(result).not.toBeNull();
+    });
+
+    test("when onClick set, calls handler upon click", async () => {
+        // Arrange
+        let calledTimes = 0;
+        const handleClick = () => calledTimes++;
+        const buttonText = "test button";
+
+        // Act
+        const { getByText } = render(
+            <RadioButton
+                onClick={handleClick}
+                checked={false}
+                id={uuid()}
+                name={faker.random.word()}
+                label={buttonText}
+            />
+        );
+
+        fireEvent.click(getByText(buttonText));
+
+        // Assert
+        await wait(() => {
+            expect(calledTimes).toEqual(1);
+        });
+    });
 });

src/atoms/forms/radio-button-input.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { forwardRef } from "react";
 
 const COMPONENT_CLASS = "c-radio";
+export const RadioButtonSelectedClassName = "-selected";
 
 export interface RadioButtonProps {
     autofocus?: boolean;
@@ -41,7 +42,7 @@ const RadioButton: React.RefForwardingComponent<
             onCheck?.(e);
         const handleClick = (): void => onClick?.();
 
-        const cssChecked = checked ? "-selected" : "";
+        const cssChecked = checked ? RadioButtonSelectedClassName : "";
 
         return (
             <div className={`${COMPONENT_CLASS} ${cssChecked} ${cssClassName}`}>