From 344403e2d199672e80ff8403bcad759c0363d5d4 Mon Sep 17 00:00:00 2001 From: Klove Adams Date: Thu, 5 Aug 2021 15:57:15 -0400 Subject: [PATCH 1/3] Finished questions/starting project --- Understanding-Questions.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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 From 137980db4ce6e5150db27acf3b6297abfc41f42e Mon Sep 17 00:00:00 2001 From: Klove Adams Date: Thu, 5 Aug 2021 16:11:17 -0400 Subject: [PATCH 2/3] Test 1&2 working --- src/components/ContactForm.test.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/ContactForm.test.js b/src/components/ContactForm.test.js index 5f80a897..5c27843d 100644 --- a/src/components/ContactForm.test.js +++ b/src/components/ContactForm.test.js @@ -5,11 +5,15 @@ 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 () => { From caa8c134f44f8393236f88ec81b6e8eabf29f520 Mon Sep 17 00:00:00 2001 From: Klove Adams Date: Thu, 5 Aug 2021 19:45:22 -0400 Subject: [PATCH 3/3] Done --- src/components/ContactForm.test.js | 113 +++++++++++++++++++++++++++-- 1 file changed, 106 insertions(+), 7 deletions(-) diff --git a/src/components/ContactForm.test.js b/src/components/ContactForm.test.js index 5c27843d..8d01d963 100644 --- a/src/components/ContactForm.test.js +++ b/src/components/ContactForm.test.js @@ -10,6 +10,7 @@ test('renders without errors', ()=>{ test('renders the contact form header', ()=> { render(); + const header = screen.queryByText(/contact form/i); expect(header).toBeInTheDocument(); expect(header).toBeTruthy(); @@ -17,29 +18,127 @@ test('renders the contact form header', ()=> { }); 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