Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
FLUID-4640: Factor existing MenuButton tests into separate file.
- Loading branch information
Showing
4 changed files
with
272 additions
and
197 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
| <title>Menu Button Test Suite</title> | ||
|
|
||
| <link rel="stylesheet" type="text/css" media="screen" href="../lib/qunit/css/qunit.css" /> | ||
|
|
||
| <script type="text/javascript" src="../../lib/infusion/MyInfusion.js"></script> | ||
| <script type="text/javascript" src="../../js/VideoPlayer_framework.js"></script> | ||
| <script type="text/javascript" src="../../lib/jquery-ui/js/jquery.ui.button.js"></script> | ||
| <script type="text/javascript" src="../../js/ToggleButton.js"></script> | ||
| <script type="text/javascript" src="../../js/MenuButton.js"></script> | ||
|
|
||
| <!-- jqUnit test framework js files --> | ||
| <script type="text/javascript" src="../lib/qunit/js/qunit.js"></script> | ||
| <script type="text/javascript" src="../lib/jqUnit/js/jqUnit.js"></script> | ||
|
|
||
| <!-- These are tests that have been written using this page as data and test supports --> | ||
| <script type="text/javascript" src="../js/MenuButtonTests.js"></script> | ||
|
|
||
| </head> | ||
| <body id="body"> | ||
| <!-- This is the markup that jqUnit will look for when running tests and displaying the results --> | ||
| <h1 id="qunit-header">Menu Button Test Suite</h1> | ||
| <h2 id="qunit-banner"></h2> | ||
| <div id="qunit-testrunner-toolbar"></div> | ||
| <h2 id="qunit-userAgent"></h2> | ||
| <ol id="qunit-tests"></ol> | ||
|
|
||
| <div id="main"> | ||
|
|
||
| <div id="basic-languageControls-test"> | ||
| <button type="button" class="flc-videoPlayer-languageButton"></button> | ||
| <ul id="basic-menu-test" class="flc-videoPlayer-languageMenu"> | ||
| <li class="flc-videoPlayer-language flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li> | ||
| <li class="flc-videoPlayer-languageNone flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li> | ||
| </ul> | ||
| </div> | ||
|
|
||
|
|
||
| </div> <!-- /main --> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,227 @@ | ||
| /* | ||
| Copyright 2012 OCAD University | ||
| Licensed under the Educational Community License (ECL), Version 2.0 or the New | ||
| BSD license. You may not use this file except in compliance with one these | ||
| Licenses. | ||
| You may obtain a copy of the ECL 2.0 License and BSD License at | ||
| https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt | ||
| */ | ||
|
|
||
| // Declare dependencies | ||
| /*global fluid, jqUnit, expect, jQuery, start*/ | ||
|
|
||
| // JSLint options | ||
| /*jslint white: true, funcinvoke: true, undef: true, newcap: true, nomen: true, regexp: true, bitwise: true, browser: true, forin: true, maxerr: 100, indent: 4 */ | ||
|
|
||
| fluid.registerNamespace("fluid.tests"); | ||
|
|
||
| (function ($) { | ||
| $(document).ready(function () { | ||
|
|
||
| // TODO: The various "fluid.tests.initXXX" functions could probably be refactored to reduce duplication | ||
|
|
||
| var menuButtonTests = new jqUnit.TestCase("Menu Button Tests"); | ||
|
|
||
| /*=================== | ||
| * LanguageMenu Tests | ||
| *===================*/ | ||
|
|
||
| fluid.tests.languageMenuDefaults = fluid.defaults("fluid.videoPlayer.controllers.languageMenu"); | ||
|
|
||
| var baseMenuOpts = { | ||
| languages: [{ | ||
| srclang: "klingon", | ||
| label: "Klingoñ" | ||
| }, { | ||
| srclang: "esperanto", | ||
| label: "Espéranto" | ||
| }, { | ||
| srclang: "lolspeak", | ||
| label: "LOLspeak" | ||
| }, { | ||
| srclang: "elvish", | ||
| label: "Elvîsh" | ||
| }], | ||
| model: { | ||
| activeLanguages: [0], | ||
| showLanguage: false | ||
| } | ||
| }; | ||
|
|
||
| fluid.tests.initMenu = function (testOpts) { | ||
| var opts = fluid.copy(baseMenuOpts); | ||
| $.extend(true, opts, testOpts); | ||
| return fluid.videoPlayer.controllers.languageMenu("#basic-menu-test", opts); | ||
| }; | ||
|
|
||
| var verifyActivation = function (actionString, that, activatedIndex) { | ||
| expect(5); | ||
| var menuItems = that.locate("menuItem"); | ||
| jqUnit.assertEquals(actionString + " updates the active language", activatedIndex, that.readIndirect("currentLanguagePath")[0]); | ||
| jqUnit.assertTrue(actionString + " adds the 'active' style to the item", $(menuItems[activatedIndex]).hasClass(that.options.styles.active)); | ||
| jqUnit.assertEquals("Only one item is active at a time", 1, $(that.options.selectors.menuItem + "." + that.options.styles.active).length); | ||
| jqUnit.assertFalse(actionString + " removes 'selected' style from all items", menuItems.hasClass(that.options.styles.selected)); | ||
| jqUnit.notVisible(actionString + " hides the menu", that.container); | ||
| }; | ||
|
|
||
| var verifySelection = function (actionString, that, selectedIndex, activeIndex) { | ||
| expect(3); | ||
| var langList = that.locate("menuItem"); | ||
| jqUnit.assertTrue(actionString + " adds 'selected' style to the language", $(langList[selectedIndex]).hasClass(that.options.styles.selected)); | ||
| jqUnit.assertEquals("Only one item is selected at a time", 1, $(that.options.selectors.menuItem + "." + that.options.styles.selected).length); | ||
| jqUnit.assertTrue(actionString + " leaves 'active' style on the active language", $(langList[activeIndex]).hasClass(that.options.styles.active)); | ||
| }; | ||
|
|
||
| menuButtonTests.asyncTest("Language Menu: Default configuration", function () { | ||
| var numLangs = baseMenuOpts.languages.length; | ||
| expect(9); | ||
| var testMenu = fluid.tests.initMenu({ | ||
| listeners: { | ||
| onReady: function (that) { | ||
| var langList = that.locate("language"); | ||
| jqUnit.assertEquals("Menu should have correct number of languages listed", numLangs, langList.length); | ||
| jqUnit.exists("Menu should have also have the 'show/hide' option", that.locate("showHide")); | ||
| jqUnit.assertFalse("Initially, nothing should have 'selected' style", langList.hasClass(that.options.styles.selected)); | ||
| jqUnit.assertTrue("Initially, the 'active language' have the 'active' style", $(langList[that.model.activeLanguages[0]]).hasClass(that.options.styles.active)); | ||
| jqUnit.assertEquals("Initially, 'show/hide' option should have the correct text", that.options.strings.showLanguage, that.locate("showHide").text()); | ||
|
|
||
| jqUnit.notVisible("The menu should be hidden by default", that.container); | ||
| that.show(); | ||
| jqUnit.isVisible("show() shows the menu", that.container); | ||
| that.hide(); | ||
| jqUnit.notVisible("hide() hides the menu", that.container); | ||
|
|
||
| that.container.fluid("selectable.select", that.locate("showHide")); | ||
| verifySelection("Selecting the 'show/hide' option", that, numLangs, 0); | ||
|
|
||
| that.container.fluid("selectable.select", langList[numLangs - 1]); | ||
| verifySelection("Selecting a language", that, numLangs - 1, 0); | ||
|
|
||
| that.applier.modelChanged.addListener("showLanguage", function () { | ||
| jqUnit.assertEquals("Activating a new language changes the 'show/hide' option text", that.options.strings.hideLanguage, that.locate("showHide").text()); | ||
| that.applier.modelChanged.removeListener("showLanguageChecker"); | ||
| }, "showLanguageChecker"); | ||
| that.activate(1); | ||
| verifyActivation("Activating a new language", that, 1); | ||
|
|
||
| that.show(); | ||
| $(that.locate("language")[2]).click(); | ||
| verifyActivation("Clicking a language", that, 2); | ||
|
|
||
| // double-check notes on interaction between keyboard selection and hover, and add tests | ||
| start(); | ||
| } | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| menuButtonTests.asyncTest("Language Menu: Custom 'show/hide' option strings", function () { | ||
| var numLangs = baseMenuOpts.languages.length; | ||
| expect(2); | ||
| var testStrings = { | ||
| showLanguage: "No one is talking", | ||
| hideLanguage: "Please stop all the talking!" | ||
| }; | ||
| var testMenu = fluid.tests.initMenu({ | ||
| strings: testStrings, | ||
| listeners: { | ||
| onReady: function (that) { | ||
| var langList = that.locate("language"); | ||
| jqUnit.assertEquals("Initially, 'show/hide' option should have the correct custom text", testStrings.showLanguage, that.locate("showHide").text()); | ||
| that.activate(1); | ||
| jqUnit.assertEquals("Activating an item changes the 'show/hide' option text to the custom text", testStrings.hideLanguage, that.locate("showHide").text()); | ||
|
|
||
| start(); | ||
| } | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| /*======================= | ||
| * LanguageControls Tests | ||
| *=======================*/ | ||
|
|
||
| var baseLanguageControlsOpts = { | ||
| languages: [{ | ||
| srclang: "klingon", | ||
| label: "Klingoñ" | ||
| }, { | ||
| srclang: "esperanto", | ||
| label: "Espéranto" | ||
| }, { | ||
| srclang: "lolspeak", | ||
| label: "LOLspeak" | ||
| }, { | ||
| srclang: "elvish", | ||
| label: "Elvîsh" | ||
| }], | ||
| model: { | ||
| currentTracks: { | ||
| captions: [0] | ||
| }, | ||
| displayCaptions: false | ||
| }, | ||
| currentLanguagePath: "currentTracks.captions", | ||
| showHidePath: "displayCaptions" | ||
| }; | ||
|
|
||
| fluid.tests.initLangControls = function (testOpts) { | ||
| var opts = fluid.copy(baseLanguageControlsOpts); | ||
| $.extend(true, opts, testOpts); | ||
| return fluid.videoPlayer.controllers.languageControls("#basic-languageControls-test", opts); | ||
| }; | ||
|
|
||
| // TODO: These tests could possibly be refactored to reduce duplication | ||
| menuButtonTests.asyncTest("Language Controls: default functionality", function () { | ||
| var numLangs = baseLanguageControlsOpts.languages.length; | ||
| var testControls = fluid.tests.initLangControls({ | ||
| listeners: { | ||
| onReady: { | ||
| listener: function (that) { | ||
| var langList = that.menu.locate("language"); | ||
| var showHideOption = that.menu.locate("showHide"); | ||
| jqUnit.assertEquals("Menu should have correct number of languages listed", numLangs, langList.length); | ||
| jqUnit.notVisible("Menu should not be visible initially", that.menu.container); | ||
| jqUnit.assertFalse("'show language' model flag should be false", fluid.get(that.model, that.options.showHidePath)); | ||
| jqUnit.assertEquals("'show language' text should be correct", that.options.strings.showLanguage, showHideOption.text()); | ||
| jqUnit.assertFalse("Buttons state should be released", that.button.model.pressed); | ||
|
|
||
| var button = that.locate("button"); | ||
| button[0].click(); | ||
| jqUnit.isVisible("Clicking the button should show menu", that.menu.container); | ||
| jqUnit.assertTrue("Buttons state should be released", that.button.model.pressed); | ||
| button[0].click(); | ||
| jqUnit.notVisible("Clicking the button again should hide menu again", that.menu.container); | ||
|
|
||
| button[0].click(); | ||
| $(langList[1]).click(); | ||
| jqUnit.notVisible("Show the menu, click a language, menu should hide", that.menu.container); | ||
| jqUnit.assertEquals("'current langauge' should be updated", 1, fluid.get(that.model, that.options.currentLanguagePath)[0]); | ||
| jqUnit.assertTrue("'show language' model flag should be true", fluid.get(that.model, that.options.showHidePath)); | ||
| jqUnit.assertEquals("'show language' text should be updated", that.options.strings.hideLanguage, showHideOption.text()); | ||
| jqUnit.assertFalse("Button state should be released", fluid.get(that.button.model, baseLanguageControlsOpts.showHidePath)); | ||
|
|
||
| button[0].click(); | ||
| $(showHideOption[0]).click(); | ||
| jqUnit.assertFalse("Show the menu, click the show/hide option, 'show language' model flag should be false", fluid.get(that.model, that.options.showHidePath)); | ||
| jqUnit.assertEquals("'show language' text should be updated", that.options.strings.showLanguage, showHideOption.text()); | ||
| jqUnit.assertFalse("Button state should be released", fluid.get(that.button.model, baseLanguageControlsOpts.showHidePath)); | ||
| jqUnit.assertEquals("'current langauge' should be not be changed", 1, fluid.get(that.model, that.options.currentLanguagePath)[0]); | ||
|
|
||
| button[0].click(); | ||
| $(showHideOption[0]).click(); | ||
| jqUnit.assertTrue("Click the show/hide option, 'show language' model flag should be true again", fluid.get(that.model, that.options.showHidePath)); | ||
| jqUnit.assertEquals("'show language' text should be updated", that.options.strings.hideLanguage, showHideOption.text()); | ||
| jqUnit.assertFalse("Button state should be released", fluid.get(that.button.model, baseLanguageControlsOpts.showHidePath)); | ||
|
|
||
| start(); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| }); | ||
| })(jQuery); |
Oops, something went wrong.