diff --git a/Understanding-Questions.md b/Understanding-Questions.md index bb85443f..5acfc5c3 100644 --- a/Understanding-Questions.md +++ b/Understanding-Questions.md @@ -1,4 +1,9 @@ # Understanding Questions: 1. What are some possible tests for this application? * The component correctly renders. -* ... \ No newline at end of file +* Submit button is clickable & submits when clicked. +* Throws error when less the 5 charaters are enterd in the First name input after it has been in focus/submit button is clicked. +* Throws error when the Last name input is empty when focus levaes it/the submit button is clicked. +* Throws error for Email input when appropirate. +* Submit button changes color while in focus. +* Text enterd into inputs renders to the screen when you click the submit button. \ No newline at end of file diff --git a/src/components/ContactForm.test.js b/src/components/ContactForm.test.js index 5f80a897..8d01d963 100644 --- a/src/components/ContactForm.test.js +++ b/src/components/ContactForm.test.js @@ -5,37 +5,140 @@ import userEvent from '@testing-library/user-event'; import ContactForm from './ContactForm'; test('renders without errors', ()=>{ - + render(); }); test('renders the contact form header', ()=> { - + render(); + + const header = screen.queryByText(/contact form/i); + expect(header).toBeInTheDocument(); + expect(header).toBeTruthy(); + expect(header).toHaveTextContent(/contact form/i); }); test('renders ONE error message if user enters less then 5 characters into firstname.', async () => { - + render(); + + const firstNameInput = screen.getByPlaceholderText(/edd/i); + userEvent.type(firstNameInput, "greg"); + + const firstNameError = screen.getByTestId(/error/i); + expect(firstNameError).toBeInTheDocument(); + expect(firstNameError).toBeTruthy(); + expect(firstNameError).toHaveTextContent(/Error: firstName must have at least 5 characters/i) }); test('renders THREE error messages if user enters no values into any fields.', async () => { - + render(); + + const firstNameInput = screen.getByPlaceholderText(/edd/i); + const lastNameInput = screen.getByPlaceholderText(/burke/i); + const emailInput = screen.getByPlaceholderText(/bluebill1049@hotmail.com/i); + + userEvent.type(firstNameInput, "g"); + userEvent.type(lastNameInput, ""); + userEvent.type(emailInput, ""); + + const errors = screen.getByTestId(/error/i); + expect(errors).toBeInTheDocument(); + expect (errors).toBeTruthy(); + expect(errors).toHaveTextContent(/error/i) }); test('renders ONE error message if user enters a valid first name and last name but no email.', async () => { - + render(); + + const firstNameInput = screen.getByPlaceholderText(/edd/i); + const lastNameInput = screen.getByPlaceholderText(/burke/i); + const emailInput = screen.getByPlaceholderText(/bluebill1049@hotmail.com/i); + + userEvent.type(firstNameInput, "Klove"); + userEvent.type(lastNameInput, "Farlen"); + userEvent.type(emailInput, "g"); + + const emailError = screen.getByTestId(/error/i); + expect(emailError).toBeInTheDocument(); + expect (emailError).toBeTruthy(); + expect(emailError).toHaveTextContent(/Error: email must be a valid email address/i) }); test('renders "email must be a valid email address" if an invalid email is entered', async () => { - + render() + + const emailInput = screen.getByPlaceholderText(/bluebill1049@hotmail.com/i); + userEvent.type(emailInput, "greg"); + + const emailError = screen.getByTestId(/error/i); + expect(emailError).toBeInTheDocument(); + expect (emailError).toBeTruthy(); + expect(emailError).toHaveTextContent(/Error: email must be a valid email address/i) }); test('renders "lastName is a required field" if an last name is not entered and the submit button is clicked', async () => { - + render() + + const firstNameInput = screen.getByPlaceholderText(/edd/i); + const lastNameInput = screen.getByPlaceholderText(/burke/i); + const emailInput = screen.getByPlaceholderText(/bluebill1049@hotmail.com/i); + + userEvent.type(firstNameInput, "Klove"); + userEvent.type(lastNameInput, ""); + userEvent.type(emailInput, "greg@greg.com"); + + const submitButton = screen.getByRole("button"); + userEvent.click(submitButton); + + const lastNameError = screen.getByTestId(/error/i); + expect(lastNameError).toBeInTheDocument(); + expect(lastNameError).toBeTruthy(); + expect(lastNameError).toHaveTextContent(/Error: lastName is a required field/i) }); test('renders all firstName, lastName and email text when submitted. Does NOT render message if message is not submitted.', async () => { - + render() + + const firstNameInput = screen.getByPlaceholderText(/edd/i); + const lastNameInput = screen.getByPlaceholderText(/burke/i); + const emailInput = screen.getByPlaceholderText(/bluebill1049@hotmail.com/i); + + userEvent.type(firstNameInput, "Klove"); + userEvent.type(lastNameInput, "Farlen"); + userEvent.type(emailInput, "greg@greg.com"); + + const message = screen.queryByText(/you submitted/i) + expect(message).toBeFalsy(); + + const submitButton = screen.getByRole("button"); + userEvent.click(submitButton); + + const firstNameDisplay = screen.queryByTestId("firstnameDisplay"); + const lastNameDisplay = screen.queryByTestId("lastnameDisplay"); + const emailDisplay = screen.queryByTestId("emailDisplay"); + + expect(firstNameDisplay).toBeVisible(); + expect(lastNameDisplay).toBeVisible(); + expect(emailDisplay).toBeVisible(); }); test('renders all fields text when all fields are submitted.', async () => { - + render() + + const firstNameInput = screen.getByPlaceholderText(/edd/i); + const lastNameInput = screen.getByPlaceholderText(/burke/i); + const emailInput = screen.getByPlaceholderText(/bluebill1049@hotmail.com/i); + const messageInput = screen.getByLabelText(/message/i) + + userEvent.type(firstNameInput, "Klove"); + userEvent.type(lastNameInput, "Farlen"); + userEvent.type(emailInput, "greg@greg.com"); + userEvent.type(messageInput, "This is the message"); + + const submitButton = screen.getByRole("button"); + userEvent.click(submitButton); + + expect(firstNameInput).toHaveValue("Klove"); + expect(lastNameInput).toHaveValue("Farlen"); + expect(emailInput).toHaveValue("greg@greg.com"); + expect(messageInput).toHaveValue("This is the message") }); \ No newline at end of file