Add tests for molecules select form field

src/atoms/forms/select.tsx

@@ -50,6 +50,7 @@ const Select: React.FC<SelectProps> = (props: SelectProps) => {
     return (
         <div className={classNames.join(" ")}>
             <select
+                id={props.id}
                 onChange={handleChange}
                 value={props.value}
                 name={props.name}>

src/molecules/form-fields/select-form-field.test.tsx

@@ -1,9 +1,173 @@
-// import React from "react";
-// import { render } from "@testing-library/react";
-// import { SelectFormField } from "./select-form-field";
-// import faker from "faker";
-// import uuid from "uuid";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import {
+    SelectFormField,
+    InvalidSelectFormValueClass,
+} from "./select-form-field";
+import faker from "faker";
+import uuid from "uuid";
 
 describe("SelectFormField", () => {
-    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/26", () => {});
+    test("when default props, renders with label", () => {
+        // Arrange
+        const label = faker.random.words();
+        const selectLabel = faker.random.word();
+        const selectValue = faker.random.word();
+
+        // Act
+        const { getByText } = render(
+            <SelectFormField
+                onChange={() => {}}
+                label={label}
+                id={uuid()}
+                values={[{ value: selectValue, label: selectLabel }]}
+            />
+        );
+
+        // Assert
+        expect(getByText(label)).not.toBeNil();
+    });
+
+    test("when has errorsMessages prop, renders with error messages", () => {
+        // Arrange
+        const expected = faker.random.words();
+        const firstErrorMessage = faker.random.words();
+        const secondErrorMessage = faker.random.words();
+        const selectLabel = faker.random.word();
+        const selectValue = faker.random.word();
+
+        // Act
+        const { getByText } = render(
+            <SelectFormField
+                label={expected}
+                onChange={() => {}}
+                id={uuid()}
+                errorMessages={[firstErrorMessage, secondErrorMessage]}
+                values={[{ value: selectValue, label: selectLabel }]}
+            />
+        );
+
+        // Assert
+        expect(getByText(firstErrorMessage)).not.toBeNil();
+        expect(getByText(secondErrorMessage)).not.toBeNil();
+    });
+
+    test("when has errorsMessage prop, renders with error message", () => {
+        // Arrange
+        const expected = faker.random.words();
+        const testErrorMessage = faker.random.words();
+        const selectLabel = faker.random.word();
+        const selectValue = faker.random.word();
+
+        // Act
+        const { getByText } = render(
+            <SelectFormField
+                label={expected}
+                onChange={() => {}}
+                id={uuid()}
+                errorMessage={testErrorMessage}
+                values={[{ value: selectValue, label: selectLabel }]}
+            />
+        );
+
+        // Assert
+        expect(getByText(testErrorMessage)).not.toBeNil();
+    });
+
+    test(`when isValid prop is false, renders with ${InvalidSelectFormValueClass} class name`, () => {
+        // Arrange
+        const label = faker.random.words();
+        const selectLabel = faker.random.word();
+        const selectValue = faker.random.word();
+
+        // Act
+        const { container } = render(
+            <SelectFormField
+                onChange={() => {}}
+                label={label}
+                isValid={false}
+                id={uuid()}
+                values={[{ value: selectValue, label: selectLabel }]}
+            />
+        );
+        const result = container.querySelector(
+            "." + InvalidSelectFormValueClass
+        );
+
+        // Assert
+        expect(result).not.toBeNil();
+    });
+
+    test(`when isValid prop is true, renders without ${InvalidSelectFormValueClass} class name`, () => {
+        // Arrange
+        const label = faker.random.words();
+        const selectLabel = faker.random.word();
+        const selectValue = faker.random.word();
+
+        // Act
+        const { container } = render(
+            <SelectFormField
+                onChange={() => {}}
+                label={label}
+                isValid={true}
+                id={uuid()}
+                values={[{ value: selectValue, label: selectLabel }]}
+            />
+        );
+        const result = container.querySelector(
+            "." + InvalidSelectFormValueClass
+        );
+
+        // Assert
+        expect(result).toBeNil();
+    });
+
+    test("when required prop set, renders with required text", () => {
+        // Arrange
+        const label = faker.random.words();
+        const requiredText = "*";
+        const selectLabel = faker.random.word();
+        const selectValue = faker.random.word();
+
+        // Act
+        const { container } = render(
+            <SelectFormField
+                onChange={() => {}}
+                label={label}
+                required={true}
+                id={uuid()}
+                values={[{ value: selectValue, label: selectLabel }]}
+            />
+        );
+        const htmlLabelTag = container.getElementsByTagName("label");
+
+        // Assert
+        expect(htmlLabelTag[0].textContent).toContain(requiredText);
+    });
+
+    test("when onChange set, calls handler upon change", () => {
+        // Arrange
+        const label = faker.random.word();
+        let isChecked = false;
+        const handleChange = () => (isChecked = true);
+        const selectLabel = faker.random.word();
+        const selectValue = faker.random.word();
+
+        // Act
+        const { getByLabelText } = render(
+            <SelectFormField
+                onChange={handleChange}
+                label={label}
+                id={label}
+                values={[{ value: selectValue, label: selectLabel }]}
+            />
+        );
+
+        fireEvent.change(getByLabelText(label), {
+            target: { value: faker.random.word() },
+        });
+
+        // Assert
+        expect(isChecked).toBeTrue();
+    });
 });

src/molecules/form-fields/select-form-field.tsx

@@ -4,12 +4,13 @@ import { Select, SelectOption } from "../../atoms/forms/select";
 import { StringUtils, CollectionUtils } from "andculturecode-javascript-core";
 
 // -----------------------------------------------------------------------------------------
-// #region Component
+// #region Constants
 // -----------------------------------------------------------------------------------------
 
 const COMPONENT_CLASS = "c-form-field";
+export const InvalidSelectFormValueClass = "-invalid";
 
-// #endregion Component
+// #endregion Constants
 
 // -----------------------------------------------------------------------------------------
 // #region Interfaces
@@ -18,7 +19,6 @@ const COMPONENT_CLASS = "c-form-field";
 export interface SelectFormFieldProps {
     errorMessage?: string;
     errorMessages?: string[];
-    fieldId?: string;
     id: string;
     isValid?: boolean;
     name?: string;
@@ -40,7 +40,6 @@ const SelectFormField: React.FC<SelectFormFieldProps> = (
     const {
         errorMessage,
         errorMessages,
-        id,
         isValid,
         name,
         label,
@@ -49,14 +48,14 @@ const SelectFormField: React.FC<SelectFormFieldProps> = (
         values,
     } = props;
 
-    const cssIsValid = isValid ? "" : "-invalid";
-    const fieldId = props.fieldId ?? uuid.v4();
+    const cssIsValid = isValid ? "" : InvalidSelectFormValueClass;
+    const id = props.id ?? uuid.v4();
     const hasErrorMessage = StringUtils.hasValue(errorMessage);
     const hasErrors = CollectionUtils.hasValues(errorMessages);
 
     return (
         <div className={`${COMPONENT_CLASS} ${cssIsValid}`}>
-            <label htmlFor={fieldId}>
+            <label htmlFor={id}>
                 {label}
                 {required ? "*" : ""}
             </label>