setup testing environment

.gitignore

@@ -10,6 +10,7 @@ debug.test
 .idea/
 /web/node_modules/
 /web/public/
+/web/coverage
 *.prof
 *.test
 /rest-client.env.json

Dockerfile

@@ -49,7 +49,7 @@ ADD web /srv/web
 RUN apk add --no-cache --update git
 RUN \
     cd /srv/web && \
-    npm i && npm run lint && npm run build && \
+    npm i && npm run lint && npm run test && npm run build && \
     rm -rf ./node_modules
 
 

web/.eslintrc.js

@@ -8,6 +8,7 @@ module.exports = {
     browser: true,
     node: true,
     es6: true,
+    jest: true,
   },
   parserOptions: {
     ecmaFeatures: {

web/app/common/store.test.js

@@ -0,0 +1,11 @@
+import store from './store';
+
+describe('Store', () => {
+  it('should trigger listener on add comment', () => {
+    const listener = jest.fn();
+    store.set('comments', []);
+    store.onUpdate('comments', listener);
+    store.addComment({id:`new`});
+    expect(listener).toBeCalledWith([{"comment": {"id": "new"}}]);
+  });
+});

web/app/components/auth-panel/__tests__/auth-panel.test.js

@@ -0,0 +1,52 @@
+import { h, render } from 'preact';
+import AuthPanel from '../auth-panel';
+import {createDomContainer} from 'testUtils';
+
+describe('<AuthPanel />', () => {
+  describe('For not authorized user', () => {
+    let container;
+    createDomContainer(({domContainer}) => {
+      container = domContainer;
+    });
+    it('should render login form with google and github provider', () => {
+      const element = <AuthPanel user={{}} sort="-score" providers={[`google`, `github`]} />;
+      render(element, container);
+      const authPanelColumn = container.querySelectorAll('.auth-panel__column');
+      expect(authPanelColumn.length).toEqual(2);
+      const authForm = authPanelColumn[0];
+      expect(authForm.textContent)
+        .toEqual(expect.stringContaining('Sign in to comment using'));
+      const providerLinks = authForm.querySelectorAll('.auth-panel__pseudo-link');
+      expect(providerLinks[0].textContent).toEqual('Google');
+      expect(providerLinks[1].textContent).toEqual('GitHub');
+    });
+  });
+  describe('For authorized user', () => {
+    let container;
+    createDomContainer(({domContainer}) => {
+      container = domContainer;
+    });
+    it('should render info about current user', () => {
+      const element = <AuthPanel user={{id: `test`, name: 'John'}} sort="-score" providers={[`google`, `github`]} />;
+      render(element, container);
+      const authPanelColumn = container.querySelectorAll('.auth-panel__column');
+      expect(authPanelColumn.length).toEqual(2);
+      const userInfo = authPanelColumn[0];
+      expect(userInfo.textContent)
+        .toEqual(expect.stringContaining('You signed in as John. Sign out?'));
+    });
+  });
+  describe('For admin user', () => {
+    let container;
+    createDomContainer(({domContainer}) => {
+      container = domContainer;
+    });
+    it('should render admin action', () => {
+      const element = <AuthPanel user={{id: `test`, admin: true, name: 'John'}} sort="-score" providers={[`google`, `github`]} />;
+      render(element, container);
+      const adminAction = container.querySelector('.auth-panel__admin-action');
+      expect(adminAction.textContent)
+        .toEqual('Show blocked');
+    });
+  });
+});

web/app/components/auth-panel/auth-panel.jsx

@@ -34,10 +34,11 @@ export default class AuthPanel extends Component {
 
     const sortArray = getSortArray(sort);
 
+    let loggedIn = !!user.id;
     return (
-      <div className={b('auth-panel', props, { loggedIn: !!user.id })}>
+      <div className={b('auth-panel', props, { loggedIn })}>
         {
-          !!user.id && (
+          loggedIn && (
             <div className="auth-panel__column">
               You signed in as
               {' '}
@@ -50,7 +51,7 @@ export default class AuthPanel extends Component {
         }
 
         {
-          !user.id && (
+          loggedIn === false && (
             <div className="auth-panel__column">
               Sign in to comment using
               {' '}

web/app/components/preloader/__tests__/preloader.test.jsx

@@ -0,0 +1,15 @@
+import { h, render } from 'preact';
+import Preloader from '../preloader';
+import {createDomContainer} from 'testUtils';
+
+describe(`<Preloader />`, () => {
+  let container;
+  createDomContainer(({domContainer}) => {
+    container = domContainer;
+  });
+
+  it('should render Preloader', () => {
+    render(<Preloader mix="root__preloader" />, container);
+    expect(container.children[0].className).toEqual('preloader root__preloader');
+  });
+});

web/app/testUtils/index.js

@@ -0,0 +1,17 @@
+export function createDomContainer(setup) {
+  let domContainer = null;
+  beforeAll(() => {
+    domContainer = document.createElement('div');
+    (document.body || document.documentElement).appendChild(domContainer);
+    setup({domContainer});
+  });
+
+  beforeEach(() => {
+    domContainer.innerHTML = '';
+  });
+
+  afterAll(() => {
+    domContainer.parentNode.removeChild(domContainer);
+    domContainer = null;
+  });
+}

web/babelOptions.js

@@ -0,0 +1,9 @@
+module.exports = {
+  presets: [
+    ['env', {
+      targets: ['> 1%', 'android >= 4.4.4', 'ios >= 9'],
+      useBuiltIns: true,
+    }],
+  ],
+  plugins: ['transform-object-rest-spread', ['transform-react-jsx', { 'pragma': 'h' }]],
+};

web/fileTransformer.js

@@ -0,0 +1,8 @@
+const {createTransformer} = require(`babel-jest`);
+const babelOptions = require('./babelOptions');
+
+
+module.exports = createTransformer({
+  babelrc: false,
+  ...babelOptions,
+});

web/injectGlobalVariable.js

@@ -0,0 +1 @@
+global.b = require('bem-react-helper');

web/package.json

@@ -5,7 +5,8 @@
     "build": "NODE_ENV=production webpack --config ./webpack.config.js",
     "start": "webpack-dev-server --progress --hot --inline --config ./webpack.config.js",
     "reinstall": "rm -rf ./node_modules/ && npm install",
-    "lint": "eslint --ext=.js,.jsx ."
+    "lint": "eslint --ext=.js,.jsx .",
+    "test": "jest"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.1",
@@ -23,6 +24,7 @@
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^0.11.1",
     "html-webpack-plugin": "^2.30.1",
+    "jest": "^23.1.0",
     "node-sass": "sass/node-sass#v5",
     "postcss-csso": "^2.0.0",
     "postcss-loader": "^2.0.5",
@@ -39,5 +41,14 @@
     "bem-react-helper": "^1.1.2",
     "preact": "^8.2.7",
     "promise-polyfill": "^7.0.0"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.jsx?$": "<rootDir>/fileTransformer.js"
+    },
+    "setupFiles": [
+      "<rootDir>/injectGlobalVariable.js"
+    ],
+    "moduleDirectories": ["node_modules", "<rootDir>/app"]
   }
 }

web/webpack.config.js

@@ -8,6 +8,7 @@ const Html = require('html-webpack-plugin');
 const Provide = webpack.ProvidePlugin;
 const Define = webpack.DefinePlugin;
 
+const babelOptions = require('./babelOptions');
 const { NODE_ID } = require('./app/common/constants');
 const publicFolder = path.resolve(__dirname, 'public');
 const env = process.env.NODE_ENV || 'dev';
@@ -59,15 +60,7 @@ module.exports = {
         exclude: /(node_modules|\.vendor\.js$)/,
         use: {
           loader: 'babel-loader',
-          options: {
-            presets: [
-              ['env', {
-                targets: ['> 1%', 'android >= 4.4.4', 'ios >= 9'],
-                useBuiltIns: true,
-              }],
-            ],
-            plugins: ['transform-object-rest-spread', ['transform-react-jsx', { 'pragma': 'h' }]],
-          }
+          options: babelOptions,
         }
       },
       {