diff --git a/frontend/components/ContactForm.test.js b/frontend/components/ContactForm.test.js index d0a4f5f2..82571daf 100644 --- a/frontend/components/ContactForm.test.js +++ b/frontend/components/ContactForm.test.js @@ -5,37 +5,81 @@ 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.findByText(/contact form/i) + expect(header).toBeVisible;}); test('renders ONE error message if user enters less then 5 characters into firstname.', async () => { - -}); + render() + const header = screen.findByLabelText('firstname') + userEvent.type(firstName, 'edd') + expect(screen.findByText('Error: first Name must have atleast have 5 characters')).toBeVisible}); test('renders THREE error messages if user enters no values into any fields.', async () => { - -}); + render() + const firstName = screen.findByLabelText('firstname') + const lastName = screen.findByLabelText('lastname') + const email = screen.findByLabelText('email') + userEvent.type(firstName, ' {backspace} ') + userEvent.type(lastName,'{backspace}') + userEvent.type(email, '{backspace}') + expect(screen.findByText('Error: First name must have atleast 5 characters')).toBeVisible + expect(screen.findByText('Error: Last Name is a required Field')).toBeVisible + expect(screen.findByText('Error: email must be a valid email address.')).toBeVisible}); test('renders ONE error message if user enters a valid first name and last name but no email.', async () => { - -}); + render() + const firstName = screen.findByLabelText('firstname') + const lastName = screen.findByLabelText('lastname') + const submit = screen.findByRole('button') + userEvent.type(firstName, 'Steven') + userEvent.type(lastName, 'Grant') + userEvent.click(await submit) + expect(screen.findAllByText('Error: email must be a valid email address.')).toBeVisible}); test('renders "email must be a valid email address" if an invalid email is entered', async () => { - -}); - -test('renders "lastName is a required field" if an last name is not entered and the submit button is clicked', async () => { - -}); - -test('renders all firstName, lastName and email text when submitted. Does NOT render message if message is not submitted.', async () => { - -}); + render() + const email = screen.findByLabelText('email') + userEvent.type(email, 'email') + expect(screen.findByText('Error: email must be a valid email address.')).toBeVisible}); + +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.findByRole('button') + userEvent.click(await submit) + expect(screen.findByText('Error: lastName is a required field.')).toBeVisible}); + +test('renders all firstName, lastName and email text when submitted. Does NOT render message if message is not submitted.', async () =>{ +render() +const firstName = screen.findByLabelText('firstname') +const lastName = screen.findByLabelText('lastname') +const email = screen.findByText('email') +const submit = screen.findByRole('button') +userEvent.type(firstName, 'Steven') +userEvent.type(lastName, 'Grant') +userEvent.type(email, 'email@email.com') +userEvent.click(await submit) +expect(screen.findByText(/you submitted/i)).toBeInTheDocument +expect(screen.findByText(/first name:steven/i)).toBeInTheDocument +expect(screen.findByText(/email: email@email.com/i)).toBeInTheDocument +expect(screen.findByTestId('messageDisplay')).not.toBeInTheDocument}); test('renders all fields text when all fields are submitted.', async () => { - -}); + render() + const firstName = screen.findByLabelText('firstname') + const lastName = screen.findByLabelText('lastname') + const submit = screen.findByRole('button') + const message = screen.findByRole('message') + userEvent.type(firstName, 'Steven') + userEvent.type(lastName, 'Grant') + userEvent.type(email, 'email@email.com') + userEvent.type(message, 'test text message') + userEvent.click(await submit) + expect(screen.findByText(/you submitted/i)).toBeInTheDocument + expect(screen.findByText(/first name: steevn/i)).toBeInTheDocument + expect(screen.findByText(/last name: grant/i)).toBeInTheDocument + expect(screen.findByText(/email: email@email.com/i)).toBeInTheDocument + expect(screen.findByText(/message: test text message/i)).toBeInTheDocument});