Add tests to step-by-step nav to ensure ga4 attributes initialise

alphagov · Nov 9, 2022 · bf3c85c · bf3c85c
1 parent a89941d
commit bf3c85c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/spec/components/step_by_step_nav_spec.rb b/spec/components/step_by_step_nav_spec.rb
@@ -253,4 +253,11 @@ def stepnav
 
     assert_select ".gem-c-step-nav[data-id='harold']"
   end
+
+  it "adds ga4 attributes" do
+    render_component(steps: stepnav, ga4_tracking: true)
+
+    assert_select ".gem-c-step-nav[data-ga4-show-all-attributes='{\"event_name\":\"select_content\",\"type\":\"step by step\",\"index\":0,\"index_total\":5}']"
+    assert_select "#{step1} .gem-c-step-nav__title .js-step-title[data-ga4='{\"event_name\":\"select_content\",\"type\":\"step by step\",\"text\":\"Step 1\",\"index\":1,\"index_total\":5}']"
+  end
 end
diff --git a/spec/javascripts/components/step-by-step-nav-spec.js b/spec/javascripts/components/step-by-step-nav-spec.js
@@ -4,9 +4,9 @@
 describe('A stepnav module', function () {
   'use strict'
 
-  var $element
+  var $element, element
   var html =
-    '<div data-module="gemstepnav" class="gem-c-step-nav js-hidden" data-id="unique-id" data-show-text="Show" data-hide-text="Hide" data-show-all-text="Show all steps" data-hide-all-text="Hide all steps">' +
+    '<div data-module="gemstepnav" class="gem-c-step-nav js-hidden" data-id="unique-id" data-show-text="Show" data-hide-text="Hide" data-show-all-text="Show all steps" data-hide-all-text="Hide all steps" data-ga4-show-all-attributes=\'{"event_name":"select_content","type":"step by step","index":0,"index_total":99}\'>' +
       '<ol class="gem-c-step-nav__steps">' +
         '<li class="gem-c-step-nav__step js-step" id="topic-step-one" data-track-count="stepnavStep">' +
           '<div class="gem-c-step-nav__header js-toggle-panel" data-position="1">' +
@@ -18,7 +18,7 @@ describe('A stepnav module', function () {
                   '</span>' +
                 '</span>' +
               '</div>' +
-              '<span class="js-step-title">Topic Step One</span>' +
+              '<span class="js-step-title" data-ga4=\'{"event_name":"select_content","type":"step by step","text":"Example","index":1,"index_total":99}\'>Topic Step One</span>' +
             '</h2>' +
           '</div>' +
           '<div class="gem-c-step-nav__panel js-panel" id="step-panel-topic-step-one-1">' +
@@ -921,4 +921,27 @@ describe('A stepnav module', function () {
       })
     })
   })
+
+  describe('with GA4 tracking enabled', function () {
+    beforeEach(function () {
+      element = document.createElement('div')
+      element.innerHTML = html
+      new GOVUK.Modules.Gemstepnav(element.childNodes[0]).init()
+    })
+
+    it('moves the data-ga4-show-all-attributes attribute from the parent <div> to the JS generated "show all steps" <button>', function () {
+      var stepNav = element.childNodes[0]
+      var showAllButton = stepNav.querySelector('button.js-step-controls-button')
+      expect(showAllButton.getAttribute('data-ga4-expandable')).toEqual('')
+      expect(showAllButton.getAttribute('data-ga4')).toEqual('{"event_name":"select_content","type":"step by step","index":0,"index_total":99}')
+    })
+
+    it('moves the data-ga4 attribute from a step title <span> to the JS generated step <button>', function () {
+      var stepNav = element.childNodes[0]
+      var stepButton = stepNav.querySelector('#topic-step-one .js-step-title button')
+
+      expect(stepButton.getAttribute('data-ga4-expandable')).toEqual('')
+      expect(stepButton.getAttribute('data-ga4')).toEqual('{"event_name":"select_content","type":"step by step","text":"Example","index":1,"index_total":99}')
+    })
+  })
 })