From 4bc6057bffff9c825a87190643b7f3430799b6c2 Mon Sep 17 00:00:00 2001 From: james starling Date: Mon, 19 Dec 2022 12:03:38 -0500 Subject: [PATCH 1/4] rendering first 5 test --- frontend/components/ContactForm.test.js | 30 ++++++++++++++++++++----- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/frontend/components/ContactForm.test.js b/frontend/components/ContactForm.test.js index d0a4f5f2..697ccdb2 100644 --- a/frontend/components/ContactForm.test.js +++ b/frontend/components/ContactForm.test.js @@ -5,23 +5,43 @@ 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 () => { - + const firstName = screen.findByLabelText('firstname') + const lastname = screen.findByLabelText('lastname') + const submit = screen.findByRole('button') + userEvent.type(firstName, 'steven') + userEvent.type(lastname, 'Grant') + userEvent.type(await submit) + expect(screen.findByAllText('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 () => { From daa038ee0da72c61cc5973f6af5a7964ed36e8ca Mon Sep 17 00:00:00 2001 From: james starling Date: Mon, 19 Dec 2022 12:11:49 -0500 Subject: [PATCH 2/4] another one down --- frontend/components/ContactForm.test.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/frontend/components/ContactForm.test.js b/frontend/components/ContactForm.test.js index 697ccdb2..93647396 100644 --- a/frontend/components/ContactForm.test.js +++ b/frontend/components/ContactForm.test.js @@ -41,16 +41,19 @@ test('renders ONE error message if user enters a valid first name and last name userEvent.type(firstName, 'steven') userEvent.type(lastname, 'Grant') userEvent.type(await submit) - expect(screen.findByAllText('Error: email must be a valid email address.')).toBeVisible -}); + expect(screen.findByAllText('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 () => { - -}); + 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 () => { From b854084b92beabbd21efa001b4f27531cb788308 Mon Sep 17 00:00:00 2001 From: james starling Date: Mon, 19 Dec 2022 12:28:17 -0500 Subject: [PATCH 3/4] completed course work --- frontend/components/ContactForm.test.js | 49 +++++++++++++++++++------ 1 file changed, 38 insertions(+), 11 deletions(-) diff --git a/frontend/components/ContactForm.test.js b/frontend/components/ContactForm.test.js index 93647396..9113f988 100644 --- a/frontend/components/ContactForm.test.js +++ b/frontend/components/ContactForm.test.js @@ -35,13 +35,14 @@ test('renders THREE error messages if user enters no values into any fields.', a }); 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 lastName = screen.findByLabelText('lastname') const submit = screen.findByRole('button') - userEvent.type(firstName, 'steven') - userEvent.type(lastname, 'Grant') - userEvent.type(await submit) - expect(screen.findByAllText('Error: email must be a valid email address.')).toBeVisible}); + 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 () => { render() @@ -49,16 +50,42 @@ test('renders "email must be a valid email address" if an invalid email is enter 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 () => { +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 () => { - -}); +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 +}) From 0cd0d9002f938d759332a97469d63ba0344f54b7 Mon Sep 17 00:00:00 2001 From: james starling Date: Mon, 19 Dec 2022 12:29:08 -0500 Subject: [PATCH 4/4] formatted --- frontend/components/ContactForm.test.js | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/frontend/components/ContactForm.test.js b/frontend/components/ContactForm.test.js index 9113f988..82571daf 100644 --- a/frontend/components/ContactForm.test.js +++ b/frontend/components/ContactForm.test.js @@ -5,21 +5,18 @@ import userEvent from '@testing-library/user-event'; import ContactForm from './ContactForm'; test('renders without errors', () => { - render() -}); + render()}); test('renders the contact form header', () => { render() const header = screen.findByText(/contact form/i) - expect(header).toBeVisible; -}); + 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 -}); + 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() @@ -31,8 +28,7 @@ test('renders THREE error messages if user enters no values into any fields.', a 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 -}); + 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() @@ -69,8 +65,7 @@ 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 -}) +expect(screen.findByTestId('messageDisplay')).not.toBeInTheDocument}); test('renders all fields text when all fields are submitted.', async () => { render() @@ -87,5 +82,4 @@ test('renders all fields text when all fields are submitted.', async () => { 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 -}) + expect(screen.findByText(/message: test text message/i)).toBeInTheDocument});