Skip to content

Commit

Permalink
Add tests to step-by-step nav to ensure ga4 attributes initialise
Browse files Browse the repository at this point in the history
  • Loading branch information
AshGDS committed Nov 9, 2022
1 parent 34139e4 commit d36537a
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 3 deletions.
7 changes: 7 additions & 0 deletions spec/components/step_by_step_nav_spec.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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
29 changes: 26 additions & 3 deletions spec/javascripts/components/step-by-step-nav-spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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">' +
Expand All @@ -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">' +
Expand Down Expand Up @@ -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}')
})
})
})

0 comments on commit d36537a

Please sign in to comment.