diff --git a/frontend/components/ContactForm.test.js b/frontend/components/ContactForm.test.js
index d0a4f5f2..fe0fef70 100644
--- a/frontend/components/ContactForm.test.js
+++ b/frontend/components/ContactForm.test.js
@@ -5,37 +5,134 @@ 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 submitbutton = screen.getByRole("button")
+ userEvent.click(submitbutton)
+ 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 firstname = screen.getByLabelText(/First Name*/i)
+ const lastname = screen.getByLabelText(/Last Name*/i)
+
+ userEvent.type(firstname, "emrie")
+ userEvent.type(lastname, "lalaland")
+ const submitbutton = screen.getByRole("button")
+ userEvent.click(submitbutton)
+
+ await waitFor(() => {
+ const errormessage = screen.queryAllByTestId("error")
+ expect(errormessage).toHaveLength(1)
+ })
});
test('renders "email must be a valid email address" if an invalid email is entered', async () => {
+ render();
+ const email = screen.getByLabelText(/Email*/i)
+ userEvent.type(email, "abcdefg");
+
+ const errorMessages = await screen.findByText(/email must be a valid email address/i)
+ expect(errorMessages).toBeInTheDocument()
+
});
test('renders "lastName is a required field" if an last name is not entered and the submit button is clicked', async () => {
+ render();
+ const submitbutton = screen.getByRole("button")
+ userEvent.click(submitbutton)
+ const error = await screen.findByText(/lastName is a required field/i)
+ expect(error).toBeInTheDocument()
+
+
});
test('renders all firstName, lastName and email text when submitted. Does NOT render message if message is not submitted.', async () => {
+ render();
+
+ const firstname = screen.getByLabelText(/First Name*/i)
+ const lastname = screen.getByLabelText(/Last Name*/i)
+ const email = screen.getByLabelText(/Email*/i)
+
+ userEvent.type(firstname, "emrie")
+ userEvent.type(lastname, "lalaland")
+ userEvent.type(email, "abcdefg@gmail.com");
+
+ const submitbutton = screen.getByRole("button")
+ userEvent.click(submitbutton)
+
+ await waitFor(()=>{
+ const firstdisplay = screen.queryByText("emrie")
+ const lastdisplay = screen.queryByText("lalaland")
+ const emaildisplay = screen.queryByText("abcdefg@gmail.com")
+ const messagedisplay = screen.queryByTestId("messageDisplay")
+
+
+ expect(firstdisplay).toBeInTheDocument()
+ expect(lastdisplay).toBeInTheDocument()
+ expect(emaildisplay).toBeInTheDocument()
+ expect(messagedisplay).not.toBeInTheDocument()
+ })
});
test('renders all fields text when all fields are submitted.', async () => {
+ render();
+ const firstname = screen.getByLabelText(/First Name*/i)
+ const lastname = screen.getByLabelText(/Last Name*/i)
+ const email = screen.getByLabelText(/Email*/i)
+ const message = screen.getByLabelText(/message/i)
+
+ userEvent.type(firstname, "emrie")
+ userEvent.type(lastname, "lalaland")
+ userEvent.type(email, "abcdefg@gmail.com");
+ userEvent.type(message, "text message")
+
+ const submitbutton = screen.getByRole("button")
+ userEvent.click(submitbutton)
+
+ await waitFor(()=>{
+ const firstdisplay = screen.queryByText("emrie")
+ const lastdisplay = screen.queryByText("lalaland")
+ const emaildisplay = screen.queryByText("abcdefg@gmail.com")
+ const messagedisplay = screen.queryByText("text message")
+
+
+ expect(firstdisplay).toBeInTheDocument()
+ expect(lastdisplay).toBeInTheDocument()
+ expect(emaildisplay).toBeInTheDocument()
+ expect(messagedisplay).toBeInTheDocument()
+ })
+
+
});