From f91fd18f25626dc3e76c9aefef2841f685fab26c Mon Sep 17 00:00:00 2001
From: Luke Bennett <lukeeeebennettplus@gmail.com>
Date: Wed, 27 Jul 2016 17:38:08 +0100
Subject: [PATCH] Improved spec, waiting on sprockets-es6 to work with
rspec....
---
spec/javascripts/gl_dropdown_spec.js.es6 | 186 ++++++++++++-----------
1 file changed, 94 insertions(+), 92 deletions(-)
diff --git a/spec/javascripts/gl_dropdown_spec.js.es6 b/spec/javascripts/gl_dropdown_spec.js.es6
index 733fccc51d9..2dda566beb6 100644
--- a/spec/javascripts/gl_dropdown_spec.js.es6
+++ b/spec/javascripts/gl_dropdown_spec.js.es6
@@ -4,117 +4,119 @@
/*= require lib/utils/common_utils */
/*= 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 FOCUSED_ITEM_SELECTOR = `${ITEM_SELECTOR} a.is-focused`;
+(() => {
+ const NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link';
+ 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,
- ESC: 27
-};
+ const ARROW_KEYS = {
+ DOWN: 40,
+ UP: 38,
+ ENTER: 13,
+ ESC: 27
+ };
-var navigateWithKeys = function navigateWithKeys(direction, steps, cb, i) {
- i = i || 0;
- $('body').trigger({
- type: 'keydown',
- which: ARROW_KEYS[direction.toUpperCase()],
- keyCode: ARROW_KEYS[direction.toUpperCase()]
- });
- i++;
- if (i <= steps) {
- navigateWithKeys(direction, steps, cb, i);
- } else {
- 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
+ var navigateWithKeys = function navigateWithKeys(direction, steps, cb, i) {
+ i = i || 0;
+ $('body').trigger({
+ type: 'keydown',
+ which: ARROW_KEYS[direction.toUpperCase()],
+ keyCode: ARROW_KEYS[direction.toUpperCase()]
+ });
+ i++;
+ if (i <= steps) {
+ navigateWithKeys(direction, steps, cb, i);
+ } else {
+ cb();
}
- });
-};
+ };
-describe('Dropdown', function describeDropdown() {
- fixture.preload('gl_dropdown.html');
- fixture.preload('projects.json');
+ 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
+ }
+ });
+ };
- function beforeEach() {
- fixture.load('gl_dropdown.html');
- initDropdown.call(this);
- }
+ describe('Dropdown', function describeDropdown() {
+ fixture.preload('gl_dropdown.html');
+ fixture.preload('projects.json');
- function afterEach() {
- $('body').unbind('keydown');
- this.dropdownContainerElement.unbind('keyup');
- }
+ function beforeEach() {
+ fixture.load('gl_dropdown.html');
+ initDropdown.call(this);
+ }
- it('should open on click', () => {
- expect(this.dropdownContainerElement).not.toHaveClass('open');
- this.dropdownButtonElement.click();
- expect(this.dropdownContainerElement).toHaveClass('open');
- });
+ function afterEach() {
+ $('body').unbind('keydown');
+ this.dropdownContainerElement.unbind('keyup');
+ }
- describe('that is open', function describeThatIsOpen() {
- function beforeEach() {
+ it('should open on click', () => {
+ expect(this.dropdownContainerElement).not.toHaveClass('open');
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', () => {
- expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(0);
- let randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 1)) + 0);
- navigateWithKeys('down', randomIndex, () => {
- expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1);
- expect($(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.dropdownMenuElement)).toHaveClass('is-focused');
+ it('should select a following item on DOWN keypress', () => {
+ expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(0);
+ let randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 1)) + 0);
+ navigateWithKeys('down', randomIndex, () => {
+ expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1);
+ expect($(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.dropdownMenuElement)).toHaveClass('is-focused');
+ });
});
- });
- it('should select a previous item on UP keypress', () => {
- expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(0);
- 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, () => {
+ it('should select a previous item on UP keypress', () => {
+ expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(0);
+ navigateWithKeys('down', (this.projectsData.length - 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', () => {
- expect(this.dropdownContainerElement).toHaveClass('open')
- let randomIndex = Math.floor(Math.random() * (this.projectsData.length - 1)) + 0
- navigateWithKeys('down', randomIndex, () => {
- spyOn(Turbolinks, 'visit').and.stub();
- navigateWithKeys('enter', null, () => {
- expect(this.dropdownContainerElement).not.toHaveClass('open');
- let link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.dropdownMenuElement);
- expect(link).toHaveClass('is-active');
- let linkedLocation = link.attr('href');
- if (linkedLocation && linkedLocation !== '#') expect(Turbolinks.visit).toHaveBeenCalledWith(linkedLocation);
+ it('should click the selected item on ENTER keypress', () => {
+ expect(this.dropdownContainerElement).toHaveClass('open')
+ let randomIndex = Math.floor(Math.random() * (this.projectsData.length - 1)) + 0
+ navigateWithKeys('down', randomIndex, () => {
+ spyOn(Turbolinks, 'visit').and.stub();
+ navigateWithKeys('enter', null, () => {
+ expect(this.dropdownContainerElement).not.toHaveClass('open');
+ let link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.dropdownMenuElement);
+ expect(link).toHaveClass('is-active');
+ let linkedLocation = link.attr('href');
+ if (linkedLocation && linkedLocation !== '#') expect(Turbolinks.visit).toHaveBeenCalledWith(linkedLocation);
+ });
});
});
- });
- it('should close on ESC keypress', () => {
- expect(this.dropdownContainerElement).toHaveClass('open');
- this.dropdownContainerElement.trigger({
- type: 'keyup',
- which: ARROW_KEYS.ESC,
- keyCode: ARROW_KEYS.ESC
+ it('should close on ESC keypress', () => {
+ expect(this.dropdownContainerElement).toHaveClass('open');
+ this.dropdownContainerElement.trigger({
+ type: 'keyup',
+ which: ARROW_KEYS.ESC,
+ keyCode: ARROW_KEYS.ESC
+ });
+ expect(this.dropdownContainerElement).not.toHaveClass('open');
});
- expect(this.dropdownContainerElement).not.toHaveClass('open');
});
});
-});
+})(window);
--
GitLab