From 4903223479b67cd9a4266ee1cd8be12ae1c65b13 Mon Sep 17 00:00:00 2001 From: Marius Olbertz Date: Fri, 28 Apr 2017 17:41:00 +0200 Subject: [PATCH] Added tests for keyboard events for vertical DropdownMenu. --- test/javascript/components/dropdownMenu.js | 149 +++++++++++++-------- 1 file changed, 96 insertions(+), 53 deletions(-) diff --git a/test/javascript/components/dropdownMenu.js b/test/javascript/components/dropdownMenu.js index 8c35b8d4a..248fff807 100644 --- a/test/javascript/components/dropdownMenu.js +++ b/test/javascript/components/dropdownMenu.js @@ -70,60 +70,103 @@ describe('Dropdown Menu', function () { $html.find('> li:nth-child(1) > ul').should.not.have.class('js-dropdown-active'); document.activeElement.should.be.equal($html.find('> li:nth-child(1) > a')[0]); }); - it('moves focus to next tab on ARROW_RIGHT', function () { - $html = $(template).appendTo('body'); - plugin = new Foundation.DropdownMenu($html, {}); - - $html.find('> li:nth-child(1) > a').focus() - .trigger(window.mockKeyboardEvent('ARROW_RIGHT')); - - document.activeElement.should.be.equal($html.find('> li:nth-child(2) > a')[0]); - }); - it('moves focus to previous tab on ARROW_LEFT', function () { - $html = $(template).appendTo('body'); - plugin = new Foundation.DropdownMenu($html, {}); - - $html.find('> li:nth-child(2) > a').focus() - .trigger(window.mockKeyboardEvent('ARROW_LEFT')); - - document.activeElement.should.be.equal($html.find('> li:nth-child(1) > a')[0]); - }); - it('opens child element of tab on ARROW_DOWN', function() { - $html = $(template).appendTo('body'); - plugin = new Foundation.DropdownMenu($html, {}); - - $html.find('> li:nth-child(1) > a').focus() - .trigger(window.mockKeyboardEvent('ARROW_DOWN')); - - $html.find('> li:nth-child(1)').should.have.class('is-active'); - $html.find('> li:nth-child(1) > ul').should.have.class('js-dropdown-active'); - document.activeElement.should.be.equal($html.find('> li:nth-child(1) > ul > li:nth-child(1) > a')[0]); + describe('horizontal', function() { + beforeEach(function() { + $html = $(template).appendTo('body'); + plugin = new Foundation.DropdownMenu($html, {}); + }); + it('moves focus to next tab on ARROW_RIGHT', function () { + $html.find('> li:nth-child(1) > a').focus() + .trigger(window.mockKeyboardEvent('ARROW_RIGHT')); + + document.activeElement.should.be.equal($html.find('> li:nth-child(2) > a')[0]); + }); + it('moves focus to previous tab on ARROW_LEFT', function () { + $html.find('> li:nth-child(2) > a').focus() + .trigger(window.mockKeyboardEvent('ARROW_LEFT')); + + document.activeElement.should.be.equal($html.find('> li:nth-child(1) > a')[0]); + }); + it('opens child element of tab on ARROW_DOWN', function() { + $html.find('> li:nth-child(1) > a').focus() + .trigger(window.mockKeyboardEvent('ARROW_DOWN')); + + $html.find('> li:nth-child(1)').should.have.class('is-active'); + $html.find('> li:nth-child(1) > ul').should.have.class('js-dropdown-active'); + document.activeElement.should.be.equal($html.find('> li:nth-child(1) > ul > li:nth-child(1) > a')[0]); + }); + it('moves focus to previous sub element on ARROW_UP', function () { + // Open it first + plugin._show($html.find('> li:nth-child(1) > ul')); + + $html.find('> li:nth-child(1) > ul > li:nth-child(2) > a').focus() + .trigger(window.mockKeyboardEvent('ARROW_UP')); + + document.activeElement.should.be.equal($html.find('> li:nth-child(1) > ul > li:nth-child(1) > a')[0]); + }); + it('opens child element of sub menu on ARROW_RIGHT', function() { + // Open it first + plugin._show($html.find('> li:nth-child(1) > ul')); + + $html.find('> li:nth-child(1) > ul > li:nth-child(2) > a').focus() + .trigger(window.mockKeyboardEvent('ARROW_RIGHT')); + + $html.find('> li:nth-child(1) > ul > li:nth-child(2)').should.have.class('is-active'); + $html.find('> li:nth-child(1) > ul > li:nth-child(2) > ul').should.have.class('js-dropdown-active'); + document.activeElement.should.be.equal($html.find('> li:nth-child(1) > ul > li:nth-child(2) > ul > li:nth-child(1) > a')[0]); + }); }); - it('moves focus to previous sub element on ARROW_UP', function () { - $html = $(template).appendTo('body'); - plugin = new Foundation.DropdownMenu($html, {}); - - // Open it first - plugin._show($html.find('> li:nth-child(1) > ul')); - - $html.find('> li:nth-child(1) > ul > li:nth-child(2) > a').focus() - .trigger(window.mockKeyboardEvent('ARROW_UP')); - - document.activeElement.should.be.equal($html.find('> li:nth-child(1) > ul > li:nth-child(1) > a')[0]); - }); - it('opens child element of sub menu on ARROW_RIGHT', function() { - $html = $(template).appendTo('body'); - plugin = new Foundation.DropdownMenu($html, {}); - - // Open it first - plugin._show($html.find('> li:nth-child(1) > ul')); - - $html.find('> li:nth-child(1) > ul > li:nth-child(2) > a').focus() - .trigger(window.mockKeyboardEvent('ARROW_RIGHT')); - - $html.find('> li:nth-child(1) > ul > li:nth-child(2)').should.have.class('is-active'); - $html.find('> li:nth-child(1) > ul > li:nth-child(2) > ul').should.have.class('js-dropdown-active'); - document.activeElement.should.be.equal($html.find('> li:nth-child(1) > ul > li:nth-child(2) > ul > li:nth-child(1) > a')[0]); + describe('vertical', function() { + beforeEach(function() { + $html = $(template).addClass('vertical').appendTo('body'); + plugin = new Foundation.DropdownMenu($html, {}); + }); + it('moves focus to next tab on ARROW_DOWN', function () { + $html.find('> li:nth-child(1) > a').focus() + .trigger(window.mockKeyboardEvent('ARROW_DOWN')); + + document.activeElement.should.be.equal($html.find('> li:nth-child(2) > a')[0]); + }); + it('moves focus to previous tab on ARROW_UP', function () { + $html.find('> li:nth-child(2) > a').focus() + .trigger(window.mockKeyboardEvent('ARROW_UP')); + + document.activeElement.should.be.equal($html.find('> li:nth-child(1) > a')[0]); + }); + it('opens child element of tab on ARROW_RIGHT', function() { + $html.find('> li:nth-child(1) > a').focus() + .trigger(window.mockKeyboardEvent('ARROW_RIGHT')); + + $html.find('> li:nth-child(1)').should.have.class('is-active'); + $html.find('> li:nth-child(1) > ul').should.have.class('js-dropdown-active'); + document.activeElement.should.be.equal($html.find('> li:nth-child(1) > ul > li:nth-child(1) > a')[0]); + }); + it('moves focus to previous sub element on ARROW_UP', function () { + $html = $(template).appendTo('body'); + plugin = new Foundation.DropdownMenu($html, {}); + + // Open it first + plugin._show($html.find('> li:nth-child(1) > ul')); + + $html.find('> li:nth-child(1) > ul > li:nth-child(2) > a').focus() + .trigger(window.mockKeyboardEvent('ARROW_UP')); + + document.activeElement.should.be.equal($html.find('> li:nth-child(1) > ul > li:nth-child(1) > a')[0]); + }); + it('opens child element of sub menu on ARROW_RIGHT', function() { + $html = $(template).appendTo('body'); + plugin = new Foundation.DropdownMenu($html, {}); + + // Open it first + plugin._show($html.find('> li:nth-child(1) > ul')); + + $html.find('> li:nth-child(1) > ul > li:nth-child(2) > a').focus() + .trigger(window.mockKeyboardEvent('ARROW_RIGHT')); + + $html.find('> li:nth-child(1) > ul > li:nth-child(2)').should.have.class('is-active'); + $html.find('> li:nth-child(1) > ul > li:nth-child(2) > ul').should.have.class('js-dropdown-active'); + document.activeElement.should.be.equal($html.find('> li:nth-child(1) > ul > li:nth-child(2) > ul > li:nth-child(1) > a')[0]); + }); }); }); }); \ No newline at end of file -- 2.47.2