debian-mirror-gitlab/spec/frontend/header_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

101 lines
2.8 KiB
JavaScript
Raw Normal View History

2020-04-22 19:07:51 +05:30
import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
2020-10-24 23:57:45 +05:30
import initTodoToggle, { initNavUserDropdownTracking } from '~/header';
2022-07-16 23:28:13 +05:30
import { loadHTMLFixture, setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
2017-08-17 22:00:37 +05:30
2020-03-13 15:44:24 +05:30
describe('Header', () => {
2020-04-22 19:07:51 +05:30
describe('Todos notification', () => {
2020-11-24 15:15:51 +05:30
const todosPendingCount = '.js-todos-count';
2020-04-22 19:07:51 +05:30
const fixtureTemplate = 'issues/open-issue.html';
2017-08-17 22:00:37 +05:30
2020-04-22 19:07:51 +05:30
function isTodosCountHidden() {
2022-08-13 15:12:31 +05:30
return document.querySelector(todosPendingCount).classList.contains('hidden');
2020-04-22 19:07:51 +05:30
}
2017-08-17 22:00:37 +05:30
2020-04-22 19:07:51 +05:30
function triggerToggle(newCount) {
2022-08-13 15:12:31 +05:30
const event = new CustomEvent('todo:toggle', {
detail: {
count: newCount,
},
});
document.dispatchEvent(event);
2020-04-22 19:07:51 +05:30
}
2017-08-17 22:00:37 +05:30
2020-04-22 19:07:51 +05:30
beforeEach(() => {
initTodoToggle();
2022-07-16 23:28:13 +05:30
loadHTMLFixture(fixtureTemplate);
});
afterEach(() => {
resetHTMLFixture();
2020-04-22 19:07:51 +05:30
});
2017-08-17 22:00:37 +05:30
2020-04-22 19:07:51 +05:30
it('should update todos-count after receiving the todo:toggle event', () => {
triggerToggle(5);
2018-12-13 13:39:08 +05:30
2022-08-13 15:12:31 +05:30
expect(document.querySelector(todosPendingCount).textContent).toEqual('5');
2020-04-22 19:07:51 +05:30
});
2017-08-17 22:00:37 +05:30
2020-04-22 19:07:51 +05:30
it('should hide todos-count when it is 0', () => {
triggerToggle(0);
2018-12-13 13:39:08 +05:30
2020-04-22 19:07:51 +05:30
expect(isTodosCountHidden()).toEqual(true);
});
it('should show todos-count when it is more than 0', () => {
triggerToggle(10);
expect(isTodosCountHidden()).toEqual(false);
});
describe('when todos-count is 1000', () => {
beforeEach(() => {
triggerToggle(1000);
});
2017-08-17 22:00:37 +05:30
2020-04-22 19:07:51 +05:30
it('should show todos-count', () => {
expect(isTodosCountHidden()).toEqual(false);
});
2018-12-13 13:39:08 +05:30
2020-04-22 19:07:51 +05:30
it('should show 99+ for todos-count', () => {
2022-08-13 15:12:31 +05:30
expect(document.querySelector(todosPendingCount).textContent).toEqual('99+');
2020-04-22 19:07:51 +05:30
});
});
2018-03-17 18:26:18 +05:30
});
2020-04-22 19:07:51 +05:30
describe('Track user dropdown open', () => {
let trackingSpy;
2018-03-17 18:26:18 +05:30
beforeEach(() => {
2022-07-16 23:28:13 +05:30
setHTMLFixture(`
2020-04-22 19:07:51 +05:30
<li class="js-nav-user-dropdown">
2021-11-11 11:23:49 +05:30
<a class="js-buy-pipeline-minutes-link" data-track-action="click_buy_ci_minutes" data-track-label="free" data-track-property="user_dropdown">Buy Pipeline minutes</a>
2020-04-22 19:07:51 +05:30
</li>`);
2022-08-13 15:12:31 +05:30
trackingSpy = mockTracking(
'_category_',
document.querySelector('.js-nav-user-dropdown').element,
jest.spyOn,
);
2020-04-22 19:07:51 +05:30
document.body.dataset.page = 'some:page';
initNavUserDropdownTracking();
2017-08-17 22:00:37 +05:30
});
2020-04-22 19:07:51 +05:30
afterEach(() => {
unmockTracking();
2022-07-16 23:28:13 +05:30
resetHTMLFixture();
2017-08-17 22:00:37 +05:30
});
2020-06-23 00:09:42 +05:30
it('sends a tracking event when the dropdown is opened and contains Buy Pipeline minutes link', () => {
2022-08-13 15:12:31 +05:30
const event = new CustomEvent('shown.bs.dropdown');
document.querySelector('.js-nav-user-dropdown').dispatchEvent(event);
2020-04-22 19:07:51 +05:30
2020-05-24 23:13:21 +05:30
expect(trackingSpy).toHaveBeenCalledWith('some:page', 'show_buy_ci_minutes', {
label: 'free',
property: 'user_dropdown',
});
});
2017-08-17 22:00:37 +05:30
});
2018-03-17 18:26:18 +05:30
});