From a100438db625a29a558b2816ad9a85ed067bd60c Mon Sep 17 00:00:00 2001 From: picklesrus Date: Mon, 5 Aug 2019 15:47:47 -0400 Subject: [PATCH 01/46] Add unittest for JoinFlowStep. --- test/unit/components/join-flow-step.test.jsx | 69 ++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 test/unit/components/join-flow-step.test.jsx diff --git a/test/unit/components/join-flow-step.test.jsx b/test/unit/components/join-flow-step.test.jsx new file mode 100644 index 000000000..52d77c165 --- /dev/null +++ b/test/unit/components/join-flow-step.test.jsx @@ -0,0 +1,69 @@ +import React from 'react'; +import {mountWithIntl} from '../../helpers/intl-helpers.jsx'; +import JoinFlowStep from '../../../src/components/join-flow/join-flow-step'; + +describe('JoinFlowStep', () => { + + test('test components exist when props present', () => { + const props = { + children: null, + className: 'join-flow-step-class', + description: 'description text', + headerImgSrc: '/image.png', + onSubmit: jest.fn(), + nextButton: 'some stuff', + title: 'join flow step title', + waiting: true + }; + const component = mountWithIntl( + + ); + expect(component.find('div.join-flow-header-image').exists()).toEqual(true); + expect(component.find({src: props.headerImgSrc}).exists()).toEqual(true); + + expect(component.find('.join-flow-inner-content').exists()).toEqual(true); + expect(component.find('.join-flow-title').exists()).toEqual(true); + + expect(component.find('.join-flow-title').first() + .prop('title')).toEqual(props.title); + + expect(component.find('div.join-flow-description').exists()).toEqual(true); + expect(component.find('div.join-flow-description').text()).toEqual(props.description); + + + component.find('button[type="submit"]').simulate('submit'); + expect(props.onSubmit).toHaveBeenCalled(); + + expect(component.find('NextStepButton').prop('waiting')).toEqual(true); + expect(component.find('NextStepButton').prop('content')).toEqual(props.nextButton); + component.unmount(); + }); + + test('test components do not exist when props not present', () => { + const props = { + onSubmit: jest.fn() + }; + const component = mountWithIntl( + + ); + expect(component.find('div.join-flow-header-image').exists()).toEqual(false); + + expect(component.find('.join-flow-inner-content').exists()).toEqual(true); + expect(component.find('.join-flow-title').exists()).toEqual(false); + + + expect(component.find('div.join-flow-description').exists()).toEqual(false); + + component.find('button[type="submit"]').simulate('submit'); + expect(props.onSubmit).toHaveBeenCalled(); + + expect(component.find('NextStepButton').prop('waiting')).toEqual(false); + + + component.unmount(); + }); +}); From 7a4925ddba264ac6c2ac38bea966b583a2171c42 Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Thu, 8 Aug 2019 00:26:17 -0400 Subject: [PATCH 02/46] add join flow country step --- src/components/join-flow/country-step.jsx | 113 ++++++++++++++++++ src/components/join-flow/join-flow-steps.scss | 4 + src/components/join-flow/join-flow.jsx | 2 + 3 files changed, 119 insertions(+) create mode 100644 src/components/join-flow/country-step.jsx diff --git a/src/components/join-flow/country-step.jsx b/src/components/join-flow/country-step.jsx new file mode 100644 index 000000000..d9cc6eb8e --- /dev/null +++ b/src/components/join-flow/country-step.jsx @@ -0,0 +1,113 @@ +const bindAll = require('lodash.bindall'); +const classNames = require('classnames'); +const React = require('react'); +const PropTypes = require('prop-types'); +import {Formik} from 'formik'; +const {injectIntl, intlShape} = require('react-intl'); + +const countryData = require('../../lib/country-data'); +const FormikSelect = require('../../components/formik-forms/formik-select.jsx'); +const JoinFlowStep = require('./join-flow-step.jsx'); + +require('./join-flow-steps.scss'); + +/** + * Return a list of options to give to select + * @param {object} reactIntl react-intl, used to localize strings + * @param {string} defaultCountry optional string of default country to put at top of list + * @return {object} ordered set of county options formatted for frc select + */ +const getCountryOptions = reactIntl => { + const processedCountryData = countryData.registrationCountryOptions; + processedCountryData.unshift({ + label: reactIntl.formatMessage({id: 'registration.selectCountry'}), + disabled: true, + value: 'null' + }); + return processedCountryData; +}; + +class CountryStep extends React.Component { + constructor (props) { + super(props); + bindAll(this, [ + 'handleValidSubmit', + 'validateForm', + 'validateSelect' + ]); + } + validateSelect (selection) { + if (selection === 'null') { + return this.props.intl.formatMessage({id: 'form.validationRequired'}); + } + return null; + } + validateForm () { + return {}; + } + handleValidSubmit (formData, formikBag) { + formikBag.setSubmitting(false); + this.props.onNextStep(formData); + } + render () { + const countryOptions = getCountryOptions(this.props.intl); + return ( + + {props => { + const { + errors, + handleSubmit, + isSubmitting + } = props; + return ( + +
+ +
+ + ); + }} + + ); + } +} + +CountryStep.propTypes = { + intl: intlShape, + onNextStep: PropTypes.func +}; + +const IntlCountryStep = injectIntl(CountryStep); + +module.exports = IntlCountryStep; diff --git a/src/components/join-flow/join-flow-steps.scss b/src/components/join-flow/join-flow-steps.scss index af79adaa8..a21ed4771 100644 --- a/src/components/join-flow/join-flow-steps.scss +++ b/src/components/join-flow/join-flow-steps.scss @@ -91,3 +91,7 @@ height: 2rem; margin-left: .5rem; } + +.join-flow-select-country { + margin: 0 auto; +} diff --git a/src/components/join-flow/join-flow.jsx b/src/components/join-flow/join-flow.jsx index 2eed4f522..f743dc088 100644 --- a/src/components/join-flow/join-flow.jsx +++ b/src/components/join-flow/join-flow.jsx @@ -10,6 +10,7 @@ const Progression = require('../progression/progression.jsx'); const UsernameStep = require('./username-step.jsx'); const BirthDateStep = require('./birthdate-step.jsx'); const GenderStep = require('./gender-step.jsx'); +const CountryStep = require('./country-step.jsx'); const EmailStep = require('./email-step.jsx'); const WelcomeStep = require('./welcome-step.jsx'); @@ -42,6 +43,7 @@ class JoinFlow extends React.Component { + Date: Thu, 8 Aug 2019 08:40:21 -0400 Subject: [PATCH 03/46] pass disabled prop to formik-select --- src/components/formik-forms/formik-select.jsx | 1 + src/components/join-flow/country-step.jsx | 7 +++---- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/formik-forms/formik-select.jsx b/src/components/formik-forms/formik-select.jsx index defff80ef..4578d8a64 100644 --- a/src/components/formik-forms/formik-select.jsx +++ b/src/components/formik-forms/formik-select.jsx @@ -17,6 +17,7 @@ const FormikSelect = ({ }) => { const optionsList = options.map((item, index) => (