completed all mvp task

frontend/components/ContactForm.js

@@ -67,6 +67,7 @@ const ContactForm = () => {
       [e.target.name]: e.target.value
     });
   };
+  throw new Error("bad error.");
 
   return (
     <div className="App">

frontend/components/ContactForm.test.js

@@ -5,37 +5,105 @@ import userEvent from '@testing-library/user-event';
 import ContactForm from './ContactForm';
 
 test('renders without errors', () => {
-
+    render(<ContactForm />);
 });
 
 test('renders the contact form header', () => {
+    render(<ContactForm/>);
+
+    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 () => {
+    render(<ContactForm/>);
 
+    const firstNameField = screen.getByLabelText(/First Name*/i);
+    userEvent.type(firstNameField, "123");
+
+    const errorMessage = await screen.findByTestId('error');
+    expect(errorMessage).toHaveLength(1);
 });
 
 test('renders THREE error messages if user enters no values into any fields.', async () => {
+    render(<ContactForm/>);
+
+    const submitButton = screen.getByRole("button");
+    userEvent.click(submitButton);
 
+    await waitFor(()=>{
+        const errorMessags = 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 () => {
+    render(<ContactForm/>);
+
+    const firstNameField = screen.getByLabelText(/first name*/i);
+    userEvent.type(firstNameField, "kate");
+
+    const lastNameField = screen.getByLabelText(/last name*/i);
+    userEvent.type(lastNameField, "ridgle");
+
+    const button = screen.getByRole("button");
+    userEvent.click(button);
 
+    const errorMessages = away screen.getAllByTestId("error");
+    expect(errorMessages).toHaveLength(1);
 });
 
 test('renders "email must be a valid email address" if an invalid email is entered', async () => {
+  render(<ContactForm/>);
+
+  const emailField = screen.getByLabelText(/email*/i);
+  userEvent.type(emailField, "kateridgle2394@gmail.com");
 
+  const errorMessage = await screen.findByText(/email must be a valid email address/i);
+  expect(errorMessage).toBeInTheDocument();
 });
 
 test('renders "lastName is a required field" if an last name is not entered and the submit button is clicked', async () => {
+    render(<ContactForm/>);
+
+    const submitButton = screen.getByRole('button');
+    userEvent.click(submitButton);
+
+    const errorMessage =await screen.findByText(/last name 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(<ContactForm/>)
+
+    const firstNameField = screen.getByLabelText(/first name*/i);
+    const lastNameField = screen.getByLabelText(/last name*/i);
+    const emailField = screen.getByLabelText(/email*/i);
+
+    userEvent.type(firstNameField, "kate");
+    userEvent.type(lastNameField, "ridgle");
+    userEvent.type(emailField, "kateridgle2394@gmail.com");
+
+    const button = screen.getByRole("button");
+    userEvent.click(button);
+
+    await waitFor(()=>{
+        const firstNameDisplay = screen.queryByText('kate');
+        const lastNameDisplay = screen.queryByText('ridgle');
+        const emailDisplay = screen.queryByText('kateridgle2394@gmail.com');
 
+        expect(firstNameDisplay).toBeInTheDocument();
+        expect(lastNameDisplay).toBeInTheDocument();
+        expect(emailDisplay).toBeInTheDocument();
+    })
 });
 
 test('renders all fields text when all fields are submitted.', async () => {
+    render(<ContactForm/>)
 
+
 });