From 06ff405b455153b98fa8ef4dc0ad270210cc2a2d Mon Sep 17 00:00:00 2001
From: metzgegu <31687635+metzgegu@users.noreply.github.com>
Date: Fri, 3 Jan 2020 09:48:19 +0100
Subject: [PATCH] test(front): add unit tests to frontend

ref: #2239
---
 frontend/configEnv-test.json                  |   3 +
 frontend/package.json                         |  10 +-
 frontend/src/action-creator.async.js          |   4 +-
 .../component/Account/MenuSubComponent.jsx    |  11 +
 .../src/component/Account/Notification.jsx    |  16 +-
 frontend/src/component/Account/Timezone.jsx   |   3 +-
 frontend/src/component/ContentItemSearch.jsx  |   2 +-
 frontend/src/component/FlashMessage.jsx       |   2 +-
 .../Header/MenuActionListItem/MenuProfil.jsx  |   2 +-
 frontend/src/component/Header/Search.jsx      |   2 +-
 .../component/Workspace/BtnExtandedAction.jsx |   2 +-
 .../component/Workspace/ContentItemHeader.jsx |   2 +-
 .../common/Input/DropdownCreateButton.jsx     |   2 +-
 .../common/Input/SubDropdownCreateButton.jsx  |   2 +-
 frontend/src/container/Account.jsx            |   2 +-
 .../src/container/AppFullscreenRouter.jsx     |   2 +-
 frontend/src/container/Home.jsx               |   2 +-
 frontend/src/container/Sidebar.jsx            |   2 +-
 frontend/src/container/Tracim.jsx             |   2 +-
 frontend/src/helper.js                        |   4 +-
 frontend/src/index.js                         |   3 +-
 frontend/test/.mocharc.js                     |   3 +-
 frontend/test/fixture/app/agenda.js           |   3 +-
 frontend/test/fixture/app/file.js             |   3 +-
 frontend/test/fixture/app/folder.js           |   3 +-
 frontend/test/fixture/app/htmlDocument.js     |   3 +-
 frontend/test/fixture/app/thread.js           |   3 +-
 frontend/test/fixture/contentType/comment.js  |  10 +-
 frontend/test/fixture/contentType/file.js     |  16 +-
 frontend/test/fixture/contentType/folder.js   |  16 +-
 .../test/fixture/contentType/htmlDocument.js  |  16 +-
 frontend/test/fixture/contentType/thread.js   |  16 +-
 frontend/test/fixture/user/globalManager.js   |   2 +-
 .../fixture/user/globalManagerAsMember.js     |   2 +-
 .../test/fixture/workspace/firstWorkspace.js  |   4 +-
 frontend/test/helper.spec.js                  | 104 ---------
 frontend/test/hocMock/helper.js               |  48 +---
 .../test/hocMock/redux/appList/appList.js     |  10 +-
 .../redux/appList/appListAsSidebarEntry.js    |  10 +-
 .../hocMock/redux/contentType/contentType.js  |  10 +-
 frontend/test/hocMock/redux/user/user.js      |   2 +-
 .../redux/workspaceList/workspaceList.js      |   2 +-
 frontend/test/hocMock/store.js                |  19 ++
 frontend/test/hocMock/withRouter.js           |  20 +-
 frontend/test/setup.js                        |  12 +-
 .../test/src/action-creator.async.spec.js     |  27 +++
 .../test/src/component/AgendaInfo.spec.js     |  33 +++
 .../src/component/BtnExtandedAction.spec.js   |  67 ++++++
 frontend/test/src/component/Button.spec.js    |  48 ++++
 frontend/test/src/component/Calendar.spec.js  |  20 ++
 frontend/test/src/component/Card.spec.js      |  29 +++
 frontend/test/src/component/CardBody.spec.js  |  28 +++
 .../test/src/component/CardHeader.spec.js     |  35 +++
 .../src/component/ContentItemHeader.spec.js   |  24 ++
 .../src/component/ContentItemSearch.spec.js   |  76 +++++++
 .../test/src/component/ContentTypeBtn.spec.js |  58 +++++
 .../test/src/component/DragHandle.spec.js     |  31 +++
 .../component/DropdownCreateButton.spec.js    |  42 ++++
 .../test/src/component/DropdownLang.spec.js   |  62 ++++++
 .../test/src/component/FlashMessage.spec.js   |  38 ++++
 frontend/test/src/component/Help.spec.js      |  22 ++
 .../src/component/HomeHasWorkspace.spec.js    |  20 ++
 .../src/component/HomeNoWorkspace.spec.js     |  45 ++++
 .../test/src/component/InputGroupTest.spec.js |  74 +++++++
 frontend/test/src/component/LoginLogo.spec.js |  23 ++
 frontend/test/src/component/Logo.spec.js      |  23 ++
 .../test/src/component/MemberList.spec.js     |  81 +++++++
 .../test/src/component/MenuProfil.spec.js     |  32 +++
 .../src/component/MenuSubComponent.spec.js    |  47 ++++
 frontend/test/src/component/MoreInfo.spec.js  |  53 +++++
 .../test/src/component/Notification.spec.js   |  49 +++++
 .../test/src/component/OpenContentApp.spec.js |  72 ++++++
 .../component/OpenCreateContentApp.spec.js    |  53 +++++
 frontend/test/src/component/Password.spec.js  |  63 ++++++
 .../test/src/component/PersonalData.spec.js   |  45 ++++
 .../test/src/component/RecentActivity.spec.js |  61 ++++++
 frontend/test/src/component/Search.spec.js    |  36 +++
 .../component/SubDropdownCreateButton.spec.js |  53 +++++
 frontend/test/src/component/Timezone.spec.js  |  38 ++++
 frontend/test/src/component/UserInfo.spec.js  |  39 ++++
 .../test/src/component/UserStatus.spec.js     |  83 +++++++
 .../test/src/component/WebdavInfo.spec.js     |  33 +++
 .../component/WorkspaceListItem.spec.js       |  23 +-
 frontend/test/src/container/Account.spec.js   | 207 ++++++++++++++++++
 .../src/container/AppFullscreenRouter.spec.js |  73 ++++++
 .../test/src/container/ForgotPassword.spec.js |  48 ++++
 frontend/test/src/container/Home.spec.js      |  44 ++++
 frontend/test/src/container/Sidebar.spec.js   |  34 +++
 frontend/test/src/container/Tracim.spec.js    | 169 ++++++++++++++
 frontend/test/src/helper.spec.js              | 168 ++++++++++++++
 90 files changed, 2585 insertions(+), 261 deletions(-)
 create mode 100644 frontend/configEnv-test.json
 delete mode 100644 frontend/test/helper.spec.js
 create mode 100644 frontend/test/hocMock/store.js
 create mode 100644 frontend/test/src/action-creator.async.spec.js
 create mode 100644 frontend/test/src/component/AgendaInfo.spec.js
 create mode 100644 frontend/test/src/component/BtnExtandedAction.spec.js
 create mode 100644 frontend/test/src/component/Button.spec.js
 create mode 100644 frontend/test/src/component/Calendar.spec.js
 create mode 100644 frontend/test/src/component/Card.spec.js
 create mode 100644 frontend/test/src/component/CardBody.spec.js
 create mode 100644 frontend/test/src/component/CardHeader.spec.js
 create mode 100644 frontend/test/src/component/ContentItemHeader.spec.js
 create mode 100644 frontend/test/src/component/ContentItemSearch.spec.js
 create mode 100644 frontend/test/src/component/ContentTypeBtn.spec.js
 create mode 100644 frontend/test/src/component/DragHandle.spec.js
 create mode 100644 frontend/test/src/component/DropdownCreateButton.spec.js
 create mode 100644 frontend/test/src/component/DropdownLang.spec.js
 create mode 100644 frontend/test/src/component/FlashMessage.spec.js
 create mode 100644 frontend/test/src/component/Help.spec.js
 create mode 100644 frontend/test/src/component/HomeHasWorkspace.spec.js
 create mode 100644 frontend/test/src/component/HomeNoWorkspace.spec.js
 create mode 100644 frontend/test/src/component/InputGroupTest.spec.js
 create mode 100644 frontend/test/src/component/LoginLogo.spec.js
 create mode 100644 frontend/test/src/component/Logo.spec.js
 create mode 100644 frontend/test/src/component/MemberList.spec.js
 create mode 100644 frontend/test/src/component/MenuProfil.spec.js
 create mode 100644 frontend/test/src/component/MenuSubComponent.spec.js
 create mode 100644 frontend/test/src/component/MoreInfo.spec.js
 create mode 100644 frontend/test/src/component/Notification.spec.js
 create mode 100644 frontend/test/src/component/OpenContentApp.spec.js
 create mode 100644 frontend/test/src/component/OpenCreateContentApp.spec.js
 create mode 100644 frontend/test/src/component/Password.spec.js
 create mode 100644 frontend/test/src/component/PersonalData.spec.js
 create mode 100644 frontend/test/src/component/RecentActivity.spec.js
 create mode 100644 frontend/test/src/component/Search.spec.js
 create mode 100644 frontend/test/src/component/SubDropdownCreateButton.spec.js
 create mode 100644 frontend/test/src/component/Timezone.spec.js
 create mode 100644 frontend/test/src/component/UserInfo.spec.js
 create mode 100644 frontend/test/src/component/UserStatus.spec.js
 create mode 100644 frontend/test/src/component/WebdavInfo.spec.js
 rename frontend/test/{ => src}/component/WorkspaceListItem.spec.js (74%)
 create mode 100644 frontend/test/src/container/Account.spec.js
 create mode 100644 frontend/test/src/container/AppFullscreenRouter.spec.js
 create mode 100644 frontend/test/src/container/ForgotPassword.spec.js
 create mode 100644 frontend/test/src/container/Home.spec.js
 create mode 100644 frontend/test/src/container/Sidebar.spec.js
 create mode 100644 frontend/test/src/container/Tracim.spec.js
 create mode 100644 frontend/test/src/helper.spec.js

diff --git a/frontend/configEnv-test.json b/frontend/configEnv-test.json
new file mode 100644
index 0000000000..c4fcf2876a
--- /dev/null
+++ b/frontend/configEnv-test.json
@@ -0,0 +1,3 @@
+{
+  "apiUrl": "http://localhost:1337/api/v2"
+}
diff --git a/frontend/package.json b/frontend/package.json
index f442b2f84e..80759461c7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,7 +13,7 @@
     "buildwindoz": "set NODE_ENV=production&& webpack -p",
     "build-devwindoz": "set NODE_ENV=production&& webpack",
     "build-translation": "node i18next.scanner.js",
-    "test": "NODE_ENV=test mocha --config test/.mocharc.js"
+    "test": "(standard --env mocha \"test/**/*.js\" || echo \"\nSome Linting error\") && NODE_ENV=test mocha --config test/.mocharc.js"
   },
   "author": "",
   "license": "ISC",
@@ -32,7 +32,7 @@
     "react-device-detect": "^1.7.5",
     "react-dnd": "7.4.5",
     "react-dnd-html5-backend": "7.4.4",
-    "react-dom": "^16.7.0",
+    "react-dom": "16.7.0",
     "react-i18next": "7.4.0",
     "react-redux": "5.0.6",
     "react-router": "^5.0.1",
@@ -57,14 +57,18 @@
     "chai": "^4.2.0",
     "chai-enzyme": "^1.0.0-beta.1",
     "css-loader": "^3.0.0",
-    "enzyme": "^3.10.0",
+    "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "file-loader": "^4.0.0",
     "i18next-scanner": "^2.10.2",
     "ignore-styles": "^5.0.1",
+    "isomorphic-fetch": "^2.2.1",
     "jsdom": "^15.1.1",
     "json-server": "^0.15.0",
     "mocha": "^6.1.4",
+    "nock": "^10.0.6",
+    "redux-mock-store": "^1.5.3",
+    "sinon": "^7.4.1",
     "standard": "^12.0.1",
     "standard-loader": "^6.0.1",
     "style-loader": "^0.23.1",
diff --git a/frontend/src/action-creator.async.js b/frontend/src/action-creator.async.js
index cdb346950e..05d8c34f13 100644
--- a/frontend/src/action-creator.async.js
+++ b/frontend/src/action-creator.async.js
@@ -3,7 +3,8 @@ import {
   FETCH_CONFIG,
   PAGE,
   COOKIE_FRONTEND,
-  unLoggedAllowedPageList
+  unLoggedAllowedPageList,
+  history
 } from './helper.js'
 import i18n from './i18n.js'
 import * as Cookies from 'js-cookie'
@@ -45,7 +46,6 @@ import {
   WORKSPACE_CONTENT_MOVE,
   SEARCHED_KEYWORDS
 } from './action-creator.sync.js'
-import { history } from './index.js'
 import { ErrorFlashMessageTemplateHtml } from 'tracim_frontend_lib'
 
 /*
diff --git a/frontend/src/component/Account/MenuSubComponent.jsx b/frontend/src/component/Account/MenuSubComponent.jsx
index 16d150281f..76ff31478f 100644
--- a/frontend/src/component/Account/MenuSubComponent.jsx
+++ b/frontend/src/component/Account/MenuSubComponent.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
+import PropTypes from 'prop-types'
 import { translate } from 'react-i18next'
 
 require('./MenuSubComponent.styl')
@@ -31,3 +32,13 @@ export const MenuSubComponent = props => {
 }
 
 export default translate()(MenuSubComponent)
+
+MenuSubComponent.propTypes = {
+  menu: PropTypes.arrayOf(PropTypes.object),
+  onClickMenuItem: PropTypes.func
+}
+
+MenuSubComponent.defaultProps = {
+  menu: [],
+  onClickMenuItem: () => {}
+}
diff --git a/frontend/src/component/Account/Notification.jsx b/frontend/src/component/Account/Notification.jsx
index 92f545cb47..10c5cf163e 100755
--- a/frontend/src/component/Account/Notification.jsx
+++ b/frontend/src/component/Account/Notification.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { translate } from 'react-i18next'
-import { BtnSwitch, ROLE } from 'tracim_frontend_lib'
+import { BtnSwitch, ROLE_LIST } from 'tracim_frontend_lib'
 
 export const Notification = props =>
   <div className='account__userpreference__setting__notification'>
@@ -24,7 +25,7 @@ export const Notification = props =>
           {props.workspaceList.length > 0
             ? props.workspaceList.map(ws => {
               const mySelf = ws.memberList.find(u => u.id === props.userLoggedId)
-              const myRole = ROLE.find(r => r.slug === mySelf.role)
+              const myRole = ROLE_LIST.find(r => r.slug === mySelf.role)
               return (
                 <tr key={`ws_${ws.id}`}>
                   <td>
@@ -67,3 +68,14 @@ export const Notification = props =>
   </div>
 
 export default translate()(Notification)
+
+Notification.propTypes = {
+  workspaceList: PropTypes.arrayOf(PropTypes.object),
+  userLoggedId: PropTypes.number,
+  onChangeSubscriptionNotif: PropTypes.func
+}
+
+Notification.defaultProps = {
+  workspaceList: [],
+  onChangeSubscriptionNotif: () => {}
+}
diff --git a/frontend/src/component/Account/Timezone.jsx b/frontend/src/component/Account/Timezone.jsx
index d4a0cc4ada..36239c6d2f 100644
--- a/frontend/src/component/Account/Timezone.jsx
+++ b/frontend/src/component/Account/Timezone.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import Select from 'react-select'
-import 'react-select/dist/react-select.css'
+// INFO - GM - 2019-08-20 - this css file doesn't exist
+// import 'react-select/dist/react-select.css'
 import { translate } from 'react-i18next'
 
 export const Timezone = props => {
diff --git a/frontend/src/component/ContentItemSearch.jsx b/frontend/src/component/ContentItemSearch.jsx
index 9ec99495cf..7b2dd0cd78 100644
--- a/frontend/src/component/ContentItemSearch.jsx
+++ b/frontend/src/component/ContentItemSearch.jsx
@@ -6,7 +6,7 @@ import { Badge, Avatar } from 'tracim_frontend_lib'
 
 require('./ContentItemSearch.styl')
 
-const ContentItemSearch = props => {
+export const ContentItemSearch = props => {
   const status = props.contentType.availableStatuses.find(s => s.slug === props.statusSlug) || { hexcolor: '', label: '', faIcon: '' }
 
   return (
diff --git a/frontend/src/component/FlashMessage.jsx b/frontend/src/component/FlashMessage.jsx
index 7d3e06e4de..0556f28ed9 100644
--- a/frontend/src/component/FlashMessage.jsx
+++ b/frontend/src/component/FlashMessage.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 
 require('./FlashMessage.styl')
 
-const FlashMessage = props => {
+export const FlashMessage = props => {
   if (!props.flashMessage.length || props.flashMessage.length === 0) return null
 
   const dataTypeArray = [{
diff --git a/frontend/src/component/Header/MenuActionListItem/MenuProfil.jsx b/frontend/src/component/Header/MenuActionListItem/MenuProfil.jsx
index 0589fd30bc..fc6980df68 100644
--- a/frontend/src/component/Header/MenuActionListItem/MenuProfil.jsx
+++ b/frontend/src/component/Header/MenuActionListItem/MenuProfil.jsx
@@ -7,7 +7,7 @@ import { Avatar } from 'tracim_frontend_lib'
 
 require('./MenuProfil.styl')
 
-const MenuProfil = props => {
+export const MenuProfil = props => {
   if (!props.user.logged) return null
 
   return (
diff --git a/frontend/src/component/Header/Search.jsx b/frontend/src/component/Header/Search.jsx
index 87e418d324..d5476cf399 100644
--- a/frontend/src/component/Header/Search.jsx
+++ b/frontend/src/component/Header/Search.jsx
@@ -3,7 +3,7 @@ import { translate } from 'react-i18next'
 
 require('./Search.styl')
 
-class Search extends React.Component {
+export class Search extends React.Component {
   constructor (props) {
     super(props)
 
diff --git a/frontend/src/component/Workspace/BtnExtandedAction.jsx b/frontend/src/component/Workspace/BtnExtandedAction.jsx
index a85759736b..7d7f314d34 100644
--- a/frontend/src/component/Workspace/BtnExtandedAction.jsx
+++ b/frontend/src/component/Workspace/BtnExtandedAction.jsx
@@ -5,7 +5,7 @@ import { ROLE } from 'tracim_frontend_lib'
 import { PAGE } from '../../helper'
 import { Link } from 'react-router-dom'
 
-const ExtandedAction = props => {
+export const ExtandedAction = props => {
   return (
     <div
       className='extandedaction dropdown'
diff --git a/frontend/src/component/Workspace/ContentItemHeader.jsx b/frontend/src/component/Workspace/ContentItemHeader.jsx
index 9a298b1639..05b0942d88 100644
--- a/frontend/src/component/Workspace/ContentItemHeader.jsx
+++ b/frontend/src/component/Workspace/ContentItemHeader.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { translate } from 'react-i18next'
 
-const FileItemHeader = props => {
+export const FileItemHeader = props => {
   return (
     <div className='content__header'>
       <div className='content__header__type'>
diff --git a/frontend/src/component/common/Input/DropdownCreateButton.jsx b/frontend/src/component/common/Input/DropdownCreateButton.jsx
index 5a8261acc2..7d22e28ccf 100644
--- a/frontend/src/component/common/Input/DropdownCreateButton.jsx
+++ b/frontend/src/component/common/Input/DropdownCreateButton.jsx
@@ -4,7 +4,7 @@ import classnames from 'classnames'
 import SubDropdownCreateButton from './SubDropdownCreateButton.jsx'
 import { translate } from 'react-i18next'
 
-const DropdownCreateButton = props => {
+export const DropdownCreateButton = props => {
   return (
     <div className={classnames(props.parentClass, props.customClass, 'dropdownCreateBtn')}>
       <button
diff --git a/frontend/src/component/common/Input/SubDropdownCreateButton.jsx b/frontend/src/component/common/Input/SubDropdownCreateButton.jsx
index 85c85b07c9..8f59eeb4d9 100644
--- a/frontend/src/component/common/Input/SubDropdownCreateButton.jsx
+++ b/frontend/src/component/common/Input/SubDropdownCreateButton.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 
 require('./SubDropdownCreateButton.styl')
 
-const SubDropdownCreateButton = props => {
+export const SubDropdownCreateButton = props => {
   return (
     <div>
       {props.availableApp.map(app =>
diff --git a/frontend/src/container/Account.jsx b/frontend/src/container/Account.jsx
index dae034604f..794fa2d67b 100644
--- a/frontend/src/container/Account.jsx
+++ b/frontend/src/container/Account.jsx
@@ -38,7 +38,7 @@ import {
 } from '../helper.js'
 import AgendaInfo from '../component/Dashboard/AgendaInfo.jsx'
 
-class Account extends React.Component {
+export class Account extends React.Component {
   constructor (props) {
     super(props)
 
diff --git a/frontend/src/container/AppFullscreenRouter.jsx b/frontend/src/container/AppFullscreenRouter.jsx
index b252764a71..51589b5fd8 100644
--- a/frontend/src/container/AppFullscreenRouter.jsx
+++ b/frontend/src/container/AppFullscreenRouter.jsx
@@ -6,7 +6,7 @@ import { PAGE } from '../helper.js'
 import appFactory from '../appFactory.js'
 import { CUSTOM_EVENT, PROFILE } from 'tracim_frontend_lib'
 
-class AppFullscreenRouter extends React.Component {
+export class AppFullscreenRouter extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
diff --git a/frontend/src/container/Home.jsx b/frontend/src/container/Home.jsx
index 972f6c4406..1f209dbe16 100644
--- a/frontend/src/container/Home.jsx
+++ b/frontend/src/container/Home.jsx
@@ -12,7 +12,7 @@ import CardBody from '../component/common/Card/CardBody.jsx'
 import HomeNoWorkspace from '../component/Home/HomeNoWorkspace.jsx'
 import HomeHasWorkspace from '../component/Home/HomeHasWorkspace.jsx'
 
-class Home extends React.Component {
+export class Home extends React.Component {
   handleClickCreateWorkspace = e => {
     e.preventDefault()
     const { props } = this
diff --git a/frontend/src/container/Sidebar.jsx b/frontend/src/container/Sidebar.jsx
index c3cec2f40d..fac9ce9e40 100644
--- a/frontend/src/container/Sidebar.jsx
+++ b/frontend/src/container/Sidebar.jsx
@@ -22,7 +22,7 @@ import {
   PROFILE
 } from 'tracim_frontend_lib'
 
-class Sidebar extends React.Component {
+export class Sidebar extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
diff --git a/frontend/src/container/Tracim.jsx b/frontend/src/container/Tracim.jsx
index 9393cbbc33..f8d748f110 100644
--- a/frontend/src/container/Tracim.jsx
+++ b/frontend/src/container/Tracim.jsx
@@ -52,7 +52,7 @@ import SearchResult from './SearchResult.jsx'
 import GuestUpload from './GuestUpload.jsx'
 import GuestDownload from './GuestDownload.jsx'
 
-class Tracim extends React.Component {
+export class Tracim extends React.Component {
   constructor (props) {
     super(props)
 
diff --git a/frontend/src/helper.js b/frontend/src/helper.js
index f526615cf6..71960e93c9 100644
--- a/frontend/src/helper.js
+++ b/frontend/src/helper.js
@@ -1,12 +1,14 @@
 import i18n, { getBrowserLang } from './i18n.js'
 import { PROFILE_LIST, ROLE } from 'tracim_frontend_lib'
 
-const configEnv = require('../configEnv.json')
+const configEnv = process.env.NODE_ENV === 'test' ? require('../configEnv-test.json') : require('../configEnv.json')
 
 const versionFile = require('./version.json')
 export const TRACIM_APP_VERSION = versionFile.tracim_app_version
 export const SHARE_FOLDER_ID = -1
 
+export const history = require('history').createBrowserHistory()
+
 // this function is declared in i18n to avoid cyclic imports and reexported here for consistency
 export { getBrowserLang }
 
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 59bfa446b1..e434b3b5dd 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -10,8 +10,9 @@ import { I18nextProvider } from 'react-i18next'
 import i18n from './i18n.js'
 import { DragDropContextProvider } from 'react-dnd'
 import HTML5Backend from 'react-dnd-html5-backend'
+import { history } from './helper'
 
-export const history = require('history').createBrowserHistory()
+// export const history = require('history').createBrowserHistory()
 
 require('./css/index.styl')
 
diff --git a/frontend/test/.mocharc.js b/frontend/test/.mocharc.js
index a92c4a2b49..f560fa4227 100644
--- a/frontend/test/.mocharc.js
+++ b/frontend/test/.mocharc.js
@@ -6,7 +6,8 @@ module.exports = {
     'regenerator-runtime/runtime',
     '@babel/register',
     'ignore-styles',
-    'test/setup'
+    'test/setup',
+    'isomorphic-fetch' // INFO - GM - 2019-12-16 - Isomorphic-fetch provide the fetch API because Node does not contain it, and unit test run in Node context
   ],
   reporter: 'spec',
   colors: true,
diff --git a/frontend/test/fixture/app/agenda.js b/frontend/test/fixture/app/agenda.js
index 557f88d113..ce168b94e7 100644
--- a/frontend/test/fixture/app/agenda.js
+++ b/frontend/test/fixture/app/agenda.js
@@ -4,5 +4,6 @@ export const agenda = {
   isActive: true,
   faIcon: 'calendar',
   hexcolor: '#ff4b3a',
-  config: {}
+  config: {},
+  creationLabel: 'Create a agenda'
 }
diff --git a/frontend/test/fixture/app/file.js b/frontend/test/fixture/app/file.js
index 481361e827..d95939867d 100644
--- a/frontend/test/fixture/app/file.js
+++ b/frontend/test/fixture/app/file.js
@@ -4,5 +4,6 @@ export const file = {
   isActive: true,
   faIcon: 'paperclip',
   hexcolor: '#ffa500',
-  config: {}
+  config: {},
+  creationLabel: 'Create a file'
 }
diff --git a/frontend/test/fixture/app/folder.js b/frontend/test/fixture/app/folder.js
index 2c96d10d62..1a30b0ce5d 100644
--- a/frontend/test/fixture/app/folder.js
+++ b/frontend/test/fixture/app/folder.js
@@ -4,5 +4,6 @@ export const folder = {
   isActive: true,
   faIcon: 'folder-o',
   hexcolor: '#414548',
-  config: {}
+  config: {},
+  creationLabel: 'Create a folder'
 }
diff --git a/frontend/test/fixture/app/htmlDocument.js b/frontend/test/fixture/app/htmlDocument.js
index ded964ddc2..f3061b05fa 100644
--- a/frontend/test/fixture/app/htmlDocument.js
+++ b/frontend/test/fixture/app/htmlDocument.js
@@ -4,5 +4,6 @@ export const htmlDocument = {
   isActive: true,
   faIcon: 'file-text-o',
   hexcolor: '#00CC00',
-  config: {}
+  config: {},
+  creationLabel: 'Create a htmlDocument'
 }
diff --git a/frontend/test/fixture/app/thread.js b/frontend/test/fixture/app/thread.js
index 56c76d3ae7..ce35bece11 100644
--- a/frontend/test/fixture/app/thread.js
+++ b/frontend/test/fixture/app/thread.js
@@ -4,5 +4,6 @@ export const thread = {
   isActive: true,
   faIcon: 'comments-o',
   hexcolor: '#428BCA',
-  config: {}
+  config: {},
+  creationLabel: 'Create a tread'
 }
diff --git a/frontend/test/fixture/contentType/comment.js b/frontend/test/fixture/contentType/comment.js
index 6f980b73c3..16a312a2f1 100644
--- a/frontend/test/fixture/contentType/comment.js
+++ b/frontend/test/fixture/contentType/comment.js
@@ -1,7 +1,7 @@
-import {open} from '../contentStatus/open.js'
-import {validated} from '../contentStatus/validated.js'
-import {cancelled} from '../contentStatus/cancelled.js'
-import {deprecated} from '../contentStatus/deprecated.js'
+import { open } from '../contentStatus/open.js'
+import { validated } from '../contentStatus/validated.js'
+import { cancelled } from '../contentStatus/cancelled.js'
+import { deprecated } from '../contentStatus/deprecated.js'
 
 export const comment = {
   label: 'Comment',
@@ -9,7 +9,7 @@ export const comment = {
   faIcon: '',
   hexcolor: '',
   creationLabel: 'Comment',
-  availableStatus: [
+  availableStatuses: [
     open,
     validated,
     cancelled,
diff --git a/frontend/test/fixture/contentType/file.js b/frontend/test/fixture/contentType/file.js
index ab87b2a5bc..97188ecc1e 100644
--- a/frontend/test/fixture/contentType/file.js
+++ b/frontend/test/fixture/contentType/file.js
@@ -1,18 +1,18 @@
-import {file as fileApp} from '../app/file.js'
-import {open} from '../contentStatus/open.js'
-import {validated} from '../contentStatus/validated.js'
-import {cancelled} from '../contentStatus/cancelled.js'
-import {deprecated} from '../contentStatus/deprecated.js'
+import { file as fileApp } from '../app/file.js'
+import { open } from '../contentStatus/open.js'
+import { validated } from '../contentStatus/validated.js'
+import { cancelled } from '../contentStatus/cancelled.js'
+import { deprecated } from '../contentStatus/deprecated.js'
 
-const {label, slug, faIcon, hexcolor} = fileApp
+const { label, faIcon, hexcolor } = fileApp
 
 export const file = {
   label,
-  slug,
+  slug: 'file',
   faIcon,
   hexcolor,
   creationLabel: 'Upload a file',
-  availableStatus: [
+  availableStatuses: [
     open,
     validated,
     cancelled,
diff --git a/frontend/test/fixture/contentType/folder.js b/frontend/test/fixture/contentType/folder.js
index d4ce0792c3..efc2279a63 100644
--- a/frontend/test/fixture/contentType/folder.js
+++ b/frontend/test/fixture/contentType/folder.js
@@ -1,18 +1,18 @@
-import {folder as folderApp} from '../app/folder.js'
-import {open} from '../contentStatus/open.js'
-import {validated} from '../contentStatus/validated.js'
-import {cancelled} from '../contentStatus/cancelled.js'
-import {deprecated} from '../contentStatus/deprecated.js'
+import { folder as folderApp } from '../app/folder.js'
+import { open } from '../contentStatus/open.js'
+import { validated } from '../contentStatus/validated.js'
+import { cancelled } from '../contentStatus/cancelled.js'
+import { deprecated } from '../contentStatus/deprecated.js'
 
-const {label, slug, faIcon, hexcolor} = folderApp
+const { label, faIcon, hexcolor } = folderApp
 
 export const folder = {
   label,
-  slug,
+  slug: 'folder',
   faIcon,
   hexcolor,
   creationLabel: 'Create a folder',
-  availableStatus: [
+  availableStatuses: [
     open,
     validated,
     cancelled,
diff --git a/frontend/test/fixture/contentType/htmlDocument.js b/frontend/test/fixture/contentType/htmlDocument.js
index 5d967473e2..2a7920d09e 100644
--- a/frontend/test/fixture/contentType/htmlDocument.js
+++ b/frontend/test/fixture/contentType/htmlDocument.js
@@ -1,18 +1,18 @@
-import {htmlDocument as htmlDocumentApp} from '../app/htmlDocument.js'
-import {open} from '../contentStatus/open.js'
-import {validated} from '../contentStatus/validated.js'
-import {cancelled} from '../contentStatus/cancelled.js'
-import {deprecated} from '../contentStatus/deprecated.js'
+import { htmlDocument as htmlDocumentApp } from '../app/htmlDocument.js'
+import { open } from '../contentStatus/open.js'
+import { validated } from '../contentStatus/validated.js'
+import { cancelled } from '../contentStatus/cancelled.js'
+import { deprecated } from '../contentStatus/deprecated.js'
 
-const {label, slug, faIcon, hexcolor} = htmlDocumentApp
+const { label, faIcon, hexcolor } = htmlDocumentApp
 
 export const htmlDocument = {
   label,
-  slug,
+  slug: 'html-document',
   faIcon,
   hexcolor,
   creationLabel: 'Write a document',
-  availableStatus: [
+  availableStatuses: [
     open,
     validated,
     cancelled,
diff --git a/frontend/test/fixture/contentType/thread.js b/frontend/test/fixture/contentType/thread.js
index fca0991861..6a0c0f2b2a 100644
--- a/frontend/test/fixture/contentType/thread.js
+++ b/frontend/test/fixture/contentType/thread.js
@@ -1,18 +1,18 @@
-import {thread as threadApp} from '../app/thread.js'
-import {open} from '../contentStatus/open.js'
-import {validated} from '../contentStatus/validated.js'
-import {cancelled} from '../contentStatus/cancelled.js'
-import {deprecated} from '../contentStatus/deprecated.js'
+import { thread as threadApp } from '../app/thread.js'
+import { open } from '../contentStatus/open.js'
+import { validated } from '../contentStatus/validated.js'
+import { cancelled } from '../contentStatus/cancelled.js'
+import { deprecated } from '../contentStatus/deprecated.js'
 
-const {label, slug, faIcon, hexcolor} = threadApp
+const { label, faIcon, hexcolor } = threadApp
 
 export const thread = {
   label,
-  slug,
+  slug: 'thread',
   faIcon,
   hexcolor,
   creationLabel: 'Start a topic',
-  availableStatus: [
+  availableStatuses: [
     open,
     validated,
     cancelled,
diff --git a/frontend/test/fixture/user/globalManager.js b/frontend/test/fixture/user/globalManager.js
index cf8fb493c6..ecb4813970 100644
--- a/frontend/test/fixture/user/globalManager.js
+++ b/frontend/test/fixture/user/globalManager.js
@@ -11,5 +11,5 @@ export const globalManager = {
   public_name: 'Global manager',
   lang: 'en',
   agendaUrl: '',
-  is_deleted: false,
+  is_deleted: false
 }
diff --git a/frontend/test/fixture/user/globalManagerAsMember.js b/frontend/test/fixture/user/globalManagerAsMember.js
index 9af2981d9d..f58eaf16f5 100644
--- a/frontend/test/fixture/user/globalManagerAsMember.js
+++ b/frontend/test/fixture/user/globalManagerAsMember.js
@@ -1,7 +1,7 @@
 import { globalManager } from './globalManager.js'
 import { ROLE } from 'tracim_frontend_lib'
 
-const {id, publicName, isActive, doNotify} = globalManager
+const { id, publicName, isActive, doNotify } = globalManager
 
 // INFO - CH - 2019-06-24 - this is a user returned by the api as a member of a workspace
 export const globalManagerAsMember = {
diff --git a/frontend/test/fixture/workspace/firstWorkspace.js b/frontend/test/fixture/workspace/firstWorkspace.js
index de194451f3..4ec9d63efd 100644
--- a/frontend/test/fixture/workspace/firstWorkspace.js
+++ b/frontend/test/fixture/workspace/firstWorkspace.js
@@ -1,5 +1,5 @@
-import {appListAsSidebarEntry} from '../../hocMock/redux/appList/appListAsSidebarEntry.js'
-import {globalManagerAsMember} from '../user/globalManagerAsMember.js'
+import { appListAsSidebarEntry } from '../../hocMock/redux/appList/appListAsSidebarEntry.js'
+import { globalManagerAsMember } from '../user/globalManagerAsMember.js'
 
 export const firstWorkspace = {
   id: 1,
diff --git a/frontend/test/helper.spec.js b/frontend/test/helper.spec.js
deleted file mode 100644
index 9f1ccb8387..0000000000
--- a/frontend/test/helper.spec.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import { expect, assert } from 'chai'
-import { sortWorkspaceContents } from '../src/helper.js'
-
-describe('In file helper.js', () => {
-  describe('the function sortWorkspaceContents()', () => {
-    it('should sort the array of content by folder and alphabetically properly', () => {
-      // INFO - CH - 2019-08-08 - on the list bellow, contents only have the properties that mattes for the sort
-      // Note that Array.sort() differs between chrome and node.js.
-      // the implementation of sortWorkspaceContents should handles these differences
-      const contentListAsGivenByApi = [
-        { id: 1, label: 'content 0', type: 'html-document'},
-        { id: 2, label: 'content 0', type: 'folder'},
-        { id: 3, label: 'content 1', type: 'html-document'},
-        { id: 4, label: 'content 1', type: 'folder'},
-        { id: 21, label: 'content 10', type: 'html-document'},
-        { id: 22, label: 'content 10', type: 'folder'},
-        { id: 23, label: 'content 11', type: 'file'},
-        { id: 24, label: 'content 11', type: 'folder'},
-        { id: 25, label: 'content 12', type: 'html-document'},
-        { id: 26, label: 'content 12', type: 'folder'},
-        { id: 27, label: 'content 13', type: 'html-document'},
-        { id: 28, label: 'content 13', type: 'folder'},
-        { id: 29, label: 'content 14', type: 'thread'},
-        { id: 30, label: 'content 14', type: 'folder'},
-        { id: 31, label: 'content 15', type: 'html-document'},
-        { id: 32, label: 'content 15', type: 'folder'},
-        { id: 33, label: 'content 16', type: 'thread'},
-        { id: 34, label: 'content 16', type: 'folder'},
-        { id: 35, label: 'content 17', type: 'html-document'},
-        { id: 36, label: 'content 17', type: 'folder'},
-        { id: 37, label: 'content 18', type: 'html-document'},
-        { id: 38, label: 'content 18', type: 'folder'},
-        { id: 39, label: 'content 19', type: 'html-document'},
-        { id: 40, label: 'content 19', type: 'folder'},
-        { id: 5, label: 'content 2', type: 'file'},
-        { id: 6, label: 'content 2', type: 'folder'},
-        { id: 41, label: 'content 20', type: 'html-document'},
-        { id: 42, label: 'content 20', type: 'folder'},
-        { id: 7, label: 'content 3', type: 'html-document'},
-        { id: 8, label: 'content 3', type: 'folder'},
-        { id: 9, label: 'content 4', type: 'html-document'},
-        { id: 10, label: 'content 4', type: 'folder'},
-        { id: 11, label: 'content 5', type: 'file'},
-        { id: 12, label: 'content 5', type: 'folder'},
-        { id: 13, label: 'content 6', type: 'html-document'},
-        { id: 14, label: 'content 6', type: 'folder'},
-        { id: 15, label: 'content 7', type: 'file'},
-        { id: 16, label: 'content 7', type: 'folder'},
-        { id: 17, label: 'content 8', type: 'thread'},
-        { id: 18, label: 'content 8', type: 'folder'},
-        { id: 19, label: 'content 9', type: 'html-document'},
-        { id: 20, label: 'content 9', type: 'folder'}
-      ]
-      const contentListSortedByFolderAndAlphabetically = [
-        { id: 2, label: 'content 0', type: 'folder'},
-        { id: 4, label: 'content 1', type: 'folder'},
-        { id: 22, label: 'content 10', type: 'folder'},
-        { id: 24, label: 'content 11', type: 'folder'},
-        { id: 26, label: 'content 12', type: 'folder'},
-        { id: 28, label: 'content 13', type: 'folder'},
-        { id: 30, label: 'content 14', type: 'folder'},
-        { id: 32, label: 'content 15', type: 'folder'},
-        { id: 34, label: 'content 16', type: 'folder'},
-        { id: 36, label: 'content 17', type: 'folder'},
-        { id: 38, label: 'content 18', type: 'folder'},
-        { id: 40, label: 'content 19', type: 'folder'},
-        { id: 6, label: 'content 2', type: 'folder'},
-        { id: 42, label: 'content 20', type: 'folder'},
-        { id: 8, label: 'content 3', type: 'folder'},
-        { id: 10, label: 'content 4', type: 'folder'},
-        { id: 12, label: 'content 5', type: 'folder'},
-        { id: 14, label: 'content 6', type: 'folder'},
-        { id: 16, label: 'content 7', type: 'folder'},
-        { id: 18, label: 'content 8', type: 'folder'},
-        { id: 20, label: 'content 9', type: 'folder'},
-        { id: 1, label: 'content 0', type: 'html-document'},
-        { id: 3, label: 'content 1', type: 'html-document'},
-        { id: 21, label: 'content 10', type: 'html-document'},
-        { id: 23, label: 'content 11', type: 'file'},
-        { id: 25, label: 'content 12', type: 'html-document'},
-        { id: 27, label: 'content 13', type: 'html-document'},
-        { id: 29, label: 'content 14', type: 'thread'},
-        { id: 31, label: 'content 15', type: 'html-document'},
-        { id: 33, label: 'content 16', type: 'thread'},
-        { id: 35, label: 'content 17', type: 'html-document'},
-        { id: 37, label: 'content 18', type: 'html-document'},
-        { id: 39, label: 'content 19', type: 'html-document'},
-        { id: 5, label: 'content 2', type: 'file'},
-        { id: 41, label: 'content 20', type: 'html-document'},
-        { id: 7, label: 'content 3', type: 'html-document'},
-        { id: 9, label: 'content 4', type: 'html-document'},
-        { id: 11, label: 'content 5', type: 'file'},
-        { id: 13, label: 'content 6', type: 'html-document'},
-        { id: 15, label: 'content 7', type: 'file'},
-        { id: 17, label: 'content 8', type: 'thread'},
-        { id: 19, label: 'content 9', type: 'html-document'}
-      ]
-
-      const sortedContentList = contentListAsGivenByApi.sort(sortWorkspaceContents)
-
-      expect(sortedContentList).to.deep.equal(contentListSortedByFolderAndAlphabetically)
-    })
-  })
-})
diff --git a/frontend/test/hocMock/helper.js b/frontend/test/hocMock/helper.js
index a5a22dedc6..18226995f3 100644
--- a/frontend/test/hocMock/helper.js
+++ b/frontend/test/hocMock/helper.js
@@ -1,45 +1,7 @@
-import { shallow } from 'enzyme'
-
-// INFO - CH - 2019-06-24 - shallowUntilTarget copied from https://github.com/airbnb/enzyme/issues/539#issuecomment-321638534
-
-/*
- * Repeatedly render a component tree using enzyme.shallow() until
- * finding and rendering TargetComponent.
- *
- * The `componentInstance` parameter is a React component instance.
- * Example: <MyComponent {...props} />
- *
- * The `TargetComponent` parameter is the React class (or function) that
- * you want to retrieve from the component tree.
- */
-export function shallowUntilTarget(componentInstance, TargetComponent, {
-  maxTries = 10,
-  shallowOptions,
-  _shallow = shallow,
-} = {}) {
-  if (!componentInstance) {
-    throw new Error('componentInstance parameter is required')
-  }
-  if (!TargetComponent) {
-    throw new Error('TargetComponent parameter is required')
-  }
-
-  let root = _shallow(componentInstance, shallowOptions)
-
-  if (typeof root.type() === 'string') {
-    // If type() is a string then it's a DOM Node.
-    // If it were wrapped, it would be a React component.
-    throw new Error('Cannot unwrap this component because it is not wrapped')
-  }
-
-  for (let tries = 1; tries <= maxTries; tries++) {
-    if (root.is(TargetComponent)) {
-      // Now that we found the target component, render it.
-      return root.shallow(shallowOptions)
-    }
-    // Unwrap the next component in the hierarchy.
-    root = root.dive()
-  }
+export function restoreHistoryCallBack (callbacks) {
+  callbacks.forEach(c => c.resetHistory())
+}
 
-  throw new Error(`Could not find ${TargetComponent} in rendered instance: ${componentInstance}; gave up after ${maxTries} tries`)
+export const isFunction = (functionToCheck) => {
+  return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]'
 }
diff --git a/frontend/test/hocMock/redux/appList/appList.js b/frontend/test/hocMock/redux/appList/appList.js
index 713986c349..9e1c011ab1 100644
--- a/frontend/test/hocMock/redux/appList/appList.js
+++ b/frontend/test/hocMock/redux/appList/appList.js
@@ -1,8 +1,8 @@
-import {thread} from '../../../fixture/app/thread.js'
-import {file} from '../../../fixture/app/file.js'
-import {htmlDocument} from '../../../fixture/app/htmlDocument.js'
-import {folder} from '../../../fixture/app/folder.js'
-import {agenda} from '../../../fixture/app/agenda.js'
+import { thread } from '../../../fixture/app/thread.js'
+import { file } from '../../../fixture/app/file.js'
+import { htmlDocument } from '../../../fixture/app/htmlDocument.js'
+import { folder } from '../../../fixture/app/folder.js'
+import { agenda } from '../../../fixture/app/agenda.js'
 
 export const appList = [
   thread,
diff --git a/frontend/test/hocMock/redux/appList/appListAsSidebarEntry.js b/frontend/test/hocMock/redux/appList/appListAsSidebarEntry.js
index 9f83475f15..185c623e3a 100644
--- a/frontend/test/hocMock/redux/appList/appListAsSidebarEntry.js
+++ b/frontend/test/hocMock/redux/appList/appListAsSidebarEntry.js
@@ -1,8 +1,8 @@
 import { appList } from './appList.js'
-import {file} from '../../../fixture/app/file.js'
-import {htmlDocument} from '../../../fixture/app/htmlDocument.js'
-import {thread} from '../../../fixture/app/thread.js'
-import {agenda} from '../../../fixture/app/agenda.js'
+import { file } from '../../../fixture/app/file.js'
+import { htmlDocument } from '../../../fixture/app/htmlDocument.js'
+import { thread } from '../../../fixture/app/thread.js'
+import { agenda } from '../../../fixture/app/agenda.js'
 
 export const appListAsSidebarEntry = workspaceId => [{
   slug: 'dashboard',
@@ -19,7 +19,7 @@ export const appListAsSidebarEntry = workspaceId => [{
 },
 ...appList
   .filter(app => [htmlDocument.slug, thread.slug, file.slug, agenda.slug].includes(app.slug))
-  .map(({slug, faIcon, hexcolor, label}) => ({
+  .map(({ slug, faIcon, hexcolor, label }) => ({
     slug,
     faIcon,
     hexcolor,
diff --git a/frontend/test/hocMock/redux/contentType/contentType.js b/frontend/test/hocMock/redux/contentType/contentType.js
index 0ed335a6e8..d6589013ca 100644
--- a/frontend/test/hocMock/redux/contentType/contentType.js
+++ b/frontend/test/hocMock/redux/contentType/contentType.js
@@ -1,8 +1,8 @@
-import {thread} from '../../../fixture/contentType/thread.js'
-import {file} from '../../../fixture/contentType/file.js'
-import {htmlDocument} from '../../../fixture/contentType/htmlDocument.js'
-import {folder} from '../../../fixture/contentType/folder.js'
-import {comment} from '../../../fixture/contentType/comment.js'
+import { thread } from '../../../fixture/contentType/thread.js'
+import { file } from '../../../fixture/contentType/file.js'
+import { htmlDocument } from '../../../fixture/contentType/htmlDocument.js'
+import { folder } from '../../../fixture/contentType/folder.js'
+import { comment } from '../../../fixture/contentType/comment.js'
 
 export const contentType = [
   thread,
diff --git a/frontend/test/hocMock/redux/user/user.js b/frontend/test/hocMock/redux/user/user.js
index 2aeb35457e..f872bfdd6d 100644
--- a/frontend/test/hocMock/redux/user/user.js
+++ b/frontend/test/hocMock/redux/user/user.js
@@ -1,3 +1,3 @@
-import {globalManager} from '../../../fixture/user/globalManager.js'
+import { globalManager } from '../../../fixture/user/globalManager.js'
 
 export const user = globalManager
diff --git a/frontend/test/hocMock/redux/workspaceList/workspaceList.js b/frontend/test/hocMock/redux/workspaceList/workspaceList.js
index 727582af33..01ee1450f5 100644
--- a/frontend/test/hocMock/redux/workspaceList/workspaceList.js
+++ b/frontend/test/hocMock/redux/workspaceList/workspaceList.js
@@ -1,4 +1,4 @@
-import {firstWorkspace} from '../../../fixture/workspace/firstWorkspace.js'
+import { firstWorkspace } from '../../../fixture/workspace/firstWorkspace.js'
 
 export const workspaceList = {
   workspaceList: [
diff --git a/frontend/test/hocMock/store.js b/frontend/test/hocMock/store.js
new file mode 100644
index 0000000000..b3667a5393
--- /dev/null
+++ b/frontend/test/hocMock/store.js
@@ -0,0 +1,19 @@
+import React from 'react'
+
+export function connectMock (mapStateToProps) {
+  return function (WrappedComponent) {
+    return class connectMock extends React.Component {
+      render () {
+        return (
+          <WrappedComponent
+            {...this.props}
+            {...mapStateToProps}
+            getState={() => {}}
+            subscribe={() => {}}
+            dispatch={() => {}}
+          />
+        )
+      }
+    }
+  }
+}
diff --git a/frontend/test/hocMock/withRouter.js b/frontend/test/hocMock/withRouter.js
index 74f518972e..29ebef2608 100644
--- a/frontend/test/hocMock/withRouter.js
+++ b/frontend/test/hocMock/withRouter.js
@@ -19,7 +19,7 @@ export function withRouterMock (WrappedComponent) {
         <WrappedComponent
           {...this.props}
           history={{
-            action: "POP",
+            action: 'POP',
             block: () => {},
             createHref: () => {},
             go: () => {},
@@ -28,19 +28,19 @@ export function withRouterMock (WrappedComponent) {
             length: 7,
             listen: () => {},
             location: {
-              hash: "",
-              key: "3v4nbu",
-              pathname: "/ui/workspaces/1/contents",
-              search: "?folder_open="
+              hash: '',
+              key: '3v4nbu',
+              pathname: '/ui/workspaces/1/contents',
+              search: '?folder_open='
             },
             push: () => {},
-            replace: () => {},
+            replace: () => {}
           }}
           location={{
-            hash: "",
-            key: "3v4nbu",
-            pathname: "/ui/workspaces/1/contents",
-            search: "?folder_open="
+            hash: '',
+            key: '3v4nbu',
+            pathname: '/ui/workspaces/1/contents',
+            search: '?folder_open='
           }}
         />
       )
diff --git a/frontend/test/setup.js b/frontend/test/setup.js
index 1e597b0265..3bab3225a8 100644
--- a/frontend/test/setup.js
+++ b/frontend/test/setup.js
@@ -3,10 +3,11 @@ import chai from 'chai'
 import Enzyme from 'enzyme'
 import chaiEnzyme from 'chai-enzyme'
 import Adapter from 'enzyme-adapter-react-16'
+import sinon from 'sinon'
 
 process.env.NODE_ENV = 'test'
 
-export const GLOBAL_primaryColor = {
+export const globalPrimaryColor = {
   hex: '#123456',
   rgb: 'rgb(18, 52, 86)'
 }
@@ -14,18 +15,19 @@ export const GLOBAL_primaryColor = {
 // INFO - CH - 2019-06-24 - Example from https://medium.com/riipen-engineering/testing-react-with-enzyme-part-1-setup-ff49e51f8ff0
 if (!global.window && !global.document) {
   const { window } = new JSDOM('<!doctype html><html><body></body></html>', {
-    beforeParse(win) {
+    beforeParse (win) {
       win.scrollTo = () => {}
     },
     pretendToBeVisual: false,
-    userAgent: 'mocha',
+    userAgent: 'mocha'
   })
 
   global.window = window
   global.document = window.document
   global.navigator = window.navigator
-  global.GLOBAL_primaryColor = GLOBAL_primaryColor.hex
+  global.GLOBAL_primaryColor = globalPrimaryColor.hex
 }
 
-Enzyme.configure({adapter: new Adapter()})
+Enzyme.configure({ adapter: new Adapter() })
 chai.use(chaiEnzyme())
+sinon.stub(console, 'log')
diff --git a/frontend/test/src/action-creator.async.spec.js b/frontend/test/src/action-creator.async.spec.js
new file mode 100644
index 0000000000..89a06eb972
--- /dev/null
+++ b/frontend/test/src/action-creator.async.spec.js
@@ -0,0 +1,27 @@
+import { expect } from 'chai'
+import { user } from '../hocMock/redux/user/user'
+import {
+  putMyselfName
+} from '../../src/action-creator.async.js'
+import { FETCH_CONFIG } from '../../src/helper'
+
+const nock = require('nock')
+const dispatch = () => {}
+
+describe('action-creator.async', () => {
+  describe('putMyselfName', () => {
+    before(() => {
+      nock(FETCH_CONFIG.apiUrl)
+        .put('/users/me')
+        .reply(200, { json: () => {} })
+    })
+
+    it('should call the right endpoint and return the right result', (done) => {
+      const newName = 'randomNewName'
+      putMyselfName(user, newName)(dispatch).then((result) => {
+        expect(result.status).to.equal(200)
+        expect(result.url).to.equal(`${FETCH_CONFIG.apiUrl}/users/me`)
+      }).then(done, done)
+    })
+  })
+})
diff --git a/frontend/test/src/component/AgendaInfo.spec.js b/frontend/test/src/component/AgendaInfo.spec.js
new file mode 100644
index 0000000000..29ed9647be
--- /dev/null
+++ b/frontend/test/src/component/AgendaInfo.spec.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { AgendaInfo as AgendaInfoWithoutHOC } from '../../../src/component/Dashboard/AgendaInfo.jsx'
+
+describe('<AgendaInfo />', () => {
+  const props = {
+    introText: 'randomIntroText',
+    caldavText: 'randomCaldavText',
+    agendaUrl: 'randomAgendaUrl',
+    customClass: 'randomCustomClass'
+  }
+
+  const wrapper = shallow(<AgendaInfoWithoutHOC {...props} t={key => key} />)
+
+  describe('static design', () => {
+    it(`the root div should have the class: ${props.customClass}`, () =>
+      expect(wrapper.find(`div.agendaInfo.${props.customClass}`).length).to.equal(1)
+    )
+
+    it(`should display the introText: ${props.introText} in a div`, () =>
+      expect(wrapper.find('div.agendaInfo__content__text > div')).to.text().contains(props.introText)
+    )
+
+    it(`should display the caldavText: ${props.caldavText}`, () =>
+      expect(wrapper.find('a.agendaInfo__content__text__help')).to.text().equal(props.caldavText)
+    )
+
+    it(`should display the agendaUrl: ${props.agendaUrl} in a div`, () => {
+      expect(wrapper.find('div.agendaInfo__content__link__url')).to.text().equal(props.agendaUrl)
+    })
+  })
+})
diff --git a/frontend/test/src/component/BtnExtandedAction.spec.js b/frontend/test/src/component/BtnExtandedAction.spec.js
new file mode 100644
index 0000000000..1953aad141
--- /dev/null
+++ b/frontend/test/src/component/BtnExtandedAction.spec.js
@@ -0,0 +1,67 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { ExtandedAction as ExtandedActionWithoutHOC } from '../../../src/component/Workspace/BtnExtandedAction.jsx'
+import { ROLE } from 'tracim_frontend_lib'
+import sinon from 'sinon'
+import { Link } from 'react-router-dom'
+
+describe('<ExtandedAction />', () => {
+  const archiveCallBack = sinon.stub()
+  const deleteCallBack = sinon.stub()
+  const editCallBack = sinon.stub()
+
+  const props = {
+    onClickExtendedAction: {
+      archive: {
+        callback: archiveCallBack
+      },
+      delete: {
+        callback: deleteCallBack
+      },
+      edit: {
+        callback: editCallBack
+      }
+    },
+    userRoleIdInWorkspace: 1,
+    folderData: {
+      workspaceId: 0,
+      id: 0
+    }
+  }
+
+  const wrapper = shallow(<ExtandedActionWithoutHOC {...props} t={key => key} />)
+
+  describe('static design', () => {
+    it('should hide all dropdown buttons when userRoleIdInWorkspace = 8', () => {
+      wrapper.setProps({ userRoleIdInWorkspace: ROLE.reader.id })
+      expect(wrapper.find('div.subdropdown__item').length).to.equal(0)
+      wrapper.setProps({ userRoleIdInWorkspace: props.userRoleIdInWorkspace })
+    })
+
+    it('should show only one dropdown buttons when userRoleIdInWorkspace = 4', () => {
+      wrapper.setProps({ userRoleIdInWorkspace: ROLE.contributor.id })
+      expect(wrapper.find('div.subdropdown__item').length).to.equal(1)
+      wrapper.setProps({ userRoleIdInWorkspace: props.userRoleIdInWorkspace })
+    })
+
+    it('should show all dropdown buttons when userRoleIdInWorkspace = 1', () => {
+      wrapper.setProps({ userRoleIdInWorkspace: ROLE.workspaceManager.id })
+      expect(wrapper.find('div.subdropdown__item').length).to.equal(2)
+      expect(wrapper.find(Link)).to.have.lengthOf(1)
+      wrapper.setProps({ userRoleIdInWorkspace: props.userRoleIdInWorkspace })
+    })
+  })
+
+  describe('handlers', () => {
+    it('editCallBack should be called when the edit button is clicked', () => {
+      wrapper.find('div.subdropdown__item').first().simulate('click')
+      expect(editCallBack.called).to.equal(true)
+    })
+
+    it('deleteCallBack should be called when the delete button is clicked', () => {
+      wrapper.find('div.subdropdown__item').at(1).simulate('click')
+      expect(deleteCallBack.called).to.equal(true)
+    })
+  })
+})
diff --git a/frontend/test/src/component/Button.spec.js b/frontend/test/src/component/Button.spec.js
new file mode 100644
index 0000000000..23d8e302e0
--- /dev/null
+++ b/frontend/test/src/component/Button.spec.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import Button from '../../../src/component/common/Input/Button.jsx'
+import sinon from 'sinon'
+
+describe('<Button />', () => {
+  const onClickCallBack = sinon.stub()
+
+  const props = {
+    htmlType: 'button',
+    bootstrapType: 'primary',
+    customClass: 'randomCustomClass',
+    label: 'randomLabel',
+    onClick: onClickCallBack
+  }
+
+  const wrapper = shallow(<Button {...props} />)
+
+  describe('static design', () => {
+    it('should display the button', () =>
+      expect(wrapper.find('button').length).to.equal(1)
+    )
+
+    it(`the button type should be ${props.htmlType}`, () =>
+      expect(wrapper.find('button').prop('type')).to.equal(props.htmlType)
+    )
+
+    it(`the button should display: ${props.label}`, () =>
+      expect(wrapper.find('button')).to.text().equal(props.label)
+    )
+
+    it(`the button should have the bootstrap class: 'btn-${props.bootstrapType}'`, () =>
+      expect(wrapper.find(`button.btn-${props.bootstrapType}`).length).to.equal(1)
+    )
+
+    it(`the button should have the custom class: ${props.customClass}`, () =>
+      expect(wrapper.find(`button.${props.customClass}`).length).to.equal(1)
+    )
+  })
+
+  describe('handler', () => {
+    it('onClickCallBack should be called when the button is clicked', () => {
+      wrapper.find('button').simulate('click')
+      expect(onClickCallBack.called).to.equal(true)
+    })
+  })
+})
diff --git a/frontend/test/src/component/Calendar.spec.js b/frontend/test/src/component/Calendar.spec.js
new file mode 100644
index 0000000000..ad346312ca
--- /dev/null
+++ b/frontend/test/src/component/Calendar.spec.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { Calendar as CalendarWithoutHOC } from '../../../src/component/Account/Calendar.jsx'
+
+describe('<Calendar />', () => {
+  const props = {
+    user: {
+      caldavUrl: 'randomCaldavUrl'
+    }
+  }
+
+  const wrapper = shallow(<CalendarWithoutHOC {...props} t={key => key} />)
+
+  describe('static intern', () => {
+    it('should display the caldavUrl of the user in a div', () =>
+      expect(wrapper.find('div.calendar__link')).to.text().equal(props.user.caldavUrl)
+    )
+  })
+})
diff --git a/frontend/test/src/component/Card.spec.js b/frontend/test/src/component/Card.spec.js
new file mode 100644
index 0000000000..c250aed82e
--- /dev/null
+++ b/frontend/test/src/component/Card.spec.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import Card from '../../../src/component/common/Card/Card.jsx'
+import CardHeader from '../../../src/component/common/Card/CardHeader.jsx'
+import CardBody from '../../../src/component/common/Card/CardBody.jsx'
+
+describe('<Card />', () => {
+  const props = {
+    customClass: 'randomCustomClass'
+  }
+
+  const CardBodyChildren = () => <div>Random Children</div>
+
+  const wrapper = shallow(
+    <Card {...props} >
+      <CardHeader />
+      <CardBody>
+        <CardBodyChildren />
+      </CardBody>
+    </Card>
+  )
+
+  describe('static design', () => {
+    it(`should have the customClass: ${props.customClass}`, () => {
+      expect(wrapper.find(`div.card.${props.customClass}`).length).to.equal(1)
+    })
+  })
+})
diff --git a/frontend/test/src/component/CardBody.spec.js b/frontend/test/src/component/CardBody.spec.js
new file mode 100644
index 0000000000..1985827ee7
--- /dev/null
+++ b/frontend/test/src/component/CardBody.spec.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import CardBody from '../../../src/component/common/Card/CardBody.jsx'
+
+describe('<CardBody />', () => {
+  const props = {
+    formClass: 'randomCustomClass'
+  }
+
+  const Children = () => <div>Random Children</div>
+
+  const wrapper = shallow(
+    <CardBody {...props}>
+      <Children />
+    </CardBody>
+  )
+
+  describe('static design', () => {
+    it(`should have the formClass: ${props.formClass}`, () =>
+      expect(wrapper.find(`div.card-body > div.${props.formClass}`).length).to.equal(1)
+    )
+
+    it(`should contains the children`, () =>
+      expect(wrapper.find(`div.card-body > div.${props.formClass}`).children()).to.contains(Children)
+    )
+  })
+})
diff --git a/frontend/test/src/component/CardHeader.spec.js b/frontend/test/src/component/CardHeader.spec.js
new file mode 100644
index 0000000000..a75ce439d9
--- /dev/null
+++ b/frontend/test/src/component/CardHeader.spec.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import CardHeader from '../../../src/component/common/Card/CardHeader.jsx'
+
+describe('<CardHeader />', () => {
+  const props = {
+    displayHeader: true,
+    customClass: 'randomCustomClass'
+  }
+
+  const Children = () => <div>Random Children</div>
+
+  const wrapper = shallow(
+    <CardHeader {...props}>
+      <Children />
+    </CardHeader>
+  )
+
+  describe('static design', () => {
+    it(`should have the formClass: ${props.customClass}`, () =>
+      expect(wrapper.find(`div.card-header.${props.customClass}`).length).to.equal(1)
+    )
+
+    it(`should have the style property display to none when displayHeader is false`, () => {
+      wrapper.setProps({ displayHeader: false })
+      expect(wrapper.find(`div.card-header.${props.customClass}`).prop('style').display).to.equal('none')
+      wrapper.setProps({ displayHeader: props.displayHeader })
+    })
+
+    it(`should have the style to undefined when displayHeader is false`, () =>
+      expect(wrapper.find(`div.card-header.${props.customClass}`).prop('style')).to.equal(undefined)
+    )
+  })
+})
diff --git a/frontend/test/src/component/ContentItemHeader.spec.js b/frontend/test/src/component/ContentItemHeader.spec.js
new file mode 100644
index 0000000000..99b3bd4eb5
--- /dev/null
+++ b/frontend/test/src/component/ContentItemHeader.spec.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { FileItemHeader as FileItemHeaderWithoutHOC } from '../../../src/component/Workspace/ContentItemHeader.jsx'
+
+describe('<ContentItemHeader />', () => {
+  const props = {
+    showSearchDetails: true
+  }
+
+  const wrapper = shallow(<FileItemHeaderWithoutHOC {...props} t={key => key} />)
+
+  describe('static design', () => {
+    it('should display search details when showSearchDetails is true', () =>
+      expect(wrapper.find('div.content__header__search').length).to.equal(1)
+    )
+
+    it('should not display search details when showSearchDetails is false', () => {
+      wrapper.setProps({ showSearchDetails: false })
+      expect(wrapper.find('div.content__header__search').length).to.equal(0)
+      wrapper.setProps({ showSearchDetails: props.showSearchDetails })
+    })
+  })
+})
diff --git a/frontend/test/src/component/ContentItemSearch.spec.js b/frontend/test/src/component/ContentItemSearch.spec.js
new file mode 100644
index 0000000000..30a0ede261
--- /dev/null
+++ b/frontend/test/src/component/ContentItemSearch.spec.js
@@ -0,0 +1,76 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { ContentItemSearch as ContentItemSearchWithoutHOC } from '../../../src/component/ContentItemSearch.jsx'
+import { contentType } from '../../hocMock/redux/contentType/contentType.js'
+
+describe('<ContentItemSearch />', () => {
+  const status = contentType[2].availableStatuses[0]
+
+  const props = {
+    statusSlug: status.slug,
+    customClass: 'randomCustomClass',
+    label: 'randomLabel',
+    fileName: 'randomFileName',
+    fileExtension: 'randomFileExtension',
+    contentType: contentType[2],
+    faIcon: 'randomFaIcon',
+    urlContent: 'randomUrlContent',
+    path: 'randomPath',
+    lastModificationTime: '05/08/2019',
+    lastModificationFormated: '2019/05/08',
+    lastModificationAuthor: 'randomAuthor'
+  }
+
+  const wrapper = shallow(<ContentItemSearchWithoutHOC {...props} t={key => key} />)
+
+  describe('static design', () => {
+    it('should display the path in a div', () =>
+      expect(wrapper.find('div.content__path')).to.text().equal(props.path)
+    )
+
+    it(`should display the label: ${props.label}`, () =>
+      expect(wrapper.find('div.content__name')).to.text().contains(props.label)
+    )
+
+    it(`should display the lastModificationTime: ${props.lastModificationTime}`, () =>
+      expect(wrapper.find('div.content__lastModification')).to.text().contains(props.lastModificationTime)
+    )
+
+    it(`should display the status label: ${status.label} in a div`, () =>
+      expect(wrapper.find('div.content__status__text')).to.text().equal(status.label)
+    )
+
+    it(`should display the status icon: ${status.faIcon}`, () =>
+      expect(wrapper.find(`div.content__status__icon > i.fa.fa-${status.faIcon}`).length).to.equal(1)
+    )
+
+    it(`should display the icon: ${props.faIcon}`, () =>
+      expect(wrapper.find(`div.content__type > i.fa.fa-${props.faIcon}`).length).to.equal(1)
+    )
+
+    it(`the div .content__type should have the color: ${props.contentType.hexcolor}`, () =>
+      expect(wrapper.find('div.content__type').prop('style').color).to.equal(props.contentType.hexcolor)
+    )
+
+    it(`the div .content__type should have the title: ${props.contentType.label}`, () =>
+      expect(wrapper.find('div.content__type').prop('title')).to.equal(props.contentType.label)
+    )
+
+    it(`the div .content__name should have the title: ${props.label}`, () =>
+      expect(wrapper.find('div.content__name').prop('title')).to.equal(props.label)
+    )
+
+    it(`the div .content__path should have the title: ${props.path}`, () =>
+      expect(wrapper.find('div.content__path').prop('title')).to.equal(props.path)
+    )
+
+    it(`the div .content__lastModification should have the title: ${props.lastModificationFormated}`, () =>
+      expect(wrapper.find('div.content__lastModification').prop('title')).to.equal(props.lastModificationFormated)
+    )
+
+    it(`the div .content__status should have the title: ${status.label}`, () =>
+      expect(wrapper.find('div.content__status').prop('title')).to.equal(status.label)
+    )
+  })
+})
diff --git a/frontend/test/src/component/ContentTypeBtn.spec.js b/frontend/test/src/component/ContentTypeBtn.spec.js
new file mode 100644
index 0000000000..7982a53ee9
--- /dev/null
+++ b/frontend/test/src/component/ContentTypeBtn.spec.js
@@ -0,0 +1,58 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { ContentTypeBtn } from '../../../src/component/Dashboard/ContentTypeBtn.jsx'
+import sinon from 'sinon'
+
+describe('<ContentTypeBtn />', () => {
+  const onClickBtnCallBack = sinon.stub()
+
+  const props = {
+    hexcolor: '#ffffff',
+    label: 'randomLabel',
+    faIcon: 'randomFaIcon',
+    creationLabel: 'randomCreationLabel',
+    customClass: 'randomCustomClass',
+    onClickBtn: onClickBtnCallBack,
+    appSlug: 'randomAppSlug'
+  }
+
+  const wrapper = shallow(<ContentTypeBtn {...props} />)
+
+  describe('static design', () => {
+    it(`the root div should have the class: ${props.customClass}`, () =>
+      expect(wrapper.find(`div.contentTypeBtn.${props.customClass}`).length).to.equal(1)
+    )
+
+    it(`the background color should be: ${props.hexcolor}`, () =>
+      expect(wrapper.find(`div.contentTypeBtn`).prop('style').backgroundColor).to.equal(props.hexcolor)
+    )
+
+    it(`a div should have the class: ${props.customClass}__text`, () =>
+      expect(wrapper.find(`div.${props.customClass}__text`).length).to.equal(1)
+    )
+
+    it(`a div should have the class: ${props.customClass}__text__icon`, () =>
+      expect(wrapper.find(`div.${props.customClass}__text__icon`).length).to.equal(1)
+    )
+
+    it(`a div should have the class: ${props.customClass}__text__title`, () =>
+      expect(wrapper.find(`div.${props.customClass}__text__title`).length).to.equal(1)
+    )
+
+    it(`should display the creationLabel: ${props.creationLabel}`, () =>
+      expect(wrapper.find(`div.${props.customClass}__text__title`)).to.text().equal(props.creationLabel)
+    )
+
+    it(`should display the icon: ${props.faIcon}`, () =>
+      expect(wrapper.find(`div.${props.customClass}__text__icon > i.fa-${props.faIcon}`).length).to.equal(1)
+    )
+  })
+
+  describe('handler', () => {
+    it('onClickBtnCallBack should be called when the root div is clicked', () => {
+      wrapper.find(`div.contentTypeBtn`).simulate('click')
+      expect(onClickBtnCallBack.called).to.equal(true)
+    })
+  })
+})
diff --git a/frontend/test/src/component/DragHandle.spec.js b/frontend/test/src/component/DragHandle.spec.js
new file mode 100644
index 0000000000..f5f86e6edb
--- /dev/null
+++ b/frontend/test/src/component/DragHandle.spec.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { DragHandle } from '../../../src/component/DragHandle.jsx'
+
+describe('<DragHandle />', () => {
+  const props = {
+    connectDragSource: () => {},
+    customClass: 'randomCustomClass',
+    title: 'randomTitle',
+    style: {
+      color: '#ffffff'
+    }
+  }
+
+  const wrapper = shallow(<DragHandle {...props} />)
+
+  describe('static design', () => {
+    it(`should have the customClass: ${props.customClass}`, () =>
+      expect(wrapper.find(`div.dragHandle.${props.customClass}`).length).to.equal(1)
+    )
+
+    it(`the div should have the title: ${props.title}`, () =>
+      expect(wrapper.find('div.dragHandle').prop('title')).to.equal(props.title)
+    )
+
+    it('the div should have the proper style object', () =>
+      expect(wrapper.find('div.dragHandle').prop('style')).to.equal(props.style)
+    )
+  })
+})
diff --git a/frontend/test/src/component/DropdownCreateButton.spec.js b/frontend/test/src/component/DropdownCreateButton.spec.js
new file mode 100644
index 0000000000..b8d6c9ae95
--- /dev/null
+++ b/frontend/test/src/component/DropdownCreateButton.spec.js
@@ -0,0 +1,42 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { DropdownCreateButton as DropdownCreateButtonWithoutHOC } from '../../../src/component/common/Input/DropdownCreateButton.jsx'
+import sinon from 'sinon'
+import { appList } from '../../hocMock/redux/appList/appList.js'
+
+describe('<DropdownCreateButton />', () => {
+  const onClickCreateContentCallBack = sinon.stub()
+
+  const props = {
+    availableApp: appList,
+    onClickCreateContent: onClickCreateContentCallBack,
+    parentClass: 'randomParentClass',
+    customClass: 'randomCustomClass',
+    folderId: 1
+  }
+
+  const wrapper = shallow(<DropdownCreateButtonWithoutHOC {...props} t={key => key} />)
+
+  describe('static design', () => {
+    it(`the root div should have the parentClass: ${props.parentClass}`, () =>
+      expect(wrapper.find(`div.${props.parentClass}`).length).to.equal(1)
+    )
+
+    it(`the root div should have the customClass: ${props.customClass}`, () =>
+      expect(wrapper.find(`div.${props.customClass}`).length).to.equal(1)
+    )
+
+    it(`the button should have the class: ${props.parentClass}__label`, () =>
+      expect(wrapper.find(`button.${props.parentClass}__label`).length).to.equal(1)
+    )
+
+    it(`a div inside the button should have the class: ${props.parentClass}__label__text`, () =>
+      expect(wrapper.find(`button > div.${props.parentClass}__label__text`).length).to.equal(1)
+    )
+
+    it(`a div inside the the root div should have the class: ${props.parentClass}__setting`, () =>
+      expect(wrapper.find(`div.${props.parentClass} > div.${props.parentClass}__setting`).length).to.equal(1)
+    )
+  })
+})
diff --git a/frontend/test/src/component/DropdownLang.spec.js b/frontend/test/src/component/DropdownLang.spec.js
new file mode 100644
index 0000000000..a3b4b473a0
--- /dev/null
+++ b/frontend/test/src/component/DropdownLang.spec.js
@@ -0,0 +1,62 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import DropdownLang from '../../../src/component/Header/MenuActionListItem/DropdownLang.jsx'
+import sinon from 'sinon'
+
+describe('<DropdownLang />', () => {
+  const onChangeLangCallBack = sinon.stub()
+
+  const props = {
+    langList: [{
+      id: 'fr',
+      label: 'French',
+      icon: 'iconFrench'
+    }, {
+      id: 'en',
+      label: 'English',
+      icon: 'iconEnglish'
+    }, {
+      id: 'cn',
+      label: '中文',
+      icon: 'iconChinese'
+    }],
+    langActiveId: 'fr',
+    onChangeLang: onChangeLangCallBack
+  }
+
+  const wrapper = shallow(<DropdownLang {...props} />)
+
+  describe('static design', () => {
+    it(`should display the icon of the current active lang: ${props.langActiveId}`, () =>
+      expect(wrapper.find('img.dropdownlang__dropdown__btnlanguage__imgselected').prop('src')).to.equal(props.langList[0].icon)
+    )
+
+    it(`should display the label of the current active lang: ${props.langActiveId}`, () =>
+      expect(wrapper.find('button.dropdownlang__dropdown__btnlanguage')).to.text().contains(props.langList[0].label)
+    )
+
+    it(`should display ${props.langList.length - 1} dropdown link for the others languages`, () => {
+      expect(wrapper.find('div.dropdownlang__dropdown__subdropdown__link').length).to.equal(props.langList.length - 1)
+    })
+
+    it(`should display the label of each other language`, () => {
+      for (let i = 1; i < props.langList.length; i++) {
+        expect(wrapper.find('div.dropdownlang__dropdown__subdropdown__link').at(i - 1)).to.text().equal(props.langList[i].label)
+      }
+    })
+
+    it(`should display the icon of each other language`, () => {
+      for (let i = 1; i < props.langList.length; i++) {
+        expect(wrapper.find('img.dropdownlang__dropdown__subdropdown__link__flag').at(i - 1).prop('src')).to.equal(props.langList[i].icon)
+      }
+    })
+  })
+
+  describe('handler', () => {
+    it('onChangeLangCallBack should be called when a language link is clicked', () => {
+      wrapper.find('div.dropdownlang__dropdown__subdropdown__link').at(0).simulate('click')
+      expect(onChangeLangCallBack.called).to.equal(true)
+    })
+  })
+})
diff --git a/frontend/test/src/component/FlashMessage.spec.js b/frontend/test/src/component/FlashMessage.spec.js
new file mode 100644
index 0000000000..d2ad22c8a0
--- /dev/null
+++ b/frontend/test/src/component/FlashMessage.spec.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { FlashMessage as FlashMessageWithoutHOC } from '../../../src/component/FlashMessage.jsx'
+import sinon from 'sinon'
+
+describe('<FlashMessage />', () => {
+  const removeFlashMessageCallBack = sinon.stub()
+
+  const props = {
+    flashMessage: [{
+      message: 'randomMessage',
+      type: 'info'
+    }],
+    removeFlashMessage: removeFlashMessageCallBack
+  }
+
+  const wrapper = shallow(<FlashMessageWithoutHOC {...props} t={key => key} />)
+
+  describe('static design', () => {
+    it(`should display the message: ${props.flashMessage[0].message} in a div`, () =>
+      expect(wrapper.find('div.flashmessage__container__content__text__paragraph')).to.text().equal(props.flashMessage[0].message)
+    )
+
+    it('should remove the flash message when flashMessage is empty', () => {
+      wrapper.setProps({ flashMessage: [] })
+      expect(wrapper.find('div.flashmessage__container').length).to.equal(0)
+      wrapper.setProps({ flashMessage: props.flashMessage })
+    })
+  })
+
+  describe('handler', () => {
+    it('removeFlashMessageCallBack should be called when the close button is clicked', () => {
+      wrapper.find('div.flashmessage__container__close__icon').simulate('click')
+      expect(removeFlashMessageCallBack.called).to.equal(true)
+    })
+  })
+})
diff --git a/frontend/test/src/component/Help.spec.js b/frontend/test/src/component/Help.spec.js
new file mode 100644
index 0000000000..bced569546
--- /dev/null
+++ b/frontend/test/src/component/Help.spec.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import { expect } from 'chai'
+import { mount } from 'enzyme'
+import Help from '../../../src/component/Header/MenuActionListItem/Help.jsx'
+import sinon from 'sinon'
+
+describe('<Help />', () => {
+  const onClickHelpCallBack = sinon.stub()
+
+  const props = {
+    onClickHelp: onClickHelpCallBack
+  }
+
+  const wrapper = mount(<Help {...props} />)
+
+  describe('handler', () => {
+    it('onClickHelpCallBack should be called when the button is clicked', () => {
+      wrapper.find('button').simulate('click')
+      expect(onClickHelpCallBack.called).to.equal(true)
+    })
+  })
+})
diff --git a/frontend/test/src/component/HomeHasWorkspace.spec.js b/frontend/test/src/component/HomeHasWorkspace.spec.js
new file mode 100644
index 0000000000..e6e58df0ea
--- /dev/null
+++ b/frontend/test/src/component/HomeHasWorkspace.spec.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { HomeHasWorkspace as HomeHasWorkspaceWithoutHOC } from '../../../src/component/Home/HomeHasWorkspace.jsx'
+
+describe('<HomeHasWorkspace />', () => {
+  const props = {
+    user: {
+      public_name: 'randomPublicName'
+    }
+  }
+
+  const wrapper = shallow(<HomeHasWorkspaceWithoutHOC {...props} t={key => key} />)
+
+  describe('static design', () => {
+    it(`should display the publicName: ${props.user.public_name} in a div`, () =>
+      expect(wrapper.find(`div.homepagecard__user__publicname`)).to.text().equal(props.user.public_name)
+    )
+  })
+})
diff --git a/frontend/test/src/component/HomeNoWorkspace.spec.js b/frontend/test/src/component/HomeNoWorkspace.spec.js
new file mode 100644
index 0000000000..f45caafa6b
--- /dev/null
+++ b/frontend/test/src/component/HomeNoWorkspace.spec.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { HomeNoWorkspace as HomeNoWorkspaceWithoutHOC } from '../../../src/component/Home/HomeNoWorkspace.jsx'
+import sinon from 'sinon'
+
+describe('<HomeNoWorkspace />', () => {
+  const onClickCreateWorkspaceCallBack = sinon.stub()
+
+  const props = {
+    canCreateWorkspace: true,
+    onClickCreateWorkspace: onClickCreateWorkspaceCallBack
+  }
+
+  const wrapper = shallow(<HomeNoWorkspaceWithoutHOC {...props} t={key => key} />)
+
+  describe('static design', () => {
+    it(`if canCreateWorkspace is true it should contains a div with a message to create a new Workspace`, () =>
+      expect(wrapper.find(`div.homepagecard__text`)).to.text().equal('You will create your first shared space')
+    )
+
+    it(`if canCreateWorkspace is true it should display a button to create a new Workspace`, () =>
+      expect(wrapper.find('button.homepagecard__btn').length).to.equal(1)
+    )
+
+    it('if canCreateWorkspace is false it should not display a button to create a new Workspace', () => {
+      wrapper.setProps({ canCreateWorkspace: false })
+      expect(wrapper.find('button.homepagecard__btn').length).to.equal(0)
+      wrapper.setProps({ canCreateWorkspace: props.canCreateWorkspace })
+    })
+
+    it('if canCreateWorkspace is false it should contains a div with a message to contact administrator', () => {
+      wrapper.setProps({ canCreateWorkspace: false })
+      expect(wrapper.find('div.homepagecard__text__user__top').length).to.equal(1)
+      wrapper.setProps({ canCreateWorkspace: props.canCreateWorkspace })
+    })
+  })
+
+  describe('handler', () => {
+    it('onClickCreateWorkspaceCallBack should be called when the button to create a workspace is clicked', () => {
+      wrapper.find('button').simulate('click')
+      expect(onClickCreateWorkspaceCallBack.called).to.equal(true)
+    })
+  })
+})
diff --git a/frontend/test/src/component/InputGroupTest.spec.js b/frontend/test/src/component/InputGroupTest.spec.js
new file mode 100644
index 0000000000..c0d3e9f865
--- /dev/null
+++ b/frontend/test/src/component/InputGroupTest.spec.js
@@ -0,0 +1,74 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import InputGroupText from '../../../src/component/common/Input/InputGroupText.jsx'
+import sinon from 'sinon'
+
+describe('<InputGroupText />', () => {
+  const onChangeCallBack = sinon.stub()
+  const onKeyDownCallBack = sinon.stub()
+
+  const props = {
+    parentClassName: 'randomParentClassName',
+    value: 'randomValue',
+    type: 'text',
+    customClass: 'randomCustomClass',
+    icon: 'randomIcon',
+    placeHolder: 'randomPlaceHolder',
+    invalidMsg: 'randomInvalidMsg',
+    isInvalid: true,
+    onChange: onChangeCallBack,
+    onKeyDown: onKeyDownCallBack,
+    maxLength: 10
+  }
+
+  const wrapper = shallow(
+    <InputGroupText {...props} />
+  )
+
+  describe('static design', () => {
+    it(`the root div should have the parent class: ${props.parentClassName}`, () =>
+      expect(wrapper.find(`div.${props.parentClassName}`).length).to.equal(1)
+    )
+
+    it(`should include a div with the class: ${props.parentClassName}__msgerror`, () =>
+      expect(wrapper.find(`div.${props.parentClassName}__msgerror`).length).to.equal(1)
+    )
+
+    it(`should include a input with the class: ${props.parentClassName}__input`, () =>
+      expect(wrapper.find(`input.${props.parentClassName}__input`).length).to.equal(1)
+    )
+
+    it(`should include a input with the class: is-invalid`, () =>
+      expect(wrapper.find(`input.${props.parentClassName}__input.is-invalid`).length).to.equal(1)
+    )
+
+    it(`should display the icon: ${props.icon}`, () =>
+      expect(wrapper.find(`i.fa.${props.icon}`).length).to.equal(1)
+    )
+
+    it(`the input should have the value: ${props.value}`, () =>
+      expect(wrapper.find(`input`).prop('value')).to.equal(props.value)
+    )
+
+    it(`the input should have the placeHolder: ${props.placeHolder}`, () =>
+      expect(wrapper.find(`input`).prop('placeholder')).to.equal(props.placeHolder)
+    )
+
+    it(`the input should have the type: ${props.type}`, () =>
+      expect(wrapper.find(`input`).prop('type')).to.equal(props.type)
+    )
+  })
+
+  describe('handlers', () => {
+    it('onChangeCallBack should be call when input is onChange', () => {
+      wrapper.find('input').simulate('change')
+      expect(onChangeCallBack.called).to.equal(true)
+    })
+
+    it('onKeyDownCallBack should be call when key is down', () => {
+      wrapper.find('input').simulate('keydown', { keyCode: 13 })
+      expect(onKeyDownCallBack.called).to.equal(true)
+    })
+  })
+})
diff --git a/frontend/test/src/component/LoginLogo.spec.js b/frontend/test/src/component/LoginLogo.spec.js
new file mode 100644
index 0000000000..544edca77a
--- /dev/null
+++ b/frontend/test/src/component/LoginLogo.spec.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import LoginLogo from '../../../src/component/Login/LoginLogo.jsx'
+
+describe('<LoginLogo />', () => {
+  const props = {
+    logoSrc: 'randomlogoSrc',
+    customClass: 'randomCustomClass'
+  }
+
+  const wrapper = shallow(<LoginLogo {...props} />)
+
+  describe('static design', () => {
+    it(`the div should have the class: ${props.customClass}`, () =>
+      expect(wrapper.find(`div.${props.customClass}`).length).to.equal(1)
+    )
+
+    it(`img should have the src: ${props.logoSrc}`, () =>
+      expect(wrapper.find('img').prop('src')).to.equal(props.logoSrc)
+    )
+  })
+})
diff --git a/frontend/test/src/component/Logo.spec.js b/frontend/test/src/component/Logo.spec.js
new file mode 100644
index 0000000000..7b5beb451d
--- /dev/null
+++ b/frontend/test/src/component/Logo.spec.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import Logo from '../../../src/component/Header/Logo.jsx'
+
+describe('<Logo />', () => {
+  const props = {
+    logoSrc: 'randomLogoSrc',
+    to: 'randomTo'
+  }
+
+  const wrapper = shallow(<Logo {...props} />)
+
+  describe('static design', () => {
+    it(`the Link should have the to property equal: ${props.to}`, () =>
+      expect(wrapper.find('.header__logo').prop('to')).to.equal(props.to)
+    )
+
+    it(`the img should have the src property equal: ${props.logoSrc}`, () =>
+      expect(wrapper.find('img.header__logo__img').prop('src')).to.equal(props.logoSrc)
+    )
+  })
+})
diff --git a/frontend/test/src/component/MemberList.spec.js b/frontend/test/src/component/MemberList.spec.js
new file mode 100644
index 0000000000..ebd6b0c8b7
--- /dev/null
+++ b/frontend/test/src/component/MemberList.spec.js
@@ -0,0 +1,81 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { MemberList as MemberListWithoutHOC } from '../../../src/component/Dashboard/MemberList.jsx'
+import { ROLE } from 'tracim_frontend_lib'
+import sinon from 'sinon'
+
+describe('<MemberList />', () => {
+  const onClickAddMemberBtnCallBack = sinon.stub()
+  const onClickRemoveMemberCallBack = sinon.stub()
+
+  const props = {
+    memberList: [{
+      id: 1,
+      role: 'workspace-manager',
+      doNotify: true,
+      publicName: 'randomPublicName1'
+    }, {
+      id: 0,
+      role: 'content-manager',
+      doNotify: true,
+      publicName: 'randomPublicName2'
+    }],
+    roleList: [{
+      slug: 'workspace-manager'
+    }, {
+      slug: 'content-manager'
+    }],
+    loggedUser: {
+      user_id: 1
+    },
+    userRoleIdInWorkspace: ROLE.workspaceManager.id,
+    displayNewMemberForm: false,
+    onClickAddMemberBtn: onClickAddMemberBtnCallBack,
+    onClickRemoveMember: onClickRemoveMemberCallBack
+  }
+
+  const wrapper = shallow(<MemberListWithoutHOC {...props} t={key => key} />)
+
+  describe('static design', () => {
+    it(`should display ${props.memberList.length} members infos`, () =>
+      expect(wrapper.find('li.memberlist__list__item').length).to.equal(props.memberList.length)
+    )
+
+    it(`should display the publicName of each member in memberList`, () => {
+      for (let i = 0; i < props.memberList.length; i++) {
+        expect(wrapper.find(`div.memberlist__list__item__info__name`).at(i)).to.text().equal(props.memberList[i].publicName)
+      }
+    })
+
+    it('should not display the adding button when userRoleIdInWorkspace > 1', () => {
+      wrapper.setProps({ userRoleIdInWorkspace: ROLE.reader.id })
+      expect(wrapper.find('div.memberlist__btnadd').length).to.equal(0)
+      wrapper.setProps({ userRoleIdInWorkspace: props.userRoleIdInWorkspace })
+    })
+
+    it('should not display the delete member button when userRoleIdInWorkspace > 1', () => {
+      wrapper.setProps({ userRoleIdInWorkspace: ROLE.reader.id })
+      expect(wrapper.find('div.memberlist__list__item__delete').length).to.equal(0)
+      wrapper.setProps({ userRoleIdInWorkspace: props.userRoleIdInWorkspace })
+    })
+
+    it(`should not display the memberList when displayNewMemberForm is true`, () => {
+      wrapper.setProps({ displayNewMemberForm: true })
+      expect(wrapper.find('.memberlist__list').length).to.equal(0)
+      wrapper.setProps({ displayNewMemberForm: props.displayNewMemberForm })
+    })
+  })
+
+  describe('handlers', () => {
+    it(`onClickAddMemberBtnCallBack should be called when add button is clicked`, () => {
+      wrapper.find('div.memberlist__btnadd').simulate('click')
+      expect(onClickAddMemberBtnCallBack.called).to.equal(true)
+    })
+
+    it('onClickRemoveMemberCallBack should be called when a delete member button is clicked', () => {
+      wrapper.find('div.memberlist__list__item__delete').first().simulate('click')
+      expect(onClickRemoveMemberCallBack.called).to.equal(true)
+    })
+  })
+})
diff --git a/frontend/test/src/component/MenuProfil.spec.js b/frontend/test/src/component/MenuProfil.spec.js
new file mode 100644
index 0000000000..8a5d41b74d
--- /dev/null
+++ b/frontend/test/src/component/MenuProfil.spec.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { MenuProfil as MenuProfilWithoutHOC } from '../../../src/component/Header/MenuActionListItem/MenuProfil.jsx'
+import sinon from 'sinon'
+
+describe('<MenuProfil />', () => {
+  const onClickLogoutCallBack = sinon.stub()
+
+  const props = {
+    user: {
+      public_name: 'randomPublicName',
+      logged: true
+    },
+    onClickLogout: onClickLogoutCallBack
+  }
+
+  const wrapper = shallow(<MenuProfilWithoutHOC {...props} t={key => key} />)
+
+  describe('static design', () => {
+    it('should display the public name in a div', () =>
+      expect(wrapper.find(`div.menuprofil__dropdown__name__text`)).to.text().equal(props.user.public_name)
+    )
+  })
+
+  describe('handler', () => {
+    it('onClickLogoutCallBack should be called when logout div is clicked', () => {
+      wrapper.find('div.menuprofil__dropdown__setting__link').simulate('click')
+      expect(onClickLogoutCallBack.called).to.equal(true)
+    })
+  })
+})
diff --git a/frontend/test/src/component/MenuSubComponent.spec.js b/frontend/test/src/component/MenuSubComponent.spec.js
new file mode 100644
index 0000000000..4efa969726
--- /dev/null
+++ b/frontend/test/src/component/MenuSubComponent.spec.js
@@ -0,0 +1,47 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import { MenuSubComponent as MenuSubComponentWithoutHOC } from '../../../src/component/Account/MenuSubComponent.jsx'
+
+describe('<MenuSubComponent />', () => {
+  const onClickMenuItemCallBack = sinon.stub()
+
+  const props = {
+    menu: [{
+      name: 'randomItem1',
+      label: 'randomLabel1',
+      active: true
+    }, {
+      name: 'randomItem2',
+      label: 'randomLabel2',
+      active: false
+    }],
+    onClickMenuItem: onClickMenuItemCallBack
+  }
+
+  const wrapper = shallow(<MenuSubComponentWithoutHOC {...props} t={key => key} />)
+
+  describe('static design', () => {
+    it(`should render ${props.menu.length} items`, () => {
+      expect(wrapper.find('li').length).to.equal(props.menu.length)
+    })
+
+    it(`should display the name each items (li)`, () => {
+      for (let i = 0; i < props.menu.length; i++) {
+        expect(wrapper.find('div.menusubcomponent__list__item__link').at(i)).to.have.text().equal(props.menu[i].label)
+      }
+    })
+
+    it('active item in menu should have the class primaryColorBgLighten', () => {
+      expect(wrapper.find('li.menusubcomponent__list__item.primaryColorBgLighten').length).to.equal(1)
+    })
+  })
+
+  describe('handlers', () => {
+    it('onClickMenuItemCallBack should be called when an item is clicked', () => {
+      wrapper.find('li').at(0).simulate('click')
+      expect(onClickMenuItemCallBack.called).to.equal(true)
+    })
+  })
+})
diff --git a/frontend/test/src/component/MoreInfo.spec.js b/frontend/test/src/component/MoreInfo.spec.js
new file mode 100644
index 0000000000..00c0f26a94
--- /dev/null
+++ b/frontend/test/src/component/MoreInfo.spec.js
@@ -0,0 +1,53 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import MoreInfo from '../../../src/component/Dashboard/MoreInfo.jsx'
+import sinon from 'sinon'
+
+describe('<MoreInfo />', () => {
+  const onClickToggleWebdavCallBack = sinon.stub()
+  const onClickToggleCalendarCallBack = sinon.stub()
+
+  const props = {
+    onClickToggleWebdav: onClickToggleWebdavCallBack,
+    onClickToggleCalendar: onClickToggleCalendarCallBack,
+    displayWebdavBtn: true,
+    displayCalendarBtn: true
+  }
+
+  const wrapper = shallow(<MoreInfo {...props} t={key => key} />)
+
+  describe('static design', () => {
+    it(`should display the calendar information when displayCalendarBtn is true`, () =>
+      expect(wrapper.find(`div.moreinfo__calendar__information`).length).to.equal(1)
+    )
+
+    it(`should not display the calendar information when displayCalendarBtn is false`, () => {
+      wrapper.setProps({ displayCalendarBtn: false })
+      expect(wrapper.find(`div.moreinfo__calendar__information`).length).to.equal(0)
+      wrapper.setProps({ displayCalendarBtn: props.displayCalendarBtn })
+    })
+
+    it(`should display the webDav information when displayWebdavBtn is true`, () =>
+      expect(wrapper.find(`div.moreinfo__webdav__information`).length).to.equal(1)
+    )
+
+    it(`should not display the webDav information when displayWebdavBtn is false`, () => {
+      wrapper.setProps({ displayWebdavBtn: false })
+      expect(wrapper.find(`div.moreinfo__webdav__information`).length).to.equal(0)
+      wrapper.setProps({ displayWebdavBtn: props.displayWebdavBtn })
+    })
+  })
+
+  describe('handlers', () => {
+    it(`onClickToggleWebdav should be called when webdav btn is clicked`, () => {
+      wrapper.find('div.moreinfo__webdav__btn').simulate('click')
+      expect(onClickToggleWebdavCallBack.called).to.equal(true)
+    })
+
+    it(`onClickToggleCalendar should be called when calendar btn is clicked`, () => {
+      wrapper.find('div.moreinfo__calendar__btn').simulate('click')
+      expect(onClickToggleCalendarCallBack.called).to.equal(true)
+    })
+  })
+})
diff --git a/frontend/test/src/component/Notification.spec.js b/frontend/test/src/component/Notification.spec.js
new file mode 100644
index 0000000000..e8ef8dc2c3
--- /dev/null
+++ b/frontend/test/src/component/Notification.spec.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import { Notification as NotificationWithoutHOC } from '../../../src/component/Account/Notification.jsx'
+
+describe('<Notification />', () => {
+  const onChangeSubscriptionNotifCallBack = sinon.stub()
+
+  const props = {
+    userLoggedId: 0,
+    workspaceList: [{
+      memberList: [{
+        id: 0,
+        role: 'content-manager',
+        doNotify: true
+      }],
+      id: 1,
+      label: 'randomLabel1'
+    }, {
+      memberList: [{
+        id: 1,
+        role: 'workspace-manager',
+        doNotify: true
+      }, {
+        id: 0,
+        role: 'content-manager',
+        doNotify: true
+      }],
+      id: 2,
+      label: 'randomLabel2'
+    }],
+    onChangeSubscriptionNotif: onChangeSubscriptionNotifCallBack
+  }
+
+  const wrapper = shallow(<NotificationWithoutHOC {...props} t={key => key} />)
+
+  describe('static design', () => {
+    it(`should display ${props.workspaceList.length} workspace`, () => {
+      expect(wrapper.find('div.notification__table__role').length).to.equal(props.workspaceList.length)
+    })
+
+    it(`should display labels of workspaces`, () => {
+      for (let i = 0; i < props.workspaceList.length; i++) {
+        expect(wrapper.find('div.notification__table__wksname').at(i)).to.text().equal(props.workspaceList[i].label)
+      }
+    })
+  })
+})
diff --git a/frontend/test/src/component/OpenContentApp.spec.js b/frontend/test/src/component/OpenContentApp.spec.js
new file mode 100644
index 0000000000..a751a60bc1
--- /dev/null
+++ b/frontend/test/src/component/OpenContentApp.spec.js
@@ -0,0 +1,72 @@
+import React from 'react'
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { mount } from 'enzyme'
+import { OpenContentApp as OpenContentAppWithoutHOC } from '../../../src/component/Workspace/OpenContentApp.jsx'
+import { contentType } from '../../hocMock/redux/contentType/contentType.js'
+import { user } from '../../hocMock/redux/user/user.js'
+import { firstWorkspace } from '../../fixture/workspace/firstWorkspace.js'
+import {
+  withRouterMock
+} from '../../hocMock/withRouter'
+import { connectMock } from '../../hocMock/store'
+
+describe('<OpenContentApp />', () => {
+  const dispatchCustomEventCallBack = sinon.stub()
+  const updateAppOpenedTypeCallBack = sinon.stub()
+  const renderAppFeatureCallBack = sinon.stub()
+
+  const props = {
+    workspaceId: 1,
+    appOpenedType: 'html-document',
+    renderAppFeature: renderAppFeatureCallBack,
+    dispatchCustomEvent: dispatchCustomEventCallBack,
+    match: {
+      params: {
+        idws: 1,
+        idcts: 1,
+        type: 'html-document'
+      }
+    },
+    updateAppOpenedType: updateAppOpenedTypeCallBack
+  }
+
+  const mapStateToProps = { contentType, user, currentWorkspace: firstWorkspace }
+
+  const ComponentWithHoc = withRouterMock(connectMock(mapStateToProps)(OpenContentAppWithoutHOC))
+
+  const wrapper = mount(<ComponentWithHoc {...props} />)
+
+  const wrapperInstance = wrapper.find(OpenContentAppWithoutHOC)
+
+  describe('intern function', () => {
+    it('openContentApp() should call dispatchCustomEventCallBack to reload content when the app is already open', () => {
+      wrapperInstance.instance().openContentApp()
+      expect(dispatchCustomEventCallBack.called).to.equal(true)
+      expect(renderAppFeatureCallBack.called).to.equal(false)
+      expect(updateAppOpenedTypeCallBack.called).to.equal(false)
+      dispatchCustomEventCallBack.resetHistory()
+    })
+
+    it('openContentApp() should call updateAppOpenedTypeCallBack and renderAppFeatureCallBack to open the new App and load his content', () => {
+      wrapper.setProps({ appOpenedType: 'folder' })
+      wrapperInstance.instance().openContentApp()
+      expect(renderAppFeatureCallBack.called).to.equal(true)
+      expect(updateAppOpenedTypeCallBack.called).to.equal(true)
+      expect(dispatchCustomEventCallBack.called).to.equal(true)
+      renderAppFeatureCallBack.resetHistory()
+      updateAppOpenedTypeCallBack.resetHistory()
+      dispatchCustomEventCallBack.resetHistory()
+      wrapper.setProps({ appOpenedType: props.appOpenedType })
+    })
+
+    it('openContentApp() should not call callback when the workspaceId is undefined', () => {
+      wrapper.setProps({ workspaceId: undefined })
+      wrapperInstance.instance().openContentApp()
+      expect(renderAppFeatureCallBack.called).to.equal(false)
+      expect(updateAppOpenedTypeCallBack.called).to.equal(false)
+      expect(dispatchCustomEventCallBack.called).to.equal(false)
+      wrapper.setProps({ workspaceId: props.workspaceId })
+    })
+  })
+})
diff --git a/frontend/test/src/component/OpenCreateContentApp.spec.js b/frontend/test/src/component/OpenCreateContentApp.spec.js
new file mode 100644
index 0000000000..5a8c4a2c0a
--- /dev/null
+++ b/frontend/test/src/component/OpenCreateContentApp.spec.js
@@ -0,0 +1,53 @@
+import React from 'react'
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { mount } from 'enzyme'
+import { OpenCreateContentApp as OpenCreateContentAppWithoutHOC } from '../../../src/component/Workspace/OpenCreateContentApp.jsx'
+import { contentType } from '../../hocMock/redux/contentType/contentType.js'
+import { user } from '../../hocMock/redux/user/user.js'
+import { connectMock } from '../../hocMock/store.js'
+import { withRouterMock } from '../../hocMock/withRouter.js'
+
+describe('<OpenCreateContentApp />', () => {
+  const renderAppPopupCreationCallBack = sinon.stub()
+
+  const props = {
+    workspaceId: 1,
+    renderAppPopupCreation: renderAppPopupCreationCallBack,
+    match: {
+      params: {
+        idws: 1,
+        idcts: 1,
+        type: 'html-document'
+      }
+    },
+    location: { parent_id: '' }
+  }
+
+  const mapStateToProps = {
+    user,
+    contentType
+  }
+
+  const ComponentWithHoc = withRouterMock(connectMock(mapStateToProps)(OpenCreateContentAppWithoutHOC))
+
+  const wrapper = mount(<ComponentWithHoc {...props} />)
+
+  const wrapperInstance = wrapper.find(OpenCreateContentAppWithoutHOC)
+
+  describe('intern function', () => {
+    it('openCreateContentApp() should call renderAppPopupCreationCallBack to open the creation popup', () => {
+      wrapperInstance.instance().openCreateContentApp()
+      expect(renderAppPopupCreationCallBack.called).to.equal(true)
+      renderAppPopupCreationCallBack.resetHistory()
+    })
+
+    it('openCreateContentApp() should not call renderAppPopupCreationCallBack to open the creation popup when workspaceId is undefined', () => {
+      wrapper.setProps({ workspaceId: undefined })
+      wrapperInstance.instance().openCreateContentApp()
+      expect(renderAppPopupCreationCallBack.called).to.equal(false)
+      renderAppPopupCreationCallBack.resetHistory()
+      wrapper.setProps({ workspaceId: props.workspaceId })
+    })
+  })
+})
diff --git a/frontend/test/src/component/Password.spec.js b/frontend/test/src/component/Password.spec.js
new file mode 100644
index 0000000000..a151440dcf
--- /dev/null
+++ b/frontend/test/src/component/Password.spec.js
@@ -0,0 +1,63 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { Password as PasswordWithoutHOC } from '../../../src/component/Account/Password.jsx'
+import sinon from 'sinon'
+
+describe('<Password />', () => {
+  const onClickSubmitCallBack = sinon.stub()
+  const dispatchMock = sinon.stub()
+
+  const props = {
+    onClickSubmit: onClickSubmitCallBack,
+    displayAdminInfo: false,
+    dispatch: dispatchMock
+  }
+
+  const wrapper = shallow(<PasswordWithoutHOC {...props} t={key => key} />)
+
+  describe('static design', () => {
+    it('should have one button', () => {
+      expect(wrapper.find('button').length).to.equal(1)
+    })
+  })
+
+  describe('handlers', () => {
+    it('onChange should change the state with the newPassword', () => {
+      const newPassword = 'newRandomPassWord'
+      wrapper.find('input.personaldata__form__txtinput').first().simulate('change', { target: { value: newPassword } })
+      expect(wrapper.state('oldPassword')).to.equal(newPassword)
+    })
+
+    it('onClickSubmitCallBack should not be called when the button is clicked but the new password is not valid', () => {
+      wrapper.find('button').simulate('click')
+      expect(onClickSubmitCallBack.called).to.equal(false)
+    })
+
+    it('onClickSubmitCallBack should be called when the button is clicked and the new password is valid', () => {
+      for (let i = 0; i < wrapper.find('input.personaldata__form__txtinput').length; i++) {
+        wrapper.find('input.personaldata__form__txtinput').at(i).simulate('change', { target: { value: 'newRandomPassWord' } })
+      }
+      wrapper.find('button').simulate('click')
+      expect(onClickSubmitCallBack.called).to.equal(true)
+    })
+  })
+
+  describe('intern functions', () => {
+    const randomPassword = 'newRandomPassWord'
+    it('handleChangeOldPassword should change the state', () => {
+      wrapper.instance().handleChangeOldPassword({ target: { value: randomPassword } })
+      expect(wrapper.state('oldPassword')).to.equal(randomPassword)
+    })
+
+    it('handleChangeNewPassword should change the state', () => {
+      wrapper.instance().handleChangeNewPassword({ target: { value: randomPassword } })
+      expect(wrapper.state('newPassword')).to.equal(randomPassword)
+    })
+
+    it('handleChangeNewPassword should change the state', () => {
+      wrapper.instance().handleChangeNewPassword2({ target: { value: randomPassword } })
+      expect(wrapper.state('newPassword2')).to.equal(randomPassword)
+    })
+  })
+})
diff --git a/frontend/test/src/component/PersonalData.spec.js b/frontend/test/src/component/PersonalData.spec.js
new file mode 100644
index 0000000000..e472df1a02
--- /dev/null
+++ b/frontend/test/src/component/PersonalData.spec.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import { PersonalData as PersonalDataWithoutHOC } from '../../../src/component/Account/PersonalData.jsx'
+
+describe('<PersonnalData />', () => {
+  const onClickSubmitCallBack = sinon.stub()
+
+  const props = {
+    onClickSubmit: onClickSubmitCallBack,
+    displayAdminInfo: false,
+    userAuthType: 'randomUserAuthType'
+  }
+
+  const wrapper = shallow(<PersonalDataWithoutHOC {...props} t={key => key} />)
+
+  describe('handlers', () => {
+    it('onClickSubmitCallBack should be called when the button is clicked and the new password is valid', () => {
+      for (let i = 0; i < wrapper.find('input.personaldata__form__txtinput').length; i++) {
+        wrapper.find('input.personaldata__form__txtinput').at(i).simulate('change', { target: { value: 'newRandomPassWord' } })
+      }
+      wrapper.find('button').simulate('click')
+      expect(onClickSubmitCallBack.called).to.equal(true)
+    })
+  })
+
+  describe('intern functions', () => {
+    const randomText = 'randomText'
+    it('handleChangeOldPassword should change the state', () => {
+      wrapper.instance().handleChangeName({ target: { value: randomText } })
+      expect(wrapper.state('newName')).to.equal(randomText)
+    })
+
+    it('handleChangeNewPassword should change the state', () => {
+      wrapper.instance().handleChangeEmail({ target: { value: randomText } })
+      expect(wrapper.state('newEmail')).to.equal(randomText)
+    })
+
+    it('handleChangeNewPassword should change the state', () => {
+      wrapper.instance().handleChangeCheckPassword({ target: { value: randomText } })
+      expect(wrapper.state('checkPassword')).to.equal(randomText)
+    })
+  })
+})
diff --git a/frontend/test/src/component/RecentActivity.spec.js b/frontend/test/src/component/RecentActivity.spec.js
new file mode 100644
index 0000000000..0af8843e1a
--- /dev/null
+++ b/frontend/test/src/component/RecentActivity.spec.js
@@ -0,0 +1,61 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { RecentActivity as RecentActivityWithoutHOC } from '../../../src/component/Dashboard/RecentActivity.jsx'
+import { contentType } from '../../hocMock/redux/contentType/contentType.js'
+import sinon from 'sinon'
+
+describe('<RecentActivity />', () => {
+  const onClickSeeMoreCallBack = sinon.stub()
+  const onClickEverythingAsReadCallBack = sinon.stub()
+
+  const props = {
+    recentActivityList: [{
+      type: 'contents/html-document',
+      label: 'randomHtmlLabel',
+      id: 1
+    }, {
+      type: 'file',
+      label: 'randomFileLabel',
+      id: 2
+    }, {
+      type: 'folder',
+      label: 'randomFolderLabel',
+      id: 3
+    }],
+    contentTypeList: contentType,
+    onClickSeeMore: onClickSeeMoreCallBack,
+    workspaceId: 1,
+    roleIdForLoggedUser: 8,
+    readByUserList: [2],
+    onClickEverythingAsRead: onClickEverythingAsReadCallBack
+  }
+
+  const wrapper = shallow(
+    <RecentActivityWithoutHOC {...props} t={key => key} />
+  )
+
+  describe('static design', () => {
+    it(`should display ${props.recentActivityList.length} activity items`, () =>
+      expect(wrapper.find('div.recentactivity__list__item__name').length).to.equal(props.recentActivityList.length)
+    )
+
+    it(`should display the label of each recent activity`, () => {
+      for (let i = 0; i < props.recentActivityList.length; i++) {
+        expect(wrapper.find('div.recentactivity__list__item__name').at(i)).to.text().contains(props.recentActivityList[i].label)
+      }
+    })
+  })
+
+  describe('handlers', () => {
+    it(`onClickEverythingAsReadCallBack should be called when the button is clicked`, () => {
+      wrapper.find(`button.recentactivity__header__allread`).simulate('click')
+      expect(onClickEverythingAsReadCallBack.called).to.equal(true)
+    })
+
+    it(`onClickSeeMoreCallBack should be called when the see more button is clicked`, () => {
+      wrapper.find(`button.recentactivity__more__btn`).simulate('click')
+      expect(onClickSeeMoreCallBack.called).to.equal(true)
+    })
+  })
+})
diff --git a/frontend/test/src/component/Search.spec.js b/frontend/test/src/component/Search.spec.js
new file mode 100644
index 0000000000..a5d25a540a
--- /dev/null
+++ b/frontend/test/src/component/Search.spec.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { Search as SearchWithoutHOC } from '../../../src/component/Header/Search.jsx'
+import sinon from 'sinon'
+
+describe('<Search />', () => {
+  const onClickSearchCallBack = sinon.stub()
+
+  const props = {
+    onClickSearch: onClickSearchCallBack
+  }
+
+  const wrapper = shallow(<SearchWithoutHOC {...props} t={key => key} />)
+
+  describe('intern functions', () => {
+    it('handleNewSearch should change his state', () => {
+      const randomValue = 'randomValue'
+      wrapper.instance().handleNewSearch({ target: { value: randomValue } })
+      expect(wrapper.state('searchedKeywords')).to.equal(randomValue)
+    })
+
+    it('handleKeyDown should call handleClickSearch which call onClickSearchCallBack when the key is "Enter"', () => {
+      wrapper.instance().handleKeyDown({ key: 'Enter' })
+      expect(onClickSearchCallBack.called).to.equal(true)
+      onClickSearchCallBack.resetHistory()
+    })
+  })
+
+  describe('handler', () => {
+    it('onClickSearchCallBack should be call when the button is clicked', () => {
+      wrapper.find('button').simulate('click')
+      expect(onClickSearchCallBack.called).to.equal(true)
+    })
+  })
+})
diff --git a/frontend/test/src/component/SubDropdownCreateButton.spec.js b/frontend/test/src/component/SubDropdownCreateButton.spec.js
new file mode 100644
index 0000000000..373085a995
--- /dev/null
+++ b/frontend/test/src/component/SubDropdownCreateButton.spec.js
@@ -0,0 +1,53 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { SubDropdownCreateButton as SubDropdownCreateButtonWithoutHOC } from '../../../src/component/common/Input/SubDropdownCreateButton.jsx'
+import sinon from 'sinon'
+import { contentType } from '../../hocMock/redux/contentType/contentType.js'
+
+describe('<SubDropdownCreateButton />', () => {
+  const onClickCreateContentCallBack = sinon.stub()
+
+  const props = {
+    availableApp: contentType,
+    onClickCreateContent: onClickCreateContentCallBack,
+    folderId: 1
+  }
+
+  const wrapper = shallow(<SubDropdownCreateButtonWithoutHOC {...props} t={key => key} />)
+
+  describe('static design', () => {
+    it(`should display ${contentType.length} available app`, () =>
+      expect(wrapper.find('div.subdropdown__link').length).to.equal(contentType.length)
+    )
+
+    describe('each app should have his class in sub divs', () => {
+      for (let i = 0; i < contentType.length; i++) {
+        describe(contentType[i].slug, () => {
+          it(`app: ${contentType[i].slug} should have a div with the class: subdropdown__link__${contentType[i].slug}`, () =>
+            expect(wrapper.find('div.subdropdown__link__' + contentType[i].slug).length).to.equal(1)
+          )
+
+          it(`app: ${contentType[i].slug} should have a div with the class: subdropdown__link__${contentType[i].slug}__icon`, () =>
+            expect(wrapper.find(`div.subdropdown__link__${contentType[i].slug}__icon`).length).to.equal(1)
+          )
+
+          it(`app: ${contentType[i].slug} should have a div with the class: subdropdown__link__${contentType[i].slug}__text`, () =>
+            expect(wrapper.find(`div.subdropdown__link__${contentType[i].slug}__text`).length).to.equal(1)
+          )
+
+          it(`app: ${contentType[i].slug} should display his creationLabel: ${contentType[i].creationLabel}`, () =>
+            expect(wrapper.find(`div.subdropdown__link__${contentType[i].slug}__text`)).to.text().equal(contentType[i].creationLabel)
+          )
+        })
+      }
+    })
+
+    describe('handler', () => {
+      it('onClickCreateContentCallBack should be called when a app is clicked', () => {
+        wrapper.find('.subdropdown__link').first().simulate('click', { preventDefault: () => {}, stopPropagation: () => {} })
+        expect(onClickCreateContentCallBack.called).to.equal(true)
+      })
+    })
+  })
+})
diff --git a/frontend/test/src/component/Timezone.spec.js b/frontend/test/src/component/Timezone.spec.js
new file mode 100644
index 0000000000..2a2a59417b
--- /dev/null
+++ b/frontend/test/src/component/Timezone.spec.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { Timezone as TimezoneWithoutHOC } from '../../../src/component/Account/Timezone.jsx'
+import sinon from 'sinon'
+import Select from 'react-select'
+
+describe('<Timezone />', () => {
+  const onChangeTimezoneCallBack = sinon.stub()
+
+  const props = {
+    timezone: [{
+      place: 'Paris'
+    }, {
+      place: 'Berlin'
+    }],
+    onChangeTimezone: onChangeTimezoneCallBack,
+    timezoneUser: {
+      place: 'Paris'
+    }
+  }
+
+  const wrapper = shallow(<TimezoneWithoutHOC {...props} t={key => key} />)
+
+  describe('intern functions', () => {
+    describe('handleChangeTimezone', () => {
+      it('should call onChangeTimezoneCallback with the right param', () => {
+        wrapper.find(Select).dive().props().onChange({ place: 'Berlin' })
+        expect(onChangeTimezoneCallBack.getCall(0).args[0]).to.deep.equal({ place: 'Berlin' })
+      })
+
+      it('should call onChangeTimezoneCallback undefined param if the timezone do not exist in props.timezone', () => {
+        wrapper.find(Select).dive().props().onChange({ place: 'Rome' })
+        expect(onChangeTimezoneCallBack.getCall(1).args[0]).to.be.a('undefined')
+      })
+    })
+  })
+})
diff --git a/frontend/test/src/component/UserInfo.spec.js b/frontend/test/src/component/UserInfo.spec.js
new file mode 100644
index 0000000000..68a1e83f2d
--- /dev/null
+++ b/frontend/test/src/component/UserInfo.spec.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { UserInfo as UserInfoWithoutHOC } from '../../../src/component/Account/UserInfo.jsx'
+import { PROFILE } from 'tracim_frontend_lib'
+
+describe('<UserInfo />', () => {
+  const props = {
+    user: {
+      public_name: 'randomPublicName',
+      email: 'randomEmail',
+      profile: 'administrators'
+    }
+  }
+
+  const wrapper = shallow(<UserInfoWithoutHOC {...props} t={key => key} />)
+
+  describe('static design', () => {
+    it('should display the publicName of the user in a div', () =>
+      expect(wrapper.find('div.userinfo__name')).to.text().contains(props.user.public_name)
+    )
+
+    it('should display the email of the user in a <a/> tag', () =>
+      expect(wrapper.find('a.userinfo__email')).to.text().contains(props.user.email)
+    )
+
+    it(`should display the profile label of the user in a div`, () =>
+      expect(wrapper.find('div.userinfo__profile')).to.text().contains(PROFILE.administrator.label)
+    )
+
+    it(`should display the administrator icon`, () =>
+      expect(wrapper.find(`div.userinfo__profile > i.fa.fa-${PROFILE.administrator.faIcon}`).length).to.equal(1)
+    )
+
+    it(`the icon should have the administrator hexcolor`, () => {
+      expect(wrapper.find(`i.fa.fa-${PROFILE.administrator.faIcon}`).prop('style').color).to.equal(PROFILE.administrator.hexcolor)
+    })
+  })
+})
diff --git a/frontend/test/src/component/UserStatus.spec.js b/frontend/test/src/component/UserStatus.spec.js
new file mode 100644
index 0000000000..6a836af0ff
--- /dev/null
+++ b/frontend/test/src/component/UserStatus.spec.js
@@ -0,0 +1,83 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { UserStatus as UserStatusWithoutHOC } from '../../../src/component/Dashboard/UserStatus.jsx'
+import sinon from 'sinon'
+import { ROLE } from 'tracim_frontend_lib'
+
+describe('<UserStatus />', () => {
+  const onClickAddNotifyCallBack = sinon.stub()
+  const onClickRemoveNotifyCallBack = sinon.stub()
+  const testRole = ROLE.workspaceManager
+
+  const props = {
+    user: {
+      public_name: 'randomPublicName',
+      user_id: 1
+    },
+    displayNotifBtn: true,
+    curWs: {
+      memberList: [{
+        id: 1,
+        role: testRole.slug,
+        doNotify: true
+      }]
+    },
+    onClickAddNotify: onClickAddNotifyCallBack,
+    onClickRemoveNotify: onClickRemoveNotifyCallBack
+  }
+
+  const wrapper = shallow(<UserStatusWithoutHOC {...props} t={key => key} />)
+
+  describe('static design', () => {
+    it(`should display the user public name: ${props.user.public_name}`, () =>
+      expect(wrapper.find('div.userstatus__username')).to.text().equal(props.user.public_name)
+    )
+
+    it(`should display his role icon: ${testRole.faIcon}`, () =>
+      expect(wrapper.find(`div.userstatus__role__icon > i.fa.fa-${testRole.faIcon}`).length).to.equal(1)
+    )
+
+    it(`should display his role label: ${testRole.label}`, () =>
+      expect(wrapper.find('div.userstatus__role__text')).to.text().equal(testRole.label)
+    )
+
+    it(`role label should have the color: ${testRole.hexcolor}`, () =>
+      expect(wrapper.find('div.userstatus__role__text').prop('style').color).to.equal(testRole.hexcolor)
+    )
+
+    it(`role icon should have the color: ${testRole.hexcolor}`, () =>
+      expect(wrapper.find(`div.userstatus__role__icon > i.fa.fa-${testRole.faIcon}`).prop('style').color).to.equal(testRole.hexcolor)
+    )
+
+    it(`should not display the notification button when displayNotifBtn is false`, () => {
+      wrapper.setProps({ displayNotifBtn: false })
+      expect(wrapper.find('div.userstatus__notification').length).to.equal(0)
+      wrapper.setProps({ displayNotifBtn: props.displayNotifBtn })
+    })
+  })
+
+  describe('handlers', () => {
+    it(`onClickRemoveNotifyCallBack should be call when the notification button is clicked and doNotify is true`, () => {
+      wrapper.find('div.userstatus__notification').simulate('click')
+      expect(onClickRemoveNotifyCallBack.called).to.equal(true)
+      expect(onClickAddNotifyCallBack.called).to.equal(false)
+      onClickRemoveNotifyCallBack.resetHistory()
+    })
+
+    it(`onClickAddNotifyCallBack should be call when the notification button is clicked and doNotify is false`, () => {
+      wrapper.setProps({
+        curWs: {
+          memberList: [{
+            ...props.curWs.memberList,
+            doNotify: false
+          }]
+        }
+      })
+      wrapper.find('div.userstatus__notification').simulate('click')
+      expect(onClickRemoveNotifyCallBack.called).to.equal(false)
+      expect(onClickAddNotifyCallBack.called).to.equal(true)
+      wrapper.setProps({ curWs: props.curWs })
+    })
+  })
+})
diff --git a/frontend/test/src/component/WebdavInfo.spec.js b/frontend/test/src/component/WebdavInfo.spec.js
new file mode 100644
index 0000000000..c75e8373ae
--- /dev/null
+++ b/frontend/test/src/component/WebdavInfo.spec.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { WebdavInfo } from '../../../src/component/Dashboard/WebdavInfo.jsx'
+
+describe('<WebdavInfo />', () => {
+  const props = {
+    customClass: 'randomCustomClass',
+    introText: 'randomIntroText',
+    webdavText: 'randomWebdavText',
+    webdavUrl: 'randomWebdavUrl'
+  }
+
+  const wrapper = shallow(<WebdavInfo {...props} />)
+
+  describe('static design', () => {
+    it(`the root div should have the class: ${props.customClass}`, () =>
+      expect(wrapper.find(`div.webdavInfo.${props.customClass}`).length).to.equal(1)
+    )
+
+    it(`should display the introText: ${props.introText}`, () =>
+      expect(wrapper.find(`div.webdavInfo__content__text > div`)).to.text().contains(props.introText)
+    )
+
+    it(`should display the webdavText: ${props.webdavText}`, () =>
+      expect(wrapper.find(`a.webdavInfo__content__text__help`)).to.text().equal(props.webdavText)
+    )
+
+    it(`should display the webdavUrl: ${props.webdavText}`, () =>
+      expect(wrapper.find(`div.webdavInfo__content__link__url`)).to.text().equal(props.webdavUrl)
+    )
+  })
+})
diff --git a/frontend/test/component/WorkspaceListItem.spec.js b/frontend/test/src/component/WorkspaceListItem.spec.js
similarity index 74%
rename from frontend/test/component/WorkspaceListItem.spec.js
rename to frontend/test/src/component/WorkspaceListItem.spec.js
index 180bf2c37a..b83936d324 100644
--- a/frontend/test/component/WorkspaceListItem.spec.js
+++ b/frontend/test/src/component/WorkspaceListItem.spec.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import { expect, assert } from 'chai'
-import { mount, configure } from 'enzyme'
+import { assert } from 'chai'
+import { mount } from 'enzyme'
 // FIXME - CH - React DnD seems to have an issue preventing it from being used in unit test environment
 // Thread to follow: https://github.com/react-dnd/react-dnd/issues/1485
-// import { WorkspaceListItem  as WorkspaceListItemWithoutHOC } from '../../src/component/Sidebar/WorkspaceListItem.jsx'
-import { dropTargetMock } from '../hocMock/dragAndDrop.js'
-import { RouterMock , withRouterMock } from '../hocMock/withRouter.js'
-import { translateMock } from '../hocMock/translate.js'
-import { firstWorkspace } from '../fixture/workspace/firstWorkspace.js'
-// import { GLOBAL_primaryColor } from '../setup.js'
+// import { WorkspaceListItem as WorkspaceListItemWithoutHOC } from '../../../src/component/Sidebar/WorkspaceListItem.jsx'
+import { dropTargetMock } from '../../hocMock/dragAndDrop.js'
+import { RouterMock, withRouterMock } from '../../hocMock/withRouter.js'
+import { translateMock } from '../../hocMock/translate.js'
+import { firstWorkspace } from '../../fixture/workspace/firstWorkspace.js'
 import { ROLE } from 'tracim_frontend_lib'
 
 describe('<WorkspaceListItem />', () => {
@@ -43,10 +42,10 @@ describe('<WorkspaceListItem />', () => {
     )
   )
 
-  // const wrapper = mount(
-  //   <ComponentWithMockHOC {...props} />,
-  //   { wrappingComponent: RouterMock }
-  // )
+  mount(
+    <ComponentWithMockHOC {...props} />,
+    { wrappingComponent: RouterMock }
+  )
 
   it('force success', () => assert(true, true))
 
diff --git a/frontend/test/src/container/Account.spec.js b/frontend/test/src/container/Account.spec.js
new file mode 100644
index 0000000000..e4420fcd82
--- /dev/null
+++ b/frontend/test/src/container/Account.spec.js
@@ -0,0 +1,207 @@
+import React from 'react'
+import { expect } from 'chai'
+import { Account as AccountWithoutHOC } from '../../../src/container/Account.jsx'
+import sinon from 'sinon'
+import { user } from '../../hocMock/redux/user/user.js'
+import { appList } from '../../hocMock/redux/appList/appList.js'
+import { workspaceList } from '../../hocMock/redux/workspaceList/workspaceList.js'
+import {
+  BREADCRUMBS,
+  SET,
+  UPDATE,
+  USER_AGENDA_URL,
+  USER_EMAIL,
+  USER_NAME,
+  USER_WORKSPACE_DO_NOTIFY,
+  WORKSPACE_LIST_MEMBER,
+  ADD,
+  FLASH_MESSAGE,
+  REMOVE
+} from '../../../src/action-creator.sync.js'
+import { FETCH_CONFIG } from '../../../src/helper'
+import {
+  restoreHistoryCallBack,
+  isFunction
+} from '../../hocMock/helper'
+import { shallow } from 'enzyme'
+const nock = require('nock')
+
+describe('<Account />', () => {
+  const setWorkspaceListMemberListCallBack = sinon.stub()
+  const updateUserNameCallBack = sinon.stub()
+  const newFlashMessageWarningCallBack = sinon.stub()
+  const updateUserEmailCallBack = sinon.stub()
+  const updateUserWorkspaceSubscriptionNotifCallBack = sinon.stub()
+  const updateUserAgendaUrlCallBack = sinon.stub()
+  const setBreadcrumbsCallBack = sinon.stub()
+  const newFlashMessageInfoCallBack = sinon.stub()
+
+  const dispatchCallBack = (param) => {
+    if (isFunction(param)) {
+      return param(dispatchCallBack)
+    }
+    switch (param.type) {
+      case `${UPDATE}/${USER_NAME}`:
+        updateUserNameCallBack()
+        break
+      case `${UPDATE}/${USER_EMAIL}`:
+        updateUserEmailCallBack()
+        break
+      case `${SET}/${USER_AGENDA_URL}`:
+        updateUserAgendaUrlCallBack()
+        break
+      case `${UPDATE}/${USER_WORKSPACE_DO_NOTIFY}`:
+        updateUserWorkspaceSubscriptionNotifCallBack()
+        break
+      case `${SET}/${WORKSPACE_LIST_MEMBER}`:
+        setWorkspaceListMemberListCallBack()
+        break
+      case `${SET}/${BREADCRUMBS}`:
+        setBreadcrumbsCallBack()
+        break
+      case `${ADD}/${FLASH_MESSAGE}`:
+        if (param.msg.type === 'warning') {
+          newFlashMessageWarningCallBack()
+        } else {
+          newFlashMessageInfoCallBack()
+        }
+        break
+      case `${REMOVE}/${FLASH_MESSAGE}`:
+        break
+      default:
+        return param
+    }
+  }
+
+  const props = {
+    breadcrumbs: [],
+    user: user,
+    appList: appList,
+    workspaceList: workspaceList.workspaceList,
+    system: {
+      workspaceListLoaded: true,
+      config: {
+        email_notification_activated: true
+      }
+    },
+    t: key => key,
+    dispatch: dispatchCallBack
+  }
+
+  const wrapper = shallow(<AccountWithoutHOC {...props} />)
+
+  describe('internal functions', () => {
+    const invalidPassword = '0'
+
+    beforeEach(() => {
+      nock(FETCH_CONFIG.apiUrl)
+        .put('/users/me')
+        .reply(200, { })
+
+      nock(FETCH_CONFIG.apiUrl)
+        .put('/users/me/email')
+        .reply(200, { })
+
+      nock(FETCH_CONFIG.apiUrl)
+        .put('/users/me/workspaces/1/notifications/activate')
+        .reply(204, { })
+
+      nock(FETCH_CONFIG.apiUrl)
+        .put('/users/me/password', body => body.loggedin_user_password === invalidPassword)
+        .reply(403, { })
+
+      nock(FETCH_CONFIG.apiUrl)
+        .put('/users/me/password', body => body.loggedin_user_password !== invalidPassword)
+        .reply(204, { })
+
+      nock(FETCH_CONFIG.apiUrl)
+        .get('/users/me/agenda')
+        .reply(200, [])
+      restoreHistoryCallBack([
+        setWorkspaceListMemberListCallBack,
+        updateUserNameCallBack,
+        newFlashMessageWarningCallBack,
+        updateUserEmailCallBack,
+        updateUserWorkspaceSubscriptionNotifCallBack,
+        updateUserAgendaUrlCallBack,
+        setBreadcrumbsCallBack,
+        newFlashMessageInfoCallBack
+      ])
+    })
+
+    describe('handleSubmitNameOrEmail', () => {
+      it('updateUserNameCallBack should be called when the function handleSubmitNameOrEmail() is called with a new Name', (done) => {
+        wrapper.instance().handleSubmitNameOrEmail('randomNewName', '', '').then(() => {
+          expect(updateUserNameCallBack.called).to.equal(true)
+          expect(newFlashMessageWarningCallBack.called).to.equal(false)
+        }).then(done, done)
+      })
+
+      it('updateUserEmailCallBack should be called when the function handleSubmitNameOrEmail() is called with a new Email', (done) => {
+        wrapper.instance().handleSubmitNameOrEmail('', 'randomNewEmail', 'randomPassword').then(() => {
+          expect(updateUserEmailCallBack.called).to.equal(true)
+        }).then(done, done)
+      })
+
+      it('newFlashMessageWarningCallBack should be called when the function handleSubmitNameOrEmail() is called with invalid new Name', (done) => {
+        wrapper.instance().handleSubmitNameOrEmail('d', '', '').then(() => {
+          expect(newFlashMessageWarningCallBack.called).to.equal(true)
+        }).then(done, done)
+      })
+    })
+
+    describe('handleChangeSubscriptionNotif', () => {
+      it('updateUserWorkspaceSubscriptionNotifCallBack should be called when the function handleChangeSubscriptionNotif() is called', (done) => {
+        wrapper.instance().handleChangeSubscriptionNotif(1, 'activate').then(() => {
+          expect(updateUserWorkspaceSubscriptionNotifCallBack.called).to.equal(true)
+          restoreHistoryCallBack([updateUserWorkspaceSubscriptionNotifCallBack])
+        }).then(done, done)
+      })
+
+      it('newFlashMessageWarningCallBack should be called when the function handleChangeSubscriptionNotif() is called with invalid workspaceId', (done) => {
+        wrapper.instance().handleChangeSubscriptionNotif(0, 'activate').then(() => {
+          expect(newFlashMessageWarningCallBack.called).to.equal(true)
+          restoreHistoryCallBack([newFlashMessageWarningCallBack])
+        }).then(done, done)
+      })
+    })
+
+    describe('handleSubmitPassword', () => {
+      it('newFlashMessageInfoCallBack should be called when handleSubmitPassword() is called with valid password', (done) => {
+        wrapper.instance().handleSubmitPassword('randomOldPassword', 'randomPassWord', 'randomPassWord').then(() => {
+          expect(newFlashMessageWarningCallBack.called).to.equal(false)
+        }).then(done, done)
+      })
+
+      it('newFlashMessageWarningCallBack should be called when handleSubmitPassword() is called with invalid oldPassword', (done) => {
+        wrapper.instance().handleSubmitPassword(invalidPassword, 'randomPassWord', 'randomPassWord').then(() => {
+          expect(newFlashMessageWarningCallBack.called).to.equal(true)
+          expect(newFlashMessageInfoCallBack.called).to.equal(false)
+        }).then(done, done)
+      })
+    })
+
+    describe('loadAgendaUrl', () => {
+      it('updateUserAgendaUrlCallBack should be called when loadAgendaUrl() is called', (done) => {
+        wrapper.instance().loadAgendaUrl().then(() => {
+          expect(updateUserAgendaUrlCallBack.called).to.equal(true)
+        }).then(done, done)
+      })
+    })
+
+    describe('loadWorkspaceListMemberList', () => {
+      it('setWorkspaceListMemberListCallBack should be called when loadWorkspaceListMemberList() is called', (done) => {
+        wrapper.instance().loadWorkspaceListMemberList().then(() => {
+          expect(setWorkspaceListMemberListCallBack.called).to.equal(true)
+        }).then(done, done)
+      })
+    })
+
+    describe('buildBreadcrumbs', () => {
+      it('setBreadcrumbsCallBack should be called when buildBreadcrumbs is called', () => {
+        wrapper.instance().buildBreadcrumbs()
+        expect(setBreadcrumbsCallBack.called).to.equal(true)
+      })
+    })
+  })
+})
diff --git a/frontend/test/src/container/AppFullscreenRouter.spec.js b/frontend/test/src/container/AppFullscreenRouter.spec.js
new file mode 100644
index 0000000000..2d506bac3f
--- /dev/null
+++ b/frontend/test/src/container/AppFullscreenRouter.spec.js
@@ -0,0 +1,73 @@
+import React from 'react'
+import { expect } from 'chai'
+import { mount } from 'enzyme'
+import { AppFullscreenRouter as AppFullscreenRouterWithoutHOC } from '../../../src/container/AppFullscreenRouter'
+import sinon from 'sinon'
+import { user } from '../../hocMock/redux/user/user'
+import { MemoryRouter } from 'react-router'
+import { PAGE } from '../../../src/helper'
+
+describe('<AppFullscreenRouter />', () => {
+  const renderAppFullscreenCallBack = sinon.stub()
+
+  const props = {
+    user: user,
+    renderAppFullscreen: renderAppFullscreenCallBack,
+    match: {
+      params: {
+        idws: 1,
+        idcts: 1
+      }
+    }
+  }
+
+  const ComponentWithHOC = AppFullscreenRouterWithoutHOC
+
+  const wrapper = mount(
+    <MemoryRouter initialEntries={['/']}>
+      <ComponentWithHOC {...props} />
+    </MemoryRouter>
+  )
+
+  describe('handlers', () => {
+    it(`renderAppFullscreenCallBack should be called when the route is ${PAGE.WORKSPACE.CONTENT_EDITION(1, 1)}`, () => {
+      wrapper.instance().history.replace(PAGE.WORKSPACE.CONTENT_EDITION(1, 1))
+      expect(renderAppFullscreenCallBack.called).to.equal(true)
+      let args = renderAppFullscreenCallBack.getCalls()[0].args
+      expect(args).to.deep.equal([{ slug: 'collaborative_document_edition', hexcolor: '#7d4e24' }, props.user, { workspace_id: '1', content_id: '1' }])
+      renderAppFullscreenCallBack.resetHistory()
+    })
+
+    it(`renderAppFullscreenCallBack should be called when the route is ${PAGE.WORKSPACE.AGENDA(1)}`, () => {
+      wrapper.instance().history.replace(PAGE.WORKSPACE.AGENDA(1))
+      expect(renderAppFullscreenCallBack.called).to.equal(true)
+      let args = renderAppFullscreenCallBack.getCalls()[0].args
+      expect(args).to.deep.equal([{ slug: 'agenda', hexcolor: '#7d4e24', appConfig: { workspaceId: 1, forceShowSidebar: false } }, props.user, {}])
+      renderAppFullscreenCallBack.resetHistory()
+    })
+
+    it(`renderAppFullscreenCallBack should be called when the route is ${PAGE.AGENDA}`, () => {
+      wrapper.instance().history.replace(PAGE.AGENDA)
+      expect(renderAppFullscreenCallBack.called).to.equal(true)
+      let args = renderAppFullscreenCallBack.getCalls()[0].args
+      expect(args).to.deep.equal([{ slug: 'agenda', hexcolor: '#7d4e24', appConfig: { workspaceId: null, forceShowSidebar: true } }, props.user, {}])
+      renderAppFullscreenCallBack.resetHistory()
+    })
+
+    it(`renderAppFullscreenCallBack should be called when the route is ${PAGE.ADMIN.USER}`, () => {
+      wrapper.instance().history.replace(PAGE.ADMIN.USER)
+      expect(renderAppFullscreenCallBack.called).to.equal(true)
+      let args = renderAppFullscreenCallBack.getCalls()[0].args
+      expect(args).to.deep.equal([{ slug: 'admin_workspace_user', hexcolor: '#7d4e24', type: 'user' }, props.user, { workspaceList: [], userList: [] }])
+      renderAppFullscreenCallBack.resetHistory()
+    })
+
+    it(`renderAppFullscreenCallBack should be called when the route is ${PAGE.ADMIN.WORKSPACE}`, () => {
+      wrapper.instance().history.replace(PAGE.ADMIN.WORKSPACE)
+      expect(renderAppFullscreenCallBack.called).to.equal(true)
+      let args = renderAppFullscreenCallBack.getCalls()[0].args
+      expect(args).to.deep.equal([{ slug: 'admin_workspace_user', hexcolor: '#7d4e24', type: 'workspace' }, props.user, { workspaceList: [], userList: [] }])
+      renderAppFullscreenCallBack.resetHistory()
+    })
+  })
+})
diff --git a/frontend/test/src/container/ForgotPassword.spec.js b/frontend/test/src/container/ForgotPassword.spec.js
new file mode 100644
index 0000000000..4bee5dd421
--- /dev/null
+++ b/frontend/test/src/container/ForgotPassword.spec.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import { expect } from 'chai'
+import { ForgotPassword as ForgotPasswordWithoutHOC } from '../../../src/container/ForgotPassword'
+import sinon from 'sinon'
+import { mount } from 'enzyme'
+import { user } from '../../hocMock/redux/user/user'
+import { workspaceList } from '../../hocMock/redux/workspaceList/workspaceList'
+import { withRouterMock } from '../../hocMock/withRouter'
+import { translateMock } from '../../hocMock/translate'
+
+describe('<ForgotPassword />', () => {
+  const renderAppPopupCreationCallBack = sinon.stub()
+  const dispatchCallBack = sinon.stub()
+
+  const props = {
+    user: user,
+    workspaceList: workspaceList.workspaceList,
+    system: {
+      workspaceListLoaded: true
+    },
+    canCreateWorkspace: true,
+    renderAppPopupCreation: renderAppPopupCreationCallBack,
+    dispatch: dispatchCallBack,
+    history: []
+  }
+
+  const ComponentWithHOC = withRouterMock(translateMock()(ForgotPasswordWithoutHOC))
+
+  const wrapper = mount(<ComponentWithHOC {...props} />)
+
+  const wrapperInstance = wrapper.find(ForgotPasswordWithoutHOC)
+
+  describe('intern function', () => {
+    describe('handleInputKeyDown()', () => {
+      it('should call the callBack when e.key === enter', () => {
+        wrapperInstance.instance().handleInputKeyDown({ key: 'enter' })
+      })
+    })
+
+    describe('handleChangeBackupEmail()', () => {
+      it('should set backupEmail in the state', () => {
+        wrapperInstance.instance().handleChangeBackupEmail({ target: { value: 'testValue' } })
+        expect(wrapperInstance.state().backupEmail.value).to.equal('testValue')
+        expect(wrapperInstance.state().backupEmail.isInvalid).to.equal(false)
+      })
+    })
+  })
+})
diff --git a/frontend/test/src/container/Home.spec.js b/frontend/test/src/container/Home.spec.js
new file mode 100644
index 0000000000..263675907e
--- /dev/null
+++ b/frontend/test/src/container/Home.spec.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import { Home as HomeWithoutHOC } from '../../../src/container/Home.jsx'
+import sinon from 'sinon'
+import { user } from '../../hocMock/redux/user/user'
+import { workspaceList } from '../../hocMock/redux/workspaceList/workspaceList'
+
+describe('<Home />', () => {
+  const renderAppPopupCreationCallBack = sinon.stub()
+
+  const props = {
+    user: user,
+    workspaceList: workspaceList.workspaceList,
+    system: {
+      workspaceListLoaded: true
+    },
+    canCreateWorkspace: true,
+    renderAppPopupCreation: renderAppPopupCreationCallBack
+  }
+
+  const wrapper = shallow(
+    <HomeWithoutHOC {...props} t={key => key} />
+  )
+
+  describe('static design', () => {
+    it('should render the root div', () =>
+      expect(wrapper.find('div.tracim__content').length).equal(1)
+    )
+
+    it('should not render if workspaceList is not loaded', () => {
+      wrapper.setProps({ system: { workspaceListLoaded: false } })
+      expect(wrapper.find('div.tracim__content').length).equal(0)
+      wrapper.setProps({ system: props.system })
+    })
+  })
+
+  describe('handler', () => {
+    it('renderAppPopupCreationCallBack should be called when handleClickCreateWorkspace is called', () => {
+      wrapper.instance().handleClickCreateWorkspace({ preventDefault: () => {} })
+      expect(renderAppPopupCreationCallBack.called).to.equal(true)
+    })
+  })
+})
diff --git a/frontend/test/src/container/Sidebar.spec.js b/frontend/test/src/container/Sidebar.spec.js
new file mode 100644
index 0000000000..67468eb6d5
--- /dev/null
+++ b/frontend/test/src/container/Sidebar.spec.js
@@ -0,0 +1,34 @@
+// import React from 'react'
+// import { expect } from 'chai'
+// import { mount } from 'enzyme'
+// import { Sidebar as SidebarWithoutHOC } from '../../src/container/Sidebar'
+// import sinon from 'sinon'
+// import { user } from '../hocMock/redux/user/user'
+// import { workspaceList } from '../hocMock/redux/workspaceList/workspaceList'
+// import { withRouterMockOpenContent } from '../hocMock/withRouter'
+// import { translateMock } from '../hocMock/translate'
+//
+// describe('<Sidebar />', () => {
+//   const dispatchCallBack = sinon.stub()
+//
+//   const props = {
+//     user: user,
+//     workspaceList: workspaceList.workspaceList,
+//     system: {},
+//     dispatch: dispatchCallBack,
+//     match: {
+//       params: {
+//         idws: 1,
+//         idcts: 1
+//       }
+//     }
+//   }
+//
+//   const ComponentWithHOC = withRouterMockOpenContent(translateMock()(SidebarWithoutHOC))
+//
+//   const wrapper = mount(
+//     <ComponentWithHOC {...props} />
+//   )
+// })
+
+// CONTAIN DnD ITEM
diff --git a/frontend/test/src/container/Tracim.spec.js b/frontend/test/src/container/Tracim.spec.js
new file mode 100644
index 0000000000..c2fcb68923
--- /dev/null
+++ b/frontend/test/src/container/Tracim.spec.js
@@ -0,0 +1,169 @@
+import React from 'react'
+import { expect } from 'chai'
+import { Tracim as TracimWithoutHOC } from '../../../src/container/Tracim'
+import sinon from 'sinon'
+import { mount } from 'enzyme'
+import { user } from '../../hocMock/redux/user/user'
+import { appList } from '../../hocMock/redux/appList/appList'
+import { workspaceList } from '../../hocMock/redux/workspaceList/workspaceList'
+import configureMockStore from 'redux-mock-store'
+import { translateMock } from '../../hocMock/translate'
+import { Provider } from 'react-redux'
+import { isFunction } from '../../hocMock/helper'
+import {
+  ADD, APP_LIST, APPEND,
+  BREADCRUMBS, CONFIG, CONTENT_TYPE_LIST, FLASH_MESSAGE, REMOVE,
+  SET,
+  USER,
+  WORKSPACE_LIST, WORKSPACE_LIST_MEMBER
+} from '../../../src/action-creator.sync'
+import { withRouterMock } from '../../hocMock/withRouter'
+import { FETCH_CONFIG } from '../../../src/helper'
+const nock = require('nock')
+
+describe('<Tracim />', () => {
+  const newFlashMessageWarningCallBack = sinon.stub()
+  const newFlashMessageInfoCallBack = sinon.stub()
+  const setConfigCallBack = sinon.stub()
+  const setAppListCallBack = sinon.stub()
+  const setContentTypeListCallBack = sinon.stub()
+  const setUserConnectedCallBack = sinon.stub()
+  const setWorkspaceListCallBack = sinon.stub()
+  const setBreadcrumbsCallBack = sinon.stub()
+  const appendBreadcrumbsCallBack = sinon.stub()
+  const setWorkspaceListMemberListCallBack = sinon.stub()
+
+  const dispatchCallBack = (param) => {
+    if (isFunction(param)) {
+      return param(dispatchCallBack)
+    }
+    switch (param.type) {
+      case `${SET}/${CONFIG}`:
+        setConfigCallBack()
+        break
+      case `${SET}/${APP_LIST}`:
+        setAppListCallBack()
+        break
+      case `${SET}/${CONTENT_TYPE_LIST}`:
+        setContentTypeListCallBack()
+        break
+      case `${SET}/${USER}/Connected`:
+        setUserConnectedCallBack()
+        break
+      case `${SET}/${WORKSPACE_LIST}`:
+        setWorkspaceListCallBack()
+        break
+      case `${SET}/${BREADCRUMBS}`:
+        setBreadcrumbsCallBack()
+        break
+      case `${ADD}/${FLASH_MESSAGE}`:
+        if (param.msg.type === 'warning') {
+          newFlashMessageWarningCallBack()
+        }
+        if (param.msg.type === 'info') {
+          newFlashMessageInfoCallBack()
+        }
+        break
+      case `${REMOVE}/${FLASH_MESSAGE}`:
+        break
+      case `${APPEND}/${BREADCRUMBS}`:
+        appendBreadcrumbsCallBack()
+        break
+      case `${SET}/${WORKSPACE_LIST_MEMBER}`:
+        setWorkspaceListMemberListCallBack()
+        break
+      default:
+        return param
+    }
+  }
+
+  const mockStore = configureMockStore()
+  const store = mockStore({})
+
+  const props = {
+    breadcrumbs: [],
+    user: user,
+    appList: appList,
+    workspaceList: workspaceList.workspaceList,
+    system: {
+      workspaceListLoaded: true,
+      config: {
+        email_notification_activated: true
+      }
+    },
+    currentWorkspace: {
+      id: 1
+    },
+    flashMessage: [],
+    dispatch: dispatchCallBack
+  }
+
+  const ComponentWithHOC1 = withRouterMock(translateMock()(TracimWithoutHOC))
+
+  const ComponentWithHOC2 = () => <Provider store={store}><ComponentWithHOC1 {...props} /></Provider>
+
+  const wrapper = mount(<ComponentWithHOC2 {...props} />)
+
+  const wrapperInstance = wrapper.find(TracimWithoutHOC)
+
+  describe('intern function', () => {
+    before(() => {
+      nock(FETCH_CONFIG.apiUrl)
+        .get('/system/config')
+        .reply(200, {})
+
+      nock(FETCH_CONFIG.apiUrl)
+        .get('/system/applications')
+        .reply(200, [])
+
+      nock(FETCH_CONFIG.apiUrl)
+        .get('/system/content_types')
+        .reply(200, { })
+
+      nock(FETCH_CONFIG.apiUrl)
+        .get('/users/me/workspaces')
+        .query({ show_owned_workspace: 0 })
+        .reply(200, [])
+
+      nock(FETCH_CONFIG.apiUrl)
+        .get(new RegExp('/workspaces/[0-9]/members'))
+        .reply(200, { })
+    })
+
+    describe('loadAppConfig', () => {
+      it('setConfigCallBack should be called when loadAppConfig() is called', (done) => {
+        wrapperInstance.instance().loadAppConfig().then(() => {
+          expect(setConfigCallBack.called).to.equal(true)
+        }).then(done, done)
+      })
+
+      it('setAppListCallBack should be called when loadAppConfig() is called', (done) => {
+        wrapperInstance.instance().loadAppConfig().then(() => {
+          expect(setAppListCallBack.called).to.equal(true)
+        }).then(done, done)
+      })
+
+      it('setContentTypeListCallBack should be called when loadAppConfig() is called', (done) => {
+        wrapperInstance.instance().loadAppConfig().then(() => {
+          expect(setContentTypeListCallBack.called).to.equal(true)
+        }).then(done, done)
+      })
+    })
+
+    describe('loadWorkspaceList', () => {
+      it('setWorkspaceListCallBack should be called when loadWorkspaceList() is called', (done) => {
+        wrapperInstance.instance().loadWorkspaceList().then(() => {
+          expect(setWorkspaceListCallBack.called).to.equal(true)
+        }).then(done, done)
+      })
+    })
+
+    describe('loadWorkspaceListMemberList', () => {
+      it('setWorkspaceListMemberListCallBack should be called when loadWorkspaceListMemberList() is called', (done) => {
+        wrapperInstance.instance().loadWorkspaceListMemberList(workspaceList.workspaceList).then(() => {
+          expect(setWorkspaceListMemberListCallBack.called).to.equal(true)
+        }).then(done, done)
+      })
+    })
+  })
+})
diff --git a/frontend/test/src/helper.spec.js b/frontend/test/src/helper.spec.js
new file mode 100644
index 0000000000..a79e92262e
--- /dev/null
+++ b/frontend/test/src/helper.spec.js
@@ -0,0 +1,168 @@
+import { expect } from 'chai'
+import {
+  sortWorkspaceContents,
+  findUserRoleIdInWorkspace,
+  getUserProfile
+} from '../../src/helper.js'
+import { ROLE_LIST, PROFILE } from 'tracim_frontend_lib'
+
+describe('In file helper.js', () => {
+  describe('the function sortWorkspaceContents()', () => {
+    it('should sort the array of content by folder and alphabetically properly', () => {
+      // INFO - CH - 2019-08-08 - on the list bellow, contents only have the properties that mattes for the sort
+      // Note that Array.sort() differs between chrome and node.js.
+      // the implementation of sortWorkspaceContents should handles these differences
+      const contentListAsGivenByApi = [
+        { id: 1, label: 'content 0', type: 'html-document' },
+        { id: 2, label: 'content 0', type: 'folder' },
+        { id: 3, label: 'content 1', type: 'html-document' },
+        { id: 4, label: 'content 1', type: 'folder' },
+        { id: 21, label: 'content 10', type: 'html-document' },
+        { id: 22, label: 'content 10', type: 'folder' },
+        { id: 23, label: 'content 11', type: 'file' },
+        { id: 24, label: 'content 11', type: 'folder' },
+        { id: 25, label: 'content 12', type: 'html-document' },
+        { id: 26, label: 'content 12', type: 'folder' },
+        { id: 27, label: 'content 13', type: 'html-document' },
+        { id: 28, label: 'content 13', type: 'folder' },
+        { id: 29, label: 'content 14', type: 'thread' },
+        { id: 30, label: 'content 14', type: 'folder' },
+        { id: 31, label: 'content 15', type: 'html-document' },
+        { id: 32, label: 'content 15', type: 'folder' },
+        { id: 33, label: 'content 16', type: 'thread' },
+        { id: 34, label: 'content 16', type: 'folder' },
+        { id: 35, label: 'content 17', type: 'html-document' },
+        { id: 36, label: 'content 17', type: 'folder' },
+        { id: 37, label: 'content 18', type: 'html-document' },
+        { id: 38, label: 'content 18', type: 'folder' },
+        { id: 39, label: 'content 19', type: 'html-document' },
+        { id: 40, label: 'content 19', type: 'folder' },
+        { id: 5, label: 'content 2', type: 'file' },
+        { id: 6, label: 'content 2', type: 'folder' },
+        { id: 41, label: 'content 20', type: 'html-document' },
+        { id: 42, label: 'content 20', type: 'folder' },
+        { id: 7, label: 'content 3', type: 'html-document' },
+        { id: 8, label: 'content 3', type: 'folder' },
+        { id: 9, label: 'content 4', type: 'html-document' },
+        { id: 10, label: 'content 4', type: 'folder' },
+        { id: 11, label: 'content 5', type: 'file' },
+        { id: 12, label: 'content 5', type: 'folder' },
+        { id: 13, label: 'content 6', type: 'html-document' },
+        { id: 14, label: 'content 6', type: 'folder' },
+        { id: 15, label: 'content 7', type: 'file' },
+        { id: 16, label: 'content 7', type: 'folder' },
+        { id: 17, label: 'content 8', type: 'thread' },
+        { id: 18, label: 'content 8', type: 'folder' },
+        { id: 19, label: 'content 9', type: 'html-document' },
+        { id: 20, label: 'content 9', type: 'folder' }
+      ]
+      const contentListSortedByFolderAndAlphabetically = [
+        { id: 2, label: 'content 0', type: 'folder' },
+        { id: 4, label: 'content 1', type: 'folder' },
+        { id: 22, label: 'content 10', type: 'folder' },
+        { id: 24, label: 'content 11', type: 'folder' },
+        { id: 26, label: 'content 12', type: 'folder' },
+        { id: 28, label: 'content 13', type: 'folder' },
+        { id: 30, label: 'content 14', type: 'folder' },
+        { id: 32, label: 'content 15', type: 'folder' },
+        { id: 34, label: 'content 16', type: 'folder' },
+        { id: 36, label: 'content 17', type: 'folder' },
+        { id: 38, label: 'content 18', type: 'folder' },
+        { id: 40, label: 'content 19', type: 'folder' },
+        { id: 6, label: 'content 2', type: 'folder' },
+        { id: 42, label: 'content 20', type: 'folder' },
+        { id: 8, label: 'content 3', type: 'folder' },
+        { id: 10, label: 'content 4', type: 'folder' },
+        { id: 12, label: 'content 5', type: 'folder' },
+        { id: 14, label: 'content 6', type: 'folder' },
+        { id: 16, label: 'content 7', type: 'folder' },
+        { id: 18, label: 'content 8', type: 'folder' },
+        { id: 20, label: 'content 9', type: 'folder' },
+        { id: 1, label: 'content 0', type: 'html-document' },
+        { id: 3, label: 'content 1', type: 'html-document' },
+        { id: 21, label: 'content 10', type: 'html-document' },
+        { id: 23, label: 'content 11', type: 'file' },
+        { id: 25, label: 'content 12', type: 'html-document' },
+        { id: 27, label: 'content 13', type: 'html-document' },
+        { id: 29, label: 'content 14', type: 'thread' },
+        { id: 31, label: 'content 15', type: 'html-document' },
+        { id: 33, label: 'content 16', type: 'thread' },
+        { id: 35, label: 'content 17', type: 'html-document' },
+        { id: 37, label: 'content 18', type: 'html-document' },
+        { id: 39, label: 'content 19', type: 'html-document' },
+        { id: 5, label: 'content 2', type: 'file' },
+        { id: 41, label: 'content 20', type: 'html-document' },
+        { id: 7, label: 'content 3', type: 'html-document' },
+        { id: 9, label: 'content 4', type: 'html-document' },
+        { id: 11, label: 'content 5', type: 'file' },
+        { id: 13, label: 'content 6', type: 'html-document' },
+        { id: 15, label: 'content 7', type: 'file' },
+        { id: 17, label: 'content 8', type: 'thread' },
+        { id: 19, label: 'content 9', type: 'html-document' }
+      ]
+
+      const sortedContentList = contentListAsGivenByApi.sort(sortWorkspaceContents)
+
+      expect(sortedContentList).to.deep.equal(contentListSortedByFolderAndAlphabetically)
+    })
+  })
+
+  describe('the function findUserRoleIdInWorkspace()', () => {
+    const memberList = [{
+      id: 0,
+      role: 'reader'
+    }, {
+      id: 1,
+      role: 'contributor'
+    }, {
+      id: 2,
+      role: 'content-manager'
+    }, {
+      id: 3,
+      role: 'workspace-manager'
+    }]
+
+    it('the function should return the correct reader id', () => {
+      const roleId = findUserRoleIdInWorkspace(0, memberList, ROLE_LIST)
+      expect(roleId).to.equal(8)
+    })
+
+    it('the function should return the correct contributor id', () => {
+      const roleId = findUserRoleIdInWorkspace(1, memberList, ROLE_LIST)
+      expect(roleId).to.equal(4)
+    })
+
+    it('the function should return the correct content-manager id', () => {
+      const roleId = findUserRoleIdInWorkspace(2, memberList, ROLE_LIST)
+      expect(roleId).to.equal(2)
+    })
+
+    it('the function should return the correct workspace-manager id', () => {
+      const roleId = findUserRoleIdInWorkspace(3, memberList, ROLE_LIST)
+      expect(roleId).to.equal(1)
+    })
+
+    it('the function should return the correct reader id when the user is not in memberList', () => {
+      const roleId = findUserRoleIdInWorkspace(4, memberList, ROLE_LIST)
+      expect(roleId).to.equal(8)
+    })
+  })
+
+  describe('the getUserProfile() function', () => {
+    it('should return the proper profile when the slug is "administrators"', () => {
+      expect(getUserProfile('administrators')).to.eql(PROFILE.administrator)
+    })
+
+    it('should return the proper profile when the slug is "trusted-users"', () => {
+      expect(getUserProfile('trusted-users')).to.eql(PROFILE.manager)
+    })
+
+    it('should return the proper profile when the slug is "users"', () => {
+      expect(getUserProfile('users')).to.eql(PROFILE.user)
+    })
+
+    it('should return an empty object when the slug is empty', () => {
+      expect(getUserProfile()).to.eql({})
+    })
+  })
+})