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..710efb7e 100644 --- a/frontend/components/ContactForm.test.js +++ b/frontend/components/ContactForm.test.js @@ -1,41 +1,155 @@ -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'; +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 without errors', () => { +test("renders the contact form header", () => { + render(); + const contactHeader = screen.getByText(/Contact Form/i); + console.log(contactHeader); + expect(contactHeader).toBeInTheDocument(); }); -test('renders the contact form header', () => { +test("renders ONE error message if user enters less then 5 characters into firstname.", async () => { + // Arrange + render(); + // Act + 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 ONE error message if user enters less then 5 characters into firstname.', async () => { +test("renders THREE error messages if user enters no values into any fields.", async () => { + // Arrange + render(); + // Assert + const submitBtn = screen.getByRole("button"); + userEvent.click(submitBtn); + + await waitFor(() => { + const errorMsg = screen.queryAllByTestId("error"); + expect(errorMsg).toHaveLength(3); + }); }); -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 () => { + render(); -}); + const firstNameInput = screen.getByLabelText(/First Name*/i); + userEvent.type(firstNameInput, "Aaron"); -test('renders ONE error message if user enters a valid first name and last name but no email.', async () => { + 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"); + + 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 "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 email = screen.getByLabelText(/email*/i); + userEvent.type(email, "belmoreaaron9@gmail.com"); + const btn = screen.getByRole("button"); + userEvent.click(btn); + + const errorMsg = await screen.findByText(/lastName is a required field/i); + + expect(errorMsg).toBeInTheDocument(); }); -test('renders all firstName, lastName and email text when submitted. Does NOT render message if message is not submitted.', 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"); + + const email = screen.getByLabelText(/email*/i); + userEvent.type(email, "belmoreaaron9@gmail.com"); + + 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 () => { +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(); + }); });