chore(toasts): refactor and test flash to toast logic

client/index.js

@@ -11,11 +11,11 @@ import {
 import { render } from 'redux-epic';
 import { createHistory } from 'history';
 import useLangRoutes from './utils/use-lang-routes';
-import sendPageAnalytics from './utils/send-page-analytics.js';
+import sendPageAnalytics from './utils/send-page-analytics';
+import flashToToast from './utils/flash-to-toast';
 
 import createApp from '../common/app';
 import provideStore from '../common/app/provide-store';
-import { makeToast } from '../common/app/toasts/redux/actions';
 
 // client specific sagas
 import sagas from './sagas';
@@ -35,19 +35,7 @@ const initialState = isColdStored() ?
   getColdStorage() :
   window.__fcc__.data;
 initialState.app.csrfToken = csrfToken;
-
-const toasts = Object.keys(window.__fcc__.flash)
-  .map(key => {
-    const messages = window.__fcc__.flash[key];
-    return messages.map(message => ({
-      message: message.msg,
-      type: key,
-      timeout: 5000
-    }));
-  })
-  .reduce((toasts, messages) => toasts.concat(messages), [])
-  .map(makeToast)
-  .map(({ payload }) => payload);
+initialState.toasts = flashToToast(window.__fcc__.flash);
 
 delete window.__fcc__;
 
@@ -72,7 +60,7 @@ createApp({
     syncHistoryWithStore,
     syncOptions: { adjustUrlOnReplay },
     serviceOptions,
-    initialState: { ...initialState, toasts },
+    initialState,
     middlewares: [ routerMiddleware(history) ],
     sagas: [...sagas ],
     sagaOptions,

client/utils/flash-to-toast.js

@@ -0,0 +1,16 @@
+import { makeToast } from '../../common/app/toasts/redux/actions';
+
+export default function flashToToast(flash) {
+  return Object.keys(flash)
+    .map(key => {
+      const messages = flash[key];
+      return messages.map(message => ({
+        message: message.msg,
+        type: key,
+        timeout: 5000
+      }));
+    })
+    .reduce((toasts, messages) => toasts.concat(messages), [])
+    .map(makeToast)
+    .map(({ payload }) => payload);
+}

client/utils/flash-to-toast.test.js

@@ -0,0 +1,32 @@
+import test from 'tape';
+
+import flashToToast from './flash-to-toast';
+
+test('client/utils/flash-to-toast.js', t => {
+  t.test('should return an array', t => {
+    t.plan(2);
+    const toasts = flashToToast({});
+    t.assert(Array.isArray(toasts), 'toasts was not an array');
+    t.equal(toasts.length, 0, 'toasts should be empty');
+  });
+  t.test('should convert keyed messages to typed toasts', t => {
+    t.plan(3);
+    const expected = [{ message: 'foo', type: 'info' }];
+    const actual = flashToToast({
+      info: [{ msg: 'foo' }]
+    });
+    t.equal(
+      expected.length,
+      actual.length,
+      'number of toasts does not match number of messages'
+    );
+    t.equal(
+      expected[0].type,
+      actual[0].type
+    );
+    t.equal(
+      expected[0].message,
+      actual[0].message
+    );
+  });
+});

package.json

@@ -24,7 +24,9 @@
     "snyk-protect": "snyk protect",
     "prepublish": "npm run snyk-protect",
     "test-challenges": "babel-node seed/test-challenges.js | tap-spec",
-    "test-js": "tape -r babel-register 'common/**/*.test.js'",
+    "test-js": "npm run test-js-client && npm run test-js-common",
+    "test-js-client": "tape -r babel-register 'client/**/*.test.js' | tap-spec",
+    "test-js-common": "tape -r babel-register 'common/**/*.test.js' | tap-spec",
     "test": "npm run test-js && npm run test-challenges",
     "cover": "babel-node ./node_modules/.bin/babel-istanbul cover tape common/**/*.test.js",
     "coveralls": "npm run cover && istanbul-coveralls"