#317: Client implementation complete

client/package.json

@@ -46,12 +46,12 @@
   },
   "devDependencies": {
     "@babel/core": "7.3.3",
-    "@babel/plugin-proposal-object-rest-spread": "7.3.2",
+    "@babel/plugin-proposal-object-rest-spread": "7.5.5",
     "@babel/plugin-syntax-dynamic-import": "7.2.0",
-    "@babel/plugin-transform-runtime": "7.2.0",
-    "@babel/preset-env": "7.3.1",
+    "@babel/plugin-transform-runtime": "7.5.5",
+    "@babel/preset-env": "7.5.5",
     "@babel/preset-react": "7.0.0",
-    "@babel/runtime": "7.3.1",
+    "@babel/runtime": "7.5.5",
     "@material/button": "^2.1.1",
     "@material/card": "^2.1.1",
     "@material/checkbox": "^2.1.1",

client/src/google-analytics/__tests__/__snapshots__/google-analytics.test.jsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Google Analytics component test suite Snapshot render Tracking ID NOT set in global variable, should render empty 1`] = `""`;
+
+exports[`Google Analytics component test suite Snapshot render Tracking ID set in global variable, should render script 1`] = `
+<Fragment>
+  <script
+    async={true}
+    src="https://www.googletagmanager.com/gtag/js?id=UA-1337-33"
+  />
+  <script>
+    
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+gtag('config', 'UA-1337-33');
+      
+  </script>
+</Fragment>
+`;

client/src/google-analytics/__tests__/google-analytics.test.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {shallow} from 'enzyme/build';
+
+describe('Google Analytics component test suite', () => {
+  let googleAnalyticsTrackingId;
+  let GoogleAnalytics;
+  beforeEach(() => {
+    jest.mock('../selectors');
+    googleAnalyticsTrackingId = require('../selectors').googleAnalyticsTrackingId;
+    GoogleAnalytics = require('../').default;
+  });
+  describe('Snapshot render', () => {
+    test('Tracking ID set in global variable, should render script', () => {
+      // Given
+      googleAnalyticsTrackingId.mockImplementationOnce(() => 'UA-1337-33');
+      // When
+      const routes = shallow(<GoogleAnalytics />);
+      // Then
+      expect(routes).toMatchSnapshot();
+    });
+    test('Tracking ID NOT set in global variable, should render empty', () => {
+      // Given
+      googleAnalyticsTrackingId.mockImplementationOnce(() => null);
+      // When
+      const routes = shallow(<GoogleAnalytics />);
+      // Then
+      expect(routes).toMatchSnapshot();
+    });
+  });
+});

client/src/google-analytics/__tests__/selectors.test.js

@@ -0,0 +1,28 @@
+
+describe('Google Analytics selectors test suite', () => {
+  let globals;
+  let selectors;
+  beforeEach(() => {
+    jest.mock('../../selectors/globals');
+    globals = require('../../selectors/globals');
+    selectors = require('../selectors');
+  });
+  describe('googleAnalyticsTrackingId', () => {
+    test('Tacking code exists, should return tracking code', () => {
+      // Given
+      globals.getIsotopeConfiguration.mockImplementationOnce(() => ({googleAnalyticsTrackingId: 'UA-1337-33'}));
+      // When
+      const result = selectors.googleAnalyticsTrackingId();
+      // Then
+      expect(result).toBe('UA-1337-33');
+    });
+    test('Tacking code NOT in configuration, should return undefined', () => {
+      // Given
+      globals.getIsotopeConfiguration.mockImplementationOnce(() => ({}));
+      // When
+      const result = selectors.googleAnalyticsTrackingId();
+      // Then
+      expect(result).toBeUndefined();
+    });
+  });
+});

client/src/google-analytics/google-analytics.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {googleAnalyticsTrackingId} from './selectors';
+
+const GoogleAnalytics = () => {
+  const trackingId = googleAnalyticsTrackingId();
+  return trackingId && (
+    <>
+      <script async src={`https://www.googletagmanager.com/gtag/js?id=${trackingId}`} />
+      <script>
+        {`
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+gtag('config', '${trackingId}');
+      `}
+      </script>
+    </>
+  );
+};
+
+export default GoogleAnalytics;

client/src/google-analytics/index.js

@@ -0,0 +1,2 @@
+
+export {default} from './google-analytics';

client/src/google-analytics/selectors.js

@@ -0,0 +1,4 @@
+import get from 'lodash/get';
+import {getIsotopeConfiguration} from '../selectors/globals';
+
+export const googleAnalyticsTrackingId = () => get(getIsotopeConfiguration(), 'googleAnalyticsTrackingId');

client/src/index.jsx

@@ -8,6 +8,7 @@ import debounce from './services/debounce';
 import i18n from './services/i18n';
 import {loadState, saveState} from './services/state';
 import Routes from './routes/routes';
+import GoogleAnalytics from './google-analytics';
 import rootReducer from './reducers';
 
 const SAVE_STATE_DEBOUNCE_PERIOD_IN_MILLIS = 500;
@@ -29,11 +30,14 @@ async function init () {
   store.subscribe(debounce(() => saveState(store.dispatch, store.getState()), SAVE_STATE_DEBOUNCE_PERIOD_IN_MILLIS));
 
   ReactDOM.render(
-    <Provider store={store}>
-      <I18nextProvider i18n={i18n}>
-        <Routes />
-      </I18nextProvider>
-    </Provider>,
+    <>
+      <Provider store={store}>
+        <I18nextProvider i18n={i18n}>
+          <Routes />
+        </I18nextProvider>
+      </Provider>
+      <GoogleAnalytics />
+    </>,
     document.getElementById('root')
   );
 }

client/src/routes/__tests__/__snapshots__/routes.test.jsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Routes component test suite Snapshot render 1`] = `
+<Router
+  basename="/"
+  history={
+    Object {
+      "action": "POP",
+      "block": [Function],
+      "createHref": [Function],
+      "go": [Function],
+      "goBack": [Function],
+      "goForward": [Function],
+      "length": 1,
+      "listen": [Function],
+      "location": Object {
+        "hash": "",
+        "pathname": "/",
+        "search": "",
+        "state": undefined,
+      },
+      "push": [Function],
+      "replace": [Function],
+    }
+  }
+>
+  <Switch>
+    <Route
+      exact={true}
+      path="/configuration-not-found"
+      render={[Function]}
+    />
+    <Connect(ApplicationReadyRoute)
+      exact={true}
+      path="/login"
+      render={[Function]}
+    />
+    <Connect(ApplicationReadyRoute)
+      component={[Function]}
+      exact={true}
+      path="/"
+    />
+  </Switch>
+</Router>
+`;

client/src/routes/__tests__/routes.test.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import {shallow} from 'enzyme/build';
+import Routes from '../routes';
+
+
+describe('Routes component test suite', () => {
+  test('Snapshot render', () => {
+    // When
+    const routes = shallow(<Routes />);
+    // Then
+    expect(routes).toMatchSnapshot();
+  });
+});

client/src/routes/routes.jsx

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React from 'react';
 import {Router, Route, Switch} from 'react-router-dom';
 import history from './history';
 import ApplicationReadyRoute from './application-ready-route';
@@ -7,18 +7,14 @@ import ConfigurationNotFound from '../components/error-pages/configuration-not-f
 import Login from '../components/login/login';
 import '../styles/main.scss';
 
-class Routes extends Component {
-  render() {
-    return (
-      <Router basename='/' history={history}>
-        <Switch>
-          <Route exact path="/configuration-not-found" render={() => <ConfigurationNotFound />} />
-          <ApplicationReadyRoute exact path="/login" render={() => <Login />} />
-          <ApplicationReadyRoute exact path="/" component={App} />
-        </Switch>
-      </Router>
-    );
-  }
-}
+const Routes = () => (
+  <Router basename='/' history={history}>
+    <Switch>
+      <Route exact path="/configuration-not-found" render={() => <ConfigurationNotFound />} />
+      <ApplicationReadyRoute exact path="/login" render={() => <Login />} />
+      <ApplicationReadyRoute exact path="/" component={App} />
+    </Switch>
+  </Router>
+);
 
 export default Routes;