Server-side loading of TC user profile + misc fixes

Author: birdofpreyru

.babelrc

@@ -6,18 +6,6 @@
   "plugins": [
     "inline-react-svg",
     ["module-resolver", {
-      "alias": {
-        // NOTE: Some aliases related to assets and styles are defined in
-        // webpack config.
-        "actions": "./actions",
-        "components": "./components",
-        "containers": "./containers",
-        "reducers": "./reducers",
-        "routes": "./routes",
-        "server": "./server",
-        "services": "./services",
-        "utils": "./utils"
-      },
       "extensions": [".js", ".jsx"],
       "root": [
         "./src/shared",

__mocks__/redux-devtools-dock-monitor.js

@@ -0,0 +1,9 @@
+/**
+ * Mock redux-devtools-dock-monitor module.
+ * Allows to test development-only code depending on that module even
+ * in production environment, where that module is not installed.
+ */
+
+export default function ReduxDevtoolsDockMonitor() {
+  return null;
+}

__mocks__/redux-devtools-log-monitor.js

@@ -0,0 +1,3 @@
+export default function ReduxDevtoolsLogMonitor() {
+  return null;
+}

__mocks__/redux-devtools.js

@@ -0,0 +1,9 @@
+import _ from 'lodash';
+
+export function createDevTools(obj) {
+  const res = () => obj;
+  res.instrument = _.noop;
+  return res;
+}
+
+export default undefined;

__mocks__/webpack-dev-middleware.js

@@ -0,0 +1,5 @@
+function webpackDevMiddleware(req, res, next) {
+  if (next) next();
+}
+
+module.exports = () => webpackDevMiddleware;

__mocks__/webpack-hot-middleware.js

@@ -0,0 +1,5 @@
+function webpackHotMiddleware(req, res, next) {
+  if (next) next();
+}
+
+module.exports = () => webpackHotMiddleware;

__mocks__/webpack.js

@@ -0,0 +1,3 @@
+import _ from 'lodash';
+
+module.exports = _.noop;

__tests__/client/index.jsx

@@ -106,11 +106,16 @@ jest.setMock(`${SRC}/shared/actions/auth`, mockAuthActions);
 const mockStoreFactory = jest.fn(() => Promise.resolve({
   dispatch: _.noop,
   getState: () => ({
-    auth: {},
+    auth: {
+      tokenV2: '12345',
+      tokenV3: '12345',
+    },
   }),
 }));
 jest.setMock(`${SRC}/shared/store-factory`, mockStoreFactory);
 
+/* Some other mocks */
+
 jest.setMock(`${SRC}/shared`, {
   default: () => <div>Application</div>,
 });
@@ -173,6 +178,23 @@ describe('Properly starts with process.env.FRONT_ENV evaluating true', () => {
     }),
   );
 
+  test('Does not write auth tokens to the state, when no need to', () =>
+    new Promise((resolve) => {
+      tokenV2 = '12345';
+      tokenV3 = '12345';
+      require(MODULE);
+
+      /* NOTE: We have mocked getFreshToken to return Promise.resolve(..),
+       * which resolves immediately. Thus, this call to setImmediate(..) is
+       * enough to wait until tokens are processed. */
+      setImmediate(() => {
+        expect(mockAuthActions.auth.setTcTokenV2).not.toHaveBeenCalled();
+        expect(mockAuthActions.auth.setTcTokenV3).not.toHaveBeenCalled();
+        resolve();
+      });
+    }),
+  );
+
   test('Clears auth cookies when authorization fails', () =>
     new Promise((done) => {
       mockTcAccounts.getFreshToken = () => Promise.reject('');

__tests__/server/server.js

@@ -2,27 +2,16 @@ import _ from 'lodash';
 
 const MODULE = require.resolve('server/server');
 
-jest.setMock('webpack', _.noop);
 jest.setMock('../../config/webpack/development', {
   output: {
     publicPath: '',
   },
 });
-jest.setMock('../../src/server/renderer', _.noop);
-
-/*
-jest.setMock('webpack-dev-middleware', () =>
-  (req, res, next) => next && next(),
-);
-
-jest.setMock('webpack-hot-middleware', () =>
-  (req, res, next) => next && next(),
-);
-*/
+jest.setMock(require.resolve('server/renderer'), _.noop);
 
 afterAll(() => {
+  delete process.env.DEV_TOOLS;
   delete process.env.FRONT_END;
-  process.env.NODE_ENV = 'test';
 });
 
 beforeEach(() => {
@@ -39,8 +28,14 @@ test('Does not throw when executed at the back end', () => {
   expect(() => require(MODULE)).not.toThrow();
 });
 
-test('Does not throw when executed at the back end in dev', () => {
-  process.env.NODE_ENV = 'development';
+test('Does not throw when executed with pipe name', () => {
+  process.env.PORT = 80;
+  expect(() => require(MODULE)).not.toThrow();
+  delete process.env.PORT;
+});
+
+test('Does not throw when uses dev tools', () => {
+  process.env.DEV_TOOLS = true;
   expect(() => require(MODULE)).not.toThrow();
-  process.env.NODE_ENV = 'test';
+  delete process.env.DEV_TOOLS;
 });

__tests__/shared/containers/DevTools.jsx

@@ -2,27 +2,22 @@
  * work in prod until we find a way to mock a non-installed module. I believe,
  * Babel should be able to help here. */
 
+/*
 import _ from 'lodash';
 
 test('placeholder', _.noop);
+*/
+
 
-/*
 import React from 'react';
 import Rnd from 'react-test-renderer/shallow';
-import { createStore } from 'redux';
 
-jest.setMock('redux-devtools', {});
 const DevTools = require('containers/DevTools').default;
 
 const rnd = new Rnd();
-const store = createStore(() => ({}), {}, DevTools.instrument());
+// const store = createStore(() => ({}), {}, DevTools.instrument());
 
 test('Snapshot match', () => {
-  rnd.render((
-    <DevTools
-      store={store}
-    />
-  ));
+  rnd.render(<DevTools />);
   expect(rnd.getRenderOutput()).toMatchSnapshot();
 });
-*/

__tests__/shared/containers/__snapshots__/DevTools.jsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snapshot match 1`] = `
+<ReduxDevtoolsDockMonitor
+  changePositionKey="ctrl-p"
+  toggleVisibilityKey="ctrl-m"
+>
+  <ReduxDevtoolsLogMonitor
+    theme="tomorrow"
+  />
+</ReduxDevtoolsDockMonitor>
+`;

__tests__/shared/reducers/auth.js

@@ -0,0 +1,85 @@
+import { mockAction } from 'utils/mock';
+import { toFSA } from 'utils/redux';
+
+const dummy = 'DUMMY';
+
+const mockActions = {
+  auth: {
+    loadProfile: mockAction('LOAD_PROFILE', Promise.resolve('Profile')),
+    setTcTokenV2: mockAction('SET_TC_TOKEN_V2', 'Token V2'),
+    setTcTokenV3: mockAction('SET_TC_TOKEN_V3', 'Token V3'),
+  },
+};
+jest.setMock(require.resolve('actions/auth'), mockActions);
+
+jest.setMock('tc-accounts', {
+  decodeToken: () => 'User object',
+});
+
+const reducers = require('reducers/auth');
+
+function testReducer(reducer, istate) {
+  test('Initial state', () => {
+    const state = reducer(undefined, {});
+    expect(state).toEqual(istate);
+  });
+
+  test('Load profile', () =>
+    toFSA(mockActions.auth.loadProfile()).then((action) => {
+      const state = reducer({ dummy }, action);
+      expect(state).toEqual({
+        dummy,
+        profile: 'Profile',
+      });
+    }),
+  );
+
+  test('Set TC Token V2', () => {
+    const state = reducer({ dummy }, mockActions.auth.setTcTokenV2());
+    expect(state).toEqual({
+      dummy,
+      tokenV2: 'Token V2',
+    });
+  });
+
+  test('Set TC Token V3', () => {
+    const state = reducer({ dummy }, mockActions.auth.setTcTokenV3());
+    expect(state).toEqual({
+      dummy,
+      tokenV3: 'Token V3',
+      user: 'User object',
+    });
+  });
+
+  test('Set TC Token V3 with failure', () => {
+    mockActions.auth.setTcTokenV3 = mockAction('SET_TC_TOKEN_V3', null);
+    const state = reducer({ dummy }, mockActions.auth.setTcTokenV3());
+    expect(state).toEqual({
+      dummy,
+      tokenV3: null,
+      user: null,
+    });
+    mockActions.auth.setTcTokenV3 = mockAction('SET_TC_TOKEN_V3', 'Token V3');
+  });
+}
+
+describe('Default reducer', () => {
+  testReducer(reducers.default, {});
+});
+
+describe('Factory without server side rendering', () =>
+  reducers.factory().then(res =>
+    testReducer(res, {}),
+  ),
+);
+
+describe('Factory with server side rendering', () =>
+  reducers.factory({
+    cookies: {
+      tcjwt: 'Token V2',
+      tctV3: 'Token V3',
+    },
+  }).then(res =>
+    testReducer(res, {}),
+  ),
+);

__tests__/shared/store-factory.js

@@ -1,7 +1,7 @@
 const MODULE = require.resolve('shared/store-factory');
 
 afterAll(() => {
-  process.env.NODE_ENV = 'test';
+  delete process.env.DEV_TOOLS;
 });
 
 beforeEach(() => {
@@ -12,9 +12,9 @@ test('Does not throw', () => {
   expect(() => require(MODULE)).not.toThrow();
 });
 
-test('Does not throw in dev', () => {
-  process.env.NODE_ENV = 'development';
+test('Does not throw when uses dev tools', () => {
+  process.env.DEV_TOOLS = true;
   expect(() => require(MODULE)).not.toThrow();
-  process.env.NODE_ENV = 'test';
+  delete process.env.DEV_TOOLS;
 });
 

config/jest/default.json

@@ -6,10 +6,10 @@
   "coverageDirectory": "__coverage__",
   "coverageThreshold": {
     "global": {
-      "branches": 77.00,
-      "functions": 88.50,
-      "lines": 88.75,
-      "statements": 87.50
+      "branches": 80.00,
+      "functions": 90.00,
+      "lines": 90.00,
+      "statements": 90.00
     }
   },
   "moduleNameMapper": {

src/client/index.jsx

@@ -62,13 +62,9 @@ function authenticate(store) {
   }).then(({ tctV2, tctV3 }) => {
     const auth = store.getState().auth;
 
-    /* TODO: Once the server-side rendering supports proper loading of the
-     * user profile, this dispatch should be moved inside the first if block.
-     */
-    store.dispatch(actions.auth.loadProfile(tctV3));
-
     if (auth.tokenV3 !== (tctV3 || null)) {
       store.dispatch(actions.auth.setTcTokenV3(tctV3));
+      store.dispatch(actions.auth.loadProfile(tctV3));
     }
     if (auth.tokenV2 !== (tctV2 || null)) {
       store.dispatch(actions.auth.setTcTokenV2(tctV2));

src/shared/reducers/auth.js

@@ -5,6 +5,19 @@
 import actions from 'actions/auth';
 import { handleActions } from 'redux-actions';
 import { decodeToken } from 'tc-accounts';
+import { toFSA } from 'utils/redux';
+
+/**
+ * Handles actions.auth.loadProfile action.
+ * @param {Object} state
+ * @param {Object} action
+ */
+function onProfileLoaded(state, action) {
+  return {
+    ...state,
+    profile: action.payload,
+  };
+}
 
 /**
  * Creates a new Auth reducer with the specified initial state.
@@ -13,10 +26,7 @@ import { decodeToken } from 'tc-accounts';
  */
 function create(initialState) {
   return handleActions({
-    [actions.auth.loadProfile]: (state, action) => ({
-      ...state,
-      profile: action.payload,
-    }),
+    [actions.auth.loadProfile]: onProfileLoaded,
     [actions.auth.setTcTokenV2]: (state, action) => ({
       ...state,
       tokenV2: action.payload,
@@ -44,6 +54,11 @@ export function factory(req) {
     tokenV3,
     user: tokenV3 ? decodeToken(tokenV3) : null,
   };
+  if (tokenV3) {
+    return toFSA(actions.auth.loadProfile(tokenV3)).then(res =>
+      create(onProfileLoaded(state, res)),
+    );
+  }
   return Promise.resolve(create(state));
 }