diff options
Diffstat (limited to 'javascript/videojs/test/unit/menu.test.js')
| -rw-r--r-- | javascript/videojs/test/unit/menu.test.js | 285 |
1 files changed, 0 insertions, 285 deletions
diff --git a/javascript/videojs/test/unit/menu.test.js b/javascript/videojs/test/unit/menu.test.js deleted file mode 100644 index b07de00..0000000 --- a/javascript/videojs/test/unit/menu.test.js +++ /dev/null @@ -1,285 +0,0 @@ -/* eslint-env qunit */ -import DomData from '../../src/js/utils/dom-data'; -import MenuButton from '../../src/js/menu/menu-button.js'; -import Menu from '../../src/js/menu/menu.js'; -import CaptionSettingsMenuItem from '../../src/js/control-bar/text-track-controls/caption-settings-menu-item'; -import MenuItem from '../../src/js/menu/menu-item.js'; -import TestHelpers from './test-helpers.js'; -import * as Events from '../../src/js/utils/events.js'; -import sinon from 'sinon'; -import window from 'global/window'; -import document from 'global/document'; - -QUnit.module('MenuButton'); - -QUnit.test('should not throw an error when there is no children', function(assert) { - assert.expect(0); - const player = TestHelpers.makePlayer(); - - const menuButton = new MenuButton(player); - const el = menuButton.el(); - - try { - Events.trigger(el, 'click'); - } catch (error) { - assert.ok(!error, 'click should not throw anything'); - } - - player.dispose(); - menuButton.dispose(); -}); - -QUnit.test('should place title list item into ul', function(assert) { - const player = TestHelpers.makePlayer(); - - const menuButton = new MenuButton(player, { - title: 'testTitle' - }); - - const menuContentElement = menuButton.el().getElementsByTagName('UL')[0]; - const titleElement = menuContentElement.children[0]; - - assert.ok(titleElement.innerHTML === 'TestTitle', 'title element placed in ul'); - - menuButton.dispose(); - player.dispose(); -}); - -QUnit.test('should not include menu title in hide threshold', function(assert) { - const player = TestHelpers.makePlayer(); - - const menuButton = new MenuButton(player, { - title: 'testTitle' - }); - - assert.strictEqual(menuButton.hideThreshold_, 0, 'title should not increment hideThreshold_'); - - menuButton.createItems = () => [new MenuItem(player, { label: 'menu-item1' })]; - menuButton.update(); - - assert.strictEqual(menuButton.hasClass('vjs-hidden'), false, 'menu button with single (non-title) item is not hidden'); - - menuButton.dispose(); - player.dispose(); -}); - -QUnit.test('clicking should display the menu', function(assert) { - assert.expect(6); - - const player = TestHelpers.makePlayer(); - - // Make sure there's some content in the menu, even if it's just a title! - const menuButton = new MenuButton(player, { - title: 'testTitle' - }); - const el = menuButton.menuButton_.el(); - - assert.ok(menuButton.menu !== undefined, 'menu is created'); - - assert.equal(menuButton.menu.hasClass('vjs-lock-showing'), false, 'menu defaults to hidden'); - - Events.trigger(el, 'click'); - - assert.equal(menuButton.menu.hasClass('vjs-lock-showing'), true, 'clicking on the menu button shows the menu'); - - Events.trigger(el, 'click'); - - assert.equal(menuButton.menu.hasClass('vjs-lock-showing'), false, 'clicking again on the menu button hides the menu'); - - menuButton.disable(); - - Events.trigger(el, 'click'); - - assert.equal(menuButton.menu.hasClass('vjs-lock-showing'), false, 'disable() prevents clicking from showing the menu'); - - menuButton.enable(); - - Events.trigger(el, 'click'); - - assert.equal(menuButton.menu.hasClass('vjs-lock-showing'), true, 'enable() allows clicking to show the menu'); - - menuButton.dispose(); - player.dispose(); -}); - -QUnit.test('should keep all the added menu items', function(assert) { - const player = TestHelpers.makePlayer(); - - const menuItems = []; - const menuItem1 = new MenuItem(player, { label: 'menu-item1' }); - const menuItem2 = new MenuItem(player, { label: 'menu-item2' }); - - const oldCreateItems = MenuButton.prototype.createItems; - - MenuButton.prototype.createItems = function() { - return menuItems; - }; - - const menuButton = new MenuButton(player, {}); - - menuItems.push(menuItem1); - menuButton.update(); - - assert.strictEqual(menuButton.children()[1].children().length, 1, 'the children number of the menu is 1 '); - assert.strictEqual(menuButton.children()[1].children()[0], menuItem1, 'the first child of the menu is `menuItem1`'); - assert.ok(menuButton.el().contains(menuItem1.el()), 'the menu button contains the DOM element of `menuItem1`'); - - menuItems.push(menuItem2); - menuButton.update(); - - assert.strictEqual(menuButton.children()[1].children().length, 2, 'the children number of the menu is 2 after second update'); - assert.strictEqual(menuButton.children()[1].children()[0], menuItem1, 'the first child of the menu is `menuItem1` after second update'); - assert.strictEqual(menuButton.children()[1].children()[1], menuItem2, 'the second child of the menu is `menuItem2` after second update'); - assert.ok(menuButton.el().contains(menuItem1.el()), 'the menu button contains the DOM element of `menuItem1` after second update'); - assert.ok(menuButton.el().contains(menuItem2.el()), 'the menu button contains the DOM element of `menuItem2` after second update'); - - menuButton.dispose(); - menuItem1.dispose(); - menuItem2.dispose(); - player.dispose(); - - MenuButton.prototype.createItems = oldCreateItems; -}); - -QUnit.test('should add or remove role menu for accessibility purpose', function(assert) { - const player = TestHelpers.makePlayer(); - const menuButton = new MenuButton(player); - - menuButton.createItems = () => []; - menuButton.update(); - assert.equal(menuButton.menu.contentEl_.hasAttribute('role'), false, 'the menu does not have a role attribute when it contains no menu items'); - - menuButton.createItems = () => [new MenuItem(player, { label: 'menu-item' })]; - menuButton.update(); - assert.equal(menuButton.menu.contentEl_.hasAttribute('role'), true, 'the menu has a role attribute when it contains menu items'); - assert.strictEqual(menuButton.menu.contentEl_.getAttribute('role'), 'menu', 'the menu role is `menu`'); - - menuButton.dispose(); - player.dispose(); -}); - -QUnit.test('setIcon should apply a child to the Button component', function(assert) { - // Stub a successful parsing of the SVG sprite. - sinon.stub(window.DOMParser.prototype, 'parseFromString').returns({ - querySelector: () => false, - documentElement: document.createElement('span') - }); - - const player = TestHelpers.makePlayer({experimentalSvgIcons: true}); - const menuButton = new MenuButton(player); - - menuButton.createItems = () => []; - menuButton.update(); - - menuButton.setIcon('test'); - - const buttonEl = menuButton.menuButton_.el_; - const spanEl = buttonEl.getElementsByClassName('vjs-svg-icon')[0]; - const svgEl = spanEl.childNodes[0]; - const useEl = svgEl.childNodes[0]; - - assert.equal(useEl.getAttribute('href'), '#vjs-icon-test', 'use should have an href set with the correct icon url'); - - window.DOMParser.prototype.parseFromString.restore(); - menuButton.dispose(); - player.dispose(); -}); - -QUnit.test('should remove old event listeners when the menu item adds to the new menu', function(assert) { - const player = TestHelpers.makePlayer(); - const menuButton = new MenuButton(player, {}); - const oldMenu = new Menu(player, { menuButton }); - const newMenu = new Menu(player, { menuButton }); - - oldMenu.addItem('MenuItem'); - - const menuItem = oldMenu.children()[0]; - - assert.ok(menuItem instanceof MenuItem, '`menuItem` should be the instanceof of `MenuItem`'); - - /** - * A reusable collection of assertions. - */ - function validateMenuEventListeners(watchedMenu) { - const eventData = DomData.get(menuItem.eventBusEl_); - // `MenuButton`.`unpressButton` will be called when triggering click event on the menu item. - const unpressButtonSpy = sinon.spy(menuButton, 'unpressButton'); - // `MenuButton`.`focus` will be called when triggering click event on the menu item. - const focusSpy = sinon.spy(menuButton, 'focus'); - - // `Menu`.`children` will be called when triggering blur event on the menu item. - const menuChildrenSpy = sinon.spy(watchedMenu, 'children'); - - assert.strictEqual(eventData.handlers.blur.length, 1, 'the number of blur listeners is one'); - - // The number of click listeners is two because `ClickableComponent` - // adds the click event listener during the construction and - // `MenuItem` inherits from `ClickableComponent`. - assert.strictEqual(eventData.handlers.click.length, 2, 'the number of click listeners is two'); - - const clickListenerAddedByMenu = eventData.handlers.click[1]; - - assert.strictEqual( - typeof clickListenerAddedByMenu.calledOnce, - 'undefined', - 'previous click listener wrapped in the spy should be removed' - ); - - const clickListenerSpy = eventData.handlers.click[1] = sinon.spy(clickListenerAddedByMenu); - - TestHelpers.triggerDomEvent(menuItem.el(), 'blur'); - - assert.ok(menuChildrenSpy.calledOnce, '`watchedMenu`.`children` has been called'); - - TestHelpers.triggerDomEvent(menuItem.el(), 'click'); - - assert.ok(clickListenerSpy.calledOnce, 'click event listener should be called'); - assert.strictEqual(clickListenerSpy.getCall(0).args[0].target, menuItem.el(), 'event target should be the `menuItem`'); - assert.ok(unpressButtonSpy.calledOnce, '`menuButton`.`unpressButton` has been called'); - assert.ok(focusSpy.calledOnce, '`menuButton`.`focus` has been called'); - - unpressButtonSpy.restore(); - focusSpy.restore(); - menuChildrenSpy.restore(); - } - - validateMenuEventListeners(oldMenu); - - newMenu.addItem(menuItem); - validateMenuEventListeners(newMenu); - - const focusSpy = sinon.spy(menuButton, 'focus'); - const captionMenuItem = new CaptionSettingsMenuItem(player, { - kind: 'subtitles' - }); - - newMenu.addItem(captionMenuItem); - - TestHelpers.triggerDomEvent(captionMenuItem.el(), 'click'); - assert.ok(!focusSpy.called, '`menuButton`.`focus` should never be called'); - - focusSpy.restore(); - - player.dispose(); - newMenu.dispose(); - oldMenu.dispose(); - menuButton.dispose(); -}); - -QUnit.test('Escape should close menu', function(assert) { - const player = TestHelpers.makePlayer(); - const menuButton = new MenuButton(player, {}); - const unpressButtonSpy = sinon.spy(menuButton, 'unpressButton'); - - menuButton.createItems = () => [new MenuItem(player, {})]; - menuButton.update(); - menuButton.handleClick(new window.PointerEvent('click')); - menuButton.menu.children()[0].el_.dispatchEvent(new window.KeyboardEvent('keydown', { - key: 'Escape', - bubbles: true, - cancelable: true - })); - - assert.ok(unpressButtonSpy.calledOnce, '`menuButton`.`unpressButton` has been called'); - -}); |
