diff --git a/frontend/components/ContactForm.test.js b/frontend/components/ContactForm.test.js
index d0a4f5f2..cadf4193 100644
--- a/frontend/components/ContactForm.test.js
+++ b/frontend/components/ContactForm.test.js
@@ -5,37 +5,107 @@ 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 firstName = screen.findByLabelText('firstname')
+ userEvent.type(firstName, 'edd')
+ expect(screen.findByText('Error: firstName must have at least 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: firstName must have at least 5 characters.'))
+ .toBeVisible
+ expect(screen.findByText('Error: lastName 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 () => {
+ 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.findByLabelText('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(/last name: grant/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 email = screen.findByLabelText('email')
+ 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: steven/i)).toBeInTheDocument
+ expect(screen.findByText(/last name: grant/i)).toBeInTheDocument
+ expect(screen.findByText(/email: email@email.com/i)).toBeInTheDocument
+ expect(screen.findByText(/messsage: test text message/i)).toBeInTheDocument
+
+})