better ga and tests

Author: samuelcolvin

config.js

@@ -50,8 +50,8 @@ module.exports = {
       SOCKET_API_URL: '"https://socket.tutorcruncher.com"',
       GRECAPTCHA_KEY: '"6LdyXRgUAAAAADUNhMVKJDXiRr6DUN8TGOgllqbt"',
       RAVEN_DSN: 'null',
-      GA_ID: 'null',
-      // GA_ID: '"UA-41117087-3"',
+      // GA_ID: 'null',
+      GA_ID: '"UA-41117087-3"',
     },
     port: 5000,
     build_dir: path.resolve(__dirname, 'dev'),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tutorcruncher-socket",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "TutorCruncher socket",
   "author": "Samuel Colvin <[email protected]>",
   "private": false,

src/utils.js

@@ -41,14 +41,11 @@ const add_script = url => {
   document.body.appendChild(s)
 }
 
-/* istanbul ignore next */
 const init_ga = (router, config) => {
   const ga_prefixes = []
-  if (process.env.GA_ID === null) {
-    return ga_prefixes
-  }
-  const tcs_ga_name = `${config.mode}-tcs`
+  const tcs_ga_name = `${config.mode.replace('-', '')}tcs`
   ga_prefixes.push(tcs_ga_name + '.')
+  /* istanbul ignore next */
   if (window.ga === undefined) {
     // taken from https://developers.google.com/analytics/devguides/collection/analyticsjs/
     add_script('https://www.google-analytics.com/analytics.js')
@@ -59,23 +56,26 @@ const init_ga = (router, config) => {
   } else {
     ga_prefixes.push('')
   }
-  window.ga('create', 'UA-41117087-3', 'auto', tcs_ga_name)
+  window.ga('create', process.env.GA_ID || '-', 'auto', tcs_ga_name)
   window.ga(tcs_ga_name + '.set', 'dimension1', config.mode)
   window.ga(tcs_ga_name + '.set', 'dimension2', config.router_mode)
 
   if (!window._tcs_ga) {
-    // we only submit router changes for one socket instance to avoid duplicate page loads
-    let initial_load = true
-    router.afterEach(to => {
-      const _prefixes = initial_load ? ['tcs.'] : ga_prefixes
-      initial_load = false
-      for (let prefix of _prefixes) {
+    window.ga(tcs_ga_name + '.send', 'pageview')
+  }
+  window._tcs_ga = true
+
+  let initial_load = true
+  router.afterEach(to => {
+    // we don't submit the first router callback as this is the page load and is covered by above or their ga
+    if (!initial_load) {
+      for (let prefix of ga_prefixes) {
         window.ga(prefix + 'set', 'page', to.fullPath)
         window.ga(prefix + 'send', 'pageview')
       }
-    })
-  }
-  window._tcs_ga = true
+    }
+    initial_load = false
+  })
 
   return ga_prefixes
 }

test/unit/specs/_shared.js

@@ -88,7 +88,23 @@ function tick () {
 }
 
 function sleep (delay) {
-  return new Promise((resolve, reject) => setTimeout(resolve, delay))
+  return new Promise((resolve, reject) => setTimeout(() => resolve(), delay))
+}
+
+function prepare_ga (log) {
+  window._tcs_ga = null
+  const ga_data = []
+  window.ga = function () {
+    ga_data.push(Array.from(arguments).join())
+    if (log) {
+      console.log('ga:', arguments)
+    }
+  }
+  return ga_data
+}
+
+function teardown_ga () {
+  delete window.ga_data
 }
 
 export {
@@ -101,4 +117,6 @@ export {
   generate_vm,
   tick,
   sleep,
+  prepare_ga,
+  teardown_ga,
 }

test/unit/specs/enquiry.js

@@ -79,7 +79,6 @@ describe('enquiry-modal.vue', () => {
   it('should render modal enquiry form', async () => {
     const vm = generate_vm(modal_enquiry_router)
     vm.$router.push({name: 'enquiry-modal'})
-    vm.$router.push({name: 'enquiry-modal'})
 
     await tick()
     expect(vm.$el.querySelector('input').attributes['placeholder'].value).to.equal('Foobar')

test/unit/specs/main.js

@@ -1,14 +1,18 @@
 import socket from 'src/main'
-import {dft_response, TestConsole, enquiry_options, sleep} from './_shared'
+import {dft_response, TestConsole, enquiry_options, sleep, tick, prepare_ga, teardown_ga} from './_shared'
 
-describe('main.js', done => {
+describe('main.js', () => {
   let server
   before(() => {
     server = sinon.fakeServer.create()
     server.autoRespond = true
     server.respondWith(dft_response)
+    prepare_ga()
+  })
+  after(() => {
+    server.restore()
+    teardown_ga()
   })
-  after(() => { server.restore() })
 
   it('should initialise with different element name', done => {
     let outer = document.createElement('div')
@@ -78,6 +82,34 @@ describe('main.js', done => {
     vm.contractors = [{}]
     expect(vm.config.url_root).to.equal('/context.html')
   })
+
+  it('should do ga', async () => {
+    // TODO currently window.ga gets contaminated by other tests if you use await sleep(50)
+    const ga_data = prepare_ga()
+    let el = document.createElement('div')
+    el.setAttribute('id', 'socket')
+    document.body.appendChild(el)
+    const vm = socket('public_key', {url_root: '/'})
+    vm.enquiry_form_info = 'foobar'  // prevent get_enquiry making a GET request
+    vm.contractors.push({name: 'Fred Bloggs', link: '123-fred-bloggs', tag_line: 'hello'})
+    // ga already installed
+    expect(ga_data).to.deep.equal([
+      'create,-,auto,gridtcs', 'gridtcs.set,dimension1,grid', 'gridtcs.set,dimension2,hash', 'gridtcs.send,pageview'
+    ])
+    await tick()
+
+    expect(vm.$el.querySelector('a').attributes['href'].value).to.equal('#/123-fred-bloggs')
+
+    vm.goto('con-modal', {link: '123-fred-bloggs'})
+    await tick()
+    expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
+
+    expect(ga_data).to.deep.equal([
+      'create,-,auto,gridtcs', 'gridtcs.set,dimension1,grid', 'gridtcs.set,dimension2,hash', 'gridtcs.send,pageview',
+      'gridtcs.set,page,/123-fred-bloggs', 'gridtcs.send,pageview', 'set,page,/123-fred-bloggs', 'send,pageview'
+    ])
+    vm.$el.querySelector('.tcs-extra button').click()
+  })
 })
 
 describe('main.js', () => {
@@ -87,8 +119,12 @@ describe('main.js', () => {
     server.autoRespond = true
     server.respondWith('/public_key/contractors', dft_response)
     server.respondWith('/public_key/enquiry', dft_response)  // to prevent errors with get_enquiry
+    prepare_ga()
+  })
+  after(() => {
+    server.restore()
+    teardown_ga()
   })
-  after(() => { server.restore() })
 
   it('should download contractors', async () => {
     let el = document.createElement('div')
@@ -110,8 +146,12 @@ describe('main.js', () => {
     server.autoRespond = true
     server.respondWith('/public_key/contractors', [404, {}, 'badness'])
     server.respondWith('/public_key/enquiry', dft_response)  // to prevent errors with get_enquiry
+    prepare_ga()
+  })
+  after(() => {
+    server.restore()
+    teardown_ga()
   })
-  after(() => { server.restore() })
 
   it('should show error with bad response', async () => {
     let el = document.createElement('div')
@@ -134,6 +174,9 @@ describe('main.js', () => {
 })
 
 describe('main.js', () => {
+  before(() => prepare_ga())
+  after(() => teardown_ga())
+
   it('should show connection error', async () => {
     let el = document.createElement('div')
     el.setAttribute('id', 'socket')
@@ -161,8 +204,12 @@ describe('main.js', () => {
     server.respondWith('/public-key/contractors', dft_response)
     server.respondWith('/public-key/enquiry', [200, {'Content-Type': 'application/json'}, '{"response": "ok"}'])
     server.respondWith('/foobar', [200, {'Content-Type': 'application/json'}, '{"the": "response"}'])
+    prepare_ga()
+  })
+  after(() => {
+    server.restore()
+    teardown_ga()
   })
-  after(() => { server.restore() })
 
   it('should get enquiry info', async () => {
     let el = document.createElement('div')
@@ -219,8 +266,12 @@ describe('main.js', () => {
       expect(obj).to.deep.equal({first_field: 'foobar', attributes: {foo: 'X'}})
       xhr.respond(201, {'Content-Type': 'application/json'}, '{"response": "ok"}')
     })
+    prepare_ga()
+  })
+  after(() => {
+    server.restore()
+    teardown_ga()
   })
-  after(() => { server.restore() })
 
   it('should post enquiry data', async () => {
     let el = document.createElement('div')