From 5439b047ca2792b0055d15ffb72df17c2a283526 Mon Sep 17 00:00:00 2001 From: Aaron Belmore Date: Thu, 18 May 2023 17:16:40 -0400 Subject: [PATCH 1/4] COmpleted first three tests --- frontend/App.js | 4 +- frontend/components/ContactForm.test.js | 60 ++++++++++++++++--------- 2 files changed, 42 insertions(+), 22 deletions(-) diff --git a/frontend/App.js b/frontend/App.js index 7bdfeaaf..f7391caf 100644 --- a/frontend/App.js +++ b/frontend/App.js @@ -11,7 +11,7 @@ const App = () => { - ) -} + ); +}; export default App; diff --git a/frontend/components/ContactForm.test.js b/frontend/components/ContactForm.test.js index d0a4f5f2..59b6c3f7 100644 --- a/frontend/components/ContactForm.test.js +++ b/frontend/components/ContactForm.test.js @@ -1,41 +1,61 @@ -import React from 'react'; -import { 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'; - -test('renders without errors', () => { +import React from "react"; +import { 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"; +test("renders without errors", () => { + render(); }); -test('renders the contact form header', () => { +test("renders the contact form header", () => { + render(); + + const contactHeader= screen.getByText(/Contact Form/i); + console.log(contactHeader); + expect(contactHeader).toBeInTheDocument(); }); -test('renders ONE error message if user enters less then 5 characters into firstname.', async () => { +test("renders ONE error message if user enters less then 5 characters into firstname.", async () => { + // Arrange + render(); + // Assert + const firstNameInput = screen.getByLabelText(/First Name*/i); + userEvent.type(firstNameInput,"Aar"); + console.log(firstNameInput) + const errorMsg = await screen.findAllByTestId("error"); + -}); + expect(errorMsg).toHaveLength(1); -test('renders THREE error messages if user enters no values into any fields.', async () => { }); -test('renders ONE error message if user enters a valid first name and last name but no email.', async () => { +test("renders THREE error messages if user enters no values into any fields.", async () => { + // Arrange + render(); + // Assert + const firstNameInput = screen.getByLabelText(/First Name*/i); + userEvent.type(firstNameInput,""); -}); + const lastNameInput = screen.getByLabelText(/Last Name*/i); + userEvent.type(lastNameInput,""); -test('renders "email must be a valid email address" if an invalid email is entered', async () => { + const emailInput = screen.getByLabelText(/Email*/i); + userEvent.type(emailInput,""); -}); -test('renders "lastName is a required field" if an last name is not entered and the submit button is clicked', async () => { + }); -test('renders all firstName, lastName and email text when submitted. Does NOT render message if message is not submitted.', async () => { +test("renders ONE error message if user enters a valid first name and last name but no email.", async () => {}); -}); +test('renders "email must be a valid email address" if an invalid email is entered', async () => {}); -test('renders all fields text when all fields are submitted.', async () => { +test('renders "lastName is a required field" if an last name is not entered and the submit button is clicked', async () => {}); -}); +test("renders all firstName, lastName and email text when submitted. Does NOT render message if message is not submitted.", async () => {}); + +test("renders all fields text when all fields are submitted.", async () => {}); From 4369e8d6bceb16727eb9bd51822a93b6a5c4e28f Mon Sep 17 00:00:00 2001 From: Aaron Belmore Date: Thu, 18 May 2023 17:23:58 -0400 Subject: [PATCH 2/4] Completed first four tests --- frontend/components/ContactForm.test.js | 50 +++++++++++-------------- 1 file changed, 21 insertions(+), 29 deletions(-) diff --git a/frontend/components/ContactForm.test.js b/frontend/components/ContactForm.test.js index 59b6c3f7..56577b3c 100644 --- a/frontend/components/ContactForm.test.js +++ b/frontend/components/ContactForm.test.js @@ -9,45 +9,37 @@ test("renders without errors", () => { }); test("renders the contact form header", () => { - render(); - - const contactHeader= screen.getByText(/Contact Form/i); - console.log(contactHeader); - expect(contactHeader).toBeInTheDocument(); + render(); + const contactHeader = screen.getByText(/Contact Form/i); + console.log(contactHeader); + expect(contactHeader).toBeInTheDocument(); }); test("renders ONE error message if user enters less then 5 characters into firstname.", async () => { - // Arrange - render(); - // Assert - const firstNameInput = screen.getByLabelText(/First Name*/i); - userEvent.type(firstNameInput,"Aar"); - console.log(firstNameInput) - const errorMsg = await screen.findAllByTestId("error"); - - - expect(errorMsg).toHaveLength(1); - + // Arrange + render(); + // Assert + const firstNameInput = screen.getByLabelText(/First Name*/i); + userEvent.type(firstNameInput, "Aar"); + console.log(firstNameInput); + const errorMsg = await screen.findAllByTestId("error"); + expect(errorMsg).toHaveLength(1); }); test("renders THREE error messages if user enters no values into any fields.", async () => { - // Arrange - render(); - // Assert - const firstNameInput = screen.getByLabelText(/First Name*/i); - userEvent.type(firstNameInput,""); - - const lastNameInput = screen.getByLabelText(/Last Name*/i); - userEvent.type(lastNameInput,""); - - const emailInput = screen.getByLabelText(/Email*/i); - userEvent.type(emailInput,""); - + // Arrange + render(); + // Assert + const submitBtn = screen.getByRole("button"); + userEvent.click(submitBtn); + await waitFor(() => { + const errorMsg= screen.queryAllByTestId("error"); - + expect(errorMsg).toHaveLength(3); + }); }); test("renders ONE error message if user enters a valid first name and last name but no email.", async () => {}); From c83c15c4b09ebe89d3542c7eb3af8688d70091d8 Mon Sep 17 00:00:00 2001 From: Aaron Belmore Date: Thu, 18 May 2023 17:54:32 -0400 Subject: [PATCH 3/4] Completed six tasks --- frontend/components/ContactForm.test.js | 49 +++++++++++++++++++++++-- 1 file changed, 46 insertions(+), 3 deletions(-) diff --git a/frontend/components/ContactForm.test.js b/frontend/components/ContactForm.test.js index 56577b3c..5112b94a 100644 --- a/frontend/components/ContactForm.test.js +++ b/frontend/components/ContactForm.test.js @@ -19,7 +19,7 @@ test("renders the contact form header", () => { test("renders ONE error message if user enters less then 5 characters into firstname.", async () => { // Arrange render(); - // Assert + // Act const firstNameInput = screen.getByLabelText(/First Name*/i); userEvent.type(firstNameInput, "Aar"); console.log(firstNameInput); @@ -42,9 +42,52 @@ 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 () => {}); +test("renders ONE error message if user enters a valid first name and last name but no email.", async () => { + render(); + + const firstNameInput = screen.getByLabelText(/First Name*/i); + userEvent.type(firstNameInput, "Aaron"); + + const lastNameInput = screen.getByLabelText(/Last Name*/i); + userEvent.type(lastNameInput, "Belmore"); + + const submitBtn = screen.getByRole("button"); + userEvent.click(submitBtn); + + await waitFor(() => { + const errorMsg= screen.queryAllByTestId("error"); + + expect(errorMsg).toHaveLength(1); + }); + + + + + + + +}); + +test('renders "email must be a valid email address" if an invalid email is entered', async () => { + render(); + + const firstNameInput = screen.getByLabelText(/First Name*/i); + userEvent.type(firstNameInput, "Aaron"); + + const lastNameInput = screen.getByLabelText(/Last Name*/i); + userEvent.type(lastNameInput, "Belmore"); + + const email = screen.getByLabelText(/email*/i); + userEvent.type(email,'belmoresoj'); -test('renders "email must be a valid email address" if an invalid email is entered', async () => {}); + await waitFor(() => { + const errorMsg= screen.queryAllByTestId("error"); + + expect(errorMsg).toHaveLength(1); + }); + + +}); test('renders "lastName is a required field" if an last name is not entered and the submit button is clicked', async () => {}); From 1aec89f1a6a168571a94ae19a360ffdd5816b597 Mon Sep 17 00:00:00 2001 From: Aaron Belmore Date: Thu, 18 May 2023 18:46:03 -0400 Subject: [PATCH 4/4] Completed all tasks --- frontend/components/ContactForm.test.js | 101 +++++++++++++++++++----- 1 file changed, 80 insertions(+), 21 deletions(-) diff --git a/frontend/components/ContactForm.test.js b/frontend/components/ContactForm.test.js index 5112b94a..710efb7e 100644 --- a/frontend/components/ContactForm.test.js +++ b/frontend/components/ContactForm.test.js @@ -36,14 +36,14 @@ test("renders THREE error messages if user enters no values into any fields.", a userEvent.click(submitBtn); await waitFor(() => { - const errorMsg= screen.queryAllByTestId("error"); + const errorMsg = screen.queryAllByTestId("error"); expect(errorMsg).toHaveLength(3); }); }); test("renders ONE error message if user enters a valid first name and last name but no email.", async () => { - render(); + render(); const firstNameInput = screen.getByLabelText(/First Name*/i); userEvent.type(firstNameInput, "Aaron"); @@ -55,42 +55,101 @@ test("renders ONE error message if user enters a valid first name and last name userEvent.click(submitBtn); await waitFor(() => { - const errorMsg= screen.queryAllByTestId("error"); + const errorMsg = screen.queryAllByTestId("error"); expect(errorMsg).toHaveLength(1); }); +}); +test('renders "email must be a valid email address" if an invalid email is entered', async () => { + render(); + const firstNameInput = screen.getByLabelText(/First Name*/i); + userEvent.type(firstNameInput, "Aaron"); + const lastNameInput = screen.getByLabelText(/Last Name*/i); + userEvent.type(lastNameInput, "Belmore"); + const email = screen.getByLabelText(/email*/i); + userEvent.type(email, "belmoresoj"); + const btn = screen.getByRole("button"); + userEvent.click(btn); + const errorMsg = await screen.findByText( + /email must be a valid email address/i + ); + expect(errorMsg).toBeInTheDocument(); }); -test('renders "email must be a valid email address" if an invalid email is entered', async () => { - render(); +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.getByLabelText(/First Name*/i); - userEvent.type(firstNameInput, "Aaron"); - - const lastNameInput = screen.getByLabelText(/Last Name*/i); - userEvent.type(lastNameInput, "Belmore"); - - const email = screen.getByLabelText(/email*/i); - userEvent.type(email,'belmoresoj'); + const firstNameInput = screen.getByLabelText(/First Name*/i); + userEvent.type(firstNameInput, "Aaron"); + + const email = screen.getByLabelText(/email*/i); + userEvent.type(email, "belmoreaaron9@gmail.com"); - await waitFor(() => { - const errorMsg= screen.queryAllByTestId("error"); - - expect(errorMsg).toHaveLength(1); - }); + const btn = screen.getByRole("button"); + userEvent.click(btn); + const errorMsg = await screen.findByText(/lastName is a required field/i); + expect(errorMsg).toBeInTheDocument(); }); -test('renders "lastName is a required field" if an last name is not entered and the submit button is clicked', async () => {}); +test("renders all firstName, lastName and email text when submitted. Does NOT render message if message is not submitted.", async () => { + render(); + + const firstNameInput = screen.getByLabelText(/First Name*/i); + userEvent.type(firstNameInput, "Aaron"); + + const lastNameInput = screen.getByLabelText(/last Name*/i); + userEvent.type(lastNameInput, "Belmore"); -test("renders all firstName, lastName and email text when submitted. Does NOT render message if message is not submitted.", async () => {}); + const email = screen.getByLabelText(/email*/i); + userEvent.type(email, "belmoreaaron9@gmail.com"); -test("renders all fields text when all fields are submitted.", async () => {}); + const btn = screen.getByRole("button"); + userEvent.click(btn); + + await waitFor(() => { + const firstNameReveal = screen.queryByText("Aaron"); + const lastNameReveal = screen.queryByText("Belmore"); + const emailNameReveal = screen.queryByText("belmoreaaron9@gmail.com"); + const messageDisplay = screen.queryByTestId("MessageDisplay"); + expect(messageDisplay).not.toBeInTheDocument(); + }); +}); + +test("renders all fields text when all fields are submitted.", async () => { + render(); + + const firstNameInput = screen.getByLabelText(/First Name*/i); + userEvent.type(firstNameInput, "Aaron"); + + const lastNameInput = screen.getByLabelText(/last Name*/i); + userEvent.type(lastNameInput, "Belmore"); + + const email = screen.getByLabelText(/email*/i); + userEvent.type(email, "belmoreaaron9@gmail.com"); + + const message = screen.getByLabelText(/message/i); + userEvent.type(message, "I'm ready to learn."); + + const btn = screen.getByRole("button"); + userEvent.click(btn); + + await waitFor(() => { + const firstNameReveal = screen.queryByText("Aaron"); + const lastNameReveal = screen.queryByText("Belmore"); + const emailNameReveal = screen.queryByText("belmoreaaron9@gmail.com"); + const messageDisplay = screen.queryByText("I'm ready to learn."); + expect(messageDisplay).toBeInTheDocument(); + expect(firstNameReveal).toBeInTheDocument(); + expect(emailNameReveal).toBeInTheDocument(); + expect(lastNameReveal).toBeInTheDocument(); + }); +});