From 87e7449c1e7cd50ac85a6bd19bf57bcd15a95bb1 Mon Sep 17 00:00:00 2001 From: SebDez Date: Mon, 8 May 2017 15:18:07 +0200 Subject: [PATCH] test : functionnal login modal and unit tests --- src/app/common/auth/action/auth-action.js | 8 +-- .../common/auth/action/auth-action.spec.js | 13 ++++ .../component/login-form-component.spec.js | 57 +++++++++++++++ .../component/login-modal-component.spec.js | 72 +++++++++++++++++++ .../common/auth/reducer/auth-reducer.spec.js | 35 +++++++++ .../component/sidebar-logged-off-component.js | 2 +- .../sidebar-logged-off-component.spec.js | 7 +- .../sidebar/container/sidebar-container.js | 13 ++-- .../container/sidebar-container.spec.js | 37 +++++++++- 9 files changed, 231 insertions(+), 13 deletions(-) create mode 100644 src/app/common/auth/component/login-form-component.spec.js create mode 100644 src/app/common/auth/component/login-modal-component.spec.js diff --git a/src/app/common/auth/action/auth-action.js b/src/app/common/auth/action/auth-action.js index 6ff4a33..333056f 100644 --- a/src/app/common/auth/action/auth-action.js +++ b/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 } diff --git a/src/app/common/auth/action/auth-action.spec.js b/src/app/common/auth/action/auth-action.spec.js index 565beff..fe8f6b0 100644 --- a/src/app/common/auth/action/auth-action.spec.js +++ b/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') + }) + }) + }) diff --git a/src/app/common/auth/component/login-form-component.spec.js b/src/app/common/auth/component/login-form-component.spec.js new file mode 100644 index 0000000..2668a99 --- /dev/null +++ b/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) + }) + }) +}) diff --git a/src/app/common/auth/component/login-modal-component.spec.js b/src/app/common/auth/component/login-modal-component.spec.js new file mode 100644 index 0000000..0332c99 --- /dev/null +++ b/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) + }) + }) +}) diff --git a/src/app/common/auth/reducer/auth-reducer.spec.js b/src/app/common/auth/reducer/auth-reducer.spec.js index 03f42d0..4ee8c80 100644 --- a/src/app/common/auth/reducer/auth-reducer.spec.js +++ b/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) + }) + }) }) diff --git a/src/app/module/sidebar/component/sidebar-logged-off-component.js b/src/app/module/sidebar/component/sidebar-logged-off-component.js index 47e3c9c..6393885 100644 --- a/src/app/module/sidebar/component/sidebar-logged-off-component.js +++ b/src/app/module/sidebar/component/sidebar-logged-off-component.js @@ -16,7 +16,7 @@ export class SidebarLoggedOff extends LucioleComponent { return (
console.log('handleSignup')} /> + handleClose={this.props.handleCloseModal} handleSignup={console.log} />
diff --git a/src/app/module/sidebar/component/sidebar-logged-off-component.spec.js b/src/app/module/sidebar/component/sidebar-logged-off-component.spec.js index 3223d91..eb6f2c7 100644 --- a/src/app/module/sidebar/component/sidebar-logged-off-component.spec.js +++ b/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', () => { diff --git a/src/app/module/sidebar/container/sidebar-container.js b/src/app/module/sidebar/container/sidebar-container.js index 1fa3656..ddadd35 100644 --- a/src/app/module/sidebar/container/sidebar-container.js +++ b/src/app/module/sidebar/container/sidebar-container.js @@ -51,7 +51,7 @@ function getHomePageContentElement (props) { } } return () } @@ -76,7 +76,7 @@ function logUserIn (props) { * @param {Object} props The container props */ function openLoginModal (props) { - props.authActions.openLoginModal() + props.authActions.openLoginModalAction() } /** @@ -84,7 +84,7 @@ function openLoginModal (props) { * @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 } /** diff --git a/src/app/module/sidebar/container/sidebar-container.spec.js b/src/app/module/sidebar/container/sidebar-container.spec.js index 12816ec..1a4bc13 100644 --- a/src/app/module/sidebar/container/sidebar-container.spec.js +++ b/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() 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() + }) + }) })