diff --git a/frontend/src/components/RegisterView/RegisterView.test.tsx b/frontend/src/components/RegisterView/RegisterView.test.tsx index c92b8ae..b25bb17 100644 --- a/frontend/src/components/RegisterView/RegisterView.test.tsx +++ b/frontend/src/components/RegisterView/RegisterView.test.tsx @@ -1,4 +1,4 @@ -import { screen, render } from "@testing-library/react" +import { screen, render, waitFor } from "@testing-library/react" import userEvent from "@testing-library/user-event" import { QueryClientProvider, QueryClient } from "@tanstack/react-query" import AxiosMockAdapter from "axios-mock-adapter" @@ -71,4 +71,40 @@ describe("RegisterView", () => { expect(requestBody).toEqual(testInput) }) + + it.each` + scenario | emailAddress | password + ${"no email value"} | ${undefined} | ${"password"} + ${"no password value"} | ${"email@email.com"} | ${undefined} + ${"empty form"} | ${undefined} | ${undefined} + `( + "the submission button is disabled if the form isn't validated ($scenario)", + async ({ emailAddress, password }) => { + const { user } = renderComponent() + + if (emailAddress !== undefined) { + const emailInput = screen.getByLabelText("New account email address") + await user.type(emailInput, emailAddress) + await waitFor(() => + expect(emailInput.getAttribute("value")).toEqual(emailAddress), + ) + } + if (password !== undefined) { + const passwordInput = screen.getByLabelText( + "New account password input", + ) + + await user.type(passwordInput, password) + await waitFor(() => + expect(passwordInput.getAttribute("value")).toEqual(password), + ) + } + + const submitButton = screen.getByText("Create account") + + await waitFor(() => + expect(submitButton.getAttribute("disabled")).not.toBeUndefined(), + ) + }, + ) }) diff --git a/frontend/src/components/RegisterView/index.tsx b/frontend/src/components/RegisterView/index.tsx index 43987a8..e1f4c36 100644 --- a/frontend/src/components/RegisterView/index.tsx +++ b/frontend/src/components/RegisterView/index.tsx @@ -12,6 +12,7 @@ import Button from "@mui/material/Button" import axiosWithDefaults from "../../axios" import TextInput from "../TextInput" +import { validateEmail, validatePassword } from "./validation" function RegisterView() { const [emailAddress, setEmailAddress] = React.useState() @@ -38,29 +39,36 @@ function RegisterView() { label="Email" ariaLabel="New account email address" onChange={setEmailAddress} + validate={validateEmail} value={emailAddress} /> ), - [emailAddress, setEmailAddress], + [emailAddress, setEmailAddress, validateEmail], ) const passwordField = React.useMemo( () => ( ), - [setPassword, password], + [setPassword, password, validatePassword], ) + const isFormValid = React.useMemo(() => { + return validateEmail(emailAddress) && validatePassword(password) + }, [emailAddress, password, validatePassword, validateEmail]) + const onCreateClick = React.useCallback(() => { - if (!emailAddress || !password) return - mutate({ email: emailAddress, password: password }) - }, [mutate, emailAddress, password]) + if (!isFormValid) return + + mutate({ email: String(emailAddress), password: String(password) }) + }, [mutate, emailAddress, password, isFormValid]) return ( @@ -77,6 +85,7 @@ function RegisterView() { variant="contained" onClick={onCreateClick} aria-label="submit account registration" + disabled={!isFormValid} > Create account