diff options
author | Jeremy Jackson <jjackson@gitlab.com> | 2019-08-01 08:28:15 +0300 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2019-08-01 08:28:15 +0300 |
commit | 23cc246066c6ba5242ff60049487983748679fd8 (patch) | |
tree | 4fc42e7f0f86b5ad42684dc1fcaa8769dcddca57 /spec/frontend | |
parent | d89d71ebed9d5e207fce2ed63bf951f95cf367cd (diff) |
Adds new tracking interface for snowplow
This will ultimately replace the stats.js that
exists in EE.
Diffstat (limited to 'spec/frontend')
-rw-r--r-- | spec/frontend/tracking_spec.js | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/spec/frontend/tracking_spec.js b/spec/frontend/tracking_spec.js new file mode 100644 index 00000000000..7e462e9a6ce --- /dev/null +++ b/spec/frontend/tracking_spec.js @@ -0,0 +1,123 @@ +import $ from 'jquery'; +import { setHTMLFixture } from './helpers/fixtures'; + +import Tracking from '~/tracking'; + +describe('Tracking', () => { + beforeEach(() => { + window.snowplow = window.snowplow || (() => {}); + }); + + describe('.event', () => { + let snowplowSpy = null; + + beforeEach(() => { + snowplowSpy = jest.spyOn(window, 'snowplow'); + }); + + it('tracks to snowplow (our current tracking system)', () => { + Tracking.event('_category_', '_eventName_', { label: '_label_' }); + + expect(snowplowSpy).toHaveBeenCalledWith('trackStructEvent', '_category_', '_eventName_', { + label: '_label_', + property: '', + value: '', + }); + }); + + it('skips tracking if snowplow is unavailable', () => { + window.snowplow = false; + Tracking.event('_category_', '_eventName_'); + + expect(snowplowSpy).not.toHaveBeenCalled(); + }); + + it('skips tracking if ', () => { + window.snowplow = false; + Tracking.event('_category_', '_eventName_'); + + expect(snowplowSpy).not.toHaveBeenCalled(); + }); + }); + + describe('tracking interface events', () => { + let eventSpy = null; + let subject = null; + + beforeEach(() => { + eventSpy = jest.spyOn(Tracking, 'event'); + subject = new Tracking('_category_'); + 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 class="js-projects-list-holder"></div> + `); + }); + + it('binds to clicks on elements matching [data-track-event]', () => { + subject.bind(document); + $('[data-track-event="click_input1"]').click(); + + expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input1', { + label: '_label_', + value: '_value_', + property: '', + }); + }); + + it('allows value override with the data-track-value attribute', () => { + subject.bind(document); + $('[data-track-event="click_input2"]').click(); + + expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input2', { + label: '', + value: '_value_override_', + property: '', + }); + }); + + it('handles checkbox values correctly', () => { + subject.bind(document); + const $checkbox = $('[data-track-event="toggle_checkbox"]'); + + $checkbox.click(); // unchecking + + expect(eventSpy).toHaveBeenCalledWith('_category_', 'toggle_checkbox', { + label: '', + property: '', + value: false, + }); + + $checkbox.click(); // checking + + expect(eventSpy).toHaveBeenCalledWith('_category_', 'toggle_checkbox', { + label: '', + property: '', + value: '_value_', + }); + }); + + it('handles bootstrap dropdowns', () => { + new Tracking('_category_').bind(document); + const $dropdown = $('[data-track-event="toggle_dropdown"]'); + + $dropdown.trigger('show.bs.dropdown'); // showing + + expect(eventSpy).toHaveBeenCalledWith('_category_', 'toggle_dropdown_show', { + label: '', + property: '', + value: '', + }); + + $dropdown.trigger('hide.bs.dropdown'); // hiding + + expect(eventSpy).toHaveBeenCalledWith('_category_', 'toggle_dropdown_hide', { + label: '', + property: '', + value: '', + }); + }); + }); +}); |