launchpad-reviewers team mailing list archive
-
launchpad-reviewers team
-
Mailing list archive
-
Message #06325
[Merge] lp:~rharding/launchpad/combo_yui_tests3 into lp:launchpad
Richard Harding has proposed merging lp:~rharding/launchpad/combo_yui_tests3 into lp:launchpad with lp:~rharding/launchpad/combo_yui_tests as a prerequisite.
Requested reviews:
Launchpad code reviewers (launchpad-reviewers)
For more details, see:
https://code.launchpad.net/~rharding/launchpad/combo_yui_tests3/+merge/91649
= Summary =
Updating more of the YUI tests to be updated per the new convoy/buid dir setup.
See the first MP for the main details. I'm breaking the changes into multiple MP since this is going to be a giant diff due to touching each JS test file.
https://code.launchpad.net/~rharding/launchpad/combo_yui_tests/+merge/91478
== Tests in this batch ==
lib/lp/app/javascript/formwidgets/tests/test_formwidgets.html
lib/lp/app/javascript/formwidgets/tests/test_resizing_textarea.html
lib/lp/app/javascript/choiceedit/tests/test_choiceedit.html
lib/lp/app/javascript/confirmationoverlay/tests/test_confirmationoverlay.html
lib/lp/app/javascript/extras/tests/test_extras.html
--
https://code.launchpad.net/~rharding/launchpad/combo_yui_tests3/+merge/91649
Your team Launchpad code reviewers is requested to review the proposed merge of lp:~rharding/launchpad/combo_yui_tests3 into lp:launchpad.
=== modified file 'lib/lp/app/javascript/activator/tests/test_activator.html'
--- lib/lp/app/javascript/activator/tests/test_activator.html 2012-02-10 13:58:58 +0000
+++ lib/lp/app/javascript/activator/tests/test_activator.html 2012-02-10 13:59:01 +0000
@@ -33,7 +33,7 @@
<!-- The module under test. -->
<script type="text/javascript" src="../activator.js"></script>
- <!-- Any css assert for this module. -->
+ <!-- Placeholder for any css asset for this module. -->
<!-- <link rel="stylesheet" href="../assets/activator-core.css" /> -->
<!-- The test suite. -->
=== modified file 'lib/lp/app/javascript/anim/tests/test_anim.html'
--- lib/lp/app/javascript/anim/tests/test_anim.html 2012-02-10 13:58:58 +0000
+++ lib/lp/app/javascript/anim/tests/test_anim.html 2012-02-10 13:59:01 +0000
@@ -32,7 +32,7 @@
<!-- The module under test. -->
<script type="text/javascript" src="../anim.js"></script>
- <!-- Any css assert for this module. -->
+ <!-- Placeholder for any css asset for this module. -->
<!-- <link rel="stylesheet" href="../assets/anim-core.css" /> -->
<!-- The test suite. -->
=== modified file 'lib/lp/app/javascript/autocomplete/tests/test_autocomplete.html'
--- lib/lp/app/javascript/autocomplete/tests/test_autocomplete.html 2012-02-10 13:58:58 +0000
+++ lib/lp/app/javascript/autocomplete/tests/test_autocomplete.html 2012-02-10 13:59:01 +0000
@@ -31,7 +31,7 @@
<!-- The module under test. -->
<script type="text/javascript" src="../autocomplete.js"></script>
- <!-- Any css assert for this module. -->
+ <!-- Placeholder for any css asset for this module. -->
<!-- <link rel="stylesheet" href="../assets/autocomplete-core.css" /> -->
<!-- The test suite. -->
=== modified file 'lib/lp/app/javascript/choiceedit/tests/test_choiceedit.html'
--- lib/lp/app/javascript/choiceedit/tests/test_choiceedit.html 2011-08-10 08:43:17 +0000
+++ lib/lp/app/javascript/choiceedit/tests/test_choiceedit.html 2012-02-10 13:59:01 +0000
@@ -1,28 +1,52 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<!--
+Copyright 2012 Canonical Ltd. This software is licensed under the
+GNU Affero General Public License version 3 (see the file LICENSE).
+-->
+
<html>
<head>
- <title>Status Editor</title>
-
- <!-- YUI and test setup -->
- <script type="text/javascript"
- src="../../../../../canonical/launchpad/icing/yui/yui/yui.js">
- </script>
- <link rel="stylesheet" href="../../../../app/javascript/testing/test.css" />
- <script type="text/javascript"
- src="../../../../app/javascript/testing/testrunner.js"></script>
-
- <!-- Dependency -->
- <script type="text/javascript" src="../../lazr/lazr.js"></script>
- <script type="text/javascript" src="../../anim/anim.js"></script>
- <script type="text/javascript" src="../../overlay/overlay.js"></script>
- <script type="text/javascript" src="../../extras/extras.js"></script>
-
- <!-- The module under test -->
- <script type="text/javascript" src="../choiceedit.js"></script>
-
- <!-- The test suite -->
- <script type="text/javascript" src="test_choiceedit.js"></script>
-</head>
-<body class="yui3-skin-sam">
-</body>
+ <title>choiceedit tests</title>
+
+ <!-- YUI and test setup -->
+ <script type="text/javascript"
+ src="../../../../../../build/js/yui/yui/yui.js">
+ </script>
+ <link rel="stylesheet"
+ href="../../../../../../build/js/yui/console/assets/console-core.css" />
+ <link rel="stylesheet"
+ href="../../../../../../build/js/yui/console/assets/skins/sam/console.css" />
+ <link rel="stylesheet"
+ href="../../../../../../build/js/yui/test/assets/skins/sam/test.css" />
+
+ <script type="text/javascript"
+ src="../../../../../../build/js/lp/app/testing/testrunner.js"></script>
+
+ <link rel="stylesheet" href="../../../../app/javascript/testing/test.css" />
+
+ <!-- Dependencies -->
+ <script type="text/javascript" src="../../../../../../build/js/lp/app/lazr/lazr.js"></script>
+ <script type="text/javascript" src="../../../../../../build/js/lp/app/anim/anim.js"></script>
+ <script type="text/javascript" src="../../../../../../build/js/lp/app/overlay/overlay.js"></script>
+ <script type="text/javascript" src="../../../../../../build/js/lp/app/extras/extras.js"></script>
+ <script type="text/javascript" src="../../../../../../build/js/lp/app/choice.js"></script>
+
+
+ <!-- The module under test. -->
+ <script type="text/javascript" src="../choiceedit.js"></script>
+
+ <!-- Placeholder for any css asset for this module. -->
+ <!-- <link rel="stylesheet" href="../assets/choiceedit-core.css" /> -->
+
+ <!-- The test suite -->
+ <script type="text/javascript" src="test_choiceedit.js"></script>
+
+ </head>
+ <body class="yui3-skin-sam">
+ <ul id="suites">
+ <!-- <li>lp.large_indicator.test</li> -->
+ <li>lp.choiceedit.test</li>
+ </ul>
+ </body>
</html>
=== modified file 'lib/lp/app/javascript/choiceedit/tests/test_choiceedit.js'
--- lib/lp/app/javascript/choiceedit/tests/test_choiceedit.js 2011-08-09 14:18:02 +0000
+++ lib/lp/app/javascript/choiceedit/tests/test_choiceedit.js 2012-02-10 13:59:01 +0000
@@ -1,527 +1,528 @@
-/* Copyright (c) 2008, Canonical Ltd. All rights reserved. */
-
-YUI().use('lp.testing.runner', 'test', 'console', 'node', 'lazr.choiceedit',
- 'event', 'event-simulate', 'widget-stack', function(Y) {
-
-// Local aliases
-var Assert = Y.Assert,
- ArrayAssert = Y.ArrayAssert;
-
-/*
- * A wrapper for the Y.Event.simulate() function. The wrapper accepts
- * CSS selectors and Node instances instead of raw nodes.
- */
-function simulate(widget, selector, evtype, options) {
- var rawnode = Y.Node.getDOMNode(widget.one(selector));
- Y.Event.simulate(rawnode, evtype, options);
-}
-
-/* Helper function to clean up a dynamically added widget instance. */
-function cleanup_widget(widget) {
- // Nuke the boundingBox, but only if we've touched the DOM.
- if (widget.get('rendered')) {
- var bb = widget.get('boundingBox');
- if (Y.Node.getDOMNode(bb)) {
- if (bb.get('parentNode')) {
- bb.get('parentNode').removeChild(bb);
- }
- }
- }
- // Kill the widget itself.
- widget.destroy();
-}
-
-var suite = new Y.Test.Suite("LAZR Choice Edit Tests");
-
-function setUp() {
- // add the in-page HTML
- var inpage = Y.Node.create([
- '<p id="thestatus">',
- 'Status: <span class="value">Unset</span> ',
- '<img class="editicon" src="https://bugs.edge.launchpad.net/@@/edit";>',
- '</p>'].join(''));
- Y.one("body").appendChild(inpage);
- this.config = this.make_config();
- this.choice_edit = new Y.ChoiceSource(this.config);
- this.choice_edit.render();
-}
-
-function tearDown() {
- if (this.choice_edit._choice_list) {
- cleanup_widget(this.choice_edit._choice_list);
- }
- var status = Y.one("document").one("#thestatus");
- if (status) {
- status.get("parentNode").removeChild(status);
- }
-}
-
-suite.add(new Y.Test.Case({
-
- name: 'choice_edit_basics',
-
- setUp: setUp,
-
- tearDown: tearDown,
-
- make_config: function() {
- return {
- contentBox: '#thestatus',
- value: 'incomplete',
- title: 'Change status to',
- items: [
- { name: 'New', value: 'new', style: '',
- help: '', disabled: false },
- { name: 'Invalid', value: 'invalid', style: '',
- help: '', disabled: true },
- { name: 'Incomplete', value: 'incomplete', style: '',
- help: '', disabled: false },
- { name: 'Fix Released', value: 'fixreleased', style: '',
- help: '', disabled: false },
- { name: 'Fix Committed', value: 'fixcommitted', style: '',
- help: '', disabled: true },
- { name: 'In Progress', value: 'inprogress', style: '',
- help: '', disabled: false },
- { name: 'Stalled', value: 'stalled', style: '',
- help: '', disabled: false, source_name: 'STALLED' }
- ]
- };
- },
-
- test_can_be_instantiated: function() {
- Assert.isInstanceOf(
- Y.ChoiceSource, this.choice_edit, "ChoiceSource not instantiated.");
- },
-
- test_choicesource_overrides_value_in_page: function() {
- var st = Y.one(document).one("#thestatus");
- // value in page should be set to the config.items.name corresponding to
- // config.value
- Assert.areEqual("Incomplete", st.one(".value").get("innerHTML"),
- "ChoiceSource is not overriding displayed value in HTML");
- },
-
- test_clicking_creates_choicelist: function() {
- simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
- Assert.isNotNull(this.choice_edit._choice_list,
- "ChoiceList object is not created");
- Assert.isNotNull(Y.one(document).one(".yui3-ichoicelist"),
- "ChoiceList HTML is not being added to the page");
- },
-
- test_right_clicking_doesnt_create_choicelist: function() {
- simulate(this.choice_edit.get('boundingBox'),
- '.value', 'click', { button: 2 });
- Assert.isNull(Y.one(document).one(".yui3-ichoicelist"),
- "ChoiceList created when the right mouse button was clicked");
- },
-
- test_choicelist_has_correct_values: function() {
- simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
- var that = this;
- Y.each(this.config.items, function(configitem) {
- var found = false;
- Y.each(that.choice_edit._choice_list.get("items"), function(choiceitem) {
- if (choiceitem.name == configitem.name) {
- found = true;
- }
- });
- Assert.isTrue(found,
- "Item " + configitem.name + " is passed to ChoiceSource but is " +
- "not in ChoiceList.items");
- });
- var choicelistcount = this.choice_edit._choice_list.get("items").length;
- var configcount = this.config.items.length;
- Assert.areEqual(choicelistcount, configcount,
- "ChoiceList HTML list is a different length (" + choicelistcount +
- ") than config items list (" + configcount + ")");
- },
-
- test_choicelist_html_has_correct_values: function() {
- simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
- var configcount = this.config.items.length;
- var choicelist_lis = Y.one(document).all(".yui3-ichoicelist li");
- Assert.areEqual(choicelist_lis.size(), configcount,
- "ChoiceList HTML list is a different length (" + choicelist_lis.size() +
- ") than config items list (" + configcount + ")");
- // confirm that each LI matches with an item
- var that = this;
- choicelist_lis.each(function(li) {
- var text = li.get("text");
- var found = false;
- for (var i=0; i<that.config.items.length; i++) {
- if (that.config.items[i].name == text) {
- found = true;
- break;
- }
- }
- Assert.isTrue(found, "Page LI '" + text +
- "' did not come from a config item");
- });
- },
-
- test_choicelist_html_has_disabled: function() {
- simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
- var configcount = this.config.items.length;
- var choicelist_lis = Y.one(document).all(".yui3-ichoicelist li");
- // confirm that disabled LIs are disabled
- var that = this;
- choicelist_lis.each(function(li) {
- var text = li.get("text");
- for (var i=0; i<that.config.items.length; i++) {
- if (that.config.items[i].name == text) {
- if (that.config.items[i].disabled) {
- Assert.isNotNull(li.one("span.disabled"),
- "Page LI '" + text + "' was not disabled");
- }
- break;
- }
- }
- });
- },
-
- test_choicelist_html_has_current: function() {
- simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
- var configcount = this.config.items.length;
- var choicelist_lis = Y.one(document).all(".yui3-ichoicelist li");
- // confirm that current value has an LI with current style
- var that = this;
- var asserted = false;
- choicelist_lis.each(function(li) {
- var text = li.get("text");
- for (var i=0; i<that.config.items.length; i++) {
- if (that.config.items[i].name == text) {
- if (that.config.items[i].value == that.config.value) {
- Assert.isNotNull(li.one("span.current"),
- "Page LI '" + text + "' was not marked as current");
- asserted = true;
- }
- break;
- }
- }
- });
- Assert.isTrue(asserted, "There was no current LI item");
- },
-
- test_clicking_choicelist_item_fires_signal: function() {
- simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
- var that = this;
- var fired = false;
- this.choice_edit._choice_list.on("valueChosen", function() {
- fired = true;
- });
- // simulate a click on the "fix released" option, which is
- // (a) enabled
- // (b) not the current option
- simulate(this.choice_edit._choice_list.get('boundingBox'),
- 'li a[href$=fixreleased]', 'click');
- Assert.isTrue(fired, "valueChosen signal was not fired");
- },
-
- test_clicking_choicelist_item_does_green_flash: function() {
- simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
- var that = this;
- var green_flash = Y.lp.anim.green_flash;
- var flashed = false;
- Y.lp.anim.green_flash = function() {
- return {
- run: function() {
- flashed = true;
- }
- };
- };
- simulate(this.choice_edit._choice_list.get('boundingBox'),
- 'li a[href$=fixreleased]', 'click');
- Assert.isTrue(flashed, "green_flash animation was not fired");
- Y.lp.anim.green_flash = green_flash;
- },
-
- test_clicking_choicelist_item_sets_page_value: function() {
- var st = Y.one(document).one("#thestatus");
- // The page value is set to item.name of the selected item.
- simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
- simulate(this.choice_edit._choice_list.get('boundingBox'),
- 'li a[href$=fixreleased]', 'click');
- Assert.areEqual("Fix Released", st.one(".value").get("innerHTML"),
- "Chosen choicelist item is not displayed in HTML (value is '" +
- st.one(".value").get("innerHTML") + "')");
- },
-
- test_clicking_choicelist_item_sets_page_source_name: function() {
- var st = Y.one(document).one("#thestatus");
- // By default, the page value is set to item.name of the
- // selected item, but this can be overridden by specifying
- // item.source_name.
- simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
- var choice_list_bb = this.choice_edit._choice_list.get('boundingBox');
- var stalled_in_list = choice_list_bb.one('li a[href$=stalled]');
- Assert.areEqual(
- "Stalled", stalled_in_list.get('innerHTML'),
- "ChoiceList item not displayed correctly: " +
- stalled_in_list.get('innerHTML'));
- simulate(choice_list_bb, 'li a[href$=stalled]', 'click');
- Assert.areEqual("STALLED", st.one(".value").get("innerHTML"),
- "Chosen choicelist item is not displayed in HTML (value is '" +
- st.one(".value").get("innerHTML") + "')");
- }
-
-}));
-
-suite.add(new Y.Test.Case({
-
- name: 'choice_edit_non_clickable_content',
-
- setUp: setUp,
-
- tearDown: tearDown,
-
- make_config: function() {
- return {
- contentBox: '#thestatus',
- value: 'incomplete',
- title: 'Change status to',
- items: [
- { name: 'New', value: 'new', style: '',
- help: '', disabled: false },
- { name: 'Invalid', value: 'invalid', style: '',
- help: '', disabled: true },
- { name: 'Incomplete', value: 'incomplete', style: '',
- help: '', disabled: false },
- { name: 'Fix Released', value: 'fixreleased', style: '',
- help: '', disabled: false },
- { name: 'Fix Committed', value: 'fixcommitted', style: '',
- help: '', disabled: true },
- { name: 'In Progress', value: 'inprogress', style: '',
- help: '', disabled: false },
- { name: 'Stalled', value: 'stalled', style: '',
- help: '', disabled: false, source_name: 'STALLED' }
- ],
- clickable_content: false
- };
- },
-
- test_clicking_content_doesnt_create_choicelist: function() {
- simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
- Assert.isUndefined(this.choice_edit._choice_list,
- "ChoiceList object is created");
- Assert.isNull(Y.one(document).one(".yui3-ichoicelist"),
- "ChoiceList HTML is being added to the page");
- },
-
- test_clicking_icon_creates_choicelist: function() {
- simulate(this.choice_edit.get('boundingBox'), '.editicon', 'click');
- Assert.isNotUndefined(this.choice_edit._choice_list,
- "ChoiceList object is not being created");
- Assert.isNotNull(Y.one(document).one(".yui3-ichoicelist"),
- "ChoiceList HTML is not being added to the page");
- },
-
-}));
-
-
-/**
- * Tests what happens when config.value does not correspond to any of
- * the items in config.items.
- */
-suite.add(new Y.Test.Case({
-
- name: 'choice_edit_value_item_mismatch',
-
- setUp: setUp,
-
- tearDown: tearDown,
-
- make_config: function() {
- return {
- contentBox: '#thestatus',
+/* Copyright (c) 2012, Canonical Ltd. All rights reserved. */
+
+YUI.add('lp.choiceedit.test', function (Y) {
+ var tests = Y.namespace('lp.choiceedit.test');
+ tests.suite = new Y.Test.Suite('choiceedit tests');
+
+ // Local aliases
+ var Assert = Y.Assert,
+ ArrayAssert = Y.ArrayAssert;
+
+ /*
+ * A wrapper for the Y.Event.simulate() function. The wrapper accepts
+ * CSS selectors and Node instances instead of raw nodes.
+ */
+ var simulate = function (widget, selector, evtype, options) {
+ var rawnode = Y.Node.getDOMNode(widget.one(selector));
+ Y.Event.simulate(rawnode, evtype, options);
+ }
+
+ /* Helper function to clean up a dynamically added widget instance. */
+ var cleanup_widget = function (widget) {
+ // Nuke the boundingBox, but only if we've touched the DOM.
+ if (widget.get('rendered')) {
+ var bb = widget.get('boundingBox');
+ if (Y.Node.getDOMNode(bb)) {
+ if (bb.get('parentNode')) {
+ bb.get('parentNode').removeChild(bb);
+ }
+ }
+ }
+ // Kill the widget itself.
+ widget.destroy();
+ }
+
+ var shared_setup = function () {
+ // add the in-page HTML
+ var inpage = Y.Node.create([
+ '<p id="thestatus">',
+ 'Status: <span class="value">Unset</span> ',
+ '<img class="editicon" src="https://bugs.edge.launchpad.net/@@/edit";>',
+ '</p>'].join(''));
+ Y.one("body").appendChild(inpage);
+ this.config = this.make_config();
+ this.choice_edit = new Y.ChoiceSource(this.config);
+ this.choice_edit.render();
+ }
+
+ var shared_teardown = function () {
+ if (this.choice_edit._choice_list) {
+ cleanup_widget(this.choice_edit._choice_list);
+ }
+ var status = Y.one("document").one("#thestatus");
+ if (status) {
+ status.get("parentNode").removeChild(status);
+ }
+ }
+
+ tests.suite.add(new Y.Test.Case({
+ name: 'choiceedit_tests',
+
+ setUp: shared_setup,
+ tearDown: shared_teardown,
+
+ test_library_exists: function () {
+ Y.Assert.isObject(Y.ChoiceSource,
+ "We should be able to locate the lazr.choiceedit module");
+ },
+
+ make_config: function() {
+ return {
+ contentBox: '#thestatus',
+ value: 'incomplete',
+ title: 'Change status to',
+ items: [
+ { name: 'New', value: 'new', style: '',
+ help: '', disabled: false },
+ { name: 'Invalid', value: 'invalid', style: '',
+ help: '', disabled: true },
+ { name: 'Incomplete', value: 'incomplete', style: '',
+ help: '', disabled: false },
+ { name: 'Fix Released', value: 'fixreleased', style: '',
+ help: '', disabled: false },
+ { name: 'Fix Committed', value: 'fixcommitted', style: '',
+ help: '', disabled: true },
+ { name: 'In Progress', value: 'inprogress', style: '',
+ help: '', disabled: false },
+ { name: 'Stalled', value: 'stalled', style: '',
+ help: '', disabled: false, source_name: 'STALLED' }
+ ]
+ };
+ },
+
+ test_can_be_instantiated: function() {
+ Assert.isInstanceOf(
+ Y.ChoiceSource, this.choice_edit, "ChoiceSource not instantiated.");
+ },
+
+ test_choicesource_overrides_value_in_page: function() {
+ var st = Y.one(document).one("#thestatus");
+ // value in page should be set to the config.items.name corresponding to
+ // config.value
+ Assert.areEqual("Incomplete", st.one(".value").get("innerHTML"),
+ "ChoiceSource is not overriding displayed value in HTML");
+ },
+
+ test_clicking_creates_choicelist: function() {
+ simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
+ Assert.isNotNull(this.choice_edit._choice_list,
+ "ChoiceList object is not created");
+ Assert.isNotNull(Y.one(document).one(".yui3-ichoicelist"),
+ "ChoiceList HTML is not being added to the page");
+ },
+
+ test_right_clicking_doesnt_create_choicelist: function() {
+ simulate(this.choice_edit.get('boundingBox'),
+ '.value', 'click', { button: 2 });
+ Assert.isNull(Y.one(document).one(".yui3-ichoicelist"),
+ "ChoiceList created when the right mouse button was clicked");
+ },
+
+ test_choicelist_has_correct_values: function() {
+ simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
+ var that = this;
+ Y.each(this.config.items, function(configitem) {
+ var found = false;
+ Y.each(that.choice_edit._choice_list.get("items"), function(choiceitem) {
+ if (choiceitem.name == configitem.name) {
+ found = true;
+ }
+ });
+ Assert.isTrue(found,
+ "Item " + configitem.name + " is passed to ChoiceSource but is " +
+ "not in ChoiceList.items");
+ });
+ var choicelistcount = this.choice_edit._choice_list.get("items").length;
+ var configcount = this.config.items.length;
+ Assert.areEqual(choicelistcount, configcount,
+ "ChoiceList HTML list is a different length (" + choicelistcount +
+ ") than config items list (" + configcount + ")");
+ },
+
+ test_choicelist_html_has_correct_values: function() {
+ simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
+ var configcount = this.config.items.length;
+ var choicelist_lis = Y.one(document).all(".yui3-ichoicelist li");
+ Assert.areEqual(choicelist_lis.size(), configcount,
+ "ChoiceList HTML list is a different length (" + choicelist_lis.size() +
+ ") than config items list (" + configcount + ")");
+ // confirm that each LI matches with an item
+ var that = this;
+ choicelist_lis.each(function(li) {
+ var text = li.get("text");
+ var found = false;
+ for (var i=0; i<that.config.items.length; i++) {
+ if (that.config.items[i].name == text) {
+ found = true;
+ break;
+ }
+ }
+ Assert.isTrue(found, "Page LI '" + text +
+ "' did not come from a config item");
+ });
+ },
+
+ test_choicelist_html_has_disabled: function() {
+ simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
+ var configcount = this.config.items.length;
+ var choicelist_lis = Y.one(document).all(".yui3-ichoicelist li");
+ // confirm that disabled LIs are disabled
+ var that = this;
+ choicelist_lis.each(function(li) {
+ var text = li.get("text");
+ for (var i=0; i<that.config.items.length; i++) {
+ if (that.config.items[i].name == text) {
+ if (that.config.items[i].disabled) {
+ Assert.isNotNull(li.one("span.disabled"),
+ "Page LI '" + text + "' was not disabled");
+ }
+ break;
+ }
+ }
+ });
+ },
+
+ test_choicelist_html_has_current: function() {
+ simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
+ var configcount = this.config.items.length;
+ var choicelist_lis = Y.one(document).all(".yui3-ichoicelist li");
+ // confirm that current value has an LI with current style
+ var that = this;
+ var asserted = false;
+ choicelist_lis.each(function(li) {
+ var text = li.get("text");
+ for (var i=0; i<that.config.items.length; i++) {
+ if (that.config.items[i].name == text) {
+ if (that.config.items[i].value == that.config.value) {
+ Assert.isNotNull(li.one("span.current"),
+ "Page LI '" + text + "' was not marked as current");
+ asserted = true;
+ }
+ break;
+ }
+ }
+ });
+ Assert.isTrue(asserted, "There was no current LI item");
+ },
+
+ test_clicking_choicelist_item_fires_signal: function() {
+ simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
+ var that = this;
+ var fired = false;
+ this.choice_edit._choice_list.on("valueChosen", function() {
+ fired = true;
+ });
+ // simulate a click on the "fix released" option, which is
+ // (a) enabled
+ // (b) not the current option
+ simulate(this.choice_edit._choice_list.get('boundingBox'),
+ 'li a[href$=fixreleased]', 'click');
+ Assert.isTrue(fired, "valueChosen signal was not fired");
+ },
+
+ test_clicking_choicelist_item_does_green_flash: function() {
+ simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
+ var that = this;
+ var green_flash = Y.lp.anim.green_flash;
+ var flashed = false;
+ Y.lp.anim.green_flash = function() {
+ return {
+ run: function() {
+ flashed = true;
+ }
+ };
+ };
+ simulate(this.choice_edit._choice_list.get('boundingBox'),
+ 'li a[href$=fixreleased]', 'click');
+ Assert.isTrue(flashed, "green_flash animation was not fired");
+ Y.lp.anim.green_flash = green_flash;
+ },
+
+ test_clicking_choicelist_item_sets_page_value: function() {
+ var st = Y.one(document).one("#thestatus");
+ // The page value is set to item.name of the selected item.
+ simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
+ simulate(this.choice_edit._choice_list.get('boundingBox'),
+ 'li a[href$=fixreleased]', 'click');
+ Assert.areEqual("Fix Released", st.one(".value").get("innerHTML"),
+ "Chosen choicelist item is not displayed in HTML (value is '" +
+ st.one(".value").get("innerHTML") + "')");
+ },
+
+ test_clicking_choicelist_item_sets_page_source_name: function() {
+ var st = Y.one(document).one("#thestatus");
+ // By default, the page value is set to item.name of the
+ // selected item, but this can be overridden by specifying
+ // item.source_name.
+ simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
+ var choice_list_bb = this.choice_edit._choice_list.get('boundingBox');
+ var stalled_in_list = choice_list_bb.one('li a[href$=stalled]');
+ Assert.areEqual(
+ "Stalled", stalled_in_list.get('innerHTML'),
+ "ChoiceList item not displayed correctly: " +
+ stalled_in_list.get('innerHTML'));
+ simulate(choice_list_bb, 'li a[href$=stalled]', 'click');
+ Assert.areEqual("STALLED", st.one(".value").get("innerHTML"),
+ "Chosen choicelist item is not displayed in HTML (value is '" +
+ st.one(".value").get("innerHTML") + "')");
+ }
+ }));
+
+ tests.suite.add(new Y.Test.Case({
+
+ name: 'choice_edit_non_clickable_content',
+
+ setUp: shared_setup,
+ tearDown: shared_teardown,
+
+ make_config: function() {
+ return {
+ contentBox: '#thestatus',
+ value: 'incomplete',
+ title: 'Change status to',
+ items: [
+ { name: 'New', value: 'new', style: '',
+ help: '', disabled: false },
+ { name: 'Invalid', value: 'invalid', style: '',
+ help: '', disabled: true },
+ { name: 'Incomplete', value: 'incomplete', style: '',
+ help: '', disabled: false },
+ { name: 'Fix Released', value: 'fixreleased', style: '',
+ help: '', disabled: false },
+ { name: 'Fix Committed', value: 'fixcommitted', style: '',
+ help: '', disabled: true },
+ { name: 'In Progress', value: 'inprogress', style: '',
+ help: '', disabled: false },
+ { name: 'Stalled', value: 'stalled', style: '',
+ help: '', disabled: false, source_name: 'STALLED' }
+ ],
+ clickable_content: false
+ };
+ },
+
+ test_clicking_content_doesnt_create_choicelist: function() {
+ simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
+ Assert.isUndefined(this.choice_edit._choice_list,
+ "ChoiceList object is created");
+ Assert.isNull(Y.one(document).one(".yui3-ichoicelist"),
+ "ChoiceList HTML is being added to the page");
+ },
+
+ test_clicking_icon_creates_choicelist: function() {
+ simulate(this.choice_edit.get('boundingBox'), '.editicon', 'click');
+ Assert.isNotUndefined(this.choice_edit._choice_list,
+ "ChoiceList object is not being created");
+ Assert.isNotNull(Y.one(document).one(".yui3-ichoicelist"),
+ "ChoiceList HTML is not being added to the page");
+ },
+
+ }));
+
+ /**
+ * Tests what happens when config.value does not correspond to any of
+ * the items in config.items.
+ */
+ tests.suite.add(new Y.Test.Case({
+
+ name: 'choice_edit_value_item_mismatch',
+
+ setUp: shared_setup,
+ tearDown: shared_teardown,
+
+ make_config: function() {
+ return {
+ contentBox: '#thestatus',
+ value: null,
+ title: 'Change status to',
+ items: [
+ { name: 'New', value: 'new', style: '',
+ help: '', disabled: false },
+ { name: 'Invalid', value: 'invalid', style: '',
+ help: '', disabled: true }
+ ]
+ };
+ },
+
+ /**
+ * The value displayed in the page should be left alone if
+ * config.value does not correspond to any item in config.items.
+ */
+ test_choicesource_leaves_value_in_page: function() {
+ var st = Y.one(document).one("#thestatus");
+ Assert.areEqual(
+ "Unset", st.one(".value").get("innerHTML"),
+ "ChoiceSource is overriding displayed value in HTML");
+ },
+
+ test_choicelist_html_has_current: function() {
+ simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
+ var configcount = this.config.items.length;
+ var choicelist_lis = Y.one(document).all(".yui3-ichoicelist li");
+
+ var that = this;
+ var asserted;
+ var test_li = function(li) {
+ var text = li.get("text");
+ for (var i=0; i < that.config.items.length; i++) {
+ if (that.config.items[i].name == text) {
+ if (that.config.items[i].value == that.choice_edit.get("value")) {
+ Assert.isNotNull(li.one("span.current"),
+ "Page LI '" + text + "' was not marked as current");
+ asserted = true;
+ }
+ break;
+ }
+ }
+ };
+ // When config.value does not correspond to any item in
+ // config.items, no LI in the choice list will be marked with
+ // the "current" style.
+ asserted = false;
+ choicelist_lis.each(test_li);
+ Assert.isFalse(asserted, "There was a current LI item");
+ // Once a choice is made, the current value is marked with the
+ // "current" class in the choice list.
+ simulate(this.choice_edit._choice_list.get('boundingBox'),
+ 'li a[href$=new]', 'click');
+ simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
+ asserted = false;
+ choicelist_lis.refresh();
+ choicelist_lis.each(test_li);
+ Assert.isTrue(asserted, "There was no current LI item");
+ }
+
+ }));
+
+ tests.suite.add(new Y.Test.Case({
+
+ name: 'nullable_choice_edit',
+
+ setUp: function() {
+ // add the in-page HTML
+ var inpage = Y.Node.create([
+ '<p id="nullchoiceedit" style="margin-top: 25px">',
+ ' <img class="addicon" src="https://bugs.edge.launchpad.net/@@/add";>',
+ ' <span class="nulltext">Choose something</span>',
+ ' <span class="value" style="display:none" />',
+ ' <img class="editicon" style="display:none" src="https://bugs.edge.launchpad.net/@@/edit";>',
+ '</p>'].join(''));
+ Y.one("body").appendChild(inpage);
+ this.null_choice_edit = new Y.NullChoiceSource({
+ contentBox: '#nullchoiceedit',
value: null,
- title: 'Change status to',
+ title: 'Choose something',
items: [
- { name: 'New', value: 'new', style: '',
- help: '', disabled: false },
- { name: 'Invalid', value: 'invalid', style: '',
- help: '', disabled: true }
+ { name: 'Chico', value: 'chico', style: '',
+ help: '', disabled: false },
+ { name: 'Harpo', value: 'harpo', style: '',
+ help: '', disabled: false },
+ { name: 'Groucho', value: 'groucho', style: '',
+ help: '', disabled: false },
+ { name: 'Gummo', value: 'gummo', style: '',
+ help: '', disabled: false },
+ { name: 'Zeppo', value: 'zeppo', style: '',
+ help: '', disabled: false },
+ { name: 'Not funny!', value: null, style: '',
+ help: '', disabled: false }
]
- };
- },
-
- /**
- * The value displayed in the page should be left alone if
- * config.value does not correspond to any item in config.items.
- */
- test_choicesource_leaves_value_in_page: function() {
- var st = Y.one(document).one("#thestatus");
- Assert.areEqual(
- "Unset", st.one(".value").get("innerHTML"),
- "ChoiceSource is overriding displayed value in HTML");
- },
-
- test_choicelist_html_has_current: function() {
- simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
- var configcount = this.config.items.length;
- var choicelist_lis = Y.one(document).all(".yui3-ichoicelist li");
-
- var that = this;
- var asserted;
- var test_li = function(li) {
- var text = li.get("text");
- for (var i=0; i < that.config.items.length; i++) {
- if (that.config.items[i].name == text) {
- if (that.config.items[i].value == that.choice_edit.get("value")) {
- Assert.isNotNull(li.one("span.current"),
- "Page LI '" + text + "' was not marked as current");
- asserted = true;
- }
- break;
+ });
+
+ this.null_choice_edit.render();
+ },
+
+ tearDown: function() {
+ if (this.null_choice_edit._choice_list) {
+ cleanup_widget(this.null_choice_edit._choice_list);
+ }
+ var nullchoiceedit = Y.one("document").one("#nullchoiceedit");
+ if (nullchoiceedit) {
+ nullchoiceedit.get("parentNode").removeChild(nullchoiceedit);
+ }
+ },
+
+ test_can_be_instantiated: function() {
+ Assert.isInstanceOf(
+ Y.NullChoiceSource, this.null_choice_edit,
+ "NullChoiceSource not instantiated.");
+ },
+
+ test_action_icon: function() {
+ var that = this;
+
+ Assert.areEqual(
+ this.null_choice_edit.get('actionicon'),
+ this.null_choice_edit.get('addicon'),
+ 'Action icon is not the add icon like expected.');
+
+ Assert.areEqual(
+ this.null_choice_edit.get('addicon').getStyle('display'),
+ 'inline',
+ 'Add icon is not visible when it should be');
+ Assert.areEqual(
+ this.null_choice_edit.get('editicon').getStyle('display'),
+ 'none',
+ "Edit icon is visible when it shouldn't be");
+
+ simulate(this.null_choice_edit.get('boundingBox'),
+ '.value', 'click');
+ simulate(this.null_choice_edit._choice_list.get('boundingBox'),
+ 'li a[href$=groucho]', 'click');
+ this.null_choice_edit._uiClearWaiting();
+
+ Assert.areEqual(
+ this.null_choice_edit.get('actionicon'),
+ this.null_choice_edit.get('editicon'),
+ 'Action icon is not the add icon like expected.');
+ Assert.areEqual(
+ this.null_choice_edit.get('addicon').getStyle('display'),
+ 'none',
+ "Add icon is visible when it shouldn't be");
+ Assert.areEqual(
+ this.null_choice_edit.get('editicon').getStyle('display'),
+ 'inline',
+ "Edit icon is not visible when it shouldn be");
+ },
+
+ test_null_item_absent: function() {
+ Assert.areEqual(
+ this.null_choice_edit.get('value'),
+ null,
+ "Selected value isn't null");
+
+ simulate(this.null_choice_edit.get('boundingBox'),
+ '.value', 'click');
+ var remove_action_present = false;
+ this.null_choice_edit._choice_list.get(
+ 'boundingBox').all('li a').each(function(item) {
+ if (item._value == null) {
+ remove_action_present = true;
}
- }
- };
- // When config.value does not correspond to any item in
- // config.items, no LI in the choice list will be marked with
- // the "current" style.
- asserted = false;
- choicelist_lis.each(test_li);
- Assert.isFalse(asserted, "There was a current LI item");
- // Once a choice is made, the current value is marked with the
- // "current" class in the choice list.
- simulate(this.choice_edit._choice_list.get('boundingBox'),
- 'li a[href$=new]', 'click');
- simulate(this.choice_edit.get('boundingBox'), '.value', 'click');
- asserted = false;
- choicelist_lis.refresh();
- choicelist_lis.each(test_li);
- Assert.isTrue(asserted, "There was no current LI item");
- }
-
-}));
-
-suite.add(new Y.Test.Case({
-
- name: 'nullable_choice_edit',
-
- setUp: function() {
- // add the in-page HTML
- var inpage = Y.Node.create([
- '<p id="nullchoiceedit" style="margin-top: 25px">',
- ' <img class="addicon" src="https://bugs.edge.launchpad.net/@@/add";>',
- ' <span class="nulltext">Choose something</span>',
- ' <span class="value" style="display:none" />',
- ' <img class="editicon" style="display:none" src="https://bugs.edge.launchpad.net/@@/edit";>',
- '</p>'].join(''));
- Y.one("body").appendChild(inpage);
- this.null_choice_edit = new Y.NullChoiceSource({
- contentBox: '#nullchoiceedit',
- value: null,
- title: 'Choose something',
- items: [
- { name: 'Chico', value: 'chico', style: '',
- help: '', disabled: false },
- { name: 'Harpo', value: 'harpo', style: '',
- help: '', disabled: false },
- { name: 'Groucho', value: 'groucho', style: '',
- help: '', disabled: false },
- { name: 'Gummo', value: 'gummo', style: '',
- help: '', disabled: false },
- { name: 'Zeppo', value: 'zeppo', style: '',
- help: '', disabled: false },
- { name: 'Not funny!', value: null, style: '',
- help: '', disabled: false }
- ]
- });
-
- this.null_choice_edit.render();
- },
-
- tearDown: function() {
- if (this.null_choice_edit._choice_list) {
- cleanup_widget(this.null_choice_edit._choice_list);
- }
- var nullchoiceedit = Y.one("document").one("#nullchoiceedit");
- if (nullchoiceedit) {
- nullchoiceedit.get("parentNode").removeChild(nullchoiceedit);
- }
- },
-
- test_can_be_instantiated: function() {
- Assert.isInstanceOf(
- Y.NullChoiceSource, this.null_choice_edit,
- "NullChoiceSource not instantiated.");
- },
-
- test_action_icon: function() {
- var that = this;
-
- Assert.areEqual(
- this.null_choice_edit.get('actionicon'),
- this.null_choice_edit.get('addicon'),
- 'Action icon is not the add icon like expected.');
-
- Assert.areEqual(
- this.null_choice_edit.get('addicon').getStyle('display'),
- 'inline',
- 'Add icon is not visible when it should be');
- Assert.areEqual(
- this.null_choice_edit.get('editicon').getStyle('display'),
- 'none',
- "Edit icon is visible when it shouldn't be");
-
- simulate(this.null_choice_edit.get('boundingBox'),
- '.value', 'click');
- simulate(this.null_choice_edit._choice_list.get('boundingBox'),
- 'li a[href$=groucho]', 'click');
- this.null_choice_edit._uiClearWaiting();
-
- Assert.areEqual(
- this.null_choice_edit.get('actionicon'),
- this.null_choice_edit.get('editicon'),
- 'Action icon is not the add icon like expected.');
- Assert.areEqual(
- this.null_choice_edit.get('addicon').getStyle('display'),
- 'none',
- "Add icon is visible when it shouldn't be");
- Assert.areEqual(
- this.null_choice_edit.get('editicon').getStyle('display'),
- 'inline',
- "Edit icon is not visible when it shouldn be");
- },
-
- test_null_item_absent: function() {
- Assert.areEqual(
- this.null_choice_edit.get('value'),
- null,
- "Selected value isn't null");
-
- simulate(this.null_choice_edit.get('boundingBox'),
- '.value', 'click');
- var remove_action_present = false;
- this.null_choice_edit._choice_list.get(
- 'boundingBox').all('li a').each(function(item) {
- if (item._value == null) {
- remove_action_present = true;
- }
- });
- Assert.isFalse(
- remove_action_present,
- 'Remove item is present even when the current value is null.');
- },
-
- test_get_input_for_null: function() {
- this.null_choice_edit.set('value', 'groucho');
- Assert.areEqual(
- 'groucho',
- this.null_choice_edit.getInput(),
- "getInput() did not return the current value");
- // Simulate choosing a null value and check that getInput()
- // returns the new value.
- this.null_choice_edit.onClick({button: 1, halt: function(){}});
- this.null_choice_edit._choice_list.fire('valueChosen', null);
- Assert.areEqual(
- null,
- this.null_choice_edit.getInput(),
- "getInput() did not return the current (null) value");
- }
-}));
-
-Y.lp.testing.Runner.run(suite);
-
+ });
+ Assert.isFalse(
+ remove_action_present,
+ 'Remove item is present even when the current value is null.');
+ },
+
+ test_get_input_for_null: function() {
+ this.null_choice_edit.set('value', 'groucho');
+ Assert.areEqual(
+ 'groucho',
+ this.null_choice_edit.getInput(),
+ "getInput() did not return the current value");
+ // Simulate choosing a null value and check that getInput()
+ // returns the new value.
+ this.null_choice_edit.onClick({button: 1, halt: function(){}});
+ this.null_choice_edit._choice_list.fire('valueChosen', null);
+ Assert.areEqual(
+ null,
+ this.null_choice_edit.getInput(),
+ "getInput() did not return the current (null) value");
+ }
+ }));
+
+
+
+}, '0.1', {
+ 'requires': ['test', 'console', 'lp.choiceedit', 'node', 'event',
+ 'event-simulate', 'widget-stack', 'lp.app.choice']
});
=== modified file 'lib/lp/app/javascript/confirmationoverlay/tests/test_confirmationoverlay.html'
--- lib/lp/app/javascript/confirmationoverlay/tests/test_confirmationoverlay.html 2011-08-30 15:06:11 +0000
+++ lib/lp/app/javascript/confirmationoverlay/tests/test_confirmationoverlay.html 2012-02-10 13:59:01 +0000
@@ -1,39 +1,60 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<!--
+Copyright 2012 Canonical Ltd. This software is licensed under the
+GNU Affero General Public License version 3 (see the file LICENSE).
+-->
+
<html>
<head>
- <title>Confirmation Overlay</title>
-
- <!-- YUI and test setup -->
- <script type="text/javascript"
- src="../../../../../canonical/launchpad/icing/yui/yui/yui.js">
- </script>
- <link rel="stylesheet" href="../../../../app/javascript/testing/test.css" />
- <script type="text/javascript"
- src="../../../../app/javascript/testing/testrunner.js"></script>
-
- <!-- dependent modules from lazr-->
- <script type="text/javascript" src="../../lazr/lazr.js"></script>
- <script type="text/javascript" src="../../overlay/overlay.js"></script>
- <script type="text/javascript" src="../../formoverlay/formoverlay.js"></script>
-
- <!-- The module under test -->
- <script type="text/javascript" src="../confirmationoverlay.js"></script>
-
- <!-- The test suite -->
- <script type="text/javascript" src="test_confirmationoverlay.js"></script>
-
-</head>
-<body class="yui3-skin-sam">
- <div id="placeholder" style="display:none;">
- </div>
-
- <script type="text/x-template" id="form-template">
- <span id="test">content</span>
- <form name="my-form">
- <input type="checkbox" name="checkbox" value="checkbox" />
- <input id="submit" type="submit" name="submit_name" value="submit_value"/>
- </form>
- </script>
-
-</body>
+ <title>Indicator confirmationoverlay</title>
+
+ <!-- YUI and test setup -->
+ <script type="text/javascript"
+ src="../../../../../../build/js/yui/yui/yui.js">
+ </script>
+ <link rel="stylesheet"
+ href="../../../../../../build/js/yui/console/assets/console-core.css" />
+ <link rel="stylesheet"
+ href="../../../../../../build/js/yui/console/assets/skins/sam/console.css" />
+ <link rel="stylesheet"
+ href="../../../../../../build/js/yui/test/assets/skins/sam/test.css" />
+
+ <script type="text/javascript"
+ src="../../../../../../build/js/lp/app/testing/testrunner.js"></script>
+
+ <link rel="stylesheet" href="../../../../app/javascript/testing/test.css" />
+
+ <!-- Dependencies -->
+ <script type="text/javascript" src="../../../../../../build/js/lp/app/lazr/lazr.js"></script>
+ <script type="text/javascript" src="../../../../../../build/js/lp/app/overlay/overlay.js"></script>
+ <script type="text/javascript" src="../../../../../../build/js/lp/app/formoverlay/formoverlay.js"></script>
+
+ <!-- The module under test. -->
+ <script type="text/javascript" src="../confirmationoverlay.js"></script>
+
+ <!-- Placeholder for any css asset for this module. -->
+ <!-- <link rel="stylesheet" href="../assets/confirmationoverlay-core.css" /> -->
+
+ <!-- The test suite. -->
+ <script type="text/javascript" src="test_confirmationoverlay.js"></script>
+
+ </head>
+ <body class="yui3-skin-sam">
+ <ul id="suites">
+ <!-- <li>lp.large_indicator.test</li> -->
+ <li>lp.app.confirmationoverlay.test</li>
+ </ul>
+
+ <div id="placeholder" style="display:none;">
+ </div>
+
+ <script type="text/x-template" id="form-template">
+ <span id="test">content</span>
+ <form name="my-form">
+ <input type="checkbox" name="checkbox" value="checkbox" />
+ <input id="submit" type="submit" name="submit_name" value="submit_value"/>
+ </form>
+ </script>
+ </body>
</html>
=== modified file 'lib/lp/app/javascript/confirmationoverlay/tests/test_confirmationoverlay.js'
--- lib/lp/app/javascript/confirmationoverlay/tests/test_confirmationoverlay.js 2011-09-13 10:58:15 +0000
+++ lib/lp/app/javascript/confirmationoverlay/tests/test_confirmationoverlay.js 2012-02-10 13:59:01 +0000
@@ -1,226 +1,229 @@
-/* Copyright (c) 2011, Canonical Ltd. All rights reserved. */
-
-YUI().use('lp.testing.runner', 'test', 'dump', 'console', 'node',
- 'lp.app.confirmationoverlay', 'event', 'event-simulate',
- 'node-event-simulate', function(Y) {
-
-var suite = new Y.Test.Suite("Confirmation Overlay Tests");
-
-var form_html = Y.one('#form-template').getContent();
-
-suite.add(new Y.Test.Case({
-
- name: 'confirmation_overlay_basics',
-
- setUp: function() {
- Y.one("#placeholder")
- .empty()
- .append(Y.Node.create(form_html));
- this.button = Y.one('#submit');
- this.overlay = new Y.lp.app.confirmationoverlay.ConfirmationOverlay(
- {button: this.button});
- },
-
- tearDown: function() {
- this.overlay.destroy();
- },
-
- test_button_set: function() {
- Y.ObjectAssert.areEqual(this.button, this.overlay.get('button'));
- },
-
- test_form_set: function() {
- var form = Y.one("#placeholder").one('form');
- Y.ObjectAssert.areEqual(form, this.overlay.get('submit_form'));
- },
-
- test_not_visible_by_default: function() {
- Y.Assert.isFalse(this.overlay.get('visible'));
- },
-
- test_shown_when_button_clicked: function() {
- this.button.simulate('click');
- Y.Assert.isTrue(this.overlay.get('visible'));
- },
-
- test_hidden_field_added_on_ok: function() {
- // When 'ok' (i.e. confirmation) is clicked, the Confirmation Overlay
- // adds an additional field to the form to simulate the click on the
- // right button.
- this.button.simulate('click');
-
- this.overlay.form_node.one('.ok-btn').simulate('click');
- var hidden_input = this.overlay.get(
- 'submit_form').one('input.hidden-input');
- var real_input = this.overlay.get('submit_form').one('input#submit');
-
- Y.Assert.areEqual(
- real_input.get('name'),
- hidden_input.get('name'));
- Y.Assert.areEqual(
- real_input.get('value'),
- hidden_input.get('value'));
- },
-
- test_call_submit_on_ok: function() {
- // When 'ok' (i.e. confirmation) is clicked, the Confirmation Overlay
- // submits the form.
- // (Since we don't use YUI to make the request, we have to patch the
- // form object to test it's submission (and prevent the form to be
- // actually submitted.)
- this.button.simulate('click');
-
- var mockForm = Y.Mock();
- Y.Mock.expect(mockForm, {
- method: "submit"
- });
- Y.Mock.expect(mockForm, {
- method: "append",
- args: [Y.Mock.Value.Object]
- });
- this.overlay.set('submit_form', mockForm);
- this.overlay.form_node.one('.ok-btn').simulate('click');
-
- Y.Mock.verify(mockForm);
- }
-
-}));
-
-suite.add(new Y.Test.Case({
-
- name: 'confirmation_overlay_content_functions',
-
- setUp: function() {
- Y.one("#placeholder")
- .empty()
- .append(Y.Node.create(form_html));
- this.button = Y.one('#submit');
- this.getTestContent = function() {
- return Y.one('span#test').get('text');
- };
- this.isTestNotEmpty = function() {
- return Y.one('span#test').get('text') !== '';
- };
- this.overlay = null;
- },
-
- tearDown: function() {
- // Each test is responsible for creating it's own overlay
- // but the cleanup is done in a centralized fashion.
- if (this.overlay !== null) {
- this.overlay.destroy();
- }
- },
-
- test_form_content_fn: function() {
- this.overlay = new Y.lp.app.confirmationoverlay.ConfirmationOverlay({
- button: this.button,
- form_content_fn: this.getTestContent
- });
-
- Y.one('span#test').set('innerHTML', 'random content');
- Y.Assert.areEqual('', this.overlay.get('form_content'));
- this.button.simulate('click');
- Y.Assert.areEqual('random content', this.overlay.get('form_content'));
- },
-
- test_header_content_fn: function() {
- this.overlay = new Y.lp.app.confirmationoverlay.ConfirmationOverlay({
- button: this.button,
- header_content_fn: this.getTestContent
- });
-
- Y.one('span#test').set('innerHTML', 'random content');
- Y.Assert.areEqual('', this.overlay.get('form_header'));
- this.button.simulate('click');
- Y.Assert.areEqual(
- 'random content',
- this.overlay.get('headerContent').get('text').join(''));
- },
-
- test_do_not_display_fn: function() {
- // The parameter display_confirmation_fn can be used
- // to prevent the Confirmation Overlay from popping up.
- this.overlay = new Y.lp.app.confirmationoverlay.ConfirmationOverlay({
- button: this.button,
- display_confirmation_fn: this.isTestNotEmpty
- });
-
- // Hack the form to prevent real submission.
- Y.one('form').on('submit', function(e) {
- e.preventDefault();
- });
-
- Y.one('span#test').set('innerHTML', '');
- Y.Assert.isFalse(this.overlay.get('visible'));
- this.button.simulate('click');
-
- // The Overlay was not displayed.
- Y.Assert.isFalse(this.overlay.get('visible'));
- },
-
- test_callback_called: function() {
- // If submit_fn is passed to the constructor, call this function
- // when the 'ok' is clicked instead of submitting the form.
- var called = false;
- var callback = function() {
- called = true;
- };
- // Hack the form to record form submission.
- var form_submitted = false;
- Y.one('form').on('submit', function(e) {
- form_submitted = true;
- e.preventDefault();
- });
-
- this.overlay = new Y.lp.app.confirmationoverlay.ConfirmationOverlay({
- button: this.button,
- submit_fn: callback
- });
- this.button.simulate('click');
- Y.Assert.isTrue(this.overlay.get('visible'));
- this.overlay.form_node.one('.ok-btn').simulate('click');
- Y.Assert.isFalse(this.overlay.get('visible'));
- // The callback has been called.
- Y.Assert.isTrue(called);
- // The form has not been submitted.
- Y.Assert.isFalse(form_submitted);
- }
-
-}));
-
-suite.add(new Y.Test.Case({
-
- name: 'confirmation_overlay_buttonless',
-
- tearDown: function() {
- if (this.overlay !== null) {
- this.overlay.destroy();
- }
- },
-
- test_callback_called: function() {
- // A ConfirmationOverlay can be constructed without passing a button.
- // The creator is responsible for calling show() manually.
- var called = false;
- var callback = function() {
- called = true;
- };
-
- this.overlay = new Y.lp.app.confirmationoverlay.ConfirmationOverlay({
- submit_fn: callback
- });
- Y.Assert.isFalse(this.overlay.get('visible'));
- this.overlay.show();
- Y.Assert.isTrue(this.overlay.get('visible'));
- this.overlay.form_node.one('.ok-btn').simulate('click');
- Y.Assert.isFalse(this.overlay.get('visible'));
- // The callback has been called.
- Y.Assert.isTrue(called);
- }
-
-}));
-
-Y.lp.testing.Runner.run(suite);
-
+/* Copyright (c) 2012, Canonical Ltd. All rights reserved. */
+
+YUI.add('lp.app.confirmationoverlay.test', function (Y) {
+
+ var tests = Y.namespace('lp.app.confirmationoverlay.test');
+ tests.suite = new Y.Test.Suite('app.confirmationoverlay Tests');
+
+ var form_html = Y.one('#form-template').getContent();
+
+ tests.suite.add(new Y.Test.Case({
+ name: 'app.confirmationoverlay_tests',
+
+ setUp: function() {
+ Y.one("#placeholder")
+ .empty()
+ .append(Y.Node.create(form_html));
+ this.button = Y.one('#submit');
+ this.overlay = new Y.lp.app.confirmationoverlay.ConfirmationOverlay(
+ {button: this.button});
+ },
+
+ tearDown: function() {
+ this.overlay.destroy();
+ },
+
+ test_library_exists: function () {
+ Y.Assert.isObject(Y.lp.app.confirmationoverlay,
+ "We should be able to locate the lp.app.confirmationoverlay module");
+ },
+
+ test_button_set: function() {
+ Y.ObjectAssert.areEqual(this.button, this.overlay.get('button'));
+ },
+
+ test_form_set: function() {
+ var form = Y.one("#placeholder").one('form');
+ Y.ObjectAssert.areEqual(form, this.overlay.get('submit_form'));
+ },
+
+ test_not_visible_by_default: function() {
+ Y.Assert.isFalse(this.overlay.get('visible'));
+ },
+
+ test_shown_when_button_clicked: function() {
+ this.button.simulate('click');
+ Y.Assert.isTrue(this.overlay.get('visible'));
+ },
+
+ test_hidden_field_added_on_ok: function() {
+ // When 'ok' (i.e. confirmation) is clicked, the Confirmation Overlay
+ // adds an additional field to the form to simulate the click on the
+ // right button.
+ this.button.simulate('click');
+
+ this.overlay.form_node.one('.ok-btn').simulate('click');
+ var hidden_input = this.overlay.get(
+ 'submit_form').one('input.hidden-input');
+ var real_input = this.overlay.get('submit_form').one('input#submit');
+
+ Y.Assert.areEqual(
+ real_input.get('name'),
+ hidden_input.get('name'));
+ Y.Assert.areEqual(
+ real_input.get('value'),
+ hidden_input.get('value'));
+ },
+
+ test_call_submit_on_ok: function() {
+ // When 'ok' (i.e. confirmation) is clicked, the Confirmation Overlay
+ // submits the form.
+ // (Since we don't use YUI to make the request, we have to patch the
+ // form object to test it's submission (and prevent the form to be
+ // actually submitted.)
+ this.button.simulate('click');
+
+ var mockForm = Y.Mock();
+ Y.Mock.expect(mockForm, {
+ method: "submit"
+ });
+ Y.Mock.expect(mockForm, {
+ method: "append",
+ args: [Y.Mock.Value.Object]
+ });
+ this.overlay.set('submit_form', mockForm);
+ this.overlay.form_node.one('.ok-btn').simulate('click');
+
+ Y.Mock.verify(mockForm);
+ }
+ }));
+
+ tests.suite.add(new Y.Test.Case({
+
+ name: 'confirmation_overlay_content_functions',
+
+ setUp: function() {
+ Y.one("#placeholder")
+ .empty()
+ .append(Y.Node.create(form_html));
+ this.button = Y.one('#submit');
+ this.getTestContent = function() {
+ return Y.one('span#test').get('text');
+ };
+ this.isTestNotEmpty = function() {
+ return Y.one('span#test').get('text') !== '';
+ };
+ this.overlay = null;
+ },
+
+ tearDown: function() {
+ // Each test is responsible for creating it's own overlay
+ // but the cleanup is done in a centralized fashion.
+ if (this.overlay !== null) {
+ this.overlay.destroy();
+ }
+ },
+
+ test_form_content_fn: function() {
+ this.overlay = new Y.lp.app.confirmationoverlay.ConfirmationOverlay({
+ button: this.button,
+ form_content_fn: this.getTestContent
+ });
+
+ Y.one('span#test').set('innerHTML', 'random content');
+ Y.Assert.areEqual('', this.overlay.get('form_content'));
+ this.button.simulate('click');
+ Y.Assert.areEqual('random content', this.overlay.get('form_content'));
+ },
+
+ test_header_content_fn: function() {
+ this.overlay = new Y.lp.app.confirmationoverlay.ConfirmationOverlay({
+ button: this.button,
+ header_content_fn: this.getTestContent
+ });
+
+ Y.one('span#test').set('innerHTML', 'random content');
+ Y.Assert.areEqual('', this.overlay.get('form_header'));
+ this.button.simulate('click');
+ Y.Assert.areEqual(
+ 'random content',
+ this.overlay.get('headerContent').get('text').join(''));
+ },
+
+ test_do_not_display_fn: function() {
+ // The parameter display_confirmation_fn can be used
+ // to prevent the Confirmation Overlay from popping up.
+ this.overlay = new Y.lp.app.confirmationoverlay.ConfirmationOverlay({
+ button: this.button,
+ display_confirmation_fn: this.isTestNotEmpty
+ });
+
+ // Hack the form to prevent real submission.
+ Y.one('form').on('submit', function(e) {
+ e.preventDefault();
+ });
+
+ Y.one('span#test').set('innerHTML', '');
+ Y.Assert.isFalse(this.overlay.get('visible'));
+ this.button.simulate('click');
+
+ // The Overlay was not displayed.
+ Y.Assert.isFalse(this.overlay.get('visible'));
+ },
+
+ test_callback_called: function() {
+ // If submit_fn is passed to the constructor, call this function
+ // when the 'ok' is clicked instead of submitting the form.
+ var called = false;
+ var callback = function() {
+ called = true;
+ };
+ // Hack the form to record form submission.
+ var form_submitted = false;
+ Y.one('form').on('submit', function(e) {
+ form_submitted = true;
+ e.preventDefault();
+ });
+
+ this.overlay = new Y.lp.app.confirmationoverlay.ConfirmationOverlay({
+ button: this.button,
+ submit_fn: callback
+ });
+ this.button.simulate('click');
+ Y.Assert.isTrue(this.overlay.get('visible'));
+ this.overlay.form_node.one('.ok-btn').simulate('click');
+ Y.Assert.isFalse(this.overlay.get('visible'));
+ // The callback has been called.
+ Y.Assert.isTrue(called);
+ // The form has not been submitted.
+ Y.Assert.isFalse(form_submitted);
+ }
+
+ }));
+
+ tests.suite.add(new Y.Test.Case({
+
+ name: 'confirmation_overlay_buttonless',
+
+ tearDown: function() {
+ if (this.overlay !== null) {
+ this.overlay.destroy();
+ }
+ },
+
+ test_callback_called: function() {
+ // A ConfirmationOverlay can be constructed without passing a button.
+ // The creator is responsible for calling show() manually.
+ var called = false;
+ var callback = function() {
+ called = true;
+ };
+
+ this.overlay = new Y.lp.app.confirmationoverlay.ConfirmationOverlay({
+ submit_fn: callback
+ });
+ Y.Assert.isFalse(this.overlay.get('visible'));
+ this.overlay.show();
+ Y.Assert.isTrue(this.overlay.get('visible'));
+ this.overlay.form_node.one('.ok-btn').simulate('click');
+ Y.Assert.isFalse(this.overlay.get('visible'));
+ // The callback has been called.
+ Y.Assert.isTrue(called);
+ }
+
+ }));
+
+}, '0.1', {
+ 'requires': ['test', 'console', 'lp.app.confirmationoverlay',
+ 'dump', 'node', 'event', 'event-simulate', 'node-event-simulate']
});
=== modified file 'lib/lp/app/javascript/extras/tests/test_extras.html'
--- lib/lp/app/javascript/extras/tests/test_extras.html 2011-08-09 10:16:39 +0000
+++ lib/lp/app/javascript/extras/tests/test_extras.html 2012-02-10 13:59:01 +0000
@@ -1,29 +1,47 @@
-<!DOCTYPE
- HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd";>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<!--
+Copyright 2012 Canonical Ltd. This software is licensed under the
+GNU Affero General Public License version 3 (see the file LICENSE).
+-->
+
<html>
<head>
- <title>Launchpad Extras</title>
-
- <!-- YUI and test setup -->
- <link rel="stylesheet" href="../../testing/test.css" />
- <script type="text/javascript"
- src="../../../../../canonical/launchpad/icing/yui/yui/yui.js"></script>
- <script type="text/javascript"
- src="../../testing/testrunner.js"></script>
-
- <!-- The module under test -->
- <script type="text/javascript"
- src="../extras.js"></script>
-
- <!-- The test suite -->
- <script type="text/javascript"
- src="test_extras.js"></script>
-
- </head>
- <body class="yui3-skin-sam">
- <ul id="suites">
- <li>lp.extras.test</li>
- </ul>
- </body>
+ <title>Launchpad extras</title>
+
+ <!-- YUI and test setup -->
+ <script type="text/javascript"
+ src="../../../../../../build/js/yui/yui/yui.js">
+ </script>
+ <link rel="stylesheet"
+ href="../../../../../../build/js/yui/console/assets/console-core.css" />
+ <link rel="stylesheet"
+ href="../../../../../../build/js/yui/console/assets/skins/sam/console.css" />
+ <link rel="stylesheet"
+ href="../../../../../../build/js/yui/test/assets/skins/sam/test.css" />
+
+ <script type="text/javascript"
+ src="../../../../../../build/js/lp/app/testing/testrunner.js"></script>
+
+ <link rel="stylesheet" href="../../../../app/javascript/testing/test.css" />
+
+ <!-- Dependencies -->
+ <!-- <script type="text/javascript" src="../../../../../../build/js/lp/..."></script> -->
+
+ <!-- The module under test. -->
+ <script type="text/javascript" src="../extras.js"></script>
+
+ <!-- Placeholder for any css asset for this module. -->
+ <!-- <link rel="stylesheet" href="../assets/extras-core.css" /> -->
+
+ <!-- The test suite. -->
+ <script type="text/javascript" src="test_extras.js"></script>
+
+ </head>
+ <body class="yui3-skin-sam">
+ <ul id="suites">
+ <!-- <li>lp.large_indicator.test</li> -->
+ <li>lp.extras.test</li>
+ </ul>
+ </body>
</html>
=== modified file 'lib/lp/app/javascript/formoverlay/tests/test_formoverlay.html'
--- lib/lp/app/javascript/formoverlay/tests/test_formoverlay.html 2011-08-19 14:59:06 +0000
+++ lib/lp/app/javascript/formoverlay/tests/test_formoverlay.html 2012-02-10 13:59:01 +0000
@@ -1,32 +1,51 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<!--
+Copyright 2012 Canonical Ltd. This software is licensed under the
+GNU Affero General Public License version 3 (see the file LICENSE).
+-->
+
<html>
<head>
- <title>Form Overlay</title>
-
- <!-- YUI and test setup -->
- <script type="text/javascript"
- src="../../../../../canonical/launchpad/icing/yui/yui/yui.js">
- </script>
- <link rel="stylesheet" href="../../../../app/javascript/testing/test.css" />
- <script type="text/javascript"
- src="../../../../app/javascript/testing/testrunner.js"></script>
-
- <!-- dependent modules from lazr-->
- <script type="text/javascript" src="../../lazr/lazr.js"></script>
- <script type="text/javascript" src="../../overlay/overlay.js"></script>
-
- <!-- The module under test -->
- <script type="text/javascript" src="../formoverlay.js"></script>
-
- <!-- Testing helpers -->
- <script type="text/javascript" src="../../testing/mockio.js"></script>
-
- <!-- The test suite -->
- <script type="text/javascript" src="test_formoverlay.js"></script>
-
-</head>
-<body class="yui3-skin-sam">
- <div id="form_overlay_example">
- </div>
-</body>
+ <title>formoverlay tests</title>
+
+ <!-- YUI and test setup -->
+ <script type="text/javascript"
+ src="../../../../../../build/js/yui/yui/yui.js">
+ </script>
+ <link rel="stylesheet"
+ href="../../../../../../build/js/yui/console/assets/console-core.css" />
+ <link rel="stylesheet"
+ href="../../../../../../build/js/yui/console/assets/skins/sam/console.css" />
+ <link rel="stylesheet"
+ href="../../../../../../build/js/yui/test/assets/skins/sam/test.css" />
+
+ <script type="text/javascript"
+ src="../../../../../../build/js/lp/app/testing/testrunner.js"></script>
+
+ <link rel="stylesheet" href="../../../../app/javascript/testing/test.css" />
+
+ <!-- Dependencies -->
+ <script type="text/javascript" src="../../../../../../build/js/lp/app/testing/mockio.js"></script>
+ <script type="text/javascript" src="../../../../../../build/js/lp/app/lazr/lazr.js"></script>
+ <script type="text/javascript" src="../../../../../../build/js/lp/app/overlay/overlay.js"></script>
+
+ <!-- The module under test. -->
+ <script type="text/javascript" src="../formoverlay.js"></script>
+
+ <!-- Placeholder for any css asset for this module. -->
+ <!-- <link rel="stylesheet" href="../assets/formoverlay-core.css" /> -->
+
+ <!-- The test suite. -->
+ <script type="text/javascript" src="test_formoverlay.js"></script>
+
+ </head>
+ <body class="yui3-skin-sam">
+ <ul id="suites">
+ <!-- <li>lp.large_indicator.test</li> -->
+ <li>lp.formoverlay.test</li>
+ </ul>
+ <div id="form_overlay_example">
+ </div>
+ </body>
</html>
=== modified file 'lib/lp/app/javascript/formoverlay/tests/test_formoverlay.js'
--- lib/lp/app/javascript/formoverlay/tests/test_formoverlay.js 2011-08-25 13:00:39 +0000
+++ lib/lp/app/javascript/formoverlay/tests/test_formoverlay.js 2012-02-10 13:59:01 +0000
@@ -1,543 +1,549 @@
-/* Copyright (c) 2008-2011, Canonical Ltd. All rights reserved. */
-
-YUI().use('lp.testing.runner', 'test', 'dump', 'console', 'node',
- 'lazr.formoverlay', 'event', 'event-simulate',
- 'lp.testing.mockio', function(Y) {
-
-var Assert = Y.Assert; // For easy access to isTrue(), etc.
-
-
-/*
- * A wrapper for the Y.Event.simulate() function. The wrapper accepts
- * CSS selectors and Node instances instead of raw nodes.
- */
-function simulate(widget, selector, evtype, options) {
- var rawnode = Y.Node.getDOMNode(widget.one(selector));
- Y.Event.simulate(rawnode, evtype, options);
-}
-
-/* Helper function to cleanup and destroy a form overlay instance */
-function cleanup_form_overlay(form_overlay) {
- if (form_overlay.get('rendered')) {
- var bb = form_overlay.get('boundingBox');
- if (Y.Node.getDOMNode(bb)){
- bb.get('parentNode').removeChild(bb);
- }
- }
-
- // Kill the widget itself.
- form_overlay.destroy();
-}
-
-/* Helper function that creates a new form overlay instance. */
-function make_form_overlay(cfg) {
- var form_overlay = new Y.lazr.FormOverlay(cfg);
- form_overlay.render();
- return form_overlay;
-}
-
-var suite = new Y.Test.Suite("Form Overlay Tests");
-
-suite.add(new Y.Test.Case({
-
- name: 'form_overlay_basics',
-
- setUp: function() {
- this.form_overlay = make_form_overlay({
- headerContent: 'Form for testing',
- form_content: [
- 'Here is an input: ',
- '<input type="text" name="field1" id="field1" />',
- 'Here is another input: ',
- '<input type="text" name="field2" id="field2" />'].join(""),
- xy: [0, 0]
- });
-
- // Ensure window size is constant for tests
- this.width = window.top.outerWidth;
- this.height = window.top.outerHeight;
- window.top.resizeTo(800, 600);
- },
-
- tearDown: function() {
- window.top.resizeTo(this.width, this.height);
- cleanup_form_overlay(this.form_overlay);
- },
-
- test_form_overlay_can_be_instantiated: function() {
- var overlay = new Y.lazr.FormOverlay();
- Assert.isInstanceOf(
- Y.lazr.FormOverlay,
- overlay,
- "Form overlay could not be instantiated.");
- cleanup_form_overlay(overlay);
- },
-
- test_body_content_is_single_node: function() {
- Assert.areEqual(
- 1,
- new Y.NodeList(this.form_overlay.getStdModNode("body")).size(),
- "The body content should be a single node, not a node list.");
- },
-
- test_form_content_in_body_content: function() {
- // The form_content should be included in the body of the
- // overlay during initialization.
- var body_content = this.form_overlay.getStdModNode("body");
-
- // Ensure the body_content contains our form node.
- Assert.isTrue(
- body_content.contains(this.form_overlay.form_node),
- "The form node is part of the body content.");
-
- // And then make sure that the user-supplied form_content is
- // included in the form node:
- Assert.areNotEqual(
- body_content.get("innerHTML").search(
- this.form_overlay.get("form_content")));
- },
-
- test_first_input_has_focus: function() {
- // The first input element in the form content should have
- // focus.
- var first_input = this.form_overlay.form_node.one('#field1');
-
- // Hide the overlay and ensure that the first input does not
- // have the focus.
- this.form_overlay.hide();
- first_input.blur();
-
- var test = this;
- var focused = false;
-
- var onFocus = function(e) {
- focused = true;
- };
-
- first_input.on('focus', onFocus);
-
- this.form_overlay.show();
- Assert.isTrue(focused,
- "The form overlay's first input field receives focus " +
- "when the overlay is shown.");
- },
-
- test_form_submit_in_body_content: function() {
- // The body content should include the submit button.
- var body_content = this.form_overlay.getStdModNode("body");
- Assert.isTrue(
- body_content.contains(
- this.form_overlay.get("form_submit_button")),
- "The body content includes the form_submit_button.");
- },
-
- test_users_submit_button_in_body_content: function() {
- // If a user supplies a custom submit button, it should be included
- // in the form instead of the default one.
- var submit_button = Y.Node.create(
- '<input type="submit" value="Hit me!" />');
- var form_overlay = new Y.lazr.FormOverlay({
- form_content: 'Here is an input: ' +
- '<input type="text" name="field1" id="field1" />',
- form_submit_button: submit_button
- });
- form_overlay.render();
-
- // Ensure the button has been used in the form:
- Assert.isTrue(
- form_overlay.form_node.contains(submit_button),
- "The form should include the users submit button.");
-
- cleanup_form_overlay(form_overlay);
- },
-
- test_form_cancel_in_body_content: function() {
- // The body content should include the cancel button.
- var body_content = this.form_overlay.getStdModNode("body");
- Assert.isTrue(
- body_content.contains(
- this.form_overlay.get("form_cancel_button")),
- "The body content includes the form_cancel_button.");
- },
-
- test_users_cancel_button_in_body_content: function() {
- // If a user supplies a custom cancel button, it should be included
- // in the form instead of the default one.
- var cancel_button = Y.Node.create(
- '<button type="" value="cancel" />');
- var form_overlay = new Y.lazr.FormOverlay({
- form_content: 'Here is an input: ' +
- '<input type="text" name="field1" id="field1" />',
- form_cancel_button: cancel_button
- });
- form_overlay.render();
-
- // Ensure the button has been used in the form:
- Assert.isTrue(
- form_overlay.form_node.contains(cancel_button),
- "The form should include the users cancel button.");
-
- cleanup_form_overlay(form_overlay);
- },
-
- test_hide_when_cancel_clicked: function() {
- // The form overlay should hide when the cancel button is clicked.
-
- var bounding_box = this.form_overlay.get('boundingBox');
- Assert.isFalse(
- bounding_box.hasClass('yui3-lazr-formoverlay-hidden'),
- "The form is not hidden initially.");
-
- simulate(
- this.form_overlay.form_node,
- "button[type=button]",
- 'click');
-
- Assert.isTrue(
- bounding_box.hasClass('yui3-lazr-formoverlay-hidden'),
- "The form is hidden after cancel is clicked.");
- },
-
- test_error_displayed_on_showError: function() {
- // The error message should be in the body content.
-
- this.form_overlay.showError("My special error");
-
- var body_content = this.form_overlay.getStdModNode("body");
- Assert.areNotEqual(
- body_content.get("innerHTML").search("My special error"),
- -1,
- "The error text was included in the body content.");
- },
-
- test_tags_stripped_from_errors: function() {
- // Any tags in error messages will be stripped out.
- // That is, as long as they begin and end with ascii '<' and '>'
- // chars. Not sure what to do about unicode, for eg.
- this.form_overlay.showError("<h2>My special error</h2>");
-
- var body_content = this.form_overlay.getStdModNode("body");
- Assert.areEqual(
- -1,
- body_content.get("innerHTML").search("<h2>"),
- "The tags were stripped from the error message.");
- },
-
- test_error_cleared_on_clearError: function() {
- // The error message should be cleared from the body content.
- this.form_overlay.showError("My special error");
- this.form_overlay.clearError();
- var body_content = this.form_overlay.getStdModNode("body");
- Assert.areEqual(
- body_content.get("innerHTML").search("My special error"),
- -1,
- "The error text is cleared from the body content.");
- },
-
- test_form_overlay_centered_when_shown: function() {
- // If the 'centered' attribute is set, the overlay should be
- // centered in the viewport when shown.
- Assert.areEqual('[0, 0]', Y.dump(this.form_overlay.get('xy')),
- "Position is initially 0,0.");
- this.form_overlay.show();
- Assert.areEqual('[0, 0]', Y.dump(this.form_overlay.get('xy')),
- "Position is not updated if widget not centered.");
- this.form_overlay.hide();
-
- this.form_overlay.set('centered', true);
- this.form_overlay.show();
- var centered_pos_before_resize = this.form_overlay.get('xy');
- Assert.areNotEqual('[0, 0]', Y.dump(centered_pos_before_resize),
- "Position is updated when centered attr set.");
- this.form_overlay.hide();
-
- var centered = false;
- function watch_centering() {
- centered = true;
- }
- Y.Do.after(watch_centering, this.form_overlay, 'centered');
-
- // The position is updated after resizing the window and re-showing:
- window.top.resizeTo(850, 550);
- this.form_overlay.show();
-
- Assert.isTrue(centered,
- "The overlay centers itself when it is shown with the centered " +
- "attribute set.");
- },
-
- test_destroy_on_hide: function() {
- this.destroy_form_overlay = make_form_overlay({
- destroy_on_hide: true,
- headerContent: 'Form for testing',
- form_content: [
- 'Here is an input: ',
- '<input type="text" name="field1" id="field1" />',
- 'Here is another input: ',
- '<input type="text" name="field2" id="field2" />'].join(""),
- xy: [0, 0]
- });
-
- var destroy_fired = false;
- var onDestroy = function(e) {
- destroy_fired = true;
- };
- this.destroy_form_overlay.on('destroy', onDestroy);
-
- this.destroy_form_overlay.hide();
-
- Assert.isTrue(
- destroy_fired,
- "The destroy event should have been fired.");
- }
-}));
-
-
-suite.add(new Y.Test.Case({
-
- name: 'form_overlay_data',
-
- test_submit_callback_called_on_submit: function() {
- // Set an expectation that the form_submit_callback will be
- // called with the correct data:
- var callback_called = false;
- var submit_callback = function(ignore){
- callback_called = true;
- };
- var form_overlay = make_form_overlay({
- form_content: '<input type="text" name="field1" value="val1" />',
- form_submit_callback: submit_callback
- });
- simulate(
- form_overlay.form_node,
- "input[type=submit]",
- 'click');
-
- Assert.isTrue(
- callback_called,
- "The form_submit_callback should be called.");
- cleanup_form_overlay(form_overlay);
- },
-
- test_submit_with_callback_prevents_propagation: function() {
- // The onsubmit event is not propagated when user provides
- // a callback.
-
- var form_overlay = make_form_overlay({
- form_content: '<input type="text" name="field1" value="val1" />',
- form_submit_callback: function() {}
- });
-
- var event_was_propagated = false;
- var test = this;
- var onSubmit = function(e) {
- event_was_propagated = true;
- e.preventDefault();
- };
- Y.on('submit', onSubmit, form_overlay.form_node);
-
- simulate(form_overlay.form_node, "input[type=submit]", 'click');
-
- Assert.isFalse(
- event_was_propagated,
- "The onsubmit event should not be propagated.");
- cleanup_form_overlay(form_overlay);
- },
-
- test_submit_without_callback: function() {
- // The form should submit as a normal form if no callback
- // was provided.
- var form_overlay = make_form_overlay({
- form_content: '<input type="text" name="field1" value="val1" />'
- });
-
- var event_was_propagated = false;
- var test = this;
- var onSubmit = function(e) {
- event_was_propagated = true;
- e.preventDefault();
- };
-
- Y.on('submit', onSubmit, form_overlay.form_node);
-
- simulate(
- form_overlay.form_node,
- "input[type=submit]",
- 'click');
- Assert.isTrue(event_was_propagated,
- "The normal form submission event is propagated as " +
- "normal when no callback is provided.");
- cleanup_form_overlay(form_overlay);
- },
-
- test_getFormData_returns_correct_data_for_simple_inputs: function() {
- // The getFormData method should return the values of simple
- // inputs correctly.
-
- var form_overlay = make_form_overlay({
- headerContent: 'Form for testing',
- form_content: [
- 'Here is an input: ',
- '<input type="text" name="field1" value="val1" />',
- '<input type="text" name="field2" value="val2" />',
- '<input type="text" name="field3" value="val3" />'].join("")
- });
- Assert.areEqual(
- '{field1 => [val1], field2 => [val2], field3 => [val3]}',
- Y.dump(form_overlay.getFormData()),
- "The getFormData method returns simple input data correctly.");
- cleanup_form_overlay(form_overlay);
- },
-
- test_getFormData_returns_inputs_nested_several_levels: function() {
- // The getFormData method should return the values of inputs
- // even when they are several levels deep in the form node
- var form_overlay = make_form_overlay({
- headerContent: 'Form for testing',
- form_content: [
- 'Here is an input: ',
- '<div>',
- ' <input type="text" name="field1" value="val1" />',
- ' <div>',
- ' <input type="text" name="field2" value="val2" />',
- ' <div>',
- ' <input type="text" name="field3" value="val3" />',
- ' </div>',
- ' </div>',
- '</div>'].join("")
- });
-
- Assert.areEqual(
- '{field1 => [val1], field2 => [val2], field3 => [val3]}',
- Y.dump(form_overlay.getFormData()),
- "The getFormData method returns simple input data correctly.");
- cleanup_form_overlay(form_overlay);
-
- },
-
- test_form_content_as_node: function() {
- // The form content can also be passed as a node, rather than
- // a string of HTML.
- var form_content_div = Y.Node.create("<div />");
- var input_node = Y.Node.create(
- '<input type="text" name="field1" value="val1" />');
- form_content_div.appendChild(input_node);
-
- var form_overlay = make_form_overlay({
- headerContent: 'Form for testing',
- form_content: form_content_div
- });
-
- Assert.isTrue(
- form_overlay.form_node.contains(input_node),
- "Failed to pass the form content as a Y.Node instance.");
- cleanup_form_overlay(form_overlay);
- },
-
- test_io_provider_default: function() {
- // If no io_provider is configured, the form will use Y.
- var form_overlay = make_form_overlay({});
- Assert.areSame(Y, form_overlay.get("io_provider"));
- },
-
- test_io_provider_mockio: function() {
- // If an io_provider is configured, the form will use that.
- var mock_io = new Y.lp.testing.mockio.MockIo(),
- form_overlay = make_form_overlay({
- io_provider: mock_io
- });
- Assert.areSame(mock_io, form_overlay.get("io_provider"));
- },
-
- test_form_content_loaded_from_url_success: function() {
- // The form content can also be loaded from a URL, using
- // loadFormContentAndRender().
- var external_form_content = '<div id="loaded-content"></div>';
-
- var mock_io = new Y.lp.testing.mockio.MockIo();
- var form_overlay = make_form_overlay({
- headerContent: 'Form for testing',
- io_provider: mock_io
- });
- form_overlay.loadFormContentAndRender('http://example.com/form');
-
- // loadFormContentAndRender calls .io() to issue an XHR. Simulate a
- // successful response, to make sure that the form content gets
- // set and rendered.
- mock_io.success({responseText: external_form_content});
-
- Assert.areEqual(
- external_form_content, form_overlay.get('form_content'),
- "The form content wasn't loaded.");
- // Next we make sure that render was actually called by
- // checking the form content is present in the HTML.
- var form_node_text = form_overlay.form_node.get('innerHTML');
- Assert.areEqual(
- external_form_content,
- form_node_text.match(external_form_content),
- "Failed to render the form.");
- cleanup_form_overlay(form_overlay);
- },
-
- test_form_content_loaded_from_url_failure: function() {
- // If something goes wrong when loading the form contents, an
- // error message is displayed.
- var mock_io = new Y.lp.testing.mockio.MockIo();
- var form_overlay = make_form_overlay({
- headerContent: 'Form for testing',
- io_provider: mock_io
- });
- form_overlay.loadFormContentAndRender('http://example.com/form');
-
- // loadFormContentAndRender calls .io() to issue an XHR. Simulate a
- // failed response, to make sure that the error message gets set
- // and rendered.
- mock_io.failure();
-
- var error_message = "Sorry, an error occurred " +
- "while loading the form.";
- Assert.areEqual(
- error_message, form_overlay.get('form_content'),
- "Failure to set form content.");
- var form_node_text = form_overlay.form_node.get('innerHTML');
- Assert.areEqual(
- error_message, form_node_text.match(error_message),
- "Failed to render the error message.");
- cleanup_form_overlay(form_overlay);
- },
-
- test_form_content_loaded_from_url_bind_submit: function() {
- // After the form content is loaded, the submit button is hooked
- // up to the supplied callback. The callback receibes the io_provider.
- var callback_called = false,
- callback_io_provider;
- var submit_callback = function(ignore, io_provider){
- callback_called = true;
- callback_io_provider = io_provider;
- };
- var mock_io = new Y.lp.testing.mockio.MockIo();
- var form_overlay = make_form_overlay({
- headerContent: 'Form for testing',
- form_submit_callback: submit_callback,
- io_provider: mock_io
- });
- form_overlay.loadFormContentAndRender('http://example.com/form');
-
- // loadFormContentAndRender calls .io() to issue an XHR. Simulate a
- // successful response, to make sure that the submit button get
- // hooked up to the form_submit_call.
- var external_form_content = '<div id="loaded-content"></div>';
- mock_io.success({responseText: external_form_content});
- simulate(
- form_overlay.form_node,
- "input[type=submit]",
- 'click');
- Assert.isTrue(callback_called, "Submit button didn't get hooked up.");
- Assert.areSame(mock_io, callback_io_provider);
- cleanup_form_overlay(form_overlay);
- }
-}));
-
-Y.lp.testing.Runner.run(suite);
-
-});
+/* Copyright (c) 2012, Canonical Ltd. All rights reserved. */
+
+YUI.add('lp.formoverlay.test', function (Y) {
+
+ var tests = Y.namespace('lp.formoverlay.test');
+ var Assert = Y.Assert;
+ tests.suite = new Y.Test.Suite('formoverlay Tests');
+
+ /*
+ * A wrapper for the Y.Event.simulate() function. The wrapper accepts
+ * CSS selectors and Node instances instead of raw nodes.
+ */
+ function simulate(widget, selector, evtype, options) {
+ var rawnode = Y.Node.getDOMNode(widget.one(selector));
+ Y.Event.simulate(rawnode, evtype, options);
+ }
+
+ /* Helper function to cleanup and destroy a form overlay instance */
+ function cleanup_form_overlay(form_overlay) {
+ if (form_overlay.get('rendered')) {
+ var bb = form_overlay.get('boundingBox');
+ if (Y.Node.getDOMNode(bb)){
+ bb.get('parentNode').removeChild(bb);
+ }
+ }
+
+ // Kill the widget itself.
+ form_overlay.destroy();
+ }
+
+ /* Helper function that creates a new form overlay instance. */
+ function make_form_overlay(cfg) {
+ var form_overlay = new Y.lazr.FormOverlay(cfg);
+ form_overlay.render();
+ return form_overlay;
+ }
+
+ tests.suite.add(new Y.Test.Case({
+ name: 'formoverlay_basics',
+
+ setUp: function() {
+ this.form_overlay = make_form_overlay({
+ headerContent: 'Form for testing',
+ form_content: [
+ 'Here is an input: ',
+ '<input type="text" name="field1" id="field1" />',
+ 'Here is another input: ',
+ '<input type="text" name="field2" id="field2" />'].join(""),
+ xy: [0, 0]
+ });
+
+ // Ensure window size is constant for tests
+ this.width = window.top.outerWidth;
+ this.height = window.top.outerHeight;
+ window.top.resizeTo(800, 600);
+ },
+
+ tearDown: function() {
+ window.top.resizeTo(this.width, this.height);
+ cleanup_form_overlay(this.form_overlay);
+ },
+
+ test_library_exists: function () {
+ Y.Assert.isObject(Y.lazr.FormOverlay,
+ "We should be able to locate the lp.lazr.FormOverlay module");
+ },
+
+ test_form_overlay_can_be_instantiated: function() {
+ var overlay = new Y.lazr.FormOverlay();
+ Assert.isInstanceOf(
+ Y.lazr.FormOverlay,
+ overlay,
+ "Form overlay could not be instantiated.");
+ cleanup_form_overlay(overlay);
+ },
+
+ test_body_content_is_single_node: function() {
+ Assert.areEqual(
+ 1,
+ new Y.NodeList(this.form_overlay.getStdModNode("body")).size(),
+ "The body content should be a single node, not a node list.");
+ },
+
+ test_form_content_in_body_content: function() {
+ // The form_content should be included in the body of the
+ // overlay during initialization.
+ var body_content = this.form_overlay.getStdModNode("body");
+
+ // Ensure the body_content contains our form node.
+ Assert.isTrue(
+ body_content.contains(this.form_overlay.form_node),
+ "The form node is part of the body content.");
+
+ // And then make sure that the user-supplied form_content is
+ // included in the form node:
+ Assert.areNotEqual(
+ body_content.get("innerHTML").search(
+ this.form_overlay.get("form_content")));
+ },
+
+ test_first_input_has_focus: function() {
+ // The first input element in the form content should have
+ // focus.
+ var first_input = this.form_overlay.form_node.one('#field1');
+
+ // Hide the overlay and ensure that the first input does not
+ // have the focus.
+ this.form_overlay.hide();
+ first_input.blur();
+
+ var test = this;
+ var focused = false;
+
+ var onFocus = function(e) {
+ focused = true;
+ };
+
+ first_input.on('focus', onFocus);
+
+ this.form_overlay.show();
+ Assert.isTrue(focused,
+ "The form overlay's first input field receives focus " +
+ "when the overlay is shown.");
+ },
+
+ test_form_submit_in_body_content: function() {
+ // The body content should include the submit button.
+ var body_content = this.form_overlay.getStdModNode("body");
+ Assert.isTrue(
+ body_content.contains(
+ this.form_overlay.get("form_submit_button")),
+ "The body content includes the form_submit_button.");
+ },
+
+ test_users_submit_button_in_body_content: function() {
+ // If a user supplies a custom submit button, it should be included
+ // in the form instead of the default one.
+ var submit_button = Y.Node.create(
+ '<input type="submit" value="Hit me!" />');
+ var form_overlay = new Y.lazr.FormOverlay({
+ form_content: 'Here is an input: ' +
+ '<input type="text" name="field1" id="field1" />',
+ form_submit_button: submit_button
+ });
+ form_overlay.render();
+
+ // Ensure the button has been used in the form:
+ Assert.isTrue(
+ form_overlay.form_node.contains(submit_button),
+ "The form should include the users submit button.");
+
+ cleanup_form_overlay(form_overlay);
+ },
+
+ test_form_cancel_in_body_content: function() {
+ // The body content should include the cancel button.
+ var body_content = this.form_overlay.getStdModNode("body");
+ Assert.isTrue(
+ body_content.contains(
+ this.form_overlay.get("form_cancel_button")),
+ "The body content includes the form_cancel_button.");
+ },
+
+ test_users_cancel_button_in_body_content: function() {
+ // If a user supplies a custom cancel button, it should be included
+ // in the form instead of the default one.
+ var cancel_button = Y.Node.create(
+ '<button type="" value="cancel" />');
+ var form_overlay = new Y.lazr.FormOverlay({
+ form_content: 'Here is an input: ' +
+ '<input type="text" name="field1" id="field1" />',
+ form_cancel_button: cancel_button
+ });
+ form_overlay.render();
+
+ // Ensure the button has been used in the form:
+ Assert.isTrue(
+ form_overlay.form_node.contains(cancel_button),
+ "The form should include the users cancel button.");
+
+ cleanup_form_overlay(form_overlay);
+ },
+
+ test_hide_when_cancel_clicked: function() {
+ // The form overlay should hide when the cancel button is clicked.
+
+ var bounding_box = this.form_overlay.get('boundingBox');
+ Assert.isFalse(
+ bounding_box.hasClass('yui3-lazr-formoverlay-hidden'),
+ "The form is not hidden initially.");
+
+ simulate(
+ this.form_overlay.form_node,
+ "button[type=button]",
+ 'click');
+
+ Assert.isTrue(
+ bounding_box.hasClass('yui3-lazr-formoverlay-hidden'),
+ "The form is hidden after cancel is clicked.");
+ },
+
+ test_error_displayed_on_showError: function() {
+ // The error message should be in the body content.
+
+ this.form_overlay.showError("My special error");
+
+ var body_content = this.form_overlay.getStdModNode("body");
+ Assert.areNotEqual(
+ body_content.get("innerHTML").search("My special error"),
+ -1,
+ "The error text was included in the body content.");
+ },
+
+ test_tags_stripped_from_errors: function() {
+ // Any tags in error messages will be stripped out.
+ // That is, as long as they begin and end with ascii '<' and '>'
+ // chars. Not sure what to do about unicode, for eg.
+ this.form_overlay.showError("<h2>My special error</h2>");
+
+ var body_content = this.form_overlay.getStdModNode("body");
+ Assert.areEqual(
+ -1,
+ body_content.get("innerHTML").search("<h2>"),
+ "The tags were stripped from the error message.");
+ },
+
+ test_error_cleared_on_clearError: function() {
+ // The error message should be cleared from the body content.
+ this.form_overlay.showError("My special error");
+ this.form_overlay.clearError();
+ var body_content = this.form_overlay.getStdModNode("body");
+ Assert.areEqual(
+ body_content.get("innerHTML").search("My special error"),
+ -1,
+ "The error text is cleared from the body content.");
+ },
+
+ test_form_overlay_centered_when_shown: function() {
+ // If the 'centered' attribute is set, the overlay should be
+ // centered in the viewport when shown.
+ Assert.areEqual('[0, 0]', Y.dump(this.form_overlay.get('xy')),
+ "Position is initially 0,0.");
+ this.form_overlay.show();
+ Assert.areEqual('[0, 0]', Y.dump(this.form_overlay.get('xy')),
+ "Position is not updated if widget not centered.");
+ this.form_overlay.hide();
+
+ this.form_overlay.set('centered', true);
+ this.form_overlay.show();
+ var centered_pos_before_resize = this.form_overlay.get('xy');
+ Assert.areNotEqual('[0, 0]', Y.dump(centered_pos_before_resize),
+ "Position is updated when centered attr set.");
+ this.form_overlay.hide();
+
+ var centered = false;
+ function watch_centering() {
+ centered = true;
+ }
+ Y.Do.after(watch_centering, this.form_overlay, 'centered');
+
+ // The position is updated after resizing the window and re-showing:
+ window.top.resizeTo(850, 550);
+ this.form_overlay.show();
+
+ Assert.isTrue(centered,
+ "The overlay centers itself when it is shown with the " +
+ "centered attribute set.");
+ },
+
+ test_destroy_on_hide: function() {
+ this.destroy_form_overlay = make_form_overlay({
+ destroy_on_hide: true,
+ headerContent: 'Form for testing',
+ form_content: [
+ 'Here is an input: ',
+ '<input type="text" name="field1" id="field1" />',
+ 'Here is another input: ',
+ '<input type="text" name="field2" id="field2" />'].join(""),
+ xy: [0, 0]
+ });
+
+ var destroy_fired = false;
+ var onDestroy = function(e) {
+ destroy_fired = true;
+ };
+ this.destroy_form_overlay.on('destroy', onDestroy);
+
+ this.destroy_form_overlay.hide();
+
+ Assert.isTrue(
+ destroy_fired,
+ "The destroy event should have been fired.");
+ }
+
+ }));
+
+ tests.suite.add(new Y.Test.Case({
+
+ name: 'form_overlay_data',
+
+ test_submit_callback_called_on_submit: function() {
+ // Set an expectation that the form_submit_callback will be
+ // called with the correct data:
+ var callback_called = false;
+ var submit_callback = function(ignore){
+ callback_called = true;
+ };
+ var form_overlay = make_form_overlay({
+ form_content:
+ '<input type="text" name="field1" value="val1" />',
+ form_submit_callback: submit_callback
+ });
+ simulate(
+ form_overlay.form_node,
+ "input[type=submit]",
+ 'click');
+
+ Assert.isTrue(
+ callback_called,
+ "The form_submit_callback should be called.");
+ cleanup_form_overlay(form_overlay);
+ },
+
+ test_submit_with_callback_prevents_propagation: function() {
+ // The onsubmit event is not propagated when user provides
+ // a callback.
+
+ var form_overlay = make_form_overlay({
+ form_content:
+ '<input type="text" name="field1" value="val1" />',
+ form_submit_callback: function() {}
+ });
+
+ var event_was_propagated = false;
+ var test = this;
+ var onSubmit = function(e) {
+ event_was_propagated = true;
+ e.preventDefault();
+ };
+ Y.on('submit', onSubmit, form_overlay.form_node);
+
+ simulate(form_overlay.form_node, "input[type=submit]", 'click');
+
+ Assert.isFalse(
+ event_was_propagated,
+ "The onsubmit event should not be propagated.");
+ cleanup_form_overlay(form_overlay);
+ },
+
+ test_submit_without_callback: function() {
+ // The form should submit as a normal form if no callback
+ // was provided.
+ var form_overlay = make_form_overlay({
+ form_content: '<input type="text" name="field1" value="val1" />'
+ });
+
+ var event_was_propagated = false;
+ var test = this;
+ var onSubmit = function(e) {
+ event_was_propagated = true;
+ e.preventDefault();
+ };
+
+ Y.on('submit', onSubmit, form_overlay.form_node);
+
+ simulate(
+ form_overlay.form_node,
+ "input[type=submit]",
+ 'click');
+ Assert.isTrue(event_was_propagated,
+ "The normal form submission event is propagated as " +
+ "normal when no callback is provided.");
+ cleanup_form_overlay(form_overlay);
+ },
+
+ test_getFormData_returns_correct_data_for_simple_inputs: function() {
+ // The getFormData method should return the values of simple
+ // inputs correctly.
+
+ var form_overlay = make_form_overlay({
+ headerContent: 'Form for testing',
+ form_content: [
+ 'Here is an input: ',
+ '<input type="text" name="field1" value="val1" />',
+ '<input type="text" name="field2" value="val2" />',
+ '<input type="text" name="field3" value="val3" />'].join("")
+ });
+ Assert.areEqual(
+ '{field1 => [val1], field2 => [val2], field3 => [val3]}',
+ Y.dump(form_overlay.getFormData()),
+ "The getFormData method returns simple input data correctly.");
+ cleanup_form_overlay(form_overlay);
+ },
+
+ test_getFormData_returns_inputs_nested_several_levels: function() {
+ // The getFormData method should return the values of inputs
+ // even when they are several levels deep in the form node
+ var form_overlay = make_form_overlay({
+ headerContent: 'Form for testing',
+ form_content: [
+ 'Here is an input: ',
+ '<div>',
+ ' <input type="text" name="field1" value="val1" />',
+ ' <div>',
+ ' <input type="text" name="field2" value="val2" />',
+ ' <div>',
+ ' <input type="text" name="field3" value="val3" />',
+ ' </div>',
+ ' </div>',
+ '</div>'].join("")
+ });
+
+ Assert.areEqual(
+ '{field1 => [val1], field2 => [val2], field3 => [val3]}',
+ Y.dump(form_overlay.getFormData()),
+ "The getFormData method returns simple input data correctly.");
+ cleanup_form_overlay(form_overlay);
+
+ },
+
+ test_form_content_as_node: function() {
+ // The form content can also be passed as a node, rather than
+ // a string of HTML.
+ var form_content_div = Y.Node.create("<div />");
+ var input_node = Y.Node.create(
+ '<input type="text" name="field1" value="val1" />');
+ form_content_div.appendChild(input_node);
+
+ var form_overlay = make_form_overlay({
+ headerContent: 'Form for testing',
+ form_content: form_content_div
+ });
+
+ Assert.isTrue(
+ form_overlay.form_node.contains(input_node),
+ "Failed to pass the form content as a Y.Node instance.");
+ cleanup_form_overlay(form_overlay);
+ },
+
+ test_io_provider_default: function() {
+ // If no io_provider is configured, the form will use Y.
+ var form_overlay = make_form_overlay({});
+ Assert.areSame(Y, form_overlay.get("io_provider"));
+ },
+
+ test_io_provider_mockio: function() {
+ // If an io_provider is configured, the form will use that.
+ var mock_io = new Y.lp.testing.mockio.MockIo(),
+ form_overlay = make_form_overlay({
+ io_provider: mock_io
+ });
+ Assert.areSame(mock_io, form_overlay.get("io_provider"));
+ },
+
+ test_form_content_loaded_from_url_success: function() {
+ // The form content can also be loaded from a URL, using
+ // loadFormContentAndRender().
+ var external_form_content = '<div id="loaded-content"></div>';
+
+ var mock_io = new Y.lp.testing.mockio.MockIo();
+ var form_overlay = make_form_overlay({
+ headerContent: 'Form for testing',
+ io_provider: mock_io
+ });
+ form_overlay.loadFormContentAndRender('http://example.com/form');
+
+ // loadFormContentAndRender calls .io() to issue an XHR. Simulate a
+ // successful response, to make sure that the form content gets
+ // set and rendered.
+ mock_io.success({responseText: external_form_content});
+
+ Assert.areEqual(
+ external_form_content, form_overlay.get('form_content'),
+ "The form content wasn't loaded.");
+ // Next we make sure that render was actually called by
+ // checking the form content is present in the HTML.
+ var form_node_text = form_overlay.form_node.get('innerHTML');
+ Assert.areEqual(
+ external_form_content,
+ form_node_text.match(external_form_content),
+ "Failed to render the form.");
+ cleanup_form_overlay(form_overlay);
+ },
+
+ test_form_content_loaded_from_url_failure: function() {
+ // If something goes wrong when loading the form contents, an
+ // error message is displayed.
+ var mock_io = new Y.lp.testing.mockio.MockIo();
+ var form_overlay = make_form_overlay({
+ headerContent: 'Form for testing',
+ io_provider: mock_io
+ });
+ form_overlay.loadFormContentAndRender('http://example.com/form');
+
+ // loadFormContentAndRender calls .io() to issue an XHR. Simulate a
+ // failed response, to make sure that the error message gets set
+ // and rendered.
+ mock_io.failure();
+
+ var error_message = "Sorry, an error occurred " +
+ "while loading the form.";
+ Assert.areEqual(
+ error_message, form_overlay.get('form_content'),
+ "Failure to set form content.");
+ var form_node_text = form_overlay.form_node.get('innerHTML');
+ Assert.areEqual(
+ error_message, form_node_text.match(error_message),
+ "Failed to render the error message.");
+ cleanup_form_overlay(form_overlay);
+ },
+
+ test_form_content_loaded_from_url_bind_submit: function() {
+ // After the form content is loaded, the submit button is hooked
+ // up to the supplied callback. The callback receibes the
+ // io_provider.
+ var callback_called = false,
+ callback_io_provider;
+ var submit_callback = function(ignore, io_provider){
+ callback_called = true;
+ callback_io_provider = io_provider;
+ };
+ var mock_io = new Y.lp.testing.mockio.MockIo();
+ var form_overlay = make_form_overlay({
+ headerContent: 'Form for testing',
+ form_submit_callback: submit_callback,
+ io_provider: mock_io
+ });
+ form_overlay.loadFormContentAndRender('http://example.com/form');
+
+ // loadFormContentAndRender calls .io() to issue an XHR. Simulate a
+ // successful response, to make sure that the submit button get
+ // hooked up to the form_submit_call.
+ var external_form_content = '<div id="loaded-content"></div>';
+ mock_io.success({responseText: external_form_content});
+ simulate(
+ form_overlay.form_node,
+ "input[type=submit]",
+ 'click');
+ Assert.isTrue(callback_called,
+ "Submit button didn't get hooked up.");
+ Assert.areSame(mock_io, callback_io_provider);
+ cleanup_form_overlay(form_overlay);
+ }
+ }));
+
+
+}, '0.1', {'requires': ['test', 'console', 'lp.formoverlay', 'dump',
+ 'node', 'lazr.formoverlay', 'event', 'event-simulate',
+ 'lp.testing.mockio']});
=== modified file 'lib/lp/app/javascript/formwidgets/tests/test_formwidgets.html'
--- lib/lp/app/javascript/formwidgets/tests/test_formwidgets.html 2011-08-05 08:42:36 +0000
+++ lib/lp/app/javascript/formwidgets/tests/test_formwidgets.html 2012-02-10 13:59:01 +0000
@@ -1,43 +1,52 @@
-<!DOCTYPE
- HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd";>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<!--
+Copyright 2012 Canonical Ltd. This software is licensed under the
+GNU Affero General Public License version 3 (see the file LICENSE).
+-->
+
<html>
<head>
- <title>Launchpad Form Widgets</title>
-
- <!-- YUI and test setup -->
- <link rel="stylesheet" href="../../testing/test.css" />
- <script type="text/javascript"
- src="../../../../../canonical/launchpad/icing/yui/yui/yui.js"></script>
- <script type="text/javascript"
- src="../../testing/testrunner.js"></script>
-
- <!-- Required modules -->
- <script type="text/javascript"
- src="../../client.js"></script>
- <script type="text/javascript"
- src="../../activator/activator.js"></script>
- <script type="text/javascript"
- src="../../anim/anim.js"></script>
- <script type="text/javascript"
- src="../../lazr/lazr.js"></script>
- <script type="text/javascript"
- src="../../overlay/overlay.js"></script>
- <script type="text/javascript"
- src="../../extras/extras.js"></script>
-
- <!-- The module under test -->
- <script type="text/javascript"
- src="../formwidgets.js"></script>
-
- <!-- The test suite -->
- <script type="text/javascript"
- src="test_formwidgets.js"></script>
-
- </head>
- <body class="yui3-skin-sam">
- <ul id="suites">
- <li>lp.app.formwidgets.test</li>
- </ul>
- </body>
+ <title>formwidgets Tests</title>
+
+ <!-- YUI and test setup -->
+ <script type="text/javascript"
+ src="../../../../../../build/js/yui/yui/yui.js">
+ </script>
+ <link rel="stylesheet"
+ href="../../../../../../build/js/yui/console/assets/console-core.css" />
+ <link rel="stylesheet"
+ href="../../../../../../build/js/yui/console/assets/skins/sam/console.css" />
+ <link rel="stylesheet"
+ href="../../../../../../build/js/yui/test/assets/skins/sam/test.css" />
+
+ <script type="text/javascript"
+ src="../../../../../../build/js/lp/app/testing/testrunner.js"></script>
+
+ <link rel="stylesheet" href="../../../../app/javascript/testing/test.css" />
+
+ <!-- Dependencies -->
+ <script type="text/javascript" src="../../../../../../build/js/lp/app/client.js"></script>
+ <script type="text/javascript" src="../../../../../../build/js/lp/app/activator/activator.js"></script>
+ <script type="text/javascript" src="../../../../../../build/js/lp/app/anim/anim.js"></script>
+ <script type="text/javascript" src="../../../../../../build/js/lp/app/lazr/lazr.js"></script>
+ <script type="text/javascript" src="../../../../../../build/js/lp/app/overlay/overlay.js"></script>
+ <script type="text/javascript" src="../../../../../../build/js/lp/app/extras/extras.js"></script>
+
+ <!-- The module under test. -->
+ <script type="text/javascript" src="../formwidgets.js"></script>
+
+ <!-- Placeholder for any css asset for this module. -->
+ <!-- <link rel="stylesheet" href="../assets/formwidgets-core.css" /> -->
+
+ <!-- The test suite. -->
+ <script type="text/javascript" src="test_formwidgets.js"></script>
+
+ </head>
+ <body class="yui3-skin-sam">
+ <ul id="suites">
+ <!-- <li>lp.large_indicator.test</li> -->
+ <li>lp.app.formwidgets.test</li>
+ </ul>
+ </body>
</html>
=== modified file 'lib/lp/app/javascript/formwidgets/tests/test_resizing_textarea.html'
--- lib/lp/app/javascript/formwidgets/tests/test_resizing_textarea.html 2012-01-21 00:37:14 +0000
+++ lib/lp/app/javascript/formwidgets/tests/test_resizing_textarea.html 2012-02-10 13:59:01 +0000
@@ -1,40 +1,63 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<!--
+Copyright 2012 Canonical Ltd. This software is licensed under the
+GNU Affero General Public License version 3 (see the file LICENSE).
+-->
+
<html>
<head>
- <title>Resizing Textarea Plugin</title>
-
- <!-- YUI and test setup -->
- <script type="text/javascript"
- src="../../../../../canonical/launchpad/icing/yui/yui/yui.js">
- </script>
- <link rel="stylesheet" href="../../../../app/javascript/testing/test.css" />
- <script type="text/javascript"
- src="../../../../app/javascript/testing/testrunner.js"></script>
-
- <!-- The module under test -->
- <script type="text/javascript" src="../resizing_textarea.js"></script>
-
- <!-- The test suite -->
- <script type="text/javascript" src="test_resizing_textarea.js"></script>
-
-</head>
-<body class="yui3-skin-sam">
- <!-- We're going to test interacting with dom elements, so let's have some -->
- <textarea id="init" style="width: auto;">Initial text</textarea>
- <textarea id="with_defaults" style="width: auto;">has defaults</textarea>
- <textarea id="shrinkage" style="width: auto;"></textarea>
- <textarea id="multiple1" class="test_multiple first" style="width: auto;"></textarea>
- <textarea id="multiple2" class="test_multiple second" style="width: auto;"></textarea>
- <textarea id="css_height" style="height: 120px; width: auto;"></textarea>
- <div style="display: none;">
- <textarea id="config_height" rows="15" name="field.comment"
- style="max-width: 60em; width: 90%; display: block;" cols="44">
- </textarea>
- </div>
- <textarea id="no_change" style="width: auto;"></textarea>
- <textarea id="one_line_sample" style="height: 1em; overflow: hidden; resize: none; width: auto;"></textarea>
- <textarea id="one_line" style="height: 1em; width: auto;"></textarea>
-</body>
-
+ <title>resizing_textarea tests</title>
+
+ <!-- YUI and test setup -->
+ <script type="text/javascript"
+ src="../../../../../../build/js/yui/yui/yui.js">
+ </script>
+ <link rel="stylesheet"
+ href="../../../../../../build/js/yui/console/assets/console-core.css" />
+ <link rel="stylesheet"
+ href="../../../../../../build/js/yui/console/assets/skins/sam/console.css" />
+ <link rel="stylesheet"
+ href="../../../../../../build/js/yui/test/assets/skins/sam/test.css" />
+
+ <script type="text/javascript"
+ src="../../../../../../build/js/lp/app/testing/testrunner.js"></script>
+
+ <link rel="stylesheet" href="../../../../app/javascript/testing/test.css" />
+
+ <!-- Dependencies -->
+ <!-- <script type="text/javascript" src="../../../../../../build/js/lp/..."></script> -->
+
+ <!-- The module under test. -->
+ <script type="text/javascript" src="../resizing_textarea.js"></script>
+
+ <!-- Placeholder for any css asset for this module. -->
+ <!-- <link rel="stylesheet" href="../assets/resizing_textarea-core.css" /> -->
+
+ <!-- The test suite. -->
+ <script type="text/javascript" src="test_resizing_textarea.js"></script>
+
+ </head>
+ <body class="yui3-skin-sam">
+ <ul id="suites">
+ <!-- <li>lp.large_indicator.test</li> -->
+ <li>lp.resizing_textarea.test</li>
+ </ul>
+
+ <!-- We're going to test interacting with dom elements, so let's have some -->
+ <textarea id="init" style="width: auto;">Initial text</textarea>
+ <textarea id="with_defaults" style="width: auto;">has defaults</textarea>
+ <textarea id="shrinkage" style="width: auto;"></textarea>
+ <textarea id="multiple1" class="test_multiple first" style="width: auto;"></textarea>
+ <textarea id="multiple2" class="test_multiple second" style="width: auto;"></textarea>
+ <textarea id="css_height" style="height: 120px; width: auto;"></textarea>
+ <div style="display: none;">
+ <textarea id="config_height" rows="15" name="field.comment"
+ style="max-width: 60em; width: 90%; display: block;" cols="44">
+ </textarea>
+ </div>
+ <textarea id="no_change" style="width: auto;"></textarea>
+ <textarea id="one_line_sample" style="height: 1em; overflow: hidden; resize: none; width: auto;"></textarea>
+ <textarea id="one_line" style="height: 1em; width: auto;"></textarea>
+ </body>
</html>
=== modified file 'lib/lp/app/javascript/formwidgets/tests/test_resizing_textarea.js'
--- lib/lp/app/javascript/formwidgets/tests/test_resizing_textarea.js 2012-01-21 00:42:41 +0000
+++ lib/lp/app/javascript/formwidgets/tests/test_resizing_textarea.js 2012-02-10 13:59:01 +0000
@@ -1,233 +1,233 @@
-/* Copyright (c) 2009, Canonical Ltd. All rights reserved. */
-
-YUI().use('lp.testing.runner', 'test', 'console', 'node', 'event',
- 'node-event-simulate', 'event-valuechange', 'plugin',
- 'lp.app.formwidgets.resizing_textarea', function(Y) {
-
-
-var test_text = ["Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
- "Maecenas ut viverra nibh. Morbi sit amet tellus accumsan justo rutrum",
- "blandit sit amet ac augue. Pellentesque eget diam at purus suscipit",
- "venenatis. Proin non neque lacus. Curabitur venenatis tempus sem, vitae",
- "porttitor magna fringilla vel. Cras dignissim egestas lacus nec",
- "hendrerit. Proin pharetra, felis ac auctor dapibus, neque orci commodo ",
- "lorem, sit amet posuere erat quam euismod arcu. Nulla pharetra augue at",
- "enim tempus faucibus. Sed dictum tristique nisl sed rhoncus. Etiam ",
- "tristique nisl eget risus blandit iaculis. Lorem ipsum dolor sit amet,",
- "consectetur adipiscing elit."].join("");
-
-/**
- * Helper function to turn the string from getComputedStyle to int.
- *
- */
-function clean_size(val) {
- return parseInt(val.replace('px', ''), 10);
-}
-
-/**
- * Helper to extract the computed height of the element.
- *
- */
-function get_height(target) {
- return clean_size(target.getComputedStyle('height'));
-}
-
-/**
- * In order to update the content we need to change the text, but also to fire
- * the event that the content has changed since we're modifying it
- * programatically.
- *
- */
-function update_content(target, val) {
- target.set('value', val);
-
- // Instead of hitting the changed event directly, we'll just manually call
- // into the hook for the event itself.
- target.resizing_textarea._run_change(val);
-}
-
-var suite = new Y.Test.Suite("Resizing Textarea Tests");
-
-suite.add(new Y.Test.Case({
-
- name: 'resizing_textarea',
-
- test_initial_resizable: function() {
- var target = Y.one('#init');
-
- Y.Assert.areEqual('Initial text', target.get('value'));
-
- target.plug(Y.lp.app.formwidgets.ResizingTextarea, {
- skip_animations: true
- });
-
- // Get the current sizes so we can pump text into it and make sure it
- // grows.
- var orig_height = get_height(target);
- update_content(target, test_text);
-
- var new_height = get_height(target);
- Y.Assert.isTrue(new_height > orig_height,
- "The height should increase with content");
-
- },
-
- test_max_height: function() {
- var target = Y.one('#with_defaults');
-
- target.plug(Y.lp.app.formwidgets.ResizingTextarea, {
- skip_animations: true,
- max_height: 200,
- min_height: 100
- });
-
- var min_height = get_height(target);
- Y.Assert.areSame(100, min_height,
- "The height should be no smaller than 100px");
-
- update_content(target, test_text);
-
- var new_height = get_height(target);
- Y.Assert.areSame(200, new_height,
- "The height should only get to 200px");
- },
-
- test_removing_content: function() {
- var target = Y.one('#shrinkage');
-
- target.plug(Y.lp.app.formwidgets.ResizingTextarea, {
- skip_animations: true,
- min_height: 100
- });
-
- update_content(target, test_text);
- var max_height = get_height(target);
- Y.Assert.isTrue(max_height > 100,
- "The height should be larger than our min with content");
-
- update_content(target, "shrink");
-
- var min_height = get_height(target);
- Y.Assert.areSame(100, min_height,
- "The height should shrink back to our min");
- },
-
- test_multiple: function() {
- var target = Y.all('.test_multiple');
-
- target.plug(Y.lp.app.formwidgets.ResizingTextarea, {
- skip_animations: true,
- min_height: 100
- });
-
- target.each(function(node) {
- var min_height = get_height(node);
- Y.Assert.areSame(100, min_height,
- "The height of the node should be 100");
- });
-
- // Now set the content in the first one and check it's unique.
- update_content(Y.one('.first'), test_text);
-
- var first = Y.one('.first');
- var second = Y.one('.second');
-
- var first_height = get_height(first);
- Y.Assert.isTrue(first_height > 100,
- "The height of the first should now be > 100");
-
- var second_height = get_height(second);
- Y.Assert.areSame(100, second_height,
- "The height of the second should still be 100");
- },
-
- test_css_height_preset: function() {
- var target = Y.one('#css_height');
-
- target.plug(Y.lp.app.formwidgets.ResizingTextarea, {
- skip_animations: true
- });
-
- var current_height = get_height(target);
- Y.Assert.areSame(120, current_height,
- "The height should match the css property at 120px");
- },
-
- test_initial_min_height_after_hidden: function() {
- // If we pass in a min height, the text area should resize on init to
- // that min height.
- var target = Y.one('#config_height');
- target.plug(Y.lp.app.formwidgets.ResizingTextarea, {
- skip_animations: true,
- min_height: 300
- });
-
- target.show();
- var current_height = get_height(target);
- Y.Assert.areSame(300, current_height,
- "The height should start out at 300px per the min_height config");
- },
-
- test_height_stays_consistant: function () {
- // Once we adjust the height, another keystroke shouldn't move the
- // height on us again, see bug #919299.
- var target = Y.one('#no_change');
- target.plug(Y.lp.app.formwidgets.ResizingTextarea, {
- skip_animations: true,
- max_height: 200,
- min_height: 100
- });
-
- update_content(target, test_text);
- var new_height = get_height(target);
- Y.Assert.areSame(200, new_height,
- "The height should hit max at 200px");
-
- update_content(target, test_text + "3");
- var adjusted_height = get_height(target);
- Y.Assert.areSame(200, adjusted_height,
- "The height should still be at 200px");
-
- update_content(target, test_text + "34");
- var adjusted_height2 = get_height(target);
- Y.Assert.areSame(200, adjusted_height2,
- "The height should still be at 200px");
- },
-
- test_oneline_should_size_to_single_em: function() {
- // Passing a one line in the cfg should limit the height to 1em even
- // though a normal textarea would be two lines tall.
- var sample_height = get_height(Y.one('#one_line_sample')),
- target = Y.one('#one_line');
-
- target.plug(Y.lp.app.formwidgets.ResizingTextarea, {
- skip_animations: true,
- single_line: true
- });
-
- var initial_height = get_height(target);
- Y.Assert.areSame(sample_height, initial_height,
- "The initial height should be 1em");
-
- // After adding a bunch of text and removing it, we should be back at
- // one em height.
- update_content(target, test_text);
- Y.Assert.isTrue(get_height(target) > initial_height,
- 'Verify that we did change the height');
-
- update_content(target, "");
- Y.Assert.areSame(sample_height, get_height(target),
- "The updated final height should be 1em");
- }
-}));
-
-var yconsole = new Y.Console({
- newestOnTop: false
-});
-yconsole.render('#log');
-
-Y.on('load', function(e) {
- Y.lp.testing.Runner.run(suite);
-});
-
-});
+/* Copyright (c) 2012, Canonical Ltd. All rights reserved. */
+
+YUI.add('lp.resizing_textarea.test', function (Y) {
+
+ var tests = Y.namespace('lp.resizing_textarea.test');
+ tests.suite = new Y.Test.Suite('resizing_textarea Tests');
+
+ var test_text = ["Lorem ipsum dolor sit amet, consectetur adipiscing.",
+ "Maecenas ut viverra nibh. Morbi sit amet tellus accumsan justo ",
+ "blandit sit amet ac augue. Pellentesque eget diam at purus suscipit",
+ "venenatis. Proin non neque lacus. Curabitur venenatis tempus sem, ",
+ "porttitor magna fringilla vel. Cras dignissim egestas lacus nec",
+ "hendrerit. Proin pharetra, felis ac auctor dapibus, neque orci ",
+ "lorem, sit amet posuere erat quam euismod arcu. Nulla pharetra ",
+ "enim tempus faucibus. Sed dictum tristique nisl sed rhoncus. Etiam ",
+ "tristique nisl eget risus blandit iaculis. Lorem ipsum dolor sit ,",
+ "consectetur adipiscing elit."].join("");
+
+ /**
+ * Helper function to turn the string from getComputedStyle to int.
+ *
+ */
+ function clean_size(val) {
+ return parseInt(val.replace('px', ''), 10);
+ }
+
+ /**
+ * Helper to extract the computed height of the element.
+ *
+ */
+ function get_height(target) {
+ return clean_size(target.getComputedStyle('height'));
+ }
+
+ /**
+ * In order to update the content we need to change the text, but also to
+ * fire the event that the content has changed since we're modifying it
+ * programatically.
+ *
+ */
+ function update_content(target, val) {
+ target.set('value', val);
+
+ // Instead of hitting the changed event directly, we'll just manually
+ // call into the hook for the event itself.
+ target.resizing_textarea._run_change(val);
+ }
+
+ tests.suite.add(new Y.Test.Case({
+ name: 'resizing_textarea_tests',
+
+ setUp: function () {},
+ tearDown: function () {},
+
+ test_library_exists: function () {
+ Y.Assert.isObject(Y.lp.app.formwidgets.ResizingTextarea,
+ "We should be able to locate the " +
+ "lp.app.formwidgets.ResizingTextarea module");
+ },
+
+ test_initial_resizable: function() {
+ var target = Y.one('#init');
+
+ Y.Assert.areEqual('Initial text', target.get('value'));
+
+ target.plug(Y.lp.app.formwidgets.ResizingTextarea, {
+ skip_animations: true
+ });
+
+ // Get the current sizes so we can pump text into it and make sure
+ // it grows.
+ var orig_height = get_height(target);
+ update_content(target, test_text);
+
+ var new_height = get_height(target);
+ Y.Assert.isTrue(new_height > orig_height,
+ "The height should increase with content");
+
+ },
+
+ test_max_height: function() {
+ var target = Y.one('#with_defaults');
+
+ target.plug(Y.lp.app.formwidgets.ResizingTextarea, {
+ skip_animations: true,
+ max_height: 200,
+ min_height: 100
+ });
+
+ var min_height = get_height(target);
+ Y.Assert.areSame(100, min_height,
+ "The height should be no smaller than 100px");
+
+ update_content(target, test_text);
+
+ var new_height = get_height(target);
+ Y.Assert.areSame(200, new_height,
+ "The height should only get to 200px");
+ },
+
+ test_removing_content: function() {
+ var target = Y.one('#shrinkage');
+
+ target.plug(Y.lp.app.formwidgets.ResizingTextarea, {
+ skip_animations: true,
+ min_height: 100
+ });
+
+ update_content(target, test_text);
+ var max_height = get_height(target);
+ Y.Assert.isTrue(max_height > 100,
+ "The height should be larger than our min with content");
+
+ update_content(target, "shrink");
+
+ var min_height = get_height(target);
+ Y.Assert.areSame(100, min_height,
+ "The height should shrink back to our min");
+ },
+
+ test_multiple: function() {
+ var target = Y.all('.test_multiple');
+
+ target.plug(Y.lp.app.formwidgets.ResizingTextarea, {
+ skip_animations: true,
+ min_height: 100
+ });
+
+ target.each(function(node) {
+ var min_height = get_height(node);
+ Y.Assert.areSame(100, min_height,
+ "The height of the node should be 100");
+ });
+
+ // Now set the content in the first one and check it's unique.
+ update_content(Y.one('.first'), test_text);
+
+ var first = Y.one('.first');
+ var second = Y.one('.second');
+
+ var first_height = get_height(first);
+ Y.Assert.isTrue(first_height > 100,
+ "The height of the first should now be > 100");
+
+ var second_height = get_height(second);
+ Y.Assert.areSame(100, second_height,
+ "The height of the second should still be 100");
+ },
+
+ test_css_height_preset: function() {
+ var target = Y.one('#css_height');
+
+ target.plug(Y.lp.app.formwidgets.ResizingTextarea, {
+ skip_animations: true
+ });
+
+ var current_height = get_height(target);
+ Y.Assert.areSame(120, current_height,
+ "The height should match the css property at 120px");
+ },
+
+ test_initial_min_height_after_hidden: function() {
+ // If we pass in a min height, the text area should resize on init
+ // to that min height.
+ var target = Y.one('#config_height');
+ target.plug(Y.lp.app.formwidgets.ResizingTextarea, {
+ skip_animations: true,
+ min_height: 300
+ });
+
+ target.show();
+ var current_height = get_height(target);
+ Y.Assert.areSame(300, current_height,
+ "The height should start out at 300px per the min_height cfg");
+ },
+
+ test_height_stays_consistant: function () {
+ // Once we adjust the height, another keystroke shouldn't move the
+ // height on us again, see bug #919299.
+ var target = Y.one('#no_change');
+ target.plug(Y.lp.app.formwidgets.ResizingTextarea, {
+ skip_animations: true,
+ max_height: 200,
+ min_height: 100
+ });
+
+ update_content(target, test_text);
+ var new_height = get_height(target);
+ Y.Assert.areSame(200, new_height,
+ "The height should hit max at 200px");
+
+ update_content(target, test_text + "3");
+ var adjusted_height = get_height(target);
+ Y.Assert.areSame(200, adjusted_height,
+ "The height should still be at 200px");
+
+ update_content(target, test_text + "34");
+ var adjusted_height2 = get_height(target);
+ Y.Assert.areSame(200, adjusted_height2,
+ "The height should still be at 200px");
+ },
+
+ test_oneline_should_size_to_single_em: function() {
+ // Passing a one line in the cfg should limit the height to 1em even
+ // though a normal textarea would be two lines tall.
+ var sample_height = get_height(Y.one('#one_line_sample')),
+ target = Y.one('#one_line');
+
+ target.plug(Y.lp.app.formwidgets.ResizingTextarea, {
+ skip_animations: true,
+ single_line: true
+ });
+
+ var initial_height = get_height(target);
+ Y.Assert.areSame(sample_height, initial_height,
+ "The initial height should be 1em");
+
+ // After adding a bunch of text and removing it, we should be back
+ // at one em height.
+ update_content(target, test_text);
+ Y.Assert.isTrue(get_height(target) > initial_height,
+ 'Verify that we did change the height');
+
+ update_content(target, "");
+ Y.Assert.areSame(sample_height, get_height(target),
+ "The updated final height should be 1em");
+ }
+
+ }));
+
+}, '0.1', {'requires': ['test', 'console', 'plugin', 'event-valuechange',
+ 'node-event-simulate', 'event', 'node',
+ 'lp.app.formwidgets.resizing_textarea']});
=== modified file 'lib/lp/app/javascript/indicator/tests/test_indicator.html'
--- lib/lp/app/javascript/indicator/tests/test_indicator.html 2012-02-10 13:58:58 +0000
+++ lib/lp/app/javascript/indicator/tests/test_indicator.html 2012-02-10 13:59:01 +0000
@@ -31,7 +31,7 @@
<!-- The module under test. -->
<script type="text/javascript" src="../indicator.js"></script>
- <!-- Any css assert for this module. -->
+ <!-- Placeholder for any css asset for this module. -->
<link rel="stylesheet" href="../assets/indicator-core.css" />
<!-- The test suite. -->
=== modified file 'lib/lp/app/javascript/indicator/tests/test_indicator.js'
--- lib/lp/app/javascript/indicator/tests/test_indicator.js 2012-02-10 13:58:58 +0000
+++ lib/lp/app/javascript/indicator/tests/test_indicator.js 2012-02-10 13:59:01 +0000
@@ -1,220 +1,219 @@
/* Copyright (c) 2011, Canonical Ltd. All rights reserved. */
YUI.add('lp.indicator.test', function (Y) {
-
-var tests = Y.namespace('lp.indicator.test');
-tests.suite = new Y.Test.Suite('Indicator Tests');
-var Assert = Y.Assert;
-
-// add the suite to the NS for the testrunner.js to find
-tests.suite.add(new Y.Test.Case({
-
- name: 'indicator_tests',
-
- setUp: function () {
- this.div = Y.Node.create('<div/>');
- // Generate an id so we can keep these around as we work.
- this.div.generateID();
- // We want to store this for the testing of the target, after that we
- // can just use this.div.
- this.div_id = this.div.get('id');
- Y.one('body').appendChild(this.div);
- },
-
- tearDown: function () {
- // Delete the reference to this.div so we can recreate new ones for
- // each test without worry.
- this.div.remove();
- delete this.div;
- if (Y.Lang.isValue(this.indicator)) {
- this.indicator.destroy();
+ var tests = Y.namespace('lp.indicator.test');
+ tests.suite = new Y.Test.Suite('Indicator Tests');
+ var Assert = Y.Assert;
+
+ // add the suite to the NS for the testrunner.js to find
+ tests.suite.add(new Y.Test.Case({
+
+ name: 'indicator_tests',
+
+ setUp: function () {
+ this.div = Y.Node.create('<div/>');
+ // Generate an id so we can keep these around as we work.
+ this.div.generateID();
+ // We want to store this for the testing of the target, after that
+ // we can just use this.div.
+ this.div_id = this.div.get('id');
+ Y.one('body').appendChild(this.div);
+ },
+
+ tearDown: function () {
+ // Delete the reference to this.div so we can recreate new ones for
+ // each test without worry.
+ this.div.remove();
+ delete this.div;
+ if (Y.Lang.isValue(this.indicator)) {
+ this.indicator.destroy();
+ }
+ },
+
+ test_target_attribute: function () {
+ // Constrain attribute should be set from passing in target.
+ var test_node = Y.one('#' + this.div_id);
+ this.indicator = new Y.lp.app.indicator.OverlayIndicator({
+ target: test_node
+ });
+ this.indicator.render();
+ Assert.areEqual(test_node, this.indicator.get('target'));
+ },
+
+ test_indicator_appended_to_parent: function() {
+ // Indicator node is appended to target's parent, rather
+ // than target or body.
+ var child_div = Y.Node.create('<div/>');
+ // We need to create some nesting to really ensure
+ // the test is good.
+ this.div.appendChild(child_div);
+ this.indicator = new Y.lp.app.indicator.OverlayIndicator({
+ target: child_div
+ });
+ this.indicator.render();
+ // this.div is actually the parentNode now.
+ Assert.areEqual(
+ this.div,
+ this.indicator.get('boundingBox').get('parentNode'));
+ },
+
+ test_indicator_has_loading_icon: function () {
+ // The indicator should have a loading image added
+ // to the contentBox.
+ this.indicator = new Y.lp.app.indicator.OverlayIndicator({
+ target: this.div
+ });
+ this.indicator.render();
+ var content = this.indicator.get('boundingBox');
+ var test = content.getContent();
+ var img = content.one('img');
+ Assert.areEqual('file:///@@/spinner-big', img.get('src'));
+ },
+
+ test_indiciator_starts_invisible: function () {
+ // Indicator widgets should start hidden.
+ this.indicator = new Y.lp.app.indicator.OverlayIndicator({
+ target: this.div
+ });
+ this.indicator.render();
+ Assert.isFalse(this.indicator.get('visible'));
+ Assert.isTrue(this.indicator.get('boundingBox').hasClass(
+ 'yui3-overlay-indicator-hidden'));
+ },
+
+ test_set_busy_shows_overlay: function() {
+ // setBusy should show the overlay.
+ this.indicator = new Y.lp.app.indicator.OverlayIndicator({
+ target: this.div
+ });
+ this.indicator.render();
+ this.indicator.setBusy();
+ Assert.isTrue(this.indicator.get('visible'));
+ Assert.isFalse(this.indicator.get('boundingBox').hasClass(
+ 'yui3-overlay-indicator-hidden'));
+ },
+
+ test_size_matches_on_set_busy: function() {
+ // Indicator should always resize when target changes size.
+ this.indicator = new Y.lp.app.indicator.OverlayIndicator({
+ target: this.div
+ });
+ this.indicator.render();
+ // Mess with the size of target div.
+ var expected_width = 800;
+ var expected_height = 600;
+ this.div.set('offsetWidth', expected_width);
+ this.div.set('offsetHeight', expected_height);
+ Assert.areNotEqual(
+ expected_width,
+ this.indicator.get('boundingBox').get('offsetWidth'));
+ Assert.areNotEqual(
+ expected_height,
+ this.indicator.get('boundingBox').get('offsetHeight'));
+ this.indicator.setBusy();
+ Assert.areEqual(
+ expected_width,
+ this.indicator.get('boundingBox').get('offsetWidth'));
+ Assert.areEqual(
+ expected_height,
+ this.indicator.get('boundingBox').get('offsetHeight'));
+ },
+
+ test_position_matches_on_set_busy: function() {
+ // Indicator should always reposition itself before setBusy.
+ this.indicator = new Y.lp.app.indicator.OverlayIndicator({
+ target: this.div
+ });
+ this.indicator.render();
+ // Change the position of target div.
+ var expected_xy = [100, 300];
+ this.div.setXY(expected_xy);
+ var actual_xy = this.indicator.get('boundingBox').getXY();
+ Assert.areNotEqual(expected_xy[0], actual_xy[0]);
+ Assert.areNotEqual(expected_xy[1], actual_xy[1]);
+ this.indicator.setBusy();
+ var final_xy = this.indicator.get('boundingBox').getXY();
+ Assert.areEqual(expected_xy[0], final_xy[0]);
+ Assert.areEqual(expected_xy[1], final_xy[1]);
+
+ },
+
+ test_success_hides_overlay: function() {
+ // Calling success should hide the overlay.
+ this.indicator = new Y.lp.app.indicator.OverlayIndicator({
+ target: this.div
+ });
+ this.indicator.render();
+ this.indicator.setBusy();
+ this.indicator.success();
+ Assert.isFalse(this.indicator.get('visible'));
+ Assert.isTrue(this.indicator.get('boundingBox').hasClass(
+ 'yui3-overlay-indicator-hidden'));
+ },
+
+ test_success_callback: function() {
+ // We should be able to pass in a callback as success_action.
+ var called = false;
+ var callback = function() {
+ called = true;
+ };
+ this.indicator = new Y.lp.app.indicator.OverlayIndicator({
+ target: this.div,
+ success_action: callback
+ });
+ this.indicator.render();
+ this.indicator.success();
+ Assert.isTrue(called);
+ },
+
+ test_focus_target_scrolls_success: function () {
+ // Provided function scroll_to_target should scroll to target.
+ var viewport = Y.DOM.viewportRegion();
+ this.div.set('offsetWidth', viewport.right + 1000);
+ this.div.set('offsetHeight', viewport.bottom + 1000);
+ this.indicator = new Y.lp.app.indicator.OverlayIndicator({
+ target: this.div,
+ success_action: Y.lp.app.indicator.actions.scroll_to_target
+ });
+ this.indicator.render();
+ window.scrollTo(1000, 1000);
+ Assert.areEqual(1000, Y.DOM.docScrollX());
+ Assert.areEqual(1000, Y.DOM.docScrollY());
+ this.indicator.setBusy();
+ this.indicator.success();
+ var expected_xy = this.indicator.get('target').getXY();
+ Assert.areEqual(expected_xy[0], Y.DOM.docScrollX());
+ Assert.areEqual(expected_xy[1], Y.DOM.docScrollY());
+ },
+
+ test_error_hides_overlay: function () {
+ // Calling error should hide the overlay.
+ this.indicator = new Y.lp.app.indicator.OverlayIndicator({
+ target: this.div
+ });
+ this.indicator.render();
+ this.indicator.setBusy();
+ this.indicator.error();
+ Assert.isFalse(this.indicator.get('visible'));
+ Assert.isTrue(this.indicator.get('boundingBox').hasClass(
+ 'yui3-overlay-indicator-hidden'));
+ },
+
+ test_error_callback: function() {
+ // We should be able to pass in a callback as error_action.
+ var called = false;
+ var callback = function() {
+ called = true;
+ };
+ this.indicator = new Y.lp.app.indicator.OverlayIndicator({
+ target: this.div,
+ error_action: callback
+ });
+ this.indicator.render();
+ this.indicator.error();
+ Assert.isTrue(called);
}
- },
-
- test_target_attribute: function () {
- // Constrain attribute should be set from passing in target.
- var test_node = Y.one('#' + this.div_id);
- this.indicator = new Y.lp.app.indicator.OverlayIndicator({
- target: test_node
- });
- this.indicator.render();
- Assert.areEqual(test_node, this.indicator.get('target'));
- },
-
- test_indicator_appended_to_parent: function() {
- // Indicator node is appended to target's parent, rather
- // than target or body.
- var child_div = Y.Node.create('<div/>');
- // We need to create some nesting to really ensure
- // the test is good.
- this.div.appendChild(child_div);
- this.indicator = new Y.lp.app.indicator.OverlayIndicator({
- target: child_div
- });
- this.indicator.render();
- // this.div is actually the parentNode now.
- Assert.areEqual(
- this.div,
- this.indicator.get('boundingBox').get('parentNode'));
- },
-
- test_indicator_has_loading_icon: function () {
- // The indicator should have a loading image added
- // to the contentBox.
- this.indicator = new Y.lp.app.indicator.OverlayIndicator({
- target: this.div
- });
- this.indicator.render();
- var content = this.indicator.get('boundingBox');
- var test = content.getContent();
- var img = content.one('img');
- Assert.areEqual('file:///@@/spinner-big', img.get('src'));
- },
-
- test_indiciator_starts_invisible: function () {
- // Indicator widgets should start hidden.
- this.indicator = new Y.lp.app.indicator.OverlayIndicator({
- target: this.div
- });
- this.indicator.render();
- Assert.isFalse(this.indicator.get('visible'));
- Assert.isTrue(this.indicator.get('boundingBox').hasClass(
- 'yui3-overlay-indicator-hidden'));
- },
-
- test_set_busy_shows_overlay: function() {
- // setBusy should show the overlay.
- this.indicator = new Y.lp.app.indicator.OverlayIndicator({
- target: this.div
- });
- this.indicator.render();
- this.indicator.setBusy();
- Assert.isTrue(this.indicator.get('visible'));
- Assert.isFalse(this.indicator.get('boundingBox').hasClass(
- 'yui3-overlay-indicator-hidden'));
- },
-
- test_size_matches_on_set_busy: function() {
- // Indicator should always resize when target changes size.
- this.indicator = new Y.lp.app.indicator.OverlayIndicator({
- target: this.div
- });
- this.indicator.render();
- // Mess with the size of target div.
- var expected_width = 800;
- var expected_height = 600;
- this.div.set('offsetWidth', expected_width);
- this.div.set('offsetHeight', expected_height);
- Assert.areNotEqual(
- expected_width,
- this.indicator.get('boundingBox').get('offsetWidth'));
- Assert.areNotEqual(
- expected_height,
- this.indicator.get('boundingBox').get('offsetHeight'));
- this.indicator.setBusy();
- Assert.areEqual(
- expected_width,
- this.indicator.get('boundingBox').get('offsetWidth'));
- Assert.areEqual(
- expected_height,
- this.indicator.get('boundingBox').get('offsetHeight'));
- },
-
- test_position_matches_on_set_busy: function() {
- // Indicator should always reposition itself before setBusy.
- this.indicator = new Y.lp.app.indicator.OverlayIndicator({
- target: this.div
- });
- this.indicator.render();
- // Change the position of target div.
- var expected_xy = [100, 300];
- this.div.setXY(expected_xy);
- var actual_xy = this.indicator.get('boundingBox').getXY();
- Assert.areNotEqual(expected_xy[0], actual_xy[0]);
- Assert.areNotEqual(expected_xy[1], actual_xy[1]);
- this.indicator.setBusy();
- var final_xy = this.indicator.get('boundingBox').getXY();
- Assert.areEqual(expected_xy[0], final_xy[0]);
- Assert.areEqual(expected_xy[1], final_xy[1]);
-
- },
-
- test_success_hides_overlay: function() {
- // Calling success should hide the overlay.
- this.indicator = new Y.lp.app.indicator.OverlayIndicator({
- target: this.div
- });
- this.indicator.render();
- this.indicator.setBusy();
- this.indicator.success();
- Assert.isFalse(this.indicator.get('visible'));
- Assert.isTrue(this.indicator.get('boundingBox').hasClass(
- 'yui3-overlay-indicator-hidden'));
- },
-
- test_success_callback: function() {
- // We should be able to pass in a callback as success_action.
- var called = false;
- var callback = function() {
- called = true;
- };
- this.indicator = new Y.lp.app.indicator.OverlayIndicator({
- target: this.div,
- success_action: callback
- });
- this.indicator.render();
- this.indicator.success();
- Assert.isTrue(called);
- },
-
- test_focus_target_scrolls_success: function () {
- // Provided function scroll_to_target should scroll to target.
- var viewport = Y.DOM.viewportRegion();
- this.div.set('offsetWidth', viewport.right + 1000);
- this.div.set('offsetHeight', viewport.bottom + 1000);
- this.indicator = new Y.lp.app.indicator.OverlayIndicator({
- target: this.div,
- success_action: Y.lp.app.indicator.actions.scroll_to_target
- });
- this.indicator.render();
- window.scrollTo(1000, 1000);
- Assert.areEqual(1000, Y.DOM.docScrollX());
- Assert.areEqual(1000, Y.DOM.docScrollY());
- this.indicator.setBusy();
- this.indicator.success();
- var expected_xy = this.indicator.get('target').getXY();
- Assert.areEqual(expected_xy[0], Y.DOM.docScrollX());
- Assert.areEqual(expected_xy[1], Y.DOM.docScrollY());
- },
-
- test_error_hides_overlay: function () {
- // Calling error should hide the overlay.
- this.indicator = new Y.lp.app.indicator.OverlayIndicator({
- target: this.div
- });
- this.indicator.render();
- this.indicator.setBusy();
- this.indicator.error();
- Assert.isFalse(this.indicator.get('visible'));
- Assert.isTrue(this.indicator.get('boundingBox').hasClass(
- 'yui3-overlay-indicator-hidden'));
- },
-
- test_error_callback: function() {
- // We should be able to pass in a callback as error_action.
- var called = false;
- var callback = function() {
- called = true;
- };
- this.indicator = new Y.lp.app.indicator.OverlayIndicator({
- target: this.div,
- error_action: callback
- });
- this.indicator.render();
- this.indicator.error();
- Assert.isTrue(called);
- }
-}));
+ }));
}, '0.1', {'requires': ['test', 'lp.app.indicator']});
