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

377 lines
12 KiB
JavaScript
Raw Normal View History

2018-12-13 13:39:08 +05:30
/* eslint-disable no-param-reassign */
2017-08-17 22:00:37 +05:30
2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2020-11-24 15:15:51 +05:30
import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
2017-09-10 17:25:29 +05:30
import '~/lib/utils/common_utils';
2020-06-23 00:09:42 +05:30
import { visitUrl } from '~/lib/utils/url_utility';
2017-08-17 22:00:37 +05:30
2020-06-23 00:09:42 +05:30
jest.mock('~/lib/utils/url_utility', () => ({
visitUrl: jest.fn().mockName('visitUrl'),
}));
2020-11-24 15:15:51 +05:30
describe('deprecatedJQueryDropdown', () => {
preloadFixtures('static/deprecated_jquery_dropdown.html');
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
const NON_SELECTABLE_CLASSES =
'.divider, .separator, .dropdown-header, .dropdown-menu-empty-item';
2017-08-17 22:00:37 +05:30
const SEARCH_INPUT_SELECTOR = '.dropdown-input-field';
const ITEM_SELECTOR = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`;
const FOCUSED_ITEM_SELECTOR = `${ITEM_SELECTOR} a.is-focused`;
const ARROW_KEYS = {
DOWN: 40,
UP: 38,
ENTER: 13,
2018-12-13 13:39:08 +05:30
ESC: 27,
2017-08-17 22:00:37 +05:30
};
let remoteCallback;
2020-06-23 00:09:42 +05:30
const test = {};
const navigateWithKeys = (direction, steps, cb, i) => {
2017-08-17 22:00:37 +05:30
i = i || 0;
if (!i) direction = direction.toUpperCase();
$('body').trigger({
type: 'keydown',
which: ARROW_KEYS[direction],
2018-12-13 13:39:08 +05:30
keyCode: ARROW_KEYS[direction],
2017-08-17 22:00:37 +05:30
});
i += 1;
if (i <= steps) {
navigateWithKeys(direction, steps, cb, i);
} else {
cb();
}
};
2020-06-23 00:09:42 +05:30
const remoteMock = (data, term, callback) => {
2017-08-17 22:00:37 +05:30
remoteCallback = callback.bind({}, data);
};
2018-03-17 18:26:18 +05:30
function initDropDown(hasRemote, isFilterable, extraOpts = {}) {
2020-05-24 23:13:21 +05:30
const options = {
selectable: true,
filterable: isFilterable,
2020-06-23 00:09:42 +05:30
data: hasRemote ? remoteMock.bind({}, test.projectsData) : test.projectsData,
2020-05-24 23:13:21 +05:30
search: {
fields: ['name'],
2018-03-17 18:26:18 +05:30
},
2021-03-08 18:12:59 +05:30
text: (project) => project.name_with_namespace || project.name,
id: (project) => project.id,
2020-05-24 23:13:21 +05:30
...extraOpts,
};
2020-11-24 15:15:51 +05:30
test.dropdownButtonElement = $('#js-project-dropdown', test.dropdownContainerElement);
initDeprecatedJQueryDropdown(test.dropdownButtonElement, options);
2018-03-17 18:26:18 +05:30
}
beforeEach(() => {
2020-11-24 15:15:51 +05:30
loadFixtures('static/deprecated_jquery_dropdown.html');
2020-06-23 00:09:42 +05:30
test.dropdownContainerElement = $('.dropdown.inline');
test.$dropdownMenuElement = $('.dropdown-menu', test.dropdownContainerElement);
test.projectsData = getJSONFixture('static/projects.json');
2018-03-17 18:26:18 +05:30
});
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
afterEach(() => {
2018-03-27 19:54:05 +05:30
$('body').off('keydown');
2020-06-23 00:09:42 +05:30
test.dropdownContainerElement.off('keyup');
2018-03-17 18:26:18 +05:30
});
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
it('should open on click', () => {
initDropDown.call(this, false);
2018-12-13 13:39:08 +05:30
2020-06-23 00:09:42 +05:30
expect(test.dropdownContainerElement).not.toHaveClass('show');
test.dropdownButtonElement.click();
2018-12-13 13:39:08 +05:30
2020-06-23 00:09:42 +05:30
expect(test.dropdownContainerElement).toHaveClass('show');
2018-03-17 18:26:18 +05:30
});
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
it('escapes HTML as text', () => {
2020-06-23 00:09:42 +05:30
test.projectsData[0].name_with_namespace = '<script>alert("testing");</script>';
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
initDropDown.call(this, false);
2017-08-17 22:00:37 +05:30
2020-06-23 00:09:42 +05:30
test.dropdownButtonElement.click();
2017-08-17 22:00:37 +05:30
2018-12-13 13:39:08 +05:30
expect($('.dropdown-content li:first-child').text()).toBe('<script>alert("testing");</script>');
2018-03-17 18:26:18 +05:30
});
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
it('should output HTML when highlighting', () => {
2020-06-23 00:09:42 +05:30
test.projectsData[0].name_with_namespace = 'testing';
2018-03-17 18:26:18 +05:30
$('.dropdown-input .dropdown-input-field').val('test');
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
initDropDown.call(this, false, true, {
highlight: true,
});
2017-08-17 22:00:37 +05:30
2020-06-23 00:09:42 +05:30
test.dropdownButtonElement.click();
2017-08-17 22:00:37 +05:30
2018-12-13 13:39:08 +05:30
expect($('.dropdown-content li:first-child').text()).toBe('testing');
2017-08-17 22:00:37 +05:30
2018-12-13 13:39:08 +05:30
expect($('.dropdown-content li:first-child a').html()).toBe(
'<b>t</b><b>e</b><b>s</b><b>t</b>ing',
);
2018-03-17 18:26:18 +05:30
});
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
describe('that is open', () => {
beforeEach(() => {
initDropDown.call(this, false, false);
2020-06-23 00:09:42 +05:30
test.dropdownButtonElement.click();
2017-08-17 22:00:37 +05:30
});
2018-03-17 18:26:18 +05:30
it('should select a following item on DOWN keypress', () => {
2020-06-23 00:09:42 +05:30
expect($(FOCUSED_ITEM_SELECTOR, test.$dropdownMenuElement).length).toBe(0);
const randomIndex = Math.floor(Math.random() * (test.projectsData.length - 1)) + 0;
2018-03-17 18:26:18 +05:30
navigateWithKeys('down', randomIndex, () => {
2020-06-23 00:09:42 +05:30
expect($(FOCUSED_ITEM_SELECTOR, test.$dropdownMenuElement).length).toBe(1);
expect($(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, test.$dropdownMenuElement)).toHaveClass(
2018-12-13 13:39:08 +05:30
'is-focused',
);
2017-08-17 22:00:37 +05:30
});
2018-03-17 18:26:18 +05:30
});
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
it('should select a previous item on UP keypress', () => {
2020-06-23 00:09:42 +05:30
expect($(FOCUSED_ITEM_SELECTOR, test.$dropdownMenuElement).length).toBe(0);
navigateWithKeys('down', test.projectsData.length - 1, () => {
expect($(FOCUSED_ITEM_SELECTOR, test.$dropdownMenuElement).length).toBe(1);
const randomIndex = Math.floor(Math.random() * (test.projectsData.length - 2)) + 0;
2018-03-17 18:26:18 +05:30
navigateWithKeys('up', randomIndex, () => {
2020-06-23 00:09:42 +05:30
expect($(FOCUSED_ITEM_SELECTOR, test.$dropdownMenuElement).length).toBe(1);
2018-12-13 13:39:08 +05:30
expect(
$(
2020-06-23 00:09:42 +05:30
`${ITEM_SELECTOR}:eq(${test.projectsData.length - 2 - randomIndex}) a`,
test.$dropdownMenuElement,
2018-12-13 13:39:08 +05:30
),
).toHaveClass('is-focused');
2017-08-17 22:00:37 +05:30
});
});
2018-03-17 18:26:18 +05:30
});
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
it('should click the selected item on ENTER keypress', () => {
2020-06-23 00:09:42 +05:30
expect(test.dropdownContainerElement).toHaveClass('show');
const randomIndex = Math.floor(Math.random() * (test.projectsData.length - 1)) + 0;
2018-03-17 18:26:18 +05:30
navigateWithKeys('down', randomIndex, () => {
navigateWithKeys('enter', null, () => {
2020-06-23 00:09:42 +05:30
expect(test.dropdownContainerElement).not.toHaveClass('show');
const link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, test.$dropdownMenuElement);
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(link).toHaveClass('is-active');
const linkedLocation = link.attr('href');
2018-12-13 13:39:08 +05:30
if (linkedLocation && linkedLocation !== '#') {
expect(visitUrl).toHaveBeenCalledWith(linkedLocation);
}
2017-08-17 22:00:37 +05:30
});
});
2018-03-17 18:26:18 +05:30
});
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
it('should close on ESC keypress', () => {
2020-06-23 00:09:42 +05:30
expect(test.dropdownContainerElement).toHaveClass('show');
test.dropdownContainerElement.trigger({
2018-03-17 18:26:18 +05:30
type: 'keyup',
which: ARROW_KEYS.ESC,
2018-12-13 13:39:08 +05:30
keyCode: ARROW_KEYS.ESC,
2017-08-17 22:00:37 +05:30
});
2018-12-13 13:39:08 +05:30
2020-06-23 00:09:42 +05:30
expect(test.dropdownContainerElement).not.toHaveClass('show');
2018-03-17 18:26:18 +05:30
});
});
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
describe('opened and waiting for a remote callback', () => {
beforeEach(() => {
initDropDown.call(this, true, true);
2020-06-23 00:09:42 +05:30
test.dropdownButtonElement.click();
2018-03-17 18:26:18 +05:30
});
it('should show loading indicator while search results are being fetched by backend', () => {
const dropdownMenu = document.querySelector('.dropdown-menu');
2018-12-13 13:39:08 +05:30
expect(dropdownMenu.className.indexOf('is-loading')).not.toBe(-1);
2018-03-17 18:26:18 +05:30
remoteCallback();
2018-12-13 13:39:08 +05:30
expect(dropdownMenu.className.indexOf('is-loading')).toBe(-1);
2018-03-17 18:26:18 +05:30
});
it('should not focus search input while remote task is not complete', () => {
expect($(document.activeElement)).not.toEqual($(SEARCH_INPUT_SELECTOR));
remoteCallback();
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
});
it('should focus search input after remote task is complete', () => {
remoteCallback();
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
});
it('should focus on input when opening for the second time after transition', () => {
remoteCallback();
2020-06-23 00:09:42 +05:30
test.dropdownContainerElement.trigger({
2018-03-17 18:26:18 +05:30
type: 'keyup',
which: ARROW_KEYS.ESC,
2018-12-13 13:39:08 +05:30
keyCode: ARROW_KEYS.ESC,
2017-08-17 22:00:37 +05:30
});
2020-06-23 00:09:42 +05:30
test.dropdownButtonElement.click();
test.dropdownContainerElement.trigger('transitionend');
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
2017-08-17 22:00:37 +05:30
});
2018-03-17 18:26:18 +05:30
});
describe('input focus with array data', () => {
it('should focus input when passing array data to drop down', () => {
initDropDown.call(this, false, true);
2020-06-23 00:09:42 +05:30
test.dropdownButtonElement.click();
test.dropdownContainerElement.trigger('transitionend');
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
});
});
it('should still have input value on close and restore', () => {
const $searchInput = $(SEARCH_INPUT_SELECTOR);
initDropDown.call(this, false, true);
2021-03-08 18:12:59 +05:30
$searchInput.trigger('focus').val('g').trigger('input');
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect($searchInput.val()).toEqual('g');
2020-06-23 00:09:42 +05:30
test.dropdownButtonElement.trigger('hidden.bs.dropdown');
2018-12-13 13:39:08 +05:30
$searchInput.trigger('blur').trigger('focus');
2018-03-17 18:26:18 +05:30
expect($searchInput.val()).toEqual('g');
});
describe('renderItem', () => {
2019-12-04 20:38:33 +05:30
function dropdownWithOptions(options) {
const $dropdownDiv = $('<div />');
2020-11-24 15:15:51 +05:30
initDeprecatedJQueryDropdown($dropdownDiv, options);
2019-12-04 20:38:33 +05:30
2020-11-24 15:15:51 +05:30
return $dropdownDiv.data('deprecatedJQueryDropdown');
2019-12-04 20:38:33 +05:30
}
function basicDropdown() {
return dropdownWithOptions({});
}
2018-03-17 18:26:18 +05:30
describe('without selected value', () => {
let dropdown;
2017-08-17 22:00:37 +05:30
beforeEach(() => {
2019-12-04 20:38:33 +05:30
dropdown = basicDropdown();
2017-08-17 22:00:37 +05:30
});
2018-03-17 18:26:18 +05:30
it('marks items without ID as active', () => {
2018-12-13 13:39:08 +05:30
const dummyData = {};
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
const html = dropdown.renderItem(dummyData, null, null);
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
const link = html.querySelector('a');
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(link).toHaveClass('is-active');
2017-08-17 22:00:37 +05:30
});
2018-03-17 18:26:18 +05:30
it('does not mark items with ID as active', () => {
const dummyData = {
2018-12-13 13:39:08 +05:30
id: 'ea',
2018-03-17 18:26:18 +05:30
};
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
const html = dropdown.renderItem(dummyData, null, null);
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
const link = html.querySelector('a');
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(link).not.toHaveClass('is-active');
2017-08-17 22:00:37 +05:30
});
});
2019-12-04 20:38:33 +05:30
it('should return an empty .separator li when when appropriate', () => {
const dropdown = basicDropdown();
const sep = { type: 'separator' };
const li = dropdown.renderItem(sep);
expect(li).toHaveClass('separator');
expect(li.childNodes.length).toEqual(0);
});
it('should return an empty .divider li when when appropriate', () => {
const dropdown = basicDropdown();
const div = { type: 'divider' };
const li = dropdown.renderItem(div);
expect(li).toHaveClass('divider');
expect(li.childNodes.length).toEqual(0);
});
it('should return a .dropdown-header li with the correct content when when appropriate', () => {
const dropdown = basicDropdown();
const text = 'My Header';
const header = { type: 'header', content: text };
const li = dropdown.renderItem(header);
expect(li).toHaveClass('dropdown-header');
expect(li.childNodes.length).toEqual(1);
expect(li.textContent).toEqual(text);
});
2020-11-24 15:15:51 +05:30
describe('with a trackSuggestionsClickedLabel', () => {
it('it includes data-track attributes', () => {
const dropdown = dropdownWithOptions({
trackSuggestionClickedLabel: 'some_value_for_label',
});
const item = {
id: 'some-element-id',
text: 'the link text',
url: 'http://example.com',
category: 'Suggestion category',
};
const li = dropdown.renderItem(item, null, 3);
const link = li.querySelector('a');
expect(link).toHaveAttr('data-track-event', 'click_text');
expect(link).toHaveAttr('data-track-label', 'some_value_for_label');
expect(link).toHaveAttr('data-track-value', '3');
expect(link).toHaveAttr('data-track-property', 'suggestion-category');
});
it('it defaults property to no_category when category not provided', () => {
const dropdown = dropdownWithOptions({
trackSuggestionClickedLabel: 'some_value_for_label',
});
const item = {
id: 'some-element-id',
text: 'the link text',
url: 'http://example.com',
};
const li = dropdown.renderItem(item);
const link = li.querySelector('a');
expect(link).toHaveAttr('data-track-property', 'no-category');
});
});
2017-08-17 22:00:37 +05:30
});
2018-05-09 12:01:36 +05:30
it('should keep selected item after selecting a second time', () => {
const options = {
isSelectable(item, $el) {
return !$el.hasClass('is-active');
},
toggleLabel(item) {
return item && item.id;
},
};
initDropDown.call(this, false, false, options);
2020-06-23 00:09:42 +05:30
const $item = $(`${ITEM_SELECTOR}:first() a`, test.$dropdownMenuElement);
2018-05-09 12:01:36 +05:30
// select item the first time
2020-06-23 00:09:42 +05:30
test.dropdownButtonElement.click();
2018-05-09 12:01:36 +05:30
$item.click();
2018-12-13 13:39:08 +05:30
2018-05-09 12:01:36 +05:30
expect($item).toHaveClass('is-active');
// select item the second time
2020-06-23 00:09:42 +05:30
test.dropdownButtonElement.click();
2018-05-09 12:01:36 +05:30
$item.click();
2018-12-13 13:39:08 +05:30
2018-05-09 12:01:36 +05:30
expect($item).toHaveClass('is-active');
2020-06-23 00:09:42 +05:30
expect($('.dropdown-toggle-text')).toHaveText(test.projectsData[0].id.toString());
2018-05-09 12:01:36 +05:30
});
2018-03-17 18:26:18 +05:30
});