diff --git a/src/components/ContactForm.test.js b/src/components/ContactForm.test.js
index 5f80a897..7300f73b 100644
--- a/src/components/ContactForm.test.js
+++ b/src/components/ContactForm.test.js
@@ -5,37 +5,118 @@ 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.getByText(/Contact Form/i);
+ const header = screen.queryByText(/Contact Form/i);
+ expect(header).toBeInTheDocument();
+ expect(header).toBeTruthy();
+ expect(header).toHaveTextContent(/Contact Form/i);
});
test('renders ONE error message if user enters less then 5 characters into firstname.', async () => {
-
+ render()
+ const firstName = screen.getByLabelText(/First Name*/i);
+ userEvent.type(firstName, "abc")
+ 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 submit = screen.getByRole("button");
+ userEvent.click(submit);
+ 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)
+ userEvent.type(firstName, "abcde");
+ const lastName = screen.getByLabelText(/last name*/i)
+ userEvent.type(lastName, "abcde");
+
+ const button = screen.getByRole("button");
+ userEvent.click(button);
+
+ 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, "abc@");
+ 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 submit = screen.getByRole("button");
+ userEvent.click(submit);
+ 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 firstName = screen.getByLabelText(/first name*/i);
+ const lastName = screen.getByLabelText(/last name*/i);
+ const email = screen.getByLabelText(/email*/i);
+
+ userEvent.type(firstName, "abcde");
+ userEvent.type(lastName, "fghijk");
+ userEvent.type(email, "abc@def.com");
+
+ const button = screen.getByRole("button");
+ userEvent.click(button);
+
+ await waitFor(() => {
+ const firstDisplay = screen.queryByText("abcde");
+ const lastDisplay = screen.queryByText("fghijk");
+ const emailDisplay = screen.queryByText("abc@def.com");
+ const messageDisplay = screen.queryByTestId("ilovecoding");
+
+ 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, "abcde");
+ userEvent.type(lastName, "fghijk");
+ userEvent.type(email, "abc@def.com");
+ userEvent.type(message, "message");
+
+ const button = screen.getByRole("button");
+ userEvent.click(button);
+
+ await waitFor(() => {
+ const firstDisplay = screen.queryByText(/abcde/i);
+ const lastDisplay = screen.queryByText(/fghijk/i);
+ const emailDisplay = screen.queryByText(/abc@def.com/i);
+ const messageDisplay = screen.queryByTestId(/message/i);
+
+ expect(firstDisplay).toBeInTheDocument();
+ expect(lastDisplay).toBeInTheDocument();
+ expect(emailDisplay).toBeInTheDocument();
+ expect(messageDisplay).toBeInTheDocument();
+ })
});
\ No newline at end of file