2019-10-12 21:52:04 +05:30
|
|
|
import $ from 'jquery';
|
|
|
|
import { setHTMLFixture } from './helpers/fixtures';
|
|
|
|
|
2019-12-04 20:38:33 +05:30
|
|
|
import Tracking, { initUserTracking } from '~/tracking';
|
2019-10-12 21:52:04 +05:30
|
|
|
|
|
|
|
describe('Tracking', () => {
|
2019-12-04 20:38:33 +05:30
|
|
|
let snowplowSpy;
|
|
|
|
|
2019-10-12 21:52:04 +05:30
|
|
|
beforeEach(() => {
|
|
|
|
window.snowplow = window.snowplow || (() => {});
|
2019-12-04 20:38:33 +05:30
|
|
|
window.snowplowOptions = {
|
|
|
|
namespace: '_namespace_',
|
|
|
|
hostname: 'app.gitfoo.com',
|
|
|
|
cookieDomain: '.gitfoo.com',
|
|
|
|
};
|
|
|
|
snowplowSpy = jest.spyOn(window, 'snowplow');
|
2019-10-12 21:52:04 +05:30
|
|
|
});
|
|
|
|
|
2019-12-04 20:38:33 +05:30
|
|
|
describe('initUserTracking', () => {
|
|
|
|
it('calls through to get a new tracker with the expected options', () => {
|
|
|
|
initUserTracking();
|
|
|
|
expect(snowplowSpy).toHaveBeenCalledWith('newTracker', '_namespace_', 'app.gitfoo.com', {
|
|
|
|
namespace: '_namespace_',
|
|
|
|
hostname: 'app.gitfoo.com',
|
|
|
|
cookieDomain: '.gitfoo.com',
|
|
|
|
appId: '',
|
|
|
|
userFingerprint: false,
|
|
|
|
respectDoNotTrack: true,
|
|
|
|
forceSecureTracker: true,
|
|
|
|
eventMethod: 'post',
|
|
|
|
contexts: { webPage: true },
|
|
|
|
formTracking: false,
|
|
|
|
linkClickTracking: false,
|
|
|
|
});
|
|
|
|
});
|
2019-10-12 21:52:04 +05:30
|
|
|
|
2019-12-04 20:38:33 +05:30
|
|
|
it('should activate features based on what has been enabled', () => {
|
|
|
|
initUserTracking();
|
|
|
|
expect(snowplowSpy).toHaveBeenCalledWith('enableActivityTracking', 30, 30);
|
|
|
|
expect(snowplowSpy).toHaveBeenCalledWith('trackPageView');
|
|
|
|
expect(snowplowSpy).not.toHaveBeenCalledWith('enableFormTracking');
|
|
|
|
expect(snowplowSpy).not.toHaveBeenCalledWith('enableLinkClickTracking');
|
|
|
|
|
|
|
|
window.snowplowOptions = Object.assign({}, window.snowplowOptions, {
|
|
|
|
formTracking: true,
|
|
|
|
linkClickTracking: true,
|
|
|
|
});
|
|
|
|
|
|
|
|
initUserTracking();
|
|
|
|
expect(snowplowSpy).toHaveBeenCalledWith('enableFormTracking');
|
|
|
|
expect(snowplowSpy).toHaveBeenCalledWith('enableLinkClickTracking');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('.event', () => {
|
|
|
|
afterEach(() => {
|
|
|
|
window.doNotTrack = undefined;
|
|
|
|
navigator.doNotTrack = undefined;
|
|
|
|
navigator.msDoNotTrack = undefined;
|
2019-10-12 21:52:04 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
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();
|
|
|
|
});
|
2019-12-04 20:38:33 +05:30
|
|
|
|
|
|
|
it('skips tracking if the user does not want to be tracked (general spec)', () => {
|
|
|
|
window.doNotTrack = '1';
|
|
|
|
Tracking.event('_category_', '_eventName_');
|
|
|
|
|
|
|
|
expect(snowplowSpy).not.toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('skips tracking if the user does not want to be tracked (firefox legacy)', () => {
|
|
|
|
navigator.doNotTrack = 'yes';
|
|
|
|
Tracking.event('_category_', '_eventName_');
|
|
|
|
|
|
|
|
expect(snowplowSpy).not.toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('skips tracking if the user does not want to be tracked (IE legacy)', () => {
|
|
|
|
navigator.msDoNotTrack = '1';
|
|
|
|
Tracking.event('_category_', '_eventName_');
|
|
|
|
|
|
|
|
expect(snowplowSpy).not.toHaveBeenCalled();
|
|
|
|
});
|
2019-10-12 21:52:04 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
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: '',
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|