test(front): add unit tests to frontend

ref: #2239

frontend/configEnv-test.json

@@ -0,0 +1,3 @@
+{
+  "apiUrl": "http://localhost:1337/api/v2"
+}

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",

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'
 
 /*

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: () => {}
+}

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: () => {}
+}

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 => {

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 (

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 = [{

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 (

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)
 

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'

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'>

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

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 =>

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)
 

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 = {

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

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 = {

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)
 

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 }
 

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')
 

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,

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'
 }

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'
 }

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'
 }

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'
 }

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'
 }

frontend/test/fixture/contentType/comment.js

@@ -1,15 +1,15 @@
-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',
   slug: 'comment',
   faIcon: '',
   hexcolor: '',
   creationLabel: 'Comment',
-  availableStatus: [
+  availableStatuses: [
     open,
     validated,
     cancelled,

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,

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,