diff options
Diffstat (limited to 'spec/frontend/tracking_spec.js')
| -rw-r--r-- | spec/frontend/tracking_spec.js | 76 |
1 files changed, 54 insertions, 22 deletions
diff --git a/spec/frontend/tracking_spec.js b/spec/frontend/tracking_spec.js index 6a22de3be5c..2c7bcaa98b0 100644 --- a/spec/frontend/tracking_spec.js +++ b/spec/frontend/tracking_spec.js @@ -176,25 +176,29 @@ describe('Tracking', () => { }); }); - describe('tracking interface events', () => { + describe.each` + term + ${'event'} + ${'action'} + `('tracking interface events with data-track-$term', ({ term }) => { let eventSpy; beforeEach(() => { eventSpy = jest.spyOn(Tracking, 'event'); Tracking.bindDocument('_category_'); // only happens once setHTMLFixture(` - <input data-track-event="click_input1" data-track-label="_label_" value="_value_"/> - <input data-track-event="click_input2" data-track-value="_value_override_" value="_value_"/> - <input type="checkbox" data-track-event="toggle_checkbox" value="_value_" checked/> - <input class="dropdown" data-track-event="toggle_dropdown"/> - <div data-track-event="nested_event"><span class="nested"></span></div> - <input data-track-eventbogus="click_bogusinput" data-track-label="_label_" value="_value_"/> - <input data-track-event="click_input3" data-track-experiment="example" value="_value_"/> + <input data-track-${term}="click_input1" data-track-label="_label_" value="_value_"/> + <input data-track-${term}="click_input2" data-track-value="_value_override_" value="_value_"/> + <input type="checkbox" data-track-${term}="toggle_checkbox" value="_value_" checked/> + <input class="dropdown" data-track-${term}="toggle_dropdown"/> + <div data-track-${term}="nested_event"><span class="nested"></span></div> + <input data-track-bogus="click_bogusinput" data-track-label="_label_" value="_value_"/> + <input data-track-${term}="click_input3" data-track-experiment="example" value="_value_"/> `); }); - it('binds to clicks on elements matching [data-track-event]', () => { - document.querySelector('[data-track-event="click_input1"]').click(); + it(`binds to clicks on elements matching [data-track-${term}]`, () => { + document.querySelector(`[data-track-${term}="click_input1"]`).click(); expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input1', { label: '_label_', @@ -202,14 +206,14 @@ describe('Tracking', () => { }); }); - it('does not bind to clicks on elements without [data-track-event]', () => { - document.querySelector('[data-track-eventbogus="click_bogusinput"]').click(); + it(`does not bind to clicks on elements without [data-track-${term}]`, () => { + document.querySelector('[data-track-bogus="click_bogusinput"]').click(); expect(eventSpy).not.toHaveBeenCalled(); }); it('allows value override with the data-track-value attribute', () => { - document.querySelector('[data-track-event="click_input2"]').click(); + document.querySelector(`[data-track-${term}="click_input2"]`).click(); expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input2', { value: '_value_override_', @@ -217,7 +221,7 @@ describe('Tracking', () => { }); it('handles checkbox values correctly', () => { - const checkbox = document.querySelector('[data-track-event="toggle_checkbox"]'); + const checkbox = document.querySelector(`[data-track-${term}="toggle_checkbox"]`); checkbox.click(); // unchecking @@ -233,7 +237,7 @@ describe('Tracking', () => { }); it('handles bootstrap dropdowns', () => { - const dropdown = document.querySelector('[data-track-event="toggle_dropdown"]'); + const dropdown = document.querySelector(`[data-track-${term}="toggle_dropdown"]`); dropdown.dispatchEvent(new Event('show.bs.dropdown', { bubbles: true })); @@ -250,7 +254,7 @@ describe('Tracking', () => { expect(eventSpy).toHaveBeenCalledWith('_category_', 'nested_event', {}); }); - it('brings in experiment data if linked to an experiment', () => { + it('includes experiment data if linked to an experiment', () => { const mockExperimentData = { variant: 'candidate', experiment: 'repo_integrations_link', @@ -258,7 +262,7 @@ describe('Tracking', () => { }; getExperimentData.mockReturnValue(mockExperimentData); - document.querySelector('[data-track-event="click_input3"]').click(); + document.querySelector(`[data-track-${term}="click_input3"]`).click(); expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input3', { value: '_value_', @@ -267,22 +271,26 @@ describe('Tracking', () => { }); }); - describe('tracking page loaded events', () => { + describe.each` + term + ${'event'} + ${'action'} + `('tracking page loaded events with -$term', ({ term }) => { let eventSpy; beforeEach(() => { eventSpy = jest.spyOn(Tracking, 'event'); setHTMLFixture(` - <input data-track-event="render" data-track-label="label1" value="_value_" data-track-property="_property_"/> - <span data-track-event="render" data-track-label="label2" data-track-value="_value_"> + <input data-track-${term}="render" data-track-label="label1" value="_value_" data-track-property="_property_"/> + <span data-track-${term}="render" data-track-label="label2" data-track-value="_value_"> Something </span> - <input data-track-event="_render_bogus_" data-track-label="label3" value="_value_" data-track-property="_property_"/> + <input data-track-${term}="_render_bogus_" data-track-label="label3" value="_value_" data-track-property="_property_"/> `); Tracking.trackLoadEvents('_category_'); // only happens once }); - it('sends tracking events when [data-track-event="render"] is on an element', () => { + it(`sends tracking events when [data-track-${term}="render"] is on an element`, () => { expect(eventSpy.mock.calls).toEqual([ [ '_category_', @@ -318,6 +326,30 @@ describe('Tracking', () => { mixin.computed.tracking = { foo: 'baz', baz: 'bar' }; expect(mixin.computed.trackingOptions()).toEqual({ foo: 'baz', baz: 'bar' }); }); + + it('includes experiment data if linked to an experiment', () => { + const mockExperimentData = { + variant: 'candidate', + experiment: 'darkMode', + }; + getExperimentData.mockReturnValue(mockExperimentData); + + const mixin = Tracking.mixin({ foo: 'bar', experiment: 'darkMode' }); + expect(mixin.computed.trackingOptions()).toEqual({ + foo: 'bar', + context: { + schema: TRACKING_CONTEXT_SCHEMA, + data: mockExperimentData, + }, + }); + }); + + it('does not include experiment data if experiment data does not exist', () => { + const mixin = Tracking.mixin({ foo: 'bar', experiment: 'lightMode' }); + expect(mixin.computed.trackingOptions()).toEqual({ + foo: 'bar', + }); + }); }); describe('trackingCategory', () => { |