From 752c465e53773180cc36188c8552c9b836d74625 Mon Sep 17 00:00:00 2001 From: Texi Schaeffer Date: Wed, 1 Feb 2023 13:24:45 -0600 Subject: [PATCH 1/4] finished first 2 tests --- frontend/components/ContactForm.test.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/frontend/components/ContactForm.test.js b/frontend/components/ContactForm.test.js index d0a4f5f2..619155c3 100644 --- a/frontend/components/ContactForm.test.js +++ b/frontend/components/ContactForm.test.js @@ -5,11 +5,19 @@ import userEvent from '@testing-library/user-event'; import ContactForm from './ContactForm'; test('renders without errors', () => { - + render(); }); test('renders the contact form header', () => { + render(); + + const headerElement = screen.queryByText(/Contact Form/i); + + expect(headerElement).toBeInTheDocument(); + + expect(headerElement).toBeTruthy(); + expect(headerElement).toHaveTextContent(/contact form/i); }); test('renders ONE error message if user enters less then 5 characters into firstname.', async () => { From c772f0081916ebcd939c4acbd76ae3307e6ebb49 Mon Sep 17 00:00:00 2001 From: Texi Schaeffer Date: Wed, 1 Feb 2023 13:35:50 -0600 Subject: [PATCH 2/4] completed through test 4 --- frontend/components/ContactForm.test.js | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/frontend/components/ContactForm.test.js b/frontend/components/ContactForm.test.js index 619155c3..7a7b506b 100644 --- a/frontend/components/ContactForm.test.js +++ b/frontend/components/ContactForm.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen, waitFor } from '@testing-library/react'; +import { buildQueries, render, screen, waitFor } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; import userEvent from '@testing-library/user-event'; import ContactForm from './ContactForm'; @@ -21,11 +21,29 @@ test('renders the contact form header', () => { }); test('renders ONE error message if user enters less then 5 characters into firstname.', async () => { + render(); + + const firstNameField = screen.getByLabelText(/First Name*/i); + + userEvent.type(firstNameField, "123"); + + const errorMessages = await screen.findAllByTestId('error'); + expect(errorMessages).toHaveLength(1); }); test('renders THREE error messages if user enters no values into any fields.', async () => { + render(); + + const submitBtn = screen.getByRole('button'); + + userEvent.click(submitBtn); + + await waitFor(() => { + const errorMessages = screen.queryAllByTestId('error'); + expect(errorMessages).toHaveLength(3); + }) }); test('renders ONE error message if user enters a valid first name and last name but no email.', async () => { From b04ac384a075d788148f783eaaf6ceb51ff7427a Mon Sep 17 00:00:00 2001 From: Texi Schaeffer Date: Wed, 1 Feb 2023 13:53:16 -0600 Subject: [PATCH 3/4] completed through test 6 --- frontend/components/ContactForm.test.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/frontend/components/ContactForm.test.js b/frontend/components/ContactForm.test.js index 7a7b506b..044c3612 100644 --- a/frontend/components/ContactForm.test.js +++ b/frontend/components/ContactForm.test.js @@ -47,10 +47,32 @@ test('renders THREE error messages if user enters no values into any fields.', a }); test('renders ONE error message if user enters a valid first name and last name but no email.', async () => { + render(); + + const firstNameField = screen.getByLabelText(/first name*/i); + userEvent.type(firstNameField, "Joseph"); + + const lastNameField = screen.getByLabelText(/last name*/i); + userEvent.type(lastNameField, "Noriega"); + + const submitBtn = screen.getByRole('button'); + userEvent.click(submitBtn); + + const errorMessages = await screen.getAllByTestId('error'); + expect(errorMessages).toHaveLength(1); + }); test('renders "email must be a valid email address" if an invalid email is entered', async () => { + render(); + + const emailField = screen.getByLabelText(/email*/i); + userEvent.type(emailField, 'texi@gmail'); + + const errorMessage = await screen.findByText(/email must be a valid email address/i); + + expect(errorMessage).toBeInTheDocument(); }); From 6d1abb8aa94d7071c4427f013ab262c0f6e718a9 Mon Sep 17 00:00:00 2001 From: Texi Schaeffer Date: Wed, 1 Feb 2023 14:46:33 -0600 Subject: [PATCH 4/4] completed mvp --- frontend/components/ContactForm.test.js | 59 +++++++++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/frontend/components/ContactForm.test.js b/frontend/components/ContactForm.test.js index 044c3612..10af3e0a 100644 --- a/frontend/components/ContactForm.test.js +++ b/frontend/components/ContactForm.test.js @@ -77,13 +77,72 @@ test('renders "email must be a valid email address" if an invalid email is enter }); test('renders "lastName is a required field" if an last name is not entered and the submit button is clicked', async () => { + render(); + + const submitBtn = screen.getByRole('button'); + userEvent.click(submitBtn); + const errorMessage = await screen.findByText(/lastName is a required field/i); + + expect(errorMessage).toBeInTheDocument(); }); test('renders all firstName, lastName and email text when submitted. Does NOT render message if message is not submitted.', async () => { + render(); + + const firstNameField = screen.getByLabelText(/first name*/i); + const lastNameField = screen.getByLabelText(/last name*/i); + const emailField = screen.getByLabelText(/email*/i); + + userEvent.type(firstNameField, "Joseph"); + userEvent.type(lastNameField, "Noriega"); + userEvent.type(emailField, 'joseph@gmail.com'); + + const submitBtn = screen.getByRole('button'); + userEvent.click(submitBtn); + + await waitFor(() => { + const firstnameDisplay = screen.queryByText('Joseph'); + const lastnameDisplay = screen.queryByText('Noriega'); + const emailDisplay = screen.queryByText('joseph@gmail.com'); + const messageDisplay = screen.queryByTestId('messageDisplay'); + + expect(firstnameDisplay).toBeInTheDocument(); + expect(lastnameDisplay).toBeInTheDocument(); + expect(emailDisplay).toBeInTheDocument(); + expect(messageDisplay).not.toBeInTheDocument(); + + }); }); test('renders all fields text when all fields are submitted.', async () => { + render(); + + const firstNameField = screen.getByLabelText(/first name*/i); + const lastNameField = screen.getByLabelText(/last name*/i); + const emailField = screen.getByLabelText(/email*/i); + const messageField = screen.getByLabelText(/message/i); + + userEvent.type(firstNameField, "Joseph"); + userEvent.type(lastNameField, "Noriega"); + userEvent.type(emailField, 'joseph@gmail.com'); + userEvent.type(messageField, 'message display'); + + const submitBtn = screen.getByRole('button'); + userEvent.click(submitBtn); + + await waitFor(() => { + const firstnameDisplay = screen.queryByText('Joseph'); + const lastnameDisplay = screen.queryByText('Noriega'); + const emailDisplay = screen.queryByText('joseph@gmail.com'); + const messageDisplay = screen.queryByText('message display'); + + expect(firstnameDisplay).toBeInTheDocument(); + expect(lastnameDisplay).toBeInTheDocument(); + expect(emailDisplay).toBeInTheDocument(); + expect(messageDisplay).toBeInTheDocument(); + + }); });