From f91fd18f25626dc3e76c9aefef2841f685fab26c Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Wed, 27 Jul 2016 17:38:08 +0100 Subject: 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); -- cgit v1.2.1