Merge pull request #69 from holidaycheck/fix-invalid-javascript-being…

…-generated Fix invalid javascript being generated
holidaycheck · Nov 3, 2017 · fbc5aa6 · fbc5aa6
2 parents 1b54bdf + d60d5f9
commit fbc5aa6
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
   },
   "homepage": "https://github.com/holidaycheck/react-google-tag-manager#readme",
   "devDependencies": {
+    "acorn": "5.2.1",
     "babel-cli": "6.18.0",
     "babel-preset-es2015": "6.18.0",
     "babel-preset-react": "6.16.0",

diff --git a/src/build_parts.js b/src/build_parts.js
@@ -16,7 +16,7 @@ function buildParts({ id, dataLayerName = 'dataLayer', additionalEvents = {}, sc
             w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js', ${convertToKeyValueString(additionalEvents)}});
             var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
             j.async=true;j.src='${scheme}//www.googletagmanager.com/gtm.js?id='+i+dl
-            +${previewVariables ? previewVariables : ''};
+            ${previewVariables ? `+"${previewVariables}"` : ''};
             f.parentNode.insertBefore(j,f);
         })(window,document,'script','${dataLayerName}','${id}');`;
 

diff --git a/test/src/build_parts.spec.js b/test/src/build_parts.spec.js
@@ -1,6 +1,23 @@
-import { expect } from 'chai';
+import { expect, Assertion } from 'chai';
+import { parse } from 'acorn';
 import buildParts from '../../src/build_parts';
 
+Assertion.addMethod('javascript', function () {
+    let isValidJS = false;
+    try {
+        parse(this._obj, { ecmaVersion: 5 });
+        isValidJS = true;
+    } catch (e) {
+        isValidJS = false;
+    }
+
+    this.assert(
+    isValidJS,
+    'expected #{this} to be valid JavaScript',
+    'expected #{this} to not be valid JavaScript'
+  );
+});
+
 let onlyIdArgs;
 let parts;
 
@@ -18,22 +35,30 @@ describe('The function buildParts', () => {
         expect(parts.script).to.have.entriesCount('GTM-asd123', 1);
     });
 
+    it('should build valid javascript', () => {
+        expect(parts.script).to.be.javascript();
+    });
+
     it('should through an exception when no id is provided', () => {
         expect(() => buildParts()).to.throw(Error);
     });
 
     it('should consume a `dataLayerName`', () => {
         const dataLayerArgs = Object.assign(onlyIdArgs, { dataLayerName: 'MyFooBarLayer' });
+        const script = buildParts(dataLayerArgs).script;
 
-        expect(buildParts(dataLayerArgs).script).to.have.entriesCount('MyFooBarLayer', 1);
+        expect(script).to.be.javascript();
+        expect(script).to.have.entriesCount('MyFooBarLayer', 1);
     });
 
     it('should consume a `previewVariables`', () => {
         const dataLayerArgs = Object.assign(onlyIdArgs,
           { previewVariables: '&gtm_auth=EXAMPLE&gtm_preview=env-14&gtm_cookies_win=x' });
+        const script = buildParts(dataLayerArgs).script;
 
-        expect(buildParts(dataLayerArgs).script).to.have
-            .entriesCount('&gtm_auth=EXAMPLE&gtm_preview=env-14&gtm_cookies_win=x', 1);
+        expect(script).to.be.javascript();
+        expect(script).to.have
+            .entriesCount('+"&gtm_auth=EXAMPLE&gtm_preview=env-14&gtm_cookies_win=x"', 1);
     });
 
     it('should have a `dataLayerName` default', () => {
@@ -42,8 +67,10 @@ describe('The function buildParts', () => {
 
     it('should use a provided `scheme` option', () => {
         const schemaWithIdArgs = Object.assign(onlyIdArgs, { scheme: 'https:' });
+        const script = buildParts(schemaWithIdArgs).script;
 
-        expect(buildParts(schemaWithIdArgs).script).to.have.entriesCount('https:', 1);
+        expect(script).to.be.javascript();
+        expect(script).to.have.entriesCount('https:', 1);
         expect(buildParts(schemaWithIdArgs).iframe).to.have.entriesCount('https:', 1);
     });
 
@@ -59,10 +86,12 @@ describe('The function buildParts', () => {
             clientTimestamp: 1465848238816
         };
         const addtionalEventsArgs = Object.assign(onlyIdArgs, { additionalEvents });
+        const script = buildParts(addtionalEventsArgs).script;
 
-        expect(buildParts(addtionalEventsArgs).script).to.have.entriesCount('"platform":"react-stack"', 1);
-        expect(buildParts(addtionalEventsArgs).script).to.have.entriesCount('"forceMobile":false', 1);
-        expect(buildParts(addtionalEventsArgs).script).to.have.entriesCount('"clientTimestamp":1465848238816', 1);
+        expect(script).to.be.javascript();
+        expect(script).to.have.entriesCount('"platform":"react-stack"', 1);
+        expect(script).to.have.entriesCount('"forceMobile":false', 1);
+        expect(script).to.have.entriesCount('"clientTimestamp":1465848238816', 1);
     });
 
     it('should return an object with a property `iframe`', () => {