diff --git a/frontend/components/ContactForm.js b/frontend/components/ContactForm.js
index d09f135f..10dacc3c 100644
--- a/frontend/components/ContactForm.js
+++ b/frontend/components/ContactForm.js
@@ -67,6 +67,7 @@ const ContactForm = () => {
[e.target.name]: e.target.value
});
};
+ throw new Error("bad error.");
return (
diff --git a/frontend/components/ContactForm.test.js b/frontend/components/ContactForm.test.js
index d0a4f5f2..8faa7c51 100644
--- a/frontend/components/ContactForm.test.js
+++ b/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();
});
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 errorMessage = await screen.findByTestId('error');
+ expect(errorMessage).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 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();
+
+ 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();
+
+ 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();
+
+ 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()
+
+ 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()
+
});