diff --git a/src/app.test.js b/src/app.test.js new file mode 100644 index 00000000..3f3a1642 --- /dev/null +++ b/src/app.test.js @@ -0,0 +1,7 @@ +import React from 'react'; +import { render, screen } from "@testing-library/react"; +import App from "./App"; + +test("renders the component", () => { + render() +}); \ No newline at end of file diff --git a/src/components/ContactForm.test.js b/src/components/ContactForm.test.js index 5f80a897..28e4a6b0 100644 --- a/src/components/ContactForm.test.js +++ b/src/components/ContactForm.test.js @@ -5,37 +5,96 @@ import userEvent from '@testing-library/user-event'; import ContactForm from './ContactForm'; test('renders without errors', ()=>{ - + render(); }); test('renders the contact form header', ()=> { - + const header = screen.queryByText(/contact form/i); }); test('renders ONE error message if user enters less then 5 characters into firstname.', async () => { - + render(); + + const nameInput = screen.getByLabelText(/first name/i); + userEvent.type(nameInput, "bill"); }); test('renders THREE error messages if user enters no values into any fields.', async () => { - + render(); + + 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, ""); + + const button = screen.getByRole("button"); + userEvent.click(button); }); 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, "Mike"); + + const lastNameInput = screen.getByLabelText(/last name/i); + userEvent.type(lastNameInput, "Jone"); + + const emailInput = screen.getByLabelText(/email/i); + userEvent.type(emailInput, ""); + + const button = screen.getByRole("button"); + userEvent.click(button); }); test('renders "email must be a valid email address" if an invalid email is entered', async () => { - + render(); + + const emailInputError = screen.getByLabelText(/emai/i); + userEvent.type(emailInputError, "abc"); + expect(screen.getByTestId('error').toHaveTextContent('Error: email must be a valid')) }); test('renders "lastName is a required field" if an last name is not entered and the submit button is clicked', async () => { + render (); + + const lastNameError = screen.getByLabelText(/last name/i); + userEvent.type(lastNameError, ""); + const button = screen.getByRole("button"); + userEvent.click(button); + expect(screen.getByText(/Error: lastName is a required field/i)).toHaveTextContent('lastName is a required field'); }); test('renders all firstName, lastName and email text when submitted. Does NOT render message if message is not submitted.', async () => { - + render (); + + const emailInputError = screen.getByLabelText(/email/i); + userEvent.type(emailInputError, "abc"); + expect(screen.getByTestId('error')).toHaveTextContent('Error: email must be a valid email address.'); }); test('renders all fields text when all fields are submitted.', async () => { - + render (); + + const firstNameInput = screen.getByLabelText (/first name/i); + userEvent.type(firstNameInput, "Mike"); + + const lastNameInput = screen.getByLabelText (/last name/i); + userEvent.type(lastNameInput, "Jones"); + + const emailInput = screen.getByLabelText(/email/i); + userEvent.type(emailInput, "whoismikejones@gmail.com"); + + const button = screen.getByRole("button"); + userEvent.click(button); + + await waitFor(() => { + const newItem = screen.getByText("Mike"); + expect(newItem).toBeInTheDocument(); + }); }); \ No newline at end of file