Skip to content

G
gitlab-ce
Commit f91fd18f authored by Luke Bennett's avatar Luke Bennett
Browse files
Options

Improved spec, waiting on sprockets-es6 to work with rspec....

parent dcf09a53
Hide whitespace changes
Inline Side-by-side
Showing with 94 additions and 92 deletions
spec/javascripts/gl_dropdown_spec.js.es6
View file @ f91fd18f
...@@ -4,117 +4,119 @@ ...@@ -4,117 +4,119 @@
/*= require lib/utils/common_utils */ /*= require lib/utils/common_utils */
/*= require lib/utils/type_utility */ /*= require lib/utils/type_utility */
const NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link'; (() => {
const ITEM_SELECTOR = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`; const NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link';
const FOCUSED_ITEM_SELECTOR = `${ITEM_SELECTOR} a.is-focused`; const ITEM_SELECTOR = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`;
const FOCUSED_ITEM_SELECTOR = `${ITEM_SELECTOR} a.is-focused`;
const ARROW_KEYS = { const ARROW_KEYS = {
DOWN: 40, DOWN: 40,
UP: 38, UP: 38,
ENTER: 13, ENTER: 13,
ESC: 27 ESC: 27
}; };
var navigateWithKeys = function navigateWithKeys(direction, steps, cb, i) { var navigateWithKeys = function navigateWithKeys(direction, steps, cb, i) {
i = i || 0; i = i || 0;
$('body').trigger({ $('body').trigger({
type: 'keydown', type: 'keydown',
which: ARROW_KEYS[direction.toUpperCase()], which: ARROW_KEYS[direction.toUpperCase()],
keyCode: ARROW_KEYS[direction.toUpperCase()] keyCode: ARROW_KEYS[direction.toUpperCase()]
}); });
i++; i++;
if (i <= steps) { if (i <= steps) {
navigateWithKeys(direction, steps, cb, i); navigateWithKeys(direction, steps, cb, i);
} else { } else {
cb(); cb();
}
};
var initDropdown = function initDropdown() {
this.dropdownContainerElement = $('.dropdown.inline');
this.dropdownMenuElement = $('.dropdown-menu', this.dropdownContainerElement);
this.projectsData = fixture.load('projects.json')[0];
this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown({
selectable: true,
data: this.projectsData,
text: (project) => {
(project.name_with_namespace || project.name)
},
id: (project) => {
project.id
} }
}); };
};
describe('Dropdown', function describeDropdown() { var initDropdown = function initDropdown() {
fixture.preload('gl_dropdown.html'); this.dropdownContainerElement = $('.dropdown.inline');
fixture.preload('projects.json'); this.dropdownMenuElement = $('.dropdown-menu', this.dropdownContainerElement);
this.projectsData = fixture.load('projects.json')[0];
this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown({
selectable: true,
data: this.projectsData,
text: (project) => {
(project.name_with_namespace || project.name)
},
id: (project) => {
project.id
}
});
};
function beforeEach() { describe('Dropdown', function describeDropdown() {
fixture.load('gl_dropdown.html'); fixture.preload('gl_dropdown.html');
initDropdown.call(this); fixture.preload('projects.json');
}
function afterEach() { function beforeEach() {
$('body').unbind('keydown'); fixture.load('gl_dropdown.html');
this.dropdownContainerElement.unbind('keyup'); initDropdown.call(this);
} }
it('should open on click', () => { function afterEach() {
expect(this.dropdownContainerElement).not.toHaveClass('open'); $('body').unbind('keydown');
this.dropdownButtonElement.click(); this.dropdownContainerElement.unbind('keyup');
expect(this.dropdownContainerElement).toHaveClass('open'); }
});
describe('that is open', function describeThatIsOpen() { it('should open on click', () => {
function beforeEach() { expect(this.dropdownContainerElement).not.toHaveClass('open');
this.dropdownButtonElement.click(); this.dropdownButtonElement.click();
} expect(this.dropdownContainerElement).toHaveClass('open');
});
describe('that is open', function describeThatIsOpen() {
function beforeEach() {
this.dropdownButtonElement.click();
}
it('should select a following item on DOWN keypress', () => { it('should select a following item on DOWN keypress', () => {
expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(0); expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(0);
let randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 1)) + 0); let randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 1)) + 0);
navigateWithKeys('down', randomIndex, () => { navigateWithKeys('down', randomIndex, () => {
expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1); expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1);
expect($(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.dropdownMenuElement)).toHaveClass('is-focused'); expect($(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.dropdownMenuElement)).toHaveClass('is-focused');
});
}); });
});
it('should select a previous item on UP keypress', () => { it('should select a previous item on UP keypress', () => {
expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(0); expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(0);
navigateWithKeys('down', (this.projectsData.length - 1), () => { navigateWithKeys('down', (this.projectsData.length - 1), () => {
expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1);
let randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 2)) + 0);
navigateWithKeys('up', randomIndex, () => {
expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1); expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1);
expect($(`${ITEM_SELECTOR}:eq(${((this.projectsData.length - 2) - randomIndex)}) a`, this.dropdownMenuElement)).toHaveClass('is-focused'); let randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 2)) + 0);
navigateWithKeys('up', randomIndex, () => {
expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1);
expect($(`${ITEM_SELECTOR}:eq(${((this.projectsData.length - 2) - randomIndex)}) a`, this.dropdownMenuElement)).toHaveClass('is-focused');
});
}); });
}); });
});
it('should click the selected item on ENTER keypress', () => { it('should click the selected item on ENTER keypress', () => {
expect(this.dropdownContainerElement).toHaveClass('open') expect(this.dropdownContainerElement).toHaveClass('open')
let randomIndex = Math.floor(Math.random() * (this.projectsData.length - 1)) + 0 let randomIndex = Math.floor(Math.random() * (this.projectsData.length - 1)) + 0
navigateWithKeys('down', randomIndex, () => { navigateWithKeys('down', randomIndex, () => {
spyOn(Turbolinks, 'visit').and.stub(); spyOn(Turbolinks, 'visit').and.stub();
navigateWithKeys('enter', null, () => { navigateWithKeys('enter', null, () => {
expect(this.dropdownContainerElement).not.toHaveClass('open'); expect(this.dropdownContainerElement).not.toHaveClass('open');
let link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.dropdownMenuElement); let link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.dropdownMenuElement);
expect(link).toHaveClass('is-active'); expect(link).toHaveClass('is-active');
let linkedLocation = link.attr('href'); let linkedLocation = link.attr('href');
if (linkedLocation && linkedLocation !== '#') expect(Turbolinks.visit).toHaveBeenCalledWith(linkedLocation); if (linkedLocation && linkedLocation !== '#') expect(Turbolinks.visit).toHaveBeenCalledWith(linkedLocation);
});
}); });
}); });
});
it('should close on ESC keypress', () => { it('should close on ESC keypress', () => {
expect(this.dropdownContainerElement).toHaveClass('open'); expect(this.dropdownContainerElement).toHaveClass('open');
this.dropdownContainerElement.trigger({ this.dropdownContainerElement.trigger({
type: 'keyup', type: 'keyup',
which: ARROW_KEYS.ESC, which: ARROW_KEYS.ESC,
keyCode: ARROW_KEYS.ESC keyCode: ARROW_KEYS.ESC
});
expect(this.dropdownContainerElement).not.toHaveClass('open');
}); });
expect(this.dropdownContainerElement).not.toHaveClass('open');
}); });
}); });
}); })(window);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7