idsk_frontend_toolkit 7.4.2

data/app/assets/spec/unit/analytics/google-analytics-universal-tracker.spec.js

@@ -0,0 +1,180 @@
+/* global describe it expect beforeEach spyOn jasmine */
+
+var $ = window.jQuery
+
+describe('GOVUK.GoogleAnalyticsUniversalTracker', function () {
+  'use strict'
+  var GOVUK = window.GOVUK
+
+  function addGoogleAnalyticsSpy () {
+    window.ga = function () {}
+    spyOn(window, 'ga')
+  }
+
+  var universal
+  var setupArguments
+
+  beforeEach(function () {
+    addGoogleAnalyticsSpy()
+
+    universal = new GOVUK.GoogleAnalyticsUniversalTracker('id', {
+      cookieDomain: 'cookie-domain.com',
+      siteSpeedSampleRate: 100
+    })
+  })
+
+  it('can load the libraries needed to run universal Google Analytics', function () {
+    delete window.ga
+    $('[src="https://www.google-analytics.com/analytics.js"]').remove()
+    GOVUK.GoogleAnalyticsUniversalTracker.load()
+    expect($('script[async][src="https://www.google-analytics.com/analytics.js"]').length).toBe(1)
+    expect(typeof window.ga).toBe('function')
+
+    window.ga('send message')
+    expect(window.ga.q[0]).toEqual(jasmine.any(Object))
+  })
+
+  describe('when created', function () {
+    beforeEach(function () {
+      setupArguments = window.ga.calls.allArgs()
+    })
+
+    it('configures a Google tracker using the provided profile ID and config', function () {
+      expect(setupArguments[0]).toEqual(['create', 'id', {cookieDomain: 'cookie-domain.com', siteSpeedSampleRate: 100}])
+    })
+
+    it('anonymises the IP', function () {
+      expect(setupArguments[1]).toEqual(['set', 'anonymizeIp', true])
+    })
+  })
+
+  describe('when created (with legacy non-object syntax)', function () {
+    beforeEach(function () {
+      addGoogleAnalyticsSpy()
+
+      universal = new GOVUK.GoogleAnalyticsUniversalTracker('id', 'cookie-domain.com')
+      setupArguments = window.ga.calls.allArgs()
+    })
+
+    it('configures a Google tracker using the provided profile ID and cookie domain', function () {
+      expect(setupArguments[0]).toEqual(['create', 'id', {cookieDomain: 'cookie-domain.com'}])
+    })
+  })
+
+  describe('when pageviews are tracked', function () {
+    it('sends them to Google Analytics', function () {
+      universal.trackPageview()
+      expect(window.ga.calls.mostRecent().args).toEqual(['send', 'pageview'])
+    })
+
+    it('sends them to Google Analytics, forcing a new session', function () {
+      universal.trackPageview(undefined, undefined, { sessionControl: 'start' })
+      expect(window.ga.calls.mostRecent().args).toEqual(['send', 'pageview', {sessionControl: 'start'}])
+    })
+
+    it('can track a virtual pageview', function () {
+      universal.trackPageview('/nicholas-page')
+      expect(window.ga.calls.mostRecent().args).toEqual(['send', 'pageview', {page: '/nicholas-page'}])
+    })
+
+    it('can track a virtual pageview with a custom title', function () {
+      universal.trackPageview('/nicholas-page', 'Nicholas Page')
+      expect(window.ga.calls.mostRecent().args).toEqual(['send', 'pageview', {page: '/nicholas-page', title: 'Nicholas Page'}])
+    })
+
+    it('can set the transport method on a pageview', function () {
+      universal.trackPageview('/t', 'T', {transport: 'beacon'})
+      expect(window.ga.calls.mostRecent().args).toEqual(['send', 'pageview', {page: '/t', title: 'T', transport: 'beacon'}])
+    })
+  })
+
+  describe('when events are tracked', function () {
+    function eventObjectFromSpy () {
+      return window.ga.calls.mostRecent().args[1]
+    }
+
+    it('sends them to Google Analytics', function () {
+      universal.trackEvent('category', 'action', {label: 'label'})
+      expect(window.ga.calls.mostRecent().args).toEqual(
+        ['send', {hitType: 'event', eventCategory: 'category', eventAction: 'action', eventLabel: 'label'}]
+      )
+    })
+
+    it('tracks custom dimensions', function () {
+      universal.trackEvent('category', 'action', {dimension29: 'Home'})
+      expect(window.ga.calls.mostRecent().args).toEqual(
+        ['send', {hitType: 'event', eventCategory: 'category', eventAction: 'action', dimension29: 'Home'}]
+      )
+    })
+
+    it('the label is optional', function () {
+      universal.trackEvent('category', 'action')
+      expect(window.ga.calls.mostRecent().args).toEqual(
+        ['send', {hitType: 'event', eventCategory: 'category', eventAction: 'action'}]
+      )
+    })
+
+    it('only sends values if they are parseable as numbers', function () {
+      universal.trackEvent('category', 'action', {label: 'label', value: '10'})
+      expect(eventObjectFromSpy()['eventValue']).toEqual(10)
+
+      universal.trackEvent('category', 'action', {label: 'label', value: 10})
+      expect(eventObjectFromSpy()['eventValue']).toEqual(10)
+
+      universal.trackEvent('category', 'action', {label: 'label', value: 'not a number'})
+      expect(eventObjectFromSpy()['eventValue']).toEqual(undefined)
+    })
+
+    it('can mark an event as non interactive', function () {
+      universal.trackEvent('category', 'action', {label: 'label', value: 0, nonInteraction: true})
+      expect(window.ga.calls.mostRecent().args).toEqual(
+        ['send', {
+          hitType: 'event',
+          eventCategory: 'category',
+          eventAction: 'action',
+          eventLabel: 'label',
+          eventValue: 0,
+          nonInteraction: 1
+        }]
+      )
+    })
+
+    it('sends the page if supplied', function () {
+      universal.trackEvent('category', 'action', {page: '/path/to/page'})
+      expect(window.ga.calls.mostRecent().args).toEqual(
+        ['send', {hitType: 'event', eventCategory: 'category', eventAction: 'action', page: '/path/to/page'}]
+      )
+    })
+
+    it('can set the transport method on an event', function () {
+      universal.trackEvent('category', 'action', {transport: 'beacon'})
+      expect(window.ga.calls.mostRecent().args).toEqual(
+        ['send', {hitType: 'event', eventCategory: 'category', eventAction: 'action', transport: 'beacon'}]
+      )
+    })
+  })
+
+  describe('when social events are tracked', function () {
+    it('sends them to Google Analytics', function () {
+      universal.trackSocial('network', 'action', 'target')
+      expect(window.ga.calls.mostRecent().args).toEqual(['send', {
+        'hitType': 'social',
+        'socialNetwork': 'network',
+        'socialAction': 'action',
+        'socialTarget': 'target'
+      }])
+    })
+  })
+
+  describe('when setting a custom dimension', function () {
+    it('sends the dimension to Google Analytics with the specified index and value', function () {
+      universal.setDimension(1, 'value')
+      expect(window.ga.calls.mostRecent().args).toEqual(['set', 'dimension1', 'value'])
+    })
+
+    it('coerces the value to a string', function () {
+      universal.setDimension(1, 10)
+      expect(window.ga.calls.mostRecent().args).toEqual(['set', 'dimension1', '10'])
+    })
+  })
+})

data/app/assets/spec/unit/analytics/govuk-tracker.spec.js

@@ -0,0 +1,171 @@
+/* global describe it expect beforeEach spyOn jasmine */
+
+var $ = window.jQuery
+
+describe('GOVUK.GOVUKTracker', function () {
+  'use strict'
+  var GOVUK = window.GOVUK
+
+  var tracker
+
+  function setupFakeGa (clientId) {
+    window.ga = function (cb) {
+      cb({
+        get: function () { return clientId }
+      })
+    }
+  }
+
+  beforeEach(function () {
+    tracker = new GOVUK.GOVUKTracker('http://www.example.com/a.gif')
+  })
+
+  describe('sendData', function () {
+    it('sends the data using AJAX', function () {
+      spyOn($, 'get')
+
+      tracker.sendData({foo: 'bar'})
+      expect($.get).toHaveBeenCalledWith('http://www.example.com/a.gif?foo=bar')
+    })
+  })
+
+  describe('payloadParams', function () {
+    it('adds the event type', function () {
+      var params = tracker.payloadParams('foo', {bar: 'qux'})
+
+      expect(params.eventType).toEqual('foo')
+      expect(params.bar).toEqual('qux')
+    })
+
+    it('adds the GA Client ID', function () {
+      tracker.gaClientId = '123456.789012'
+      var params = tracker.payloadParams('foo')
+
+      expect(params.gaClientId).toEqual('123456.789012')
+    })
+
+    it('adds the referrer', function () {
+      var params = tracker.payloadParams('foo')
+
+      // Can't stub window.referrer so just test that we got a string, not undefined
+      expect(typeof params.referrer).toEqual('string')
+    })
+
+    it('adds performance data', function () {
+      var params = tracker.payloadParams('foo')
+
+      expect(params.navigationType).toEqual('0')
+      expect(params.redirectCount).toEqual('0')
+
+      expect(params.timing_domComplete).toEqual(window.performance.timing.domComplete.toString())
+    })
+
+    it('adds custom dimensions', function () {
+      tracker.setDimension(1, 'foo')
+      tracker.setDimension(10, 'bar')
+      var params = tracker.payloadParams('foo')
+
+      expect(params.dimension1).toEqual('foo')
+      expect(params.dimension10).toEqual('bar')
+    })
+
+    it('adds screen and window measurements', function () {
+      var params = tracker.payloadParams('foo')
+
+      expect(params.screenWidth).toEqual(window.screen.width)
+      expect(params.screenHeight).toEqual(window.screen.height)
+      expect(params.windowWidth).toEqual(window.innerWidth)
+      expect(params.windowHeight).toEqual(window.innerHeight)
+      expect(params.colorDepth).toEqual(window.screen.colorDepth)
+    })
+  })
+
+  describe('sendToTracker', function () {
+    it('sends when the DOM is complete', function () {
+      setupFakeGa('123456.789012')
+
+      spyOn(tracker, 'sendData')
+      tracker.sendToTracker('foo')
+
+      expect(tracker.sendData).toHaveBeenCalledWith(jasmine.any(Object))
+    })
+
+    it('sets the ga Client ID', function () {
+      setupFakeGa('123456.789012')
+
+      spyOn(tracker, 'sendData')
+      tracker.sendToTracker('foo')
+
+      expect(tracker.gaClientId).toEqual('123456.789012')
+    })
+  })
+
+  describe('tracking', function () {
+    beforeEach(function () {
+      spyOn(tracker, 'sendToTracker')
+    })
+
+    describe('when pageviews are tracked', function () {
+      it('sends them to the tracker', function () {
+        tracker.trackPageview()
+        expect(tracker.sendToTracker.calls.mostRecent().args).toEqual(['pageview'])
+      })
+    })
+
+    describe('when events are tracked', function () {
+      it('sends them to the tracker', function () {
+        tracker.trackEvent('category', 'action', {label: 'label'})
+        expect(tracker.sendToTracker.calls.mostRecent().args).toEqual(
+          ['event', {eventCategory: 'category', eventAction: 'action', eventLabel: 'label'}]
+        )
+      })
+
+      it('tracks custom dimensions', function () {
+        tracker.trackEvent('category', 'action', {dimension29: 'Home'})
+        expect(tracker.sendToTracker.calls.mostRecent().args).toEqual(
+          ['event', {eventCategory: 'category', eventAction: 'action', dimension29: 'Home'}]
+        )
+      })
+
+      it('the label is optional', function () {
+        tracker.trackEvent('category', 'action')
+        expect(tracker.sendToTracker.calls.mostRecent().args).toEqual(
+          ['event', {eventCategory: 'category', eventAction: 'action'}]
+        )
+      })
+
+      it('sends the page if supplied', function () {
+        tracker.trackEvent('category', 'action', {page: '/path/to/page'})
+        expect(tracker.sendToTracker.calls.mostRecent().args).toEqual(
+          ['event', {eventCategory: 'category', eventAction: 'action', page: '/path/to/page'}]
+        )
+      })
+
+      it('tracks multiple events', function () {
+        tracker.trackEvent('category', 'action', {label: 'foo'})
+        tracker.trackEvent('category', 'action', {label: 'bar'})
+
+        expect(tracker.sendToTracker).toHaveBeenCalledWith(
+          'event', {eventCategory: 'category', eventAction: 'action', eventLabel: 'foo'}
+        )
+        expect(tracker.sendToTracker).toHaveBeenCalledWith(
+          'event', {eventCategory: 'category', eventAction: 'action', eventLabel: 'bar'}
+        )
+      })
+    })
+
+    describe('when social events are tracked', function () {
+      it('sends them to Google Analytics', function () {
+        tracker.trackSocial('network', 'action', 'target')
+        expect(tracker.sendToTracker.calls.mostRecent().args).toEqual([
+          'social',
+          {
+            'socialNetwork': 'network',
+            'socialAction': 'action',
+            'socialTarget': 'target'
+          }
+        ])
+      })
+    })
+  })
+})

data/app/assets/spec/unit/analytics/mailto-link-tracker.spec.js

@@ -0,0 +1,62 @@
+/* global describe it expect afterEach beforeEach spyOn */
+
+var $ = window.jQuery
+
+describe('GOVUK.analyticsPlugins.mailtoLinkTracker', function () {
+  'use strict'
+  var GOVUK = window.GOVUK
+
+  var $links
+
+  beforeEach(function () {
+    $links = $(
+      '<div class="mailto-links">' +
+        '<a href="mailto:name1@email.com"></a>' +
+        '<a href="mailto:name2@email.com">The link for a mailto</a>' +
+        '<a href="mailto:name3@email.com"><img src="/img" /></a>' +
+      '</div>'
+    )
+
+    $('html').on('click', function (evt) { evt.preventDefault() })
+    $('body').append($links)
+    GOVUK.analytics = {trackEvent: function () {}}
+
+    GOVUK.analyticsPlugins.mailtoLinkTracker()
+  })
+
+  afterEach(function () {
+    $('html').off()
+    $('body').off()
+    $links.remove()
+    delete GOVUK.analytics
+  })
+
+  it('listens to click events on mailto links', function () {
+    spyOn(GOVUK.analytics, 'trackEvent')
+
+    $('.mailto-links a').each(function () {
+      $(this).trigger('click')
+      expect(GOVUK.analytics.trackEvent).toHaveBeenCalled()
+      GOVUK.analytics.trackEvent.calls.reset()
+    })
+  })
+
+  it('tracks mailto addresses and link text', function () {
+    spyOn(GOVUK.analytics, 'trackEvent')
+    $('.mailto-links a').trigger('click')
+
+    expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith(
+      'Mailto Link Clicked', 'mailto:name1@email.com', {transport: 'beacon'})
+
+    expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith(
+      'Mailto Link Clicked', 'mailto:name2@email.com', {transport: 'beacon', label: 'The link for a mailto'})
+  })
+
+  it('listens to click events on elements within mailto links', function () {
+    spyOn(GOVUK.analytics, 'trackEvent')
+
+    $('.mailto-links a img').trigger('click')
+    expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith(
+      'Mailto Link Clicked', 'mailto:name3@email.com', {transport: 'beacon'})
+  })
+})

data/app/assets/spec/unit/details.polyfill.spec.js

@@ -0,0 +1,91 @@
+/* global describe it expect beforeEach afterEach */
+
+var $ = window.jQuery
+
+describe('details-polyfill', function () {
+  'use strict'
+  var GOVUK = window.GOVUK
+
+  beforeEach(function (done) {
+    // Sample markup
+    this.$content = $(
+      '<details>' +
+      '<summary><span class="summary">Summary</span></summary>' +
+      '<div><p>Hidden content</p></div>' +
+      '</details>'
+    )
+
+    // Find elements
+    var $summaries = this.$content.find('summary')
+    var $hiddenContent = this.$content.find('div')
+
+    this.$summary1 = $summaries.eq(0)
+    this.$hiddenContent1 = $hiddenContent.eq(0)
+
+    // Add to page
+    $(document.body).append(this.$content)
+
+    setTimeout(function () {
+      done()
+    }, 1)
+  })
+
+  afterEach(function () {
+    this.detailsPolyfill = null
+    this.$content.remove()
+  })
+
+  describe('When the polyfill is initialised', function () {
+    beforeEach(function () {
+      // Initialise detailsPolyfill
+      this.detailsPolyfill = GOVUK.details.addDetailsPolyfill()
+      GOVUK.details.started = false
+    })
+    it('should add to summary the button role', function () {
+      expect(this.$summary1.attr('role')).toBe('button')
+    })
+
+    it('should set the element controlled by the summary using aria-controls', function () {
+      expect(this.$summary1.attr('aria-controls')).toBe('details-content-0')
+    })
+
+    it('should set the expanded state of the summary to false using aria-expanded', function () {
+      expect(this.$summary1.attr('aria-expanded')).toBe('false')
+    })
+
+    it('should add a unique id to the hidden content in order to be controlled by the summary', function () {
+      expect(this.$hiddenContent1.attr('id')).toBe('details-content-0')
+    })
+
+    it('should present the content as hidden using aria-hidden', function () {
+      expect(this.$hiddenContent1.attr('aria-hidden')).toBe('true')
+    })
+
+    it('should visually hide the content', function () {
+      expect(this.$hiddenContent1.is(':visible')).toBe(false)
+    })
+
+    describe('and when summary is clicked', function () {
+      beforeEach(function () {
+        // Trigger click on summary
+        this.$summary1.click()
+      })
+
+      it('should indicate the expanded state of the summary using aria-expanded', function () {
+        expect(this.$summary1.attr('aria-expanded')).toBe('true')
+      })
+
+      it('should make the content visible', function () {
+        expect(this.$hiddenContent1.is(':visible')).toBe(true)
+      })
+
+      it('should indicate the visible state of the content using aria-hidden', function () {
+        expect(this.$hiddenContent1.attr('aria-hidden')).toBe('false')
+      })
+
+      it('should indicate the open state of the content', function () {
+        expect(this.$content.attr('open')).toBe('open')
+      })
+    })
+  })
+})

data/app/assets/spec/unit/modules/auto-track-event.spec.js

@@ -0,0 +1,54 @@
+/* global describe it expect beforeEach afterEach spyOn */
+
+var $ = window.jQuery
+
+describe('An auto event tracker', function () {
+  'use strict'
+  var GOVUK = window.GOVUK
+
+  var tracker,
+    element
+
+  beforeEach(function () {
+    GOVUK.analytics = {trackEvent: function () {}}
+    tracker = new GOVUK.Modules.AutoTrackEvent()
+  })
+
+  afterEach(function () {
+    delete GOVUK.analytics
+  })
+
+  it('tracks non-interactive events on start', function () {
+    spyOn(GOVUK.analytics, 'trackEvent')
+
+    element = $(
+      '<div ' +
+        'data-track-category="category"' +
+        'data-track-action="action">' +
+        'Some content' +
+      '</div>'
+    )
+
+    tracker.start(element)
+    expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith(
+      'category', 'action', {nonInteraction: 1})
+  })
+
+  it('can track non-interactive events with optional label and value', function () {
+    spyOn(GOVUK.analytics, 'trackEvent')
+
+    element = $(
+      '<div ' +
+        'data-track-category="category"' +
+        'data-track-action="action"' +
+        'data-track-label="label"' +
+        'data-track-value="10">' +
+        'Some content' +
+      '</div>'
+    )
+
+    tracker.start(element)
+    expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith(
+      'category', 'action', {label: 'label', value: 10, nonInteraction: 1})
+  })
+})

data/app/assets/spec/unit/modules.spec.js

@@ -0,0 +1,93 @@
+/* global describe it expect beforeEach afterEach jasmine */
+
+var $ = window.jQuery
+
+describe('GOVUK Modules', function () {
+  'use strict'
+  var GOVUK = window.GOVUK
+
+  it('finds modules', function () {
+    var module = $('<div data-module="a-module"></div>')
+    $('body').append(module)
+
+    expect(GOVUK.modules.find().length).toBe(1)
+    expect(GOVUK.modules.find().eq(0).is('[data-module="a-module"]')).toBe(true)
+    module.remove()
+  })
+
+  it('finds modules in a container', function () {
+    var module = $('<div data-module="a-module"></div>')
+    var container = $('<div></div>').append(module)
+
+    expect(GOVUK.modules.find(container).length).toBe(1)
+    expect(GOVUK.modules.find(container).eq(0).data('module')).toBe('a-module')
+  })
+
+  it('finds modules that are a container', function () {
+    var module = $('<div data-module="a-module"></div>')
+    var container = $('<div data-module="container-module"></div>').append(module)
+
+    expect(GOVUK.modules.find(container).length).toBe(2)
+    expect(GOVUK.modules.find(container).eq(0).data('module')).toBe('container-module')
+    expect(GOVUK.modules.find(container).eq(1).data('module')).toBe('a-module')
+  })
+
+  describe('when a module exists', function () {
+    var callback
+
+    beforeEach(function () {
+      callback = jasmine.createSpy()
+      GOVUK.Modules.TestAlertModule = function () {
+        var that = this
+        that.start = function (element) {
+          callback(element)
+        }
+      }
+    })
+
+    afterEach(function () {
+      delete GOVUK.Modules.TestAlertModule
+    })
+
+    it('starts modules within a container', function () {
+      var module = $('<div data-module="test-alert-module"></div>')
+      var container = $('<div></div>').append(module)
+
+      GOVUK.modules.start(container)
+      expect(callback).toHaveBeenCalled()
+    })
+
+    it('does not start modules that are already started', function () {
+      var module = $('<div data-module="test-alert-module"></div>')
+      $('<div></div>').append(module)
+
+      GOVUK.modules.start(module)
+      GOVUK.modules.start(module)
+      expect(callback.calls.count()).toBe(1)
+    })
+
+    it('passes the HTML element to the module\'s start method', function () {
+      var module = $('<div data-module="test-alert-module"></div>')
+      var container = $('<h1></h1>').append(module)
+
+      GOVUK.modules.start(container)
+
+      var args = callback.calls.argsFor(0)
+      expect(args[0].is('div[data-module="test-alert-module"]')).toBe(true)
+    })
+
+    it('starts all modules that are on the page', function () {
+      var modules = $(
+        '<div data-module="test-alert-module"></div>' +
+        '<strong data-module="test-alert-module"></strong>' +
+        '<span data-module="test-alert-module"></span>'
+      )
+
+      $('body').append(modules)
+      GOVUK.modules.start()
+      expect(callback.calls.count()).toBe(3)
+
+      modules.remove()
+    })
+  })
+})