gitlab-org--gitlab-foss/spec/javascripts/search_autocomplete_spec.js

210 lines
6.7 KiB
JavaScript
Raw Normal View History

/* eslint-disable no-var, one-var, no-unused-expressions, consistent-return, no-param-reassign, default-case, no-return-assign, object-shorthand, vars-on-top */
import $ from 'jquery';
import '~/gl_dropdown';
import initSearchAutocomplete from '~/search_autocomplete';
import '~/lib/utils/common_utils';
2016-07-24 16:45:11 -04:00
describe('Search autocomplete dropdown', () => {
var assertLinks,
dashboardIssuesPath,
dashboardMRsPath,
groupIssuesPath,
groupMRsPath,
groupName,
mockDashboardOptions,
mockGroupOptions,
mockProjectOptions,
projectIssuesPath,
projectMRsPath,
projectName,
userId,
widget;
2016-12-15 09:34:34 -05:00
var userName = 'root';
2016-07-24 16:45:11 -04:00
widget = null;
userId = 1;
dashboardIssuesPath = '/dashboard/issues';
dashboardMRsPath = '/dashboard/merge_requests';
projectIssuesPath = '/gitlab-org/gitlab-ce/issues';
projectMRsPath = '/gitlab-org/gitlab-ce/merge_requests';
groupIssuesPath = '/groups/gitlab-org/issues';
groupMRsPath = '/groups/gitlab-org/merge_requests';
projectName = 'GitLab Community Edition';
groupName = 'Gitlab Org';
const removeBodyAttributes = function() {
const $body = $('body');
$body.removeAttr('data-page');
$body.removeAttr('data-project');
$body.removeAttr('data-group');
};
// Add required attributes to body before starting the test.
// section would be dashboard|group|project
const addBodyAttributes = function(section) {
2016-07-24 16:45:11 -04:00
if (section == null) {
section = 'dashboard';
}
const $body = $('body');
removeBodyAttributes();
2016-07-24 16:45:11 -04:00
switch (section) {
case 'dashboard':
return $body.attr('data-page', 'root:index');
2016-07-24 16:45:11 -04:00
case 'group':
$body.attr('data-page', 'groups:show');
2016-07-24 16:45:11 -04:00
return $body.data('group', 'gitlab-org');
case 'project':
$body.attr('data-page', 'projects:show');
2016-07-24 16:45:11 -04:00
return $body.data('project', 'gitlab-ce');
}
};
const disableProjectIssues = function() {
document.querySelector('.js-search-project-options').setAttribute('data-issues-disabled', true);
};
// Mock `gl` object in window for dashboard specific page. App code will need it.
2016-07-24 16:45:11 -04:00
mockDashboardOptions = function() {
window.gl || (window.gl = {});
return (window.gl.dashboardOptions = {
2016-07-24 16:45:11 -04:00
issuesPath: dashboardIssuesPath,
mrPath: dashboardMRsPath,
});
2016-07-24 16:45:11 -04:00
};
// Mock `gl` object in window for project specific page. App code will need it.
2016-07-24 16:45:11 -04:00
mockProjectOptions = function() {
window.gl || (window.gl = {});
return (window.gl.projectOptions = {
2016-07-24 16:45:11 -04:00
'gitlab-ce': {
issuesPath: projectIssuesPath,
mrPath: projectMRsPath,
projectName: projectName,
},
});
2016-07-24 16:45:11 -04:00
};
mockGroupOptions = function() {
window.gl || (window.gl = {});
return (window.gl.groupOptions = {
2016-07-24 16:45:11 -04:00
'gitlab-org': {
issuesPath: groupIssuesPath,
mrPath: groupMRsPath,
projectName: groupName,
},
});
2016-07-24 16:45:11 -04:00
};
assertLinks = function(list, issuesPath, mrsPath) {
if (issuesPath) {
2018-10-28 23:03:43 -04:00
const issuesAssignedToMeLink = `a[href="${issuesPath}/?assignee_username=${userName}"]`;
const issuesIHaveCreatedLink = `a[href="${issuesPath}/?author_username=${userName}"]`;
2018-10-09 14:03:09 -04:00
expect(list.find(issuesAssignedToMeLink).length).toBe(1);
expect(list.find(issuesAssignedToMeLink).text()).toBe('Issues assigned to me');
expect(list.find(issuesIHaveCreatedLink).length).toBe(1);
expect(list.find(issuesIHaveCreatedLink).text()).toBe("Issues I've created");
}
2018-10-28 23:03:43 -04:00
const mrsAssignedToMeLink = `a[href="${mrsPath}/?assignee_username=${userName}"]`;
const mrsIHaveCreatedLink = `a[href="${mrsPath}/?author_username=${userName}"]`;
2018-10-09 14:03:09 -04:00
expect(list.find(mrsAssignedToMeLink).length).toBe(1);
expect(list.find(mrsAssignedToMeLink).text()).toBe('Merge requests assigned to me');
expect(list.find(mrsIHaveCreatedLink).length).toBe(1);
expect(list.find(mrsIHaveCreatedLink).text()).toBe("Merge requests I've created");
2016-07-24 16:45:11 -04:00
};
preloadFixtures('static/search_autocomplete.html.raw');
beforeEach(function() {
loadFixtures('static/search_autocomplete.html.raw');
window.gon = {};
window.gon.current_user_id = userId;
window.gon.current_username = userName;
return (widget = initSearchAutocomplete());
});
afterEach(function() {
// Undo what we did to the shared <body>
removeBodyAttributes();
window.gon = {};
});
it('should show Dashboard specific dropdown menu', function() {
var list;
addBodyAttributes();
mockDashboardOptions();
widget.searchInput.triggerHandler('focus');
list = widget.wrap.find('.dropdown-menu').find('ul');
return assertLinks(list, dashboardIssuesPath, dashboardMRsPath);
});
it('should show Group specific dropdown menu', function() {
var list;
addBodyAttributes('group');
mockGroupOptions();
widget.searchInput.triggerHandler('focus');
list = widget.wrap.find('.dropdown-menu').find('ul');
return assertLinks(list, groupIssuesPath, groupMRsPath);
});
it('should show Project specific dropdown menu', function() {
var list;
addBodyAttributes('project');
mockProjectOptions();
widget.searchInput.triggerHandler('focus');
list = widget.wrap.find('.dropdown-menu').find('ul');
return assertLinks(list, projectIssuesPath, projectMRsPath);
});
it('should show only Project mergeRequest dropdown menu items when project issues are disabled', function() {
addBodyAttributes('project');
disableProjectIssues();
mockProjectOptions();
widget.searchInput.triggerHandler('focus');
const list = widget.wrap.find('.dropdown-menu').find('ul');
assertLinks(list, null, projectMRsPath);
});
it('should not show category related menu if there is text in the input', function() {
var link, list;
addBodyAttributes('project');
mockProjectOptions();
widget.searchInput.val('help');
widget.searchInput.triggerHandler('focus');
list = widget.wrap.find('.dropdown-menu').find('ul');
link = `a[href='${projectIssuesPath}/?assignee_username=${userName}']`;
2018-10-09 14:03:09 -04:00
expect(list.find(link).length).toBe(0);
});
it('should not submit the search form when selecting an autocomplete row with the keyboard', function() {
var ENTER = 13;
var DOWN = 40;
addBodyAttributes();
mockDashboardOptions(true);
var submitSpy = spyOnEvent('form', 'submit');
widget.searchInput.triggerHandler('focus');
widget.wrap.trigger($.Event('keydown', { which: DOWN }));
var enterKeyEvent = $.Event('keydown', { which: ENTER });
widget.searchInput.trigger(enterKeyEvent);
// This does not currently catch failing behavior. For security reasons,
// browsers will not trigger default behavior (form submit, in this
// example) on JavaScript-created keypresses.
expect(submitSpy).not.toHaveBeenTriggered();
2016-07-24 16:45:11 -04:00
});
});