diff --git a/src/app.test.js b/src/app.test.js
new file mode 100644
index 00000000..3f3a1642
--- /dev/null
+++ b/src/app.test.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import { render, screen } from "@testing-library/react";
+import App from "./App";
+
+test("renders the component", () => {
+ render()
+});
\ No newline at end of file
diff --git a/src/components/ContactForm.test.js b/src/components/ContactForm.test.js
index 5f80a897..28e4a6b0 100644
--- a/src/components/ContactForm.test.js
+++ b/src/components/ContactForm.test.js
@@ -5,37 +5,96 @@ import userEvent from '@testing-library/user-event';
import ContactForm from './ContactForm';
test('renders without errors', ()=>{
-
+ render();
});
test('renders the contact form header', ()=> {
-
+ const header = screen.queryByText(/contact form/i);
});
test('renders ONE error message if user enters less then 5 characters into firstname.', async () => {
-
+ render();
+
+ const nameInput = screen.getByLabelText(/first name/i);
+ userEvent.type(nameInput, "bill");
});
test('renders THREE error messages if user enters no values into any fields.', async () => {
-
+ render();
+
+ const firstNameInput = screen.getByLabelText(/first name/i);
+ userEvent.type(firstNameInput, "");
+
+ const lastNameInput = screen.getByLabelText(/last name/i);
+ userEvent.type(lastNameInput, "");
+
+ const emailInput = screen.getByLabelText(/email/i);
+ userEvent.type(emailInput, "");
+
+ const button = screen.getByRole("button");
+ userEvent.click(button);
});
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, "Mike");
+
+ const lastNameInput = screen.getByLabelText(/last name/i);
+ userEvent.type(lastNameInput, "Jone");
+
+ const emailInput = screen.getByLabelText(/email/i);
+ userEvent.type(emailInput, "");
+
+ const button = screen.getByRole("button");
+ userEvent.click(button);
});
test('renders "email must be a valid email address" if an invalid email is entered', async () => {
-
+ render();
+
+ const emailInputError = screen.getByLabelText(/emai/i);
+ userEvent.type(emailInputError, "abc");
+ expect(screen.getByTestId('error').toHaveTextContent('Error: email must be a valid'))
});
test('renders "lastName is a required field" if an last name is not entered and the submit button is clicked', async () => {
+ render ();
+
+ const lastNameError = screen.getByLabelText(/last name/i);
+ userEvent.type(lastNameError, "");
+ const button = screen.getByRole("button");
+ userEvent.click(button);
+ expect(screen.getByText(/Error: lastName is a required field/i)).toHaveTextContent('lastName is a required field');
});
test('renders all firstName, lastName and email text when submitted. Does NOT render message if message is not submitted.', async () => {
-
+ render ();
+
+ const emailInputError = screen.getByLabelText(/email/i);
+ userEvent.type(emailInputError, "abc");
+ expect(screen.getByTestId('error')).toHaveTextContent('Error: email must be a valid email address.');
});
test('renders all fields text when all fields are submitted.', async () => {
-
+ render ();
+
+ const firstNameInput = screen.getByLabelText (/first name/i);
+ userEvent.type(firstNameInput, "Mike");
+
+ const lastNameInput = screen.getByLabelText (/last name/i);
+ userEvent.type(lastNameInput, "Jones");
+
+ const emailInput = screen.getByLabelText(/email/i);
+ userEvent.type(emailInput, "whoismikejones@gmail.com");
+
+ const button = screen.getByRole("button");
+ userEvent.click(button);
+
+ await waitFor(() => {
+ const newItem = screen.getByText("Mike");
+ expect(newItem).toBeInTheDocument();
+ });
});
\ No newline at end of file