251 lines
6.5 KiB
JavaScript
251 lines
6.5 KiB
JavaScript
import { merge } from 'lodash';
|
|
import {
|
|
trackFreeTrialAccountSubmissions,
|
|
trackNewRegistrations,
|
|
trackSaasTrialSubmit,
|
|
trackSaasTrialSkip,
|
|
trackSaasTrialGroup,
|
|
trackSaasTrialProject,
|
|
trackSaasTrialProjectImport,
|
|
trackSaasTrialGetStarted,
|
|
} from '~/google_tag_manager';
|
|
import { setHTMLFixture } from 'helpers/fixtures';
|
|
import { logError } from '~/lib/logger';
|
|
|
|
jest.mock('~/lib/logger');
|
|
|
|
describe('~/google_tag_manager/index', () => {
|
|
let spy;
|
|
|
|
beforeEach(() => {
|
|
spy = jest.fn();
|
|
|
|
window.dataLayer = {
|
|
push: spy,
|
|
};
|
|
window.gon.features = {
|
|
gitlabGtmDatalayer: true,
|
|
};
|
|
});
|
|
|
|
const createHTML = ({ links = [], forms = [] } = {}) => {
|
|
// .foo elements are used to test elements which shouldn't do anything
|
|
const allLinks = links.concat({ cls: 'foo' });
|
|
const allForms = forms.concat({ cls: 'foo' });
|
|
|
|
const el = document.createElement('div');
|
|
|
|
allLinks.forEach(({ cls = '', id = '', href = '#', text = 'Hello', attributes = {} }) => {
|
|
const a = document.createElement('a');
|
|
a.id = id;
|
|
a.href = href || '#';
|
|
a.className = cls;
|
|
a.textContent = text;
|
|
|
|
Object.entries(attributes).forEach(([key, value]) => {
|
|
a.setAttribute(key, value);
|
|
});
|
|
|
|
el.append(a);
|
|
});
|
|
|
|
allForms.forEach(({ cls = '', id = '' }) => {
|
|
const form = document.createElement('form');
|
|
form.id = id;
|
|
form.className = cls;
|
|
|
|
el.append(form);
|
|
});
|
|
|
|
return el.innerHTML;
|
|
};
|
|
|
|
const triggerEvent = (selector, eventType) => {
|
|
const el = document.querySelector(selector);
|
|
|
|
el.dispatchEvent(new Event(eventType));
|
|
};
|
|
|
|
const getSelector = ({ id, cls }) => (id ? `#${id}` : `.${cls}`);
|
|
|
|
const createTestCase = (subject, { forms = [], links = [] }) => {
|
|
const expectedFormEvents = forms.map(({ expectation, ...form }) => ({
|
|
selector: getSelector(form),
|
|
trigger: 'submit',
|
|
expectation,
|
|
}));
|
|
|
|
const expectedLinkEvents = links.map(({ expectation, ...link }) => ({
|
|
selector: getSelector(link),
|
|
trigger: 'click',
|
|
expectation,
|
|
}));
|
|
|
|
return [
|
|
subject,
|
|
{
|
|
forms,
|
|
links,
|
|
expectedEvents: [...expectedFormEvents, ...expectedLinkEvents],
|
|
},
|
|
];
|
|
};
|
|
|
|
const createOmniAuthTestCase = (subject, accountType) =>
|
|
createTestCase(subject, {
|
|
forms: [
|
|
{
|
|
id: 'new_new_user',
|
|
expectation: {
|
|
event: 'accountSubmit',
|
|
accountMethod: 'form',
|
|
accountType,
|
|
},
|
|
},
|
|
],
|
|
links: [
|
|
{
|
|
// id is needed so that the test selects the right element to trigger
|
|
id: 'test-0',
|
|
cls: 'js-oauth-login',
|
|
attributes: {
|
|
'data-provider': 'myspace',
|
|
},
|
|
expectation: {
|
|
event: 'accountSubmit',
|
|
accountMethod: 'myspace',
|
|
accountType,
|
|
},
|
|
},
|
|
{
|
|
id: 'test-1',
|
|
cls: 'js-oauth-login',
|
|
attributes: {
|
|
'data-provider': 'gitlab',
|
|
},
|
|
expectation: {
|
|
event: 'accountSubmit',
|
|
accountMethod: 'gitlab',
|
|
accountType,
|
|
},
|
|
},
|
|
],
|
|
});
|
|
|
|
describe.each([
|
|
createOmniAuthTestCase(trackFreeTrialAccountSubmissions, 'freeThirtyDayTrial'),
|
|
createOmniAuthTestCase(trackNewRegistrations, 'standardSignUp'),
|
|
createTestCase(trackSaasTrialSubmit, {
|
|
forms: [{ id: 'new_trial', expectation: { event: 'saasTrialSubmit' } }],
|
|
}),
|
|
createTestCase(trackSaasTrialSkip, {
|
|
links: [{ cls: 'js-skip-trial', expectation: { event: 'saasTrialSkip' } }],
|
|
}),
|
|
createTestCase(trackSaasTrialGroup, {
|
|
forms: [{ id: 'new_group', expectation: { event: 'saasTrialGroup' } }],
|
|
}),
|
|
createTestCase(trackSaasTrialProject, {
|
|
forms: [{ id: 'new_project', expectation: { event: 'saasTrialProject' } }],
|
|
}),
|
|
createTestCase(trackSaasTrialProjectImport, {
|
|
links: [
|
|
{
|
|
id: 'js-test-btn-0',
|
|
cls: 'js-import-project-btn',
|
|
attributes: { 'data-platform': 'bitbucket' },
|
|
expectation: { event: 'saasTrialProjectImport', saasProjectImport: 'bitbucket' },
|
|
},
|
|
{
|
|
// id is neeeded so we trigger the right element in the test
|
|
id: 'js-test-btn-1',
|
|
cls: 'js-import-project-btn',
|
|
attributes: { 'data-platform': 'github' },
|
|
expectation: { event: 'saasTrialProjectImport', saasProjectImport: 'github' },
|
|
},
|
|
],
|
|
}),
|
|
createTestCase(trackSaasTrialGetStarted, {
|
|
links: [
|
|
{
|
|
cls: 'js-get-started-btn',
|
|
expectation: { event: 'saasTrialGetStarted' },
|
|
},
|
|
],
|
|
}),
|
|
])('%p', (subject, { links = [], forms = [], expectedEvents }) => {
|
|
beforeEach(() => {
|
|
setHTMLFixture(createHTML({ links, forms }));
|
|
|
|
subject();
|
|
});
|
|
|
|
it.each(expectedEvents)('when %p', ({ selector, trigger, expectation }) => {
|
|
expect(spy).not.toHaveBeenCalled();
|
|
|
|
triggerEvent(selector, trigger);
|
|
|
|
expect(spy).toHaveBeenCalledTimes(1);
|
|
expect(spy).toHaveBeenCalledWith(expectation);
|
|
expect(logError).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('when random link is clicked, does nothing', () => {
|
|
triggerEvent('a.foo', 'click');
|
|
|
|
expect(spy).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('when random form is submitted, does nothing', () => {
|
|
triggerEvent('form.foo', 'submit');
|
|
|
|
expect(spy).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe.each([
|
|
{ dataLayer: null },
|
|
{ gon: { features: null } },
|
|
{ gon: { features: { gitlabGtmDatalayer: false } } },
|
|
])('when window %o', (windowAttrs) => {
|
|
beforeEach(() => {
|
|
merge(window, windowAttrs);
|
|
});
|
|
|
|
it('no ops', () => {
|
|
setHTMLFixture(createHTML({ forms: [{ id: 'new_project' }] }));
|
|
|
|
trackSaasTrialProject();
|
|
|
|
triggerEvent('#new_project', 'submit');
|
|
|
|
expect(spy).not.toHaveBeenCalled();
|
|
expect(logError).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe('when window.dataLayer throws error', () => {
|
|
const pushError = new Error('test');
|
|
|
|
beforeEach(() => {
|
|
window.dataLayer = {
|
|
push() {
|
|
throw pushError;
|
|
},
|
|
};
|
|
});
|
|
|
|
it('logs error', () => {
|
|
setHTMLFixture(createHTML({ forms: [{ id: 'new_project' }] }));
|
|
|
|
trackSaasTrialProject();
|
|
|
|
triggerEvent('#new_project', 'submit');
|
|
|
|
expect(logError).toHaveBeenCalledWith(
|
|
'Unexpected error while pushing to dataLayer',
|
|
pushError,
|
|
);
|
|
});
|
|
});
|
|
});
|