aboutsummaryrefslogtreecommitdiffstats
path: root/tests/unit
diff options
context:
space:
mode:
Diffstat (limited to 'tests/unit')
-rw-r--r--tests/unit/button/button.html47
-rw-r--r--tests/unit/button/common-deprecated.js27
-rw-r--r--tests/unit/button/common.js12
-rw-r--r--tests/unit/button/core.js220
-rw-r--r--tests/unit/button/deprecated.html60
-rw-r--r--tests/unit/button/deprecated.js196
-rw-r--r--tests/unit/button/events.js30
-rw-r--r--tests/unit/button/methods.js51
-rw-r--r--tests/unit/button/options.js222
9 files changed, 436 insertions, 429 deletions
diff --git a/tests/unit/button/button.html b/tests/unit/button/button.html
index 7ba400645..09b5a4c23 100644
--- a/tests/unit/button/button.html
+++ b/tests/unit/button/button.html
@@ -6,54 +6,23 @@
<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js" data-modules="core button"></script>
- <script src="../../lib/bootstrap.js" data-widget="button"></script>
+ <script src="../../lib/bootstrap.js" data-widget="button" data-no-back-compat="true"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
+<form id="form1">
+ <div><button id="button">Label</button></div>
-<div><button id="button" class="foo">Label</button></div>
-
-<div id="radio0" style="margin-top: 2em;">
- <input type="radio" id="radio01" name="radio" checked="checked"><label for="radio01">Choice 1</label>
- <input type="radio" id="radio02" name="radio"><label for="radio02">Choice 2</label>
- <input type="radio" id="radio03" name="radio"><label for="radio03">Choice 3</label>
-</div>
-<div id="checkbox0">
- <input type="checkbox" id="checkbox01" name="checkbox"><label for="checkbox01">Choice 1</label>
- <input type="checkbox" id="checkbox02" name="checkbox"><label for="checkbox02">Choice 2</label>
- <input type="checkbox" id="checkbox03" name="checkbox"><label for="checkbox03">Choice 3</label>
-</div>
-<form>
- <div id="radio1" style="margin-top: 2em;">
- <input type="radio" id="radio11" name="radio"><label for="radio11">Choice 1</label>
- <input type="radio" id="radio12" name="radio" checked="checked"><label for="radio12">Choice 2</label>
- <input type="radio" id="radio13" name="radio"><label for="radio13">Choice 3</label>
- </div>
-</form>
-<form>
- <div id="radio2" style="margin-top: 2em;">
- <input type="radio" id="radio21" name="radio"><label for="radio21">Choice 1</label>
- <input type="radio" id="radio22" name="radio"><label for="radio22">Choice 2</label>
- <input type="radio" id="radio23" name="radio" checked="checked"><label for="radio23">Choice 3</label>
- </div>
+ <div><input id="submit" type="submit" value="Label"></div>
</form>
-<form>
- <div id="radio3">
- <input type="radio" id="radio31" name="data['Page']['parse']"><label for="radio31">Choice 1</label>
- <input type="radio" id="radio32" name="data['Page']['parse']" checked="checked"><label for="radio32">Choice 2</label>
- <input type="radio" id="radio33" name="data['Page']['parse']"><label for="radio33">Choice 3</label>
- </div>
-</form>
-
-<input type="checkbox" id="check"><label for="check">Toggle</label>
-<input type="checkbox" id="check2"><label for="check2">Checkbox</label>
-<div><input id="submit" type="submit" value="Label"></div>
-
-<button id="button1">Button</button>
+<form id="form2">
+ <button id="button-disabled" disabled>Button</button>
+ <a href="#" id="anchor-button">Anchor Button</a>
+</form>
</div>
</body>
</html>
diff --git a/tests/unit/button/common-deprecated.js b/tests/unit/button/common-deprecated.js
new file mode 100644
index 000000000..1441d3a8a
--- /dev/null
+++ b/tests/unit/button/common-deprecated.js
@@ -0,0 +1,27 @@
+define( [
+ "lib/common",
+ "ui/button"
+], function( common ) {
+
+common.testWidget( "button", {
+ defaults: {
+ classes: {
+ "ui-button": "ui-corner-all"
+ },
+ disabled: null,
+ icon: null,
+ iconPosition: "beginning",
+ icons: {
+ primary: null,
+ secondary: null
+ },
+ label: null,
+ showLabel: true,
+ text: true,
+
+ // Callbacks
+ create: null
+ }
+} );
+
+} );
diff --git a/tests/unit/button/common.js b/tests/unit/button/common.js
index 4ef136fac..91ce1cff9 100644
--- a/tests/unit/button/common.js
+++ b/tests/unit/button/common.js
@@ -5,14 +5,14 @@ define( [
common.testWidget( "button", {
defaults: {
- classes: {},
- disabled: null,
- icons: {
- primary: null,
- secondary: null
+ classes: {
+ "ui-button": "ui-corner-all"
},
+ disabled: null,
+ icon: null,
+ iconPosition: "beginning",
label: null,
- text: true,
+ showLabel: true,
// Callbacks
create: null
diff --git a/tests/unit/button/core.js b/tests/unit/button/core.js
index f4e5d35a7..a7c164a33 100644
--- a/tests/unit/button/core.js
+++ b/tests/unit/button/core.js
@@ -3,227 +3,19 @@ define( [
"ui/widgets/button"
], function( $ ) {
-module( "button: core" );
+module( "Button: core" );
-test( "checkbox", function( assert ) {
- expect( 4 );
- var input = $( "#check" ),
- label = $( "label[for=check]" );
- ok( input.is( ":visible" ) );
- ok( label.is( ":not(.ui-button)" ) );
- input.button();
- assert.hasClasses( input, "ui-helper-hidden-accessible" );
- assert.hasClasses( label, "ui-button" );
-} );
-
-test( "radios", function( assert ) {
- expect( 8 );
- var inputs = $( "#radio0 input" ),
- labels = $( "#radio0 label" );
- ok( inputs.is( ":visible" ) );
- ok( labels.is( ":not(.ui-button)" ) );
- inputs.button();
- inputs.each( function() {
- assert.hasClasses( this, "ui-helper-hidden-accessible" );
- } );
- labels.each( function() {
- assert.hasClasses( this, "ui-button" );
- } );
-} );
-
-test( "radio groups", function( assert ) {
- expect( 12 );
-
- function assertClasses( noForm, form1, form2 ) {
- assert.hasClasses( $( "#radio0 .ui-button" + noForm ), "ui-state-active" );
- assert.hasClasses( $( "#radio1 .ui-button" + form1 ), "ui-state-active" );
- assert.hasClasses( $( "#radio2 .ui-button" + form2 ), "ui-state-active" );
- }
-
- $( "input[type=radio]" ).button();
- assertClasses( ":eq(0)", ":eq(1)", ":eq(2)" );
-
- // Click outside of forms
- $( "#radio0 .ui-button:eq(1)" ).trigger( "click" );
- assertClasses( ":eq(1)", ":eq(1)", ":eq(2)" );
-
- // Click in first form
- $( "#radio1 .ui-button:eq(0)" ).trigger( "click" );
- assertClasses( ":eq(1)", ":eq(0)", ":eq(2)" );
-
- // Click in second form
- $( "#radio2 .ui-button:eq(0)" ).trigger( "click" );
- assertClasses( ":eq(1)", ":eq(0)", ":eq(0)" );
-} );
-
-test( "radio groups - ignore elements with same name", function() {
- expect( 1 );
- var form = $( "form:first" ),
- radios = form.find( "[type=radio]" ).button(),
- checkbox = $( "<input>", {
- type: "checkbox",
- name: radios.attr( "name" )
- } );
-
- form.append( checkbox );
- radios.button( "refresh" );
- ok( true, "no exception from accessing button instance of checkbox" );
-} );
-
-test( "input type submit, don't create child elements", function() {
+asyncTest( "Disabled button loses focus", function() {
expect( 2 );
- var input = $( "#submit" );
- deepEqual( input.children().length, 0 );
- input.button();
- deepEqual( input.children().length, 0 );
-} );
-
-test( "buttonset", function( assert ) {
- expect( 6 );
- var set = $( "#radio1" ).buttonset();
- assert.hasClasses( set, "ui-buttonset" );
- deepEqual( set.children( ".ui-button" ).length, 3 );
- deepEqual( set.children( "input[type=radio].ui-helper-hidden-accessible" ).length, 3 );
- ok( set.children( "label:eq(0)" ).is( ".ui-button.ui-corner-left:not(.ui-corner-all)" ) );
- ok( set.children( "label:eq(1)" ).is( ".ui-button:not(.ui-corner-all)" ) );
- ok( set.children( "label:eq(2)" ).is( ".ui-button.ui-corner-right:not(.ui-corner-all)" ) );
-} );
-
-test( "buttonset (rtl)", function( assert ) {
- expect( 6 );
- var set,
- parent = $( "#radio1" ).parent();
-
- // Set to rtl
- parent.attr( "dir", "rtl" );
-
- set = $( "#radio1" ).buttonset();
- assert.hasClasses( set, "ui-buttonset" );
- deepEqual( set.children( ".ui-button" ).length, 3 );
- deepEqual( set.children( "input[type=radio].ui-helper-hidden-accessible" ).length, 3 );
- ok( set.children( "label:eq(0)" ).is( ".ui-button.ui-corner-right:not(.ui-corner-all)" ) );
- ok( set.children( "label:eq(1)" ).is( ".ui-button:not(.ui-corner-all)" ) );
- ok( set.children( "label:eq(2)" ).is( ".ui-button.ui-corner-left:not(.ui-corner-all)" ) );
-} );
-
-// TODO: simulated click events don't behave like real click events in IE
-// remove this when simulate properly simulates this
-// see http://yuilibrary.com/projects/yui2/ticket/2528826 fore more info
-if ( !$.ui.ie || ( document.documentMode && document.documentMode > 8 ) ) {
- asyncTest( "ensure checked and aria after single click on checkbox label button, see #5518", function( assert ) {
- expect( 3 );
-
- $( "#check2" ).button().on( "change", function() {
- var lbl = $( this ).button( "widget" );
- ok( this.checked, "checked ok" );
- ok( lbl.attr( "aria-pressed" ) === "true", "aria ok" );
- assert.hasClasses( lbl, "ui-state-active" );
- } );
-
- // Support: Opera
- // Opera doesn't trigger a change event when this is done synchronously.
- // This seems to be a side effect of another test, but until that can be
- // tracked down, this delay will have to do.
- setTimeout( function() {
- $( "#check2" ).button( "widget" ).simulate( "click" );
- start();
- }, 1 );
- } );
-}
-
-test( "#7092 - button creation that requires a matching label does not find label in all cases", function( assert ) {
- expect( 5 );
- var group = $( "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>" );
- group.find( "input[type=checkbox]" ).button();
- assert.hasClasses( group.find( "label" ), "ui-button" );
-
- group = $( "<input type='checkbox' id='t7092b'><label for='t7092b'></label>" );
- group.filter( "input[type=checkbox]" ).button();
- assert.hasClasses( group.filter( "label" ), "ui-button" );
-
- group = $( "<span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label>" );
- group.find( "input[type=checkbox]" ).button();
- assert.hasClasses( group.filter( "label" ), "ui-button" );
-
- group = $( "<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>" );
- group.find( "input[type=checkbox]" ).button();
- assert.hasClasses( group.find( "label" ), "ui-button" );
-
- group = $( "<input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>" );
- group.filter( "input[type=checkbox]" ).button();
- assert.hasClasses( group.find( "label" ), "ui-button" );
-} );
-
-test( "#5946 - buttonset should ignore buttons that are not :visible", function( assert ) {
- expect( 2 );
- $( "#radio01" ).next().addBack().hide();
- var set = $( "#radio0" ).buttonset( { items: "input[type=radio]:visible" } );
- ok( set.find( "label:eq(0)" ).is( ":not(.ui-button):not(.ui-corner-left)" ) );
- assert.hasClasses( set.find( "label:eq(1)" ), "ui-button ui-corner-left" );
-} );
-
-test( "#6262 - buttonset not applying ui-corner to invisible elements", function( assert ) {
- expect( 3 );
- $( "#radio0" ).hide();
- var set = $( "#radio0" ).buttonset();
- assert.hasClasses( set.find( "label:eq(0)" ), "ui-button ui-corner-left" );
- assert.hasClasses( set.find( "label:eq(1)" ), "ui-button" );
- assert.hasClasses( set.find( "label:eq(2)" ), "ui-button ui-corner-right" );
-
-} );
-
-asyncTest( "Resetting a button's form should refresh the visual state of the button widget to match.", function( assert ) {
- expect( 2 );
- var form = $( "<form>" +
- "<button></button>" +
- "<label for='c1'></label><input id='c1' type='checkbox' checked>" +
- "</form>" ),
- button = form.find( "button" ).button(),
- checkbox = form.find( "input[type=checkbox]" ).button();
-
- checkbox.prop( "checked", false ).button( "refresh" );
- assert.lacksClasses( checkbox.button( "widget" ), "ui-state-active" );
-
- form.get( 0 ).reset();
-
- // If a button has been removed, refresh should not be called on it when
- // its corresponding form is reset.
- button.remove();
+ var element = $( "#button" ).button();
+ element.focus();
setTimeout( function() {
- assert.hasClasses( checkbox.button( "widget" ), "ui-state-active" );
- start();
- }, 1 );
-} );
-asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function( assert ) {
- expect( 2 );
- var check = $( "#check" ).button(),
- label = $( "label[for='check']" );
- assert.lacksClasses( label, "ui-state-focus" );
- check.trigger( "focus" );
- setTimeout( function() {
- assert.hasClasses( label, "ui-state-focus" );
- start();
- } );
-} );
-
-test( "#7534 - Button label selector works for ids with \":\"", function( assert ) {
- expect( 1 );
- var group = $( "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>" );
- group.find( "input" ).button();
- assert.hasClasses( group.find( "label" ), "ui-button", "Found an id with a :" );
-} );
+ equal( element[ 0 ], $.ui.safeActiveElement( document ), "Button is focused" );
-asyncTest( "#9169 - Disabled button maintains ui-state-focus", function( assert ) {
- expect( 2 );
- var element = $( "#button1" ).button();
- element[ 0 ].focus();
- setTimeout( function() {
- assert.hasClasses( element, "ui-state-focus" );
element.button( "disable" );
- assert.lacksClasses( element, "ui-state-focus",
- "button does not have ui-state-focus when disabled" );
+ notEqual( element[ 0 ], $.ui.safeActiveElement( document ), "Button has had focus removed" );
start();
} );
} );
diff --git a/tests/unit/button/deprecated.html b/tests/unit/button/deprecated.html
new file mode 100644
index 000000000..788d2eeeb
--- /dev/null
+++ b/tests/unit/button/deprecated.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Button Deprecated Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../lib/css.js" data-modules="core button"></script>
+ <script src="../../lib/bootstrap.js" data-widget="button" data-deprecated="true"></script>
+</head>
+<body>
+
+<div id="qunit"></div>
+<div id="qunit-fixture">
+
+<div class="buttonset"><button id="button">Label</button><button>button 2</button></div>
+
+<div id="radio0" style="margin-top: 2em;">
+ <input type="radio" id="radio01" name="radio" checked="checked"><label for="radio01">Choice 1</label>
+ <input type="radio" id="radio02" name="radio"><label for="radio02">Choice 2</label>
+ <input type="radio" id="radio03" name="radio"><label for="radio03">Choice 3</label>
+</div>
+<div id="checkbox0">
+ <input type="checkbox" id="checkbox01" name="checkbox"><label for="checkbox01">Choice 1</label>
+ <input type="checkbox" id="checkbox02" name="checkbox"><label for="checkbox02">Choice 2</label>
+ <input type="checkbox" id="checkbox03" name="checkbox"><label for="checkbox03">Choice 3</label>
+</div>
+<form>
+ <div id="radio1" style="margin-top: 2em;">
+ <input type="radio" id="radio11" name="radio"><label for="radio11">Choice 1</label>
+ <input type="radio" id="radio12" name="radio" checked="checked"><label for="radio12">Choice 2</label>
+ <input type="radio" id="radio13" name="radio"><label for="radio13">Choice 3</label>
+ </div>
+</form>
+<form>
+ <div id="radio2" style="margin-top: 2em;">
+ <input type="radio" id="radio21" name="radio"><label for="radio21">Choice 1</label>
+ <input type="radio" id="radio22" name="radio"><label for="radio22">Choice 2</label>
+ <input type="radio" id="radio23" name="radio" checked="checked"><label for="radio23">Choice 3</label>
+ </div>
+</form>
+<form>
+ <div id="radio3">
+ <input type="radio" id="radio31" name="data['Page']['parse']"><label for="radio31">Choice 1</label>
+ <input type="radio" id="radio32" name="data['Page']['parse']" checked="checked"><label for="radio32">Choice 2</label>
+ <input type="radio" id="radio33" name="data['Page']['parse']"><label for="radio33">Choice 3</label>
+ </div>
+</form>
+
+<input type="checkbox" id="check"><label for="check">Toggle</label>
+<input type="checkbox" id="check2"><label for="check2">Checkbox</label>
+
+<div><input id="submit" type="submit" value="Label"></div>
+<button id="button-disabled" disabled>Button</button>
+<button id="button1">Button</button>
+<a href="#" id="anchor-button">Anchor Button</a>
+
+</div>
+</body>
+</html>
diff --git a/tests/unit/button/deprecated.js b/tests/unit/button/deprecated.js
new file mode 100644
index 000000000..bb023ab4f
--- /dev/null
+++ b/tests/unit/button/deprecated.js
@@ -0,0 +1,196 @@
+define( [
+ "jquery",
+ "ui/button"
+], function( $ ) {
+
+module( "Button (deprecated): core" );
+
+test( "Calling button on a checkbox input calls checkboxradio widget", function() {
+ var checkbox = $( "#checkbox01" );
+
+ expect( 2 );
+ checkbox.button();
+
+ ok( !!checkbox.checkboxradio( "instance" ),
+ "Calling button on a checkbox creates checkboxradio instance" );
+ ok( !checkbox.checkboxradio( "option", "icon" ),
+ "Calling button on a checkbox sets the checkboxradio icon option to false" );
+} );
+
+test( "Calling buttonset calls controlgroup", function() {
+ var controlgroup = $( ".buttonset" );
+
+ expect( 1 );
+ controlgroup.buttonset();
+
+ ok( controlgroup.is( ":ui-controlgroup" ), "Calling buttonset creates controlgroup instance" );
+} );
+
+module( "Button (deprecated): methods" );
+
+test( "destroy", function( assert ) {
+ expect( 1 );
+ assert.domEqual( "#checkbox02", function() {
+ $( "#checkbox02" ).button().button( "destroy" );
+ } );
+} );
+
+test( "refresh: Ensure disabled state is preserved correctly.", function() {
+ expect( 5 );
+ var element = null;
+
+ element = $( "#checkbox02" );
+ element.button( { disabled: true } ).button( "refresh" );
+ ok( element.button( "option", "disabled" ), "Checkboxes should remain disabled after refresh" );
+ ok( element.prop( "disabled" ), "Input remains disabled after refresh" );
+
+ element = $( "#radio02" );
+ element.button( { disabled: true } ).button( "refresh" );
+ ok( element.button( "option", "disabled" ), "Radio buttons should remain disabled after refresh" );
+
+ element = $( "#checkbox02" );
+ element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
+ ok( !element.button( "option", "disabled" ), "Changing a checkbox's disabled property should update the state after refresh." );
+
+ element = $( "#radio02" );
+ element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
+ ok( !element.button( "option", "disabled" ), "Changing a radio button's disabled property should update the state after refresh." );
+
+} );
+
+module( "button (deprecated): options" );
+
+test( "Setting items option on buttonset sets the button properties on the items option", function() {
+ expect( 2 );
+
+ var controlgroup = $( ".buttonset" );
+
+ controlgroup.buttonset( { items: "bar" } );
+ equal( controlgroup.controlgroup( "option", "items.button" ), "bar",
+ "items.button set when setting items option on init on buttonset" );
+
+ controlgroup.buttonset( "option", "items", "foo" );
+ equal( controlgroup.controlgroup( "option", "items.button" ), "foo",
+ "items.button set when setting items option on buttonset" );
+} );
+
+test( "disabled, null", function() {
+ expect( 2 );
+
+ $( "#radio02" ).prop( "disabled", true ).button( { disabled: null } );
+ deepEqual( $( "#radio02" ).button( "option", "disabled" ), true,
+ "disabled option set to true" );
+ deepEqual( true, $( "#radio02" ).prop( "disabled" ), "element is not disabled" );
+} );
+
+test( "text / showLabel options proxied", function() {
+ expect( 8 );
+ var button = $( "#button" );
+ button.button( {
+ text: false,
+ icon: "ui-icon-gear"
+ } );
+ equal( button.button( "option", "showLabel" ), false,
+ "Setting the text option to false sets the showLabel option to false on init" );
+ button.button( "option", "showLabel", true );
+ equal( button.button( "option", "text" ), true,
+ "Setting showLabel true with option method sets text option to true" );
+ button.button( "option", "text", false );
+ equal( button.button( "option", "showLabel" ), false,
+ "Setting text false with option method sets showLabel option to false" );
+ button.button( "option", "text", true );
+ equal( button.button( "option", "showLabel" ), true,
+ "Setting text true with option method sets showLabel option to true" );
+ button.button( "option", "showLabel", false );
+ equal( button.button( "option", "text" ), false,
+ "Setting showLabel false with option method sets text option to false" );
+ button.button( "destroy" );
+ button.button( {
+ text: true,
+ icon: "ui-icon-gear"
+ } );
+ equal( button.button( "option", "showLabel" ), true,
+ "Setting the text option to true sets the showLabel option to true on init" );
+ button.button( "destroy" );
+ button.button( {
+ showLabel: true,
+ icon: "ui-icon-gear"
+ } );
+ equal( button.button( "option", "text" ), true,
+ "Setting the showLabel option to true sets the text option to true on init" );
+ button.button( "destroy" );
+ button.button( {
+ showLabel: false,
+ icon: "ui-icon-gear"
+ } );
+ equal( button.button( "option", "text" ), false,
+ "Setting the showLabel option to false sets the text option to false on init" );
+} );
+
+test( "icon / icons options properly proxied", function() {
+ expect( 10 );
+
+ var button = $( "#button" );
+
+ button.button( {
+ icon: "foo"
+ } );
+
+ equal( button.button( "option", "icons.primary" ), "foo",
+ "Icon option properly proxied on init" );
+
+ button.button( {
+ icon: "bar"
+ } );
+
+ equal( button.button( "option", "icons.primary" ), "bar",
+ "Icon option properly proxied with option method" );
+
+ button.button( {
+ icons: {
+ primary: "foo"
+ }
+ } );
+
+ equal( button.button( "option", "icon" ), "foo",
+ "Icons primary option properly proxied with option method" );
+ equal( button.button( "option", "iconPosition" ), "beginning",
+ "Icons primary option sets iconPosition option to beginning" );
+
+ button.button( {
+ icons: {
+ secondary: "bar"
+ }
+ } );
+
+ equal( button.button( "option", "icon" ), "bar",
+ "Icons secondary option properly proxied with option method" );
+ equal( button.button( "option", "iconPosition" ), "end",
+ "Icons secondary option sets iconPosition option to end" );
+
+ button.button( "destroy" );
+
+ button.button( {
+ icons: {
+ primary: "foo"
+ }
+ } );
+
+ equal( button.button( "option", "icon" ), "foo",
+ "Icons primary option properly proxied on init" );
+ equal( button.button( "option", "iconPosition" ), "beginning",
+ "Icons primary option sets iconPosition option to beginning on init" );
+
+ button.button( {
+ icons: {
+ secondary: "bar"
+ }
+ } );
+
+ equal( button.button( "option", "icon" ), "bar",
+ "Icons secondary option properly proxied on init" );
+ equal( button.button( "option", "iconPosition" ), "end",
+ "Icons secondary option sets iconPosition option to end on init" );
+} );
+
+} );
diff --git a/tests/unit/button/events.js b/tests/unit/button/events.js
index 15a285046..0bec5a7d2 100644
--- a/tests/unit/button/events.js
+++ b/tests/unit/button/events.js
@@ -3,34 +3,18 @@ define( [
"ui/widgets/button"
], function( $ ) {
-module( "button: events" );
+module( "Button: events" );
-test( "buttonset works with single-quote named elements (#7505)", function() {
- expect( 1 );
- $( "#radio3" ).buttonset();
- $( "#radio33" ).on( "click", function() {
- ok( true, "button clicks work with single-quote named elements" );
- } ).trigger( "click" );
-} );
-
-asyncTest( "when button loses focus, ensure active state is removed (#8559)", function( assert ) {
+asyncTest( "Anchor recieves click event when spacebar is pressed", function() {
expect( 1 );
+ var element = $( "#anchor-button" ).button();
- var element = $( "#button" ).button();
-
- element.one( "keypress", function() {
- element.one( "blur", function() {
- assert.lacksClasses( element, "ui-state-active", "button loses active state appropriately" );
- start();
- } ).trigger( "blur" );
+ element.on( "click", function() {
+ ok( true, "click occcured as a result of spacebar" );
+ start();
} );
- element.trigger( "focus" );
- setTimeout( function() {
- element
- .simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } )
- .simulate( "keypress", { keyCode: $.ui.keyCode.ENTER } );
- } );
+ element.trigger( $.Event( "keyup", { keyCode: $.ui.keyCode.SPACE } ) );
} );
} );
diff --git a/tests/unit/button/methods.js b/tests/unit/button/methods.js
index 0bafd90f9..09a91bbc0 100644
--- a/tests/unit/button/methods.js
+++ b/tests/unit/button/methods.js
@@ -3,7 +3,7 @@ define( [
"ui/widgets/button"
], function( $ ) {
-module( "button: methods" );
+module( "Button: methods" );
test( "destroy", function( assert ) {
expect( 1 );
@@ -13,61 +13,22 @@ test( "destroy", function( assert ) {
} );
test( "refresh: Ensure disabled state is preserved correctly.", function() {
- expect( 8 );
+ expect( 3 );
var element = $( "<a href='#'></a>" );
element.button( { disabled: true } ).button( "refresh" );
- ok( element.button( "option", "disabled" ), "Anchor button should remain disabled after refresh" ); //See #8237
-
- element = $( "<div></div>" );
- element.button( { disabled: true } ).button( "refresh" );
- ok( element.button( "option", "disabled" ), "<div> buttons should remain disabled after refresh" );
+ ok( element.button( "option", "disabled" ),
+ "Anchor button should remain disabled after refresh" );
element = $( "<button></button>" );
element.button( { disabled: true } ).button( "refresh" );
ok( element.button( "option", "disabled" ), "<button> should remain disabled after refresh" );
- element = $( "<input type='checkbox'>" );
- element.button( { disabled: true } ).button( "refresh" );
- ok( element.button( "option", "disabled" ), "Checkboxes should remain disabled after refresh" );
-
- element = $( "<input type='radio'>" );
- element.button( { disabled: true } ).button( "refresh" );
- ok( element.button( "option", "disabled" ), "Radio buttons should remain disabled after refresh" );
-
element = $( "<button></button>" );
element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
- ok( !element.button( "option", "disabled" ), "Changing a <button>'s disabled property should update the state after refresh." ); //See #8828
-
- element = $( "<input type='checkbox'>" );
- element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
- ok( !element.button( "option", "disabled" ), "Changing a checkbox's disabled property should update the state after refresh." );
-
- element = $( "<input type='radio'>" );
- element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
- ok( !element.button( "option", "disabled" ), "Changing a radio button's disabled property should update the state after refresh." );
-} );
-
-// #8975
-test( "refresh: buttonset should turn added elements into button widgets", function() {
- expect( 2 );
- var radioButtonset = $( "#radio0" ).buttonset(),
- checkboxButtonset = $( "#checkbox0" ).buttonset();
-
- radioButtonset.append(
- "<input type='radio' name='radio' id='radio04'>" +
- "<label for='radio04'>Choice 4</label>"
- );
- checkboxButtonset.append(
- "<input type='checkbox' name='checkbox' id='checkbox04'>" +
- "<label for='checkbox04'>Choice 4</label>"
- );
-
- radioButtonset.buttonset( "refresh" );
- checkboxButtonset.buttonset( "refresh" );
+ ok( !element.button( "option", "disabled" ),
+ "Changing a <button>'s disabled property should update the state after refresh." );
- equal( radioButtonset.find( ":ui-button" ).length, 4, "radio" );
- equal( checkboxButtonset.find( ":ui-button" ).length, 4, "checkbox" );
} );
} );
diff --git a/tests/unit/button/options.js b/tests/unit/button/options.js
index 31542427c..207f7c25e 100644
--- a/tests/unit/button/options.js
+++ b/tests/unit/button/options.js
@@ -6,152 +6,170 @@ define( [
module( "button: options" );
test( "disabled, explicit value", function( assert ) {
- expect( 7 );
+ expect( 8 );
- var element = $( "#radio01" ).button( { disabled: false } );
- deepEqual( element.button( "option", "disabled" ), false, "disabled option set to false" );
- deepEqual( element.prop( "disabled" ), false, "element is disabled" );
+ var element = $( "#button" ).button( { disabled: false } );
+
+ strictEqual( element.button( "option", "disabled" ), false, "disabled option set to false" );
+ strictEqual( element.prop( "disabled" ), false, "Disabled property is false" );
assert.lacksClasses( element.button( "widget" ), "ui-state-disabled ui-button-disabled" );
- element = $( "#radio02" ).button( { disabled: true } );
+ element = $( "#button" ).button( { disabled: true } );
- ok( !element.button( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" );
- assert.hasClasses( element.button( "widget" ), "ui-button-disabled ui-state-disabled" );
+ assert.hasClasses( element.button( "widget" ), "ui-state-disabled" );
+ strictEqual( element.button( "widget" ).attr( "aria-disabled" ), undefined,
+ "element does not get aria-disabled" );
+ assert.hasClasses( element.button( "widget" ), "ui-button-disabled" );
- deepEqual( element.button( "option", "disabled" ), true, "disabled option set to true" );
- deepEqual( element.prop( "disabled" ), true, "element is not disabled" );
+ strictEqual( element.button( "option", "disabled" ), true, "disabled option set to true" );
+ strictEqual( element.prop( "disabled" ), true, "Disabled property is set" );
} );
+// We are testing the default here because the default null is a special value which means to check
+// the DOM. We need to make sure this happens correctly. Checking the options should never return
+// null, it should always be true or false.
test( "disabled, null", function() {
expect( 4 );
- $( "#radio01" ).button( { disabled: null } );
- deepEqual( false, $( "#radio01" ).button( "option", "disabled" ),
- "disabled option set to false" );
- deepEqual( false, $( "#radio01" ).prop( "disabled" ), "element is disabled" );
+ var element = $( "#button" ),
+ elementDisabled = $( "#button-disabled" );
- $( "#radio02" ).prop( "disabled", true ).button( { disabled: null } );
- deepEqual( true, $( "#radio02" ).button( "option", "disabled" ),
+ element.add( elementDisabled ).button( { disabled: null } );
+ strictEqual( element.button( "option", "disabled" ), false, "disabled option set to false" );
+ strictEqual( element.prop( "disabled" ), false, "element is disabled" );
+ strictEqual( elementDisabled.button( "option", "disabled" ), true,
"disabled option set to true" );
- deepEqual( true, $( "#radio02" ).prop( "disabled" ), "element is not disabled" );
+ strictEqual( elementDisabled.prop( "disabled" ), true, "element is disabled" );
} );
-test( "disabled, ui-state-active is removed unless checkbox or radio", function( assert ) {
- expect( 12 );
- var elements = [
- $( "<input type='button'>" ),
- $( "<button></button>" ),
- $( "<a></a>" ),
- $( "<div></div>" ),
- $( "<input type='checkbox' id='checkbox' checked><label for='checkbox'></label>" ),
- $( "<input type='radio' id='radio' checked><label for='radio'></label>" )
- ];
-
- $.each( elements, function() {
- var element = $( this ).first().button(),
- buttonElement = element.button( "widget" ),
- elementType = element.prop( "nodeName" ).toLowerCase();
-
- if ( element.is( "input" ) ) {
- elementType += ":" + element.attr( "type" );
- }
-
- element.trigger( "mousedown" );
- assert.hasClasses( buttonElement, "ui-state-active",
- "[" + elementType + "] has ui-state-active class after mousedown." );
-
- element.button( "disable" );
- if ( element.is( "[type=checkbox], [type=radio]" ) ) {
- assert.hasClasses( buttonElement, "ui-state-active",
- "Disabled [" + elementType + "] has ui-state-active class." );
- } else {
- assert.lacksClasses( buttonElement, "ui-state-active",
- "Disabled [" + elementType + "] does not have ui-state-active class." );
- }
- } );
-} );
+test( "showLabel, false, without icon", function( assert ) {
+ expect( 4 );
-test( "text false without icon", function() {
- expect( 1 );
- $( "#button" ).button( {
- text: false
+ var button = $( "#button" ).button( {
+ showLabel: false
} );
- ok( $( "#button" ).is( ".ui-button-text-only:not(.ui-button-icon-only)" ) );
- $( "#button" ).button( "destroy" );
+ assert.lacksClasses( button, "ui-button-icon-only" );
+ strictEqual( button.button( "option", "showLabel" ), true,
+ "showLabel false only allowed if icon true" );
+
+ button.button( "option", "showLabel", false );
+ assert.lacksClasses( button, "ui-button-icon-only" );
+ strictEqual( button.button( "option", "showLabel" ), true,
+ "showLabel false only allowed if icon true" );
} );
-test( "text false with icon", function() {
+test( "showLabel, false, with icon", function( assert ) {
expect( 1 );
- $( "#button" ).button( {
- text: false,
- icons: {
- primary: "iconclass"
- }
+ var button = $( "#button" ).button( {
+ showLabel: false,
+ icon: "iconclass"
} );
- ok( $( "#button" ).is( ".ui-button-icon-only:not(.ui-button-text):has(span.ui-icon.iconclass)" ) );
-
- $( "#button" ).button( "destroy" );
+ assert.hasClasses( button, "ui-button ui-corner-all ui-widget ui-button-icon-only" );
} );
test( "label, default", function() {
expect( 2 );
- $( "#button" ).button();
- deepEqual( $( "#button" ).text(), "Label" );
- deepEqual( $( "#button" ).button( "option", "label" ), "Label" );
+ var button = $( "#button" ).button();
- $( "#button" ).button( "destroy" );
+ deepEqual( button.text(), "Label" );
+ deepEqual( button.button( "option", "label" ), "Label" );
} );
-test( "label", function() {
+test( "label, explicit value", function() {
expect( 2 );
- $( "#button" ).button( {
+ var button = $( "#button" ).button( {
label: "xxx"
} );
- deepEqual( $( "#button" ).text(), "xxx" );
- deepEqual( $( "#button" ).button( "option", "label" ), "xxx" );
- $( "#button" ).button( "destroy" );
+ deepEqual( button.text(), "xxx" );
+ deepEqual( button.button( "option", "label" ), "xxx" );
} );
-test( "label default with input type submit", function() {
+test( "label, default, with input type submit", function() {
expect( 2 );
- deepEqual( $( "#submit" ).button().val(), "Label" );
- deepEqual( $( "#submit" ).button( "option", "label" ), "Label" );
+ var button = $( "#submit" ).button();
+
+ deepEqual( button.val(), "Label" );
+ deepEqual( button.button( "option", "label" ), "Label" );
} );
-test( "label with input type submit", function() {
+test( "label, explicit value, with input type submit", function() {
expect( 2 );
- var label = $( "#submit" ).button( {
+ var button = $( "#submit" ).button( {
label: "xxx"
- } ).val();
- deepEqual( label, "xxx" );
- deepEqual( $( "#submit" ).button( "option", "label" ), "xxx" );
+ } );
+
+ deepEqual( button.val(), "xxx" );
+ deepEqual( button.button( "option", "label" ), "xxx" );
} );
-test( "icons", function() {
- expect( 1 );
- $( "#button" ).button( {
- text: false,
- icons: {
- primary: "iconclass",
- secondary: "iconclass2"
- }
- } );
- ok( $( "#button" ).is( ":has(span.ui-icon.ui-button-icon-primary.iconclass):has(span.ui-icon.ui-button-icon-secondary.iconclass2)" ) );
+test( "icon", function( assert ) {
+ expect( 4 );
+ var button = $( "#button" ).button( {
+ showLabel: false,
+ icon: "iconclass"
+ } ),
+ icon = button.find( ".ui-icon" );
+
+ assert.hasClasses( icon, "iconclass" );
+ equal( icon.length, 1, "button with icon option set has icon" );
+
+ button.button( "option", "icon", false );
+ equal( button.find( ".ui-icon" ).length, 0, "setting icon to false removes the icon" );
+
+ button.button( "option", "icon", "iconclass" );
+ ok( button.find( ".ui-icon" ).length, "setting icon to a value adds the icon" );
- $( "#button" ).button( "destroy" );
} );
-test( "#5295 - button does not remove hoverstate if disabled", function( assert ) {
- expect( 1 );
- var btn = $( "#button" ).button();
- btn.on( "hover", function() {
- btn.button( "disable" );
- } );
- btn.trigger( "mouseenter" );
- btn.trigger( "mouseleave" );
- assert.lacksClasses( btn, "ui-state-hover" );
+test( "icon position", function( assert ) {
+ expect( 22 );
+
+ var button = $( "#button" ).button( {
+ icon: "ui-icon-gear"
+ } ),
+ icon = button.find( ".ui-icon" ),
+ space = button.find( ".ui-button-icon-space" );
+
+ equal( icon.length, 1, "button with icon option set has icon" );
+ equal( button.button( "option", "iconPosition" ), "beginning",
+ "Button has iconPosition beginning by default" );
+ equal( button.contents()[ 0 ], icon[ 0 ], "icon is prepended when position is begining" );
+ equal( icon.next()[ 0 ], space[ 0 ], "icon is followed by a space when position is begining" );
+ equal( space.text(), " ",
+ "ui-button-icon-space contains a breaking space iconPosition:beginning" );
+ assert.lacksClasses( icon, "ui-widget-icon-block" );
+
+ button.button( "option", "iconPosition", "end" );
+ icon = button.find( ".ui-icon" );
+ space = button.find( ".ui-button-icon-space" );
+ equal( icon.length, 1, "Changing position to end does not re-create or duplicate icon" );
+ equal( button.button( "option", "iconPosition" ), "end", "Button has iconPosition end" );
+ equal( button.contents().last()[ 0 ], icon[ 0 ], "icon is appended when position is end" );
+ equal( icon.prev()[ 0 ], space[ 0 ], "icon is preceeded by a space when position is end" );
+ equal( space.text(), " ",
+ "ui-button-icon-space contains a breaking space iconPosition:beginning" );
+ assert.lacksClasses( icon, "ui-widget-icon-block" );
+
+ button.button( "option", "iconPosition", "top" );
+ icon = button.find( ".ui-icon" );
+ equal( icon.length, 1, "Changing position to top does not re-create or duplicate icon" );
+ equal( button.button( "option", "iconPosition" ), "top", "Button has iconPosition top" );
+ equal( button.contents()[ 0 ], icon[ 0 ], "icon is prepended when position is top" );
+ ok( !button.find( "ui-button-icon-space" ).length,
+ "Button should not have an iconSpace with position: top" );
+ assert.hasClasses( icon, "ui-widget-icon-block" );
+
+ button.button( "option", "iconPosition", "bottom" );
+ icon = button.find( ".ui-icon" );
+ equal( icon.length, 1, "Changing position to bottom does not re-create or duplicate icon" );
+ equal( button.button( "option", "iconPosition" ), "bottom", "Button has iconPosition top" );
+ equal( button.contents().last()[ 0 ], icon[ 0 ], "icon is prepended when position is bottom" );
+ ok( !button.find( "ui-button-icon-space" ).length,
+ "Button should not have an iconSpace with position: bottom" );
+ assert.hasClasses( icon, "ui-widget-icon-block" );
+
} );
} );
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-11 03:29:45 +0000