From 91bf219a988c6d2a2a8d314d5532b9e185699161 Mon Sep 17 00:00:00 2001 From: Luis Sanchez Date: Wed, 21 Oct 2020 15:01:43 +1100 Subject: [PATCH] test(customer): CHECKOUT-5266 Add email unit tests --- src/app/customer/GuestForm.spec.tsx | 181 ++++++++++------------------ 1 file changed, 67 insertions(+), 114 deletions(-) diff --git a/src/app/customer/GuestForm.spec.tsx b/src/app/customer/GuestForm.spec.tsx index 7e8ed08907..574374ffe2 100644 --- a/src/app/customer/GuestForm.spec.tsx +++ b/src/app/customer/GuestForm.spec.tsx @@ -1,5 +1,5 @@ import { mount, render } from 'enzyme'; -import React from 'react'; +import React, { FunctionComponent } from 'react'; import { getStoreConfig } from '../config/config.mock'; import { createLocaleContext, LocaleContext, LocaleContextType } from '../locale'; @@ -10,6 +10,7 @@ import GuestForm, { GuestFormProps } from './GuestForm'; describe('GuestForm', () => { let defaultProps: GuestFormProps; let localeContext: LocaleContextType; + let TestComponent: FunctionComponent>; beforeEach(() => { defaultProps = { @@ -23,14 +24,19 @@ describe('GuestForm', () => { }; localeContext = createLocaleContext(getStoreConfig()); - }); - it('matches snapshot', () => { - const component = render( + TestComponent = props => ( - + ); + }); + + it('matches snapshot', () => { + const component = render(); expect(component) .toMatchSnapshot(); @@ -38,13 +44,10 @@ describe('GuestForm', () => { it('renders form with initial values', () => { const component = mount( - - - + ); expect(component.find('input[name="email"]').prop('value')) @@ -57,12 +60,9 @@ describe('GuestForm', () => { it('notifies when user clicks on "continue as guest" button', async () => { const handleContinueAsGuest = jest.fn(); const component = mount( - - - + ); component.find('input[name="email"]') @@ -84,71 +84,45 @@ describe('GuestForm', () => { }); }); - it('displays error message if email is not valid', async () => { - const handleContinueAsGuest = jest.fn(); - const component = mount( - - { + async function getEmailError(value: string): Promise { + const handleContinueAsGuest = jest.fn(); + const component = mount( + - - ); - - component.find('input[name="email"]') - .simulate('change', { target: { value: 'test', name: 'email' } }); - - component.find('form') - .simulate('submit'); - - await new Promise(resolve => process.nextTick(resolve)); - - component.update(); - - expect(handleContinueAsGuest) - .not.toHaveBeenCalled(); - - expect(component.find('[data-test="email-field-error-message"]').text()) - .toEqual('Email address must be valid'); - }); + ); - it('displays error message if email does not have a domain and strict validation is enabled', async () => { - const handleContinueAsGuest = jest.fn(); - const component = mount( - - - - ); + component.find('form').simulate('submit'); - component.find('input[name="email"]') - .simulate('change', { target: { value: 'test@bigcommerce', name: 'email' } }); + await new Promise(resolve => process.nextTick(resolve)); - component.find('form') - .simulate('submit'); + component.update(); - await new Promise(resolve => process.nextTick(resolve)); + return component.find('[data-test="email-field-error-message"]').text(); + } - component.update(); + expect(getEmailError('')).resolves.toEqual('Email address is required'); - expect(handleContinueAsGuest) - .not.toHaveBeenCalled(); + const invalidEmailMessage = 'Email address must be valid'; - expect(component.find('[data-test="email-field-error-message"]').text()) - .toEqual('Email address must be valid'); + expect(getEmailError('test@bigcommerce')).resolves.toEqual(invalidEmailMessage); + expect(getEmailError('test')).resolves.toEqual(invalidEmailMessage); + expect(getEmailError('@test.test')).resolves.toEqual(invalidEmailMessage); + expect(getEmailError('test@.test')).resolves.toEqual(invalidEmailMessage); + expect(getEmailError('test@test.')).resolves.toEqual(invalidEmailMessage); + expect(getEmailError('test@te st.test')).resolves.toEqual(invalidEmailMessage); + expect(getEmailError('test@test.comtest@test.com')).resolves.toEqual(invalidEmailMessage); + expect(getEmailError('test@test.com,test@test.com')).resolves.toEqual(invalidEmailMessage); }); it('notifies when user clicks on "sign in" button', () => { const handleShowLogin = jest.fn(); const component = mount( - - - + ); component.find('[data-test="customer-continue-button"]') @@ -161,12 +135,9 @@ describe('GuestForm', () => { it('calls "onChangeEmail" handler when user changes email address', () => { const handleChangeEmail = jest.fn(); const component = mount( - - - + ); component.find('input[name="email"]') @@ -179,12 +150,9 @@ describe('GuestForm', () => { it('calls "onChangeEmail" handler when user changes email address with strict validation enabled and it includes a domain', () => { const handleChangeEmail = jest.fn(); const component = mount( - - - + ); component.find('input[name="email"]') @@ -196,12 +164,9 @@ describe('GuestForm', () => { it('renders newsletter field if store allows newsletter subscription', () => { const component = mount( - - - + ); expect(component.find('label[htmlFor="shouldSubscribe"]').text()) @@ -212,13 +177,10 @@ describe('GuestForm', () => { it('renders marketing consent field', () => { const component = mount( - - - + ); expect(component.find('label[htmlFor="shouldSubscribe"]').text()) @@ -229,13 +191,10 @@ describe('GuestForm', () => { it('sets newsletter field with default value', () => { const Container = ({ defaultShouldSubscribe }: { defaultShouldSubscribe: boolean }) => ( - - - + ); const componentA = mount(); @@ -250,12 +209,9 @@ describe('GuestForm', () => { it('renders privacy policy field', () => { const component = mount( - - - + ); expect(component.find(PrivacyPolicyField)).toHaveLength(1); @@ -264,13 +220,10 @@ describe('GuestForm', () => { it('displays error message if privacy policy is required and not checked', async () => { const handleContinueAsGuest = jest.fn(); const component = mount( - - - + ); component.find('input[name="email"]')