govuk_frontend_toolkit 7.6.0 → 8.0.0

data/app/assets/spec/unit/show-hide-content.spec.js

@@ -32,6 +32,18 @@ describe('show-hide-content', function () {
         '<div id="show-hide-radios" class="panel js-hidden" />' +
         '</form>' +
 
+        '<form>' +
+        '<div class="multiple-choice" data-target="show-hide-radios--name-with-characters-to-escape">' +
+        '<input type="radio" name="test.single[option1=\'value1\'][option2=\'value2\']" value="yes">' +
+        '<label>Yes</label>' +
+        '</div>' +
+        '<div class="multiple-choice">' +
+        '<input type="radio" name="test.single[option1=\'value1\'][option2=\'value2\']" value="no">' +
+        '<label>No</label>' +
+        '</div>' +
+        '<div id="show-hide-radios--name-with-characters-to-escape" class="panel js-hidden" />' +
+        '</form>' +
+
         // Checkboxes (multiple values)
         '<form>' +
         '<div class="multiple-choice" data-target="show-hide-checkboxes">' +
@@ -58,6 +70,10 @@ describe('show-hide-content', function () {
       this.$radio1 = $radios.eq(0)
       this.$radio2 = $radios.eq(1)
 
+      // Two more radios, with name attributes that include periods
+      this.$radio3 = $radios.eq(2)
+      this.$radio4 = $radios.eq(3)
+
       // Three checkboxes
       this.$checkbox1 = $checkboxes.eq(0)
       this.$checkbox2 = $checkboxes.eq(1)
@@ -68,6 +84,7 @@ describe('show-hide-content', function () {
 
       // Show/Hide content
       this.$radioShowHide = $('#show-hide-radios')
+      this.$radioShowHide_nameWithCharactersToEscape = $('#show-hide-radios--name-with-characters-to-escape')
       this.$checkboxShowHide = $('#show-hide-checkboxes')
 
       // Add show/hide content support
@@ -79,25 +96,36 @@ describe('show-hide-content', function () {
       it('should add the aria attributes to inputs with show/hide content', function () {
         expect(this.$radio1.attr('aria-expanded')).toBe('false')
         expect(this.$radio1.attr('aria-controls')).toBe('show-hide-radios')
+
+        expect(this.$radio3.attr('aria-expanded')).toBe('false')
+        expect(this.$radio3.attr('aria-controls')).toBe('show-hide-radios--name-with-characters-to-escape')
       })
 
       it('should add the aria attributes to show/hide content', function () {
         expect(this.$radioShowHide.attr('aria-hidden')).toBe('true')
         expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(true)
+
+        expect(this.$radioShowHide_nameWithCharactersToEscape.attr('aria-hidden')).toBe('true')
+        expect(this.$radioShowHide_nameWithCharactersToEscape.hasClass('js-hidden')).toEqual(true)
       })
 
       it('should hide the show/hide content visually', function () {
         expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(true)
+        expect(this.$radioShowHide_nameWithCharactersToEscape.hasClass('js-hidden')).toEqual(true)
       })
 
       it('should do nothing if no radios are checked', function () {
         expect(this.$radio1.attr('aria-expanded')).toBe('false')
         expect(this.$radio2.attr('aria-expanded')).toBe(undefined)
+        expect(this.$radio3.attr('aria-expanded')).toBe('false')
+        expect(this.$radio4.attr('aria-expanded')).toBe(undefined)
       })
 
       it('should do nothing if no checkboxes are checked', function () {
         expect(this.$radio1.attr('aria-expanded')).toBe('false')
         expect(this.$radio2.attr('aria-expanded')).toBe(undefined)
+        expect(this.$radio3.attr('aria-expanded')).toBe('false')
+        expect(this.$radio4.attr('aria-expanded')).toBe(undefined)
       })
 
       describe('with non-default markup', function () {
@@ -107,12 +135,18 @@ describe('show-hide-content', function () {
 
         it('should do nothing if a radio without show/hide content is checked', function () {
           this.$radio2.prop('checked', true)
+          this.$radio4.prop('checked', true)
 
           // Defaults changed, initialise again
           this.showHideContent = new GOVUK.ShowHideContent().init()
           expect(this.$radio1.attr('aria-expanded')).toBe('false')
+          expect(this.$radio3.attr('aria-expanded')).toBe('false')
+
           expect(this.$radioShowHide.attr('aria-hidden')).toBe('true')
+          expect(this.$radioShowHide_nameWithCharactersToEscape.attr('aria-hidden')).toBe('true')
+
           expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(true)
+          expect(this.$radioShowHide_nameWithCharactersToEscape.hasClass('js-hidden')).toEqual(true)
         })
 
         it('should do nothing if a checkbox without show/hide content is checked', function () {
@@ -138,12 +172,18 @@ describe('show-hide-content', function () {
 
         it('should make the show/hide content visible if its radio is checked', function () {
           this.$radio1.prop('checked', true)
+          this.$radio3.prop('checked', true)
 
           // Defaults changed, initialise again
           this.showHideContent = new GOVUK.ShowHideContent().init()
           expect(this.$radio1.attr('aria-expanded')).toBe('true')
+          expect(this.$radio3.attr('aria-expanded')).toBe('true')
+
           expect(this.$radioShowHide.attr('aria-hidden')).toBe('false')
+          expect(this.$radioShowHide_nameWithCharactersToEscape.attr('aria-hidden')).toBe('false')
+
           expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(false)
+          expect(this.$radioShowHide_nameWithCharactersToEscape.hasClass('js-hidden')).toEqual(false)
         })
 
         it('should make the show/hide content visible if its checkbox is checked', function () {
@@ -160,14 +200,23 @@ describe('show-hide-content', function () {
       describe('and a show/hide radio receives a click', function () {
         it('should make the show/hide content visible', function () {
           this.$radio1.click()
+          this.$radio3.click()
           expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(false)
+          expect(this.$radioShowHide_nameWithCharactersToEscape.hasClass('js-hidden')).toEqual(false)
         })
 
         it('should add the aria attributes to show/hide content', function () {
           this.$radio1.click()
+          this.$radio3.click()
+
           expect(this.$radio1.attr('aria-expanded')).toBe('true')
+          expect(this.$radio3.attr('aria-expanded')).toBe('true')
+
           expect(this.$radioShowHide.attr('aria-hidden')).toBe('false')
+          expect(this.$radioShowHide_nameWithCharactersToEscape.attr('aria-hidden')).toBe('false')
+
           expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(false)
+          expect(this.$radioShowHide_nameWithCharactersToEscape.hasClass('js-hidden')).toEqual(false)
         })
       })
 
@@ -223,6 +272,10 @@ describe('show-hide-content', function () {
           namespace: 'ShowHideContent',
           selector: 'input[type="radio"][name="single"]'
         }))
+        expect(events && events.click).toContain(jasmine.objectContaining({
+          namespace: 'ShowHideContent',
+          selector: 'input[type="radio"][name="test.single[option1=\'value1\'][option2=\'value2\']"]'
+        }))
         expect(events && events.click).toContain(jasmine.objectContaining({
           namespace: 'ShowHideContent',
           selector: '[data-target] > input[type="checkbox"]'
@@ -241,6 +294,10 @@ describe('show-hide-content', function () {
           namespace: 'ShowHideContent',
           selector: 'input[type="radio"][name="single"]'
         }))
+        expect(events && events.click).not.toContain(jasmine.objectContaining({
+          namespace: 'ShowHideContent',
+          selector: 'input[type="radio"][name="test.single[option1=\'value1\'][option2=\'value2\']"]'
+        }))
         expect(events && events.click).not.toContain(jasmine.objectContaining({
           namespace: 'ShowHideContent',
           selector: '[data-target] > input[type="checkbox"]'

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

@@ -0,0 +1,170 @@
+/* global describe it expect beforeEach afterEach jasmine */
+
+var $ = window.jQuery
+
+describe('stageprompt', function () {
+  'use strict'
+  var GOVUK = window.GOVUK
+
+  var analyticsCallback
+
+  beforeEach(function () {
+    $('<div id="sandbox"></div>').appendTo('body')
+  })
+
+  afterEach(function () {
+    $('#sandbox').remove()
+  })
+
+  it('should exist in a namespace', function () {
+    expect(GOVUK.performance.stageprompt).not.toBeNull()
+  })
+
+  it('should not blow up if there are no data-journey tags', function () {
+    expect($('[data-journey]').length).toBe(0)
+    GOVUK.performance.stageprompt.setup(function () {})
+  })
+
+  describe('fire the analytics callback when a data-journey tag is found', function () {
+    beforeEach(function () {
+      analyticsCallback = jasmine.createSpy()
+      $('<div id="sandbox"></div>').appendTo('body')
+    })
+
+    afterEach(function () {
+      $('#sandbox').remove()
+      $('[data-journey]').removeAttr('data-journey')
+    })
+
+    it('should send an event if the page has a data-journey tag on the body', function () {
+      $('body').attr('data-journey', 'test-journey:someStage')
+      GOVUK.performance.stageprompt.setup(analyticsCallback)
+
+      expect(analyticsCallback).toHaveBeenCalledWith('test-journey', 'someStage')
+    })
+
+    it('should send an event if the page has a data-journey tag on another tag', function () {
+      $('#sandbox').attr('data-journey', 'test-journey:nextStep')
+
+      GOVUK.performance.stageprompt.setup(analyticsCallback)
+
+      expect(analyticsCallback).toHaveBeenCalledWith('test-journey', 'nextStep')
+    })
+
+    it('should send one event if the page has multiple elements with data-journey attribute', function () {
+      $('#sandbox').attr('data-journey', 'test-journey:stuff')
+      $('#sandbox').html('<p id="foo" data-journey="test-journey:moreStuff">something</p>')
+
+      GOVUK.performance.stageprompt.setup(analyticsCallback)
+
+      expect(analyticsCallback.calls.count()).toBe(1)
+    })
+  })
+
+  describe('callback arguments', function () {
+    var analyticsCallback
+
+    beforeEach(function () {
+      analyticsCallback = jasmine.createSpy()
+      $('<div id="sandbox"></div>').appendTo('body')
+    })
+
+    afterEach(function () {
+      $('#sandbox').remove()
+      $('[data-journey]').removeAttr('data-journey')
+    })
+
+    it('should pass action parts as separate arguments to the callback', function () {
+      $('#sandbox').attr('data-journey', 'part-1:part-2')
+
+      GOVUK.performance.stageprompt.setup(analyticsCallback)
+
+      expect(analyticsCallback).toHaveBeenCalledWith('part-1', 'part-2')
+    })
+
+    it('should pass a single-part action as one argument', function () {
+      $('#sandbox').attr('data-journey', 'single-part')
+
+      GOVUK.performance.stageprompt.setup(analyticsCallback)
+
+      expect(analyticsCallback).toHaveBeenCalledWith('single-part')
+    })
+
+    it('should pass at most three arguments to the callback', function () {
+      $('#sandbox').attr('data-journey', 'part-1:part-2:part-3:additional-content')
+
+      GOVUK.performance.stageprompt.setup(analyticsCallback)
+
+      expect(analyticsCallback).toHaveBeenCalledWith('part-1', 'part-2', 'part-3:additional-content')
+    })
+  })
+
+  describe('sending events for click actions', function () {
+    beforeEach(function () {
+      analyticsCallback = jasmine.createSpy()
+      $('<div id="sandbox"></div>').appendTo('body')
+    })
+
+    afterEach(function () {
+      $('#sandbox').remove()
+    })
+
+    it('should send an event when a help link is clicked', function () {
+      $('#sandbox').attr('data-journey-click', 'test-journey:stuff:help')
+      GOVUK.performance.stageprompt.setup(analyticsCallback)
+
+      $('#sandbox').click()
+
+      expect(analyticsCallback).toHaveBeenCalledWith('test-journey', 'stuff', 'help')
+    })
+
+    it('should send events for multiple help elements on the same page', function () {
+      $('#sandbox').append('<a href="#" id="1" data-journey-click="a">foo</a>')
+      $('#sandbox').append('<a href="#" id="2" data-journey-click="b">bar</a>')
+
+      GOVUK.performance.stageprompt.setup(analyticsCallback)
+      $('#1').click()
+      $('#2').click()
+
+      expect(analyticsCallback).toHaveBeenCalledWith('a')
+      expect(analyticsCallback).toHaveBeenCalledWith('b')
+    })
+
+    it('should send one event per click on tagged item', function () {
+      $('#sandbox').append('<a href="#" id="1" data-journey-click="a">foo</a>')
+      GOVUK.performance.stageprompt.setup(analyticsCallback)
+
+      $('#1').click()
+      $('#1').click()
+
+      expect(analyticsCallback.calls.count()).toBe(2)
+    })
+  })
+
+  describe('out-of-the-box Google Analytics setup', function () {
+    beforeEach(function () {
+      $('<div id="gaTest" data-journey="thisIsATest"></div>').appendTo('body')
+    })
+
+    afterEach(function () {
+      $('#gaTest').remove()
+    })
+
+    it('should get set up to send events to google analytics using ga() if it exists', function () {
+      window.ga = jasmine.createSpy('ga')
+
+      GOVUK.performance.stageprompt.setupForGoogleAnalytics()
+
+      expect(window.ga).toHaveBeenCalledWith('send', 'event', 'thisIsATest', undefined, undefined, { nonInteraction: true })
+    })
+
+    it('should get set up to send events to google analytics using gaq.push() if ga() does not exist', function () {
+      delete window.ga
+      window._gaq = {push: jasmine.createSpy('_gaq.push')}
+
+      GOVUK.performance.stageprompt.setupForGoogleAnalytics()
+
+      expect(window._gaq.push).toHaveBeenCalledWith(['_trackEvent', 'thisIsATest', undefined, undefined, undefined, true])
+    })
+  })
+})

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_frontend_toolkit
 version: !ruby/object:Gem::Version
-  version: 7.6.0
+  version: 8.0.0
 platform: ruby
 authors:
 - Government Digital Service
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-07-18 00:00:00.000000000 Z
+date: 2018-09-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -238,6 +238,7 @@ files:
 - app/assets/javascripts/stageprompt.js
 - app/assets/javascripts/vendor/jquery/jquery.player.min.js
 - app/assets/javascripts/vendor/polyfills/bind.js
+- app/assets/package-lock.json
 - app/assets/package.json
 - app/assets/spec/manifest.js
 - app/assets/spec/stylesheets/_colour_contrast_spec.scss
@@ -259,6 +260,7 @@ files:
 - app/assets/spec/unit/selection-button.spec.js
 - app/assets/spec/unit/shim-links-with-button-role.spec.js
 - app/assets/spec/unit/show-hide-content.spec.js
+- app/assets/spec/unit/stageprompt.spec.js
 - app/assets/spec/unit/stick-at-top-when-scrolling.spec.js
 - app/assets/stylesheets/.gitkeep
 - app/assets/stylesheets/_colours.scss