From c27e66a8e20801cc0a5f3ff801cf66a8d8c59d19 Mon Sep 17 00:00:00 2001
From: Jerko Steiner <jerko.steiner@gmail.com>
Date: Mon, 4 Nov 2019 11:07:46 -0400
Subject: [PATCH] Add captcha to main site, fix tests of styled-components

---
 packages/client/jest.config.js                  |  1 +
 packages/client/src/jest.env.ts                 |  3 +++
 packages/client/src/login/LoginActions.ts       |  2 +-
 packages/client/src/login/RegisterForm.tsx      | 17 ++++++++++++++++-
 .../client/src/login/configureRegister.test.tsx |  3 ++-
 packages/client/src/login/configureRegister.ts  |  5 ++++-
 packages/common/src/APIDef.ts                   |  2 +-
 packages/react-captcha/src/Captcha.tsx          |  7 ++-----
 packages/react-test/src/index.tsx               | 13 ++++++++++++-
 packages/scripts/template/jest.config.js        |  1 +
 packages/scripts/template/src/jest.env.ts       |  0
 11 files changed, 43 insertions(+), 11 deletions(-)
 create mode 100644 packages/client/src/jest.env.ts
 create mode 100644 packages/scripts/template/src/jest.env.ts

diff --git a/packages/client/jest.config.js b/packages/client/jest.config.js
index ec06ec7..f63ccbf 100644
--- a/packages/client/jest.config.js
+++ b/packages/client/jest.config.js
@@ -13,5 +13,6 @@ module.exports = {
     'jsx',
   ],
   setupFiles: ['<rootDir>/jest.setup.js'],
+  setupFilesAfterEnv: ['<rootDir>/src/jest.env.ts'],
   verbose: false,
 }
diff --git a/packages/client/src/jest.env.ts b/packages/client/src/jest.env.ts
new file mode 100644
index 0000000..4cde191
--- /dev/null
+++ b/packages/client/src/jest.env.ts
@@ -0,0 +1,3 @@
+import { TestUtils } from '@rondo.dev/react-test'
+import { theme } from './theme'
+TestUtils.defaultTheme = theme
diff --git a/packages/client/src/login/LoginActions.ts b/packages/client/src/login/LoginActions.ts
index 65030f9..51505bd 100644
--- a/packages/client/src/login/LoginActions.ts
+++ b/packages/client/src/login/LoginActions.ts
@@ -36,7 +36,7 @@ export class LoginActions {
     )
   }
 
-  register = (profile: NewUser) => {
+  register = (profile: NewUser & { captcha: string }) => {
     return createPendingAction(
       this.http.post('/auth/register', profile),
       'LOGIN_REGISTER',
diff --git a/packages/client/src/login/RegisterForm.tsx b/packages/client/src/login/RegisterForm.tsx
index fa4c09c..89fa6aa 100644
--- a/packages/client/src/login/RegisterForm.tsx
+++ b/packages/client/src/login/RegisterForm.tsx
@@ -5,12 +5,14 @@ import { Link } from 'react-router-dom'
 import { Input } from '../components/Input'
 import { Redirect } from '../components/Redirect'
 import { Button } from '../components'
+import { Captcha } from '@rondo.dev/react-captcha'
 
 export interface RegisterFormProps {
+  baseUrl: string
   error?: string
   onSubmit: () => void
   onChange: (name: string, value: string) => void
-  data: NewUser
+  data: NewUser & { captcha: string }
   user?: UserProfile
   redirectTo: string
 }
@@ -74,6 +76,19 @@ export class RegisterForm extends React.PureComponent<RegisterFormProps> {
           value={this.props.data.lastName}
           placeholder='Last name'
         />
+        <Captcha 
+          imageUrl={this.props.baseUrl + '/api/auth/captcha.svg'}
+          audioUrl={this.props.baseUrl + '/api/auth/captcha.wav'}
+        />
+        <Input
+          Icon={undefined}
+          label='Captcha'
+          name='captcha'
+          type='text'
+          onChange={this.props.onChange}
+          value={this.props.data.captcha}
+          placeholder='Captcha'
+        />
         <div className='text-center'>
           <Button name='submit' type='submit'>
             Register
diff --git a/packages/client/src/login/configureRegister.test.tsx b/packages/client/src/login/configureRegister.test.tsx
index 9bdac59..fa80d16 100644
--- a/packages/client/src/login/configureRegister.test.tsx
+++ b/packages/client/src/login/configureRegister.test.tsx
@@ -20,7 +20,7 @@ describe('configureRegister', () => {
     select: state => state.Login,
   })
   .withComponent(
-    select => configureRegister(select, loginActions),
+    select => configureRegister(select, loginActions, '/app'),
   )
   .withJSX((Component, props) =>
     <MemoryRouter><Component {...props} /></MemoryRouter>,
@@ -41,6 +41,7 @@ describe('configureRegister', () => {
       password: 'pass',
       firstName: '',
       lastName: '',
+      captcha: '',
     }
     const onSuccess = jest.fn()
     let node: Element
diff --git a/packages/client/src/login/configureRegister.ts b/packages/client/src/login/configureRegister.ts
index 4a711b8..078ccee 100644
--- a/packages/client/src/login/configureRegister.ts
+++ b/packages/client/src/login/configureRegister.ts
@@ -6,16 +6,18 @@ import { LoginState } from './LoginReducer'
 import { RegisterForm } from './RegisterForm'
 import { withForm } from './withForm'
 
-const defaultCredentials: NewUser = {
+const defaultCredentials: NewUser & { captcha: string }= {
   username: '',
   password: '',
   firstName: '',
   lastName: '',
+  captcha: '',
 }
 
 export function configureRegister<State>(
   getLocalState: SelectState<State, LoginState>,
   loginActions: LoginActions,
+  baseUrl: string,
 ) {
   return pack(
     getLocalState,
@@ -25,6 +27,7 @@ export function configureRegister<State>(
       redirectTo: state.redirectTo,
     }),
     dispatch => ({
+      baseUrl,
       onSubmit: bindActionCreators(loginActions.register, dispatch),
       clearOnSuccess: true,
     }),
diff --git a/packages/common/src/APIDef.ts b/packages/common/src/APIDef.ts
index dece836..8bfff06 100644
--- a/packages/common/src/APIDef.ts
+++ b/packages/common/src/APIDef.ts
@@ -10,7 +10,7 @@ export interface APIDef {
   }
   '/auth/register': {
     'post': {
-      body: NewUser
+      body: NewUser & { captcha: string }
       response: UserProfile
     }
   }
diff --git a/packages/react-captcha/src/Captcha.tsx b/packages/react-captcha/src/Captcha.tsx
index 75f8f52..87f5401 100644
--- a/packages/react-captcha/src/Captcha.tsx
+++ b/packages/react-captcha/src/Captcha.tsx
@@ -13,9 +13,6 @@ export interface CaptchaState {
 }
 
 export class Captcha extends React.PureComponent<CaptchaProps, CaptchaState> {
-  static defaultProps = {
-    name: 'captcha',
-  }
   state: CaptchaState = {
     type: 'image',
     attempt: 1,
@@ -46,7 +43,7 @@ export class Captcha extends React.PureComponent<CaptchaProps, CaptchaState> {
             </a>
             {this.props.audioUrl && (
               <a className='action-audio' onClick={this.changeToAudio}>
-                Click here for image version
+                Click here for audio version
                 </a>
             )}
           </>
@@ -58,7 +55,7 @@ export class Captcha extends React.PureComponent<CaptchaProps, CaptchaState> {
               Refresh
             </a>
             <a className='action-image' onClick={this.changeToImage}>
-              Click here for audio version
+              Click here for image version
             </a>
           </>
         )}
diff --git a/packages/react-test/src/index.tsx b/packages/react-test/src/index.tsx
index fa7ddd7..af419df 100644
--- a/packages/react-test/src/index.tsx
+++ b/packages/react-test/src/index.tsx
@@ -2,8 +2,10 @@
 import { createStore, SelectState, WaitMiddleware } from '@rondo.dev/redux'
 import React from 'react'
 import ReactDOM from 'react-dom'
+import T from 'react-dom/test-utils'
 import { Provider } from 'react-redux'
 import { Action, AnyAction, combineReducers, Reducer, ReducersMapObject } from 'redux'
+import { ThemeProvider, DefaultTheme } from 'styled-components'
 
 interface RenderParams<State, LocalState> {
   reducers: ReducersMapObject<State, any>
@@ -18,15 +20,24 @@ export class TestContainer extends React.Component<{}> {
 }
 
 export class TestUtils {
+  static defaultTheme?: DefaultTheme
+
   /**
    * Create a redux store
    */
   readonly createStore = createStore
+  readonly Utils = T
 
   render(jsx: JSX.Element) {
     const $div = document.createElement('div')
     const component = ReactDOM.render(
-      <TestContainer>{jsx}</TestContainer>, $div) as unknown as TestContainer
+      <TestContainer>
+        <ThemeProvider theme={TestUtils.defaultTheme}>
+          {jsx}
+        </ThemeProvider>
+      </TestContainer>,
+      $div,
+    ) as unknown as TestContainer
     const node = component.ref.current!.children[0]
     return {
       component,
diff --git a/packages/scripts/template/jest.config.js b/packages/scripts/template/jest.config.js
index 4c0cf86..7437d8c 100644
--- a/packages/scripts/template/jest.config.js
+++ b/packages/scripts/template/jest.config.js
@@ -13,4 +13,5 @@ module.exports = {
     'jsx',
   ],
   setupFiles: ['<rootDir>/jest.setup.js'],
+  setupFilesAfterEnv: ['<rootDir>/src/jest.env.ts'],
 }
diff --git a/packages/scripts/template/src/jest.env.ts b/packages/scripts/template/src/jest.env.ts
new file mode 100644
index 0000000..e69de29