coder · bryphe-coder · Jan 21, 2022 · Jan 20, 2022 · Jan 20, 2022 · Jan 20, 2022
diff --git a/_jest/setupTests.ts b/_jest/setupTests.ts
@@ -0,0 +1,7 @@
+/**
+ * Global setup for our Jest tests
+ */
+
+// Set up 'next-router-mock' to with our front-end tests:
+// https://github.com/scottrippey/next-router-mock#quick-start
+jest.mock("next/router", () => require("next-router-mock"))
diff --git a/jest.config.js b/jest.config.js
@@ -5,6 +5,7 @@ module.exports = {
       displayName: "test",
       preset: "ts-jest",
       roots: ["<rootDir>/site"],
+      setupFilesAfterEnv: ["<rootDir>/_jest/setupTests.ts"],
       transform: {
         "^.+\\.tsx?$": "ts-jest",
       },
@@ -26,8 +27,10 @@ module.exports = {
     "<rootDir>/site/**/*.tsx",
     "!<rootDir>/site/**/*.stories.tsx",
     "!<rootDir>/site/.next/**/*.*",
+    "!<rootDir>/site/api.ts",
     "!<rootDir>/site/dev.ts",
     "!<rootDir>/site/next-env.d.ts",
     "!<rootDir>/site/next.config.js",
+    "!<rootDir>/site/out/**/*.*",
   ],
 }
diff --git a/package.json b/package.json
@@ -40,18 +40,28 @@
     "eslint-plugin-react": "7.28.0",
     "eslint-plugin-react-hooks": "4.3.0",
     "express": "4.17.2",
+    "formik": "2.2.9",
     "http-proxy-middleware": "2.0.1",
     "jest": "27.4.7",
     "jest-runner-eslint": "1.0.0",
     "next": "12.0.7",
+    "next-router-mock": "^0.6.5",
     "prettier": "2.5.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "sql-formatter": "^4.0.2",
+    "swr": "1.1.2",
     "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": {}
+  "dependencies": {},
+  "browserslist": [
+    "chrome 66",
+    "firefox 63",
+    "edge 79",
+    "safari 13.1"
+  ]
 }
@@ -0,0 +1,23 @@
+interface LoginResponse {
+  session_token: string
+}
+
+export const login = async (email: string, password: string): Promise<LoginResponse> => {
+  const response = await fetch("/api/v2/login", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      email,
+      password,
+    }),
+  })
+
+  const body = await response.json()
+  if (!response.ok) {
+    throw new Error(body.message)
+  }
+
+  return body
+}
@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/react"
+import React from "react"
+import { LoadingButton } from "./LoadingButton"
+
+describe("LoadingButton", () => {
+  it("renders", async () => {
+    // When
+    render(<LoadingButton>Sign In</LoadingButton>)
+
+    // Then
+    const element = await screen.findByText("Sign In")
+    expect(element).toBeDefined()
+  })
+
+  it("shows spinner if loading is set to true", async () => {
+    // When
+    render(<LoadingButton loading>Sign in</LoadingButton>)
+
+    // Then
+    const spinnerElement = await screen.findByRole("progressbar")
+    expect(spinnerElement).toBeDefined()
+  })
+})
@@ -0,0 +1,45 @@
+import Button, { ButtonProps } from "@material-ui/core/Button"
+import CircularProgress from "@material-ui/core/CircularProgress"
+import { makeStyles } from "@material-ui/core/styles"
+import * as React from "react"
+
+export interface LoadingButtonProps extends ButtonProps {
+  /** Whether or not to disable the button and show a spinner */
+  loading?: boolean
+}
+
+/**
+ * LoadingButton is a small wrapper around Material-UI's button to show a loading spinner
+ *
+ * In Material-UI 5+ - this is built-in, but since we're on an earlier version,
+ * we have to roll our own.
+ */
+export const LoadingButton: React.FC<LoadingButtonProps> = ({ loading = false, children, ...rest }) => {
+  const styles = useStyles()
+  const hidden = loading ? { opacity: 0 } : undefined
+
+  return (
+    <Button {...rest} disabled={rest.disabled || loading}>
+      <span style={hidden}>{children}</span>
+      {loading && (
+        <div className={styles.loader}>
+          <CircularProgress size={18} className={styles.spinner} />
+        </div>
+      )}
+    </Button>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  loader: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    height: 18,
+    width: 18,
+  },
+  spinner: {
+    color: theme.palette.text.disabled,
+  },
+}))
@@ -1 +1,2 @@
-export { SplitButton } from "./SplitButton"
+export * from "./SplitButton"
+export * from "./LoadingButton"
@@ -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()
+    })
+  })
+})