From bd33b166f7474c0128f37c4b64478fb24e26e07a Mon Sep 17 00:00:00 2001 From: picklesrus Date: Thu, 29 Aug 2019 18:34:07 -0400 Subject: [PATCH 1/3] Add a unittest for the EmailStep. --- test/unit/components/email-step.test.jsx | 134 +++++++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 test/unit/components/email-step.test.jsx diff --git a/test/unit/components/email-step.test.jsx b/test/unit/components/email-step.test.jsx new file mode 100644 index 000000000..f19edf8e8 --- /dev/null +++ b/test/unit/components/email-step.test.jsx @@ -0,0 +1,134 @@ +import React from 'react'; +import {shallowWithIntl} from '../../helpers/intl-helpers.jsx'; +import EmailStep from '../../../src/components/join-flow/email-step.jsx'; +import JoinFlowStep from '../../../src/components/join-flow/join-flow-step.jsx'; +const FormikInput = require('../../../src/components/formik-forms/formik-input.jsx'); +const FormikCheckbox = require('../../../src/components/formik-forms/formik-checkbox.jsx'); + +describe('EmailStep test', () => { + test('send correct props to formik', () => { + const wrapper = shallowWithIntl(); + + const formikWrapper = wrapper.dive(); + expect(formikWrapper.props().initialValues.subscribe).toBe(false); + expect(formikWrapper.props().initialValues.email).toBe(''); + expect(formikWrapper.props().validateOnBlur).toBe(false); + expect(formikWrapper.props().validateOnChange).toBe(false); + expect(formikWrapper.props().validate).toBe(formikWrapper.instance().validateForm); + expect(formikWrapper.props().onSubmit).toBe(formikWrapper.instance().handleValidSubmit); + }); + + test('props sent to JoinFlowStep', () => { + const wrapper = shallowWithIntl(); + // Dive to get past the intl wrapper + const formikWrapper = wrapper.dive(); + // Dive to get past the anonymous component. + const joinFlowWrapper = formikWrapper.dive().find(JoinFlowStep); + expect(joinFlowWrapper).toHaveLength(1); + expect(joinFlowWrapper.props().description).toBe('registration.emailStepDescription'); + expect(joinFlowWrapper.props().footerContent.props.id).toBe('registration.acceptTermsOfUse'); + expect(joinFlowWrapper.props().headerImgSrc).toBe('/images/join-flow/email-header.png'); + expect(joinFlowWrapper.props().innerClassName).toBe('join-flow-inner-email-step'); + expect(joinFlowWrapper.props().nextButton).toBe('registration.createAccount'); + expect(joinFlowWrapper.props().title).toBe('registration.emailStepTitle'); + expect(joinFlowWrapper.props().waiting).toBe(true); + }); + + test('props sent to FormikInput for email', () => { + const wrapper = shallowWithIntl(); + // Dive to get past the intl wrapper + const formikWrapper = wrapper.dive(); + // Dive to get past the anonymous component. + const joinFlowWrapper = formikWrapper.dive().find(JoinFlowStep); + expect(joinFlowWrapper).toHaveLength(1); + const emailInputWrapper = joinFlowWrapper.find(FormikInput).first(); + expect(emailInputWrapper.props().id).toEqual('email'); + expect(emailInputWrapper.props().error).toBeUndefined(); + expect(emailInputWrapper.props().name).toEqual('email'); + expect(emailInputWrapper.props().placeholder).toEqual('general.emailAddress'); + expect(emailInputWrapper.props().validationClassName).toEqual('validation-full-width-input'); + expect(emailInputWrapper.props().onSetRef).toEqual(formikWrapper.instance().handleSetEmailRef); + expect(emailInputWrapper.props().validate).toEqual(formikWrapper.instance().validateEmail); + }); + test('props sent to FormikCheckbox for subscribe', () => { + const wrapper = shallowWithIntl(); + // Dive to get past the intl wrapper + const formikWrapper = wrapper.dive(); + // Dive to get past the anonymous component. + const joinFlowWrapper = formikWrapper.dive().find(JoinFlowStep); + expect(joinFlowWrapper).toHaveLength(1); + const checkboxWrapper = joinFlowWrapper.find(FormikCheckbox).first(); + expect(checkboxWrapper).toHaveLength(1); + expect(checkboxWrapper.first().props().id).toEqual('subscribeCheckbox'); + expect(checkboxWrapper.first().props().label).toEqual('registration.receiveEmails'); + expect(checkboxWrapper.first().props().name).toEqual('subscribe'); + }); + test('handleValidSubmit passes formData to next step', () => { + const formikBag = { + setSubmitting: jest.fn() + }; + global.window.grecaptcha = { + execute: jest.fn(), + render: jest.fn() + }; + const formData = {some: 'data}', is: 'here'}; + const wrapper = shallowWithIntl( + ); + + const formikWrapper = wrapper.dive(); + formikWrapper.instance().onCaptchaLoad(); // to setup catpcha state + formikWrapper.instance().handleValidSubmit(formData, formikBag); + + expect(formikBag.setSubmitting).toHaveBeenCalledWith(false); + expect(global.window.grecaptcha.execute).toHaveBeenCalled(); + }); + test('captchaSolved sets token and goes to next step', () => { + const props = { + onNextStep: jest.fn() + }; + const formikBag = { + setSubmitting: jest.fn() + }; + global.window.grecaptcha = { + execute: jest.fn(), + render: jest.fn() + }; + const formData = {some: 'data}', is: 'here'}; + const wrapper = shallowWithIntl( + ); + + const formikWrapper = wrapper.dive(); + // Call these to setup captcha. + formikWrapper.instance().onCaptchaLoad(); // to setup catpcha state + formikWrapper.instance().handleValidSubmit(formData, formikBag); + + const captchaToken = 'abcd'; + formikWrapper.instance().captchaSolved(captchaToken); + formData['gre-captcha-response'] = captchaToken; + expect(props.onNextStep).toHaveBeenCalledWith(formData); + expect(formikBag.setSubmitting).toHaveBeenCalledWith(true); + }); + test('validateEmail test email empty', () => { + const wrapper = shallowWithIntl( + ); + const formikWrapper = wrapper.dive(); + const val = formikWrapper.instance().validateEmail(''); + expect(val).toBe('general.required'); + }); + test('validateEmail test email null', () => { + const wrapper = shallowWithIntl( + ); + const formikWrapper = wrapper.dive(); + const val = formikWrapper.instance().validateEmail(null); + expect(val).toBe('general.required'); + }); + test('validateEmail test email undefined', () => { + const wrapper = shallowWithIntl( + ); + const formikWrapper = wrapper.dive(); + const val = formikWrapper.instance().validateEmail(); + expect(val).toBe('general.required'); + }); +}); From c9d729311915ee37d7fedbfb78ed75a60f541594 Mon Sep 17 00:00:00 2001 From: picklesrus Date: Fri, 30 Aug 2019 13:42:49 -0400 Subject: [PATCH 2/3] use global.recaptcha instead of global.window.grecaptcha. --- test/unit/components/email-step.test.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/unit/components/email-step.test.jsx b/test/unit/components/email-step.test.jsx index f19edf8e8..2613bad51 100644 --- a/test/unit/components/email-step.test.jsx +++ b/test/unit/components/email-step.test.jsx @@ -67,7 +67,7 @@ describe('EmailStep test', () => { const formikBag = { setSubmitting: jest.fn() }; - global.window.grecaptcha = { + global.grecaptcha = { execute: jest.fn(), render: jest.fn() }; @@ -80,7 +80,7 @@ describe('EmailStep test', () => { formikWrapper.instance().handleValidSubmit(formData, formikBag); expect(formikBag.setSubmitting).toHaveBeenCalledWith(false); - expect(global.window.grecaptcha.execute).toHaveBeenCalled(); + expect(global.grecaptcha.execute).toHaveBeenCalled(); }); test('captchaSolved sets token and goes to next step', () => { const props = { @@ -89,7 +89,7 @@ describe('EmailStep test', () => { const formikBag = { setSubmitting: jest.fn() }; - global.window.grecaptcha = { + global.grecaptcha = { execute: jest.fn(), render: jest.fn() }; From 3d58fc4d125c69e5dd2945d4918a886fa3adecff Mon Sep 17 00:00:00 2001 From: picklesrus Date: Tue, 3 Sep 2019 17:32:31 -0400 Subject: [PATCH 3/3] Standardize on using require instead of import. Also fix a silly mistaake aand change the way I'm matching the contents of formData to be more specific. --- test/unit/components/email-step.test.jsx | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/test/unit/components/email-step.test.jsx b/test/unit/components/email-step.test.jsx index 2613bad51..88af9b8b2 100644 --- a/test/unit/components/email-step.test.jsx +++ b/test/unit/components/email-step.test.jsx @@ -1,7 +1,7 @@ -import React from 'react'; -import {shallowWithIntl} from '../../helpers/intl-helpers.jsx'; -import EmailStep from '../../../src/components/join-flow/email-step.jsx'; -import JoinFlowStep from '../../../src/components/join-flow/join-flow-step.jsx'; +const React = require('react'); +const {shallowWithIntl} = require('../../helpers/intl-helpers.jsx'); +const EmailStep = require('../../../src/components/join-flow/email-step.jsx'); +const JoinFlowStep = require('../../../src/components/join-flow/join-flow-step.jsx'); const FormikInput = require('../../../src/components/formik-forms/formik-input.jsx'); const FormikCheckbox = require('../../../src/components/formik-forms/formik-checkbox.jsx'); @@ -71,7 +71,7 @@ describe('EmailStep test', () => { execute: jest.fn(), render: jest.fn() }; - const formData = {some: 'data}', is: 'here'}; + const formData = {item1: 'thing', item2: 'otherthing'}; const wrapper = shallowWithIntl( ); @@ -93,7 +93,7 @@ describe('EmailStep test', () => { execute: jest.fn(), render: jest.fn() }; - const formData = {some: 'data}', is: 'here'}; + const formData = {item1: 'thing', item2: 'otherthing'}; const wrapper = shallowWithIntl( { const captchaToken = 'abcd'; formikWrapper.instance().captchaSolved(captchaToken); - formData['gre-captcha-response'] = captchaToken; - expect(props.onNextStep).toHaveBeenCalledWith(formData); + // Make sure captchaSolved calls onNextStep with formData that has + // a captcha token and left everything else in the object in place. + expect(props.onNextStep).toHaveBeenCalledWith( + expect.objectContaining({ + 'item1': formData.item1, + 'item2': formData.item2, + 'g-recaptcha-response': captchaToken + })); expect(formikBag.setSubmitting).toHaveBeenCalledWith(true); }); test('validateEmail test email empty', () => {