decent welcome test

Author: Ethan Jon

react/__tests__/components/modals/interview/welcome.test.js

@@ -1,15 +1,33 @@
-import React from 'react'
+// @flow
+
+import {mount, ReactWrapper} from 'enzyme'
 import {PropTypes as MobxReactPropTypes} from 'mobx-react'
-import {mount} from 'enzyme'
+import React from 'react'
+import ReactModal from 'react-modal'
+import sinon from 'sinon'
 
 import Welcome from '../../../../components/modals/interview/welcome'
 import PostStore from '../../../../stores/post'
 
-test('renders', () => {
+test('renders, gets input, closes', () => {
   const postStore = new PostStore()
+  const generateInitialResponses = sinon.spy(postStore, 'generateInitialResponses')
+
   const component = mount(<Welcome />, {
     childContextTypes: {postStore: MobxReactPropTypes.observableObject},
     context: {postStore}
   })
-  expect(component.length).toBeTruthy()
+  const portal = new ReactWrapper(component.find(ReactModal).node.portal, true)
+
+  expect(portal.props().isOpen).toBeTruthy()
+  portal.find('#welcome-next-button').simulate('click')
+  portal.find('#welcome-name-input').simulate('change', {target: {value: 'name'}})
+  portal.find('#welcome-next-button').simulate('click')
+  portal.find('#welcome-email-input').simulate('change', {target: {value: 'name@domain.com'}})
+  portal.find('#welcome-next-button').simulate('click')
+  portal.find('#welcome-current-location-input').simulate('change', {target: {value: 'somewhere, usa'}})
+  portal.find('#welcome-next-button').simulate('click')
+  portal.find('#welcome-submit-button').simulate('click')
+  expect(generateInitialResponses.calledOnce).toBeTruthy()
+  expect(portal.props().isOpen).toBeFalsy()
 })

react/components/modals/interview/welcome.js

@@ -53,6 +53,7 @@ const Welcome = observer(({store}: {store: Object}, {postStore}: {postStore: Obj
         <div>
           <input
             className='input h3'
+            id='welcome-name-input'
             onChange={postStore.handleNameChange}
             onKeyDown={handleKeyDown}
             placeholder='Pat Riley'
@@ -73,6 +74,7 @@ const Welcome = observer(({store}: {store: Object}, {postStore}: {postStore: Obj
         <div>
           <input
             className='input h3'
+            id='welcome-email-input'
             onChange={postStore.handleEmailChange}
             onKeyDown={handleKeyDown}
             placeholder='you@domain.com'
@@ -88,6 +90,7 @@ const Welcome = observer(({store}: {store: Object}, {postStore}: {postStore: Obj
         <div>
           <input
             className='input h3'
+            id='welcome-current-location-input'
             onChange={postStore.handleCurrentLocationChange}
             onKeyDown={handleKeyDown}
             placeholder='Coderville, CA'
@@ -127,6 +130,7 @@ const Welcome = observer(({store}: {store: Object}, {postStore}: {postStore: Obj
         {store.showNextButton ? (
           <button
             className='btn btn-primary pr1'
+            id='welcome-next-button'
             onClick={store.handleNextSlideClick}
             type='submit'
           >
@@ -136,6 +140,7 @@ const Welcome = observer(({store}: {store: Object}, {postStore}: {postStore: Obj
         ) : (
           <button
             className='btn btn-primary'
+            id='welcome-submit-button'
             onClick={handleButtonClick}
             type='submit'
           >
@@ -151,6 +156,8 @@ Welcome.contextTypes = {
   postStore: MobxReactPropTypes.observableObject
 }
 
+Welcome.displayName = 'Welcome'
+
 export default createModal(Welcome, {
   hideCloseButton: true,
   isOpen: true,

react/components/submission-status.js

@@ -5,12 +5,12 @@
 
 import React from 'react'
 import classNames from 'classnames'
-import {PropTypes as MobxReactPropTypes} from 'mobx-react'
+import {observer, PropTypes as MobxReactPropTypes} from 'mobx-react'
 
 import {minResponsesRequired} from '../stores/post'
 import SubmissionStatusItem from '../components/submission-status-item'
 
-const SubmissionStatus = ({className, postData}: {className: string, postData: Object}, {postStore}: {postStore: Object}) => {
+const SubmissionStatus = observer(({className, postData}: {className: string, postData: Object}, {postStore}: {postStore: Object}) => {
   const isSubmitButtonDisabled = !postStore.isValid || postStore.isSubmitting || postStore.didSubmit
 
   return (
@@ -246,7 +246,7 @@ const SubmissionStatus = ({className, postData}: {className: string, postData: O
       </SubmissionStatusItem>
     </div>
   )
-}
+})
 
 SubmissionStatus.contextTypes = {
   postStore: MobxReactPropTypes.observableObject

react/flow-typed/globals.js

@@ -1,4 +1,9 @@
-declare var AUTOMATED_JWT_TOKEN:string;
-declare var G_RECAPTCHA_ENABLED:string;
-declare var G_RECAPTCHA_SITEKEY:string;
-declare var SENTRY_DSN_REACT:string;
+// see env-config.js
+declare var AUTOMATED_JWT_TOKEN: string;
+declare var G_RECAPTCHA_ENABLED: string;
+declare var G_RECAPTCHA_SITEKEY: string;
+declare var SENTRY_DSN_REACT: string;
+
+// for jest
+declare var test: function;
+declare var expect: function;