Write tests

.ackrc

@@ -1 +1,2 @@
 --ignore-file=match:/^yarn\.lock$/
+--ignore-dir=coverage

.eslintrc

@@ -7,8 +7,8 @@
   "env": {
     "browser": true,
     "webextensions": true,
-    "mocha": true,
-    "jest": true
+    "jest": true,
+    "jasmine": true
   },
   "rules": {
     "class-methods-use-this": 0,

.gitignore

@@ -38,3 +38,6 @@ node_modules
 /dev-server/api-config.js
 /localization
 /demo-extension-build
+
+.env
+*.snap

.travis.yml

@@ -1,10 +1,11 @@
 language: node_js
 node_js:
-  - '6'
   - '7'
   - '8'
-# after_success:
-#    - 'cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js'
+script:
+  - yarn test:coverage
+after_success:
+   - cat ./coverage/lcov.info | ./node_modules/.bin/coveralls
 before_deploy:
   - ./scripts/prepare_release.sh && cd release
 after_deploy:

README.md

@@ -50,3 +50,14 @@ Open up your browser and access http://localhost:8191 to see how it works.
 
 Note that the development server is using OAuth for authorization process.
 Please make sure the app you specified in configuration above is setup with Redirect Uri `http://localhost:8191/redirect.html`.
+
+
+## Test
+
+Create `.env` file in `test`, with the following content:
+
+```ini
+appKey=your-appKey
+appSecret=your-appSecret
+server=sever_url
+```

gulpfile.js

@@ -1,5 +1,4 @@
 import gulp from 'gulp';
-import mocha from 'gulp-mocha';
 import istanbul from 'gulp-istanbul';
 import babelIstanbul from 'babel-istanbul';
 import yargs from 'yargs';

package.json

@@ -4,12 +4,15 @@
   "description": "RingCentral Integration Widget Library",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 0",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
     "build": "node ./node_modules/babel-cli/bin/babel-node.js ./node_modules/gulp/bin/gulp.js build",
     "gulp": "node ./node_modules/babel-cli/bin/babel-node.js ./node_modules/gulp/bin/gulp.js",
     "dev-server": "node ./node_modules/babel-cli/bin/babel-node.js ./node_modules/gulp/bin/gulp.js dev-server",
     "release": "node ./node_modules/babel-cli/bin/babel-node.js ./node_modules/gulp/bin/gulp.js release",
-    "eslint": "node ./node_modules/eslint/bin/eslint.js --quiet src --ignore-pattern *.test.js"
+    "eslint": "node ./node_modules/eslint/bin/eslint.js --quiet src --ignore-pattern *.test.js",
+    "prepush": "yarn test"
   },
   "repository": {
     "type": "git",
@@ -48,11 +51,11 @@
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
     "babel-runtime": "^6.20.0",
-    "chai": "^4.0.2",
-    "chai-enzyme": "^0.7.1",
     "coveralls": "^2.11.15",
     "css-loader": "^0.28.4",
-    "enzyme": "^2.7.1",
+    "dotenv": "^4.0.0",
+    "enzyme": "^2.9.1",
+    "enzyme-to-json": "^1.5.1",
     "eslint": "3.19.0",
     "eslint-config-airbnb": "^15.0.1",
     "eslint-plugin-import": "^2.2.0",
@@ -64,24 +67,26 @@
     "gulp": "^3.9.1",
     "gulp-babel": "^6.1.2",
     "gulp-istanbul": "^1.1.1",
-    "gulp-mocha": "^3.0.1",
     "gulp-sourcemaps": "^2.4.0",
+    "husky": "^0.14.3",
+    "identity-obj-proxy": "^3.0.0",
     "intl": "^1.2.5",
+    "jest": "^20.0.4",
     "json-loader": "^0.5.4",
     "locale-loader": "^1.3.0",
     "node-sass": "^4.5.3",
     "postcss-loader": "^2.0.5",
-    "react": "^15.4.1",
+    "react": "^15.6.1",
     "react-addons-perf": "^15.4.2",
-    "react-addons-test-utils": "^15.4.2",
-    "react-dom": "^15.4.1",
-    "react-redux": "^5.0.1",
+    "react-dom": "^15.6.1",
+    "react-redux": "^5.0.5",
     "react-router": "^3.0.0",
     "react-router-redux": "^4.0.7",
     "react-svg-loader": "^1.1.1",
-    "redux": "^3.6.0",
+    "react-test-renderer": "^15.6.1",
+    "redux": "^3.7.2",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.1.0",
+    "redux-thunk": "^2.2.0",
     "ringcentral": "^3.1.1",
     "ringcentral-client": "^1.0.0-rc1",
     "ringcentral-integration": "^0.7.0-rc17",
@@ -104,5 +109,21 @@
     "rc-tooltip": "^3.4.6",
     "react-svg-loader": "^1.1.1",
     "through2": "^2.0.3"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|ogg)$": "<rootDir>/test/__mocks__/fileMock.js",
+      "\\.(css|less|scss)$": "<rootDir>/test/__mocks__/styleMock.js"
+    },
+    "transform": {
+      "loadLocale\\.js$": "<rootDir>/test/__mocks__/loadLocale.js",
+      "^.+\\.js$": "babel-jest"
+    },
+    "setupFiles": [
+      "./test/setup.js"
+    ],
+    "snapshotSerializers": [
+      "<rootDir>/node_modules/enzyme-to-json/serializer"
+    ]
   }
 }

src/components/DialPad/index.js

@@ -17,7 +17,7 @@ const keyConfig = [
 
 const ALTERNATIVE_TIMEOUT = 1000;
 
-class DialButton extends Component {
+export class DialButton extends Component {
   constructor(props, ...args) {
     super(props, ...args);
     this.state = {

src/components/PresenceSettingSection/index.js

@@ -20,7 +20,7 @@ function getPresenceStatusName(currentUserStatus, currentDndStatus, currentLocal
   return i18n.getString(currentUserStatus + currentDndStatus, currentLocale);
 }
 
-function PresenceItem(props) {
+export function PresenceItem(props) {
   const className = classnames(
     styles.presenceItem,
     props.selected ? styles.selected : null

test/CallsPanel.spec.js

@@ -0,0 +1,29 @@
+import { Provider } from 'react-redux';
+import { Router } from 'react-router';
+
+import { getWrapper, getState } from './shared';
+import CallsPanel from '../src/components/CallsPanel';
+import NavigationBar from '../src/components/NavigationBar';
+
+let wrapper = null;
+let panel = null;
+beforeEach(async () => {
+  jasmine.DEFAULT_TIMEOUT_INTERVAL = 32000;
+  wrapper = await getWrapper();
+  const navigationBar = wrapper.find(Provider).first()
+    .find(Router).first()
+    .find(NavigationBar)
+    .first();
+  await navigationBar.props().goTo('/history');
+  panel = wrapper.find(Provider).first()
+    .find(Router).first()
+    .find(CallsPanel)
+    .first();
+});
+
+describe('history', () => {
+  test('initial state', () => {
+    expect(panel).toBeDefined();
+    expect(panel.props()).toBeDefined();
+  });
+});

test/ComposeTextPanel.spec.js

@@ -0,0 +1,34 @@
+import { Provider } from 'react-redux';
+import { Router } from 'react-router';
+
+import { getWrapper, getState, timeout } from './shared';
+import NavigationBar from '../src/components/NavigationBar';
+import ComposeTextPanel from '../src/components/ComposeTextPanel';
+
+let wrapper = null;
+let panel = null;
+beforeEach(async () => {
+  jasmine.DEFAULT_TIMEOUT_INTERVAL = 32000;
+  wrapper = await getWrapper();
+  const navigationBar = wrapper.find(Provider).first()
+    .find(Router).first()
+    .find(NavigationBar)
+    .first();
+  await navigationBar.props().goTo('/composeText');
+  panel = wrapper.find(Provider).first()
+    .find(Router).first()
+    .find(ComposeTextPanel)
+    .first();
+});
+
+describe('compose text panel', () => {
+  test('initial state', () => {
+    expect(panel).toBeDefined();
+    expect(panel.props()).toBeDefined();
+    // expect(panel).toMatchSnapshot();
+  });
+
+  test('send button status', () => {
+    // todo: need to login first
+  });
+});