diff --git a/frontend/components/ContactForm.test.js b/frontend/components/ContactForm.test.js
index d0a4f5f2..82571daf 100644
--- a/frontend/components/ContactForm.test.js
+++ b/frontend/components/ContactForm.test.js
@@ -5,37 +5,81 @@ import userEvent from '@testing-library/user-event';
import ContactForm from './ContactForm';
test('renders without errors', () => {
-
-});
+ render()});
test('renders the contact form header', () => {
-
-});
+ render()
+ const header = screen.findByText(/contact form/i)
+ expect(header).toBeVisible;});
test('renders ONE error message if user enters less then 5 characters into firstname.', async () => {
-
-});
+ render()
+ const header = screen.findByLabelText('firstname')
+ userEvent.type(firstName, 'edd')
+ expect(screen.findByText('Error: first Name must have atleast have 5 characters')).toBeVisible});
test('renders THREE error messages if user enters no values into any fields.', async () => {
-
-});
+ render()
+ const firstName = screen.findByLabelText('firstname')
+ const lastName = screen.findByLabelText('lastname')
+ const email = screen.findByLabelText('email')
+ userEvent.type(firstName, ' {backspace} ')
+ userEvent.type(lastName,'{backspace}')
+ userEvent.type(email, '{backspace}')
+ expect(screen.findByText('Error: First name must have atleast 5 characters')).toBeVisible
+ expect(screen.findByText('Error: Last Name is a required Field')).toBeVisible
+ expect(screen.findByText('Error: email must be a valid email address.')).toBeVisible});
test('renders ONE error message if user enters a valid first name and last name but no email.', async () => {
-
-});
+ render()
+ const firstName = screen.findByLabelText('firstname')
+ const lastName = screen.findByLabelText('lastname')
+ const submit = screen.findByRole('button')
+ userEvent.type(firstName, 'Steven')
+ userEvent.type(lastName, 'Grant')
+ userEvent.click(await submit)
+ expect(screen.findAllByText('Error: email must be a valid email address.')).toBeVisible});
test('renders "email must be a valid email address" if an invalid email is entered', 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 () => {
-
-});
+ render()
+ const email = screen.findByLabelText('email')
+ userEvent.type(email, 'email')
+ expect(screen.findByText('Error: email must be a valid email address.')).toBeVisible});
+
+test('renders "lastName is a required field" if an last name is not entered and the submit button is clicked', async () =>{
+ render()
+ const submit = screen.findByRole('button')
+ userEvent.click(await submit)
+ expect(screen.findByText('Error: lastName is a required field.')).toBeVisible});
+
+test('renders all firstName, lastName and email text when submitted. Does NOT render message if message is not submitted.', async () =>{
+render()
+const firstName = screen.findByLabelText('firstname')
+const lastName = screen.findByLabelText('lastname')
+const email = screen.findByText('email')
+const submit = screen.findByRole('button')
+userEvent.type(firstName, 'Steven')
+userEvent.type(lastName, 'Grant')
+userEvent.type(email, 'email@email.com')
+userEvent.click(await submit)
+expect(screen.findByText(/you submitted/i)).toBeInTheDocument
+expect(screen.findByText(/first name:steven/i)).toBeInTheDocument
+expect(screen.findByText(/email: email@email.com/i)).toBeInTheDocument
+expect(screen.findByTestId('messageDisplay')).not.toBeInTheDocument});
test('renders all fields text when all fields are submitted.', async () => {
-
-});
+ render()
+ const firstName = screen.findByLabelText('firstname')
+ const lastName = screen.findByLabelText('lastname')
+ const submit = screen.findByRole('button')
+ const message = screen.findByRole('message')
+ userEvent.type(firstName, 'Steven')
+ userEvent.type(lastName, 'Grant')
+ userEvent.type(email, 'email@email.com')
+ userEvent.type(message, 'test text message')
+ userEvent.click(await submit)
+ expect(screen.findByText(/you submitted/i)).toBeInTheDocument
+ expect(screen.findByText(/first name: steevn/i)).toBeInTheDocument
+ expect(screen.findByText(/last name: grant/i)).toBeInTheDocument
+ expect(screen.findByText(/email: email@email.com/i)).toBeInTheDocument
+ expect(screen.findByText(/message: test text message/i)).toBeInTheDocument});