-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test: Complete remaining \
test.todo()s\ for List component validation
- Loading branch information
1 parent
be6a176
commit 4f6287a
Showing
4 changed files
with
164 additions
and
26 deletions.
There are no files selected for viewing
This file contains 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 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 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 |
|---|---|---|
|
|
@@ -378,19 +378,154 @@ describe("Building a list", () => { | |
| }); | ||
|
|
||
| describe("Form validation and error handling", () => { | ||
| test.todo("form validation is triggered when saving an item"); | ||
| test.todo("text fields use existing validation schemas"); | ||
| test.todo("number fields use existing validation schemas"); | ||
| test.todo("question fields use validation schema"); | ||
| test.todo("unique constraints are enforced on question where this is set"); | ||
| test.todo("optional fields can be empty when saving an item"); | ||
| test.todo("an error displays if the minimum number of items is not met"); | ||
| test.todo("an error displays if the maximum number of items is exceeded"); | ||
| test.todo( | ||
| "an error displays if you add a new item, without saving the active item", | ||
| test("form validation is triggered when saving an item", async () => { | ||
| const { user, getByRole, getAllByTestId } = setup(<ListComponent {...mockZooProps} />); | ||
|
|
||
| let errorMessages = getAllByTestId(/error-message-input/); | ||
|
|
||
| // Each field has an ErrorWrapper | ||
| expect(errorMessages).toHaveLength(mockZooProps.schema.fields.length) | ||
|
|
||
| // All are empty initially | ||
| errorMessages.forEach(message => { | ||
| expect(message).toBeEmptyDOMElement(); | ||
| }); | ||
|
|
||
| await user.click(getByRole("button", { name: /Save/ })); | ||
|
|
||
| // Error wrappers persist | ||
| errorMessages = getAllByTestId(/error-message-input/); | ||
| expect(errorMessages).toHaveLength(mockZooProps.schema.fields.length) | ||
|
|
||
| // Each field is in an error state | ||
| errorMessages.forEach(message => { | ||
| expect(message).not.toBeEmptyDOMElement(); | ||
| }); | ||
| }); | ||
|
|
||
| /** | ||
| * These tests are not exhaustive tests of validation schemas, these can be tested in their respective model.test.ts files | ||
| * We are testing that the validation schemas are correctly "wired up" to out List component fields | ||
| */ | ||
| describe("existing validation schemas are correctly referenced", () => { | ||
| test("text fields", async () => { | ||
| const { user, getByRole, getByTestId } = setup(<ListComponent {...mockZooProps} />); | ||
|
|
||
| const nameInput = screen.getByLabelText(/name/); | ||
| await user.type(nameInput, "This is a long string of text over one hundred and twenty characters, which should trigger the 'short' text validation warning"); | ||
| await user.click(getByRole("button", { name: /Save/ })); | ||
|
|
||
| const nameInputErrorMessage = getByTestId(/error-message-input-text-name/); | ||
|
|
||
| expect(nameInputErrorMessage).toHaveTextContent(/Your answer must be 120 characters or fewer/); | ||
| }); | ||
|
|
||
| test("number fields", async () => { | ||
| const { user, getByRole, getByTestId } = setup(<ListComponent {...mockZooProps} />); | ||
|
|
||
| const ageInput = screen.getByLabelText(/old/); | ||
| await user.type(ageInput, "-35"); | ||
| await user.click(getByRole("button", { name: /Save/ })); | ||
|
|
||
| const ageInputErrorMessage = getByTestId(/error-message-input-number-age/); | ||
|
|
||
| expect(ageInputErrorMessage).toHaveTextContent(/Enter a positive number/); | ||
| }); | ||
|
|
||
| test("question fields", async () => { | ||
| const { user, getByRole, getByTestId } = setup(<ListComponent {...mockZooProps} />); | ||
|
|
||
| await user.click(getByRole("button", { name: /Save/ })); | ||
|
|
||
| const sizeInputErrorMessage = getByTestId(/error-message-input-question-size/); | ||
|
|
||
| expect(sizeInputErrorMessage).toHaveTextContent(/Select your answer before continuing/); | ||
| }); | ||
|
|
||
| test("radio fields", async () => { | ||
| const { user, getByRole, getByTestId } = setup(<ListComponent {...mockZooProps} />); | ||
|
|
||
| await user.click(getByRole("button", { name: /Save/ })); | ||
|
|
||
| const cuteInputErrorMessage = getByTestId(/error-message-input-question-cute/); | ||
|
|
||
| expect(cuteInputErrorMessage).toHaveTextContent(/Select your answer before continuing/); | ||
| }); | ||
|
|
||
| test.todo("checklist fields") | ||
| }); | ||
|
|
||
| test("an error displays if the minimum number of items is not met", async () => { | ||
| const { user, getByRole, getByTestId, getByText } = setup(<ListComponent {...mockZooProps} />); | ||
|
|
||
| const minNumberOfItems = mockZooProps.schema.min; | ||
| expect(minNumberOfItems).toEqual(1); | ||
|
|
||
| await user.click(getByRole("button", { name: /Cancel/ })); | ||
| await user.click(getByTestId("continue-button")); | ||
|
|
||
| const minItemsErrorMessage = getByText(`You must provide at least ${minNumberOfItems} response(s)`) | ||
| expect(minItemsErrorMessage).toBeVisible(); | ||
| }); | ||
|
|
||
| test("an error displays if the maximum number of items is exceeded", async () => { | ||
| const { user, getAllByTestId, getByTestId, getByText } = setup(<ListComponent {...mockZooProps} />); | ||
| const addItemButton = getByTestId(/list-add-button/); | ||
|
|
||
| const maxNumberOfItems = mockZooProps.schema.max; | ||
| expect(maxNumberOfItems).toEqual(3); | ||
|
|
||
| // Complete three items | ||
| await fillInResponse(user); | ||
| await user.click(addItemButton); | ||
| await fillInResponse(user); | ||
| await user.click(addItemButton); | ||
| await fillInResponse(user); | ||
|
|
||
| const cards = getAllByTestId(/list-card/); | ||
| expect(cards).toHaveLength(3); | ||
|
|
||
| // Try to add a fourth | ||
| await user.click(getByTestId(/list-add-button/)); | ||
|
|
||
| const maxItemsErrorMessage = getByText(`You can provide at most ${maxNumberOfItems} response(s)`) | ||
| expect(maxItemsErrorMessage).toBeVisible(); | ||
| }); | ||
|
|
||
| test( | ||
| "an error displays if you add a new item, without saving the active item", async () => { | ||
| const { user, getByTestId, getByText, getByLabelText } = setup(<ListComponent {...mockZooProps} />); | ||
| // Start filling out item | ||
| const nameInput = getByLabelText(/name/); | ||
| await user.type(nameInput, "Richard Parker"); | ||
|
|
||
| const emailInput = getByLabelText(/email/); | ||
| await user.type(emailInput, "[email protected]"); | ||
|
|
||
| // Try to add a new item | ||
| await user.click(getByTestId(/list-add-button/)); | ||
|
|
||
| const activeItemErrorMessage = getByText(/Please save all responses before adding another/) | ||
| expect(activeItemErrorMessage).toBeVisible(); | ||
| } | ||
| ); | ||
| test.todo( | ||
| "an error displays if you continue, without saving the active item", | ||
|
|
||
| test( | ||
| "an error displays if you continue, without saving the active item", async () => { | ||
| const { user, getByTestId, getByText, getByLabelText } = setup(<ListComponent {...mockZooProps} />); | ||
| // Start filling out item | ||
| const nameInput = getByLabelText(/name/); | ||
| await user.type(nameInput, "Richard Parker"); | ||
|
|
||
| const emailInput = getByLabelText(/email/); | ||
| await user.type(emailInput, "[email protected]"); | ||
|
|
||
| // Try to continue | ||
| await user.click(getByTestId(/continue-button/)); | ||
|
|
||
| const unsavedItemErrorMessage = getByText(/Please save in order to continue/) | ||
| expect(unsavedItemErrorMessage).toBeVisible(); | ||
| } | ||
| ); | ||
| }); | ||
|
|
||
|
|
||
This file contains 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