#317: Refactored hooks, complete tests

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import {mount} from 'enzyme/build';
+import {useAnalytics} from '../hooks';
+
+describe('Google Analytics hooks test suite', () => {
+  describe('useAnaltyics', () => {
+    let PlaceHolder;
+    beforeEach(() => {
+      delete window.dataLayer;
+      delete window.gtag;
+      PlaceHolder = ({updatableProperty = ''}) => {
+        useAnalytics();
+        return (<span>{updatableProperty}</span>);
+      };
+    });
+    test('componentDidMount, should load script and add helper functions', () => {
+      // Given
+      window.isotopeConfiguration = {googleAnalyticsTrackingId: 'UA-1337-33'};
+      // When
+      mount(<PlaceHolder />);
+      // Then
+      expect(window.gtag).toBeInstanceOf(Function);
+      expect(window.dataLayer).toHaveLength(2);
+      expect(window.dataLayer.map(args => [...args])).toEqual([
+        ['js', expect.any(Date)],
+        ['config', 'UA-1337-33', {page_path: '/'}]
+      ]);
+    });
+    test('componentDidUpdate, should update page location', () => {
+      // Given
+      window.isotopeConfiguration = {googleAnalyticsTrackingId: 'UA-1337-33'};
+      const rendered = mount(<PlaceHolder updatableProperty="First Pass" />);
+      // When
+      rendered.setProps({updatableProperty: 'Second Pass'});
+      // Then
+      expect(window.gtag).toBeInstanceOf(Function);
+      expect(window.dataLayer).toHaveLength(3);
+      expect(window.dataLayer.map(args => [...args])).toEqual([
+        ['js', expect.any(Date)],
+        ['config', 'UA-1337-33', {page_path: '/'}],
+        ['config', 'UA-1337-33', {page_path: '/'}]
+      ]);
+    });
+  });
+});

client/src/google-analytics/hooks.js

@@ -4,16 +4,19 @@ import isFunction from 'lodash/isFunction';
 import {googleAnalyticsTrackingId} from './selectors';
 
 const updateLocation = trackingId => {
-  if (isFunction(window.gtag)) {
-    window.gtag('config', trackingId, {
-      page_path: get(window, 'location.pathname')
-    });
-  }
+  window.gtag('config', trackingId, {
+    page_path: get(window, 'location.pathname')
+  });
 };
 
 export const useAnalytics = () => {
   const trackingId = googleAnalyticsTrackingId();
   if (trackingId) {
+    useEffect(() => {
+      if (isFunction(window.gtag)) {
+        updateLocation(trackingId);
+      }
+    });
     useEffect(() => {
       const scriptLoader = document.createElement('script');
       scriptLoader.async = true;
@@ -29,12 +32,3 @@ export const useAnalytics = () => {
     }, []);
   }
 };
-
-export const updateAnalytics = () => {
-  const trackingId = googleAnalyticsTrackingId();
-  if (trackingId) {
-    useEffect(() => {
-      updateLocation(trackingId);
-    });
-  }
-};

client/src/google-analytics/index.js

@@ -1,4 +1,3 @@
 export {
-  useAnalytics,
-  updateAnalytics
+  useAnalytics
 } from './hooks';

client/src/routes/routes.jsx

@@ -5,12 +5,11 @@ import ApplicationReadyRoute from './application-ready-route';
 import App from '../components/app';
 import ConfigurationNotFound from '../components/error-pages/configuration-not-found';
 import Login from '../components/login/login';
-import {useAnalytics, updateAnalytics} from '../google-analytics';
+import {useAnalytics} from '../google-analytics';
 import '../styles/main.scss';
 
 const SwitchWrapper = () => {
   useAnalytics();
-  updateAnalytics();
   return (
     <Switch>
       <Route exact path="/configuration-not-found" render={() => <ConfigurationNotFound />} />