refactor(site): SignInForm without wrapper component #558
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import { FormikContextType } from "formik/dist/types" | ||
| import { getFormHelpers, onChangeTrimmed } from "./index" | ||
|
|
||
| interface TestType { | ||
| untouchedGoodField: string | ||
| untouchedBadField: string | ||
| touchedGoodField: string | ||
| touchedBadField: string | ||
| } | ||
|
|
||
| const mockHandleChange = jest.fn() | ||
|
|
||
| const form = { | ||
| errors: { | ||
| untouchedGoodField: undefined, | ||
| untouchedBadField: "oops!", | ||
| touchedGoodField: undefined, | ||
| touchedBadField: "oops!", | ||
| }, | ||
| touched: { | ||
| untouchedGoodField: false, | ||
| untouchedBadField: false, | ||
| touchedGoodField: true, | ||
| touchedBadField: true, | ||
| }, | ||
| handleChange: mockHandleChange, | ||
| handleBlur: jest.fn(), | ||
| getFieldProps: (name: string) => { | ||
| return { | ||
| name, | ||
| onBlur: jest.fn(), | ||
| onChange: jest.fn(), | ||
| value: "", | ||
| } | ||
| }, | ||
| } as unknown as FormikContextType<TestType> | ||
|
|
||
| describe("form util functions", () => { | ||
| describe("getFormHelpers", () => { | ||
| const untouchedGoodResult = getFormHelpers<TestType>(form, "untouchedGoodField") | ||
| const untouchedBadResult = getFormHelpers<TestType>(form, "untouchedBadField") | ||
| const touchedGoodResult = getFormHelpers<TestType>(form, "touchedGoodField") | ||
| const touchedBadResult = getFormHelpers<TestType>(form, "touchedBadField") | ||
| it("populates the 'field props'", () => { | ||
| expect(untouchedGoodResult.name).toEqual("untouchedGoodField") | ||
| expect(untouchedGoodResult.onBlur).toBeDefined() | ||
| expect(untouchedGoodResult.onChange).toBeDefined() | ||
| expect(untouchedGoodResult.value).toBeDefined() | ||
| }) | ||
| it("sets the id to the name", () => { | ||
| expect(untouchedGoodResult.id).toEqual("untouchedGoodField") | ||
| }) | ||
| it("sets error to true if touched and invalid", () => { | ||
| expect(untouchedGoodResult.error).toBeFalsy | ||
| expect(untouchedBadResult.error).toBeFalsy | ||
| expect(touchedGoodResult.error).toBeFalsy | ||
| expect(touchedBadResult.error).toBeTruthy | ||
| }) | ||
| it("sets helperText to the error message if touched and invalid", () => { | ||
| expect(untouchedGoodResult.helperText).toBeUndefined | ||
| expect(untouchedBadResult.helperText).toBeUndefined | ||
| expect(touchedGoodResult.helperText).toBeUndefined | ||
| expect(touchedBadResult.helperText).toEqual("oops!") | ||
| }) | ||
| }) | ||
|
|
||
| describe("onChangeTrimmed", () => { | ||
| it("calls handleChange with trimmed value", () => { | ||
| const event = { target: { value: " hello " } } as React.ChangeEvent<HTMLInputElement> | ||
| onChangeTrimmed<TestType>(form)(event) | ||
| expect(mockHandleChange).toHaveBeenCalledWith({ target: { value: "hello" } }) | ||
| }) | ||
| }) | ||
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,37 @@ | ||
| import { FormikContextType, getIn } from "formik" | ||
| import { ChangeEvent, ChangeEventHandler, FocusEventHandler } from "react" | ||
|
|
||
| export * from "./FormCloseButton" | ||
| export * from "./FormSection" | ||
| export * from "./FormDropdownField" | ||
| export * from "./FormTextField" | ||
| export * from "./FormTitle" | ||
|
|
||
| interface FormHelpers { | ||
| name: string | ||
| onBlur: FocusEventHandler | ||
| onChange: ChangeEventHandler | ||
| id: string | ||
| value?: string | number | ||
| error: boolean | ||
| helperText?: string | ||
| } | ||
|
|
||
| export const getFormHelpers = <T>(form: FormikContextType<T>, name: string): FormHelpers => { | ||
| // getIn is a util function from Formik that gets at any depth of nesting, and is necessary for the types to work | ||
| const touched = getIn(form.touched, name) | ||
| const errors = getIn(form.errors, name) | ||
| return { | ||
| ...form.getFieldProps(name), | ||
| id: name, | ||
| error: touched && Boolean(errors), | ||
| helperText: touched && errors, | ||
| } | ||
| } | ||
|
|
||
| export const onChangeTrimmed = | ||
| <T>(form: FormikContextType<T>) => | ||
| (event: ChangeEvent<HTMLInputElement>): void => { | ||
| event.target.value = event.target.value.trim() | ||
| form.handleChange(event) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,11 @@ | ||
| import React from "react" | ||
| import { act, screen } from "@testing-library/react" | ||
| import userEvent from "@testing-library/user-event" | ||
| import { history, render } from "../test_helpers" | ||
| import { SignInPage } from "./login" | ||
| import { server } from "../test_helpers/server" | ||
| import { rest } from "msw" | ||
| import { Language } from "../components/SignIn/SignInForm" | ||
|
|
||
| describe("SignInPage", () => { | ||
| beforeEach(() => { | ||
|
|
@@ -21,12 +23,12 @@ describe("SignInPage", () => { | |
| render(<SignInPage />) | ||
|
|
||
| // Then | ||
| await screen.findByText(Language.signIn, { exact: false }) | ||
| }) | ||
|
|
||
| it("shows an error message if SignIn fails", async () => { | ||
| // Given | ||
| render(<SignInPage />) | ||
| // Make login fail | ||
| server.use( | ||
| rest.post("/api/v2/users/login", async (req, res, ctx) => { | ||
|
|
@@ -35,17 +37,18 @@ describe("SignInPage", () => { | |
| ) | ||
|
|
||
| // When | ||
| // Set email / password | ||
| const email = screen.getByLabelText(Language.emailLabel) | ||
| const password = screen.getByLabelText(Language.passwordLabel) | ||
| userEvent.type(email, "[email protected]") | ||
| userEvent.type(password, "password") | ||
|
There was a problem hiding this comment. praise: This is looking really nice! |
||
| // Click sign-in | ||
| const signInButton = await screen.findByText(Language.signIn) | ||
| act(() => signInButton.click()) | ||
|
|
||
| // Then | ||
| // Finding error by test id because it comes from the backend | ||
| const errorMessage = await screen.findByText(Language.authErrorMessage) | ||
| expect(errorMessage).toBeDefined() | ||
| expect(history.location.pathname).toEqual("/login") | ||
| }) | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@vapurrmaid @kylecarbs do we want validation on the password?
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the same as it is in V1, I'm inclined to circle back to it later since it's separate from this change and would need some tests. I think that overhead warrants it as a separate concern.
There's also potentially the desire to have the validation regex come from the backend so that it's centralized. We can brainstorm more on that over gap week next week.
cc @f0ssel @deansheather @johnstcn @coadler --> we've all spoken about centralizing things in the backend at some point in a recent breakout session, would love to noodle on moving validation/regexes into the BE as well, to see if it's a worthwhile idea to explore.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think in this case if we just make it so the backend does the validation and then returns a per-field error that the frontend can parse then it's the same effect without having to do weird stuff like returning regexes from the backend
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Worth considering, but we should also think about the user experience of having to submit your form before you find out that it's invalid.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
patternfield for stuff like regexes and use auto-generation magic to keep validations in sync across FE and BE. This wouldn't let us do fancy stuff like interdependent fields though.validate(or whatever you want to name it) that will signal the backend to only perform field validations and no other action.