diff --git a/frontend/App.js b/frontend/App.js
index 7bdfeaaf..f7391caf 100644
--- a/frontend/App.js
+++ b/frontend/App.js
@@ -11,7 +11,7 @@ const App = () => {
- )
-}
+ );
+};
export default App;
diff --git a/frontend/components/ContactForm.test.js b/frontend/components/ContactForm.test.js
index d0a4f5f2..710efb7e 100644
--- a/frontend/components/ContactForm.test.js
+++ b/frontend/components/ContactForm.test.js
@@ -1,41 +1,155 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import userEvent from '@testing-library/user-event';
-import ContactForm from './ContactForm';
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import userEvent from "@testing-library/user-event";
+import ContactForm from "./ContactForm";
+
+test("renders without errors", () => {
+ render();
+});
-test('renders without errors', () => {
+test("renders the contact form header", () => {
+ render();
+ const contactHeader = screen.getByText(/Contact Form/i);
+ console.log(contactHeader);
+ expect(contactHeader).toBeInTheDocument();
});
-test('renders the contact form header', () => {
+test("renders ONE error message if user enters less then 5 characters into firstname.", async () => {
+ // Arrange
+ render();
+ // Act
+ const firstNameInput = screen.getByLabelText(/First Name*/i);
+ userEvent.type(firstNameInput, "Aar");
+ console.log(firstNameInput);
+ const errorMsg = await screen.findAllByTestId("error");
+ expect(errorMsg).toHaveLength(1);
});
-test('renders ONE error message if user enters less then 5 characters into firstname.', async () => {
+test("renders THREE error messages if user enters no values into any fields.", async () => {
+ // Arrange
+ render();
+ // Assert
+ const submitBtn = screen.getByRole("button");
+ userEvent.click(submitBtn);
+
+ await waitFor(() => {
+ const errorMsg = screen.queryAllByTestId("error");
+ expect(errorMsg).toHaveLength(3);
+ });
});
-test('renders THREE error messages if user enters no values into any fields.', async () => {
+test("renders ONE error message if user enters a valid first name and last name but no email.", async () => {
+ render();
-});
+ const firstNameInput = screen.getByLabelText(/First Name*/i);
+ userEvent.type(firstNameInput, "Aaron");
-test('renders ONE error message if user enters a valid first name and last name but no email.', async () => {
+ const lastNameInput = screen.getByLabelText(/Last Name*/i);
+ userEvent.type(lastNameInput, "Belmore");
+ const submitBtn = screen.getByRole("button");
+ userEvent.click(submitBtn);
+
+ await waitFor(() => {
+ const errorMsg = screen.queryAllByTestId("error");
+
+ expect(errorMsg).toHaveLength(1);
+ });
});
test('renders "email must be a valid email address" if an invalid email is entered', async () => {
+ render();
+
+ const firstNameInput = screen.getByLabelText(/First Name*/i);
+ userEvent.type(firstNameInput, "Aaron");
+ const lastNameInput = screen.getByLabelText(/Last Name*/i);
+ userEvent.type(lastNameInput, "Belmore");
+
+ const email = screen.getByLabelText(/email*/i);
+ userEvent.type(email, "belmoresoj");
+
+ const btn = screen.getByRole("button");
+ userEvent.click(btn);
+
+ const errorMsg = await screen.findByText(
+ /email must be a valid email address/i
+ );
+
+ expect(errorMsg).toBeInTheDocument();
});
test('renders "lastName is a required field" if an last name is not entered and the submit button is clicked', async () => {
+ render();
+
+ const firstNameInput = screen.getByLabelText(/First Name*/i);
+ userEvent.type(firstNameInput, "Aaron");
+
+ const email = screen.getByLabelText(/email*/i);
+ userEvent.type(email, "belmoreaaron9@gmail.com");
+ const btn = screen.getByRole("button");
+ userEvent.click(btn);
+
+ const errorMsg = await screen.findByText(/lastName is a required field/i);
+
+ expect(errorMsg).toBeInTheDocument();
});
-test('renders all firstName, lastName and email text when submitted. Does NOT render message if message is not submitted.', async () => {
+test("renders all firstName, lastName and email text when submitted. Does NOT render message if message is not submitted.", async () => {
+ render();
+
+ const firstNameInput = screen.getByLabelText(/First Name*/i);
+ userEvent.type(firstNameInput, "Aaron");
+
+ const lastNameInput = screen.getByLabelText(/last Name*/i);
+ userEvent.type(lastNameInput, "Belmore");
+
+ const email = screen.getByLabelText(/email*/i);
+ userEvent.type(email, "belmoreaaron9@gmail.com");
+
+ const btn = screen.getByRole("button");
+ userEvent.click(btn);
+ await waitFor(() => {
+ const firstNameReveal = screen.queryByText("Aaron");
+ const lastNameReveal = screen.queryByText("Belmore");
+ const emailNameReveal = screen.queryByText("belmoreaaron9@gmail.com");
+ const messageDisplay = screen.queryByTestId("MessageDisplay");
+ expect(messageDisplay).not.toBeInTheDocument();
+ });
});
-test('renders all fields text when all fields are submitted.', async () => {
+test("renders all fields text when all fields are submitted.", async () => {
+ render();
+
+ const firstNameInput = screen.getByLabelText(/First Name*/i);
+ userEvent.type(firstNameInput, "Aaron");
+
+ const lastNameInput = screen.getByLabelText(/last Name*/i);
+ userEvent.type(lastNameInput, "Belmore");
+
+ const email = screen.getByLabelText(/email*/i);
+ userEvent.type(email, "belmoreaaron9@gmail.com");
+
+ const message = screen.getByLabelText(/message/i);
+ userEvent.type(message, "I'm ready to learn.");
+
+ const btn = screen.getByRole("button");
+ userEvent.click(btn);
+ await waitFor(() => {
+ const firstNameReveal = screen.queryByText("Aaron");
+ const lastNameReveal = screen.queryByText("Belmore");
+ const emailNameReveal = screen.queryByText("belmoreaaron9@gmail.com");
+ const messageDisplay = screen.queryByText("I'm ready to learn.");
+ expect(messageDisplay).toBeInTheDocument();
+ expect(firstNameReveal).toBeInTheDocument();
+ expect(emailNameReveal).toBeInTheDocument();
+ expect(lastNameReveal).toBeInTheDocument();
+ });
});