From 7fbd3617911fc3a37aa658b702048d30386dd17a Mon Sep 17 00:00:00 2001 From: Marius Olbertz Date: Wed, 5 Oct 2016 18:53:08 +0200 Subject: [PATCH] Added unit tests for Drilldown. --- test/javascript/components/drilldown.js | 229 ++++++++++++++++++++++-- 1 file changed, 212 insertions(+), 17 deletions(-) diff --git a/test/javascript/components/drilldown.js b/test/javascript/components/drilldown.js index 915dee4be..8cd6f9c46 100644 --- a/test/javascript/components/drilldown.js +++ b/test/javascript/components/drilldown.js @@ -1,20 +1,215 @@ describe('Drilldown Menu', function() { - var plugin; - var $html; - - // afterEach(function() { - // plugin.destroy(); - // $html.remove(); - // }); - - describe('constructor()', function() { - // it('', function() { - // $html = $('').appendTo('body'); - // plugin = new Foundation.Drilldown($html, {}); - - // plugin.$element.should.be.an('object'); - // plugin.options.should.be.an('object'); - // }); - }); + var plugin; + var $html; + var template = ``; + + afterEach(function() { + plugin.destroy(); + $html.remove(); + }); + + describe('constructor()', function() { + it('stores the element and plugin options', function() { + $html = $(template).appendTo('body'); + plugin = new Foundation.Drilldown($html, {}); + + plugin.$element.should.be.an('object'); + plugin.options.should.be.an('object'); + }); + }); + + describe('init()', function() { + it('stores additional elements', function() { + $html = $(template).appendTo('body'); + plugin = new Foundation.Drilldown($html, {}); + + plugin.$submenuAnchors.should.be.an('object'); + plugin.$submenus.should.be.an('object'); + plugin.$menuItems.should.be.an('object'); + }); + }); + + describe('prepareMenu()', function() { + it('wraps the submenus', function() { + $html = $(template).appendTo('body'); + plugin = new Foundation.Drilldown($html, {}); + + }); + it('adds ARIA attributes', function() { + $html = $(template).appendTo('body'); + plugin = new Foundation.Drilldown($html, {}); + + plugin.$element.find('[data-submenu]').each(function() { + $(this).should.have.attr('role', 'menu'); + $(this).should.have.attr('aria-hidden', 'true'); + }); + + plugin.$element.find('.is-drilldown-submenu-parent').each(function() { + $(this).should.have.attr('aria-haspopup', 'true'); + $(this).should.have.attr('aria-expanded', 'false'); + $(this).should.have.attr('aria-label', $(this).children('a').first().text()); + }); + }); + }); + + describe('show()', function() { + it('shows the given submenu', function() { + $html = $(template).appendTo('body'); + plugin = new Foundation.Drilldown($html, {}); + + plugin._show($html.find('li.is-drilldown-submenu-parent').eq(0)); + + // Checking with .be.hidden is not possible because they don't have display: block but z-index: -1 + $html.find('li.is-drilldown-submenu-parent').eq(0).find('ul').should.have.class('is-active'); + }); + it('toggles ARIA attributes', function() { + $html = $(template).appendTo('body'); + plugin = new Foundation.Drilldown($html, {}); + + plugin._show($html.find('li.is-drilldown-submenu-parent').eq(0)); + + $html.find('li.is-drilldown-submenu-parent').eq(0).should.have.attr('aria-expanded', 'true'); + $html.find('li.is-drilldown-submenu-parent').eq(0).children('ul').should.have.attr('aria-hidden', 'false'); + }); + it('fires open.zf.drilldown event', function(done) { + $html = $(template).appendTo('body'); + plugin = new Foundation.Drilldown($html, {}); + + $html.on('open.zf.drilldown', function() { + // Checking with .be.hidden is not possible because they don't have display: block but z-index: -1 + $html.find('li.is-drilldown-submenu-parent').eq(0).find('ul').should.have.class('is-active'); + done(); + }); + + plugin._show($html.find('li.is-drilldown-submenu-parent').eq(0)); + }); + }); + + describe('hide()', function() { + it('hides the given submenu', function() { + $html = $(template).appendTo('body'); + plugin = new Foundation.Drilldown($html, {}); + + // Open it first + plugin._show($html.find('li.is-drilldown-submenu-parent').eq(0)); + + plugin._hide($html.find('li.is-drilldown-submenu-parent').eq(0).children('ul')); + + // Checking with .be.hidden is not possible because they don't have display: block but z-index: -1 + $html.find('li.is-drilldown-submenu-parent').eq(0).children('ul').should.have.class('is-closing'); + }); + it('toggles ARIA attributes', function() { + $html = $(template).appendTo('body'); + plugin = new Foundation.Drilldown($html, {}); + + // Open it first + plugin._show($html.find('li.is-drilldown-submenu-parent').eq(0)); + + plugin._hide($html.find('li.is-drilldown-submenu-parent').eq(0).children('ul')); + + $html.find('li.is-drilldown-submenu-parent').eq(0).should.have.attr('aria-expanded', 'false'); + $html.find('li.is-drilldown-submenu-parent').eq(0).children('ul').should.have.attr('aria-hidden', 'true'); + }); + it('fires hide.zf.drilldown event', function(done) { + $html = $(template).appendTo('body'); + plugin = new Foundation.Drilldown($html, {}); + + // Open it first + plugin._show($html.find('li.is-drilldown-submenu-parent').eq(0)); + + $html.on('hide.zf.drilldown', function() { + // Checking with .be.hidden is not possible because they don't have display: block but z-index: -1 + $html.find('li.is-drilldown-submenu-parent').eq(0).children('ul').should.have.class('is-closing'); + done(); + }); + + plugin._hide($html.find('li.is-drilldown-submenu-parent').eq(0).children('ul')); + }); + }); + + describe('hideAll()', function() { + it('hides all submenus', function() { + $html = $(template).appendTo('body'); + plugin = new Foundation.Drilldown($html, {}); + + // Open one first + plugin._show($html.find('li.is-drilldown-submenu-parent').eq(2)); + + plugin._hideAll(); + + $html.find('ul[data-submenu].is-active').each(function() { + // Checking with .be.hidden is not possible because they don't have display: block but z-index: -1 + $(this).should.have.class('is-closing'); + }); + }); + it('fires closed.zf.drilldown event', function(done) { + $html = $(template).appendTo('body'); + plugin = new Foundation.Drilldown($html, {}); + + // Open one first + plugin._show($html.find('li.is-drilldown-submenu-parent').eq(2)); + + $html.one('closed.zf.drilldown', function() { + $html.find('ul[data-submenu].is-active').each(function() { + // Checking with .be.hidden is not possible because they don't have display: block but z-index: -1 + $(this).should.have.class('is-closing'); + }); + done(); + }); + + plugin._hideAll(); + }); + }); + + describe('back()', function() { + it('hides current submenu', function() { + $html = $(template).appendTo('body'); + plugin = new Foundation.Drilldown($html, {}); + + // Open one first + plugin._show($html.find('li.is-drilldown-submenu-parent').eq(1)); + + $html.find('li.is-drilldown-submenu-parent').eq(1).children('ul').children('.js-drilldown-back').trigger('click'); + + // Checking with .be.hidden is not possible because they don't have display: block but z-index: -1 + $html.find('li.is-drilldown-submenu-parent').eq(1).children('ul').should.have.class('is-closing'); + }); + it('shows parent submenu', function() { + $html = $(template).appendTo('body'); + plugin = new Foundation.Drilldown($html, {}); + + // Open one first + plugin._show($html.find('li.is-drilldown-submenu-parent').eq(1)); + + $html.find('li.is-drilldown-submenu-parent').eq(1).children('ul').children('.js-drilldown-back').trigger('click'); + + // Checking with .be.hidden is not possible because they don't have display: block but z-index: -1 + $html.find('li.is-drilldown-submenu-parent').eq(0).children('ul').should.have.class('is-active'); + }); + }); + }); \ No newline at end of file -- 2.47.2