Consolidate app initialization (#2053)

Author: outoftime

__mocks__/firebase/app.js

@@ -12,3 +12,5 @@ export const auth = Object.assign(() => ({}), {
 });
 
 export const initializeApp = constant({});
+
+export const remoteConfig = constant({});

__mocks__/i18next.js

@@ -1,4 +1,6 @@
 export default {
+  init: jest.fn(),
+
   t(key) {
     if (key === 'utility.or') {
       return ' or ';

__mocks__/offline-plugin/runtime.js

@@ -0,0 +1 @@
+export const install = jest.fn();

src/application.js

@@ -6,26 +6,13 @@ import './init/DOMParserShim';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Immutable from 'immutable';
-import installDevTools from 'immutable-devtools';
-import {install as installOfflinePlugin} from 'offline-plugin/runtime';
 
-import {bugsnagClient} from './util/bugsnag';
+import init from './init';
 import Application from './components/Application';
-import initI18n from './util/initI18n';
-import {initMixpanel} from './clients/mixpanel';
 
-installDevTools(Immutable);
-installOfflinePlugin({
-  onUpdateFailed() {
-    bugsnagClient.notify('ServiceWorker update failed');
-  },
-});
-
-initI18n();
-initMixpanel();
+const {store} = init();
 
 ReactDOM.render(
-  React.createElement(Application),
+  React.createElement(Application, {store}),
   document.getElementById('main'),
 );

src/components/Application.jsx

@@ -1,24 +1,17 @@
 import mapValues from 'lodash-es/mapValues';
 import React from 'react';
 import {Provider} from 'react-redux';
+import PropTypes from 'prop-types';
 
 import bowser from '../services/bowser';
-import createApplicationStore from '../createApplicationStore';
-import {ErrorBoundary, includeStoreInBugReports} from '../util/bugsnag';
+import {ErrorBoundary} from '../util/bugsnag';
 import supportedBrowsers from '../../config/browsers.json';
 import Workspace from '../containers/Workspace';
 
 import BrowserError from './BrowserError';
 import IEBrowserError from './IEBrowserError';
 
-class Application extends React.Component {
-  constructor() {
-    super();
-    const store = createApplicationStore();
-    this.state = {store};
-    includeStoreInBugReports(store);
-  }
-
+export default class Application extends React.Component {
   _isIEOrEdge() {
     return bowser.some(['Internet Explorer', 'Microsoft Edge']);
   }
@@ -43,12 +36,14 @@ class Application extends React.Component {
 
     return (
       <ErrorBoundary>
-        <Provider store={this.state.store}>
+        <Provider store={this.props.store}>
           <Workspace />
         </Provider>
       </ErrorBoundary>
     );
   }
 }
 
-export default Application;
+Application.propTypes = {
+  store: PropTypes.object.isRequired,
+};

src/components/Workspace.jsx

@@ -15,10 +15,9 @@ import i18next from 'i18next';
 import classnames from 'classnames';
 
 import prefix from '../services/inlineStylePrefixer';
-import {getQueryParameters, setQueryParameters} from '../util/queryParams';
 import {LANGUAGES} from '../util/editor';
 import {RIGHT_COLUMN_COMPONENTS} from '../util/ui';
-import {dehydrateProject, rehydrateProject} from '../clients/localStorage';
+import {dehydrateProject} from '../clients/localStorage';
 
 import {isPristineProject} from '../util/projectUtils';
 
@@ -48,21 +47,6 @@ export default class Workspace extends React.Component {
   }
 
   componentDidMount() {
-    const {onApplicationLoaded} = this.props;
-    const {gistId, snapshotKey, isExperimental} = getQueryParameters(
-      location.search,
-    );
-    const rehydratedProject = rehydrateProject();
-
-    setQueryParameters({isExperimental});
-
-    onApplicationLoaded({
-      snapshotKey,
-      gistId,
-      isExperimental,
-      rehydratedProject,
-    });
-
     addEventListener('beforeunload', this._handleUnload);
   }
 
@@ -346,7 +330,6 @@ Workspace.propTypes = {
   resizableFlexRefs: PropTypes.array.isRequired,
   shouldRenderOutput: PropTypes.bool.isRequired,
   title: PropTypes.string.isRequired,
-  onApplicationLoaded: PropTypes.func.isRequired,
   onClickInstructionsEditButton: PropTypes.func.isRequired,
   onComponentToggle: PropTypes.func.isRequired,
   onResizableFlexDividerDrag: PropTypes.func.isRequired,

src/containers/Workspace.js

@@ -16,7 +16,6 @@ import {
 } from '../selectors';
 import {
   toggleComponent,
-  applicationLoaded,
   startDragColumnDivider,
   stopDragColumnDivider,
   startEditingInstructions,
@@ -52,10 +51,6 @@ function mapStateToProps(state) {
 
 function mapDispatchToProps(dispatch) {
   return {
-    onApplicationLoaded(payload) {
-      dispatch(applicationLoaded(payload));
-    },
-
     onComponentToggle(projectKey, componentName) {
       dispatch(toggleComponent(projectKey, componentName));
     },

src/init/__tests__/index.test.js

@@ -0,0 +1,110 @@
+import findLast from 'lodash-es/findLast';
+import get from 'lodash-es/get';
+import mixpanel from 'mixpanel-browser';
+import uuid from 'uuid/v4';
+
+import {rehydrateProject} from '../../clients/localStorage';
+import createApplicationStore from '../../createApplicationStore';
+import config from '../../config';
+
+import {applicationLoaded} from '../../actions';
+
+import {firebaseProjectFactory} from '../../../__factories__/data/firebase';
+
+import i18next from 'i18next';
+
+import init from '..';
+
+jest.mock('../../clients/localStorage');
+jest.mock('../../clients/firebase');
+jest.mock('../../createApplicationStore');
+
+describe('init()', () => {
+  let dispatch;
+  let store;
+
+  beforeEach(() => {
+    dispatch = jest.fn();
+    store = {dispatch};
+    createApplicationStore.mockReturnValue(store);
+  });
+
+  test('initializes i18next', () => {
+    init();
+    expect(i18next.init).toHaveBeenCalledWith(expect.anything());
+  });
+
+  test('initializes mixpanel', async () => {
+    init();
+    await new Promise(resolve => {
+      mixpanel.init.mockImplementation(resolve);
+    });
+    expect(mixpanel.init).toHaveBeenCalledWith(config.mixpanelToken);
+  });
+
+  describe('applicationLoaded', () => {
+    let dispatchInvoked;
+
+    beforeEach(() => {
+      dispatchInvoked = new Promise(resolve => {
+        dispatch.mockImplementation(resolve);
+      });
+    });
+
+    async function dispatchedAction() {
+      await dispatchInvoked;
+      return get(
+        findLast(
+          dispatch.mock.calls,
+          ([action]) => action.type === applicationLoaded.toString(),
+        ),
+        ['0'],
+      );
+    }
+
+    test('dispatches action', async () => {
+      init();
+
+      const action = await dispatchedAction();
+      expect(action).toBeDefined();
+    });
+
+    test('reads gist ID from query and removes it', async () => {
+      history.pushState(null, '', '/?gist=12345');
+      init();
+      const {
+        payload: {gistId},
+      } = await dispatchedAction();
+      expect(gistId).toBe('12345');
+      expect(location.search).toBeFalsy();
+    });
+
+    test('reads snapshot key from query and removes it', async () => {
+      const snapshotKey = uuid();
+      history.pushState(null, '', `/?snapshot=${snapshotKey}`);
+      init();
+      const {payload} = await dispatchedAction();
+      expect(payload.snapshotKey).toEqual(snapshotKey);
+    });
+
+    test('reads experimental mode from query and leaves it', async () => {
+      history.pushState(null, '', '/?experimental');
+      init();
+      const {
+        payload: {isExperimental},
+      } = await dispatchedAction();
+      expect(isExperimental).toBe(true);
+      expect(location.search).toBe('?experimental');
+    });
+
+    test('rehydrates project', async () => {
+      const project = firebaseProjectFactory.build();
+      rehydrateProject.mockReturnValue(project);
+      init();
+      const {
+        payload: {rehydratedProject},
+      } = await dispatchedAction();
+      expect(rehydratedProject).toBe(project);
+    });
+  });
+});

src/init/index.js

@@ -0,0 +1,48 @@
+import Immutable from 'immutable';
+import installDevTools from 'immutable-devtools';
+import {install as installOfflinePlugin} from 'offline-plugin/runtime';
+
+import {initMixpanel} from '../clients/mixpanel';
+import createApplicationStore from '../createApplicationStore';
+import {bugsnagClient, includeStoreInBugReports} from '../util/bugsnag';
+import {getQueryParameters, setQueryParameters} from '../util/queryParams';
+import {rehydrateProject} from '../clients/localStorage';
+import {applicationLoaded} from '../actions';
+
+import initI18n from './initI18n';
+
+async function initApplication(store) {
+  const {gistId, snapshotKey, isExperimental} = getQueryParameters(
+    location.search,
+  );
+  setQueryParameters({isExperimental});
+  const rehydratedProject = rehydrateProject();
+
+  store.dispatch(
+    applicationLoaded({
+      snapshotKey,
+      gistId,
+      isExperimental,
+      rehydratedProject,
+    }),
+  );
+}
+
+export default function init() {
+  const store = createApplicationStore();
+  includeStoreInBugReports(store);
+
+  initI18n();
+  initMixpanel();
+
+  initApplication(store);
+
+  installDevTools(Immutable);
+  installOfflinePlugin({
+    onUpdateFailed() {
+      bugsnagClient.notify('ServiceWorker update failed');
+    },
+  });
+
+  return {store};
+}

src/util/initI18n.js src/init/initI18n.jssrc/util/initI18n.js renamed to src/init/initI18n.js

@@ -2,7 +2,7 @@ import i18next from 'i18next';
 
 import resources from '../../locales';
 
-import applyCustomI18nFormatters from './i18nFormatting';
+import applyCustomI18nFormatters from '../util/i18nFormatting';
 
 export default function initI18n() {
   i18next.init({