codeBelt · codeBelt · Aug 16, 2017 · Aug 16, 2017 · Aug 17, 2017 · Aug 17, 2017
diff --git a/package.json b/package.json
@@ -25,9 +25,18 @@
     "---------- TESTING -----------------------------------------------------------------------------": "",
     "test": "npm run lint && npm run unit",
     "lint": "eslint src --ext .js,.jsx",
-    "unit": "jest",
+    "unit": "cross-env BABEL_ENV=server NODE_ENV=production jest",
+    "unit:watch": "cross-env BABEL_ENV=server NODE_ENV=production jest --watch",
+    "unit:coverage": "cross-env BABEL_ENV=server NODE_ENV=production jest --coverage",
     "------------------------------------------------------------------------------------------------": ""
   },
+  "jest": {
+    "setupFiles": [],
+    "roots": [
+      "<rootDir>/src/",
+      "<rootDir>/test/"
+    ]
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/codeBelt/hapi-react-hot-loader-example"
@@ -50,6 +59,7 @@
     "babel-cli": "6.26.0",
     "babel-core": "6.26.0",
     "babel-eslint": "7.2.3",
+    "babel-jest": "20.0.3",
     "babel-loader": "7.1.2",
     "babel-plugin-system-import-transformer": "3.1.0",
     "babel-plugin-transform-class-properties": "6.24.1",
@@ -59,11 +69,14 @@
     "babel-preset-react": "6.24.1",
     "babel-preset-stage-2": "6.24.1",
     "babel-watch": "2.0.7",
+    "chance": "1.0.10",
     "concurrently": "3.5.0",
     "copy-webpack-plugin": "4.0.1",
     "cross-env": "5.0.5",
     "css-hot-loader": "1.3.0",
     "css-loader": "0.28.7",
+    "enzyme": "2.9.1",
+    "enzyme-to-json": "1.5.1",
     "eslint": "4.5.0",
     "eslint-config-airbnb": "15.1.0",
     "eslint-config-airbnb-base": "11.3.2",
@@ -74,11 +87,17 @@
     "extract-text-webpack-plugin": "3.0.0",
     "html-webpack-harddisk-plugin": "0.1.0",
     "html-webpack-plugin": "2.30.1",
+    "jest": "20.0.4",
+    "jsdom": "11.2.0",
+    "nock": "9.0.14",
     "nodemon": "1.11.0",
     "postcss-apply": "0.8.0",
     "postcss-cssnext": "3.0.2",
     "postcss-import": "10.0.0",
     "postcss-loader": "2.0.6",
+    "react-test-renderer": "15.6.1",
+    "redux-mock-store": "1.2.3",
+    "regenerator-runtime": "0.11.0",
     "rimraf": "2.6.1",
     "robotstxt-webpack-plugin": "2.0.0",
     "style-loader": "0.18.2",

diff --git a/test/_setup.js b/test/_setup.js
@@ -0,0 +1,21 @@
+// https://github.com/airbnb/enzyme/blob/master/docs/guides/jsdom.md
+
+const {JSDOM} = require('jsdom');
+
+const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
+const {window} = jsdom;
+
+function copyProps(src, target) {
+    const props = Object.getOwnPropertyNames(src)
+        .filter(prop => typeof target[prop] === 'undefined')
+        .map(prop => Object.getOwnPropertyDescriptor(src, prop));
+
+    Object.defineProperties(target, props);
+}
+
+global.window = window;
+global.document = window.document;
+global.navigator = {
+    userAgent: 'node.js',
+};
+copyProps(window, global);
diff --git a/test/stores/loading/LoadingAction.spec.js b/test/stores/loading/LoadingAction.spec.js
@@ -0,0 +1,17 @@
+import Chance from 'chance';
+import LoadingAction from '../../../src/stores/loading/LoadingAction';
+
+describe('LoadingAction', () => {
+    const chance = new Chance();
+    const expectedData = chance.bool();
+
+    test('should create an action', () => {
+        const actual = LoadingAction.showLoader(expectedData);
+        const expected = {
+            type: LoadingAction.SET_LOADING,
+            payload: expectedData,
+        };
+
+        expect(actual).toEqual(expected);
+    });
+});
diff --git a/test/stores/loading/LoadingReducer.spec.js b/test/stores/loading/LoadingReducer.spec.js
@@ -0,0 +1,28 @@
+import Chance from 'chance';
+import LoadingReducer from '../../../src/stores/loading/LoadingReducer';
+import LoadingAction from '../../../src/stores/loading/LoadingAction';
+
+describe('LoadingAction', () => {
+    const chance = new Chance();
+
+    test('should return the initial state', () => {
+        const actual = LoadingReducer.reduce(undefined, {});
+        const expected = LoadingReducer._initialState;
+
+        expect(actual).toEqual(expected);
+    });
+
+    test('should set loading', () => {
+        const action = {
+            type: LoadingAction.SET_LOADING,
+            payload: chance.bool(),
+        };
+        const actual = LoadingReducer.reduce(undefined, action);
+        const expected = {
+            isLoading: action.payload,
+        };
+
+        expect(actual).toEqual(expected);
+    });
+
+});
diff --git a/test/stores/meta/MetaAction.spec.js b/test/stores/meta/MetaAction.spec.js
@@ -0,0 +1,20 @@
+import Chance from 'chance';
+import MetaAction from '../../../src/stores/meta/MetaAction';
+
+describe('MetaAction', () => {
+    const chance = new Chance();
+    const expectedData = {
+        title: chance.string(),
+        description: chance.string(),
+    };
+
+    test('should create an action', () => {
+        const actual = MetaAction.setMeta(expectedData);
+        const expected = {
+            type: MetaAction.SET_META,
+            payload: expectedData,
+        };
+
+        expect(actual).toEqual(expected);
+    });
+});
diff --git a/test/stores/meta/MetaReducer.spec.js b/test/stores/meta/MetaReducer.spec.js
@@ -0,0 +1,29 @@
+import Chance from 'chance';
+import MetaReducer from '../../../src/stores/meta/MetaReducer';
+import MetaAction from '../../../src/stores/meta/MetaAction';
+
+describe('MetaReducer', () => {
+    const chance = new Chance();
+
+    test('should return the initial state', () => {
+        const actual = MetaReducer.reduce(undefined, {});
+        const expected = MetaReducer._initialState;
+
+        expect(actual).toEqual(expected);
+    });
+
+    test('should set title and description', () => {
+        const action = {
+            type: MetaAction.SET_META,
+            payload: {
+                title: chance.string(),
+                description: chance.string(),
+            },
+        };
+        const actual = MetaReducer.reduce(undefined, action);
+        const expected = action.payload;
+
+        expect(actual).toEqual(expected);
+    });
+
+});
diff --git a/test/stores/render/RenderReducer.spec.js b/test/stores/render/RenderReducer.spec.js
@@ -0,0 +1,24 @@
+import Chance from 'chance';
+import RenderReducer from '../../../src/stores/render/RenderReducer';
+
+describe('RenderReducer', () => {
+    const chance = new Chance();
+
+    test('should return the initial state', () => {
+        const actual = RenderReducer.reduce(undefined, {});
+        const expected = RenderReducer._initialState;
+
+        expect(actual).toEqual(expected);
+    });
+
+    test('should set isServerSide state', () => {
+        const state = {
+            isServerSide: chance.bool(),
+        };
+        const actual = RenderReducer.reduce(state, {});
+        const expected = state;
+
+        expect(actual).toEqual(expected);
+    });
+
+});
diff --git a/test/stores/rootSaga.spec.js b/test/stores/rootSaga.spec.js
@@ -0,0 +1,29 @@
+import 'fetch-everywhere';
+import jest from 'jest';
+import {fork, takeLatest} from 'redux-saga/effects';
+import rootSaga from '../../src/stores/rootSaga';
+import UserAction from '../../src/stores/user/UserAction';
+import UserSaga from '../../src/stores/user/UserSaga';
+
+describe('rootSaga', () => {
+    const expectStoreData = {
+        renderReducer: {
+            isServerSide: true,
+        },
+    };
+
+    // TODO: mock 'const stores = yield select();` to return expectStoreData.
+    // const select = jest.fn();
+
+    test('should start root saga', async () => {
+        const generator = rootSaga();
+
+        expect(generator.next().value).toEqual(expectStoreData);
+
+        expect(generator.next().value).toEqual([
+            fork(UserSaga.loadUser),
+            takeLatest(UserAction.LOAD_USER, UserSaga.loadUser),
+        ]);
+    });
+
+});
diff --git a/test/stores/user/UserAction.spec.js b/test/stores/user/UserAction.spec.js
@@ -0,0 +1,15 @@
+import Chance from 'chance';
+import UserAction from '../../../src/stores/user/UserAction';
+
+describe('UserAction', () => {
+    const chance = new Chance();
+
+    test('should create an action', () => {
+        const actual = UserAction.loadUser();
+        const expected = {
+            type: UserAction.LOAD_USER,
+        };
+
+        expect(actual).toEqual(expected);
+    });
+});
diff --git a/test/stores/user/UserReducer.spec.js b/test/stores/user/UserReducer.spec.js
@@ -0,0 +1,24 @@
+import UserReducer from '../../../src/stores/user/UserReducer';
+import UserAction from '../../../src/stores/user/UserAction';
+
+describe('UserReducer', () => {
+
+    test('should return the initial state', () => {
+        const actual = UserReducer.reduce(undefined, {});
+        const expected = UserReducer._initialState;
+
+        expect(actual).toEqual(expected);
+    });
+
+    test('should set user data', () => {
+        const action = {
+            type: UserAction.LOAD_USER,
+            payload: UserReducer._initialState,
+        };
+        const actual = UserReducer.reduce(undefined, action);
+        const expected = action.payload;
+
+        expect(actual).toEqual(expected);
+    });
+
+});
diff --git a/test/stores/user/UserSaga.spec.js b/test/stores/user/UserSaga.spec.js
@@ -0,0 +1,66 @@
+import 'fetch-everywhere';
+import jest from 'jest';
+import nock from 'nock';
+import UserSaga from '../../../src/stores/user/UserSaga';
+import {put} from 'redux-saga/effects';
+import LoadingAction from '../../../src/stores/loading/LoadingAction';
+import UserAction from '../../../src/stores/user/UserAction';
+
+describe('UserSaga', () => {
+
+    // https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/testing-javascript-s-fetch-with-jest-happy-path
+
+    beforeEach(() => {
+        // global.fetch = jest.fn().mockImplementation(() => {
+        //     return new Promise((resolve, reject) => {
+        //         resolve({
+        //             ok: true,
+        //             json: () => {
+        //                 return {Id: '123'};
+        //             },
+        //         });
+        //     });
+        // });
+    });
+
+    afterEach(() => {
+        nock.cleanAll();
+    });
+
+    test('should loadUser', async () => {
+        const expectedBody = {
+            status: 200,
+            results: [{}],
+        };
+
+        nock('https://randomuser.me')
+            .get('/api/?inc=picture,name,email,phone,id,dob')
+            .reply(200, expectedBody);
+
+        const generator = UserSaga.loadUser();
+
+        expect(generator.next().value).toEqual(put({
+            type: LoadingAction.SET_LOADING,
+            payload: true,
+        }));
+
+        // TODO: Do I use await here or should I use generator.next().value ?
+        const response = await generator.next().value;
+        const json = await response.json();
+
+        expect(json).toEqual(expectedBody);
+
+        expect(generator.next().value).toEqual(put({
+            type: UserAction.LOAD_USER_SUCCESS,
+            payload: {},
+            meta: null,
+            error: {},
+        }));
+
+        expect(generator.next().value).toEqual(put({
+            type: LoadingAction.SET_LOADING,
+            payload: false,
+        }));
+    });
+
+});
diff --git a/test/views/about/About.spec.jsx b/test/views/about/About.spec.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import {Provider} from 'react-redux';
+import {shallow, mount, render} from 'enzyme';
+import configureStore from 'redux-mock-store';
+import MetaAction from '../../../src/stores/meta/MetaAction';
+import About from '../../../src/views/about/About';
+
+describe('About', () => {
+    const initialState = {};
+    const mockStore = configureStore();
+    let store;
+    let wrapper;
+    let component;
+
+    beforeEach(() => {
+        store = mockStore(initialState);
+        wrapper = mount(
+            <Provider store={store}>
+                <About />
+            </Provider>
+        );
+
+        component = wrapper.find(About).first();
+    });
+
+    test('should match mapStateToProps', () => {
+        // TODO: how to test mapStateToProps
+    });
+
+    test('should call setMeta action', () => {
+        const actions = store.getActions();
+        const actual = actions[0];
+        const expected = {
+            type: MetaAction.SET_META,
+            payload: {
+                title: 'About Page',
+            },
+        };
+
+        expect(actual).toEqual(expected);
+    });
+
+    test('should call X number of actions', () => {
+        const actions = store.getActions();
+        const actual = actions.length;
+        const expected = 1;
+
+        expect(actual).toBe(expected);
+    });
+
+});