Merge branch 'master' into fix-nav-width

.babelrc

@@ -10,5 +10,12 @@
     "transform-async-to-generator",
     "transform-react-jsx",
     "syntax-dynamic-import"
-  ]
+  ],
+  "env": {
+    "test": {
+      "plugins": [
+        ["transform-es2015-modules-commonjs", "dynamic-import-node"]
+      ]
+    }
+  }
 }

client/coral-framework/components/__tests__/Markdown.spec.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import {shallow} from 'enzyme';
-import {expect} from 'chai';
 import Markdown from '../Markdown';
 
 const render = (props) => shallow(<Markdown {...props} />);
@@ -9,12 +8,12 @@ describe('Markdown', () => {
   it('should convert Markdown to html', () => {
     const wrapper = render({content: '*test*'});
     const html = wrapper.html();
-    expect(html).to.contain('<em>');
+    expect(html).toMatch('<em>');
   });
 
   it('should set target="_parent" for links', () => {
     const wrapper = render({content: '[link](https://coralproject.net)'});
     const html = wrapper.html();
-    expect(html).to.contain('target="_parent"');
+    expect(html).toMatch('target="_parent"');
   });
 });

client/coral-framework/services/i18n.js

@@ -13,7 +13,7 @@ import pt_BR from '../../../locales/pt_BR.yml';
 
 // Translations are happening at https://translate.lingohub.com/the-coral-project/dashboard
 
-const defaultLanguage = 'en';
+const defaultLanguage = process.env.TALK_DEFAULT_LANG;
 const translations = {...en, ...es, ...fr, ...pt_BR};
 
 let lang;

client/talk-plugin-commentbox/__tests__/commentBox.spec.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import {shallow} from 'enzyme';
-import {expect} from 'chai';
-import CommentBox from '../CommentBox';
-
-describe('CommentBox', () => {
-  let comment;
-  let render;
-  beforeEach(() => {
-    comment = {};
-    const postItem = (item) => {
-      comment.posted = item;
-      return Promise.resolve(4);
-    };
-    render = shallow(<CommentBox
-      postItem={postItem}
-      updateItem={(e) => comment.text = e.target.value}
-      item_id={'1'}
-      comments={['1', '2', '3']}/>);
-  });
-
-  it('should render the CommentBox appropriately', () => {
-    expect(render.contains('<div class="CommentBox"')).to.be.true;
-    expect(render.contains('<button class="postCommentButton"')).to.be.true;
-  });
-});

client/talk-plugin-infobox/__tests__/InfoBox.spec.js

@@ -1,29 +1,36 @@
 import React from 'react';
 import {shallow} from 'enzyme';
-import {expect} from 'chai';
 import InfoBox from '../InfoBox';
+import renderer from 'react-test-renderer';
 
 const render = (props) => shallow(<InfoBox {...props} />);
 
 describe('InfoBox', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(
+      <InfoBox content='test' enable/>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
   it('should render hidden InfoBox', () => {
     const wrapper = render();
     const className = wrapper.prop('className');
-    expect(className).to.include('-info');
-    expect(className).to.include('hidden');
+    expect(className).toMatch('-info');
+    expect(className).toMatch('hidden');
   });
 
   it('should render enabled InfoBox', () => {
     const wrapper = render({enable: true});
     const className = wrapper.prop('className');
-    expect(className).to.include('-info');
-    expect(className).to.not.include('hidden');
+    expect(className).toMatch('-info');
+    expect(className).not.toMatch('hidden');
   });
 
   it('should render Markdown', () => {
     const wrapper = render({content: 'x'});
     const Markddown = wrapper.find('Markdown');
-    expect(Markddown).to.have.length(1);
-    expect(Markddown.prop('content')).to.equal('x');
+    expect(Markddown).toHaveLength(1);
+    expect(Markddown.prop('content')).toEqual('x');
   });
 });

client/talk-plugin-infobox/__tests__/__snapshots__/InfoBox.spec.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InfoBox renders correctly 1`] = `
+<div
+  className="talk-plugin-infobox-info "
+>
+  <div
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<p>test</p>
+",
+      }
+    }
+  />
+</div>
+`;

docs/_docs/running-advanced-configuration.md

@@ -24,6 +24,10 @@ otherwise the application will fail to start.
 Configure the duration for which comment counts are cached for, parsed by
 [ms](https://www.npmjs.com/package/ms){:target="_blank"}. (Default `1hr`)
 
+## TALK_DEFAULT_LANG
+
+Specify the default translation language. (Default `en`)
+
 ## TALK_DEFAULT_STREAM_TAB
 
 Specify the default stream tab in the admin. (Default `all`)
@@ -439,4 +443,4 @@ Could be read as:
   again, then they must have two of their comments approved in order to get
   added back to the queue.
 - At the moment of writing, behavior is not attached to the flagging
-  reliability, but it is recorded.
+  reliability, but it is recorded.

jest.config.js

@@ -0,0 +1,39 @@
+const path = require('path');
+const {pluginsPath} = require('./plugins');
+
+const buildTargets = [
+  'coral-admin',
+  'coral-docs'
+];
+
+const buildEmbeds = [
+  'stream'
+];
+
+// jest.config.js
+module.exports = {
+  testMatch: ['**/client/**/__tests__/**/*.js?(x)'],
+  setupTestFrameworkScriptFile: '<rootDir>/test/client/setupJest.js',
+  modulePaths: [
+    '<rootDir>/plugins',
+    '<rootDir>/client',
+    ...buildTargets.map((target) => path.join('<rootDir>', 'client', target, 'src')),
+    ...buildEmbeds.map((embed) => path.join('<rootDir>', 'client', `coral-embed-${embed}`, 'src')),
+  ],
+  moduleFileExtensions: ['js', 'jsx', 'json', 'yaml', 'yml'],
+  moduleDirectories: ['node_modules'],
+
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+    '\\.ya?ml$': '<rootDir>/test/client/yamlTransformer.js'
+  },
+
+  moduleNameMapper: {
+    '^plugin-api\\/(.*)$': '<rootDir>/plugin-api/$1',
+    '^plugins\\/(.*)$': '<rootDir>/plugins/$1',
+    '^pluginsConfig$': pluginsPath,
+
+    '\\.(scss|css|less)$': 'identity-obj-proxy',
+    '\\.(gif|ttf|eot|svg)$': '<rootDir>/test/client/fileMock.js'
+  }
+};

package.json

@@ -14,7 +14,8 @@
     "build-watch": "WEBPACK=TRUE NODE_ENV=development webpack --progress --config webpack.config.js --watch",
     "lint": "eslint --ext=.js --ext=.json bin/* .",
     "lint-fix": "yarn lint --fix",
-    "test": "TEST_MODE=unit NODE_ENV=test mocha -R ${MOCHA_REPORTER:-spec}",
+    "jest-watch": "TEST_MODE=unit NODE_ENV=test jest --watch",
+    "test": "TEST_MODE=unit NODE_ENV=test jest && TEST_MODE=unit NODE_ENV=test mocha -R ${MOCHA_REPORTER:-spec}",
     "test-cover": "TEST_MODE=unit NODE_ENV=test istanbul cover _mocha --report text --check-coverage -- -R spec",
     "heroku-postbuild": "./bin/cli plugins reconcile && yarn build",
     "generate-introspection": "WEBPACK=TRUE NODE_ENV=test ./scripts/generateIntrospectionResult.js"
@@ -159,6 +160,7 @@
     "react-redux": "^4.4.5",
     "react-router": "^3.0.0",
     "react-tagsinput": "^3.17.0",
+    "react-test-renderer": "15.5",
     "react-toastify": "^1.5.0",
     "react-transition-group": "^1.1.3",
     "recompose": "^0.23.1",
@@ -179,17 +181,24 @@
     "url-search-params": "^0.9.0",
     "uuid": "^3.1.0",
     "webpack": "^2.3.1",
+    "webpack-sources": "^1.0.1",
     "yaml-loader": "^0.4.0",
     "yamljs": "^0.2.10"
   },
   "devDependencies": {
-    "@coralproject/eslint-config-talk": "^0.0.3",
+    "@coralproject/eslint-config-talk": "^0.0.4",
+    "babel-jest": "^21.2.0",
+    "babel-plugin-dynamic-import-node": "^1.1.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
     "chai": "^3.5.0",
     "chai-as-promised": "^6.0.0",
     "chai-http": "^3.0.0",
-    "enzyme": "^2.9.1",
+    "enzyme": "^3.0.0",
+    "enzyme-adapter-react-15": "^1.0.0",
     "eslint": "^4.5.0",
     "eslint-plugin-mocha": "^4.11.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^21.2.1",
     "mocha": "^3.1.2",
     "mocha-junit-reporter": "^1.12.1",
     "nodemon": "^1.11.0",

test/client/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@coralproject/eslint-config-talk/client"
+}

test/client/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

test/client/setupJest.js

@@ -0,0 +1,38 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-15';
+
+Enzyme.configure({adapter: new Adapter()});
+
+// Storage Mock
+
+// TODO: Some places in our code (e.g. translations) has a hardcoded dependency
+// to the local storage. Fixing it and we can remove this global mock.
+
+function storageMock() {
+  let storage = {};
+
+  return {
+    setItem: function(key, value) {
+      storage[key] = value || '';
+    },
+    getItem: function(key) {
+      return key in storage ? storage[key] : null;
+    },
+    removeItem: function(key) {
+      delete storage[key];
+    },
+    get length() {
+      return Object.keys(storage).length;
+    },
+    key: function(i) {
+      let keys = Object.keys(storage);
+      return keys[i] || null;
+    }
+  };
+}
+
+// mock the localStorage
+window.localStorage = storageMock();
+
+// mock the sessionStorage
+window.sessionStorage = storageMock();

test/client/yamlTransformer.js

@@ -0,0 +1,8 @@
+const yaml = require('yamljs');
+
+module.exports = {
+  process(src) {
+    const data = yaml.parse(src);
+    return `module.exports = ${JSON.stringify(data)};`;
+  },
+};

webpack.config.js

@@ -111,7 +111,8 @@ const config = {
     new webpack.EnvironmentPlugin({
       'TALK_PLUGINS_JSON': '{}',
       'TALK_THREADING_LEVEL': '3',
-      'TALK_DEFAULT_STREAM_TAB': 'all'
+      'TALK_DEFAULT_STREAM_TAB': 'all',
+      'TALK_DEFAULT_LANG': 'en'
     })
   ],
   resolveLoader: {