Remove default CustomEvent dispatcher (v4.0.0) (#35)

* Remove default custom-event behavior (replace with GTM dataLayer[] push)

* Add tests for console.error in class decorator

* Build

* docs

* 4.0.0

* Remove roadmap (that's what GH Issues are for :) )

Author: tizmagik

README.md

@@ -9,7 +9,7 @@
 ## Installation
 
 ```
-npm install --save nytm/nyt-react-tracking#v3.0.0
+npm install --save nytm/nyt-react-tracking#v4.0.0
 ```
 
 (Or whatever is the [latest version](https://github.com/nytm/nyt-react-tracking/releases))
@@ -18,7 +18,7 @@ npm install --save nytm/nyt-react-tracking#v3.0.0
 `@track()` expects two arguments, `trackingData` and `options`.
 - `trackingData` represents the data to be tracked (or a function returning that data)
 - `options` is an optional object that accepts three properties:
-  - `dispatch`, which is a function to use instead of the default CustomEvent dispatch behavior. See the section on custom `dispatch()` later in this document.
+  - `dispatch`, which is a function to use instead of the default dispatch behavior. See the section on custom `dispatch()` later in this document.
   - `dispatchOnMount`, when set to `true`, dispatches the tracking data when the component mounts to the DOM. When provided as a function will be called on componentDidMount with all of the tracking context data as the only argument.
   - `process`, which is a function that can be defined once on some top-level component, used for selectively dispatching tracking events based on each component's tracking data. See more details later in this document.
 
@@ -93,9 +93,9 @@ This is also how you would use this module without `@decorators`, although this
 
 ### Custom `options.dispatch()` for tracking data
 
-By default, data tracking objects are dispatched as a CustomEvent on `document` (see [src/dispatchTrackingEvent.js](src/dispatchTrackingEvent.js)). You can override this by passing in a dispatch function as a second parameter to the tracking decorator `{ dispatch: fn() }` on some top-level component high up in your app (typically some root-level component that wraps your entire app).
+By default, data tracking objects are pushed to `window.dataLayer[]` (see [src/dispatchTrackingEvent.js](src/dispatchTrackingEvent.js)). This is a good default if you use Google Tag Manager. You can override this by passing in a dispatch function as a second parameter to the tracking decorator `{ dispatch: fn() }` on some top-level component high up in your app (typically some root-level component that wraps your entire app).
 
-For example, to push objects to `window.dataLayer[]` (e.g. for Google Tag Manager) instead, you would decorate your top-level `<App />` component like this:
+For example, to push objects to `window.myCustomDataLayer[]` (e.g. for Google Tag Manager) instead, you would decorate your top-level `<App />` component like this:
 
 ```js
 import React, { Component } from 'react';
@@ -266,10 +266,3 @@ Note that there are no restrictions on the objects that are passed in to the dec
 **The format for the tracking data object is a contract between your app and the ultimate consumer of the tracking data.**
 
 This library simply merges the tracking data objects together (as it flows through your app's React component hierarchy) into a single object that's ultimately sent to the tracking library.
-
-
-## Roadmap
-
-- Integration with [tracking-schema](https://github.com/nytm/tracking-schema) to provide developer warnings/errors on invalid data objects
-- DataLayer adapters (so that where the data goes can vary by app, e.g. to EventTracker or Google Analytics etc.)
-- Babel plugin ?

build/dispatchTrackingEvent.js

@@ -1,18 +1,9 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = dispatchTrackingEvent;
-
-var _customEvent = require('custom-event');
-
-var _customEvent2 = _interopRequireDefault(_customEvent);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function dispatchTrackingEvent(data) {
-  document.dispatchEvent(new _customEvent2.default('FirehoseTrackingEvent', {
-    detail: data
-  }));
+  (window.dataLayer = window.dataLayer || []).push(data);
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyt/nyt-react-tracking",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Declarative tracking for React apps.",
   "author": "The New York Times",
   "contributors": [
@@ -47,7 +47,6 @@
   ],
   "homepage": "https://github.com/nytm/nyt-react-tracking",
   "dependencies": {
-    "custom-event": "^1.0.1",
     "lodash.merge": "^4.6.0"
   },
   "peerDependencies": {

src/__tests__/dispatchTrackingEvent.test.js

@@ -1,24 +1,31 @@
-const mockCustomEvent = jest.fn();
-jest.setMock('custom-event', mockCustomEvent);
+import dispatchTrackingEvent from '../dispatchTrackingEvent';
 
-const mockDispatchEvent = jest.fn();
-global.document.dispatchEvent = mockDispatchEvent;
+const testEventData = { test: 'magik' };
 
 describe('dispatchTrackingEvent', () => {
-  // eslint-disable-next-line global-require
-  const dispatchTrackingEvent = require('../dispatchTrackingEvent').default;
+  beforeEach(() => {
+    window.dataLayer = undefined;
+  });
 
   it('exports a function', () => {
     expect(typeof dispatchTrackingEvent).toBe('function');
   });
 
-  it('properly dispatches custom event', () => {
-    const testEventData = {};
+  it('will create window.dataLayer[] if it does not exit', () => {
+    expect(window.dataLayer).not.toBeDefined();
+
+    dispatchTrackingEvent(testEventData);
+
+    expect(window.dataLayer).toEqual([testEventData]);
+  });
+
+  it('will push to window.dataLayer[] if it exists', () => {
+    expect(window.dataLayer).not.toBeDefined();
+
     dispatchTrackingEvent(testEventData);
+    expect(window.dataLayer).toEqual([testEventData]);
 
-    expect(mockDispatchEvent).toHaveBeenCalled();
-    expect(mockCustomEvent).toHaveBeenCalledWith('FirehoseTrackingEvent', {
-      detail: testEventData,
-    });
+    dispatchTrackingEvent(testEventData);
+    expect(window.dataLayer).toEqual([testEventData, testEventData]);
   });
 });

src/__tests__/e2e.test.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-multi-comp,react/prop-types,react/prefer-stateless-function  */
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 const dispatchTrackingEvent = jest.fn();
 jest.setMock('../dispatchTrackingEvent', dispatchTrackingEvent);
@@ -361,4 +361,21 @@ describe('e2e', () => {
     });
     expect(dispatch).toHaveBeenCalledTimes(2); // pageview event and simulated button click
   });
+
+  it('logs a console error when there is already a process defined on context', () => {
+    global.console.error = jest.fn();
+    const process = () => {};
+    const context = { tracking: { process } };
+
+    @track({}, { process })
+    class TestComponent extends React.Component {
+      render() {
+        return <div />;
+      }
+    }
+
+    shallow(<TestComponent />, { context });
+
+    expect(global.console.error).toHaveBeenCalledTimes(1);
+  });
 });

src/dispatchTrackingEvent.js

@@ -1,7 +1,3 @@
-import CustomEvent from 'custom-event';
-
 export default function dispatchTrackingEvent(data) {
-  document.dispatchEvent(new CustomEvent('FirehoseTrackingEvent', {
-    detail: data,
-  }));
+  (window.dataLayer = window.dataLayer || []).push(data);
 }

yarn.lock

@@ -1224,10 +1224,6 @@ [email protected], "cssom@>= 0.3.2 < 0.4.0":
   dependencies:
     cssom "0.3.x"
 
-custom-event@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
-
 d@1:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"