Add some initial form tests

coder · bryphe-coder · Jan 19, 2022 · Jan 19, 2022 · Jan 19, 2022 · Jan 19, 2022
commit 03236dfc39970735c22c94464641dfadbe812adc
diff --git a/package.json b/package.json
@@ -17,7 +17,9 @@
     "@material-ui/core": "4.9.4",
     "@material-ui/icons": "4.5.1",
     "@material-ui/lab": "4.0.0-alpha.42",
+    "@testing-library/jest-dom": "5.16.1",
     "@testing-library/react": "12.1.2",
+    "@testing-library/user-event": "13.5.0",
     "@types/express": "4.17.13",
     "@types/jest": "27.4.0",
     "@types/node": "14.18.4",
@@ -35,7 +37,8 @@
     "ts-jest": "27.1.2",
     "ts-loader": "9.2.6",
     "ts-node": "10.4.0",
-    "typescript": "4.5.4"
+    "typescript": "4.5.4",
+    "yup": "0.32.11"
   },
   "dependencies": {}
 }
diff --git a/site/components/Form/FormTextField.test.tsx b/site/components/Form/FormTextField.test.tsx
@@ -0,0 +1,77 @@
+import { act, fireEvent, render, screen } from "@testing-library/react"
+import { useFormik } from "formik"
+import React from "react"
+import * as yup from "yup"
+import { formTextFieldFactory, FormTextFieldProps } from "./FormTextField"
+
+namespace Helpers {
+  export interface FormValues {
+    name: string
+  }
+
+  export const requiredValidationMsg = "required"
+
+  const FormTextField = formTextFieldFactory<FormValues>()
+
+  export const Component: React.FC<Omit<FormTextFieldProps<FormValues>, "form" | "formFieldName">> = (props) => {
+    const form = useFormik<FormValues>({
+      initialValues: {
+        name: "",
+      },
+      onSubmit: (values, helpers) => {
+        return helpers.setSubmitting(false)
+      },
+      validationSchema: yup.object({
+        name: yup.string().required(requiredValidationMsg),
+      }),
+    })
+
+    return <FormTextField {...props} form={form} formFieldName="name" />
+  }
+}
+
+describe("FormTextField", () => {
+  describe("helperText", () => {
+    it("uses helperText prop when there are no errors", () => {
+      // Given
+      const props = {
+        helperText: "testing",
+      }
+
+      // When
+      const { queryByText } = render(<Helpers.Component {...props} />)
+
+      // Then
+      expect(queryByText(props.helperText)).toBeDefined()
+    })
+
+    it("uses validation message when there are errors", () => {
+      // Given
+      const props = {}
+
+      // When
+      const { container } = render(<Helpers.Component {...props} />)
+      const el = container.firstChild
+
+      // Then
+      expect(el).toBeDefined()
+      expect(screen.queryByText(Helpers.requiredValidationMsg)).toBeNull()
+
+      // When
+      act(() => {
+        fireEvent.focus(el as Element)
+      })
+
+      // Then
+      expect(screen.queryByText(Helpers.requiredValidationMsg)).toBeNull()
+
+      // When
+      act(() => {
+        fireEvent.blur(el as Element)
+      })
+
+      // Then
+      expect(screen.queryByText(Helpers.requiredValidationMsg)).toBeDefined()
+    })
+  })
+})