diff --git a/frontend/components/ContactForm.test.js b/frontend/components/ContactForm.test.js
index d0a4f5f2..10af3e0a 100644
--- a/frontend/components/ContactForm.test.js
+++ b/frontend/components/ContactForm.test.js
@@ -1,41 +1,148 @@
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';
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 () => {
+ 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 () => {
+ 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();
});
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();
+
+ });
});