test : functionnal login modal and unit tests

src/app/common/auth/action/auth-action.js

@@ -25,9 +25,9 @@ export default class AuthActions extends LucioleActions {
     /** @type {Function}*/
     this.logUserInFailureAction = this.logUserInFailureAction.bind(this)
     /** @type {Function}*/
-    this.openLoginModal = this.openLoginModal.bind(this)
+    this.openLoginModalAction = this.openLoginModalAction.bind(this)
     /** @type {Function}*/
-    this.closeLoginModal = this.closeLoginModal.bind(this)
+    this.closeLoginModalAction = this.closeLoginModalAction.bind(this)
   }
 
   /**
@@ -118,7 +118,7 @@ export default class AuthActions extends LucioleActions {
    * Returns a new action that can be managed by Redux
    * @return {Object}          The action
    */
-  openLoginModal () {
+  openLoginModalAction () {
     return {
       type: Constants.ACTIONS.AUTH.OPEN_LOGIN_MODAL
     }
@@ -130,7 +130,7 @@ export default class AuthActions extends LucioleActions {
    * Returns a new action that can be managed by Redux
    * @return {Object}          The action
    */
-  closeLoginModal () {
+  closeLoginModalAction () {
     return {
       type: Constants.ACTIONS.AUTH.CLOSE_LOGIN_MODAL
     }

src/app/common/auth/action/auth-action.spec.js

@@ -197,4 +197,17 @@ describe('AuthAction', () => {
       })
     })
   })
+
+  describe('openLoginModalAction', () => {
+    it('Expect to return OPEN_LOGIN_MODAL as action type', () => {
+      expect(actions.openLoginModalAction().type).to.equal('OPEN_LOGIN_MODAL')
+    })
+  })
+
+  describe('closeLoginModalAction', () => {
+    it('Expect to return CLOSE_LOGIN_MODAL as action type', () => {
+      expect(actions.closeLoginModalAction().type).to.equal('CLOSE_LOGIN_MODAL')
+    })
+  })
+
 })

src/app/common/auth/component/login-form-component.spec.js

@@ -0,0 +1,57 @@
+import {shallow} from 'enzyme'
+import {expect} from 'chai'
+import { Field } from 'redux-form'
+import { LoginFormComponent } from './login-form-component'
+
+describe('LoginFormComponent', () => {
+  describe('render', () => {
+    const props = {
+      handleSubmit: () => 0
+    }
+    let compo = null
+
+    beforeEach(() => {
+      compo = new LoginFormComponent(props)
+    })
+
+    it('Expect to contain 1 form with valid className and valid onSubmit', () => {
+      const wrapper = shallow(compo.render())
+      const actual = wrapper.find('form').findWhere(n => {
+        return n.prop('onSubmit') === props.handleSubmit && n.prop('className') === 'luciole-form'
+      })
+      expect(actual).to.have.length(1)
+    })
+
+    it('Expect to contain 1 Field with valid name and type', () => {
+      const wrapper = shallow(compo.render())
+      const actual = wrapper.find(Field).findWhere(n => {
+        return n.prop('name') === 'mail' && n.prop('type') === 'email'
+      })
+      expect(actual).to.have.length(1)
+    })
+
+    it('Expect to contain 1 Field with valid name and type', () => {
+      const wrapper = shallow(compo.render())
+      const actual = wrapper.find(Field).findWhere(n => {
+        return n.prop('name') === 'password' && n.prop('type') === 'password'
+      })
+      expect(actual).to.have.length(1)
+    })
+
+    it('Expect to contain 1 div with valid className', () => {
+      const wrapper = shallow(compo.render())
+      const actual = wrapper.find('div').findWhere(n => {
+        return n.prop('className') === 'buttons'
+      })
+      expect(actual).to.have.length(1)
+    })
+
+    it('Expect to contain 1 button with valid className', () => {
+      const wrapper = shallow(compo.render())
+      const actual = wrapper.find('button').findWhere(n => {
+        return n.prop('className') === 'luciole-buttons'
+      })
+      expect(actual).to.have.length(1)
+    })
+  })
+})

src/app/common/auth/component/login-modal-component.spec.js

@@ -0,0 +1,72 @@
+import {shallow} from 'enzyme'
+import {expect} from 'chai'
+import LuLoginModal from './login-modal-component'
+import { Modal } from 'react-bootstrap'
+import LoginFormComponent from './login-form-component'
+
+describe('LuLoginModal', () => {
+  describe('render', () => {
+    const props = {
+      show: true,
+      handleLogin: () => 0,
+      handleClose: () => 0,
+      handleSignup: () => 0
+    }
+    let compo
+
+    beforeEach(() => {
+      compo = new LuLoginModal(props)
+    })
+
+    it('Expect to contain a Modal', () => {
+      const wrapper = shallow(compo.render())
+      const actual = wrapper.instance()
+      expect(actual).to.be.instanceOf(Modal)
+    })
+
+    it('Expect to contain a Modal with show prop', () => {
+      const wrapper = shallow(compo.render())
+      const actual = wrapper.instance()
+      expect(actual.props.show).to.equals(true)
+    })
+
+    it('Expect to contain a Modal with show prop', () => {
+      const wrapper = shallow(compo.render())
+      const actual = wrapper.instance()
+      expect(actual.props.onHide).to.equals(props.handleClose)
+    })
+
+    it('Expect to contain a button with onClick prop', () => {
+      const wrapper = shallow(compo.render())
+      const actual = wrapper.find('button').prop('onClick')
+      const expected = props.handleSignup
+      expect(actual).to.be.equal(expected)
+    })
+
+    it('Expect to contain 1 Modal.Title', () => {
+      const wrapper = shallow(compo.render())
+      const actual = wrapper.find(Modal.Title)
+      expect(actual).to.have.length(1)
+    })
+
+    it('Expect to contain 1 Modal.Body', () => {
+      const wrapper = shallow(compo.render())
+      const actual = wrapper.find(Modal.Body)
+      expect(actual).to.have.length(1)
+    })
+
+    it('Expect to contain 1 Modal.Footer', () => {
+      const wrapper = shallow(compo.render())
+      const actual = wrapper.find(Modal.Footer)
+      expect(actual).to.have.length(1)
+    })
+
+    it('Expect to contain 1 LoginFormComponent with valid prop', () => {
+      const wrapper = shallow(compo.render())
+      const actual = wrapper.find(LoginFormComponent).findWhere(n => {
+        return n.prop('onSubmit') === props.handleLogin
+      })
+      expect(actual).to.have.length(1)
+    })
+  })
+})

src/app/common/auth/reducer/auth-reducer.spec.js

@@ -27,6 +27,9 @@ describe('AuthReducer', () => {
         state: 'default-state-value',
         user: {
           token: 'my-new-token'
+        },
+        modals: {
+          showLoginModal: false
         }
       }
       expect(result).to.deep.equal(expected)
@@ -65,4 +68,36 @@ describe('AuthReducer', () => {
       expect(result).to.deep.equal(state)
     })
   })
+
+  describe('openLoginModalAction', () => {
+    it('Expect to return a valid state', () => {
+      const result = AuthReducer.openLoginModalAction(state, action)
+      const expected = {
+        state: 'default-state-value',
+        user: {
+          token: 'my-old-fashion-token'
+        },
+        modals: {
+          showLoginModal: true
+        }
+      }
+      expect(result).to.deep.equal(expected)
+    })
+  })
+
+  describe('closeLoginModalAction', () => {
+    it('Expect to return a valid state', () => {
+      const result = AuthReducer.closeLoginModalAction(state, action)
+      const expected = {
+        state: 'default-state-value',
+        user: {
+          token: 'my-old-fashion-token'
+        },
+        modals: {
+          showLoginModal: false
+        }
+      }
+      expect(result).to.deep.equal(expected)
+    })
+  })
 })

src/app/module/sidebar/component/sidebar-logged-off-component.js

@@ -16,7 +16,7 @@ export class SidebarLoggedOff extends LucioleComponent {
     return (
       <div>
         <LuLoginModal show={this.props.showLoginModal} handleLogin={this.props.handleLogin}
-          handleClose={this.props.handleCloseModal} handleSignup={() => console.log('handleSignup')} />
+          handleClose={this.props.handleCloseModal} handleSignup={console.log} />
         <div className='sidebar-content off'>
           <div className='sidebar-button' onClick={this.props.openLoginModal}>
             <LuI18n value='application.sidebar.play' lang={this.props.lang} />

src/app/module/sidebar/component/sidebar-logged-off-component.spec.js

@@ -6,7 +6,12 @@ import SidebarLoggedOff from './sidebar-logged-off-component'
 describe('SidebarLoggedOff', () => {
   describe('render', () => {
     const props = {
-      logUserIn: () => 0
+      logUserIn: () => 0,
+      openLoginModal: () => 0,
+      lang: 'fr',
+      showLoginModal: false,
+      handleCloseModal: () => 0,
+      handleLogin: () => 0
     }
 
     it('Expect to contain a div with valid className sidebar-content off', () => {

src/app/module/sidebar/container/sidebar-container.js

@@ -51,7 +51,7 @@ function getHomePageContentElement (props) {
     }
   }
   return (<SidebarLoggedOff lang={lang} openLoginModal={openLoginModal.bind(null, props)}
-    showLoginModal={props.showLoginModal} handleCloseModal={closeLoginModal.bind(null, props)}
+    showLoginModal={props.auth.modals.showLoginModal} handleCloseModal={closeLoginModal.bind(null, props)}
     handleLogin={logUserIn.bind(null, props)} />)
 }
 
@@ -76,15 +76,15 @@ function logUserIn (props) {
  * @param  {Object} props The container props
  */
 function openLoginModal (props) {
-  props.authActions.openLoginModal()
+  props.authActions.openLoginModalAction()
 }
 
 /**
  * Close the login modal
  * @param  {Object} props The container props
  */
 function closeLoginModal (props) {
-  props.authActions.closeLoginModal()
+  props.authActions.closeLoginModalAction()
 }
 
 /**
@@ -109,8 +109,7 @@ function mapStateToProps (state) {
   return {
     auth: state.application.auth,
     userResource: state.application.module.sidebar.userResource,
-    currentLang: state.i18n.locale,
-    showLoginModal: state.application.auth.modals.showLoginModal
+    currentLang: state.i18n.locale
   }
 }
 
@@ -140,7 +139,9 @@ Sidebar.mapStateToProps = mapStateToProps
 Sidebar.mapDispatchToProps = mapDispatchToProps
 Sidebar.__testOnly = {
   disconnectUser,
-  logUserIn
+  logUserIn,
+  closeLoginModal,
+  openLoginModal
 }
 
 /**

src/app/module/sidebar/container/sidebar-container.spec.js

@@ -45,6 +45,9 @@ describe('Sidebar', () => {
     const auth = {
       user: {
         token: 'mytoken'
+      },
+      modals: {
+        showLoginModal: true
       }
     }
     let userResource = {
@@ -55,7 +58,11 @@ describe('Sidebar', () => {
       expect(wrapper.find(SidebarLoggedIn)).to.be.length(1)
     })
     it('Expect to contain a SidebarLoggedOff if user not logged in', () => {
-      const noAuth = {}
+      const noAuth = {
+        modals: {
+          showLoginModal: true
+        }
+      }
       const wrapper = shallow(<Sidebar auth={noAuth} userResource={userResource} sidebarActions={{}} authActions={{}} />)
       expect(wrapper.find(SidebarLoggedOff)).to.be.length(1)
     })
@@ -97,4 +104,32 @@ describe('Sidebar', () => {
       expect(spy).to.have.been.called()
     })
   })
+
+  describe('openLoginModal', () => {
+    it('Expect to have call authActions.openLoginModalAction', () => {
+      const authActions = {
+        openLoginModalAction: () => 0
+      }
+      let spy = chai.spy.on(authActions, 'openLoginModalAction')
+      const props = {
+        authActions
+      }
+      Sidebar.__testOnly.openLoginModal(props)
+      expect(spy).to.have.been.called()
+    })
+  })
+
+  describe('closeLoginModal', () => {
+    it('Expect to have call authActions.closeLoginModalAction', () => {
+      const authActions = {
+        closeLoginModalAction: () => 0
+      }
+      let spy = chai.spy.on(authActions, 'closeLoginModalAction')
+      const props = {
+        authActions
+      }
+      Sidebar.__testOnly.closeLoginModal(props)
+      expect(spy).to.have.been.called()
+    })
+  })
 })