jostreff/nsedit
1
0
Fork 0
mirror of https://github.com/tuxis-ie/nsedit.git synced 2025-05-24 00:24:07 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge commit 'd21ea7816e' as 'jquery-ui'

Browse source
This commit is contained in:
Mark Schouten 2016-08-05 13:20:20 +02:00
commit e904a80717
629 changed files with 341074 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

156
jquery-ui/tests/unit/accordion/accordion.html Normal file
View file

@ -0,0 +1,156 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion Test Suite</title>
<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script>
TestHelpers.loadResources({
css: [ "core", "accordion" ],
js: [
"ui/core.js",
"ui/widget.js",
"ui/accordion.js"
]
});
</script>
<script src="accordion_test_helpers.js"></script>
<script src="accordion_common.js"></script>
<script src="accordion_core.js"></script>
<script src="accordion_events.js"></script>
<script src="accordion_methods.js"></script>
<script src="accordion_options.js"></script>
<script src="../swarminject.js"></script>
<style>
#list, #list1 *, #navigation, #navigation *, #collapsible, #collapsible * {
margin: 0;
padding: 0;
font-size: 12px;
line-height: 15px;
}
/* avoid IE7 oscillating between overflow visible and scroll values */
#list1 > div {
overflow: visible;
}
#collapsibleWrapper {
width: 300px;
float: left;
}
</style>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div id="list1" class="foo">
<h3 class="bar">There is one obvious advantage:</h3>
<div class="foo">
<p>
You've seen it coming!
<br>
Buy now and get nothing for free!
<br>
Well, at least no free beer. Perhaps a bear, if you can afford it.
</p>
</div>
<h3 class="bar">Now that you've got...</h3>
<div class="foo">
<p>
your bear, you have to admit it!
<br>
No, we aren't <a href="#">selling bears</a>.
</p>
<p>
We could talk about renting one.
</p>
</div>
<h3 class="bar">Rent one bear, ...</h3>
<div class="foo">
<p>
get two for three beer.
</p>
<p>
And now, for something completely different.
</p>
</div>
</div>
<div id="navigationWrapper">
<ul id="navigation">
<li>
<h2><a href="?p=1.1.1">Guitar</a></h2>
<ul>
<li><a href="?p=1.1.1.1">Electric</a></li>
<li><a href="?p=1.1.1.2">Acoustic</a></li>
<li><a href="?p=1.1.1.3">Amps</a></li>
<li><a href="?p=1.1.1.4">Effects</a></li>
<li><a href="?p=1.1.1.5">Accessories</a></li>
</ul>
</li>
<li>
<h2><a href="?p=1.1.2"><span>Bass</span></a></h2>
<ul>
<li><a href="?p=1.1.2.1">Electric</a></li>
<li><a href="?p=1.1.2.2">Acoustic</a></li>
<li><a href="?p=1.1.2.3">Amps</a></li>
<li><a href="?p=1.1.2.4">Effects</a></li>
<li><a href="?p=1.1.2.5">Accessories</a></li>
<li><a href="?p=1.1.2.5">Accessories</a></li>
<li><a href="?p=1.1.2.5">Accessories</a></li>
</ul>
</li>
<li>
<h2><a href="?p=1.1.3">Drums</a></h2>
<ul>
<li><a href="?p=1.1.3.2">Acoustic</a></li>
<li><a href="?p=1.1.3.3">Electronic</a></li>
<li><a href="?p=1.1.3.6">Accessories</a></li>
</ul>
</li>
</ul>
</div>
<dl id="accordion-dl">
<dt>
Accordion Header 1
</dt>
<dd>
Accordion Content 1
</dd>
<dt>
Accordion Header 2
</dt>
<dd>
Accordion Content 2
</dd>
<dt>
Accordion Header 3
</dt>
<dd>
Accordion Content 3
</dd>
</dl>
<div id="collapsibleWrapper">
<div id="collapsible">
<h3>Header</h3>
<div>
<p>
The calculated height of this accordion should be the same
regardless of whether the accordion was collapsed or not
when the height was calculated.
</p>
</div>
</div>
</div>
</div>
</body>
</html>

20
jquery-ui/tests/unit/accordion/accordion_common.js vendored Normal file
View file

@ -0,0 +1,20 @@
TestHelpers.commonWidgetTests( "accordion", {
defaults: {
active: 0,
animate: {},
collapsible: false,
disabled: false,
event: "click",
header: "> li > :first-child,> :not(li):even",
heightStyle: "auto",
icons: {
"activeHeader": "ui-icon-triangle-1-s",
"header": "ui-icon-triangle-1-e"
},
// callbacks
activate: null,
beforeActivate: null,
create: null
}
});

190
jquery-ui/tests/unit/accordion/accordion_core.js vendored Normal file
View file

@ -0,0 +1,190 @@
(function( $ ) {
var setupTeardown = TestHelpers.accordion.setupTeardown,
state = TestHelpers.accordion.state;
module( "accordion: core", setupTeardown() );
$.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) {
test( "markup structure: " + type, function() {
expect( 4 );
var element = $( selector ).accordion();
ok( element.hasClass( "ui-accordion" ), "main element is .ui-accordion" );
equal( element.find( ".ui-accordion-header" ).length, 3,
".ui-accordion-header elements exist, correct number" );
equal( element.find( ".ui-accordion-content" ).length, 3,
".ui-accordion-content elements exist, correct number" );
deepEqual( element.find( ".ui-accordion-header" ).next().get(),
element.find( ".ui-accordion-content" ).get(),
"content panels come immediately after headers" );
});
});
test( "handle click on header-descendant", function() {
expect( 1 );
var element = $( "#navigation" ).accordion();
$( "#navigation h2:eq(1) a" ).click();
state( element, 0, 1, 0 );
});
test( "accessibility", function () {
expect( 61 );
var element = $( "#list1" ).accordion({
active: 1,
collapsible: true
}),
headers = element.find( ".ui-accordion-header" );
equal( element.attr( "role" ), "tablist", "element role" );
headers.each(function( i ) {
var header = headers.eq( i ),
panel = header.next();
equal( header.attr( "role" ), "tab", "header " + i + " role" );
equal( header.attr( "aria-controls" ), panel.attr( "id" ), "header " + i + " aria-controls" );
equal( panel.attr( "role" ), "tabpanel", "panel " + i + " role" );
equal( panel.attr( "aria-labelledby" ), header.attr( "id" ), "panel " + i + " aria-labelledby" );
});
equal( headers.eq( 1 ).attr( "tabindex" ), 0, "active header has tabindex=0" );
equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab (1) has aria-selected=true" );
equal( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab (1) has aria-expanded=true" );
equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "false", "active tabpanel (1) has aria-hidden=false" );
equal( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header (0) has tabindex=-1" );
equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab (0) has aria-selected=false" );
equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab (0) has aria-expanded=false" );
equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (0) has aria-hidden=true" );
equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
element.accordion( "option", "active", 0 );
equal( headers.eq( 0 ).attr( "tabindex" ), 0, "active header (0) has tabindex=0" );
equal( headers.eq( 0 ).attr( "aria-selected" ), "true", "active tab (0) has aria-selected=true" );
equal( headers.eq( 0 ).attr( "aria-expanded" ), "true", "active tab (0) has aria-expanded=true" );
equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "false", "active tabpanel (0) has aria-hidden=false" );
equal( headers.eq( 1 ).attr( "tabindex" ), -1, "inactive header (1) has tabindex=-1" );
equal( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab (1) has aria-selected=false" );
equal( headers.eq( 1 ).attr( "aria-expanded" ), "false", "inactive tab (1) has aria-expanded=false" );
equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (1) has aria-hidden=true" );
equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
element.accordion( "option", "active", false );
equal( headers.eq( 0 ).attr( "tabindex" ), 0, "previously active header (0) has tabindex=0" );
equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab (0) has aria-selected=false" );
equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab (0) has aria-expanded=false" );
equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (0) has aria-hidden=true" );
equal( headers.eq( 1 ).attr( "tabindex" ), -1, "inactive header (1) has tabindex=-1" );
equal( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab (1) has aria-selected=false" );
equal( headers.eq( 1 ).attr( "aria-expanded" ), "false", "inactive tab (1) has aria-expanded=false" );
equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (1) has aria-hidden=true" );
equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
element.accordion( "option", "active", 1 );
equal( headers.eq( 1 ).attr( "tabindex" ), 0, "active header has tabindex=0" );
equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab (1) has aria-selected=true" );
equal( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab (1) has aria-expanded=true" );
equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "false", "active tabpanel (1) has aria-hidden=false" );
equal( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header (0) has tabindex=-1" );
equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab (0) has aria-selected=false" );
equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab (0) has aria-expanded=false" );
equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (0) has aria-hidden=true" );
equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
});
asyncTest( "keyboard support", function() {
expect( 13 );
var element = $( "#list1" ).accordion(),
headers = element.find( ".ui-accordion-header" ),
anchor = headers.eq( 1 ).next().find( "a" ).eq( 0 ),
keyCode = $.ui.keyCode;
equal( headers.filter( ".ui-state-focus" ).length, 0, "no headers focused on init" );
headers.eq( 0 ).simulate( "focus" );
setTimeout( step1 );
function step1() {
ok( headers.eq( 0 ).is( ".ui-state-focus" ), "first header has focus" );
headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.DOWN } );
setTimeout( step2 );
}
// Support: IE 11 with jQuery 1.7 - 1.8 only
// All of the setTimeouts() from keydowns aren't necessary with newer jQuery.
// Only the explicit focus simulations require them.
function step2() {
ok( headers.eq( 1 ).is( ".ui-state-focus" ), "DOWN moves focus to next header" );
headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.RIGHT } );
setTimeout( step3 );
}
function step3() {
ok( headers.eq( 2 ).is( ".ui-state-focus" ), "RIGHT moves focus to next header" );
headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.DOWN } );
setTimeout( step4 );
}
function step4() {
ok( headers.eq( 0 ).is( ".ui-state-focus" ), "DOWN wraps focus to first header" );
headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.UP } );
setTimeout( step5 );
}
function step5() {
ok( headers.eq( 2 ).is( ".ui-state-focus" ), "UP wraps focus to last header" );
headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.LEFT } );
setTimeout( step6 );
}
function step6() {
ok( headers.eq( 1 ).is( ".ui-state-focus" ), "LEFT moves focus to previous header" );
headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.HOME } );
setTimeout( step7 );
}
function step7() {
ok( headers.eq( 0 ).is( ".ui-state-focus" ), "HOME moves focus to first header" );
headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.END } );
setTimeout( step8 );
}
function step8() {
ok( headers.eq( 2 ).is( ".ui-state-focus" ), "END moves focus to last header" );
headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.ENTER } );
setTimeout( step9 );
}
function step9() {
equal( element.accordion( "option", "active" ) , 2, "ENTER activates panel" );
headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.SPACE } );
setTimeout( step10 );
}
function step10() {
equal( element.accordion( "option", "active" ), 1, "SPACE activates panel" );
anchor.simulate( "focus" );
setTimeout( step11 );
}
function step11() {
ok( !headers.eq( 1 ).is( ".ui-state-focus" ), "header loses focus when focusing inside the panel" );
anchor.simulate( "keydown", { keyCode: keyCode.UP, ctrlKey: true } );
setTimeout( step12 );
}
function step12() {
ok( headers.eq( 1 ).is( ".ui-state-focus" ), "CTRL+UP moves focus to header" );
start();
}
});
}( jQuery ) );

164
jquery-ui/tests/unit/accordion/accordion_events.js vendored Normal file
View file

@ -0,0 +1,164 @@
(function( $ ) {
var setupTeardown = TestHelpers.accordion.setupTeardown,
state = TestHelpers.accordion.state;
module( "accordion: events", setupTeardown() );
test( "create", function() {
expect( 10 );
var element = $( "#list1" ),
headers = element.children( "h3" ),
contents = headers.next();
element.accordion({
create: function( event, ui ) {
equal( ui.header.length, 1, "header length" );
strictEqual( ui.header[ 0 ], headers[ 0 ], "header" );
equal( ui.panel.length, 1, "panel length" );
strictEqual( ui.panel[ 0 ], contents[ 0 ], "panel" );
}
});
element.accordion( "destroy" );
element.accordion({
active: 2,
create: function( event, ui ) {
equal( ui.header.length, 1, "header length" );
strictEqual( ui.header[ 0 ], headers[ 2 ], "header" );
equal( ui.panel.length, 1, "panel length" );
strictEqual( ui.panel[ 0 ], contents[ 2 ], "panel" );
}
});
element.accordion( "destroy" );
element.accordion({
active: false,
collapsible: true,
create: function( event, ui ) {
equal( ui.header.length, 0, "header length" );
equal( ui.panel.length, 0, "panel length" );
}
});
element.accordion( "destroy" );
});
test( "beforeActivate", function() {
expect( 38 );
var element = $( "#list1" ).accordion({
active: false,
collapsible: true
}),
headers = element.find( ".ui-accordion-header" ),
content = element.find( ".ui-accordion-content" );
element.one( "accordionbeforeactivate", function( event, ui ) {
ok( !( "originalEvent" in event ) );
equal( ui.oldHeader.length, 0 );
equal( ui.oldPanel.length, 0 );
equal( ui.newHeader.length, 1 );
strictEqual( ui.newHeader[ 0 ], headers[ 0 ] );
equal( ui.newPanel.length, 1 );
strictEqual( ui.newPanel[ 0 ], content[ 0 ] );
state( element, 0, 0, 0 );
});
element.accordion( "option", "active", 0 );
state( element, 1, 0, 0 );
element.one( "accordionbeforeactivate", function( event, ui ) {
equal( event.originalEvent.type, "click" );
equal( ui.oldHeader.length, 1 );
strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] );
equal( ui.oldPanel.length, 1 );
strictEqual( ui.oldPanel[ 0 ], content[ 0 ] );
equal( ui.newHeader.length, 1 );
strictEqual( ui.newHeader[ 0 ], headers[ 1 ] );
equal( ui.newPanel.length, 1 );
strictEqual( ui.newPanel[ 0 ], content[ 1 ] );
state( element, 1, 0, 0 );
});
headers.eq( 1 ).click();
state( element, 0, 1, 0 );
element.one( "accordionbeforeactivate", function( event, ui ) {
ok( !( "originalEvent" in event ) );
equal( ui.oldHeader.length, 1 );
strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] );
equal( ui.oldPanel.length, 1 );
strictEqual( ui.oldPanel[ 0 ], content[ 1 ] );
equal( ui.newHeader.length, 0 );
equal( ui.newPanel.length, 0 );
state( element, 0, 1, 0 );
});
element.accordion( "option", "active", false );
state( element, 0, 0, 0 );
element.one( "accordionbeforeactivate", function( event, ui ) {
ok( !( "originalEvent" in event ) );
equal( ui.oldHeader.length, 0 );
equal( ui.oldPanel.length, 0 );
equal( ui.newHeader.length, 1 );
strictEqual( ui.newHeader[ 0 ], headers[ 2 ] );
equal( ui.newPanel.length, 1 );
strictEqual( ui.newPanel[ 0 ], content[ 2 ] );
event.preventDefault();
state( element, 0, 0, 0 );
});
element.accordion( "option", "active", 2 );
state( element, 0, 0, 0 );
});
test( "activate", function() {
expect( 21 );
var element = $( "#list1" ).accordion({
active: false,
collapsible: true
}),
headers = element.find( ".ui-accordion-header" ),
content = element.find( ".ui-accordion-content" );
element.one( "accordionactivate", function( event, ui ) {
equal( ui.oldHeader.length, 0 );
equal( ui.oldPanel.length, 0 );
equal( ui.newHeader.length, 1 );
strictEqual( ui.newHeader[ 0 ], headers[ 0 ] );
equal( ui.newPanel.length, 1 );
strictEqual( ui.newPanel[ 0 ], content[ 0 ] );
});
element.accordion( "option", "active", 0 );
element.one( "accordionactivate", function( event, ui ) {
equal( ui.oldHeader.length, 1 );
strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] );
equal( ui.oldPanel.length, 1 );
strictEqual( ui.oldPanel[ 0 ], content[ 0 ] );
equal( ui.newHeader.length, 1 );
strictEqual( ui.newHeader[ 0 ], headers[ 1 ] );
equal( ui.newPanel.length, 1 );
strictEqual( ui.newPanel[ 0 ], content[ 1 ] );
});
headers.eq( 1 ).click();
element.one( "accordionactivate", function( event, ui ) {
equal( ui.oldHeader.length, 1 );
strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] );
equal( ui.oldPanel.length, 1 );
strictEqual( ui.oldPanel[ 0 ], content[ 1 ] );
equal( ui.newHeader.length, 0 );
equal( ui.newPanel.length, 0 );
});
element.accordion( "option", "active", false );
// prevent activation
element.one( "accordionbeforeactivate", function( event ) {
ok( true );
event.preventDefault();
});
element.one( "accordionactivate", function() {
ok( false );
});
element.accordion( "option", "active", 1 );
});
}( jQuery ) );

131
jquery-ui/tests/unit/accordion/accordion_methods.js vendored Normal file
View file

@ -0,0 +1,131 @@
(function( $ ) {
var equalHeight = TestHelpers.accordion.equalHeight,
setupTeardown = TestHelpers.accordion.setupTeardown,
state = TestHelpers.accordion.state;
module( "accordion: methods", setupTeardown() );
test( "destroy", function() {
expect( 1 );
domEqual( "#list1", function() {
$( "#list1" ).accordion().accordion( "destroy" );
});
});
test( "enable/disable", function() {
expect( 7 );
var element = $( "#list1" ).accordion();
state( element, 1, 0, 0 );
element.accordion( "disable" );
ok( element.hasClass( "ui-state-disabled" ), "element gets ui-state-disabled" );
equal( element.attr( "aria-disabled" ), "true", "element gets aria-disabled" );
ok( element.hasClass( "ui-accordion-disabled" ), "element gets ui-accordion-disabled" );
// event does nothing
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "click" );
state( element, 1, 0, 0 );
// option still works
element.accordion( "option", "active", 1 );
state( element, 0, 1, 0 );
element.accordion( "enable" );
element.accordion( "option", "active", 2 );
state( element, 0, 0, 1 );
});
test( "refresh", function() {
expect( 19 );
var element = $( "#navigation" )
.parent()
.height( 300 )
.end()
.accordion({
heightStyle: "fill"
});
equalHeight( element, 255 );
element.parent().height( 500 );
element.accordion( "refresh" );
equalHeight( element, 455 );
element = $( "#list1" );
element.accordion();
state( element, 1, 0, 0 );
// disable panel via markup
element.find( "h3.bar" ).eq( 1 ).addClass( "ui-state-disabled" );
element.accordion( "refresh" );
state( element, 1, 0, 0 );
// don't add multiple icons
element.accordion( "refresh" );
equal( element.find( ".ui-accordion-header-icon" ).length, 3 );
// add a panel
element
.append("<h3 class='bar' id='new_1'>new 1</h3>")
.append("<div class='foo' id='new_1_panel'>new 1</div>");
element.accordion( "refresh" );
state( element, 1, 0, 0, 0 );
// remove all tabs
element.find( "h3.bar, div.foo" ).remove();
element.accordion( "refresh" );
state( element );
equal( element.accordion( "option", "active" ), false, "no active accordion panel" );
// add panels
element
.append("<h3 class='bar' id='new_2'>new 2</h3>")
.append("<div class='foo' id='new_2_panel'>new 2</div>")
.append("<h3 class='bar' id='new_3'>new 3</h3>")
.append("<div class='foo' id='new_3_panel'>new 3</div>")
.append("<h3 class='bar' id='new_4'>new 4</h3>")
.append("<div class='foo' id='new_4_panel'>new 4</div>")
.append("<h3 class='bar' id='new_5'>new 5</h3>")
.append("<div class='foo' id='new_5_panel'>new 5</div>");
element.accordion( "refresh" );
state( element, 1, 0, 0, 0 );
// activate third tab
element.accordion( "option", "active", 2 );
state( element, 0, 0, 1, 0 );
// remove fourth panel, third panel should stay active
element.find( "h3.bar" ).eq( 3 ).remove();
element.find( "div.foo" ).eq( 3 ).remove();
element.accordion( "refresh" );
state( element, 0, 0, 1 );
// remove third (active) panel, second panel should become active
element.find( "h3.bar" ).eq( 2 ).remove();
element.find( "div.foo" ).eq( 2 ).remove();
element.accordion( "refresh" );
state( element, 0, 1 );
// remove first panel, previously active panel (now first) should stay active
element.find( "h3.bar" ).eq( 0 ).remove();
element.find( "div.foo" ).eq( 0 ).remove();
element.accordion( "refresh" );
state( element, 1 );
// collapse all panels
element.accordion( "option", {
collapsible: true,
active: false
});
state( element, 0 );
element.accordion( "refresh" );
state( element, 0 );
});
test( "widget", function() {
expect( 2 );
var element = $( "#list1" ).accordion(),
widgetElement = element.accordion( "widget" );
equal( widgetElement.length, 1, "one element" );
strictEqual( widgetElement[ 0 ], element[ 0 ], "same element" );
});
}( jQuery ) );

479
jquery-ui/tests/unit/accordion/accordion_options.js vendored Normal file
View file

@ -0,0 +1,479 @@
(function( $ ) {
var equalHeight = TestHelpers.accordion.equalHeight,
setupTeardown = TestHelpers.accordion.setupTeardown,
state = TestHelpers.accordion.state;
module( "accordion: options", setupTeardown() );
test( "{ active: default }", function() {
expect( 2 );
var element = $( "#list1" ).accordion();
equal( element.accordion( "option", "active" ), 0 );
state( element, 1, 0, 0 );
});
test( "{ active: null }", function() {
expect( 2 );
var element = $( "#list1" ).accordion({
active: null
});
equal( element.accordion( "option", "active" ), 0 );
state( element, 1, 0, 0 );
});
test( "{ active: false }", function() {
expect( 7 );
var element = $( "#list1" ).accordion({
active: false,
collapsible: true
});
state( element, 0, 0, 0 );
equal( element.find( ".ui-accordion-header.ui-state-active" ).length, 0, "no headers selected" );
equal( element.accordion( "option", "active" ), false );
element.accordion( "option", "collapsible", false );
state( element, 1, 0, 0 );
equal( element.accordion( "option", "active" ), 0 );
element.accordion( "destroy" );
element.accordion({
active: false
});
state( element, 1, 0, 0 );
strictEqual( element.accordion( "option", "active" ), 0 );
});
// http://bugs.jqueryui.com/ticket/11938
test( "{ active: false, collapsible: true }", function() {
expect( 1 );
var element = $( "#collapsible" ).accordion(),
height = element.outerHeight();
element
.accordion( "destroy" )
.accordion( {
active: false,
collapsible: true
} )
.accordion( "option", "active", 0 );
equal( element.outerHeight(), height );
} );
test( "{ active: Number }", function() {
expect( 8 );
var element = $( "#list1" ).accordion({
active: 2
});
equal( element.accordion( "option", "active" ), 2 );
state( element, 0, 0, 1 );
element.accordion( "option", "active", 0 );
equal( element.accordion( "option", "active" ), 0 );
state( element, 1, 0, 0 );
element.find( ".ui-accordion-header" ).eq( 1 ).click();
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
element.accordion( "option", "active", 10 );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
});
test( "{ active: -Number }", function() {
expect( 8 );
var element = $( "#list1" ).accordion({
active: -1
});
equal( element.accordion( "option", "active" ), 2 );
state( element, 0, 0, 1 );
element.accordion( "option", "active", -2 );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
element.accordion( "option", "active", -10 );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
element.accordion( "option", "active", -3 );
equal( element.accordion( "option", "active" ), 0 );
state( element, 1, 0, 0 );
});
test( "{ animate: false }", function() {
expect( 3 );
var element = $( "#list1" ).accordion({
animate: false
}),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
$.fn.animate = function() {
ok( false, ".animate() called" );
};
ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 1 );
ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
});
asyncTest( "{ animate: Number }", function() {
expect( 7 );
var element = $( "#list1" ).accordion({
animate: 100
}),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
// called twice (both panels)
$.fn.animate = function( props, options ) {
equal( options.duration, 100, "correct duration" );
equal( options.easing, undefined, "default easing" );
animate.apply( this, arguments );
};
ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 1 );
panels.promise().done(function() {
ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
start();
});
});
asyncTest( "{ animate: String }", function() {
expect( 7 );
var element = $( "#list1" ).accordion({
animate: "linear"
}),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
// called twice (both panels)
$.fn.animate = function( props, options ) {
equal( options.duration, undefined, "default duration" );
equal( options.easing, "linear", "correct easing" );
animate.apply( this, arguments );
};
ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 1 );
panels.promise().done(function() {
ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
start();
});
});
asyncTest( "{ animate: {} }", function() {
expect( 7 );
var element = $( "#list1" ).accordion({
animate: {}
}),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
// called twice (both panels)
$.fn.animate = function( props, options ) {
equal( options.duration, undefined, "default duration" );
equal( options.easing, undefined, "default easing" );
animate.apply( this, arguments );
};
ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 1 );
panels.promise().done(function() {
ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
start();
});
});
asyncTest( "{ animate: { duration, easing } }", function() {
expect( 7 );
var element = $( "#list1" ).accordion({
animate: { duration: 100, easing: "linear" }
}),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
// called twice (both panels)
$.fn.animate = function( props, options ) {
equal( options.duration, 100, "correct duration" );
equal( options.easing, "linear", "correct easing" );
animate.apply( this, arguments );
};
ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 1 );
panels.promise().done(function() {
ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
start();
});
});
asyncTest( "{ animate: { duration, easing } }, animate down", function() {
expect( 7 );
var element = $( "#list1" ).accordion({
active: 1,
animate: { duration: 100, easing: "linear" }
}),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
// called twice (both panels)
$.fn.animate = function( props, options ) {
equal( options.duration, 100, "correct duration" );
equal( options.easing, "linear", "correct easing" );
animate.apply( this, arguments );
};
ok( panels.eq( 1 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 0 );
panels.promise().done(function() {
ok( panels.eq( 1 ).is( ":hidden" ), "first panel hidden" );
ok( panels.eq( 0 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
start();
});
});
asyncTest( "{ animate: { duration, easing, down } }, animate down", function() {
expect( 7 );
var element = $( "#list1" ).accordion({
active: 1,
animate: {
duration: 100,
easing: "linear",
down: {
easing: "swing"
}
}
}),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
// called twice (both panels)
$.fn.animate = function( props, options ) {
equal( options.duration, 100, "correct duration" );
equal( options.easing, "swing", "correct easing" );
animate.apply( this, arguments );
};
ok( panels.eq( 1 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 0 );
panels.promise().done(function() {
ok( panels.eq( 1 ).is( ":hidden" ), "first panel hidden" );
ok( panels.eq( 0 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
start();
});
});
test( "{ collapsible: false }", function() {
expect( 4 );
var element = $( "#list1" ).accordion({
active: 1
});
element.accordion( "option", "active", false );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
element.find( ".ui-accordion-header" ).eq( 1 ).click();
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
});
test( "{ collapsible: true }", function() {
expect( 6 );
var element = $( "#list1" ).accordion({
active: 1,
collapsible: true
});
element.accordion( "option", "active", false );
equal( element.accordion( "option", "active" ), false );
state( element, 0, 0, 0 );
element.accordion( "option", "active", 1 );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
element.find( ".ui-accordion-header" ).eq( 1 ).click();
equal( element.accordion( "option", "active" ), false );
state( element, 0, 0, 0 );
});
test( "{ event: null }", function() {
expect( 5 );
var element = $( "#list1" ).accordion({
event: null
});
state( element, 1, 0, 0 );
element.accordion( "option", "active", 1 );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
// ensure default click handler isn't bound
element.find( ".ui-accordion-header" ).eq( 2 ).click();
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
});
test( "{ event: custom }", function() {
expect( 11 );
var element = $( "#list1" ).accordion({
event: "custom1 custom2"
});
state( element, 1, 0, 0 );
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
// ensure default click handler isn't bound
element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "click" );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "custom2" );
equal( element.accordion( "option", "active" ), 2 );
state( element, 0, 0, 1 );
element.accordion( "option", "event", "custom3" );
// ensure old event handlers are unbound
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" );
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom2" );
equal( element.accordion( "option", "active" ), 2 );
state( element, 0, 0, 1 );
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom3" );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
});
test( "{ header: default }", function() {
expect( 2 );
// default: > li > :first-child,> :not(li):even
// > :not(li):even
state( $( "#list1" ).accordion(), 1, 0, 0);
// > li > :first-child
state( $( "#navigation" ).accordion(), 1, 0, 0);
});
test( "{ header: custom }", function() {
expect( 6 );
var element = $( "#navigationWrapper" ).accordion({
header: "h2"
});
element.find( "h2" ).each(function() {
ok( $( this ).hasClass( "ui-accordion-header" ) );
});
equal( element.find( ".ui-accordion-header" ).length, 3 );
state( element, 1, 0, 0 );
element.accordion( "option", "active", 2 );
state( element, 0, 0, 1 );
});
test( "{ heightStyle: 'auto' }", function() {
expect( 3 );
var element = $( "#navigation" ).accordion({ heightStyle: "auto" });
equalHeight( element, 105 );
});
test( "{ heightStyle: 'content' }", function() {
expect( 3 );
var element = $( "#navigation" ).accordion({ heightStyle: "content" }),
sizes = element.find( ".ui-accordion-content" ).map(function() {
return $( this ).height();
}).get();
equal( sizes[ 0 ], 75 );
equal( sizes[ 1 ], 105 );
equal( sizes[ 2 ], 45 );
});
test( "{ heightStyle: 'fill' }", function() {
expect( 3 );
$( "#navigationWrapper" ).height( 500 );
var element = $( "#navigation" ).accordion({ heightStyle: "fill" });
equalHeight( element, 455 );
});
test( "{ heightStyle: 'fill' } with sibling", function() {
expect( 3 );
$( "#navigationWrapper" ).height( 500 );
$( "<p>Lorem Ipsum</p>" )
.css({
height: 50,
marginTop: 20,
marginBottom: 30
})
.prependTo( "#navigationWrapper" );
var element = $( "#navigation" ).accordion({ heightStyle: "fill" });
equalHeight( element , 355 );
});
test( "{ heightStyle: 'fill' } with multiple siblings", function() {
expect( 3 );
$( "#navigationWrapper" ).height( 500 );
$( "<p>Lorem Ipsum</p>" )
.css({
height: 50,
marginTop: 20,
marginBottom: 30
})
.prependTo( "#navigationWrapper" );
$( "<p>Lorem Ipsum</p>" )
.css({
height: 50,
marginTop: 20,
marginBottom: 30,
position: "absolute"
})
.prependTo( "#navigationWrapper" );
$( "<p>Lorem Ipsum</p>" )
.css({
height: 25,
marginTop: 10,
marginBottom: 15
})
.prependTo( "#navigationWrapper" );
var element = $( "#navigation" ).accordion({ heightStyle: "fill" });
equalHeight( element, 305 );
});
test( "{ icons: false }", function() {
expect( 8 );
var element = $( "#list1" );
function icons( on ) {
deepEqual( element.find( "span.ui-icon").length, on ? 3 : 0 );
deepEqual( element.find( ".ui-accordion-header.ui-accordion-icons" ).length, on ? 3 : 0 );
}
element.accordion();
icons( true );
element.accordion( "destroy" ).accordion({
icons: false
});
icons( false );
element.accordion( "option", "icons", { header: "foo", activeHeader: "bar" } );
icons( true );
element.accordion( "option", "icons", false );
icons( false );
});
test( "{ icons: hash }", function() {
expect( 3 );
var element = $( "#list1" ).accordion({
icons: { activeHeader: "a1", header: "h1" }
});
ok( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) );
element.accordion( "option", "icons", { activeHeader: "a2", header: "h2" } );
ok( !element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) );
ok( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a2" ) );
});
}( jQuery ) );

27
jquery-ui/tests/unit/accordion/accordion_test_helpers.js vendored Normal file
View file

@ -0,0 +1,27 @@
TestHelpers.accordion = {
equalHeight: function( accordion, height ) {
accordion.find( ".ui-accordion-content" ).each(function() {
equal( $( this ).outerHeight(), height );
});
},
setupTeardown: function() {
var animate = $.ui.accordion.prototype.options.animate;
return {
setup: function() {
$.ui.accordion.prototype.options.animate = false;
},
teardown: function() {
$.ui.accordion.prototype.options.animate = animate;
}
};
},
state: function( accordion ) {
var expected = $.makeArray( arguments ).slice( 1 ),
actual = accordion.find( ".ui-accordion-content" ).map(function() {
return $( this ).css( "display" ) === "none" ? 0 : 1;
}).get();
QUnit.push( QUnit.equiv(actual, expected), actual, expected );
}
};

26
jquery-ui/tests/unit/accordion/all.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion Test Suite</title>
<script src="../../../external/jquery/jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<link rel="stylesheet" href="../qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../qunit-composite.js"></script>
<script src="../subsuite.js"></script>
<script>
testAllVersions( "accordion" );
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
</div>
</body>
</html>

66
jquery-ui/tests/unit/all.html Normal file
View file

@ -0,0 +1,66 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Test Suite</title>
<script src="../../external/jquery/jquery.js"></script>
<link rel="stylesheet" href="../../external/qunit/qunit.css">
<link rel="stylesheet" href="qunit-composite.css">
<script src="../../external/qunit/qunit.js"></script>
<script src="qunit-composite.js"></script>
<script>
(function() {
var params = [],
suites = [
"accordion/accordion.html",
"autocomplete/autocomplete.html",
"button/button.html",
"core/core.html",
"core/core_deprecated.html",
"datepicker/datepicker.html",
"dialog/dialog.html",
"draggable/draggable.html",
"droppable/droppable.html",
"effects/effects.html",
"menu/menu.html",
"position/position.html",
"progressbar/progressbar.html",
"resizable/resizable.html",
"selectable/selectable.html",
"slider/slider.html",
"sortable/sortable.html",
"spinner/spinner.html",
"tabs/tabs.html",
"tooltip/tooltip.html",
"widget/widget.html"
];
$.each( QUnit.urlParams, function( key, value ) {
if ( key === "filter" ) {
return;
}
params.push( encodeURIComponent( key ) + "=" + encodeURIComponent( value ) );
});
if ( params.length ) {
params = "?" + params.join( "&" );
suites = $.map( suites, function( suite ) {
return suite + params;
});
}
QUnit.testSuites( suites );
}());
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
</div>
</body>
</html>

26
jquery-ui/tests/unit/autocomplete/all.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete Test Suite</title>
<script src="../../../external/jquery/jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<link rel="stylesheet" href="../qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../qunit-composite.js"></script>
<script src="../subsuite.js"></script>
<script>
testAllVersions( "autocomplete" );
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
</div>
</body>
</html>

45
jquery-ui/tests/unit/autocomplete/autocomplete.html Normal file
View file

@ -0,0 +1,45 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete Test Suite</title>
<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script>
TestHelpers.loadResources({
css: [ "core", "menu", "autocomplete" ],
js: [
"ui/core.js",
"ui/widget.js",
"ui/position.js",
"ui/menu.js",
"ui/autocomplete.js"
]
});
</script>
<script src="autocomplete_common.js"></script>
<script src="autocomplete_core.js"></script>
<script src="autocomplete_events.js"></script>
<script src="autocomplete_methods.js"></script>
<script src="autocomplete_options.js"></script>
<script src="../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div id="autocomplete-wrap1" class="autocomplete-wrap"></div>
<div id="autocomplete-wrap2" class="autocomplete-wrap"><input id="autocomplete" class="foo"></div>
<div id="autocomplete-contenteditable" contenteditable="" tabindex=0></div>
<textarea id="autocomplete-textarea"></textarea>
</div>
</body>
</html>

29
jquery-ui/tests/unit/autocomplete/autocomplete_common.js vendored Normal file
View file

@ -0,0 +1,29 @@
TestHelpers.commonWidgetTests( "autocomplete", {
defaults: {
appendTo: null,
autoFocus: false,
delay: 300,
disabled: false,
messages: {
noResults: "No search results.",
results: $.ui.autocomplete.prototype.options.messages.results
},
minLength: 1,
position: {
my: "left top",
at: "left bottom",
collision: "none"
},
source: null,
// callbacks
change: null,
close: null,
create: null,
focus: null,
open: null,
response: null,
search: null,
select: null
}
});

390
jquery-ui/tests/unit/autocomplete/autocomplete_core.js vendored Normal file
View file

@ -0,0 +1,390 @@
(function( $ ) {
module( "autocomplete: core" );
test( "prevent form submit on enter when menu is active", function() {
expect( 2 );
var event,
element = $( "#autocomplete" )
.autocomplete({
source: [ "java", "javascript" ]
})
.val( "ja" )
.autocomplete( "search" ),
menu = element.autocomplete( "widget" );
event = $.Event( "keydown" );
event.keyCode = $.ui.keyCode.DOWN;
element.trigger( event );
equal( menu.find( ".ui-menu-item.ui-state-focus" ).length, 1, "menu item is active" );
event = $.Event( "keydown" );
event.keyCode = $.ui.keyCode.ENTER;
element.trigger( event );
ok( event.isDefaultPrevented(), "default action is prevented" );
});
test( "allow form submit on enter when menu is not active", function() {
expect( 1 );
var event,
element = $( "#autocomplete" )
.autocomplete({
autoFocus: false,
source: [ "java", "javascript" ]
})
.val( "ja" )
.autocomplete( "search" );
event = $.Event( "keydown" );
event.keyCode = $.ui.keyCode.ENTER;
element.trigger( event );
ok( !event.isDefaultPrevented(), "default action is prevented" );
});
(function() {
test( "up arrow invokes search - input", function() {
arrowsInvokeSearch( "#autocomplete", true, true );
});
test( "down arrow invokes search - input", function() {
arrowsInvokeSearch( "#autocomplete", false, true );
});
test( "up arrow invokes search - textarea", function() {
arrowsInvokeSearch( "#autocomplete-textarea", true, false );
});
test( "down arrow invokes search - textarea", function() {
arrowsInvokeSearch( "#autocomplete-textarea", false, false );
});
test( "up arrow invokes search - contenteditable", function() {
arrowsInvokeSearch( "#autocomplete-contenteditable", true, false );
});
test( "down arrow invokes search - contenteditable", function() {
arrowsInvokeSearch( "#autocomplete-contenteditable", false, false );
});
test( "up arrow moves focus - input", function() {
arrowsMoveFocus( "#autocomplete", true );
});
test( "down arrow moves focus - input", function() {
arrowsMoveFocus( "#autocomplete", false );
});
test( "up arrow moves focus - textarea", function() {
arrowsMoveFocus( "#autocomplete-textarea", true );
});
test( "down arrow moves focus - textarea", function() {
arrowsMoveFocus( "#autocomplete-textarea", false );
});
test( "up arrow moves focus - contenteditable", function() {
arrowsMoveFocus( "#autocomplete-contenteditable", true );
});
test( "down arrow moves focus - contenteditable", function() {
arrowsMoveFocus( "#autocomplete-contenteditable", false );
});
test( "up arrow moves cursor - input", function() {
arrowsNavigateElement( "#autocomplete", true, false );
});
test( "down arrow moves cursor - input", function() {
arrowsNavigateElement( "#autocomplete", false, false );
});
test( "up arrow moves cursor - textarea", function() {
arrowsNavigateElement( "#autocomplete-textarea", true, true );
});
test( "down arrow moves cursor - textarea", function() {
arrowsNavigateElement( "#autocomplete-textarea", false, true );
});
test( "up arrow moves cursor - contenteditable", function() {
arrowsNavigateElement( "#autocomplete-contenteditable", true, true );
});
test( "down arrow moves cursor - contenteditable", function() {
arrowsNavigateElement( "#autocomplete-contenteditable", false, true );
});
function arrowsInvokeSearch( id, isKeyUp, shouldMove ) {
expect( 1 );
var didMove = false,
element = $( id ).autocomplete({
source: [ "a" ],
delay: 0,
minLength: 0
});
element.autocomplete( "instance" )._move = function() {
didMove = true;
};
element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } );
equal( didMove, shouldMove, "respond to arrow" );
}
function arrowsMoveFocus( id, isKeyUp ) {
expect( 1 );
var element = $( id ).autocomplete({
source: [ "a" ],
delay: 0,
minLength: 0
});
element.autocomplete( "instance" )._move = function() {
ok( true, "repsond to arrow" );
};
element.autocomplete( "search" );
element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } );
}
function arrowsNavigateElement( id, isKeyUp, shouldMove ) {
expect( 1 );
var didMove = false,
element = $( id ).autocomplete({
source: [ "a" ],
delay: 0,
minLength: 0
});
element.bind( "keypress", function( e ) {
didMove = !e.isDefaultPrevented();
});
element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } );
element.simulate( "keypress" );
equal( didMove, shouldMove, "respond to arrow" );
}
})();
asyncTest( "past end of menu in multiline autocomplete", function() {
expect( 2 );
var customVal = "custom value",
element = $( "#autocomplete-contenteditable" ).autocomplete({
delay: 0,
source: [ "javascript" ],
focus: function( event, ui ) {
equal( ui.item.value, "javascript", "Item gained focus" );
$( this ).text( customVal );
event.preventDefault();
}
});
element
.simulate( "focus" )
.autocomplete( "search", "ja" );
setTimeout(function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
equal( element.text(), customVal );
start();
}, 50 );
});
asyncTest( "ESCAPE in multiline autocomplete", function() {
expect( 2 );
var customVal = "custom value",
element = $( "#autocomplete-contenteditable" ).autocomplete({
delay: 0,
source: [ "javascript" ],
focus: function( event, ui ) {
equal( ui.item.value, "javascript", "Item gained focus" );
$( this ).text( customVal );
event.preventDefault();
}
});
element
.simulate( "focus" )
.autocomplete( "search", "ja" );
setTimeout(function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } );
equal( element.text(), customVal );
start();
}, 50 );
});
asyncTest( "handle race condition", function() {
expect( 3 );
var count = 0,
element = $( "#autocomplete" ).autocomplete({
source: function( request, response ) {
count++;
if ( request.term.length === 1 ) {
equal( count, 1, "request with 1 character is first" );
setTimeout(function() {
response([ "one" ]);
setTimeout( checkResults, 1 );
}, 1 );
return;
}
equal( count, 2, "request with 2 characters is second" );
response([ "two" ]);
}
});
element.autocomplete( "search", "a" );
element.autocomplete( "search", "ab" );
function checkResults() {
equal( element.autocomplete( "widget" ).find( ".ui-menu-item" ).text(), "two",
"correct results displayed" );
start();
}
});
asyncTest( "simultaneous searches (#9334)", function() {
expect( 2 );
var element = $( "#autocomplete" ).autocomplete({
source: function( request, response ) {
setTimeout(function() {
response([ request.term ]);
});
},
response: function() {
ok( true, "response from first instance" );
}
}),
element2 = $( "#autocomplete-textarea" ).autocomplete({
source: function( request, response ) {
setTimeout(function() {
response([ request.term ]);
});
},
response: function() {
ok( true, "response from second instance" );
start();
}
});
element.autocomplete( "search", "test" );
element2.autocomplete( "search", "test" );
});
test( "ARIA", function() {
expect( 13 );
var element = $( "#autocomplete" ).autocomplete({
source: [ "java", "javascript" ]
}),
liveRegion = element.autocomplete( "instance" ).liveRegion;
equal( liveRegion.children().length, 0, "Empty live region on create" );
equal( liveRegion.attr( "aria-live" ), "assertive",
"Live region's aria-live attribute must be assertive" );
equal( liveRegion.attr( "aria-relevant" ), "additions",
"Live region's aria-relevant attribute must be additions" );
equal( liveRegion.attr( "role" ), "status",
"Live region's role attribute must be status" );
element.autocomplete( "search", "j" );
equal( liveRegion.children().first().text(),
"2 results are available, use up and down arrow keys to navigate.",
"Live region for multiple values" );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
equal( liveRegion.children().filter( ":visible" ).text(), "java",
"Live region changed on keydown to announce the highlighted value" );
element.one( "autocompletefocus", function( event ) {
event.preventDefault();
});
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
equal( liveRegion.children().filter( ":visible" ).text(), "javascript",
"Live region updated when default focus is prevented" );
element.autocomplete( "search", "javas" );
equal( liveRegion.children().filter( ":visible" ).text(),
"1 result is available, use up and down arrow keys to navigate.",
"Live region for one value" );
element.autocomplete( "search", "z" );
equal( liveRegion.children().filter( ":visible" ).text(), "No search results.",
"Live region for no values" );
equal( liveRegion.children().length, 5,
"Should be five children in the live region after the above" );
equal( liveRegion.children().filter( ":visible" ).length, 1,
"Only one should be still visible" );
ok( liveRegion.children().filter( ":visible" )[ 0 ] === liveRegion.children().last()[ 0 ],
"The last one should be the visible one" );
element.autocomplete( "destroy" );
equal( liveRegion.parent().length, 0,
"The liveRegion should be detached after destroy" );
});
test( "ARIA, aria-label announcement", function() {
expect( 1 );
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var that = this;
$.each( items, function( index, item ) {
that._renderItemData( ul, item )
.attr( "aria-label", item.category + " : " + item.label );
});
}
});
var element = $( "#autocomplete" ).catcomplete({
source: [ { label: "anders andersson", category: "People" } ]
}),
liveRegion = element.catcomplete( "instance" ).liveRegion;
element.catcomplete( "search", "a" );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
equal( liveRegion.children().filter( ":visible" ).text(), "People : anders andersson",
"Live region changed on keydown to announce the highlighted value's aria-label attribute" );
});
test( "ARIA, init on detached input", function() {
expect( 1 );
var element = $( "<input>" ).autocomplete({
source: [ "java", "javascript" ]
}),
liveRegion = element.autocomplete( "instance" ).liveRegion;
equal( liveRegion.parent().length, 1, "liveRegion must have a parent" );
});
test( ".replaceWith() (#9172)", function() {
expect( 1 );
var element = $( "#autocomplete" ).autocomplete(),
replacement = "<div>test</div>",
parent = element.parent();
element.replaceWith( replacement );
equal( parent.html().toLowerCase(), replacement );
});
asyncTest( "Search if the user retypes the same value (#7434)", function() {
expect( 3 );
var element = $( "#autocomplete" ).autocomplete({
source: [ "java", "javascript" ],
delay: 0
}),
menu = element.autocomplete( "instance" ).menu.element;
element.val( "j" ).simulate( "keydown" );
setTimeout(function() {
ok( menu.is( ":visible" ), "menu displays initially" );
element.trigger( "blur" );
ok( !menu.is( ":visible" ), "menu hidden after blur" );
element.val( "j" ).simulate( "keydown" );
setTimeout(function() {
ok( menu.is( ":visible" ), "menu displays after typing the same value" );
start();
});
});
});
}( jQuery ) );

182
jquery-ui/tests/unit/autocomplete/autocomplete_events.js vendored Normal file
View file

@ -0,0 +1,182 @@
(function( $ ) {
module( "autocomplete: events" );
var data = [ "Clojure", "COBOL", "ColdFusion", "Java", "JavaScript", "Scala", "Scheme" ];
$.each([
{
type: "input",
selector: "#autocomplete",
valueMethod: "val"
},
{
type: "textarea",
selector: "#autocomplete-textarea",
valueMethod: "val"
},
{
type: "contenteditable",
selector: "#autocomplete-contenteditable",
valueMethod: "text"
}
], function( i, settings ) {
asyncTest( "all events - " + settings.type, function() {
expect( 13 );
var element = $( settings.selector )
.autocomplete({
autoFocus: false,
delay: 0,
source: data,
search: function( event ) {
equal( event.originalEvent.type, "keydown", "search originalEvent" );
},
response: function( event, ui ) {
deepEqual( ui.content, [
{ label: "Clojure", value: "Clojure" },
{ label: "Java", value: "Java" },
{ label: "JavaScript", value: "JavaScript" }
], "response ui.content" );
ui.content.splice( 0, 1 );
},
open: function() {
ok( menu.is( ":visible" ), "menu open on open" );
},
focus: function( event, ui ) {
equal( event.originalEvent.type, "menufocus", "focus originalEvent" );
deepEqual( ui.item, { label: "Java", value: "Java" }, "focus ui.item" );
},
close: function( event ) {
equal( event.originalEvent.type, "menuselect", "close originalEvent" );
ok( menu.is( ":hidden" ), "menu closed on close" );
},
select: function( event, ui ) {
equal( event.originalEvent.type, "menuselect", "select originalEvent" );
deepEqual( ui.item, { label: "Java", value: "Java" }, "select ui.item" );
},
change: function( event, ui ) {
equal( event.originalEvent.type, "blur", "change originalEvent" );
deepEqual( ui.item, { label: "Java", value: "Java" }, "change ui.item" );
ok( menu.is( ":hidden" ), "menu closed on change" );
start();
}
}),
menu = element.autocomplete( "widget" );
element.simulate( "focus" )[ settings.valueMethod ]( "j" ).keydown();
setTimeout(function() {
ok( menu.is( ":visible" ), "menu is visible after delay" );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
// blur must be async for IE to handle it properly
setTimeout(function() {
element.simulate( "blur" );
}, 1 );
}, 50 );
});
});
asyncTest( "change without selection", function() {
expect( 1 );
var element = $( "#autocomplete" ).autocomplete({
delay: 0,
source: data,
change: function( event, ui ) {
strictEqual( ui.item, null );
start();
}
});
element.triggerHandler( "focus" );
element.val( "ja" ).triggerHandler( "blur" );
});
asyncTest( "cancel search", function() {
expect( 6 );
var first = true,
element = $( "#autocomplete" ).autocomplete({
delay: 0,
source: data,
search: function() {
if ( first ) {
equal( element.val(), "ja", "val on first search" );
first = false;
return false;
}
equal( element.val(), "java", "val on second search" );
},
open: function() {
ok( true, "menu opened" );
}
}),
menu = element.autocomplete( "widget" );
element.val( "ja" ).keydown();
setTimeout(function() {
ok( menu.is( ":hidden" ), "menu is hidden after first search" );
element.val( "java" ).keydown();
setTimeout(function() {
ok( menu.is( ":visible" ), "menu is visible after second search" );
equal( menu.find( ".ui-menu-item" ).length, 2, "# of menu items" );
start();
}, 50 );
}, 50 );
});
asyncTest( "cancel focus", function() {
expect( 1 );
var customVal = "custom value",
element = $( "#autocomplete" ).autocomplete({
delay: 0,
source: data,
focus: function() {
$( this ).val( customVal );
return false;
}
});
element.val( "ja" ).keydown();
setTimeout(function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
equal( element.val(), customVal );
start();
}, 50 );
});
asyncTest( "cancel select", function() {
expect( 1 );
var customVal = "custom value",
element = $( "#autocomplete" ).autocomplete({
delay: 0,
source: data,
select: function() {
$( this ).val( customVal );
return false;
}
});
element.val( "ja" ).keydown();
setTimeout(function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
equal( element.val(), customVal );
start();
}, 50 );
});
asyncTest( "blur during remote search", function() {
expect( 1 );
var ac = $( "#autocomplete" ).autocomplete({
delay: 0,
source: function( request, response ) {
ok( true, "trigger request" );
ac.simulate( "blur" );
setTimeout(function() {
response([ "result" ]);
start();
}, 100 );
},
open: function() {
ok( false, "opened after a blur" );
}
});
ac.val( "ro" ).keydown();
});
}( jQuery ) );

45
jquery-ui/tests/unit/autocomplete/autocomplete_methods.js vendored Normal file
View file

@ -0,0 +1,45 @@
(function( $ ) {
module( "autocomplete: methods" );
test( "destroy", function() {
expect( 1 );
domEqual( "#autocomplete", function() {
$( "#autocomplete" ).autocomplete().autocomplete( "destroy" );
});
});
test( "search, close", function() {
expect( 6 );
var data = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl" ],
element = $( "#autocomplete" ).autocomplete({
source: data,
minLength: 0
}),
menu = element.autocomplete( "widget" );
ok( menu.is( ":hidden" ), "menu is hidden on init" );
element.autocomplete( "search" );
ok( menu.is( ":visible" ), "menu is visible after search" );
equal( menu.find( ".ui-menu-item" ).length, data.length, "all items for a blank search" );
element.val( "has" ).autocomplete( "search" );
equal( menu.find( ".ui-menu-item" ).text(), "haskell", "only one item for set input value" );
element.autocomplete( "search", "ja" );
equal( menu.find( ".ui-menu-item" ).length, 2, "only java and javascript for 'ja'" );
element.autocomplete( "close" );
ok( menu.is( ":hidden" ), "menu is hidden after close" );
});
test( "widget", function() {
expect( 2 );
var element = $( "#autocomplete" ).autocomplete(),
widgetElement = element.autocomplete( "widget" );
equal( widgetElement.length, 1, "one element" );
ok( widgetElement.is( ".ui-menu" ), "menu element" );
});
}( jQuery ) );

314
jquery-ui/tests/unit/autocomplete/autocomplete_options.js vendored Normal file
View file

@ -0,0 +1,314 @@
(function( $ ) {
module( "autocomplete: options" );
var data = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby",
"python", "c", "scala", "groovy", "haskell", "perl" ];
test( "appendTo: null", function() {
expect( 1 );
var element = $( "#autocomplete" ).autocomplete();
equal( element.autocomplete( "widget" ).parent()[ 0 ], document.body,
"defaults to body" );
element.autocomplete( "destroy" );
});
test( "appendTo: explicit", function() {
expect( 6 );
var detached = $( "<div>" ),
element = $( "#autocomplete" );
element.autocomplete({
appendTo: ".autocomplete-wrap"
});
equal( element.autocomplete( "widget" ).parent()[ 0 ],
$( "#autocomplete-wrap1" )[ 0 ], "first found element" );
equal( $( "#autocomplete-wrap2 .ui-autocomplete" ).length, 0,
"only appends to one element" );
element.autocomplete( "destroy" );
element.autocomplete().autocomplete( "option", "appendTo", "#autocomplete-wrap1" );
equal( element.autocomplete( "widget" ).parent()[ 0 ],
$( "#autocomplete-wrap1" )[ 0 ], "modified after init" );
element.autocomplete( "destroy" );
element.autocomplete({
appendTo: detached
});
equal( element.autocomplete( "widget" ).parent()[ 0 ], detached[ 0 ],
"detached jQuery object" );
element.autocomplete( "destroy" );
element.autocomplete({
appendTo: detached[ 0 ]
});
equal( element.autocomplete( "widget" ).parent()[ 0 ], detached[ 0 ],
"detached DOM element" );
element.autocomplete( "destroy" );
element.autocomplete().autocomplete( "option", "appendTo", detached );
equal( element.autocomplete( "widget" ).parent()[ 0 ], detached[ 0 ],
"detached DOM element via option()" );
element.autocomplete( "destroy" );
});
test( "appendTo: ui-front", function() {
expect( 2 );
var element = $( "#autocomplete" );
$( "#autocomplete-wrap2" ).addClass( "ui-front" );
element.autocomplete();
equal( element.autocomplete( "widget" ).parent()[ 0 ],
$( "#autocomplete-wrap2" )[ 0 ], "null, inside .ui-front" );
element.autocomplete( "destroy" );
element.autocomplete({
appendTo: $()
});
equal( element.autocomplete( "widget" ).parent()[ 0 ],
$( "#autocomplete-wrap2" )[ 0 ], "empty jQuery object, inside .ui-front" );
});
function autoFocusTest( afValue, focusedLength ) {
var element = $( "#autocomplete" ).autocomplete({
autoFocus: afValue,
delay: 0,
source: data,
open: function() {
equal(
element.autocomplete( "widget" )
.children( ".ui-menu-item.ui-state-focus" )
.length,
focusedLength,
"first item is " + (afValue ? "" : "not") + " auto focused" );
start();
}
});
element.val( "ja" ).keydown();
stop();
}
test( "autoFocus: false", function() {
expect( 1 );
autoFocusTest( false, 0 );
});
test( "autoFocus: true", function() {
expect( 1 );
autoFocusTest( true, 1 );
});
asyncTest( "delay", function() {
expect( 2 );
var element = $( "#autocomplete" ).autocomplete({
source: data,
delay: 50
}),
menu = element.autocomplete( "widget" );
element.val( "ja" ).keydown();
ok( menu.is( ":hidden" ), "menu is closed immediately after search" );
setTimeout(function() {
ok( menu.is( ":visible" ), "menu is open after delay" );
start();
}, 100 );
});
asyncTest( "disabled", function() {
expect( 5 );
var element = $( "#autocomplete" ).autocomplete({
source: data,
delay: 0
}),
menu = element.autocomplete( "disable" ).autocomplete( "widget" );
element.val( "ja" ).keydown();
ok( menu.is( ":hidden" ) );
ok( !element.is( ".ui-state-disabled" ), "element doesn't get ui-state-disabled" );
ok( !element.attr( "aria-disabled" ), "element doesn't get aria-disabled" );
ok( menu.is( ".ui-autocomplete-disabled" ), "element gets ui-autocomplete-disabled" );
setTimeout(function() {
ok( menu.is( ":hidden" ) );
start();
}, 50 );
});
test( "minLength", function() {
expect( 2 );
var element = $( "#autocomplete" ).autocomplete({
source: data
}),
menu = element.autocomplete( "widget" );
element.autocomplete( "search", "" );
ok( menu.is( ":hidden" ), "blank not enough for minLength: 1" );
element.autocomplete( "option", "minLength", 0 );
element.autocomplete( "search", "" );
ok( menu.is( ":visible" ), "blank enough for minLength: 0" );
});
asyncTest( "minLength, exceed then drop below", function() {
expect( 4 );
var element = $( "#autocomplete" ).autocomplete({
minLength: 2,
source: function( req, res ) {
equal( req.term, "12", "correct search term" );
setTimeout(function() {
res([ "item" ]);
}, 1 );
}
}),
menu = element.autocomplete( "widget" );
ok( menu.is( ":hidden" ), "menu is hidden before first search" );
element.autocomplete( "search", "12" );
ok( menu.is( ":hidden" ), "menu is hidden before second search" );
element.autocomplete( "search", "1" );
setTimeout(function() {
ok( menu.is( ":hidden" ), "menu is hidden after searches" );
start();
}, 50 );
});
test( "minLength, exceed then drop below then exceed", function() {
expect( 3 );
var _res = [],
element = $( "#autocomplete" ).autocomplete({
minLength: 2,
source: function( req, res ) {
_res.push( res );
}
}),
menu = element.autocomplete( "widget" );
// trigger a valid search
ok( menu.is( ":hidden" ), "menu is hidden before first search" );
element.autocomplete( "search", "12" );
// trigger a search below the minLength, to turn on cancelSearch flag
ok( menu.is( ":hidden" ), "menu is hidden before second search" );
element.autocomplete( "search", "1" );
// trigger a valid search
element.autocomplete( "search", "13" );
// react as if the first search was cancelled (default ajax behavior)
_res[ 0 ]([]);
// react to second search
_res[ 1 ]([ "13" ]);
ok( menu.is( ":visible" ), "menu is visible after searches" );
});
test( "source, local string array", function() {
expect( 1 );
var element = $( "#autocomplete" ).autocomplete({
source: data
}),
menu = element.autocomplete( "widget" );
element.val( "ja" ).autocomplete( "search" );
equal( menu.find( ".ui-menu-item" ).text(), "javajavascript" );
});
function sourceTest( source, async ) {
var element = $( "#autocomplete" ).autocomplete({
source: source
}),
menu = element.autocomplete( "widget" );
function result() {
var items = menu.find( ".ui-menu-item" );
equal( items.length, 3, "Should find three results." );
deepEqual( items.eq( 0 ).data( "ui-autocomplete-item" ), {
label: "java",
value: "java"
});
deepEqual( items.eq( 1 ).data( "ui-autocomplete-item" ), {
label: "javascript",
value: "javascript"
});
deepEqual( items.eq( 2 ).data( "ui-autocomplete-item" ), {
label: "clojure",
value: "clojure"
});
element.autocomplete( "destroy" );
if ( async ) {
start();
}
}
if ( async ) {
stop();
$( document ).one( "ajaxStop", result );
}
element.val( "j" ).autocomplete( "search" );
if ( !async ) {
result();
}
}
test( "source, local object array, only labels", function() {
expect( 4 );
sourceTest([
{ label: "java", value: null },
{ label: "php", value: null },
{ label: "coldfusion", value: "" },
{ label: "javascript", value: "" },
{ label: "clojure" }
]);
});
test( "source, local object array, only values", function() {
expect( 4 );
sourceTest([
{ value: "java", label: null },
{ value: "php", label: null },
{ value: "coldfusion", label: "" },
{ value: "javascript", label: "" },
{ value: "clojure" }
]);
});
test( "source, url string with remote json string array", function() {
expect( 4 );
sourceTest( "remote_string_array.txt", true );
});
test( "source, url string with remote json object array, only value properties", function() {
expect( 4 );
sourceTest( "remote_object_array_values.txt", true );
});
test( "source, url string with remote json object array, only label properties", function() {
expect( 4 );
sourceTest( "remote_object_array_labels.txt", true );
});
test( "source, custom", function() {
expect( 5 );
sourceTest(function( request, response ) {
equal( request.term, "j" );
response([
"java",
{ label: "javascript", value: null },
{ value: "clojure", label: null }
]);
});
});
test( "source, update after init", function() {
expect( 2 );
var element = $( "#autocomplete" ).autocomplete({
source: [ "java", "javascript", "haskell" ]
}),
menu = element.autocomplete( "widget" );
element.val( "ja" ).autocomplete( "search" );
equal( menu.find( ".ui-menu-item" ).text(), "javajavascript" );
element.autocomplete( "option", "source", [ "php", "asp" ] );
element.val( "ph" ).autocomplete( "search" );
equal( menu.find( ".ui-menu-item" ).text(), "php" );
});
}( jQuery ) );

5
jquery-ui/tests/unit/autocomplete/remote_object_array_labels.txt Normal file
View file

@ -0,0 +1,5 @@
[
{ "label": "java", "value": null },
{ "label": "javascript", "value": "" },
{ "label": "clojure" }
]

5
jquery-ui/tests/unit/autocomplete/remote_object_array_values.txt Normal file
View file

@ -0,0 +1,5 @@
[
{ "value": "java", "label": null },
{ "value": "javascript", "label": "" },
{ "value": "clojure" }
]

1
jquery-ui/tests/unit/autocomplete/remote_string_array.txt Normal file
View file

@ -0,0 +1 @@
[ "java", "javascript", "clojure" ]

26
jquery-ui/tests/unit/button/all.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button Test Suite</title>
<script src="../../../external/jquery/jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<link rel="stylesheet" href="../qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../qunit-composite.js"></script>
<script src="../subsuite.js"></script>
<script>
testAllVersions( "button" );
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
</div>
</body>
</html>

79
jquery-ui/tests/unit/button/button.html Normal file
View file

@ -0,0 +1,79 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button Test Suite</title>
<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script>
TestHelpers.loadResources({
css: [ "core", "button" ],
js: [
"ui/core.js",
"ui/widget.js",
"ui/button.js"
]
});
</script>
<script src="button_common.js"></script>
<script src="button_core.js"></script>
<script src="button_events.js"></script>
<script src="button_methods.js"></script>
<script src="button_options.js"></script>
<script src="../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<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>
</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>
</div>
</body>
</html>

14
jquery-ui/tests/unit/button/button_common.js vendored Normal file
View file

@ -0,0 +1,14 @@
TestHelpers.commonWidgetTests( "button", {
defaults: {
disabled: null,
icons: {
primary: null,
secondary: null
},
label: null,
text: true,
// callbacks
create: null
}
});

226
jquery-ui/tests/unit/button/button_core.js vendored Normal file
View file

@ -0,0 +1,226 @@
/*
* button_core.js
*/
(function($) {
module("button: core");
test("checkbox", function() {
expect( 4 );
var input = $("#check"),
label = $("label[for=check]");
ok( input.is(":visible") );
ok( label.is(":not(.ui-button)") );
input.button();
ok( input.is(".ui-helper-hidden-accessible") );
ok( label.is(".ui-button") );
});
test("radios", function() {
expect( 4 );
var inputs = $("#radio0 input"),
labels = $("#radio0 label");
ok( inputs.is(":visible") );
ok( labels.is(":not(.ui-button)") );
inputs.button();
ok( inputs.is(".ui-helper-hidden-accessible") );
ok( labels.is(".ui-button") );
});
function assert(noForm, form1, form2) {
ok( $("#radio0 .ui-button" + noForm).is(".ui-state-active") );
ok( $("#radio1 .ui-button" + form1).is(".ui-state-active") );
ok( $("#radio2 .ui-button" + form2).is(".ui-state-active") );
}
test("radio groups", function() {
expect( 12 );
$("input[type=radio]").button();
assert(":eq(0)", ":eq(1)", ":eq(2)");
// click outside of forms
$("#radio0 .ui-button:eq(1)").click();
assert(":eq(1)", ":eq(1)", ":eq(2)");
// click in first form
$("#radio1 .ui-button:eq(0)").click();
assert(":eq(1)", ":eq(0)", ":eq(2)");
// click in second form
$("#radio2 .ui-button:eq(0)").click();
assert(":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() {
expect( 2 );
var input = $("#submit");
deepEqual( input.children().length, 0 );
input.button();
deepEqual( input.children().length, 0 );
});
test("buttonset", function() {
expect( 6 );
var set = $("#radio1").buttonset();
ok( set.is(".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() {
expect( 6 );
var set,
parent = $("#radio1").parent();
// Set to rtl
parent.attr("dir", "rtl");
set = $("#radio1").buttonset();
ok( set.is(".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() {
expect( 3 );
$("#check2").button().change( function() {
var lbl = $( this ).button("widget");
ok( this.checked, "checked ok" );
ok( lbl.attr("aria-pressed") === "true", "aria ok" );
ok( lbl.hasClass("ui-state-active"), "ui-state-active ok" );
});
// 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() {
expect( 5 );
var group = $( "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>" );
group.find( "input[type=checkbox]" ).button();
ok( group.find( "label" ).is( ".ui-button" ) );
group = $( "<input type='checkbox' id='t7092b'><label for='t7092b'></label>" );
group.filter( "input[type=checkbox]" ).button();
ok( group.filter( "label" ).is( ".ui-button" ) );
group = $( "<span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label>" );
group.find( "input[type=checkbox]" ).button();
ok( group.filter( "label" ).is( ".ui-button" ) );
group = $( "<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>" );
group.find( "input[type=checkbox]" ).button();
ok( group.find( "label" ).is( ".ui-button" ) );
group = $( "<input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>" );
group.filter( "input[type=checkbox]" ).button();
ok( group.find( "label" ).is( ".ui-button" ) );
});
test( "#5946 - buttonset should ignore buttons that are not :visible", function() {
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)" ) );
ok( set.find( "label:eq(1)" ).is( ".ui-button.ui-corner-left" ) );
});
test( "#6262 - buttonset not applying ui-corner to invisible elements", function() {
expect( 3 );
$( "#radio0" ).hide();
var set = $( "#radio0" ).buttonset();
ok( set.find( "label:eq(0)" ).is( ".ui-button.ui-corner-left" ) );
ok( set.find( "label:eq(1)" ).is( ".ui-button" ) );
ok( set.find( "label:eq(2)" ).is( ".ui-button.ui-corner-right" ) );
});
asyncTest( "Resetting a button's form should refresh the visual state of the button widget to match.", function() {
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" );
ok( !checkbox.button( "widget" ).hasClass( "ui-state-active" ) );
form.get( 0 ).reset();
// #9213: If a button has been removed, refresh should not be called on it when
// its corresponding form is reset.
button.remove();
setTimeout(function() {
ok( checkbox.button( "widget" ).hasClass( "ui-state-active" ));
start();
}, 1 );
});
asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function() {
expect( 2 );
var check = $( "#check" ).button(),
label = $( "label[for='check']" );
ok( !label.is( ".ui-state-focus" ) );
check.focus();
setTimeout(function() {
ok( label.is( ".ui-state-focus" ) );
start();
});
});
test( "#7534 - Button label selector works for ids with \":\"", function() {
expect( 1 );
var group = $( "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>" );
group.find( "input" ).button();
ok( group.find( "label" ).is( ".ui-button" ), "Found an id with a :" );
});
asyncTest( "#9169 - Disabled button maintains ui-state-focus", function() {
expect( 2 );
var element = $( "#button1" ).button();
element[ 0 ].focus();
setTimeout(function() {
ok( element.hasClass( "ui-state-focus" ), "button has ui-state-focus" );
element.button( "disable" );
ok( !element.hasClass( "ui-state-focus" ),
"button does not have ui-state-focus when disabled" );
start();
});
});
})(jQuery);

36
jquery-ui/tests/unit/button/button_events.js vendored Normal file
View file

@ -0,0 +1,36 @@
/*
* button_events.js
*/
(function($) {
module("button: events");
test("buttonset works with single-quote named elements (#7505)", function() {
expect( 1 );
$("#radio3").buttonset();
$("#radio33").click( function(){
ok( true, "button clicks work with single-quote named elements" );
}).click();
});
asyncTest( "when button loses focus, ensure active state is removed (#8559)", function() {
expect( 1 );
var element = $( "#button" ).button();
element.one( "keypress", function() {
element.one( "blur", function() {
ok( !element.is(".ui-state-active"), "button loses active state appropriately" );
start();
}).blur();
});
element.focus();
setTimeout(function() {
element
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } )
.simulate( "keypress", { keyCode: $.ui.keyCode.ENTER } );
});
});
})(jQuery);

74
jquery-ui/tests/unit/button/button_methods.js vendored Normal file
View file

@ -0,0 +1,74 @@
/*
* button_methods.js
*/
(function($) {
module("button: methods");
test("destroy", function() {
expect( 1 );
domEqual( "#button", function() {
$( "#button" ).button().button( "destroy" );
});
});
test( "refresh: Ensure disabled state is preserved correctly.", function() {
expect( 8 );
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" );
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" );
equal( radioButtonset.find( ":ui-button" ).length, 4, "radio" );
equal( checkboxButtonset.find( ":ui-button" ).length, 4, "checkbox" );
});
})(jQuery);

159
jquery-ui/tests/unit/button/button_options.js vendored Normal file
View file

@ -0,0 +1,159 @@
/*
* button_options.js
*/
(function($) {
module( "button: options" );
test( "disabled, explicit value", function() {
expect( 9 );
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" );
ok( !element.button( "widget" ).hasClass( "ui-state-disabled" ), "element gets ui-state-disabled" );
ok( !element.button( "widget" ).hasClass( "ui-button-disabled" ), "element gets ui-button-disabled" );
element = $( "#radio02" ).button({ disabled: true });
ok( element.button( "widget" ).hasClass( "ui-state-disabled" ), "element gets ui-state-disabled" );
ok( !element.button( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" );
ok( element.button( "widget" ).hasClass( "ui-button-disabled" ), "element gets ui-button-disabled" );
deepEqual( element.button( "option", "disabled" ), true, "disabled option set to true" );
deepEqual( element.prop( "disabled" ), true, "element is not disabled" );
});
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");
$("#radio02").prop("disabled", true).button({ disabled: null });
deepEqual(true, $("#radio02").button("option", "disabled"),
"disabled option set to true");
deepEqual(true, $("#radio02").prop("disabled"), "element is not disabled");
});
test( "disabled, ui-state-active is removed unless checkbox or radio", function() {
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" );
ok( buttonElement.hasClass( "ui-state-active" ),
"[" + elementType + "] has ui-state-active class after mousedown." );
element.button( "disable" );
if ( element.is( "[type=checkbox], [type=radio]" ) ) {
ok( buttonElement.hasClass( "ui-state-active" ),
"Disabled [" + elementType + "] has ui-state-active class." );
} else {
ok( !buttonElement.hasClass( "ui-state-active" ),
"Disabled [" + elementType + "] does not have ui-state-active class." );
}
});
});
test("text false without icon", function() {
expect( 1 );
$("#button").button({
text: false
});
ok( $("#button").is(".ui-button-text-only:not(.ui-button-icon-only)") );
$("#button").button("destroy");
});
test("text false with icon", function() {
expect( 1 );
$("#button").button({
text: false,
icons: {
primary: "iconclass"
}
});
ok( $("#button").is(".ui-button-icon-only:not(.ui-button-text):has(span.ui-icon.iconclass)") );
$("#button").button("destroy");
});
test("label, default", function() {
expect( 2 );
$("#button").button();
deepEqual( $("#button").text(), "Label" );
deepEqual( $( "#button").button( "option", "label" ), "Label" );
$("#button").button("destroy");
});
test("label", function() {
expect( 2 );
$("#button").button({
label: "xxx"
});
deepEqual( $("#button").text(), "xxx" );
deepEqual( $("#button").button( "option", "label" ), "xxx" );
$("#button").button("destroy");
});
test("label default with input type submit", function() {
expect( 2 );
deepEqual( $("#submit").button().val(), "Label" );
deepEqual( $("#submit").button( "option", "label" ), "Label" );
});
test("label with input type submit", function() {
expect( 2 );
var label = $("#submit").button({
label: "xxx"
}).val();
deepEqual( label, "xxx" );
deepEqual( $("#submit").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)") );
$("#button").button("destroy");
});
test( "#5295 - button does not remove hoverstate if disabled" , function() {
expect( 1 );
var btn = $("#button").button();
btn.hover( function() {
btn.button( "disable" );
});
btn.trigger( "mouseenter" );
btn.trigger( "mouseleave" );
ok( !btn.is( ".ui-state-hover") );
});
})(jQuery);

26
jquery-ui/tests/unit/core/all.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Core Test Suite</title>
<script src="../../../external/jquery/jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<link rel="stylesheet" href="../qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../qunit-composite.js"></script>
<script src="../subsuite.js"></script>
<script>
testAllVersions( "core" );
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
</div>
</body>
</html>

125
jquery-ui/tests/unit/core/core.html Normal file
View file

@ -0,0 +1,125 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Core Test Suite</title>
<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script>
TestHelpers.loadResources({
js: [ "ui/core.js" ]
});
</script>
<script src="core.js"></script>
<script src="selector.js"></script>
<script src="../swarminject.js"></script>
<style>
.zindex {
z-index: 100;
}
.absolute {
position: absolute;
}
</style>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<img src="../../images/jqueryui_32x32.png" usemap="#mymap" width="10" height="10" alt="">
<map name="mymap">
<area shape="rect" coords="1,1,2,2" href="foo.html" id="areaCoordsHref" alt="">
<area href="foo.html" id="areaNoCoordsHref" alt="">
</map>
<map name="mymap2">
<area shape="rect" coords="1,1,2,2" href="foo.html" id="areaNoImg" alt="">
</map>
<form id="formNoTabindex">
<input>
</form>
<form id="formTabindex" tabindex="1">
<input>
</form>
<div>
<input id="visibleAncestor-inputTypeNone">
<input type="text" id="visibleAncestor-inputTypeText">
<input type="checkbox" id="visibleAncestor-inputTypeCheckbox">
<input type="radio" id="visibleAncestor-inputTypeRadio">
<input type="button" id="visibleAncestor-inputTypeButton" value="visibleAncestor-inputTypeButton">
<input type="hidden" id="visibleAncestor-inputTypeHidden">
<button id="visibleAncestor-button">x</button>
<select id="visibleAncestor-select">
<option>option</option>
</select>
<textarea id="visibleAncestor-textarea">x</textarea>
<object id="visibleAncestor-object" codebase="about:blank">xxx</object>
<a href="#" id="visibleAncestor-anchorWithHref">anchor</a>
<a id="visibleAncestor-anchorWithoutHref">anchor</a>
<span id="visibleAncestor-span">x</span>
<div id="visibleAncestor-div">x</div>
<span id="visibleAncestor-spanWithTabindex" tabindex="1">x</span>
<div id="visibleAncestor-divWithNegativeTabindex" tabindex="-1">x</div>
</div>
<div>
<input id="disabledElement-inputTypeNone" disabled="disabled">
<input type="text" id="disabledElement-inputTypeText" disabled="disabled">
<input type="checkbox" id="disabledElement-inputTypeCheckbox" disabled="disabled">
<input type="radio" id="disabledElement-inputTypeRadio" disabled="disabled">
<input type="button" id="disabledElement-inputTypeButton" disabled="disabled" value="disabledElement-inputTypeButton">
<input type="hidden" id="disabledElement-inputTypeHidden" disabled="disabled">
<button id="disabledElement-button" disabled="disabled"></button>
<select id="disabledElement-select" disabled="disabled"></select>
<textarea id="disabledElement-textarea" disabled="disabled"></textarea>
</div>
<div>
<div id="displayNoneAncestor" style="display: none;">
<input id="displayNoneAncestor-input">
<span tabindex="1" id="displayNoneAncestor-span">.</span>
</div>
<div id="visibilityHiddenAncestor" style="visibility: hidden;">
<input id="visibilityHiddenAncestor-input">
<span tabindex="1" id="visibilityHiddenAncestor-span">.</span>
</div>
<span tabindex="1" id="displayNone-span" style="display: none;">.</span>
<span tabindex="1" id="visibilityHidden-span" style="visibility: hidden;">.</span>
<input id="displayNone-input" style="display: none;">
<input id="visibilityHidden-input" style="visibility: hidden;">
</div>
<div>
<input id="inputTabindex0" tabindex="0">
<input id="inputTabindex10" tabindex="10">
<input id="inputTabindex-1" tabindex="-1">
<input id="inputTabindex-50" tabindex="-50">
<span id="spanTabindex0" tabindex="0">.</span>
<span id="spanTabindex10" tabindex="10">.</span>
<span id="spanTabindex-1" tabindex="-1">.</span>
<span id="spanTabindex-50" tabindex="-50">.</span>
</div>
<div style="width: 0; height: 0;">
<input id="dimensionlessParent">
<input id="dimensionlessParent-dimensionless" style="height: 0; width: 0;">
</div>
<div id="dimensions" style="float: left; height: 50px; width: 100px; margin: 1px 12px 11px 2px; border-style: solid; border-width: 3px 14px 13px 4px; padding: 5px 16px 15px 6px;"></div>
</div>
</body>
</html>

144
jquery-ui/tests/unit/core/core.js vendored Normal file
View file

@ -0,0 +1,144 @@
(function( $ ) {
module( "core - jQuery extensions" );
TestHelpers.testJshint( "core" );
test( "innerWidth - getter", function() {
expect( 2 );
var el = $( "#dimensions" );
equal( el.innerWidth(), 122, "getter passthru" );
el.hide();
equal( el.innerWidth(), 122, "getter passthru when hidden" );
});
test( "innerWidth - setter", function() {
expect( 2 );
var el = $( "#dimensions" );
el.innerWidth( 120 );
equal( el.width(), 98, "width set properly" );
el.hide();
el.innerWidth( 100 );
equal( el.width(), 78, "width set properly when hidden" );
});
test( "innerHeight - getter", function() {
expect( 2 );
var el = $( "#dimensions" );
equal( el.innerHeight(), 70, "getter passthru" );
el.hide();
equal( el.innerHeight(), 70, "getter passthru when hidden" );
});
test( "innerHeight - setter", function() {
expect( 2 );
var el = $( "#dimensions" );
el.innerHeight( 60 );
equal( el.height(), 40, "height set properly" );
el.hide();
el.innerHeight( 50 );
equal( el.height(), 30, "height set properly when hidden" );
});
test( "outerWidth - getter", function() {
expect( 2 );
var el = $( "#dimensions" );
equal( el.outerWidth(), 140, "getter passthru" );
el.hide();
equal( el.outerWidth(), 140, "getter passthru when hidden" );
});
test( "outerWidth - setter", function() {
expect( 2 );
var el = $( "#dimensions" );
el.outerWidth( 130 );
equal( el.width(), 90, "width set properly" );
el.hide();
el.outerWidth( 120 );
equal( el.width(), 80, "width set properly when hidden" );
});
test( "outerWidth(true) - getter", function() {
expect( 2 );
var el = $( "#dimensions" );
equal( el.outerWidth(true), 154, "getter passthru w/ margin" );
el.hide();
equal( el.outerWidth(true), 154, "getter passthru w/ margin when hidden" );
});
test( "outerWidth(true) - setter", function() {
expect( 2 );
var el = $( "#dimensions" );
el.outerWidth( 130, true );
equal( el.width(), 76, "width set properly" );
el.hide();
el.outerWidth( 120, true );
equal( el.width(), 66, "width set properly when hidden" );
});
test( "outerHeight - getter", function() {
expect( 2 );
var el = $( "#dimensions" );
equal( el.outerHeight(), 86, "getter passthru" );
el.hide();
equal( el.outerHeight(), 86, "getter passthru when hidden" );
});
test( "outerHeight - setter", function() {
expect( 2 );
var el = $( "#dimensions" );
el.outerHeight( 80 );
equal( el.height(), 44, "height set properly" );
el.hide();
el.outerHeight( 70 );
equal( el.height(), 34, "height set properly when hidden" );
});
test( "outerHeight(true) - getter", function() {
expect( 2 );
var el = $( "#dimensions" );
equal( el.outerHeight(true), 98, "getter passthru w/ margin" );
el.hide();
equal( el.outerHeight(true), 98, "getter passthru w/ margin when hidden" );
});
test( "outerHeight(true) - setter", function() {
expect( 2 );
var el = $( "#dimensions" );
el.outerHeight( 90, true );
equal( el.height(), 42, "height set properly" );
el.hide();
el.outerHeight( 80, true );
equal( el.height(), 32, "height set properly when hidden" );
});
test( "uniqueId / removeUniqueId", function() {
expect( 3 );
var el = $( "img" ).eq( 0 );
// support: jQuery <1.6.2
// support: IE <8
// We should use strictEqual( id, undefined ) when dropping jQuery 1.6.1 support (or IE6/7)
ok( !el.attr( "id" ), "element has no initial id" );
el.uniqueId();
ok( /ui-id-\d+$/.test( el.attr( "id" ) ), "element has generated id" );
el.removeUniqueId();
// support: jQuery <1.6.2
// support: IE <8
// see above
ok( !el.attr( "id" ), "unique id has been removed from element" );
});
})( jQuery );

132
jquery-ui/tests/unit/core/core_deprecated.html Normal file
View file

@ -0,0 +1,132 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Core Test Suite</title>
<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script>
TestHelpers.loadResources({
js: [ "ui/core.js" ]
});
</script>
<script src="core.js"></script>
<script src="selector.js"></script>
<script src="core_deprecated.js"></script>
<script src="../swarminject.js"></script>
<style>
.zindex {
z-index: 100;
}
.absolute {
position: absolute;
}
</style>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<img src="../../images/jqueryui_32x32.png" usemap="#mymap" width="10" height="10" alt="">
<map name="mymap">
<area shape="rect" coords="1,1,2,2" href="foo.html" id="areaCoordsHref" alt="">
<area href="foo.html" id="areaNoCoordsHref" alt="">
</map>
<map name="mymap2">
<area shape="rect" coords="1,1,2,2" href="foo.html" id="areaNoImg" alt="">
</map>
<form id="formNoTabindex"></form>
<form id="formTabindex" tabindex="1"></form>
<div>
<input id="visibleAncestor-inputTypeNone">
<input type="text" id="visibleAncestor-inputTypeText">
<input type="checkbox" id="visibleAncestor-inputTypeCheckbox">
<input type="radio" id="visibleAncestor-inputTypeRadio">
<input type="button" id="visibleAncestor-inputTypeButton" value="visibleAncestor-inputTypeButton">
<input type="hidden" id="visibleAncestor-inputTypeHidden">
<button id="visibleAncestor-button">x</button>
<select id="visibleAncestor-select">
<option>option</option>
</select>
<textarea id="visibleAncestor-textarea">x</textarea>
<object id="visibleAncestor-object" codebase="about:blank">xxx</object>
<a href="#" id="visibleAncestor-anchorWithHref">anchor</a>
<a id="visibleAncestor-anchorWithoutHref">anchor</a>
<span id="visibleAncestor-span">x</span>
<div id="visibleAncestor-div">x</div>
<span id="visibleAncestor-spanWithTabindex" tabindex="1">x</span>
<div id="visibleAncestor-divWithNegativeTabindex" tabindex="-1">x</div>
</div>
<div>
<input id="disabledElement-inputTypeNone" disabled="disabled">
<input type="text" id="disabledElement-inputTypeText" disabled="disabled">
<input type="checkbox" id="disabledElement-inputTypeCheckbox" disabled="disabled">
<input type="radio" id="disabledElement-inputTypeRadio" disabled="disabled">
<input type="button" id="disabledElement-inputTypeButton" disabled="disabled" value="disabledElement-inputTypeButton">
<input type="hidden" id="disabledElement-inputTypeHidden" disabled="disabled">
<button id="disabledElement-button" disabled="disabled"></button>
<select id="disabledElement-select" disabled="disabled"></select>
<textarea id="disabledElement-textarea" disabled="disabled"></textarea>
</div>
<div>
<div id="displayNoneAncestor" style="display: none;">
<input id="displayNoneAncestor-input">
<span tabindex="1" id="displayNoneAncestor-span">.</span>
</div>
<div id="visibilityHiddenAncestor" style="visibility: hidden;">
<input id="visibilityHiddenAncestor-input">
<span tabindex="1" id="visibilityHiddenAncestor-span">.</span>
</div>
<span tabindex="1" id="displayNone-span" style="display: none;">.</span>
<span tabindex="1" id="visibilityHidden-span" style="visibility: hidden;">.</span>
<input id="displayNone-input" style="display: none;">
<input id="visibilityHidden-input" style="visibility: hidden;">
</div>
<div>
<input id="inputTabindex0" tabindex="0">
<input id="inputTabindex10" tabindex="10">
<input id="inputTabindex-1" tabindex="-1">
<input id="inputTabindex-50" tabindex="-50">
<span id="spanTabindex0" tabindex="0">.</span>
<span id="spanTabindex10" tabindex="10">.</span>
<span id="spanTabindex-1" tabindex="-1">.</span>
<span id="spanTabindex-50" tabindex="-50">.</span>
</div>
<div style="width: 0; height: 0;">
<input id="dimensionlessParent">
<input id="dimensionlessParent-dimensionless" style="height: 0; width: 0;">
</div>
<div id="zIndex100" style="z-index: 100; position: absolute">
<div id="zIndexAutoWithParent">.</div>
</div>
<div id="zIndex100ViaCSS" class="zindex">
<div id="zIndexAutoWithParentViaCSS">.</div>
</div>
<div id="zIndex100ViaCSSPositioned" class="zindex absolute">
<div id="zIndexAutoWithParentViaCSSPositioned">.</div>
</div>
<div id="zIndexAutoNoParent"></div>
<div id="dimensions" style="float: left; height: 50px; width: 100px; margin: 1px 12px 11px 2px; border-style: solid; border-width: 3px 14px 13px 4px; padding: 5px 16px 15px 6px;"></div>
</div>
</body>
</html>

52
jquery-ui/tests/unit/core/core_deprecated.js vendored Normal file
View file

@ -0,0 +1,52 @@
(function( $ ) {
module( "core - deprecated" );
asyncTest( "focus - original functionality", function() {
expect( 1 );
$( "#inputTabindex0" )
.one( "focus", function() {
ok( true, "event triggered" );
start();
})
.focus();
});
asyncTest( "focus", function() {
expect( 2 );
// support: IE 8
// IE sometimes gets confused about what's focused if we don't explicitly
// focus a different element first
$( "body" ).focus();
$( "#inputTabindex0" )
.one( "focus", function() {
ok( true, "event triggered" );
start();
})
.focus( 500, function() {
ok( true, "callback triggered" );
});
});
test( "zIndex", function() {
expect( 7 );
var el = $( "#zIndexAutoWithParent" ),
parent = el.parent();
equal( el.zIndex(), 100, "zIndex traverses up to find value" );
equal( parent.zIndex(200 ), parent, "zIndex setter is chainable" );
equal( el.zIndex(), 200, "zIndex setter changed zIndex" );
el = $( "#zIndexAutoWithParentViaCSS" );
equal( el.zIndex(), 0, "zIndex traverses up to find CSS value, not found because not positioned" );
el = $( "#zIndexAutoWithParentViaCSSPositioned" );
equal( el.zIndex(), 100, "zIndex traverses up to find CSS value" );
el.parent().zIndex( 200 );
equal( el.zIndex(), 200, "zIndex setter changed zIndex, overriding CSS" );
equal( $( "#zIndexAutoNoParent" ).zIndex(), 0, "zIndex never explicitly set in hierarchy" );
});
})( jQuery );

254
jquery-ui/tests/unit/core/selector.js vendored Normal file
View file

@ -0,0 +1,254 @@
(function( $ ) {
module( "core - selectors" );
function isFocusable( selector, msg ) {
QUnit.push( $( selector ).is( ":focusable" ), null, null,
msg + " - selector " + selector + " is focusable" );
}
function isNotFocusable( selector, msg ) {
QUnit.push( $( selector ).length && !$( selector ).is(":focusable"), null, null,
msg + " - selector " + selector + " is not focusable" );
}
function isTabbable( selector, msg ) {
QUnit.push( $( selector ).is( ":tabbable" ), null, null,
msg + " - selector " + selector + " is tabbable" );
}
function isNotTabbable( selector, msg ) {
QUnit.push( $( selector ).length && !$( selector ).is( ":tabbable" ), null, null,
msg + " - selector " + selector + " is not tabbable" );
}
test( "data", function() {
expect( 15 );
var element;
function shouldHaveData( msg ) {
ok( element.is( ":data(test)" ), msg );
}
function shouldNotHaveData( msg ) {
ok( !element.is( ":data(test)" ), msg );
}
element = $( "<div>" );
shouldNotHaveData( "data never set" );
element = $( "<div>" ).data( "test", null );
shouldNotHaveData( "data is null" );
element = $( "<div>" ).data( "test", true );
shouldHaveData( "data set to true" );
element = $( "<div>" ).data( "test", false );
shouldNotHaveData( "data set to false" );
element = $( "<div>" ).data( "test", 0 );
shouldNotHaveData( "data set to 0" );
element = $( "<div>" ).data( "test", 1 );
shouldHaveData( "data set to 1" );
element = $( "<div>" ).data( "test", "" );
shouldNotHaveData( "data set to empty string" );
element = $( "<div>" ).data( "test", "foo" );
shouldHaveData( "data set to string" );
element = $( "<div>" ).data( "test", [] );
shouldHaveData( "data set to empty array" );
element = $( "<div>" ).data( "test", [ 1 ] );
shouldHaveData( "data set to array" );
element = $( "<div>" ).data( "test", {} );
shouldHaveData( "data set to empty object" );
element = $( "<div>" ).data( "test", { foo: "bar" } );
shouldHaveData( "data set to object" );
element = $( "<div>" ).data( "test", new Date() );
shouldHaveData( "data set to date" );
element = $( "<div>" ).data( "test", /test/ );
shouldHaveData( "data set to regexp" );
element = $( "<div>" ).data( "test", function() {} );
shouldHaveData( "data set to function" );
});
test( "focusable - visible, enabled elements", function() {
expect( 18 );
isNotFocusable( "#formNoTabindex", "form" );
isFocusable( "#formTabindex", "form with tabindex" );
isFocusable( "#visibleAncestor-inputTypeNone", "input, no type" );
isFocusable( "#visibleAncestor-inputTypeText", "input, type text" );
isFocusable( "#visibleAncestor-inputTypeCheckbox", "input, type checkbox" );
isFocusable( "#visibleAncestor-inputTypeRadio", "input, type radio" );
isFocusable( "#visibleAncestor-inputTypeButton", "input, type button" );
isNotFocusable( "#visibleAncestor-inputTypeHidden", "input, type hidden" );
isFocusable( "#visibleAncestor-button", "button" );
isFocusable( "#visibleAncestor-select", "select" );
isFocusable( "#visibleAncestor-textarea", "textarea" );
isFocusable( "#visibleAncestor-object", "object" );
isFocusable( "#visibleAncestor-anchorWithHref", "anchor with href" );
isNotFocusable( "#visibleAncestor-anchorWithoutHref", "anchor without href" );
isNotFocusable( "#visibleAncestor-span", "span" );
isNotFocusable( "#visibleAncestor-div", "div" );
isFocusable( "#visibleAncestor-spanWithTabindex", "span with tabindex" );
isFocusable( "#visibleAncestor-divWithNegativeTabindex", "div with tabindex" );
});
test( "focusable - disabled elements", function() {
expect( 9 );
isNotFocusable( "#disabledElement-inputTypeNone", "input, no type" );
isNotFocusable( "#disabledElement-inputTypeText", "input, type text" );
isNotFocusable( "#disabledElement-inputTypeCheckbox", "input, type checkbox" );
isNotFocusable( "#disabledElement-inputTypeRadio", "input, type radio" );
isNotFocusable( "#disabledElement-inputTypeButton", "input, type button" );
isNotFocusable( "#disabledElement-inputTypeHidden", "input, type hidden" );
isNotFocusable( "#disabledElement-button", "button" );
isNotFocusable( "#disabledElement-select", "select" );
isNotFocusable( "#disabledElement-textarea", "textarea" );
});
test( "focusable - hidden styles", function() {
expect( 8 );
isNotFocusable( "#displayNoneAncestor-input", "input, display: none parent" );
isNotFocusable( "#displayNoneAncestor-span", "span with tabindex, display: none parent" );
isNotFocusable( "#visibilityHiddenAncestor-input", "input, visibility: hidden parent" );
isNotFocusable( "#visibilityHiddenAncestor-span", "span with tabindex, visibility: hidden parent" );
isNotFocusable( "#displayNone-input", "input, display: none" );
isNotFocusable( "#visibilityHidden-input", "input, visibility: hidden" );
isNotFocusable( "#displayNone-span", "span with tabindex, display: none" );
isNotFocusable( "#visibilityHidden-span", "span with tabindex, visibility: hidden" );
});
test( "focusable - natively focusable with various tabindex", function() {
expect( 4 );
isFocusable( "#inputTabindex0", "input, tabindex 0" );
isFocusable( "#inputTabindex10", "input, tabindex 10" );
isFocusable( "#inputTabindex-1", "input, tabindex -1" );
isFocusable( "#inputTabindex-50", "input, tabindex -50" );
});
test( "focusable - not natively focusable with various tabindex", function() {
expect( 4 );
isFocusable( "#spanTabindex0", "span, tabindex 0" );
isFocusable( "#spanTabindex10", "span, tabindex 10" );
isFocusable( "#spanTabindex-1", "span, tabindex -1" );
isFocusable( "#spanTabindex-50", "span, tabindex -50" );
});
test( "focusable - area elements", function() {
expect( 3 );
isFocusable( "#areaCoordsHref", "coords and href" );
isFocusable( "#areaNoCoordsHref", "href but no coords" );
isNotFocusable( "#areaNoImg", "not associated with an image" );
});
test( "focusable - dimensionless parent with overflow", function() {
expect( 1 );
isFocusable( "#dimensionlessParent", "input" );
});
test( "tabbable - visible, enabled elements", function() {
expect( 18 );
isNotTabbable( "#formNoTabindex", "form" );
isTabbable( "#formTabindex", "form with tabindex" );
isTabbable( "#visibleAncestor-inputTypeNone", "input, no type" );
isTabbable( "#visibleAncestor-inputTypeText", "input, type text" );
isTabbable( "#visibleAncestor-inputTypeCheckbox", "input, type checkbox" );
isTabbable( "#visibleAncestor-inputTypeRadio", "input, type radio" );
isTabbable( "#visibleAncestor-inputTypeButton", "input, type button" );
isNotTabbable( "#visibleAncestor-inputTypeHidden", "input, type hidden" );
isTabbable( "#visibleAncestor-button", "button" );
isTabbable( "#visibleAncestor-select", "select" );
isTabbable( "#visibleAncestor-textarea", "textarea" );
isTabbable( "#visibleAncestor-object", "object" );
isTabbable( "#visibleAncestor-anchorWithHref", "anchor with href" );
isNotTabbable( "#visibleAncestor-anchorWithoutHref", "anchor without href" );
isNotTabbable( "#visibleAncestor-span", "span" );
isNotTabbable( "#visibleAncestor-div", "div" );
isTabbable( "#visibleAncestor-spanWithTabindex", "span with tabindex" );
isNotTabbable( "#visibleAncestor-divWithNegativeTabindex", "div with tabindex" );
});
test( "tabbable - disabled elements", function() {
expect( 9 );
isNotTabbable( "#disabledElement-inputTypeNone", "input, no type" );
isNotTabbable( "#disabledElement-inputTypeText", "input, type text" );
isNotTabbable( "#disabledElement-inputTypeCheckbox", "input, type checkbox" );
isNotTabbable( "#disabledElement-inputTypeRadio", "input, type radio" );
isNotTabbable( "#disabledElement-inputTypeButton", "input, type button" );
isNotTabbable( "#disabledElement-inputTypeHidden", "input, type hidden" );
isNotTabbable( "#disabledElement-button", "button" );
isNotTabbable( "#disabledElement-select", "select" );
isNotTabbable( "#disabledElement-textarea", "textarea" );
});
test( "tabbable - hidden styles", function() {
expect( 8 );
isNotTabbable( "#displayNoneAncestor-input", "input, display: none parent" );
isNotTabbable( "#displayNoneAncestor-span", "span with tabindex, display: none parent" );
isNotTabbable( "#visibilityHiddenAncestor-input", "input, visibility: hidden parent" );
isNotTabbable( "#visibilityHiddenAncestor-span", "span with tabindex, visibility: hidden parent" );
isNotTabbable( "#displayNone-input", "input, display: none" );
isNotTabbable( "#visibilityHidden-input", "input, visibility: hidden" );
isNotTabbable( "#displayNone-span", "span with tabindex, display: none" );
isNotTabbable( "#visibilityHidden-span", "span with tabindex, visibility: hidden" );
});
test( "tabbable - natively tabbable with various tabindex", function() {
expect( 4 );
isTabbable( "#inputTabindex0", "input, tabindex 0" );
isTabbable( "#inputTabindex10", "input, tabindex 10" );
isNotTabbable( "#inputTabindex-1", "input, tabindex -1" );
isNotTabbable( "#inputTabindex-50", "input, tabindex -50" );
});
test( "tabbable - not natively tabbable with various tabindex", function() {
expect( 4 );
isTabbable( "#spanTabindex0", "span, tabindex 0" );
isTabbable( "#spanTabindex10", "span, tabindex 10" );
isNotTabbable( "#spanTabindex-1", "span, tabindex -1" );
isNotTabbable( "#spanTabindex-50", "span, tabindex -50" );
});
test( "tabbable - area elements", function() {
expect( 3 );
isTabbable( "#areaCoordsHref", "coords and href" );
isTabbable( "#areaNoCoordsHref", "href but no coords" );
isNotTabbable( "#areaNoImg", "not associated with an image" );
});
test( "tabbable - dimensionless parent with overflow", function() {
expect( 1 );
isTabbable( "#dimensionlessParent", "input" );
});
})( jQuery );

26
jquery-ui/tests/unit/datepicker/all.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker Test Suite</title>
<script src="../../../external/jquery/jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<link rel="stylesheet" href="../qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../qunit-composite.js"></script>
<script src="../subsuite.js"></script>
<script>
testAllVersions( "datepicker" );
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
</div>
</body>
</html>

44
jquery-ui/tests/unit/datepicker/datepicker.html Normal file
View file

@ -0,0 +1,44 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker Test Suite</title>
<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script>
TestHelpers.loadResources({
css: [ "core", "datepicker" ],
js: [
"ui/core.js",
"ui/datepicker.js",
"ui/i18n/datepicker-fr.js",
"ui/i18n/datepicker-he.js",
"ui/i18n/datepicker-zh-CN.js"
]
});
</script>
<script src="datepicker_common.js"></script>
<script src="datepicker_core.js"></script>
<script src="datepicker_events.js"></script>
<script src="datepicker_methods.js"></script>
<script src="datepicker_options.js"></script>
<script src="datepicker_test_helpers.js"></script>
<script src="../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div><input type="text" id="inp"><input type="text" id="alt"><div id="inl"></div></div>
<p><input type="text" id="inp2"></p>
</div>
</body>
</html>

7
jquery-ui/tests/unit/datepicker/datepicker_common.js vendored Normal file
View file

@ -0,0 +1,7 @@
/*
TestHelpers.commonWidgetTests( "datepicker", {
defaults: {
disabled: false
}
});
*/

528
jquery-ui/tests/unit/datepicker/datepicker_core.js vendored Normal file
View file

@ -0,0 +1,528 @@
/*
* datepicker_core.js
*/
(function($) {
module( "datepicker: core", {
setup: function() {
$( "body" ).focus();
}
});
TestHelpers.testJshint( "datepicker" );
test("initialization - Reinitialization after body had been emptied.", function() {
expect( 1 );
var bodyContent = $("body").children(), inp = $("#inp");
$("#inp").datepicker();
$("body").empty().append(inp);
$("#inp").datepicker();
ok( $("#"+$.datepicker._mainDivId).length===1, "Datepicker container added" );
$("body").empty().append(bodyContent); // Returning to initial state for later tests
});
test( "widget method - empty collection", function() {
expect( 1 );
$( "#nonExist" ).datepicker(); // should create nothing
ok( !$( "#ui-datepicker-div" ).length, "Non init on empty collection" );
});
test("widget method", function() {
expect( 1 );
var actual = $("#inp").datepicker().datepicker("widget")[0];
deepEqual($("body > #ui-datepicker-div:last-child")[0], actual);
});
asyncTest( "baseStructure", function() {
expect( 58 );
var header, title, table, thead, week, panel, inl, child,
inp = TestHelpers.datepicker.initNewInput(),
dp = $( "#ui-datepicker-div" );
function step1() {
TestHelpers.datepicker.onFocus( inp, function() {
ok( dp.is( ":visible" ), "Structure - datepicker visible" );
ok( !dp.is( ".ui-datepicker-rtl" ), "Structure - not right-to-left" );
ok( !dp.is( ".ui-datepicker-multi" ), "Structure - not multi-month" );
equal( dp.children().length, 2, "Structure - child count" );
header = dp.children( ":first" );
ok( header.is( "div.ui-datepicker-header" ), "Structure - header division" );
equal( header.children().length, 3, "Structure - header child count" );
ok( header.children( ":first" ).is( "a.ui-datepicker-prev" ) && header.children( ":first" ).html() !== "", "Structure - prev link" );
ok( header.children( ":eq(1)" ).is( "a.ui-datepicker-next" ) && header.children( ":eq(1)" ).html() !== "", "Structure - next link" );
title = header.children( ":last" );
ok( title.is( "div.ui-datepicker-title" ) && title.html() !== "","Structure - title division" );
equal( title.children().length, 2, "Structure - title child count" );
ok( title.children( ":first" ).is( "span.ui-datepicker-month" ) && title.children( ":first" ).text() !== "", "Structure - month text" );
ok( title.children( ":last" ).is( "span.ui-datepicker-year" ) && title.children( ":last" ).text() !== "", "Structure - year text" );
table = dp.children( ":eq(1)" );
ok( table.is( "table.ui-datepicker-calendar" ), "Structure - month table" );
ok( table.children( ":first" ).is( "thead" ), "Structure - month table thead" );
thead = table.children( ":first" ).children( ":first" );
ok( thead.is( "tr" ), "Structure - month table title row" );
equal( thead.find( "th" ).length, 7, "Structure - month table title cells" );
ok( table.children( ":eq(1)" ).is( "tbody" ), "Structure - month table body" );
ok( table.children( ":eq(1)" ).children( "tr" ).length >= 4, "Structure - month table week count" );
week = table.children( ":eq(1)" ).children( ":first" );
ok( week.is( "tr" ), "Structure - month table week row" );
equal( week.children().length, 7, "Structure - week child count" );
ok( week.children( ":first" ).is( "td.ui-datepicker-week-end" ), "Structure - month table first day cell" );
ok( week.children( ":last" ).is( "td.ui-datepicker-week-end" ), "Structure - month table second day cell" );
inp.datepicker( "hide" ).datepicker( "destroy" );
step2();
});
}
function step2() {
// Editable month/year and button panel
inp = TestHelpers.datepicker.initNewInput({
changeMonth: true,
changeYear: true,
showButtonPanel: true
});
TestHelpers.datepicker.onFocus( inp, function() {
title = dp.find( "div.ui-datepicker-title" );
ok( title.children( ":first" ).is( "select.ui-datepicker-month" ), "Structure - month selector" );
ok( title.children( ":last" ).is( "select.ui-datepicker-year" ), "Structure - year selector" );
panel = dp.children( ":last" );
ok( panel.is( "div.ui-datepicker-buttonpane" ), "Structure - button panel division" );
equal( panel.children().length, 2, "Structure - button panel child count" );
ok( panel.children( ":first" ).is( "button.ui-datepicker-current" ), "Structure - today button" );
ok( panel.children( ":last" ).is( "button.ui-datepicker-close" ), "Structure - close button" );
inp.datepicker( "hide" ).datepicker( "destroy" );
step3();
});
}
function step3() {
// Multi-month 2
inp = TestHelpers.datepicker.initNewInput({ numberOfMonths: 2 });
TestHelpers.datepicker.onFocus( inp, function() {
ok( dp.is( ".ui-datepicker-multi" ), "Structure multi [2] - multi-month" );
equal( dp.children().length, 3, "Structure multi [2] - child count" );
child = dp.children( ":first" );
ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-first" ), "Structure multi [2] - first month division" );
child = dp.children( ":eq(1)" );
ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-last" ), "Structure multi [2] - second month division" );
child = dp.children( ":eq(2)" );
ok( child.is( "div.ui-datepicker-row-break" ), "Structure multi [2] - row break" );
ok( dp.is( ".ui-datepicker-multi-2" ), "Structure multi [2] - multi-2" );
inp.datepicker( "hide" ).datepicker( "destroy" );
step4();
});
}
function step4() {
// Multi-month 3
inp = TestHelpers.datepicker.initNewInput({ numberOfMonths: 3 });
TestHelpers.datepicker.onFocus( inp, function() {
ok( dp.is( ".ui-datepicker-multi-3" ), "Structure multi [3] - multi-3" );
ok( !dp.is( ".ui-datepicker-multi-2" ), "Structure multi [3] - Trac #6704" );
inp.datepicker( "hide" ).datepicker( "destroy" );
step5();
});
}
function step5() {
// Multi-month [2, 2]
inp = TestHelpers.datepicker.initNewInput({ numberOfMonths: [ 2, 2 ] });
TestHelpers.datepicker.onFocus( inp, function() {
ok( dp.is( ".ui-datepicker-multi" ), "Structure multi - multi-month" );
equal( dp.children().length, 6, "Structure multi [2,2] - child count" );
child = dp.children( ":first" );
ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-first" ), "Structure multi [2,2] - first month division" );
child = dp.children( ":eq(1)" );
ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-last" ), "Structure multi [2,2] - second month division" );
child = dp.children( ":eq(2)" );
ok( child.is( "div.ui-datepicker-row-break" ), "Structure multi [2,2] - row break" );
child = dp.children( ":eq(3)" );
ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-first" ), "Structure multi [2,2] - third month division" );
child = dp.children( ":eq(4)" );
ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-last" ), "Structure multi [2,2] - fourth month division" );
child = dp.children( ":eq(5)" );
ok( child.is( "div.ui-datepicker-row-break" ), "Structure multi [2,2] - row break" );
inp.datepicker( "hide" ).datepicker( "destroy" );
// Inline
inl = TestHelpers.datepicker.init( "#inl" );
dp = inl.children();
ok( dp.is( ".ui-datepicker-inline" ), "Structure inline - main div" );
ok( !dp.is( ".ui-datepicker-rtl" ), "Structure inline - not right-to-left" );
ok( !dp.is( ".ui-datepicker-multi" ), "Structure inline - not multi-month" );
equal( dp.children().length, 2, "Structure inline - child count" );
header = dp.children( ":first" );
ok( header.is( "div.ui-datepicker-header" ), "Structure inline - header division" );
equal( header.children().length, 3, "Structure inline - header child count" );
table = dp.children( ":eq(1)" );
ok( table.is( "table.ui-datepicker-calendar" ), "Structure inline - month table" );
ok( table.children( ":first" ).is( "thead" ), "Structure inline - month table thead" );
ok( table.children( ":eq(1)" ).is( "tbody" ), "Structure inline - month table body" );
inl.datepicker( "destroy" );
// Inline multi-month
inl = TestHelpers.datepicker.init( "#inl", { numberOfMonths: 2 } );
dp = inl.children();
ok( dp.is( ".ui-datepicker-inline" ) && dp.is( ".ui-datepicker-multi" ), "Structure inline multi - main div" );
equal( dp.children().length, 3, "Structure inline multi - child count" );
child = dp.children( ":first" );
ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-first" ), "Structure inline multi - first month division" );
child = dp.children( ":eq(1)" );
ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-last" ), "Structure inline multi - second month division" );
child = dp.children( ":eq(2)" );
ok( child.is( "div.ui-datepicker-row-break" ), "Structure inline multi - row break" );
inl.datepicker( "destroy" );
start();
});
}
step1();
});
asyncTest( "customStructure", function() {
expect( 20 );
var header, panel, title, thead,
inp = TestHelpers.datepicker.initNewInput( $.datepicker.regional.he ),
dp = $( "#ui-datepicker-div" );
function step1() {
inp.datepicker( "option", "showButtonPanel", true );
TestHelpers.datepicker.onFocus( inp, function() {
ok( dp.is( ".ui-datepicker-rtl" ), "Structure RTL - right-to-left" );
header = dp.children( ":first" );
ok( header.is( "div.ui-datepicker-header" ), "Structure RTL - header division" );
equal( header.children().length, 3, "Structure RTL - header child count" );
ok( header.children( ":first" ).is( "a.ui-datepicker-next" ), "Structure RTL - prev link" );
ok( header.children( ":eq(1)" ).is( "a.ui-datepicker-prev" ), "Structure RTL - next link" );
panel = dp.children( ":last" );
ok( panel.is( "div.ui-datepicker-buttonpane" ), "Structure RTL - button division" );
equal( panel.children().length, 2, "Structure RTL - button panel child count" );
ok( panel.children( ":first" ).is( "button.ui-datepicker-close" ), "Structure RTL - close button" );
ok( panel.children( ":last" ).is( "button.ui-datepicker-current" ), "Structure RTL - today button" );
inp.datepicker( "hide" ).datepicker( "destroy" );
step2();
});
}
// Hide prev/next
function step2() {
inp = TestHelpers.datepicker.initNewInput({
hideIfNoPrevNext: true,
minDate: new Date( 2008, 2 - 1, 4 ),
maxDate: new Date( 2008, 2 - 1, 14 )
});
inp.val( "02/10/2008" );
TestHelpers.datepicker.onFocus( inp, function() {
header = dp.children( ":first" );
ok( header.is( "div.ui-datepicker-header" ), "Structure hide prev/next - header division" );
equal( header.children().length, 1, "Structure hide prev/next - links child count" );
ok( header.children( ":first" ).is( "div.ui-datepicker-title" ), "Structure hide prev/next - title division" );
inp.datepicker( "hide" ).datepicker( "destroy" );
step3();
});
}
// Changeable Month with read-only year
function step3() {
inp = TestHelpers.datepicker.initNewInput({ changeMonth: true });
TestHelpers.datepicker.onFocus( inp, function() {
title = dp.children( ":first" ).children( ":last" );
equal( title.children().length, 2, "Structure changeable month - title child count" );
ok( title.children( ":first" ).is( "select.ui-datepicker-month" ), "Structure changeable month - month selector" );
ok( title.children( ":last" ).is( "span.ui-datepicker-year" ), "Structure changeable month - read-only year" );
inp.datepicker( "hide" ).datepicker( "destroy" );
step4();
});
}
// Changeable year with read-only month
function step4() {
inp = TestHelpers.datepicker.initNewInput({ changeYear: true });
TestHelpers.datepicker.onFocus( inp, function() {
title = dp.children( ":first" ).children( ":last" );
equal( title.children().length, 2, "Structure changeable year - title child count" );
ok( title.children( ":first" ).is( "span.ui-datepicker-month" ), "Structure changeable year - read-only month" );
ok( title.children( ":last" ).is( "select.ui-datepicker-year" ), "Structure changeable year - year selector" );
inp.datepicker( "hide" ).datepicker( "destroy" );
step5();
});
}
// Read-only first day of week
function step5() {
inp = TestHelpers.datepicker.initNewInput({ changeFirstDay: false });
TestHelpers.datepicker.onFocus( inp, function() {
thead = dp.find( ".ui-datepicker-calendar thead tr" );
equal( thead.children().length, 7, "Structure read-only first day - thead child count" );
equal( thead.find( "a" ).length, 0, "Structure read-only first day - thead links count" );
inp.datepicker( "hide" ).datepicker( "destroy" );
start();
});
}
// TODO: figure out why this setTimeout is needed in IE,
// it only is necessary when the previous baseStructure tests runs first
// Support: IE
setTimeout( step1 );
});
test("keystrokes", function() {
expect( 26 );
var inp = TestHelpers.datepicker.init("#inp"),
date = new Date();
inp.val("").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), date, "Keystroke enter");
inp.val("02/04/2008").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2008, 2 - 1, 4),
"Keystroke enter - preset");
inp.val("02/04/2008").datepicker("show").
simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.HOME}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), date, "Keystroke ctrl+home");
inp.val("02/04/2008").datepicker("show").
simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.END});
ok(inp.datepicker("getDate") == null, "Keystroke ctrl+end");
inp.val("").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE});
ok(inp.datepicker("getDate") == null, "Keystroke esc");
inp.val("02/04/2008").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE});
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2008, 2 - 1, 4),
"Keystroke esc - preset");
inp.val("02/04/2008").datepicker("show").
simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_UP}).
simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE});
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2008, 2 - 1, 4),
"Keystroke esc - abandoned");
// Moving by day or week
inp.val("").datepicker("show").
simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.LEFT}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
date.setDate(date.getDate() - 1);
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), date, "Keystroke ctrl+left");
inp.val("").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.LEFT}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
date.setDate(date.getDate() + 1);
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), date, "Keystroke left");
inp.val("").datepicker("show").
simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.RIGHT}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
date.setDate(date.getDate() + 1);
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), date, "Keystroke ctrl+right");
inp.val("").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.RIGHT}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
date.setDate(date.getDate() - 1);
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), date, "Keystroke right");
inp.val("").datepicker("show").
simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.UP}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
date.setDate(date.getDate() - 7);
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), date, "Keystroke ctrl+up");
inp.val("").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.UP}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
date.setDate(date.getDate() + 7);
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), date, "Keystroke up");
inp.val("").datepicker("show").
simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.DOWN}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
date.setDate(date.getDate() + 7);
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), date, "Keystroke ctrl+down");
inp.val("").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.DOWN}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
date.setDate(date.getDate() - 7);
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), date, "Keystroke down");
// Moving by month or year
inp.val("02/04/2008").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.PAGE_UP}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2008, 1 - 1, 4),
"Keystroke pgup");
inp.val("02/04/2008").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.PAGE_DOWN}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2008, 3 - 1, 4),
"Keystroke pgdn");
inp.val("02/04/2008").datepicker("show").
simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_UP}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2007, 2 - 1, 4),
"Keystroke ctrl+pgup");
inp.val("02/04/2008").datepicker("show").
simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_DOWN}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2009, 2 - 1, 4),
"Keystroke ctrl+pgdn");
// Check for moving to short months
inp.val("03/31/2008").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.PAGE_UP}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2008, 2 - 1, 29),
"Keystroke pgup - Feb");
inp.val("01/30/2008").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.PAGE_DOWN}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2008, 2 - 1, 29),
"Keystroke pgdn - Feb");
inp.val("02/29/2008").datepicker("show").
simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_UP}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2007, 2 - 1, 28),
"Keystroke ctrl+pgup - Feb");
inp.val("02/29/2008").datepicker("show").
simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_DOWN}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2009, 2 - 1, 28),
"Keystroke ctrl+pgdn - Feb");
// Goto current
inp.datepicker("option", {gotoCurrent: true}).
datepicker("hide").val("02/04/2008").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.PAGE_DOWN}).
simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.HOME}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2008, 2 - 1, 4),
"Keystroke ctrl+home");
// Change steps
inp.datepicker("option", {stepMonths: 2, gotoCurrent: false}).
datepicker("hide").val("02/04/2008").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.PAGE_UP}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2007, 12 - 1, 4),
"Keystroke pgup step 2");
inp.val("02/04/2008").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.PAGE_DOWN}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2008, 4 - 1, 4),
"Keystroke pgdn step 2");
});
test("mouse", function() {
expect( 15 );
var inl,
inp = TestHelpers.datepicker.init("#inp"),
dp = $("#ui-datepicker-div"),
date = new Date();
inp.val("").datepicker("show");
$(".ui-datepicker-calendar tbody a:contains(10)", dp).simulate("click", {});
date.setDate(10);
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), date, "Mouse click");
inp.val("02/04/2008").datepicker("show");
$(".ui-datepicker-calendar tbody a:contains(12)", dp).simulate("click", {});
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2008, 2 - 1, 12),
"Mouse click - preset");
inp.val("02/04/2008").datepicker("show");
inp.val("").datepicker("show");
$("button.ui-datepicker-close", dp).simulate("click", {});
ok(inp.datepicker("getDate") == null, "Mouse click - close");
inp.val("02/04/2008").datepicker("show");
$("button.ui-datepicker-close", dp).simulate("click", {});
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2008, 2 - 1, 4),
"Mouse click - close + preset");
inp.val("02/04/2008").datepicker("show");
$("a.ui-datepicker-prev", dp).simulate("click", {});
$("button.ui-datepicker-close", dp).simulate("click", {});
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2008, 2 - 1, 4),
"Mouse click - abandoned");
// Current/previous/next
inp.val("02/04/2008").datepicker("option", {showButtonPanel: true}).datepicker("show");
$(".ui-datepicker-current", dp).simulate("click", {});
$(".ui-datepicker-calendar tbody a:contains(14)", dp).simulate("click", {});
date.setDate(14);
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), date, "Mouse click - current");
inp.val("02/04/2008").datepicker("show");
$(".ui-datepicker-prev", dp).simulate("click");
$(".ui-datepicker-calendar tbody a:contains(16)", dp).simulate("click");
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2008, 1 - 1, 16),
"Mouse click - previous");
inp.val("02/04/2008").datepicker("show");
$(".ui-datepicker-next", dp).simulate("click");
$(".ui-datepicker-calendar tbody a:contains(18)", dp).simulate("click");
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2008, 3 - 1, 18),
"Mouse click - next");
// Previous/next with minimum/maximum
inp.datepicker("option", {minDate: new Date(2008, 2 - 1, 2),
maxDate: new Date(2008, 2 - 1, 26)}).val("02/04/2008").datepicker("show");
$(".ui-datepicker-prev", dp).simulate("click");
$(".ui-datepicker-calendar tbody a:contains(16)", dp).simulate("click");
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2008, 2 - 1, 16),
"Mouse click - previous + min/max");
inp.val("02/04/2008").datepicker("show");
$(".ui-datepicker-next", dp).simulate("click");
$(".ui-datepicker-calendar tbody a:contains(18)", dp).simulate("click");
TestHelpers.datepicker.equalsDate(inp.datepicker("getDate"), new Date(2008, 2 - 1, 18),
"Mouse click - next + min/max");
// Inline
inl = TestHelpers.datepicker.init("#inl");
dp = $(".ui-datepicker-inline", inl);
date = new Date();
inl.datepicker("setDate", date);
$(".ui-datepicker-calendar tbody a:contains(10)", dp).simulate("click", {});
date.setDate(10);
TestHelpers.datepicker.equalsDate(inl.datepicker("getDate"), date, "Mouse click inline");
inl.datepicker("option", {showButtonPanel: true}).datepicker("setDate", new Date(2008, 2 - 1, 4));
$(".ui-datepicker-calendar tbody a:contains(12)", dp).simulate("click", {});
TestHelpers.datepicker.equalsDate(inl.datepicker("getDate"), new Date(2008, 2 - 1, 12), "Mouse click inline - preset");
inl.datepicker("option", {showButtonPanel: true});
$(".ui-datepicker-current", dp).simulate("click", {});
$(".ui-datepicker-calendar tbody a:contains(14)", dp).simulate("click", {});
date.setDate(14);
TestHelpers.datepicker.equalsDate(inl.datepicker("getDate"), date, "Mouse click inline - current");
inl.datepicker("setDate", new Date(2008, 2 - 1, 4));
$(".ui-datepicker-prev", dp).simulate("click");
$(".ui-datepicker-calendar tbody a:contains(16)", dp).simulate("click");
TestHelpers.datepicker.equalsDate(inl.datepicker("getDate"), new Date(2008, 1 - 1, 16),
"Mouse click inline - previous");
inl.datepicker("setDate", new Date(2008, 2 - 1, 4));
$(".ui-datepicker-next", dp).simulate("click");
$(".ui-datepicker-calendar tbody a:contains(18)", dp).simulate("click");
TestHelpers.datepicker.equalsDate(inl.datepicker("getDate"), new Date(2008, 3 - 1, 18),
"Mouse click inline - next");
});
})(jQuery);

153
jquery-ui/tests/unit/datepicker/datepicker_events.js vendored Normal file
View file

@ -0,0 +1,153 @@
/*
* datepicker_events.js
*/
(function($) {
module("datepicker: events");
var selectedThis = null,
selectedDate = null,
selectedInst = null;
function callback(date, inst) {
selectedThis = this;
selectedDate = date;
selectedInst = inst;
}
function callback2(year, month, inst) {
selectedThis = this;
selectedDate = year + "/" + month;
selectedInst = inst;
}
test("events", function() {
expect( 26 );
var dateStr, newMonthYear, inp2,
inp = TestHelpers.datepicker.init("#inp", {onSelect: callback}),
date = new Date();
// onSelect
inp.val("").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
equal(selectedThis, inp[0], "Callback selected this");
equal(selectedInst, $.data(inp[0], TestHelpers.datepicker.PROP_NAME), "Callback selected inst");
equal(selectedDate, $.datepicker.formatDate("mm/dd/yy", date),
"Callback selected date");
inp.val("").datepicker("show").
simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.DOWN}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
date.setDate(date.getDate() + 7);
equal(selectedDate, $.datepicker.formatDate("mm/dd/yy", date),
"Callback selected date - ctrl+down");
inp.val("").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE});
equal(selectedDate, $.datepicker.formatDate("mm/dd/yy", date),
"Callback selected date - esc");
dateStr = "02/04/2008";
inp.val(dateStr).datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
equal(dateStr, selectedDate,
"onSelect is called after enter keydown");
// onChangeMonthYear
inp.datepicker("option", {onChangeMonthYear: callback2, onSelect: null}).
val("").datepicker("show");
newMonthYear = function(date) {
return date.getFullYear() + "/" + (date.getMonth() + 1);
};
date = new Date();
date.setDate(1);
inp.simulate("keydown", {keyCode: $.ui.keyCode.PAGE_UP});
date.setMonth(date.getMonth() - 1);
equal(selectedThis, inp[0], "Callback change month/year this");
equal(selectedInst, $.data(inp[0], TestHelpers.datepicker.PROP_NAME), "Callback change month/year inst");
equal(selectedDate, newMonthYear(date),
"Callback change month/year date - pgup");
inp.simulate("keydown", {keyCode: $.ui.keyCode.PAGE_DOWN});
date.setMonth(date.getMonth() + 1);
equal(selectedDate, newMonthYear(date),
"Callback change month/year date - pgdn");
inp.simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_UP});
date.setFullYear(date.getFullYear() - 1);
equal(selectedDate, newMonthYear(date),
"Callback change month/year date - ctrl+pgup");
inp.simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.HOME});
date.setFullYear(date.getFullYear() + 1);
equal(selectedDate, newMonthYear(date),
"Callback change month/year date - ctrl+home");
inp.simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_DOWN});
date.setFullYear(date.getFullYear() + 1);
equal(selectedDate, newMonthYear(date),
"Callback change month/year date - ctrl+pgdn");
inp.datepicker("setDate", new Date(2007, 1 - 1, 26));
equal(selectedDate, "2007/1", "Callback change month/year date - setDate");
selectedDate = null;
inp.datepicker("setDate", new Date(2007, 1 - 1, 12));
ok(selectedDate == null, "Callback change month/year date - setDate no change");
// onChangeMonthYear step by 2
inp.datepicker("option", {stepMonths: 2}).
datepicker("hide").val("").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.PAGE_UP});
date.setMonth(date.getMonth() - 14);
equal(selectedDate, newMonthYear(date),
"Callback change month/year by 2 date - pgup");
inp.simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_UP});
date.setMonth(date.getMonth() - 12);
equal(selectedDate, newMonthYear(date),
"Callback change month/year by 2 date - ctrl+pgup");
inp.simulate("keydown", {keyCode: $.ui.keyCode.PAGE_DOWN});
date.setMonth(date.getMonth() + 2);
equal(selectedDate, newMonthYear(date),
"Callback change month/year by 2 date - pgdn");
inp.simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_DOWN});
date.setMonth(date.getMonth() + 12);
equal(selectedDate, newMonthYear(date),
"Callback change month/year by 2 date - ctrl+pgdn");
// onClose
inp.datepicker("option", {onClose: callback, onChangeMonthYear: null, stepMonths: 1}).
val("").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE});
equal(selectedThis, inp[0], "Callback close this");
equal(selectedInst, $.data(inp[0], TestHelpers.datepicker.PROP_NAME), "Callback close inst");
equal(selectedDate, "", "Callback close date - esc");
inp.val("").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
equal(selectedDate, $.datepicker.formatDate("mm/dd/yy", new Date()),
"Callback close date - enter");
inp.val("02/04/2008").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE});
equal(selectedDate, "02/04/2008", "Callback close date - preset");
inp.val("02/04/2008").datepicker("show").
simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.END});
equal(selectedDate, "", "Callback close date - ctrl+end");
inp2 = TestHelpers.datepicker.init("#inp2");
inp2.datepicker().datepicker("option", {onClose: callback}).datepicker("show");
inp.datepicker("show");
equal(selectedThis, inp2[0], "Callback close this");
});
test("beforeShowDay-getDate", function() {
expect( 3 );
var inp = TestHelpers.datepicker.init("#inp", {beforeShowDay: function() { inp.datepicker("getDate"); return [true, ""]; }}),
dp = $("#ui-datepicker-div");
inp.val("01/01/2010").datepicker("show");
// contains non-breaking space
equal($("div.ui-datepicker-title").text(),
// support: IE <9, jQuery <1.8
// In IE7/8 with jQuery <1.8, encoded spaces behave in strange ways
$( "<span>January&#xa0;2010</span>" ).text(), "Initial month");
$("a.ui-datepicker-next", dp).click();
$("a.ui-datepicker-next", dp).click();
// contains non-breaking space
equal($("div.ui-datepicker-title").text(),
$( "<span>March&#xa0;2010</span>" ).text(), "After next clicks");
inp.datepicker("hide").datepicker("show");
$("a.ui-datepicker-prev", dp).click();
$("a.ui-datepicker-prev", dp).click();
// contains non-breaking space
equal($("div.ui-datepicker-title").text(),
$( "<span>November&#xa0;2009</span>" ).text(), "After prev clicks");
inp.datepicker("hide");
});
})(jQuery);

125
jquery-ui/tests/unit/datepicker/datepicker_methods.js vendored Normal file
View file

@ -0,0 +1,125 @@
/*
* datepicker_methods.js
*/
(function($) {
module("datepicker: methods");
test("destroy", function() {
expect( 33 );
var inl,
inp = TestHelpers.datepicker.init("#inp");
ok(inp.is(".hasDatepicker"), "Default - marker class set");
ok($.data(inp[0], TestHelpers.datepicker.PROP_NAME), "Default - instance present");
ok(inp.next().is("#alt"), "Default - button absent");
inp.datepicker("destroy");
inp = $("#inp");
ok(!inp.is(".hasDatepicker"), "Default - marker class cleared");
ok(!$.data(inp[0], TestHelpers.datepicker.PROP_NAME), "Default - instance absent");
ok(inp.next().is("#alt"), "Default - button absent");
// With button
inp= TestHelpers.datepicker.init("#inp", {showOn: "both"});
ok(inp.is(".hasDatepicker"), "Button - marker class set");
ok($.data(inp[0], TestHelpers.datepicker.PROP_NAME), "Button - instance present");
ok(inp.next().text() === "...", "Button - button added");
inp.datepicker("destroy");
inp = $("#inp");
ok(!inp.is(".hasDatepicker"), "Button - marker class cleared");
ok(!$.data(inp[0], TestHelpers.datepicker.PROP_NAME), "Button - instance absent");
ok(inp.next().is("#alt"), "Button - button removed");
// With append text
inp = TestHelpers.datepicker.init("#inp", {appendText: "Testing"});
ok(inp.is(".hasDatepicker"), "Append - marker class set");
ok($.data(inp[0], TestHelpers.datepicker.PROP_NAME), "Append - instance present");
ok(inp.next().text() === "Testing", "Append - append text added");
inp.datepicker("destroy");
inp = $("#inp");
ok(!inp.is(".hasDatepicker"), "Append - marker class cleared");
ok(!$.data(inp[0], TestHelpers.datepicker.PROP_NAME), "Append - instance absent");
ok(inp.next().is("#alt"), "Append - append text removed");
// With both
inp= TestHelpers.datepicker.init("#inp", {showOn: "both", buttonImageOnly: true,
buttonImage: "images/calendar.gif", appendText: "Testing"});
ok(inp.is(".hasDatepicker"), "Both - marker class set");
ok($.data(inp[0], TestHelpers.datepicker.PROP_NAME), "Both - instance present");
ok(inp.next()[0].nodeName.toLowerCase() === "img", "Both - button added");
ok(inp.next().next().text() === "Testing", "Both - append text added");
inp.datepicker("destroy");
inp = $("#inp");
ok(!inp.is(".hasDatepicker"), "Both - marker class cleared");
ok(!$.data(inp[0], TestHelpers.datepicker.PROP_NAME), "Both - instance absent");
ok(inp.next().is("#alt"), "Both - button and append text absent");
// Inline
inl = TestHelpers.datepicker.init("#inl");
ok(inl.is(".hasDatepicker"), "Inline - marker class set");
ok(inl.html() !== "", "Inline - datepicker present");
ok($.data(inl[0], TestHelpers.datepicker.PROP_NAME), "Inline - instance present");
ok(inl.next().length === 0 || inl.next().is("p"), "Inline - button absent");
inl.datepicker("destroy");
inl = $("#inl");
ok(!inl.is(".hasDatepicker"), "Inline - marker class cleared");
ok(inl.html() === "", "Inline - datepicker absent");
ok(!$.data(inl[0], TestHelpers.datepicker.PROP_NAME), "Inline - instance absent");
ok(inl.next().length === 0 || inl.next().is("p"), "Inline - button absent");
});
test("enableDisable", function() {
expect( 33 );
var inl, dp,
inp = TestHelpers.datepicker.init("#inp");
ok(!inp.datepicker("isDisabled"), "Enable/disable - initially marked as enabled");
ok(!inp[0].disabled, "Enable/disable - field initially enabled");
inp.datepicker("disable");
ok(inp.datepicker("isDisabled"), "Enable/disable - now marked as disabled");
ok(inp[0].disabled, "Enable/disable - field now disabled");
inp.datepicker("enable");
ok(!inp.datepicker("isDisabled"), "Enable/disable - now marked as enabled");
ok(!inp[0].disabled, "Enable/disable - field now enabled");
inp.datepicker("destroy");
// With a button
inp = TestHelpers.datepicker.init("#inp", {showOn: "button"});
ok(!inp.datepicker("isDisabled"), "Enable/disable button - initially marked as enabled");
ok(!inp[0].disabled, "Enable/disable button - field initially enabled");
ok(!inp.next("button")[0].disabled, "Enable/disable button - button initially enabled");
inp.datepicker("disable");
ok(inp.datepicker("isDisabled"), "Enable/disable button - now marked as disabled");
ok(inp[0].disabled, "Enable/disable button - field now disabled");
ok(inp.next("button")[0].disabled, "Enable/disable button - button now disabled");
inp.datepicker("enable");
ok(!inp.datepicker("isDisabled"), "Enable/disable button - now marked as enabled");
ok(!inp[0].disabled, "Enable/disable button - field now enabled");
ok(!inp.next("button")[0].disabled, "Enable/disable button - button now enabled");
inp.datepicker("destroy");
// With an image button
inp = TestHelpers.datepicker.init("#inp", {showOn: "button", buttonImageOnly: true,
buttonImage: "images/calendar.gif"});
ok(!inp.datepicker("isDisabled"), "Enable/disable image - initially marked as enabled");
ok(!inp[0].disabled, "Enable/disable image - field initially enabled");
ok(parseFloat(inp.next("img").css("opacity")) === 1, "Enable/disable image - image initially enabled");
inp.datepicker("disable");
ok(inp.datepicker("isDisabled"), "Enable/disable image - now marked as disabled");
ok(inp[0].disabled, "Enable/disable image - field now disabled");
ok(parseFloat(inp.next("img").css("opacity")) !== 1, "Enable/disable image - image now disabled");
inp.datepicker("enable");
ok(!inp.datepicker("isDisabled"), "Enable/disable image - now marked as enabled");
ok(!inp[0].disabled, "Enable/disable image - field now enabled");
ok(parseFloat(inp.next("img").css("opacity")) === 1, "Enable/disable image - image now enabled");
inp.datepicker("destroy");
// Inline
inl = TestHelpers.datepicker.init("#inl", {changeYear: true});
dp = $(".ui-datepicker-inline", inl);
ok(!inl.datepicker("isDisabled"), "Enable/disable inline - initially marked as enabled");
ok(!dp.children().is(".ui-state-disabled"), "Enable/disable inline - not visually disabled initially");
ok(!dp.find("select").prop("disabled"), "Enable/disable inline - form element enabled initially");
inl.datepicker("disable");
ok(inl.datepicker("isDisabled"), "Enable/disable inline - now marked as disabled");
ok(dp.children().is(".ui-state-disabled"), "Enable/disable inline - visually disabled");
ok(dp.find("select").prop("disabled"), "Enable/disable inline - form element disabled");
inl.datepicker("enable");
ok(!inl.datepicker("isDisabled"), "Enable/disable inline - now marked as enabled");
ok(!dp.children().is(".ui-state-disabled"), "Enable/disable inline - not visiually disabled");
ok(!dp.find("select").prop("disabled"), "Enable/disable inline - form element enabled");
inl.datepicker("destroy");
});
})(jQuery);

1125
jquery-ui/tests/unit/datepicker/datepicker_options.js vendored Normal file
View file

File diff suppressed because it is too large Load diff

27
jquery-ui/tests/unit/datepicker/datepicker_test_helpers.js vendored Normal file
View file

@ -0,0 +1,27 @@
TestHelpers.datepicker = {
addMonths: function(date, offset) {
var maxDay = 32 - new Date(date.getFullYear(), date.getMonth() + offset, 32).getDate();
date.setDate(Math.min(date.getDate(), maxDay));
date.setMonth(date.getMonth() + offset);
return date;
},
equalsDate: function(d1, d2, message) {
if (!d1 || !d2) {
ok(false, message + " - missing date");
return;
}
d1 = new Date(d1.getFullYear(), d1.getMonth(), d1.getDate());
d2 = new Date(d2.getFullYear(), d2.getMonth(), d2.getDate());
equal(d1.toString(), d2.toString(), message);
},
init: function( id, options ) {
$.datepicker.setDefaults( $.datepicker.regional[ "" ] );
return $( id ).datepicker( $.extend( { showAnim: "" }, options || {} ) );
},
initNewInput: function( options ) {
var id = $( "<input>" ).appendTo( "#qunit-fixture" );
return TestHelpers.datepicker.init( id, options );
},
onFocus: TestHelpers.onFocus,
PROP_NAME: "datepicker"
};

BIN
jquery-ui/tests/unit/datepicker/images/calendar.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 258 B

26
jquery-ui/tests/unit/dialog/all.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog Test Suite</title>
<script src="../../../external/jquery/jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<link rel="stylesheet" href="../qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../qunit-composite.js"></script>
<script src="../subsuite.js"></script>
<script>
testAllVersions( "dialog" );
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
</div>
</body>
</html>

64
jquery-ui/tests/unit/dialog/dialog.html Normal file
View file

@ -0,0 +1,64 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog Test Suite</title>
<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script>
TestHelpers.loadResources({
css: [ "core", "dialog" ],
js: [
"ui/core.js",
"ui/widget.js",
"ui/position.js",
"ui/mouse.js",
"ui/draggable.js",
"ui/resizable.js",
"ui/button.js",
"ui/effect.js",
"ui/effect-blind.js",
"ui/effect-clip.js",
"ui/effect-explode.js",
"ui/dialog.js"
]
});
</script>
<script src="dialog_common.js"></script>
<script src="dialog_core.js"></script>
<script src="dialog_events.js"></script>
<script src="dialog_methods.js"></script>
<script src="dialog_options.js"></script>
<script src="dialog_test_helpers.js"></script>
<script src="../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div id="dialog1"></div>
<div id="dialog2"></div>
<div id="form-dialog" title="Profile Information">
<!-- create a spacer to ensure there's enough space to scroll -->
<div style="height: 250px;">...</div>
<fieldset>
<legend>Please share some personal information</legend>
<label for="favorite-animal">Your favorite animal</label><input id="favorite-animal">
<label for="favorite-color">Your favorite color</label><input id="favorite-color">
</fieldset>
<div role="group" aria-describedby="section2">
<p id="section2">Some more (optional) information</p>
<label for="favorite-food">Favorite food</label><input id="favorite-food">
</div>
</div>
<div class="wrap" id="wrap1"></div>
<div class="wrap" id="wrap2"></div>
</div>
</body>
</html>

43
jquery-ui/tests/unit/dialog/dialog_common.js vendored Normal file
View file

@ -0,0 +1,43 @@
TestHelpers.commonWidgetTests( "dialog", {
defaults: {
appendTo: "body",
autoOpen: true,
buttons: [],
closeOnEscape: true,
closeText: "Close",
disabled: false,
dialogClass: "",
draggable: true,
height: "auto",
hide: null,
maxHeight: null,
maxWidth: null,
minHeight: 150,
minWidth: 150,
modal: false,
position: {
my: "center",
at: "center",
of: window,
collision: "fit",
using: $.ui.dialog.prototype.options.position.using
},
resizable: true,
show: null,
title: null,
width: 300,
// callbacks
beforeClose: null,
close: null,
create: null,
drag: null,
dragStart: null,
dragStop: null,
focus: null,
open: null,
resize: null,
resizeStart: null,
resizeStop: null
}
});

260
jquery-ui/tests/unit/dialog/dialog_core.js vendored Normal file
View file

@ -0,0 +1,260 @@
/*
* dialog_core.js
*/
(function($) {
// TODO add teardown callback to remove dialogs
module("dialog: core");
test("title id", function() {
expect(1);
var titleId,
element = $("<div></div>").dialog();
titleId = element.dialog("widget").find(".ui-dialog-title").attr("id");
ok( /ui-id-\d+$/.test( titleId ), "auto-numbered title id");
element.remove();
});
test( "ARIA", function() {
expect( 4 );
var element = $( "<div></div>" ).dialog(),
wrapper = element.dialog( "widget" );
equal( wrapper.attr( "role" ), "dialog", "dialog role" );
equal( wrapper.attr( "aria-labelledby" ), wrapper.find( ".ui-dialog-title" ).attr( "id" ) );
equal( wrapper.attr( "aria-describedby" ), element.attr( "id" ), "aria-describedby added" );
element.remove();
element = $("<div><div aria-describedby='section2'><p id='section2'>descriotion</p></div></div>").dialog();
strictEqual( element.dialog( "widget" ).attr( "aria-describedby" ), undefined, "no aria-describedby added, as already present in markup" );
element.remove();
});
test("widget method", function() {
expect( 1 );
var dialog = $("<div>").appendTo("#qunit-fixture").dialog();
deepEqual(dialog.parent()[0], dialog.dialog("widget")[0]);
dialog.remove();
});
asyncTest( "focus tabbable", function() {
expect( 8 );
var element,
options = {
buttons: [{
text: "Ok",
click: $.noop
}]
};
function checkFocus( markup, options, testFn, next ) {
// Support: IE8
// For some reason the focus doesn't get set properly if we don't
// focus the body first.
$( "body" ).focus();
element = $( markup ).dialog( options );
setTimeout(function() {
testFn(function done() {
element.remove();
setTimeout( next );
});
});
}
function step1() {
checkFocus( "<div><input><input></div>", options, function( done ) {
var input = element.find( "input:last" ).focus().blur();
element.dialog( "instance" )._focusTabbable();
setTimeout(function() {
equal( document.activeElement, input[ 0 ],
"1. an element that was focused previously." );
done();
});
}, step2 );
}
function step2() {
checkFocus( "<div><input><input autofocus></div>", options, function( done ) {
equal( document.activeElement, element.find( "input" )[ 1 ],
"2. first element inside the dialog matching [autofocus]" );
done();
}, step3 );
}
function step3() {
checkFocus( "<div><input><input></div>", options, function( done ) {
equal( document.activeElement, element.find( "input" )[ 0 ],
"3. tabbable element inside the content element" );
done();
}, step4 );
}
function step4() {
checkFocus( "<div>text</div>", options, function( done ) {
equal( document.activeElement,
element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" )[ 0 ],
"4. tabbable element inside the buttonpane" );
done();
}, step5 );
}
function step5() {
checkFocus( "<div>text</div>", {}, function( done ) {
equal( document.activeElement,
element.dialog( "widget" ).find( ".ui-dialog-titlebar .ui-dialog-titlebar-close" )[ 0 ],
"5. the close button" );
done();
}, step6 );
}
function step6() {
checkFocus( "<div>text</div>", { autoOpen: false }, function( done ) {
element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).hide();
element.dialog( "open" );
setTimeout(function() {
equal( document.activeElement, element.parent()[ 0 ], "6. the dialog itself" );
done();
});
}, step7 );
}
function step7() {
checkFocus(
"<div><input><input autofocus></div>",
{
open: function() {
var inputs = $( this ).find( "input" );
inputs.last().keydown(function( event ) {
event.preventDefault();
inputs.first().focus();
});
}
},
function( done ) {
var inputs = element.find( "input" );
equal( document.activeElement, inputs[ 1 ], "Focus starts on second input" );
inputs.last().simulate( "keydown", { keyCode: $.ui.keyCode.TAB });
setTimeout(function() {
equal( document.activeElement, inputs[ 0 ],
"Honor preventDefault, allowing custom focus management" );
done();
}, 50 );
},
start
);
}
step1();
});
test( "#7960: resizable handles below modal overlays", function() {
expect( 1 );
var resizable = $( "<div>" ).resizable(),
dialog = $( "<div>" ).dialog({ modal: true }),
resizableZindex = parseInt( resizable.find( ".ui-resizable-handle" ).css( "zIndex" ), 10 ),
overlayZindex = parseInt( $( ".ui-widget-overlay" ).css( "zIndex" ), 10 );
ok( resizableZindex < overlayZindex, "Resizable handles have lower z-index than modal overlay" );
dialog.dialog( "destroy" );
});
asyncTest( "Prevent tabbing out of dialogs", function() {
expect( 3 );
var element = $( "<div><input name='0'><input name='1'></div>" ).dialog(),
inputs = element.find( "input" );
// Remove close button to test focus on just the two buttons
element.dialog( "widget" ).find( ".ui-button").remove();
function checkTab() {
equal( document.activeElement, inputs[ 0 ], "Tab key event moved focus within the modal" );
// check shift tab
$( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB, shiftKey: true });
setTimeout( checkShiftTab );
}
function checkShiftTab() {
equal( document.activeElement, inputs[ 1 ], "Shift-Tab key event moved focus back to second input" );
element.remove();
setTimeout( start );
}
inputs[ 1 ].focus();
setTimeout(function() {
equal( document.activeElement, inputs[ 1 ], "Focus set on second input" );
inputs.eq( 1 ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB });
setTimeout( checkTab );
});
});
asyncTest( "#9048: multiple modal dialogs opened and closed in different order", function() {
expect( 1 );
$( "#dialog1, #dialog2" ).dialog({ autoOpen: false, modal:true });
$( "#dialog1" ).dialog( "open" );
$( "#dialog2" ).dialog( "open" );
$( "#dialog1" ).dialog( "close" );
setTimeout(function() {
$( "#dialog2" ).dialog( "close" );
$( "#favorite-animal" ).focus();
ok( true, "event handlers cleaned up (no errors thrown)" );
start();
});
});
asyncTest( "interaction between overlay and other dialogs", function() {
$.widget( "ui.testWidget", $.ui.dialog, {
options: {
modal: true,
autoOpen: false
}
});
expect( 2 );
var first = $( "<div><input id='input-1'></div>" ).dialog({
modal: true
}),
firstInput = first.find( "input" ),
second = $( "<div><input id='input-2'></div>" ).testWidget(),
secondInput = second.find( "input" );
// Support: IE8
// For some reason the focus doesn't get set properly if we don't
// focus the body first.
$( "body" ).focus();
// Wait for the modal to init
setTimeout(function() {
second.testWidget( "open" );
// Simulate user tabbing from address bar to an element outside the dialog
$( "#favorite-animal" ).focus();
setTimeout(function() {
equal( document.activeElement, secondInput[ 0 ] );
// Last active dialog must receive focus
firstInput.focus();
$( "#favorite-animal" ).focus();
setTimeout(function() {
equal( document.activeElement, firstInput[ 0 ] );
// Cleanup
first.remove();
second.remove();
delete $.ui.testWidget;
delete $.fn.testWidget;
start();
});
});
});
});
})(jQuery);

370
jquery-ui/tests/unit/dialog/dialog_events.js vendored Normal file
View file

@ -0,0 +1,370 @@
/*
* dialog_events.js
*/
(function($) {
module("dialog: events");
test("open", function() {
expect(13);
var element = $("<div></div>");
element.dialog({
open: function(ev, ui) {
ok(element.dialog( "instance" )._isOpen, "interal _isOpen flag is set");
ok(true, "autoOpen: true fires open callback");
equal(this, element[0], "context of callback");
equal(ev.type, "dialogopen", "event type in callback");
deepEqual(ui, {}, "ui hash in callback");
}
});
element.remove();
element = $("<div></div>");
element.dialog({
autoOpen: false,
open: function(ev, ui) {
ok(true, ".dialog('open') fires open callback");
equal(this, element[0], "context of callback");
equal(ev.type, "dialogopen", "event type in callback");
deepEqual(ui, {}, "ui hash in callback");
}
}).bind("dialogopen", function(ev, ui) {
ok(element.dialog( "instance" )._isOpen, "interal _isOpen flag is set");
ok(true, "dialog('open') fires open event");
equal(this, element[0], "context of event");
deepEqual(ui, {}, "ui hash in event");
});
element.dialog("open");
element.remove();
});
test( "focus", function() {
expect( 5 );
var element, other;
element = $("#dialog1").dialog({
autoOpen: false
});
other = $("#dialog2").dialog({
autoOpen: false
});
element.one( "dialogopen", function() {
ok( true, "open, just once" );
});
element.one( "dialogfocus", function() {
ok( true, "focus on open" );
});
other.dialog( "open" );
element.one( "dialogfocus", function() {
ok( true, "when opening and already open and wasn't on top" );
});
other.dialog( "open" );
element.dialog( "open" );
element.one( "dialogfocus", function() {
ok( true, "when calling moveToTop and wasn't on top" );
});
other.dialog( "moveToTop" );
element.dialog( "moveToTop" );
element.bind( "dialogfocus", function() {
ok( true, "when mousedown anywhere on the dialog and it wasn't on top" );
});
other.dialog( "moveToTop" );
element.trigger( "mousedown" );
// triggers just once when already on top
element.dialog( "open" );
element.dialog( "moveToTop" );
element.trigger( "mousedown" );
element.add( other ).remove();
});
test("dragStart", function() {
expect(9);
var handle,
element = $("<div></div>").dialog({
dragStart: function(ev, ui) {
ok(true, "dragging fires dragStart callback");
equal(this, element[0], "context of callback");
equal(ev.type, "dialogdragstart", "event type in callback");
ok(ui.position !== undefined, "ui.position in callback");
ok(ui.offset !== undefined, "ui.offset in callback");
}
}).bind("dialogdragstart", function(ev, ui) {
ok(true, "dragging fires dialogdragstart event");
equal(this, element[0], "context of event");
ok(ui.position !== undefined, "ui.position in callback");
ok(ui.offset !== undefined, "ui.offset in callback");
});
handle = $(".ui-dialog-titlebar", element.dialog("widget"));
TestHelpers.dialog.drag(element, handle, 50, 50);
element.remove();
});
test("drag", function() {
expect(9);
var handle,
hasDragged = false,
element = $("<div></div>").dialog({
drag: function(ev, ui) {
if (!hasDragged) {
ok(true, "dragging fires drag callback");
equal(this, element[0], "context of callback");
equal(ev.type, "dialogdrag", "event type in callback");
ok(ui.position !== undefined, "ui.position in callback");
ok(ui.offset !== undefined, "ui.offset in callback");
hasDragged = true;
}
}
}).one("dialogdrag", function(ev, ui) {
ok(true, "dragging fires dialogdrag event");
equal(this, element[0], "context of event");
ok(ui.position !== undefined, "ui.position in callback");
ok(ui.offset !== undefined, "ui.offset in callback");
});
handle = $(".ui-dialog-titlebar", element.dialog("widget"));
TestHelpers.dialog.drag(element, handle, 50, 50);
element.remove();
});
test("dragStop", function() {
expect(9);
var handle,
element = $("<div></div>").dialog({
dragStop: function(ev, ui) {
ok(true, "dragging fires dragStop callback");
equal(this, element[0], "context of callback");
equal(ev.type, "dialogdragstop", "event type in callback");
ok(ui.position !== undefined, "ui.position in callback");
ok(ui.offset !== undefined, "ui.offset in callback");
}
}).bind("dialogdragstop", function(ev, ui) {
ok(true, "dragging fires dialogdragstop event");
equal(this, element[0], "context of event");
ok(ui.position !== undefined, "ui.position in callback");
ok(ui.offset !== undefined, "ui.offset in callback");
});
handle = $(".ui-dialog-titlebar", element.dialog("widget"));
TestHelpers.dialog.drag(element, handle, 50, 50);
element.remove();
});
test("resizeStart", function() {
expect(13);
var handle,
element = $("<div></div>").dialog({
resizeStart: function(ev, ui) {
ok(true, "resizing fires resizeStart callback");
equal(this, element[0], "context of callback");
equal(ev.type, "dialogresizestart", "event type in callback");
ok(ui.originalPosition !== undefined, "ui.originalPosition in callback");
ok(ui.originalSize !== undefined, "ui.originalSize in callback");
ok(ui.position !== undefined, "ui.position in callback");
ok(ui.size !== undefined, "ui.size in callback");
}
}).bind("dialogresizestart", function(ev, ui) {
ok(true, "resizing fires dialogresizestart event");
equal(this, element[0], "context of event");
ok(ui.originalPosition !== undefined, "ui.originalPosition in callback");
ok(ui.originalSize !== undefined, "ui.originalSize in callback");
ok(ui.position !== undefined, "ui.position in callback");
ok(ui.size !== undefined, "ui.size in callback");
});
handle = $(".ui-resizable-se", element.dialog("widget"));
TestHelpers.dialog.drag(element, handle, 50, 50);
element.remove();
});
test("resize", function() {
expect(13);
var handle,
hasResized = false,
element = $("<div></div>").dialog({
resize: function(ev, ui) {
if (!hasResized) {
ok(true, "resizing fires resize callback");
equal(this, element[0], "context of callback");
equal(ev.type, "dialogresize", "event type in callback");
ok(ui.originalPosition !== undefined, "ui.originalPosition in callback");
ok(ui.originalSize !== undefined, "ui.originalSize in callback");
ok(ui.position !== undefined, "ui.position in callback");
ok(ui.size !== undefined, "ui.size in callback");
hasResized = true;
}
}
}).one("dialogresize", function(ev, ui) {
ok(true, "resizing fires dialogresize event");
equal(this, element[0], "context of event");
ok(ui.originalPosition !== undefined, "ui.originalPosition in callback");
ok(ui.originalSize !== undefined, "ui.originalSize in callback");
ok(ui.position !== undefined, "ui.position in callback");
ok(ui.size !== undefined, "ui.size in callback");
});
handle = $(".ui-resizable-se", element.dialog("widget"));
TestHelpers.dialog.drag(element, handle, 50, 50);
element.remove();
});
test("resizeStop", function() {
expect(13);
var handle,
element = $("<div></div>").dialog({
resizeStop: function(ev, ui) {
ok(true, "resizing fires resizeStop callback");
equal(this, element[0], "context of callback");
equal(ev.type, "dialogresizestop", "event type in callback");
ok(ui.originalPosition !== undefined, "ui.originalPosition in callback");
ok(ui.originalSize !== undefined, "ui.originalSize in callback");
ok(ui.position !== undefined, "ui.position in callback");
ok(ui.size !== undefined, "ui.size in callback");
}
}).bind("dialogresizestop", function(ev, ui) {
ok(true, "resizing fires dialogresizestop event");
equal(this, element[0], "context of event");
ok(ui.originalPosition !== undefined, "ui.originalPosition in callback");
ok(ui.originalSize !== undefined, "ui.originalSize in callback");
ok(ui.position !== undefined, "ui.position in callback");
ok(ui.size !== undefined, "ui.size in callback");
});
handle = $(".ui-resizable-se", element.dialog("widget"));
TestHelpers.dialog.drag(element, handle, 50, 50);
element.remove();
});
asyncTest("close", function() {
expect(14);
var element = $("<div></div>").dialog({
close: function(ev, ui) {
ok(true, ".dialog('close') fires close callback");
equal(this, element[0], "context of callback");
equal(ev.type, "dialogclose", "event type in callback");
deepEqual(ui, {}, "ui hash in callback");
}
}).bind("dialogclose", function(ev, ui) {
ok(true, ".dialog('close') fires dialogclose event");
equal(this, element[0], "context of event");
deepEqual(ui, {}, "ui hash in event");
});
element.dialog("close");
element.remove();
// Close event with an effect
element = $("<div></div>").dialog({
hide: 10,
close: function(ev, ui) {
ok(true, ".dialog('close') fires close callback");
equal(this, element[0], "context of callback");
equal(ev.type, "dialogclose", "event type in callback");
deepEqual(ui, {}, "ui hash in callback");
start();
}
}).bind("dialogclose", function(ev, ui) {
ok(true, ".dialog('close') fires dialogclose event");
equal(this, element[0], "context of event");
deepEqual(ui, {}, "ui hash in event");
});
element.dialog("close");
});
test("beforeClose", function() {
expect(14);
var element = $("<div></div>").dialog({
beforeClose: function(ev, ui) {
ok(true, ".dialog('close') fires beforeClose callback");
equal(this, element[0], "context of callback");
equal(ev.type, "dialogbeforeclose", "event type in callback");
deepEqual(ui, {}, "ui hash in callback");
return false;
}
});
element.dialog("close");
ok( element.dialog("widget").is(":visible"), "beforeClose callback should prevent dialog from closing");
element.remove();
element = $("<div></div>").dialog();
element.dialog("option", "beforeClose", function(ev, ui) {
ok(true, ".dialog('close') fires beforeClose callback");
equal(this, element[0], "context of callback");
equal(ev.type, "dialogbeforeclose", "event type in callback");
deepEqual(ui, {}, "ui hash in callback");
return false;
});
element.dialog("close");
ok( element.dialog("widget").is(":visible"), "beforeClose callback should prevent dialog from closing");
element.remove();
element = $("<div></div>").dialog().bind("dialogbeforeclose", function(ev, ui) {
ok(true, ".dialog('close') triggers dialogbeforeclose event");
equal(this, element[0], "context of event");
deepEqual(ui, {}, "ui hash in event");
return false;
});
element.dialog("close");
ok( element.dialog("widget").is(":visible"), "dialogbeforeclose event should prevent dialog from closing");
element.remove();
});
// #8789 and #8838
asyncTest("ensure dialog's container doesn't scroll on resize and focus", function() {
expect(2);
var element = $("#dialog1").dialog(),
initialScroll = $(window).scrollTop();
element.dialog("option", "height", 600);
equal($(window).scrollTop(), initialScroll, "scroll hasn't moved after height change");
setTimeout( function(){
$(".ui-dialog-titlebar-close").simulate("mousedown");
equal($(window).scrollTop(), initialScroll, "scroll hasn't moved after focus moved to dialog");
element.dialog("destroy");
start();
}, 500);
});
test("#5184: isOpen in dialogclose event is true", function() {
expect( 3 );
var element = $( "<div></div>" ).dialog({
close: function() {
ok( !element.dialog("isOpen"), "dialog is not open during close" );
}
});
ok( element.dialog("isOpen"), "dialog is open after init" );
element.dialog( "close" );
ok( !element.dialog("isOpen"), "dialog is not open after close" );
element.remove();
});
test("ensure dialog keeps focus when clicking modal overlay", function() {
expect( 2 );
var element = $( "<div></div>" ).dialog({
modal: true
});
equal( $( document.activeElement ).closest( ".ui-dialog" ).length, 1, "focus is in dialog" );
$(".ui-widget-overlay").simulate("mousedown");
equal( $( document.activeElement ).closest( ".ui-dialog" ).length, 1, "focus is still in dialog" );
element.remove();
});
})(jQuery);

267
jquery-ui/tests/unit/dialog/dialog_methods.js vendored Normal file
View file

@ -0,0 +1,267 @@
/*
* dialog_methods.js
*/
(function($) {
module("dialog: methods", {
teardown: function() {
$("body>.ui-dialog").remove();
}
});
test("init", function() {
expect(6);
$("<div></div>").appendTo("body").dialog().remove();
ok(true, ".dialog() called on element");
$([]).dialog().remove();
ok(true, ".dialog() called on empty collection");
$("<div></div>").dialog().remove();
ok(true, ".dialog() called on disconnected DOMElement - never connected");
$("<div></div>").appendTo("body").remove().dialog().remove();
ok(true, ".dialog() called on disconnected DOMElement - removed");
var element = $("<div></div>").dialog();
element.dialog("option", "foo");
element.remove();
ok(true, "arbitrary option getter after init");
$("<div></div>").dialog().dialog("option", "foo", "bar").remove();
ok(true, "arbitrary option setter after init");
});
test("destroy", function() {
expect( 17 );
var element, element2;
$( "#dialog1, #form-dialog" ).hide();
domEqual( "#dialog1", function() {
var dialog = $( "#dialog1" ).dialog().dialog( "destroy" );
equal( dialog.parent()[ 0 ], $( "#qunit-fixture" )[ 0 ] );
equal( dialog.index(), 0 );
});
domEqual( "#form-dialog", function() {
var dialog = $( "#form-dialog" ).dialog().dialog( "destroy" );
equal( dialog.parent()[ 0 ], $( "#qunit-fixture" )[ 0 ] );
equal( dialog.index(), 2 );
});
// Ensure dimensions are restored (#8119)
$( "#dialog1" ).show().css({
width: "400px",
minHeight: "100px",
height: "200px"
});
domEqual( "#dialog1", function() {
$( "#dialog1" ).dialog().dialog( "destroy" );
});
// Don't throw errors when destroying a never opened modal dialog (#9004)
$( "#dialog1" ).dialog({ autoOpen: false, modal: true }).dialog( "destroy" );
equal( $( ".ui-widget-overlay" ).length, 0, "overlay does not exist" );
equal( $( document ).data( "ui-dialog-overlays" ), undefined, "ui-dialog-overlays equals the number of open overlays");
element = $( "#dialog1" ).dialog({ modal: true }),
element2 = $( "#dialog2" ).dialog({ modal: true });
equal( $( ".ui-widget-overlay" ).length, 2, "overlays created when dialogs are open" );
equal( $( document ).data( "ui-dialog-overlays" ), 2, "ui-dialog-overlays equals the number of open overlays" );
element.dialog( "close" );
equal( $( ".ui-widget-overlay" ).length, 1, "overlay remains after closing one dialog" );
equal( $( document ).data( "ui-dialog-overlays" ), 1, "ui-dialog-overlays equals the number of open overlays" );
element.dialog( "destroy" );
equal( $( ".ui-widget-overlay" ).length, 1, "overlay remains after destroying one dialog" );
equal( $( document ).data( "ui-dialog-overlays" ), 1, "ui-dialog-overlays equals the number of open overlays" );
element2.dialog( "destroy" );
equal( $( ".ui-widget-overlay" ).length, 0, "overlays removed when all dialogs are destoryed" );
equal( $( document ).data( "ui-dialog-overlays" ), undefined, "ui-dialog-overlays equals the number of open overlays" );
});
asyncTest("#9000: Dialog leaves broken event handler after close/destroy in certain cases", function() {
expect( 1 );
$( "#dialog1" ).dialog({ modal:true }).dialog( "close" ).dialog( "destroy" );
setTimeout(function() {
$( "#favorite-animal" ).focus();
ok( true, "close and destroy modal dialog before its really opened" );
start();
}, 2 );
});
test("#4980: Destroy should place element back in original DOM position", function(){
expect( 2 );
var container = $("<div id='container'><div id='modal'>Content</div></div>"),
modal = container.find("#modal");
modal.dialog();
ok(!$.contains(container[0], modal[0]), "dialog should move modal element to outside container element");
modal.dialog("destroy");
ok($.contains(container[0], modal[0]), "dialog(destroy) should place element back in original DOM position");
});
test( "enable/disable disabled", function() {
expect( 4 );
var element = $( "<div></div>" ).dialog();
element.dialog( "disable" );
equal(element.dialog( "option", "disabled" ), false, "disable method doesn't do anything" );
ok( !element.dialog( "widget" ).hasClass( "ui-dialog-disabled" ), "disable method doesn't add ui-dialog-disabled class" );
ok( !element.dialog( "widget" ).hasClass( "ui-state-disabled" ), "disable method doesn't add ui-state-disabled class" );
ok( !element.dialog( "widget" ).attr( "aria-disabled" ), "disable method doesn't add aria-disabled" );
});
test("close", function() {
expect( 3 );
var element,
expected = $("<div></div>").dialog(),
actual = expected.dialog("close");
equal(actual, expected, "close is chainable");
element = $("<div></div>").dialog();
ok(element.dialog("widget").is(":visible") && !element.dialog("widget").is(":hidden"), "dialog visible before close method called");
element.dialog("close");
ok(element.dialog("widget").is(":hidden") && !element.dialog("widget").is(":visible"), "dialog hidden after close method called");
});
test("isOpen", function() {
expect(4);
var element = $("<div></div>").dialog();
equal(element.dialog("isOpen"), true, "dialog is open after init");
element.dialog("close");
equal(element.dialog("isOpen"), false, "dialog is closed");
element.remove();
element = $("<div></div>").dialog({autoOpen: false});
equal(element.dialog("isOpen"), false, "dialog is closed after init");
element.dialog("open");
equal(element.dialog("isOpen"), true, "dialog is open");
element.remove();
});
test("moveToTop", function() {
expect( 5 );
function order() {
var actual = $( ".ui-dialog" ).map(function() {
return +$( this ).css( "z-index" );
}).get();
deepEqual( actual, $.makeArray( arguments ) );
}
var dialog1, dialog2,
focusOn = "dialog1";
dialog1 = $( "#dialog1" ).dialog({
focus: function() {
equal( focusOn, "dialog1" );
}
});
focusOn = "dialog2";
dialog2 = $( "#dialog2" ).dialog({
focus: function() {
equal( focusOn, "dialog2" );
}
});
order( 100, 101 );
focusOn = "dialog1";
dialog1.dialog( "moveToTop" );
order( 102, 101 );
});
test( "moveToTop: content scroll stays intact", function() {
expect( 2 );
var otherDialog = $( "#dialog1" ).dialog(),
scrollDialog = $( "#form-dialog" ).dialog({
height: 200
});
scrollDialog.scrollTop( 50 );
equal( scrollDialog.scrollTop(), 50 );
otherDialog.dialog( "moveToTop" );
equal( scrollDialog.scrollTop(), 50 );
});
test("open", function() {
expect( 3 );
var element,
expected = $("<div></div>").dialog(),
actual = expected.dialog("open");
equal(actual, expected, "open is chainable");
element = $("<div></div>").dialog({ autoOpen: false });
ok(element.dialog("widget").is(":hidden") && !element.dialog("widget").is(":visible"), "dialog hidden before open method called");
element.dialog("open");
ok(element.dialog("widget").is(":visible") && !element.dialog("widget").is(":hidden"), "dialog visible after open method called");
});
test("#6137: dialog('open') causes form elements to reset on IE7", function() {
expect(2);
var d1 = $("<form><input type='radio' name='radio' id='a' value='a' checked='checked'></input>" +
"<input type='radio' name='radio' id='b' value='b'>b</input></form>").appendTo( "body" ).dialog({autoOpen: false});
d1.find("#b").prop( "checked", true );
equal(d1.find("input:checked").val(), "b", "checkbox b is checked");
d1.dialog("open");
equal(d1.find("input:checked").val(), "b", "checkbox b is checked");
d1.remove();
});
asyncTest( "#8958: dialog can be opened while opening", function() {
expect( 1 );
var element = $( "<div>" ).dialog({
autoOpen: false,
modal: true,
open: function() {
equal( $( ".ui-widget-overlay" ).length, 1 );
start();
}
});
// Support: IE8
// For some reason the #favorite-color input doesn't get focus if we don't
// focus the body first, causing the test to hang.
$( "body" ).focus();
$( "#favorite-animal" )
// We focus the input to start the test. Once it receives focus, the
// dialog will open. Opening the dialog, will cause an element inside
// the dialog to gain focus, thus blurring the input.
.bind( "focus", function() {
element.dialog( "open" );
})
// When the input blurs, the dialog is in the process of opening. We
// try to open the dialog again, to make sure that dialogs properly
// handle a call to the open() method during the process of the dialog
// being opened.
.bind( "blur", function() {
element.dialog( "open" );
})
.focus();
});
test("#5531: dialog width should be at least minWidth on creation", function () {
expect( 4 );
var element = $("<div></div>").dialog({
width: 200,
minWidth: 300
});
equal(element.dialog("option", "width"), 300, "width is minWidth");
element.dialog("option", "width", 200);
equal(element.dialog("option", "width"), 300, "width unchanged when set to < minWidth");
element.dialog("option", "width", 320);
equal(element.dialog("option", "width"), 320, "width changed if set to > minWidth");
element.remove();
element = $("<div></div>").dialog({
minWidth: 300
});
ok(element.dialog("option", "width") >= 300, "width is at least 300");
element.remove();
});
})(jQuery);

584
jquery-ui/tests/unit/dialog/dialog_options.js vendored Normal file
View file

@ -0,0 +1,584 @@
/*
* dialog_options.js
*/
(function($) {
module("dialog: options");
test( "appendTo", function() {
expect( 16 );
var detached = $( "<div>" ),
element = $( "#dialog1" ).dialog({
modal: true
});
equal( element.dialog( "widget" ).parent()[0], document.body, "defaults to body" );
equal( $( ".ui-widget-overlay" ).parent()[0], document.body, "overlay defaults to body" );
element.dialog( "destroy" );
element.dialog({
appendTo: ".wrap",
modal: true
});
equal( element.dialog( "widget" ).parent()[0], $( "#wrap1" )[0], "first found element" );
equal( $( ".ui-widget-overlay" ).parent()[0], $( "#wrap1" )[0], "overlay first found element" );
equal( $( "#wrap2 .ui-dialog" ).length, 0, "only appends to one element" );
equal( $( "#wrap2 .ui-widget-overlay" ).length, 0, "overlay only appends to one element" );
element.dialog( "destroy" );
element.dialog({
appendTo: null,
modal: true
});
equal( element.dialog( "widget" ).parent()[0], document.body, "null" );
equal( $( ".ui-widget-overlay" ).parent()[0], document.body, "overlay null" );
element.dialog( "destroy" );
element.dialog({
autoOpen: false,
modal: true
}).dialog( "option", "appendTo", "#wrap1" ).dialog( "open" );
equal( element.dialog( "widget" ).parent()[0], $( "#wrap1" )[0], "modified after init" );
equal( $( ".ui-widget-overlay" ).parent()[0], $( "#wrap1" )[0], "overlay modified after init" );
element.dialog( "destroy" );
element.dialog({
appendTo: detached,
modal: true
});
equal( element.dialog( "widget" ).parent()[0], detached[0], "detached jQuery object" );
equal( detached.find( ".ui-widget-overlay" ).parent()[0], detached[0], "overlay detached jQuery object" );
element.dialog( "destroy" );
element.dialog({
appendTo: detached[0],
modal: true
});
equal( element.dialog( "widget" ).parent()[0], detached[0], "detached DOM element" );
equal( detached.find( ".ui-widget-overlay" ).parent()[0], detached[0], "overlay detached DOM element" );
element.dialog( "destroy" );
element.dialog({
autoOpen: false,
modal: true
}).dialog( "option", "appendTo", detached );
equal( element.dialog( "widget" ).parent()[0], detached[0], "detached DOM element via option()" );
equal( detached.find( ".ui-widget-overlay" ).length, 0, "overlay detached DOM element via option()" );
element.dialog( "destroy" );
});
test("autoOpen", function() {
expect(2);
var element = $("<div></div>").dialog({ autoOpen: false });
ok( !element.dialog("widget").is(":visible"), ".dialog({ autoOpen: false })");
element.remove();
element = $("<div></div>").dialog({ autoOpen: true });
ok( element.dialog("widget").is(":visible"), ".dialog({ autoOpen: true })");
element.remove();
});
test("buttons", function() {
expect(21);
var btn, i, newButtons,
buttons = {
"Ok": function( ev ) {
ok(true, "button click fires callback");
equal(this, element[0], "context of callback");
equal(ev.target, btn[0], "event target");
},
"Cancel": function( ev ) {
ok(true, "button click fires callback");
equal(this, element[0], "context of callback");
equal(ev.target, btn[1], "event target");
}
},
element = $("<div></div>").dialog({ buttons: buttons });
btn = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
equal(btn.length, 2, "number of buttons");
i = 0;
$.each(buttons, function( key ) {
equal(btn.eq(i).text(), key, "text of button " + (i+1));
i++;
});
ok(btn.parent().hasClass("ui-dialog-buttonset"), "buttons in container");
ok(element.parent().hasClass("ui-dialog-buttons"), "dialog wrapper adds class about having buttons");
btn.trigger("click");
newButtons = {
"Close": function( ev ) {
ok(true, "button click fires callback");
equal(this, element[0], "context of callback");
equal(ev.target, btn[0], "event target");
}
};
deepEqual(element.dialog("option", "buttons"), buttons, ".dialog('option', 'buttons') getter");
element.dialog("option", "buttons", newButtons);
deepEqual(element.dialog("option", "buttons"), newButtons, ".dialog('option', 'buttons', ...) setter");
btn = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
equal(btn.length, 1, "number of buttons after setter");
btn.trigger("click");
i = 0;
$.each(newButtons, function( key ) {
equal(btn.eq(i).text(), key, "text of button " + (i+1));
i += 1;
});
element.dialog("option", "buttons", null);
btn = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
equal(btn.length, 0, "all buttons have been removed");
equal(element.find(".ui-dialog-buttonset").length, 0, "buttonset has been removed");
equal(element.parent().hasClass("ui-dialog-buttons"), false, "dialog wrapper removes class about having buttons");
element.remove();
});
test("buttons - advanced", function() {
expect( 7 );
var buttons,
element = $("<div></div>").dialog({
buttons: [
{
text: "a button",
"class": "additional-class",
id: "my-button-id",
click: function() {
equal(this, element[0], "correct context");
},
icons: {
primary: "ui-icon-cancel"
},
showText: false
}
]
});
buttons = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
equal(buttons.length, 1, "correct number of buttons");
equal(buttons.attr("id"), "my-button-id", "correct id");
equal(buttons.text(), "a button", "correct label");
ok(buttons.hasClass("additional-class"), "additional classes added");
deepEqual( buttons.button("option", "icons"), { primary: "ui-icon-cancel", secondary: null } );
equal( buttons.button( "option", "text" ), false );
buttons.click();
element.remove();
});
test("#9043: buttons with Array.prototype modification", function() {
expect( 1 );
Array.prototype.test = $.noop;
var element = $( "<div></div>" ).dialog();
equal( element.dialog( "widget" ).find( ".ui-dialog-buttonpane" ).length, 0,
"no button pane" );
element.remove();
delete Array.prototype.test;
});
test("closeOnEscape", function() {
expect( 6 );
var element = $("<div></div>").dialog({ closeOnEscape: false });
ok(true, "closeOnEscape: false");
ok(element.dialog("widget").is(":visible") && !element.dialog("widget").is(":hidden"), "dialog is open before ESC");
element.simulate("keydown", { keyCode: $.ui.keyCode.ESCAPE })
.simulate("keypress", { keyCode: $.ui.keyCode.ESCAPE })
.simulate("keyup", { keyCode: $.ui.keyCode.ESCAPE });
ok(element.dialog("widget").is(":visible") && !element.dialog("widget").is(":hidden"), "dialog is open after ESC");
element.remove();
element = $("<div></div>").dialog({ closeOnEscape: true });
ok(true, "closeOnEscape: true");
ok(element.dialog("widget").is(":visible") && !element.dialog("widget").is(":hidden"), "dialog is open before ESC");
element.simulate("keydown", { keyCode: $.ui.keyCode.ESCAPE })
.simulate("keypress", { keyCode: $.ui.keyCode.ESCAPE })
.simulate("keyup", { keyCode: $.ui.keyCode.ESCAPE });
ok(element.dialog("widget").is(":hidden") && !element.dialog("widget").is(":visible"), "dialog is closed after ESC");
});
test("closeText", function() {
expect(3);
var element = $("<div></div>").dialog();
equal(element.dialog("widget").find(".ui-dialog-titlebar-close span").text(), "Close",
"default close text");
element.remove();
element = $("<div></div>").dialog({ closeText: "foo" });
equal(element.dialog("widget").find(".ui-dialog-titlebar-close span").text(), "foo",
"closeText on init");
element.remove();
element = $("<div></div>").dialog().dialog("option", "closeText", "bar");
equal(element.dialog("widget").find(".ui-dialog-titlebar-close span").text(), "bar",
"closeText via option method");
element.remove();
});
test("dialogClass", function() {
expect( 6 );
var element = $("<div></div>").dialog();
equal(element.dialog("widget").is(".foo"), false, "dialogClass not specified. foo class added");
element.remove();
element = $("<div></div>").dialog({ dialogClass: "foo" });
equal(element.dialog("widget").is(".foo"), true, "dialogClass in init. foo class added");
element.dialog( "option", "dialogClass", "foobar" );
equal( element.dialog("widget").is(".foo"), false, "dialogClass changed, previous one was removed" );
equal( element.dialog("widget").is(".foobar"), true, "dialogClass changed, new one was added" );
element.remove();
element = $("<div></div>").dialog({ dialogClass: "foo bar" });
equal(element.dialog("widget").is(".foo"), true, "dialogClass in init, two classes. foo class added");
equal(element.dialog("widget").is(".bar"), true, "dialogClass in init, two classes. bar class added");
element.remove();
});
test("draggable", function() {
expect(4);
var element = $("<div></div>").dialog({ draggable: false });
TestHelpers.dialog.testDrag(element, 50, -50, 0, 0);
element.dialog("option", "draggable", true);
TestHelpers.dialog.testDrag(element, 50, -50, 50, -50);
element.remove();
element = $("<div></div>").dialog({ draggable: true });
TestHelpers.dialog.testDrag(element, 50, -50, 50, -50);
element.dialog("option", "draggable", false);
TestHelpers.dialog.testDrag(element, 50, -50, 0, 0);
element.remove();
});
test("height", function() {
expect(4);
var element = $("<div></div>").dialog();
equal(element.dialog("widget").outerHeight(), 150, "default height");
element.remove();
element = $("<div></div>").dialog({ height: 237 });
equal(element.dialog("widget").outerHeight(), 237, "explicit height");
element.remove();
element = $("<div></div>").dialog();
element.dialog("option", "height", 238);
equal(element.dialog("widget").outerHeight(), 238, "explicit height set after init");
element.remove();
element = $("<div></div>").css("padding", "20px")
.dialog({ height: 240 });
equal(element.dialog("widget").outerHeight(), 240, "explicit height with padding");
element.remove();
});
asyncTest( "hide, #5860 - don't leave effects wrapper behind", function() {
expect( 1 );
$( "#dialog1" ).dialog({ hide: "clip" }).dialog( "close" ).dialog( "destroy" );
setTimeout(function() {
equal( $( ".ui-effects-wrapper" ).length, 0 );
start();
}, 500);
});
test("maxHeight", function() {
expect(3);
var element = $("<div></div>").dialog({ maxHeight: 200 });
TestHelpers.dialog.drag(element, ".ui-resizable-s", 1000, 1000);
closeEnough(element.dialog("widget").height(), 200, 1, "maxHeight");
element.remove();
element = $("<div></div>").dialog({ maxHeight: 200 });
TestHelpers.dialog.drag(element, ".ui-resizable-n", -1000, -1000);
closeEnough(element.dialog("widget").height(), 200, 1, "maxHeight");
element.remove();
element = $("<div></div>").dialog({ maxHeight: 200 }).dialog("option", "maxHeight", 300);
TestHelpers.dialog.drag(element, ".ui-resizable-s", 1000, 1000);
closeEnough(element.dialog("widget").height(), 300, 1, "maxHeight");
element.remove();
});
test("maxWidth", function() {
expect(3);
var element = $("<div></div>").dialog({ maxWidth: 200 });
TestHelpers.dialog.drag(element, ".ui-resizable-e", 1000, 1000);
closeEnough(element.dialog("widget").width(), 200, 1, "maxWidth");
element.remove();
element = $("<div></div>").dialog({ maxWidth: 200 });
TestHelpers.dialog.drag(element, ".ui-resizable-w", -1000, -1000);
closeEnough(element.dialog("widget").width(), 200, 1, "maxWidth");
element.remove();
element = $("<div></div>").dialog({ maxWidth: 200 }).dialog("option", "maxWidth", 300);
TestHelpers.dialog.drag(element, ".ui-resizable-w", -1000, -1000);
closeEnough(element.dialog("widget").width(), 300, 1, "maxWidth");
element.remove();
});
test("minHeight", function() {
expect(3);
var element = $("<div></div>").dialog({ minHeight: 10 });
TestHelpers.dialog.drag(element, ".ui-resizable-s", -1000, -1000);
closeEnough(element.dialog("widget").height(), 10, 1, "minHeight");
element.remove();
element = $("<div></div>").dialog({ minHeight: 10 });
TestHelpers.dialog.drag(element, ".ui-resizable-n", 1000, 1000);
closeEnough(element.dialog("widget").height(), 10, 1, "minHeight");
element.remove();
element = $("<div></div>").dialog({ minHeight: 10 }).dialog("option", "minHeight", 30);
TestHelpers.dialog.drag(element, ".ui-resizable-n", 1000, 1000);
closeEnough(element.dialog("widget").height(), 30, 1, "minHeight");
element.remove();
});
test("minWidth", function() {
expect(3);
var element = $("<div></div>").dialog({ minWidth: 10 });
TestHelpers.dialog.drag(element, ".ui-resizable-e", -1000, -1000);
closeEnough(element.dialog("widget").width(), 10, 1, "minWidth");
element.remove();
element = $("<div></div>").dialog({ minWidth: 10 });
TestHelpers.dialog.drag(element, ".ui-resizable-w", 1000, 1000);
closeEnough(element.dialog("widget").width(), 10, 1, "minWidth");
element.remove();
element = $("<div></div>").dialog({ minWidth: 30 }).dialog("option", "minWidth", 30);
TestHelpers.dialog.drag(element, ".ui-resizable-w", 1000, 1000);
closeEnough(element.dialog("widget").width(), 30, 1, "minWidth");
element.remove();
});
test( "position, default center on window", function() {
expect( 2 );
// dialogs alter the window width and height in FF and IE7
// so we collect that information before creating the dialog
// Support: FF, IE7
var winWidth = $( window ).width(),
winHeight = $( window ).height(),
element = $("<div></div>").dialog(),
dialog = element.dialog("widget"),
offset = dialog.offset();
closeEnough( offset.left, Math.round( winWidth / 2 - dialog.outerWidth() / 2 ) + $( window ).scrollLeft(), 1, "dialog left position of center on window on initilization" );
closeEnough( offset.top, Math.round( winHeight / 2 - dialog.outerHeight() / 2 ) + $( window ).scrollTop(), 1, "dialog top position of center on window on initilization" );
element.remove();
});
test( "position, right bottom at right bottom via ui.position args", function() {
expect( 2 );
// dialogs alter the window width and height in FF and IE7
// so we collect that information before creating the dialog
// Support: FF, IE7
var winWidth = $( window ).width(),
winHeight = $( window ).height(),
element = $("<div></div>").dialog({
position: {
my: "right bottom",
at: "right bottom"
}
}),
dialog = element.dialog("widget"),
offset = dialog.offset();
closeEnough( offset.left, winWidth - dialog.outerWidth() + $( window ).scrollLeft(), 1, "dialog left position of right bottom at right bottom on initilization" );
closeEnough( offset.top, winHeight - dialog.outerHeight() + $( window ).scrollTop(), 1, "dialog top position of right bottom at right bottom on initilization" );
element.remove();
});
test( "position, at another element", function() {
expect( 4 );
var parent = $("<div></div>").css({
position: "absolute",
top: 400,
left: 600,
height: 10,
width: 10
}).appendTo("body"),
element = $("<div></div>").dialog({
position: {
my: "left top",
at: "left top",
of: parent,
collision: "none"
}
}),
dialog = element.dialog("widget"),
offset = dialog.offset();
closeEnough( offset.left, 600, 1, "dialog left position at another element on initilization" );
closeEnough( offset.top, 400, 1, "dialog top position at another element on initilization" );
element.dialog("option", "position", {
my: "left top",
at: "right bottom",
of: parent,
collision: "none"
});
offset = dialog.offset();
closeEnough( offset.left, 610, 1, "dialog left position at another element via setting option" );
closeEnough( offset.top, 410, 1, "dialog top position at another element via setting option" );
element.remove();
parent.remove();
});
test("resizable", function() {
expect(4);
var element = $("<div></div>").dialog();
TestHelpers.dialog.shouldResize(element, 50, 50, "[default]");
element.dialog("option", "resizable", false);
TestHelpers.dialog.shouldResize(element, 0, 0, "disabled after init");
element.remove();
element = $("<div></div>").dialog({ resizable: false });
TestHelpers.dialog.shouldResize(element, 0, 0, "disabled in init options");
element.dialog("option", "resizable", true);
TestHelpers.dialog.shouldResize(element, 50, 50, "enabled after init");
element.remove();
});
test( "title", function() {
expect( 11 );
function titleText() {
return element.dialog("widget").find( ".ui-dialog-title" ).html();
}
var element = $( "<div></div>" ).dialog();
// some browsers return a non-breaking space and some return "&nbsp;"
// so we generate a non-breaking space for comparison
equal( titleText(), $( "<span>&#160;</span>" ).html(), "[default]" );
equal( element.dialog( "option", "title" ), null, "option not changed" );
element.remove();
element = $( "<div title='foo'>" ).dialog();
equal( titleText(), "foo", "title in element attribute" );
equal( element.dialog( "option", "title"), "foo", "option updated from attribute" );
element.remove();
element = $( "<div></div>" ).dialog({ title: "foo" });
equal( titleText(), "foo", "title in init options" );
equal( element.dialog("option", "title"), "foo", "opiton set from options hash" );
element.remove();
element = $( "<div title='foo'>" ).dialog({ title: "bar" });
equal( titleText(), "bar", "title in init options should override title in element attribute" );
equal( element.dialog("option", "title"), "bar", "opiton set from options hash" );
element.remove();
element = $( "<div></div>" ).dialog().dialog( "option", "title", "foo" );
equal( titleText(), "foo", "title after init" );
element.remove();
// make sure attroperties are properly ignored - #5742 - .attr() might return a DOMElement
element = $( "<form><input name='title'></form>" ).dialog();
// some browsers return a non-breaking space and some return "&nbsp;"
// so we get the text to normalize to the actual non-breaking space
equal( titleText(), $( "<span>&#160;</span>" ).html(), "[default]" );
equal( element.dialog( "option", "title" ), null, "option not changed" );
element.remove();
});
test("width", function() {
expect(3);
var element = $("<div></div>").dialog();
closeEnough(element.dialog("widget").width(), 300, 1, "default width");
element.remove();
element = $("<div></div>").dialog({width: 437 });
closeEnough(element.dialog("widget").width(), 437, 1, "explicit width");
element.dialog("option", "width", 438);
closeEnough(element.dialog("widget").width(), 438, 1, "explicit width after init");
element.remove();
});
test("#4826: setting resizable false toggles resizable on dialog", function() {
expect(6);
var i,
element = $("<div></div>").dialog({ resizable: false });
TestHelpers.dialog.shouldResize(element, 0, 0, "[default]");
for (i=0; i<2; i++) {
element.dialog("close").dialog("open");
TestHelpers.dialog.shouldResize(element, 0, 0, "initialized with resizable false toggle ("+ (i+1) +")");
}
element.remove();
element = $("<div></div>").dialog({ resizable: true });
TestHelpers.dialog.shouldResize(element, 50, 50, "[default]");
for (i=0; i<2; i++) {
element.dialog("close").dialog("option", "resizable", false).dialog("open");
TestHelpers.dialog.shouldResize(element, 0, 0, "set option resizable false toggle ("+ (i+1) +")");
}
element.remove();
});
asyncTest( "#8051 - 'Explode' dialog animation causes crash in IE 6, 7 and 8", function() {
expect( 1 );
var element = $( "<div></div>" ).dialog({
show: "explode",
focus: function() {
ok( true, "dialog opened with animation" );
element.remove();
start();
}
});
});
asyncTest( "#4421 - Focus lost from dialog which uses show-effect", function() {
expect( 1 );
var element = $( "<div></div>" ).dialog({
show: "blind",
focus: function() {
equal( element.dialog( "widget" ).find( document.activeElement ).length, 1, "dialog maintains focus" );
element.remove();
start();
}
});
});
asyncTest( "Open followed by close during show effect", function() {
expect( 1 );
var element = $( "<div></div>" ).dialog({
show: "blind",
close: function() {
ok( true, "dialog closed properly during animation" );
element.remove();
start();
}
});
setTimeout( function() {
element.dialog("close");
}, 100 );
});
})(jQuery);

47
jquery-ui/tests/unit/dialog/dialog_test_helpers.js vendored Normal file
View file

@ -0,0 +1,47 @@
TestHelpers.dialog = {
drag: function(element, handle, dx, dy) {
var d = element.dialog("widget");
//this mouseover is to work around a limitation in resizable
//TODO: fix resizable so handle doesn't require mouseover in order to be used
$( handle, d ).simulate("mouseover").simulate( "drag", {
dx: dx,
dy: dy
});
},
testDrag: function(element, dx, dy, expectedDX, expectedDY, msg) {
var actualDX, actualDY, offsetAfter,
d = element.dialog("widget"),
handle = $(".ui-dialog-titlebar", d),
offsetBefore = d.offset();
TestHelpers.dialog.drag(element, handle, dx, dy);
offsetAfter = d.offset();
msg = msg ? msg + "." : "";
actualDX = offsetAfter.left - offsetBefore.left;
actualDY = offsetAfter.top - offsetBefore.top;
ok( expectedDX - actualDX <= 1 && expectedDY - actualDY <= 1, "dragged[" + expectedDX + ", " + expectedDY + "] " + msg);
},
// TODO switch back to checking the size of the .ui-dialog element (var d)
// once we switch to using box-sizing: border-box (#9845) that should work fine
// using the element's dimensions to avoid subpixel errors
shouldResize: function(element, dw, dh, msg) {
var heightAfter, widthAfter, actual, expected,
d = element.dialog("widget"),
handle = $(".ui-resizable-se", d),
heightBefore = element.height(),
widthBefore = element.width();
TestHelpers.dialog.drag(element, handle, 50, 50);
heightAfter = element.height();
widthAfter = element.width();
msg = msg ? msg + "." : "";
actual = { width: widthAfter, height: heightAfter },
expected = { width: widthBefore + dw, height: heightBefore + dh };
deepEqual(actual, expected, "resized[" + 50 + ", " + 50 + "] " + msg);
}
};

26
jquery-ui/tests/unit/draggable/all.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable Test Suite</title>
<script src="../../../external/jquery/jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<link rel="stylesheet" href="../qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../qunit-composite.js"></script>
<script src="../subsuite.js"></script>
<script>
testAllVersions( "draggable" );
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
</div>
</body>
</html>

126
jquery-ui/tests/unit/draggable/draggable.html Normal file
View file

@ -0,0 +1,126 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable Test Suite</title>
<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<style>
#main {
width: 1000px;
height: 1000px;
overflow: scroll;
overflow-x: scroll;
overflow-y: scroll;
position: relative;
left: 0;
top: 0;
}
#main-forceScrollable {
position: absolute;
left: 0;
top: 0;
width: 1100px;
height: 1100px;
}
#scrollParent {
width: 1200px;
height: 1200px;
position: relative;
left: 0;
top: 0;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
#scrollParent-forceScrollable {
position: absolute;
left: 0;
top: 0;
width: 1300px;
height: 1300px;
}
/* See #9077 */
#draggable3, #draggable4 {
z-index: 100;
}
.sortable {
position: relative;
top: 8000px;
left: 10px;
width: 300px;
padding: 0;
margin: 0;
border: 0;
}
.sortable li {
height: 100px;
padding: 0;
margin: 0;
border: 0;
list-style: none;
display: inline-block;
}
</style>
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script>
TestHelpers.loadResources({
css: [ "core" ],
js: [
"ui/core.js",
"ui/widget.js",
"ui/mouse.js",
"ui/resizable.js",
"ui/draggable.js",
"ui/droppable.js",
"ui/sortable.js"
]
});
</script>
<script src="draggable_common.js"></script>
<script src="draggable_core.js"></script>
<script src="draggable_events.js"></script>
<script src="draggable_methods.js"></script>
<script src="draggable_options.js"></script>
<script src="draggable_test_helpers.js"></script>
<script src="../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div id="scrollParent">
<div id="main">
<div id="draggable1" style="background: green; width: 200px; height: 100px; position: relative; top: 0; left: 0;">Relative</div>
<div id="draggable2" style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span><em>Absolute</em></span></div>
<div id="draggable3" style="background: green; position: absolute; right: 5px; bottom: 5px; padding: 7px; border: 3px solid black;"><span><em>Absolute right-bottom</em></span></div>
<div id="droppable" style="background: green; width: 200px; height: 100px; position: absolute; top: 110px; left: 110px;"><span>Absolute</span></div>
<div id="main-forceScrollable"></div>
</div>
<div id="scrollParent-forceScrollable"></div>
</div>
<div style="width: 1px; height: 1000px;"></div>
<div style="position: absolute; width: 1px; height: 2000px;"></div>
<ul id="sortable" class="sortable">
<li id="draggableSortable">Item 0</li>
<li id="draggableSortable2">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul id="sortable2" class="sortable">
<li id="draggableSortableClone" class="sortable2Item">Item 0</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>

40
jquery-ui/tests/unit/draggable/draggable_common.js vendored Normal file
View file

@ -0,0 +1,40 @@
TestHelpers.commonWidgetTests( "draggable", {
defaults: {
appendTo: "parent",
axis: false,
cancel: "input,textarea,button,select,option",
connectToSortable: false,
containment: false,
cursor: "auto",
cursorAt: false,
disabled: false,
grid: false,
handle: false,
helper: "original",
opacity: false,
refreshPositions: false,
revert: false,
revertDuration: 500,
scroll: true,
scrollSensitivity: 20,
scrollSpeed: 20,
scope: "default",
snap: false,
snapMode: "both",
snapTolerance: 20,
stack: false,
zIndex: false,
//todo: remove the following option checks when interactions are rewritten:
addClasses: true,
delay: 0,
distance: 1,
iframeFix: false,
// callbacks
create: null,
drag: null,
start: null,
stop: null
}
});

377
jquery-ui/tests/unit/draggable/draggable_core.js vendored Normal file
View file

@ -0,0 +1,377 @@
/*
* draggable_core.js
*/
(function( $ ) {
module( "draggable: core" );
test( "element types", function() {
var typeNames = (
"p,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,div,form" +
",table,fieldset,address,ins,del,em,strong,q,cite,dfn,abbr" +
",acronym,code,samp,kbd,var,img,hr" +
",input,button,label,select,iframe"
).split(",");
expect( typeNames.length * 2 );
$.each( typeNames, function( i ) {
var offsetBefore, offsetAfter,
typeName = typeNames[ i ],
el = $( document.createElement( typeName ) ).appendTo("#qunit-fixture");
if ( typeName === "table" ) {
el.append("<tr><td>content</td></tr>");
}
// intrinsic height is incorrect in FF for buttons with no content
// https://bugzilla.mozilla.org/show_bug.cgi?id=471763
// Support: FF
if ( typeName === "button" ) {
el.text( "button" );
}
el.draggable({ cancel: "" });
offsetBefore = el.offset();
el.simulate( "drag", {
dx: 50,
dy: 50
});
offsetAfter = el.offset();
// Support: FF, Chrome, and IE9,
// there are some rounding errors in so we can't say equal, we have to settle for close enough
closeEnough( offsetBefore.left, offsetAfter.left - 50, 1, "dragged[50, 50] " + "<" + typeName + "> left" );
closeEnough( offsetBefore.top, offsetAfter.top - 50, 1, "dragged[50, 50] " + "<" + typeName + "> top" );
el.draggable("destroy");
el.remove();
});
});
test( "No options, relative", function() {
expect( 2 );
TestHelpers.draggable.shouldMove( $( "#draggable1" ).draggable(), "no options, relative" );
});
test( "No options, absolute", function() {
expect( 2 );
TestHelpers.draggable.shouldMove( $( "#draggable2" ).draggable(), "no options, absolute" );
});
test( "resizable handle with complex markup (#8756 / #8757)", function() {
expect( 2 );
$( "#draggable1" )
.append(
$("<div>")
.addClass("ui-resizable-handle ui-resizable-w")
.append( $("<div>") )
);
var handle = $(".ui-resizable-w div"),
target = $( "#draggable1" ).draggable().resizable({ handles: "all" });
// todo: fix resizable so it doesn't require a mouseover
handle.simulate("mouseover").simulate( "drag", { dx: -50 } );
equal( target.width(), 250, "compare width" );
// todo: fix resizable so it doesn't require a mouseover
handle.simulate("mouseover").simulate( "drag", { dx: 50 } );
equal( target.width(), 200, "compare width" );
});
test( "#8269: Removing draggable element on drop", function() {
expect( 2 );
var element = $( "#draggable1" ).wrap( "<div id='wrapper' />" ).draggable({
stop: function() {
ok( true, "stop still called despite element being removed from DOM on drop" );
}
}),
dropOffset = $( "#droppable" ).offset();
$( "#droppable" ).droppable({
drop: function() {
$( "#wrapper" ).remove();
ok( true, "element removed from DOM on drop" );
}
});
// Support: Opera 12.10, Safari 5.1, jQuery <1.8
if ( TestHelpers.draggable.unreliableContains ) {
ok( true, "Opera <12.14 and Safari <6.0 report wrong values for $.contains in jQuery < 1.8" );
ok( true, "Opera <12.14 and Safari <6.0 report wrong values for $.contains in jQuery < 1.8" );
} else {
element.simulate( "drag", {
handle: "corner",
x: dropOffset.left,
y: dropOffset.top
});
}
});
// http://bugs.jqueryui.com/ticket/7778
// drag element breaks in IE8 when its content is replaced onmousedown
test( "Stray mousemove after mousedown still drags", function() {
expect( 2 );
var element = $( "#draggable1" ).draggable({ scroll: false });
// In IE8, when content is placed under the mouse (e.g. when draggable content is replaced
// on mousedown), mousemove is triggered on those elements even though the mouse hasn't moved.
// Support: IE <9
element.bind( "mousedown", function() {
$( document ).simulate( "mousemove", { button: -1 });
});
TestHelpers.draggable.shouldMove( element, "element is draggable" );
});
test( "#6258: not following mouse when scrolled and using overflow-y: scroll", function() {
expect( 2 );
var element = $( "#draggable1" ).draggable({
stop: function( event, ui ) {
equal( ui.position.left, 1, "left position is correct despite overflow on HTML" );
equal( ui.position.top, 1, "top position is correct despite overflow on HTML" );
$( "html" )
.css( "overflow-y", oldOverflowY )
.css( "overflow-x", oldOverflowX )
.scrollTop( 0 )
.scrollLeft( 0 );
}
}),
oldOverflowY = $( "html" ).css( "overflow-y" ),
oldOverflowX = $( "html" ).css( "overflow-x" );
TestHelpers.forceScrollableWindow();
$( "html" )
.css( "overflow-y", "scroll" )
.css( "overflow-x", "scroll" )
.scrollTop( 300 )
.scrollLeft( 300 );
element.simulate( "drag", {
dx: 1,
dy: 1,
moves: 1
});
});
test( "#9315: jumps down with offset of scrollbar", function() {
expect( 2 );
var element = $( "#draggable2" ).draggable({
stop: function( event, ui ) {
equal( ui.position.left, 11, "left position is correct when position is absolute" );
equal( ui.position.top, 11, "top position is correct when position is absolute" );
$( "html" ).scrollTop( 0 ).scrollLeft( 0 );
}
});
TestHelpers.forceScrollableWindow();
$( "html" ).scrollTop( 300 ).scrollLeft( 300 );
element.simulate( "drag", {
dx: 1,
dy: 1,
moves: 1
});
});
test( "scroll offset with fixed ancestors", function() {
expect( 2 );
var startValue = 300,
element = $( "#draggable1" )
// http://bugs.jqueryui.com/ticket/5009
// scroll not working with parent's position fixed
.wrap( "<div id='wrapper' />" )
// http://bugs.jqueryui.com/ticket/9612
// abspos elements inside of fixed elements moving away from the mouse when scrolling
.wrap( "<div id='wrapper2' />" )
.draggable({
drag: function() {
startValue += 100;
$( document ).scrollTop( startValue ).scrollLeft( startValue );
},
stop: function( event, ui ) {
equal( ui.position.left, 10, "left position is correct when parent position is fixed" );
equal( ui.position.top, 10, "top position is correct when parent position is fixed" );
$( document ).scrollTop( 0 ).scrollLeft( 0 );
}
});
TestHelpers.forceScrollableWindow();
$( "#wrapper" ).css( "position", "fixed" );
$( "#wrapper2" ).css( "position", "absolute" );
element.simulate( "drag", {
dx: 10,
dy: 10,
moves: 3
});
});
$( [ "hidden", "auto", "scroll" ] ).each(function() {
var overflow = this;
// http://bugs.jqueryui.com/ticket/9379 - position bug in scrollable div
// http://bugs.jqueryui.com/ticket/10147 - Wrong position in a parent with "overflow: hidden"
test( "position in scrollable parent with overflow: " + overflow, function() {
expect( 2 );
$( "#qunit-fixture" ).html( "<div id='outer'><div id='inner'></div><div id='dragged'>a</div></div>" );
$( "#inner" ).css({ position: "absolute", width: "500px", height: "500px" });
$( "#outer" ).css({ position: "absolute", width: "300px", height: "300px" });
$( "#dragged" ).css({ width: "10px", height: "10px" });
var moves = 3,
startValue = 0,
dragDelta = 20,
delta = 100,
// we scroll after each drag event, so subtract 1 from number of moves for expected
expected = delta + ( ( moves - 1 ) * dragDelta ),
element = $( "#dragged" ).draggable({
drag: function() {
startValue += dragDelta;
$( "#outer" ).scrollTop( startValue ).scrollLeft( startValue );
},
stop: function( event, ui ) {
equal( ui.position.left, expected, "left position is correct when grandparent is scrolled" );
equal( ui.position.top, expected, "top position is correct when grandparent is scrolled" );
}
});
$( "#outer" ).css( "overflow", overflow );
element.simulate( "drag", {
dy: delta,
dx: delta,
moves: moves
});
});
});
test( "#5727: draggable from iframe", function() {
expect( 1 );
var iframeBody, draggable1,
iframe = $( "<iframe />" ).appendTo( "#qunit-fixture" ),
iframeDoc = ( iframe[ 0 ].contentWindow || iframe[ 0 ].contentDocument ).document;
iframeDoc.write( "<!doctype html><html><body>" );
iframeDoc.close();
iframeBody = $( iframeDoc.body ).append( "<div style='width: 2px; height: 2px;' />" );
draggable1 = iframeBody.find( "div" );
draggable1.draggable();
equal( draggable1.closest( iframeBody ).length, 1 );
// TODO: fix draggable within an IFRAME to fire events on the element properly
// and these TestHelpers.draggable.shouldMove relies on events for testing
//TestHelpers.draggable.shouldMove( draggable1, "draggable from an iframe" );
});
test( "#8399: A draggable should become the active element after you are finished interacting with it, but not before.", function() {
expect( 2 );
var element = $( "<a href='#'>link</a>" ).appendTo( "#qunit-fixture" ).draggable();
$( document ).one( "mousemove", function() {
notStrictEqual( document.activeElement, element.get( 0 ), "moving a draggable anchor did not make it the active element" );
});
TestHelpers.draggable.move( element, 50, 50 );
strictEqual( document.activeElement, element.get( 0 ), "finishing moving a draggable anchor made it the active element" );
});
asyncTest( "blur behavior", function() {
expect( 3 );
var element = $( "#draggable1" ).draggable(),
focusElement = $( "<div tabindex='1'></div>" ).appendTo( element );
TestHelpers.onFocus( focusElement, function() {
strictEqual( document.activeElement, focusElement.get( 0 ), "test element is focused before mousing down on a draggable" );
TestHelpers.draggable.move( focusElement, 1, 1 );
// http://bugs.jqueryui.com/ticket/10527
// Draggable: Can't select option in modal dialog (IE8)
strictEqual( document.activeElement, focusElement.get( 0 ), "test element is focused after mousing down on itself" );
TestHelpers.draggable.move( element, 50, 50 );
// http://bugs.jqueryui.com/ticket/4261
// active element should blur when mousing down on a draggable
notStrictEqual( document.activeElement, focusElement.get( 0 ), "test element is no longer focused after mousing down on a draggable" );
start();
});
});
test( "ui-draggable-handle assigned to appropriate element", function() {
expect( 5 );
var p = $( "<p>" ).appendTo( "#qunit-fixture" ),
element = $( "<div><p></p></div>" ).appendTo( "#qunit-fixture" ).draggable();
ok( element.hasClass( "ui-draggable-handle" ), "handle is element by default" );
element.draggable( "option", "handle", "p" );
ok( !element.hasClass( "ui-draggable-handle" ), "removed from element" );
ok( element.find( "p" ).hasClass( "ui-draggable-handle" ), "added to handle" );
ok( !p.hasClass( "ui-draggable-handle" ),
"ensure handle class name is constrained within the draggble (#10212)" );
element.draggable( "destroy" );
ok( !element.find( "p" ).hasClass( "ui-draggable-handle" ), "removed in destroy()" );
});
test( "ui-draggable-handle managed correctly in nested draggables", function() {
expect( 4 );
var parent = $( "<div><div></div></div>" ).draggable().appendTo( "#qunit-fixture" ),
child = parent.find( "div" ).draggable();
ok( parent.hasClass( "ui-draggable-handle" ), "parent has class name on init" );
ok( child.hasClass( "ui-draggable-handle" ), "child has class name on init" );
parent.draggable( "destroy" );
ok( !parent.hasClass( "ui-draggable-handle" ), "parent loses class name on destroy" );
ok( child.hasClass( "ui-draggable-handle" ), "child retains class name on destroy" );
});
// http://bugs.jqueryui.com/ticket/7772
// when css 'right' is set, element resizes on drag
test( "setting right/bottom css shouldn't cause resize", function() {
expect( 4 );
var finalOffset,
element = $( "#draggable3" ),
origWidth = element.width(),
origHeight = element.height(),
origOffset = element.offset();
element.draggable();
TestHelpers.draggable.move( element, -50, -50 );
finalOffset = element.offset();
finalOffset.left += 50;
finalOffset.top += 50;
closeEnough( element.width(), origWidth, 1, "element retains width" );
closeEnough( element.height(), origHeight, 1, "element retains height" );
closeEnough( finalOffset.top, origOffset.top, "element moves the correct vertical distance" );
closeEnough( finalOffset.top, origOffset.top, "element moves the correct horizontal distance" );
});
})( jQuery );

164
jquery-ui/tests/unit/draggable/draggable_events.js vendored Normal file
View file

@ -0,0 +1,164 @@
/*
* draggable_events.js
*/
(function( $ ) {
var element;
module( "draggable: events", {
setup: function() {
element = $("<div>").appendTo("#qunit-fixture");
},
teardown: function() {
element.draggable("destroy");
}
});
test( "callbacks occurrence count", function() {
expect( 3 );
var start = 0,
stop = 0,
dragc = 0;
element.draggable({
start: function() {
start++;
},
drag: function() {
dragc++;
},
stop: function() {
stop++;
}
});
element.simulate( "drag", {
dx: 10,
dy: 10
});
equal( start, 1, "start callback should happen exactly once" );
equal( dragc, 3, "drag callback should happen exactly once per mousemove" );
equal( stop, 1, "stop callback should happen exactly once" );
});
test( "stopping the start callback", function() {
expect( 3 );
var start = 0,
stop = 0,
dragc = 0;
element.draggable({
start: function() {
start++;
return false;
},
drag: function() {
dragc++;
},
stop: function() {
stop++;
}
});
element.simulate( "drag", {
dx: 10,
dy: 10
});
equal( start, 1, "start callback should happen exactly once" );
equal( dragc, 0, "drag callback should not happen at all" );
equal( stop, 0, "stop callback should not happen if there wasnt even a start" );
});
test( "stopping the drag callback", function() {
expect( 2 );
var start = 0,
stop = 0,
dragc = 0;
element.draggable({
start: function() {
start++;
},
drag: function() {
dragc++;
return false;
},
stop: function() {
stop++;
}
});
element.simulate( "drag", {
dx: 10,
dy: 10
});
equal( start, 1, "start callback should happen exactly once" );
equal( stop, 1, "stop callback should happen, as we need to actively stop the drag" );
});
test( "stopping the stop callback", function() {
expect( 1 );
element.draggable({
helper: "clone",
stop: function() {
return false;
}
});
element.simulate( "drag", {
dx: 10,
dy: 10
});
ok( element.draggable( "instance" ).helper, "the clone should not be deleted if the stop callback is stopped" );
});
// http://bugs.jqueryui.com/ticket/6884
// Draggable: ui.offset.left differs between the "start" and "drag" hooks
test( "position and offset in hash is consistent between start, drag, and stop", function() {
expect( 4 );
var startPos, startOffset, dragPos, dragOffset, stopPos, stopOffset;
element = $( "<div style='margin: 2px;'></div>" ).appendTo( "#qunit-fixture" );
element.draggable({
start: function( event, ui ) {
startPos = ui.position;
startOffset = ui.offset;
},
drag: function( event, ui ) {
dragPos = ui.position;
dragOffset = ui.offset;
},
stop: function( event, ui ) {
stopPos = ui.position;
stopOffset = ui.offset;
}
});
element.simulate( "drag", {
dx: 10,
dy: 10,
moves: 1
});
startPos.left += 10;
startPos.top += 10;
startOffset.left += 10;
startOffset.top += 10;
deepEqual( startPos, dragPos, "start position equals drag position plus distance" );
deepEqual( dragPos, stopPos, "drag position equals stop position" );
deepEqual( startOffset, dragOffset, "start offset equals drag offset plus distance" );
deepEqual( dragOffset, stopOffset, "drag offset equals stop offset" );
});
})( jQuery );

103
jquery-ui/tests/unit/draggable/draggable_methods.js vendored Normal file
View file

@ -0,0 +1,103 @@
/*
* draggable_methods.js
*/
(function( $ ) {
var element;
module( "draggable: methods", {
setup: function() {
element = $("<div style='background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;'><span>Absolute</span></div>").appendTo("#qunit-fixture");
},
teardown: function() {
element.remove();
}
});
test( "init", function() {
expect( 5 );
element.draggable();
ok( true, ".draggable() called on element" );
$([]).draggable();
ok( true, ".draggable() called on empty collection" );
$("<div></div>").draggable();
ok( true, ".draggable() called on disconnected DOMElement" );
element.draggable( "option", "foo" );
ok( true, "arbitrary option getter after init" );
element.draggable( "option", "foo", "bar" );
ok( true, "arbitrary option setter after init" );
});
test( "destroy", function() {
expect( 4 );
element.draggable().draggable("destroy");
ok( true, ".draggable('destroy') called on element" );
$([]).draggable().draggable("destroy");
ok( true, ".draggable('destroy') called on empty collection" );
element.draggable().draggable("destroy");
ok( true, ".draggable('destroy') called on disconnected DOMElement" );
var expected = element.draggable(),
actual = expected.draggable("destroy");
equal( actual, expected, "destroy is chainable" );
});
test( "enable", function() {
expect( 11 );
element.draggable({ disabled: true });
TestHelpers.draggable.shouldNotDrag( element, ".draggable({ disabled: true })" );
element.draggable("enable");
TestHelpers.draggable.shouldMove( element, ".draggable('enable')" );
equal( element.draggable( "option", "disabled" ), false, "disabled option getter" );
element.draggable("destroy");
element.draggable({ disabled: true });
TestHelpers.draggable.shouldNotDrag( element, ".draggable({ disabled: true })" );
element.draggable( "option", "disabled", false );
equal(element.draggable( "option", "disabled" ), false, "disabled option setter" );
TestHelpers.draggable.shouldMove( element, ".draggable('option', 'disabled', false)" );
var expected = element.draggable(),
actual = expected.draggable("enable");
equal( actual, expected, "enable is chainable" );
});
test( "disable", function() {
expect( 14 );
element = $( "#draggable2" ).draggable({ disabled: false });
TestHelpers.draggable.shouldMove( element, ".draggable({ disabled: false })" );
element.draggable( "disable" );
TestHelpers.draggable.shouldNotDrag( element, ".draggable('disable')" );
equal( element.draggable( "option", "disabled" ), true, "disabled option getter" );
element.draggable( "destroy" );
element.draggable({ disabled: false });
TestHelpers.draggable.shouldMove( element, ".draggable({ disabled: false })" );
element.draggable( "option", "disabled", true );
equal( element.draggable( "option", "disabled" ), true, "disabled option setter" );
TestHelpers.draggable.shouldNotDrag( element, ".draggable('option', 'disabled', true)" );
ok( !element.draggable( "widget" ).hasClass( "ui-state-disabled" ), "element does not get ui-state-disabled" );
ok( !element.draggable( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" );
ok( element.draggable( "widget" ).hasClass( "ui-draggable-disabled" ), "element gets ui-draggable-disabled" );
var expected = element.draggable(),
actual = expected.draggable( "disable" );
equal( actual, expected, "disable is chainable" );
});
})( jQuery );

1489
jquery-ui/tests/unit/draggable/draggable_options.js vendored Normal file
View file

File diff suppressed because it is too large Load diff

131
jquery-ui/tests/unit/draggable/draggable_test_helpers.js vendored Normal file
View file

@ -0,0 +1,131 @@
TestHelpers.draggable = {
// TODO: remove the unreliable offset hacks
unreliableOffset: $.ui.ie && ( !document.documentMode || document.documentMode < 8 ) ? 2 : 0,
// Support: Opera 12.10, Safari 5.1, jQuery <1.8
unreliableContains: (function() {
var element = $( "<div>" );
return $.contains( element[ 0 ].ownerDocument, element[ 0 ] );
})(),
testDragPosition: function( el, dx, dy, expectedDX, expectedDY, msg ) {
msg = msg ? msg + "." : "";
$( el ).one( "dragstop", function( event, ui ) {
var positionExpected = { left: ui.originalPosition.left + expectedDX, top: ui.originalPosition.top + expectedDY };
deepEqual( ui.position, positionExpected, "position dragged[" + dx + ", " + dy + "] " + msg );
});
},
testDragOffset: function( el, dx, dy, expectedDX, expectedDY, msg ) {
msg = msg ? msg + "." : "";
var offsetBefore = el.offset(),
offsetExpected = { left: offsetBefore.left + expectedDX, top: offsetBefore.top + expectedDY };
$( el ).one( "dragstop", function( event, ui ) {
deepEqual( ui.offset, offsetExpected, "offset dragged[" + dx + ", " + dy + "] " + msg );
});
},
testDragHelperOffset: function( el, dx, dy, expectedDX, expectedDY, msg ) {
msg = msg ? msg + "." : "";
var offsetBefore = el.offset(),
offsetExpected = { left: offsetBefore.left + expectedDX, top: offsetBefore.top + expectedDY };
$( el ).one( "dragstop", function( event, ui ) {
deepEqual( ui.helper.offset(), offsetExpected, "offset dragged[" + dx + ", " + dy + "] " + msg );
});
},
testDrag: function( el, handle, dx, dy, expectedDX, expectedDY, msg ) {
TestHelpers.draggable.testDragPosition( el, dx, dy, expectedDX, expectedDY, msg );
TestHelpers.draggable.testDragOffset( el, dx, dy, expectedDX, expectedDY, msg );
$( handle ).simulate( "drag", {
dx: dx,
dy: dy
});
},
shouldMovePositionButNotOffset: function( el, msg, handle ) {
handle = handle || el;
TestHelpers.draggable.testDragPosition( el, 100, 100, 100, 100, msg );
TestHelpers.draggable.testDragHelperOffset( el, 100, 100, 0, 0, msg );
$( handle ).simulate( "drag", {
dx: 100,
dy: 100
});
},
shouldMove: function( el, msg, handle ) {
handle = handle || el;
TestHelpers.draggable.testDrag( el, handle, 100, 100, 100, 100, msg );
},
shouldNotMove: function( el, msg, handle ) {
handle = handle || el;
TestHelpers.draggable.testDrag( el, handle, 100, 100, 0, 0, msg );
},
shouldNotDrag: function( el, msg, handle ) {
handle = handle || el;
var newOffset,
element = $( el ),
beginOffset = element.offset();
element.bind( "dragstop", function() {
ok( false, "should not drag " + msg );
});
$( handle ).simulate( "drag", {
dx: 100,
dy: 100
});
newOffset = element.offset();
// Also assert that draggable did not move, to ensure it isn't just
// that drag did not fire and draggable still somehow moved
equal( newOffset.left, beginOffset.left, "Offset left should not be different" );
equal( newOffset.top, beginOffset.top, "Offset top should not be different" );
element.unbind( "dragstop" );
},
setScrollable: function( what, isScrollable ) {
var overflow = isScrollable ? "scroll" : "hidden";
$( what ).css({ overflow: overflow, overflowX: overflow, overflowY: overflow });
},
testScroll: function( el, position ) {
var oldPosition = $( "#main" ).css( "position" );
$( "#main" ).css({ position: position, top: "0px", left: "0px" });
TestHelpers.draggable.shouldMove( el, position + " parent" );
$( "#main" ).css( "position", oldPosition );
},
restoreScroll: function( what ) {
$( what ).scrollTop( 0 ).scrollLeft( 0 );
},
setScroll: function( what ) {
$( what ).scrollTop( 100 ).scrollLeft( 100 );
},
border: function( el, side ) {
return parseInt( el.css( "border-" + side + "-width" ), 10 ) || 0;
},
margin: function( el, side ) {
return parseInt( el.css( "margin-" + side ), 10 ) || 0;
},
move: function( el, x, y ) {
$( el ).simulate( "drag", {
dx: x,
dy: y
});
},
trackMouseCss: function( el ) {
el.bind( "drag", function() {
el.data( "last_dragged_cursor", $( "body" ).css( "cursor" ) );
});
},
trackAppendedParent: function( el ) {
// TODO: appendTo is currently ignored if helper is original (see #7044)
el.draggable( "option", "helper", "clone" );
// Get what parent is at time of drag
el.bind( "drag", function(e, ui) {
el.data( "last_dragged_parent", ui.helper.parent()[ 0 ] );
});
}
};

26
jquery-ui/tests/unit/droppable/all.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable Test Suite</title>
<script src="../../../external/jquery/jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<link rel="stylesheet" href="../qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../qunit-composite.js"></script>
<script src="../subsuite.js"></script>
<script>
testAllVersions( "droppable" );
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
</div>
</body>
</html>

46
jquery-ui/tests/unit/droppable/droppable.html Normal file
View file

@ -0,0 +1,46 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable Test Suite</title>
<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script>
TestHelpers.loadResources({
css: [ "core" ],
js: [
"ui/core.js",
"ui/widget.js",
"ui/mouse.js",
"ui/draggable.js",
"ui/droppable.js"
]
});
</script>
<script src="droppable_common.js"></script>
<script src="droppable_core.js"></script>
<script src="droppable_events.js"></script>
<script src="droppable_methods.js"></script>
<script src="droppable_options.js"></script>
<script src="droppable_test_helpers.js"></script>
<script src="../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div id="draggable1" style="width: 25px; height: 25px;">Draggable</div>
<div id="droppable1" style="width: 100px; height: 100px;">Droppable</div>
<div id="droppable2" style="width: 100px; height: 100px;">Droppable</div>
<div style='width:1000px;height:1000px;'>&nbsp;</div>
</div>
</body>
</html>

20
jquery-ui/tests/unit/droppable/droppable_common.js vendored Normal file
View file

@ -0,0 +1,20 @@
TestHelpers.commonWidgetTests( "droppable", {
defaults: {
accept: "*",
activeClass: false,
addClasses: true,
disabled: false,
greedy: false,
hoverClass: false,
scope: "default",
tolerance: "intersect",
// callbacks
activate: null,
create: null,
deactivate: null,
drop: null,
out: null,
over: null
}
});

29
jquery-ui/tests/unit/droppable/droppable_core.js vendored Normal file
View file

@ -0,0 +1,29 @@
/*
* droppable_core.js
*/
(function($) {
module("droppable: core");
test("element types", function() {
var typeNames = ("p,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,div,form" +
",table,fieldset,address,ins,del,em,strong,q,cite,dfn,abbr" +
",acronym,code,samp,kbd,var,img,hr" +
",input,button,label,select,iframe").split(",");
expect( typeNames.length );
$.each(typeNames, function(i) {
var typeName = typeNames[i],
el = $(document.createElement(typeName)).appendTo("body");
(typeName === "table" && el.append("<tr><td>content</td></tr>"));
el.droppable();
TestHelpers.droppable.shouldDrop();
el.droppable("destroy");
el.remove();
});
});
})(jQuery);

63
jquery-ui/tests/unit/droppable/droppable_events.js vendored Normal file
View file

@ -0,0 +1,63 @@
(function( $ ) {
module( "droppable: events" );
test( "droppable destruction/recreation on drop event", function() {
expect( 1 );
var config = {
activeClass: "active",
drop: function() {
var element = $( this ),
newDroppable = $( "<div>" )
.css({ width: 100, height: 100 })
.text( "Droppable" );
element.after( newDroppable );
element.remove();
newDroppable.droppable( config );
}
},
draggable = $( "#draggable1" ).draggable(),
droppable1 = $( "#droppable1" ).droppable( config ),
droppable2 = $( "#droppable2" ).droppable( config ),
droppableOffset = droppable1.offset(),
draggableOffset = draggable.offset(),
dx = droppableOffset.left - draggableOffset.left,
dy = droppableOffset.top - draggableOffset.top;
draggable.simulate( "drag", {
dx: dx,
dy: dy
});
ok( !droppable2.hasClass( "active" ), "subsequent droppable no longer active" );
});
// todo: comment the following in when ready to actually test
/*
test("activate", function() {
ok(false, 'missing test - untested code is broken code');
});
test("deactivate", function() {
ok(false, 'missing test - untested code is broken code');
});
test("over", function() {
ok(false, 'missing test - untested code is broken code');
});
test("out", function() {
ok(false, 'missing test - untested code is broken code');
});
test("drop", function() {
ok(false, 'missing test - untested code is broken code');
});
*/
})( jQuery );

91
jquery-ui/tests/unit/droppable/droppable_methods.js vendored Normal file
View file

@ -0,0 +1,91 @@
/*
* droppable_methods.js
*/
(function($) {
module("droppable: methods");
test("init", function() {
expect( 5 );
$("<div></div>").appendTo("body").droppable().remove();
ok(true, ".droppable() called on element");
$([]).droppable();
ok(true, ".droppable() called on empty collection");
$("<div></div>").droppable();
ok(true, ".droppable() called on disconnected DOMElement");
$("<div></div>").droppable().droppable("option", "foo");
ok(true, "arbitrary option getter after init");
$("<div></div>").droppable().droppable("option", "foo", "bar");
ok(true, "arbitrary option setter after init");
});
test("destroy", function() {
expect( 4 );
$("<div></div>").appendTo("body").droppable().droppable("destroy").remove();
ok(true, ".droppable('destroy') called on element");
$([]).droppable().droppable("destroy");
ok(true, ".droppable('destroy') called on empty collection");
$("<div></div>").droppable().droppable("destroy");
ok(true, ".droppable('destroy') called on disconnected DOMElement");
var expected = $("<div></div>").droppable(),
actual = expected.droppable("destroy");
equal(actual, expected, "destroy is chainable");
});
test("enable", function() {
expect(7);
var el, expected, actual;
el = $("#droppable1").droppable({ disabled: true });
TestHelpers.droppable.shouldNotDrop();
el.droppable("enable");
TestHelpers.droppable.shouldDrop();
equal(el.droppable("option", "disabled"), false, "disabled option getter");
el.droppable("destroy");
el.droppable({ disabled: true });
TestHelpers.droppable.shouldNotDrop();
el.droppable("option", "disabled", false);
equal(el.droppable("option", "disabled"), false, "disabled option setter");
TestHelpers.droppable.shouldDrop();
expected = $("<div></div>").droppable(),
actual = expected.droppable("enable");
equal(actual, expected, "enable is chainable");
});
test( "disable", function() {
expect( 10 );
var actual, expected,
element = $( "#droppable1" ).droppable({ disabled: false });
TestHelpers.droppable.shouldDrop();
element.droppable( "disable" );
TestHelpers.droppable.shouldNotDrop();
equal( element.droppable( "option", "disabled" ), true, "disabled option getter" );
element.droppable( "destroy" );
element.droppable({ disabled: false });
TestHelpers.droppable.shouldDrop();
element.droppable( "option", "disabled", true );
ok( !element.droppable( "widget" ).hasClass( "ui-state-disabled" ), "element does not get ui-state-disabled" );
ok( !element.droppable( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" );
ok( element.droppable( "widget" ).hasClass( "ui-droppable-disabled" ), "element gets ui-droppable-disabled" );
equal( element.droppable( "option", "disabled" ), true, "disabled option setter" );
TestHelpers.droppable.shouldNotDrop();
expected = $( "<div></div>" ).droppable();
actual = expected.droppable( "disable" );
equal( actual, expected, "disable is chainable" );
});
})( jQuery );

204
jquery-ui/tests/unit/droppable/droppable_options.js vendored Normal file
View file

@ -0,0 +1,204 @@
/*
* droppable_options.js
*/
(function($) {
module( "droppable: options" );
/*
test( "{ accept '*' }, default ", function() {
ok(false, 'missing test - untested code is broken code');
});
test( "{ accept: Selector }", function() {
ok(false, 'missing test - untested code is broken code');
});
test( "{ accept: function(draggable) }", function() {
ok(false, 'missing test - untested code is broken code');
});
test( "activeClass", function() {
ok(false, 'missing test - untested code is broken code');
});
*/
test( "{ addClasses: true }, default", function() {
expect( 1 );
var el = $( "<div />" ).droppable({ addClasses: true });
ok( el.is( ".ui-droppable" ), "'ui-droppable' class added" );
el.droppable( "destroy" );
});
test( "{ addClasses: false }", function() {
expect( 1 );
var el = $( "<div />" ).droppable({ addClasses: false });
ok( !el.is( ".ui-droppable" ), "'ui-droppable' class not added" );
el.droppable( "destroy" );
});
test( "scope", function() {
expect( 4 );
var droppableOffset, draggableOffset, oldDraggableOffset, dx, dy,
draggable1 = $( "<div />" ).appendTo( "#qunit-fixture" ).draggable({ revert: "invalid" }),
draggable2 = $( "<div />" ).appendTo( "#qunit-fixture" ).droppable(),
droppable = $( "<div />" ).appendTo( "#qunit-fixture" ).droppable(),
newScope = "test";
draggable1.draggable( "option", "scope", newScope );
droppable.droppable( "option", "scope", newScope );
// Test that droppable accepts draggable with new scope.
droppableOffset = droppable.offset();
draggableOffset = draggable1.offset();
dx = droppableOffset.left - draggableOffset.left;
dy = droppableOffset.top - draggableOffset.top;
draggable1.simulate( "drag", {
dx: dx,
dy: dy
});
draggableOffset = draggable1.offset();
equal( draggableOffset.left, droppableOffset.left );
equal( draggableOffset.top, droppableOffset.top );
// Test that droppable doesn't accept draggable with old scope.
draggableOffset = draggable2.offset();
dx = droppableOffset.left - draggableOffset.left;
dy = droppableOffset.top - draggableOffset.top;
oldDraggableOffset = draggableOffset;
draggable2.simulate( "drag", {
dx: dx,
dy: dy
});
draggableOffset = draggable2.offset();
equal( draggableOffset.left, oldDraggableOffset.left );
equal( draggableOffset.top, oldDraggableOffset.top );
});
/*
test( "greedy", function() {
ok(false, 'missing test - untested code is broken code');
});
test( "hoverClass", function() {
ok(false, 'missing test - untested code is broken code');
});
test( "tolerance, fit", function() {
ok(false, 'missing test - untested code is broken code');
});
*/
test( "tolerance, intersect", function() {
expect( 2 );
var draggable, droppable,
dataset = [
[ 0, 0, false, "too far up and left" ],
[ 6, 0, false, "too far up" ],
[ 0, 6, false, "too far left" ],
[ 6, 6, true, "top left corner" ],
[ 14, 14, true, "bottom right corner" ],
[ 15, 6, false, "too far right" ],
[ 6, 15, false, "too far down" ],
[ 15, 15, false, "too far down and right" ]
];
draggable = $( "<div />" )
.appendTo( "#qunit-fixture" )
.css({
width: 10,
height: 10,
position: "absolute",
// http://bugs.jqueryui.com/ticket/6876
// Droppable: droppable region is offset by draggables margin
marginTop: 3,
marginLeft: 3
})
.draggable();
droppable = $( "<div />" )
.appendTo( "#qunit-fixture" )
.css({ width: 10, height: 10, position: "absolute", top: 13, left: 13 })
.droppable({ tolerance: "intersect" });
$.each( dataset, function() {
var data = this;
draggable.css({
top: 0,
left: 0
});
droppable.unbind( "drop" ).bind( "drop", function() {
equal( true, data[ 2 ], data[ 3 ] );
});
$( draggable ).simulate( "drag", {
dx: data[ 0 ],
dy: data[ 1 ]
});
});
});
test( "tolerance, pointer", function() {
expect( 3 );
var draggable, droppable,
dataset = [
[ -1, -1, false, "too far up and left" ],
[ -1, 0, false, "too far left" ],
[ 0, -1, false, "too far up" ],
[ 0, 0, true, "top left corner" ],
[ 9, 9, true, "bottom right corner" ],
[ 10, 9, false, "too far right" ],
[ 9, 10, false, "too far down" ],
[ 10, 10, false, "too far down and right" ]
];
draggable = $( "<div />" )
.appendTo( "#qunit-fixture" )
.css({ width: 10, height: 10, position: "absolute" })
.draggable();
droppable = $( "<div />" )
.appendTo( "#qunit-fixture" )
.css({ width: 10, height: 10, position: "absolute", top: 5, left: 5 })
.droppable({ tolerance: "pointer" });
$.each( dataset, function() {
var data = this;
droppable.unbind( "drop" ).bind( "drop", function() {
equal( true, data[ 2 ], data[ 3 ] );
});
$( draggable ).simulate( "drag", {
dx: ( data[ 0 ] - $( draggable ).position().left ),
dy: ( data[ 1 ] - $( draggable ).position().top )
});
});
// http://bugs.jqueryui.com/ticket/4977 - tolerance, pointer - bug when pointer outside draggable
draggable.css({ top: 0, left: 0 }).draggable( "option", "axis", "x" );
droppable.css({ top: 15, left: 15 });
droppable.unbind( "drop" ).bind( "drop", function() {
ok( true, "drop fires as long as pointer is within droppable" );
});
$( draggable ).simulate( "drag", {
dx: 10,
dy: 10
});
});
/*
test( "tolerance, touch", function() {
ok(false, 'missing test - untested code is broken code');
});
*/
})(jQuery);

10
jquery-ui/tests/unit/droppable/droppable_test_helpers.js vendored Normal file
View file

@ -0,0 +1,10 @@
TestHelpers.droppable = {
shouldDrop: function() {
// todo: actually implement this
ok(true, "missing test - untested code is broken code");
},
shouldNotDrop: function() {
// todo: actually implement this
ok(true, "missing test - untested code is broken code");
}
};

26
jquery-ui/tests/unit/effects/all.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title>
<script src="../../../external/jquery/jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<link rel="stylesheet" href="../qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../qunit-composite.js"></script>
<script src="../subsuite.js"></script>
<script>
testAllVersions( "effects" );
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
</div>
</body>
</html>

115
jquery-ui/tests/unit/effects/effects.html Normal file
View file

@ -0,0 +1,115 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title>
<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script>
TestHelpers.loadResources({
js: [
"ui/effect.js",
"ui/effect-blind.js",
"ui/effect-bounce.js",
"ui/effect-clip.js",
"ui/effect-drop.js",
"ui/effect-explode.js",
"ui/effect-fade.js",
"ui/effect-fold.js",
"ui/effect-highlight.js",
"ui/effect-puff.js",
"ui/effect-pulsate.js",
"ui/effect-scale.js",
"ui/effect-shake.js",
"ui/effect-size.js",
"ui/effect-slide.js",
"ui/effect-transfer.js"
]
});
</script>
<script src="effects_core.js"></script>
<script src="effects_scale.js"></script>
<script src="../swarminject.js"></script>
<style>
#qunit-fixture {
width: 1000px;
height: 1000px;
}
.hidden {
display: none;
}
.test {
background: #000;
border: 0;
width: 100px;
height: 100px;
}
.testAddBorder {
border: 10px solid #000;
}
.testChildren,
.testChangeBackground {
background: #fff;
}
.test h2 {
font-size: 10px;
}
.testChildren h2 {
font-size: 20px;
}
.relWidth {
width: 50%;
}
.relHeight {
height: 50%;
}
.testScale {
border: 5px solid #000;
padding: 5px;
margin: 5px;
width: 50px;
height: 50px;
}
.ticket7106 {
width: 50px;
height: 50px;
}
.ticket7106.animate {
width: 100px;
}
</style>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div id="elem" class="test">
</div>
<div class="hidden test">
<div>.</div>
</div>
<div class="animateClass test">
<h2>Child Element Test</h2>
</div>
<div class="relWidth relHeight testAddBorder">
<h2>Slide with relative width</h2>
</div>
<div class="testScale">
</div>
<div class="ticket7106">
</div>
</div>
</body>
</html>

271
jquery-ui/tests/unit/effects/effects_core.js vendored Normal file
View file

@ -0,0 +1,271 @@
(function($) {
function present( value, array, message ) {
QUnit.push( jQuery.inArray( value, array ) !== -1 , value, array, message );
}
function notPresent( value, array, message ) {
QUnit.push( jQuery.inArray( value, array ) === -1 , value, array, message );
}
// minDuration is used for "short" animate tests where we are only concerned about the final
var minDuration = 15,
// duration is used for "long" animates where we plan on testing properties during animation
duration = 200;
module( "effects.core" );
// TODO: test all signatures of .show(), .hide(), .toggle().
// Look at core's signatures and UI's signatures.
asyncTest( ".hide() with step", function() {
expect( 1 );
var element = $( "#elem" ),
step = function() {
ok( true, "step callback invoked" );
step = $.noop;
};
element.hide({
step: function() {
step();
},
complete: start
});
});
test( "Immediate Return Conditions", function() {
var hidden = $( "div.hidden" ),
count = 0;
expect( 3 );
hidden.hide( "blind", function() {
equal( ++count, 1, "Hide on hidden returned immediately" );
}).show().show( "blind", function() {
equal( ++count, 2, "Show on shown returned immediately" );
});
equal( ++count, 3, "Both Functions worked properly" );
});
test( ".hide() with hidden parent", function() {
expect( 1 );
var element = $( "div.hidden" ).children();
element.hide( "blind", function() {
equal( element.css( "display" ), "none", "display: none" );
});
});
asyncTest( "Parse of null for options", function() {
var hidden = $( "div.hidden" ),
count = 0;
expect( 1 );
hidden.show( "blind", null, 1, function() {
equal( ++count, 1, "null for options still works" );
start();
});
});
test( "removeClass", function() {
expect( 3 );
var element = $( "<div>" );
equal( "", element[ 0 ].className );
element.addClass( "destroyed" );
equal( "destroyed", element[ 0 ].className );
element.removeClass();
equal( "", element[ 0 ].className );
});
/* TODO: Disabled - Can't figure out why this is failing in IE 6/7
test( "createWrapper and removeWrapper retain focused elements (#7595)", function() {
expect( 2 );
var test = $( "div.hidden" ).show(),
input = $( "<input type='text'>" ).appendTo( test ).focus();
$.effects.createWrapper( test );
equal( document.activeElement, input[ 0 ], "Active element is still input after createWrapper" );
$.effects.removeWrapper( test );
equal( document.activeElement, input[ 0 ], "Active element is still input after removeWrapper" );
});
*/
module( "effects.core: animateClass" );
asyncTest( "animateClass works with borderStyle", function() {
var test = $("div.animateClass");
expect(3);
test.toggleClass("testAddBorder", minDuration, function() {
test.toggleClass("testAddBorder", minDuration, function() {
equal( test.css("borderLeftStyle"), "none", "None border set" );
start();
});
equal( test.css("borderLeftStyle"), "solid", "None border not immedately set" );
});
equal( test.css("borderLeftStyle"), "solid", "Solid border immedately set" );
});
asyncTest( "animateClass works with colors", function() {
var test = $("div.animateClass"),
oldStep = jQuery.fx.step.backgroundColor;
expect(2);
// we want to catch the first frame of animation
jQuery.fx.step.backgroundColor = function( fx ) {
oldStep.apply( this, arguments );
// make sure it has animated somewhere we can detect
if ( fx.pos > 255 / 2000 ) {
jQuery.fx.step.backgroundColor = oldStep;
notPresent( test.css("backgroundColor"),
[ "#000000", "#ffffff", "#000", "#fff", "rgb(0, 0, 0)", "rgb(255,255,255)" ],
"Color is not endpoints in middle." );
test.stop( true, true );
}
};
test.toggleClass("testChangeBackground", {
duration: 2000,
complete: function() {
present( test.css("backgroundColor"), [ "#ffffff", "#fff", "rgb(255, 255, 255)" ], "Color is final" );
start();
}
});
});
asyncTest( "animateClass calls step option", 1, function() {
var test = jQuery( "div.animateClass" ),
step = function() {
ok( true, "Step Function Called" );
test.stop();
start();
step = $.noop;
};
test.toggleClass( "testChangeBackground", {
step: function() {
step();
}
});
});
asyncTest( "animateClass works with children", 3, function() {
var animatedChild,
test = $("div.animateClass"),
h2 = test.find("h2");
test.toggleClass("testChildren", {
children: true,
duration: duration,
complete: function() {
equal( h2.css("fontSize"), "20px", "Text size is final during complete");
test.toggleClass("testChildren", {
duration: duration,
complete: function() {
equal( h2.css("fontSize"), "10px", "Text size revertted after class removed");
start();
},
step: function( val, fx ) {
if ( fx.elem === h2[ 0 ] ) {
ok( false, "Error - Animating property on h2" );
}
}
});
},
step: function( val, fx ) {
if ( fx.prop === "fontSize" && fx.elem === h2[ 0 ] && !animatedChild ) {
equal( fx.end, 20, "animating font size on child" );
animatedChild = true;
}
}
});
});
asyncTest( "animateClass clears style properties when stopped", function() {
var test = $("div.animateClass"),
style = test[0].style,
orig = style.cssText;
expect( 2 );
test.addClass( "testChangeBackground", duration );
notEqual( orig, style.cssText, "cssText is not the same after starting animation" );
test.stop( true, true );
equal( orig, $.trim( style.cssText ), "cssText is the same after stopping animation midway" );
start();
});
asyncTest( "animateClass: css and class changes during animation are not lost (#7106)", function() {
expect( 2 );
var test = $( "div.ticket7106" );
// ensure the class stays and that the css property stays
function animationComplete() {
ok( test.hasClass( "testClass" ), "class change during animateClass was not lost" );
equal( test.height(), 100, "css change during animateClass was not lost" );
start();
}
// add a class and change a style property after starting an animated class
test.addClass( "animate", minDuration, animationComplete )
.addClass( "testClass" )
.height( 100 );
});
$.each( $.effects.effect, function( effect ) {
module( "effects." + effect );
TestHelpers.testJshint( "effect-" + effect );
if ( effect === "transfer" ) {
return;
}
asyncTest( "show/hide", function() {
expect( 8 );
var hidden = $( "div.hidden" ),
count = 0,
test = 0;
function queueTest( fn ) {
count++;
var point = count;
return function( next ) {
test++;
equal( point, test, "Queue function fired in order" );
if ( fn ) {
fn();
} else {
setTimeout( next, minDuration );
}
};
}
hidden.queue( queueTest() ).show( effect, minDuration, queueTest(function() {
equal( hidden.css("display"), "block", "Hidden is shown after .show(\"" +effect+ "\", time)" );
})).queue( queueTest() ).hide( effect, minDuration, queueTest(function() {
equal( hidden.css("display"), "none", "Back to hidden after .hide(\"" +effect+ "\", time)" );
})).queue( queueTest(function() {
deepEqual( hidden.queue(), ["inprogress"], "Only the inprogress sentinel remains");
start();
}));
});
asyncTest( "relative width & height - properties are preserved", function() {
var test = $("div.relWidth.relHeight"),
width = test.width(), height = test.height(),
cssWidth = test[0].style.width, cssHeight = test[0].style.height;
expect( 4 );
test.toggle( effect, minDuration, function() {
equal( test[0].style.width, cssWidth, "Inline CSS Width has been reset after animation ended" );
equal( test[0].style.height, cssHeight, "Inline CSS Height has been rest after animation ended" );
start();
});
equal( test.width(), width, "Width is the same px after animation started" );
equal( test.height(), height, "Height is the same px after animation started" );
});
});
})(jQuery);

68
jquery-ui/tests/unit/effects/effects_scale.js vendored Normal file
View file

@ -0,0 +1,68 @@
(function( $ ) {
module( "effect.scale: Scale" );
function run( position, v, h, vo, ho ) {
var desc = "End Position Correct: " + position + " (" + v + "," + h + ") - origin: (" + vo + "," + ho + ")";
asyncTest( desc, function() {
expect( 2 );
function complete() {
equal( parseInt( test.css( h ), 10 ), target[ h ], "Horizontal Position Correct " + desc );
equal( parseInt( test.css( v ), 10 ), target[ v ], "Vertical Position Correct " + desc );
start();
}
var test = $( ".testScale" ),
css = {
position: position
},
effect = {
effect: "scale",
mode: "effect",
percent: 200,
origin: [ vo, ho ],
complete: complete,
duration: 1
},
target = {},
relative = position === "relative";
css[ h ] = 33;
css[ v ] = 33;
target[ h ] = h === ho ? css[ h ] : ho === "center" ? css[ h ] - 35 : css[ h ] - 70;
target[ v ] = v === vo ? css[ v ] : vo === "middle" ? css[ v ] - 35 : css[ v ] - 70;
if ( relative && h === "right" ) {
target[ h ] += 70;
}
if ( relative && v === "bottom" ) {
target[ v ] += 70;
}
test.css( css );
test.effect( effect );
});
}
function suite( position ) {
run( position, "top", "left", "top", "left" );
run( position, "top", "left", "middle", "center" );
run( position, "top", "left", "bottom", "right" );
/* Firefox is currently not capable of supporting detection of bottom and right....
run( position, "bottom", "right", "top", "left" );
run( position, "bottom", "right", "middle", "center" );
run( position, "bottom", "right", "bottom", "right" );
*/
}
$(function() {
suite( "absolute" );
suite( "relative" );
var fixedElem = $( "<div>" )
.css({
position: "fixed",
top: 10
})
.appendTo( "body" );
if ( fixedElem.offset().top === 10 ) {
suite( "fixed" );
}
});
})( jQuery );

67
jquery-ui/tests/unit/index.html Normal file
View file

@ -0,0 +1,67 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Unit Tests</title>
<link rel="stylesheet" href="../../themes/base/core.css">
<link rel="stylesheet" href="../../themes/base/theme.css">
<link rel="stylesheet" href="../index.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../index.js"></script>
</head>
<body>
<div id="main">
<h1>jQuery UI Unit Tests</h1>
<div>
<h2>Full Test Suite</h2>
<ul>
<li><a href="all.html">All</a></li>
</ul>
<h2>Core</h2>
<ul>
<li><a href="core/core.html">Core</a></li>
<li><a href="widget/widget.html">Widget</a></li>
</ul>
<h2>Interactions</h2>
<ul>
<li><a href="draggable/draggable.html">Draggable</a></li>
<li><a href="droppable/droppable.html">Droppable</a></li>
<li><a href="resizable/resizable.html">Resizable</a></li>
<li><a href="selectable/selectable.html">Selectable</a></li>
<li><a href="sortable/sortable.html">Sortable</a></li>
</ul>
<h2>Widgets</h2>
<ul>
<li><a href="accordion/accordion.html">Accordion</a></li>
<li><a href="autocomplete/autocomplete.html">Autocomplete</a></li>
<li><a href="button/button.html">Button</a></li>
<li><a href="datepicker/datepicker.html">Datepicker</a></li>
<li><a href="dialog/dialog.html">Dialog</a></li>
<li><a href="menu/menu.html">Menu</a></li>
<li><a href="progressbar/progressbar.html">Progressbar</a></li>
<li><a href="selectmenu/selectmenu.html">Selectmenu</a></li>
<li><a href="slider/slider.html">Slider</a></li>
<li><a href="spinner/spinner.html">Spinner</a></li>
<li><a href="tabs/tabs.html">Tabs</a></li>
<li><a href="tooltip/tooltip.html">Tooltip</a></li>
</ul>
<h2>Utilities</h2>
<ul>
<li><a href="position/position.html">Position</a></li>
</ul>
<h2>Effects</h2>
<ul>
<li><a href="effects/effects.html">Effects</a></li>
</ul>
</div>
</div>
</body>
</html>

26
jquery-ui/tests/unit/menu/all.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Menu Test Suite</title>
<script src="../../../external/jquery/jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<link rel="stylesheet" href="../qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../qunit-composite.js"></script>
<script src="../subsuite.js"></script>
<script>
testAllVersions( "menu" );
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
</div>
</body>
</html>

320
jquery-ui/tests/unit/menu/menu.html Normal file
View file

@ -0,0 +1,320 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Menu Test Suite</title>
<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script>
TestHelpers.loadResources({
css: [ "core", "menu" ],
js: [
"ui/core.js",
"ui/widget.js",
"ui/menu.js"
]
});
</script>
<script src="menu_test_helpers.js"></script>
<script src="menu_common.js"></script>
<script src="menu_core.js"></script>
<script src="menu_events.js"></script>
<script src="menu_methods.js"></script>
<script src="menu_options.js"></script>
<script src="../swarminject.js"></script>
<style>
.ui-menu {
font-size: 15px;
line-height: 15px;
}
.ui-menu .ui-menu-item {
padding: 0;
/* Support: IE7 */
*display: block;
*float: left;
*clear: left;
}
#menu3 {
height: 250px;
overflow: auto;
}
#menu4, #menu4 ul {
height: 250px;
overflow: auto;
}
</style>
</head>
<body>
<div id="qunit">jQuery UI Menu Test Suite</div>
<div id="qunit-fixture">
<ul class="foo" id="menu1">
<li class="foo">Aberdeen</li>
<li class="foo">Ada</li>
<li class="foo">Adamsville</li>
<li id="testID1" class="foo">Addyston</li>
<li class="foo">Adelphi</li>
</ul>
<ul id="menu2">
<li class="foo">Aberdeen</li>
<li class="foo">Ada</li>
<li class="foo">Adamsville</li>
<li class="foo"><span class="ui-icon ui-icon-print"></span>Addyston</li>
<li>Delphi
<ul>
<li class="foo">Ada</li>
<li class="foo">Saarland</li>
<li class="foo">Salzburg</li>
</ul>
</li>
<li class="foo"> Saarland</li>
<li>Salzburg
<ul>
<li>Delphi
<ul>
<li class="foo">Ada</li>
<li class="foo">Saarland</li>
<li class="foo">Salzburg</li>
</ul>
</li>
<li>Delphi
<ul>
<li class="foo">Ada</li>
<li> - </li>
<li class="foo">Saarland</li>
<li></li>
<li class="foo">Salzburg</li>
<li>&ndash;</li>
</ul>
</li>
<li class="foo">Perch</li>
</ul>
</li>
</ul>
<ul class="foo" id="menu3">
<li class="foo">Aberdeen</li>
<li class="foo">Ada</li>
<li class="foo">Adamsville</li>
<li class="foo">Addyston</li>
<li class="foo">Adelphi</li>
<li class="foo">Adena</li>
<li class="foo">Adrian</li>
<li class="foo">Akron</li>
<li class="foo">Albany</li>
<li class="foo">Alexandria</li>
<li class="foo">Alger</li>
<li class="foo">Alledonia</li>
<li class="foo">Alliance</li>
<li class="foo">Alpha</li>
<li class="foo">Alvada</li>
<li class="foo">Alvordton</li>
<li class="foo">Amanda</li>
<li class="foo">Amelia</li>
<li class="foo">Amesville</li>
<li class="foo">Aberdeen</li>
<li class="foo">Ada</li>
<li class="foo">Adamsville</li>
<li class="foo">Addyston</li>
<li class="foo">Adelphi</li>
<li class="foo">Adena</li>
<li class="foo">Adrian</li>
<li class="foo">Akron</li>
<li class="foo">Albany</li>
<li class="foo">Alexandria</li>
<li class="foo">Alger</li>
<li class="foo">Alledonia</li>
<li class="foo">Alliance</li>
<li class="foo">Alpha</li>
<li class="foo">Alvada</li>
<li class="foo">Alvordton</li>
<li class="foo">Amanda</li>
<li class="foo">Amelia</li>
<li class="foo">Amesville</li>
</ul>
<ul class="foo" id="menu4">
<li class="foo">Aberdeen</li>
<li class="foo">
Ada
<ul class="foo">
<li class="foo">Aberdeen</li>
<li class="foo">Ada</li>
<li class="foo">Adamsville</li>
<li class="foo">Addyston</li>
<li class="foo">Adelphi</li>
<li class="foo">Adena</li>
<li class="foo">Adrian</li>
<li class="foo">Akron</li>
<li class="foo">Albany</li>
<li class="foo">Alexandria</li>
<li class="foo">Alger</li>
<li class="foo">Alledonia</li>
<li class="foo">Alliance</li>
<li class="foo">Alpha</li>
<li class="foo">Alvada</li>
<li class="foo">Alvordton</li>
<li class="foo">Amanda</li>
<li class="foo">Amelia</li>
<li class="foo">Amesville</li>
<li class="foo">Aberdeen</li>
<li class="foo">Ada</li>
<li class="foo">Adamsville</li>
<li class="foo">Addyston</li>
<li class="foo">Adelphi</li>
<li class="foo">Adena</li>
<li class="foo">Adrian</li>
<li class="foo">Akron</li>
<li class="foo">Albany</li>
</ul>
</li>
<li class="foo">Adamsville</li>
<li class="foo">Addyston</li>
<li class="foo">Adelphi</li>
<li class="foo">Adena</li>
<li class="foo">Adrian</li>
<li class="foo">Akron</li>
<li class="foo">Albany</li>
<li class="foo">Alexandria</li>
<li class="foo">Alger</li>
<li class="foo">Alledonia</li>
<li class="foo">Alliance</li>
<li class="foo">Alpha</li>
<li class="foo">Alvada</li>
<li class="foo">Alvordton</li>
<li class="foo">Amanda</li>
<li class="foo">Amelia</li>
<li class="foo">Amesville</li>
<li class="foo">Aberdeen</li>
<li class="foo">Ada</li>
<li class="foo">Adamsville</li>
<li class="foo">Addyston</li>
<li class="foo">Adelphi</li>
<li class="foo">Adena</li>
<li class="foo">Adrian</li>
<li class="foo">Akron</li>
<li class="foo">Albany</li>
<li class="foo">Alexandria</li>
<li class="foo">Alger</li>
<li class="foo">Alledonia</li>
<li class="foo">Alliance</li>
<li class="foo">Alpha</li>
<li class="foo">Alvada</li>
<li class="foo">Alvordton</li>
<li class="foo">Amanda</li>
<li class="foo">Amelia</li>
<li class="foo">Amesville</li>
</ul>
<div id="menu5">
<blockquote>Aberdeen</blockquote>
<blockquote>Ada</blockquote>
<blockquote>Adamsville</blockquote>
<blockquote>Addyston</blockquote>
<blockquote>Delphi
<div>
<blockquote>Ada</blockquote>
<blockquote>Saarland</blockquote>
<blockquote>Salzburg</blockquote>
</div>
</blockquote>
<blockquote>Saarland</blockquote>
<blockquote>Salzburg
<div>
<blockquote>Delphi
<div>
<blockquote>Ada</blockquote>
<blockquote id="testID2">Saarland</blockquote>
<blockquote>Salzburg</blockquote>
</div>
</blockquote>
<blockquote>Delphi
<div>
<blockquote>Ada</blockquote>
<blockquote>Saarland</blockquote>
<blockquote>Salzburg</blockquote>
</div>
</blockquote>
<blockquote>Perch</blockquote>
</div>
</blockquote>
</div>
<ul id="menu6">
<li class="foo">Aberdeen</li>
<li class="foo ui-state-disabled">Ada</li>
<li class="foo">Adamsville</li>
<li class="foo">Addyston</li>
<li id="testID3" class="ui-state-disabled">Delphi
<ul>
<li class="foo">Ada</li>
<li class="foo">Saarland</li>
<li class="foo">Salzburg</li>
</ul>
</li>
<li class="foo">Saarland</li>
</ul>
<ul id="menu7">
<li class="ui-menu-group"><strong>Group 1</strong></li>
<li>Aberdeen</li>
<li>Ada</li>
<li>Adamsville</li>
<li>Addyston</li>
<li></li>
<li class="ui-menu-group"><strong>Group 2</strong></li>
<li>Delphi
<ul>
<li>Ada</li>
<li>Saarland</li>
<li>Salzburg</li>
</ul>
</li>
<li>Saarland</li>
<li>---</li>
<li class="ui-menu-group"><strong>Group 3</strong></li>
<li>Salzburg
<ul>
<li>Delphi
<ul>
<li>Ada</li>
<li> - </li>
<li>Saarland</li>
<li>&mdash;</li>
<li>Salzburg</li>
<li>&ndash;</li>
</ul>
</li>
<li>Delphi
<ul>
<li>Ada</li>
<li>Saarland</li>
<li>Salzburg</li>
</ul>
</li>
<li>Perch</li>
</ul>
</li>
<li>Amesville</li>
</ul>
<ul id="menu8">
<li class="foo">Aberdeen</li>
<li class="foo ui-state-disabled">Ada</li>
<li class="foo">Adamsville</li>
<li class="foo">Addyston</li>
<li class="foo">-</li>
<li class="foo">-Saarland</li>
</ul>
</div>
</body>
</html>

21
jquery-ui/tests/unit/menu/menu_common.js vendored Normal file
View file

@ -0,0 +1,21 @@
TestHelpers.commonWidgetTests( "menu", {
defaults: {
disabled: false,
icons: {
submenu: "ui-icon-carat-1-e"
},
items: "> *",
menus: "ul",
position: {
my: "left-1 top",
at: "right top"
},
role: "menu",
// callbacks
blur: null,
create: null,
focus: null,
select: null
}
});

61
jquery-ui/tests/unit/menu/menu_core.js vendored Normal file
View file

@ -0,0 +1,61 @@
(function( $ ) {
module( "menu: core" );
test( "markup structure", function() {
expect( 6 );
var element = $( "#menu1" ).menu();
ok( element.hasClass( "ui-menu" ), "main element is .ui-menu" );
element.children().each(function( index ) {
ok( $( this ).hasClass( "ui-menu-item" ), "child " + index + " is .ui-menu-item" );
});
});
test( "accessibility", function () {
expect( 4 );
var element = $( "#menu1" ).menu();
equal( element.attr( "role" ), "menu", "main role" );
ok( !element.attr( "aria-activedescendant" ), "aria-activedescendant not set" );
element.menu( "focus", $.Event(), element.children().eq( -2 ) );
equal( element.attr( "aria-activedescendant" ), "testID1", "aria-activedescendant from existing id" );
element.menu( "focus", $.Event(), element.children().eq( 0 ) );
ok( /^ui-id-\d+$/.test( element.attr( "aria-activedescendant" ) ), "aria-activedescendant from generated id" );
// Item roles are tested in the role option tests
});
asyncTest( "#9044: Autofocus issue with dialog opened from menu widget", function() {
expect( 1 );
var element = $( "#menu1" ).menu();
$( "<input>", { id: "test9044" } ).appendTo( "body" );
$( "#testID1" ).bind( "click", function() {
$( "#test9044" ).focus();
});
TestHelpers.menu.click( element, "3" );
setTimeout( function() {
equal( document.activeElement.id, "test9044", "Focus was swallowed by menu" );
$( "#test9044" ).remove();
start();
});
});
asyncTest( "#9532: Need a way in Menu to keep ui-state-active class on selected item for Selectmenu", function() {
expect( 1 );
var element = $( "#menu1" ).menu(),
firstChild = element.children().eq( 0 );
element.menu( "focus", null, firstChild );
firstChild.addClass( "ui-state-active" );
setTimeout( function() {
ok( firstChild.is( ".ui-state-active" ), "ui-state-active improperly removed" );
start();
}, 500 );
});
})( jQuery );

688
jquery-ui/tests/unit/menu/menu_events.js vendored Normal file
View file

@ -0,0 +1,688 @@
(function( $ ) {
var log = TestHelpers.menu.log,
logOutput = TestHelpers.menu.logOutput,
click = TestHelpers.menu.click;
module( "menu: events", {
setup: function() {
TestHelpers.menu.clearLog();
}
});
test( "handle click on menu", function() {
expect( 1 );
var element = $( "#menu1" ).menu({
select: function() {
log();
}
});
log( "click", true );
click( element, "1" );
log( "afterclick" );
click( element, "2" );
click( element, "3" );
click( element, "1" );
equal( logOutput(), "click,1,afterclick,2,3,1", "Click order not valid." );
});
test( "handle click on custom item menu", function() {
expect( 1 );
var element = $( "#menu5" ).menu({
select: function() {
log();
},
menus: "div"
});
log( "click", true );
click( element, "1" );
log( "afterclick" );
click( element, "2" );
click( element, "3" );
click( element, "1" );
equal( logOutput(), "click,1,afterclick,2,3,1", "Click order not valid." );
});
asyncTest( "handle blur", function() {
expect( 1 );
var blurHandled = false,
element = $( "#menu1" ).menu({
blur: function( event ) {
// Ignore duplicate blur event fired by IE
if ( !blurHandled ) {
blurHandled = true;
equal( event.type, "menublur", "blur event.type is 'menublur'" );
}
}
});
click( element, "1" );
setTimeout(function() {
element.blur();
setTimeout(function() {
start();
}, 350 );
});
});
asyncTest( "handle blur via click outside", function() {
expect( 1 );
var blurHandled = false,
element = $( "#menu1" ).menu({
blur: function( event ) {
// Ignore duplicate blur event fired by IE
if ( !blurHandled ) {
blurHandled = true;
equal( event.type, "menublur", "blur event.type is 'menublur'" );
}
}
});
click( element, "1" );
setTimeout(function() {
$( "<a>", { id: "remove"} ).appendTo( "body" ).trigger( "click" );
setTimeout(function() {
start();
}, 350 );
});
});
asyncTest( "handle focus of menu with active item", function() {
expect( 1 );
var element = $( "#menu1" ).menu({
focus: function( event ) {
log( $( event.target ).find( ".ui-state-focus" ).index() );
}
});
log( "focus", true );
element[ 0 ].focus();
setTimeout(function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element[ 0 ].blur();
setTimeout(function() {
element[ 0 ].focus();
setTimeout(function() {
equal( logOutput(), "focus,0,1,2,2", "current active item remains active" );
start();
});
});
});
});
asyncTest( "handle submenu auto collapse: mouseleave", function() {
expect( 4 );
var element = $( "#menu2" ).menu(),
event = $.Event( "mouseenter" );
function menumouseleave1() {
equal( element.find( "ul[aria-expanded='true']" ).length, 1, "first submenu expanded" );
element.menu( "focus", event, element.find( "li:nth-child(7) li:first" ) );
setTimeout( menumouseleave2, 350 );
}
function menumouseleave2() {
equal( element.find( "ul[aria-expanded='true']" ).length, 2, "second submenu expanded" );
element.find( "ul[aria-expanded='true']:first" ).trigger( "mouseleave" );
setTimeout( menumouseleave3, 350 );
}
function menumouseleave3() {
equal( element.find( "ul[aria-expanded='true']" ).length, 1, "second submenu collapsed" );
element.trigger( "mouseleave" );
setTimeout( menumouseleave4, 350 );
}
function menumouseleave4() {
equal( element.find( "ul[aria-expanded='true']" ).length, 0, "first submenu collapsed" );
start();
}
element.find( "li:nth-child(7)" ).trigger( "mouseenter" );
setTimeout( menumouseleave1, 350 );
});
asyncTest( "handle submenu auto collapse: mouseleave", function() {
expect( 4 );
var element = $( "#menu5" ).menu({ menus: "div" }),
event = $.Event( "mouseenter" );
function menumouseleave1() {
equal( element.find( "div[aria-expanded='true']" ).length, 1, "first submenu expanded" );
element.menu( "focus", event, element.find( ":nth-child(7)" ).find( "div" ).eq( 0 ).children().eq( 0 ) );
setTimeout( menumouseleave2, 350 );
}
function menumouseleave2() {
equal( element.find( "div[aria-expanded='true']" ).length, 2, "second submenu expanded" );
element.find( "div[aria-expanded='true']:first" ).trigger( "mouseleave" );
setTimeout( menumouseleave3, 350 );
}
function menumouseleave3() {
equal( element.find( "div[aria-expanded='true']" ).length, 1, "second submenu collapsed" );
element.trigger( "mouseleave" );
setTimeout( menumouseleave4, 350 );
}
function menumouseleave4() {
equal( element.find( "div[aria-expanded='true']" ).length, 0, "first submenu collapsed" );
start();
}
element.find( ":nth-child(7)" ).trigger( "mouseenter" );
setTimeout( menumouseleave1, 350 );
});
asyncTest( "handle keyboard navigation on menu without scroll and without submenus", function() {
expect( 12 );
var element = $( "#menu1" ).menu({
select: function( event, ui ) {
log( $( ui.item[ 0 ] ).text() );
},
focus: function( event ) {
log( $( event.target ).find( ".ui-state-focus" ).index() );
}
});
log( "keydown", true );
element[ 0 ].focus();
setTimeout(function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
equal( logOutput(), "keydown,0,1,2", "Keydown DOWN" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } );
equal( logOutput(), "keydown,1", "Keydown UP" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } );
equal( logOutput(), "keydown", "Keydown LEFT (no effect)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
equal( logOutput(), "keydown", "Keydown RIGHT (no effect)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } );
equal( logOutput(), "keydown,4", "Keydown PAGE_DOWN" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } );
equal( logOutput(), "keydown", "Keydown PAGE_DOWN (no effect)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } );
equal( logOutput(), "keydown,0", "Keydown PAGE_UP" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } );
equal( logOutput(), "keydown", "Keydown PAGE_UP (no effect)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.END } );
equal( logOutput(), "keydown,4", "Keydown END" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.HOME } );
equal( logOutput(), "keydown,0", "Keydown HOME" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } );
equal( logOutput(), "keydown", "Keydown ESCAPE (no effect)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
equal( logOutput(), "keydown,Aberdeen", "Keydown ENTER" );
start();
});
});
asyncTest( "handle keyboard navigation on menu without scroll and with submenus", function() {
expect( 16 );
var element = $( "#menu2" ).menu({
select: function( event, ui ) {
log( $( ui.item[0] ).text() );
},
focus: function( event ) {
log( $( event.target ).find( ".ui-state-focus" ).index() );
}
});
log( "keydown", true );
element.one( "menufocus", function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
equal( logOutput(), "keydown,1,2", "Keydown DOWN" );
setTimeout( menukeyboard1, 50 );
});
element.focus();
function menukeyboard1() {
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } );
equal( logOutput(), "keydown,1,0", "Keydown UP" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } );
equal( logOutput(), "keydown", "Keydown LEFT (no effect)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
setTimeout(function() {
equal( logOutput(), "keydown,1,2,3,4,0", "Keydown RIGHT (open submenu)" );
setTimeout( menukeyboard2, 50 );
}, 50 );
}
function menukeyboard2() {
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } );
equal( logOutput(), "keydown,4", "Keydown LEFT (close submenu)" );
// re-open submenu
element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
setTimeout( menukeyboard3, 50 );
}
function menukeyboard3() {
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } );
equal( logOutput(), "keydown,2", "Keydown PAGE_DOWN" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } );
equal( logOutput(), "keydown", "Keydown PAGE_DOWN (no effect)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } );
equal( logOutput(), "keydown,0", "Keydown PAGE_UP" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } );
equal( logOutput(), "keydown", "Keydown PAGE_UP (no effect)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.END } );
equal( logOutput(), "keydown,2", "Keydown END" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.HOME } );
equal( logOutput(), "keydown,0", "Keydown HOME" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } );
equal( logOutput(), "keydown,4", "Keydown ESCAPE (close submenu)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.SPACE } );
setTimeout( menukeyboard4, 50 );
}
function menukeyboard4() {
equal( logOutput(), "keydown,0", "Keydown SPACE (open submenu)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } );
equal( logOutput(), "keydown,4", "Keydown ESCAPE (close submenu)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
setTimeout( function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
setTimeout( function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
equal( logOutput(), "keydown,5,6,0,1,0,2,4,0", "Keydown skip dividers" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
setTimeout( menukeyboard6, 50 );
}, 50 );
}, 50 );
}
function menukeyboard6() {
equal( logOutput(), "keydown,Ada", "Keydown ENTER (open submenu)" );
start();
}
});
asyncTest( "handle keyboard navigation on menu with scroll and without submenus", function() {
expect( 14 );
var element = $( "#menu3" ).menu({
select: function( event, ui ) {
log( $( ui.item[ 0 ] ).text() );
},
focus: function( event ) {
log( $( event.target ).find( ".ui-state-focus" ).index());
}
});
log( "keydown", true );
element[ 0 ].focus();
setTimeout(function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
equal( logOutput(), "keydown,0,1,2", "Keydown DOWN" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } );
equal( logOutput(), "keydown,1,0", "Keydown UP" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } );
equal( logOutput(), "keydown", "Keydown LEFT (no effect)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
equal( logOutput(), "keydown", "Keydown RIGHT (no effect)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } );
equal( logOutput(), "keydown,17", "Keydown PAGE_DOWN" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } );
equal( logOutput(), "keydown,34", "Keydown PAGE_DOWN" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } );
equal( logOutput(), "keydown,17", "Keydown PAGE_UP" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } );
equal( logOutput(), "keydown,0", "Keydown PAGE_UP" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } );
equal( logOutput(), "keydown", "Keydown PAGE_UP (no effect)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.END } );
equal( logOutput(), "keydown,37", "Keydown END" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } );
equal( logOutput(), "keydown", "Keydown PAGE_DOWN (no effect)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.HOME } );
equal( logOutput(), "keydown,0", "Keydown HOME" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } );
equal( logOutput(), "keydown", "Keydown ESCAPE (no effect)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
equal( logOutput(), "keydown,Aberdeen", "Keydown ENTER" );
start();
});
});
asyncTest( "handle keyboard navigation on menu with scroll and with submenus", function() {
expect( 14 );
var element = $( "#menu4" ).menu({
select: function( event, ui ) {
log( $( ui.item[ 0 ] ).text() );
},
focus: function( event ) {
log( $( event.target ).find( ".ui-state-focus" ).index());
}
});
log( "keydown", true );
element.one( "menufocus", function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
equal( logOutput(), "keydown,1,2", "Keydown DOWN" );
setTimeout( menukeyboard1, 50 );
});
element.focus();
function menukeyboard1() {
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } );
equal( logOutput(), "keydown,1,0", "Keydown UP" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } );
equal( logOutput(), "keydown", "Keydown LEFT (no effect)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
setTimeout( function() {
equal( logOutput(), "keydown,1,0", "Keydown RIGHT (open submenu)" );
}, 50 );
setTimeout( menukeyboard2, 50 );
}
function menukeyboard2() {
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } );
equal( logOutput(), "keydown,1", "Keydown LEFT (close submenu)" );
// re-open submenu
element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
setTimeout( menukeyboard3, 50 );
}
function menukeyboard3() {
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } );
equal( logOutput(), "keydown,17", "Keydown PAGE_DOWN" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } );
equal( logOutput(), "keydown,27", "Keydown PAGE_DOWN" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } );
equal( logOutput(), "keydown,10", "Keydown PAGE_UP" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } );
equal( logOutput(), "keydown,0", "Keydown PAGE_UP" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.END } );
equal( logOutput(), "keydown,27", "Keydown END" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.HOME } );
equal( logOutput(), "keydown,0", "Keydown HOME" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } );
equal( logOutput(), "keydown,1", "Keydown ESCAPE (close submenu)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
setTimeout( menukeyboard4, 50 );
}
function menukeyboard4() {
equal( logOutput(), "keydown,0", "Keydown ENTER (open submenu)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
equal( logOutput(), "keydown,Aberdeen", "Keydown ENTER (select item)" );
start();
}
});
asyncTest( "handle keyboard navigation and mouse click on menu with disabled items", function() {
expect( 6 );
var element = $( "#menu6" ).menu({
select: function( event, ui ) {
log( $( ui.item[0] ).text() );
},
focus: function( event ) {
log( $( event.target ).find( ".ui-state-focus" ).index());
}
});
log( "keydown", true );
element.one( "menufocus", function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
equal( logOutput(), "keydown,1", "Keydown focus but not select disabled item" );
setTimeout( menukeyboard1, 50 );
});
element.focus();
function menukeyboard1() {
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
equal( logOutput(), "keydown,2,3,4", "Keydown focus disabled item with submenu" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } );
equal( logOutput(), "keydown", "Keydown LEFT (no effect)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
setTimeout( function() {
equal( logOutput(), "keydown", "Keydown RIGHT (no effect on disabled sub-menu)" );
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
setTimeout( function() {
equal( logOutput(), "keydown", "Keydown ENTER (no effect on disabled sub-menu)" );
log( "click", true );
click( element, "1" );
equal( logOutput(), "click", "Click disabled item (no effect)" );
start();
}, 50 );
}, 50 );
}
});
asyncTest( "handle keyboard navigation and mouse click on menu with dividers and group labels", function() {
expect( 2 );
var element = $( "#menu7" ).menu({
items: "> :not('.ui-menu-group')",
select: function( event, ui ) {
log( $( ui.item[0] ).text() );
},
focus: function( event ) {
log( $( event.target ).find( ".ui-state-focus" ).index());
}
});
log( "keydown", true );
element.one( "menufocus", function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
equal( logOutput(), "keydown,2,Ada", "Keydown skips initial group label" );
setTimeout( menukeyboard1, 50 );
});
element.focus();
function menukeyboard1() {
log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
equal( logOutput(), "keydown,3,4,7", "Keydown focus skips divider and group label" );
start();
}
});
asyncTest( "handle keyboard navigation with spelling of menu items", function() {
expect( 3 );
var element = $( "#menu2" ).menu({
focus: function( event ) {
log( $( event.target ).find( ".ui-state-focus" ).index() );
}
});
log( "keydown", true );
element.one( "menufocus", function() {
element.simulate( "keydown", { keyCode: 65 } );
element.simulate( "keydown", { keyCode: 68 } );
element.simulate( "keydown", { keyCode: 68 } );
equal( logOutput(), "keydown,0,1,3", "Keydown focus Addyston by spelling the first 3 letters" );
element.simulate( "keydown", { keyCode: 68 } );
equal( logOutput(), "keydown,0,1,3,4", "Keydown focus Delphi by repeating the 'd' again" );
element.simulate( "keydown", { keyCode: 83 } );
equal( logOutput(), "keydown,0,1,3,4,5", "Keydown focus Saarland ignoring leading space" );
start();
});
element[ 0 ].focus();
});
asyncTest( "Keep focus on selected item (see #10644)", function() {
expect( 1 );
var element = $( "#menu2" ).menu({
focus: function( event ) {
log( $( event.target ).find( ".ui-state-focus" ).index() );
}
});
log( "keydown", true );
element.one( "menufocus", function() {
element.simulate( "keydown", { keyCode: 65 } );
element.simulate( "keydown", { keyCode: 68 } );
element.simulate( "keydown", { keyCode: 68 } );
element.simulate( "keydown", { keyCode: 89 } );
element.simulate( "keydown", { keyCode: 83 } );
equal( logOutput(), "keydown,0,1,3,3,3",
"Focus stays on 'Addyston', even after other options are eliminated" );
start();
});
element[ 0 ].focus();
});
test( "#9469: Stopping propagation in a select event should not suppress subsequent select events.", function() {
expect( 1 );
var element = $( "#menu1" ).menu({
select: function( event ) {
log();
event.stopPropagation();
}
});
click( element, "1" );
click( element, "2" );
equal( logOutput(), "1,2", "Both select events were not triggered." );
});
asyncTest( "#10571: When typing in a menu, only menu-items should be focused", function() {
expect( 3 );
var element = $( "#menu8" ).menu({
focus: function( event, ui ) {
equal( ui.item.length, 1, "There should only be one match when filtering" );
ok( ui.item.hasClass( "ui-menu-item" ), "element is .ui-menu-item" );
equal( ui.item.text(), "-Saarland", "element has correct text" );
}
});
setTimeout(function() {
element.menu( "widget" ).simulate( "keydown", { keyCode: "-".charCodeAt( 0 ) } );
start();
});
});
})( jQuery );

117
jquery-ui/tests/unit/menu/menu_methods.js vendored Normal file
View file

@ -0,0 +1,117 @@
(function( $ ) {
var log = TestHelpers.menu.log,
logOutput = TestHelpers.menu.logOutput,
click = TestHelpers.menu.click;
module( "menu: methods", {
setup: function() {
TestHelpers.menu.clearLog();
}
});
test( "destroy", function() {
expect( 4 );
domEqual( "#menu1", function() {
$( "#menu1" ).menu().menu( "destroy" );
});
domEqual( "#menu2", function() {
$( "#menu2" ).menu().menu( "destroy" );
});
domEqual( "#menu5", function() {
$( "#menu5").menu().menu( "destroy" );
});
domEqual( "#menu6", function() {
$( "#menu6" ).menu().menu( "destroy" );
});
});
test( "enable/disable", function() {
expect( 3 );
var element = $( "#menu1" ).menu({
select: function() {
log();
}
});
element.menu( "disable" );
ok( element.is( ".ui-state-disabled" ), "Missing ui-state-disabled class" );
log( "click", true );
click( element, "1" );
log( "afterclick" );
element.menu( "enable" );
ok( element.not( ".ui-state-disabled" ), "Has ui-state-disabled class" );
log( "click" );
click( element, "1" );
log( "afterclick" );
equal( logOutput(), "click,afterclick,click,1,afterclick", "Click order not valid." );
});
test( "refresh", function() {
expect( 5 );
var element = $( "#menu1" ).menu();
equal( element.find( ".ui-menu-item" ).length, 5, "Incorrect number of menu items" );
element.append( "<li><a href='#'>test item</a></li>" ).menu( "refresh" );
equal( element.find( ".ui-menu-item" ).length, 6, "Incorrect number of menu items" );
element.find( ".ui-menu-item:last" ).remove().end().menu( "refresh" );
equal( element.find( ".ui-menu-item" ).length, 5, "Incorrect number of menu items" );
element.append( "<li>---</li>" ).menu( "refresh" );
equal( element.find( ".ui-menu-item" ).length, 5, "Incorrect number of menu items" );
element.children( ":last" ).remove().end().menu( "refresh" );
equal( element.find( ".ui-menu-item" ).length, 5, "Incorrect number of menu items" );
});
test( "refresh submenu", function() {
expect( 2 );
var element = $( "#menu2" ).menu();
equal( element.find( "ul:first .ui-menu-item" ).length, 3 );
element.find( "ul" ).addBack().append( "<li><a href=\"#\">New Item</a></li>" );
element.menu( "refresh" );
equal( element.find( "ul:first .ui-menu-item" ).length, 4 );
});
test( "refresh icons (see #9377)", function() {
expect( 3 );
var element = $( "#menu1" ).menu();
ok( !element.hasClass( "ui-menu-icons") );
element.find( "li:first" ).html( "<span class='ui-icon ui-icon-disk'></span>Save</a>" );
element.menu( "refresh" );
ok( element.hasClass( "ui-menu-icons" ) );
element.find( "li:first" ).html( "Save" );
element.menu( "refresh" );
ok( !element.hasClass( "ui-menu-icons" ) );
});
test( "widget", function() {
expect( 2 );
var element = $( "#menu1" ).menu(),
widgetElement = element.menu( "widget" );
equal( widgetElement.length, 1, "one element" );
strictEqual( widgetElement[ 0 ], element[ 0 ], "same element" );
});
// TODO: test focus method
// TODO: test blur method
// TODO: test collapseAll method
// TODO: test collapse method
// TODO: test expand method
// TODO: test next method
// TODO: test prev method
// TODO: test isFirstItem method
// TODO: test isLastItem method
// TODO: test nextPage method
// TODO: test prevPage method
// TODO: test select method
})( jQuery );

109
jquery-ui/tests/unit/menu/menu_options.js vendored Normal file
View file

@ -0,0 +1,109 @@
(function( $ ) {
var log = TestHelpers.menu.log,
logOutput = TestHelpers.menu.logOutput,
click = TestHelpers.menu.click;
module( "menu: options", {
setup: function() {
TestHelpers.menu.clearLog();
}
});
test( "{ disabled: true }", function() {
expect( 2 );
var element = $( "#menu1" ).menu({
disabled: true,
select: function() {
log();
}
});
ok( element.hasClass( "ui-state-disabled" ), "Missing ui-state-disabled class" );
log( "click", true );
click( element, "1" );
log( "afterclick" );
equal( logOutput(), "click,afterclick", "Click order not valid." );
});
test( "{ disabled: false }", function() {
expect( 2 );
var element = $( "#menu1" ).menu({
disabled: false,
select: function() {
log();
}
});
ok( !element.hasClass( "ui-state-disabled" ), "Has ui-state-disabled class" );
log( "click", true );
click( element, "1" );
log( "afterclick" );
equal( logOutput(), "click,1,afterclick", "Click order not valid." );
});
test( "{ icons: default }", function() {
expect( 2 );
var element = $( "#menu2" ).menu();
equal( element.find( ".ui-menu-icon" ).attr( "class" ), "ui-menu-icon ui-icon ui-icon-carat-1-e" );
element.menu( "option", "icons.submenu", "ui-icon-triangle-1-e" );
equal( element.find( ".ui-menu-icon" ).attr( "class" ), "ui-menu-icon ui-icon ui-icon-triangle-1-e" );
});
test( "{ icons: { submenu: 'custom' } }", function() {
expect( 1 );
var element = $( "#menu2" ).menu({
icons: {
submenu: "custom-class"
}
});
equal( element.find( ".ui-menu-icon" ).attr( "class" ), "ui-menu-icon ui-icon custom-class" );
});
// TODO: test menus option
// TODO: test position option
test( "{ role: 'menu' } ", function() {
var element = $( "#menu1" ).menu(),
items = element.find( "li" );
expect( 2 + 3 * items.length );
equal( element.attr( "role" ), "menu" );
ok( items.length > 0, "number of menu items" );
items.each(function( item ) {
ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" );
equal( $( this ).attr( "role" ), "menuitem", "menu item ("+ item + ") role" );
equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" );
});
});
test( "{ role: 'listbox' } ", function() {
var element = $( "#menu1" ).menu({
role: "listbox"
}),
items = element.find( "li" );
expect( 2 + 3 * items.length );
equal( element.attr( "role" ), "listbox" );
ok( items.length > 0, "number of menu items" );
items.each(function( item ) {
ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" );
equal( $( this ).attr( "role" ), "option", "menu item ("+ item + ") role" );
equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" );
});
});
test( "{ role: null }", function() {
var element = $( "#menu1" ).menu({
role: null
}),
items = element.find( "li" );
expect( 2 + 3 * items.length );
strictEqual( element.attr( "role" ), undefined );
ok( items.length > 0, "number of menu items" );
items.each(function( item ) {
ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" );
equal( $( this ).attr( "role" ), undefined, "menu item ("+ item + ") role" );
equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" );
});
});
})( jQuery );

31
jquery-ui/tests/unit/menu/menu_test_helpers.js vendored Normal file
View file

@ -0,0 +1,31 @@
(function() {
var lastItem,
log = [];
TestHelpers.menu = {
log: function( message, clear ) {
if ( clear ) {
log.length = 0;
}
if ( message === undefined ) {
message = lastItem;
}
log.push( $.trim( message ) );
},
logOutput: function() {
return log.join( "," );
},
clearLog: function() {
log.length = 0;
},
click: function( menu, item ) {
lastItem = item;
menu.children( ":eq(" + item + ")" ).trigger( "click" );
}
};
})();

26
jquery-ui/tests/unit/position/all.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Position Test Suite</title>
<script src="../../../external/jquery/jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<link rel="stylesheet" href="../qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../qunit-composite.js"></script>
<script src="../subsuite.js"></script>
<script>
testAllVersions( "position" );
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
</div>
</body>
</html>

56
jquery-ui/tests/unit/position/position.html Normal file
View file

@ -0,0 +1,56 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Position Test Suite</title>
<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script>
TestHelpers.loadResources({
js: [ "ui/position.js" ]
});
</script>
<script src="position_core.js"></script>
<script src="../swarminject.js"></script>
</head>
<body>
<div id="qunit" style="position:relative; z-index:2;"></div>
<!--
elements smaller than 20px have a line-height set on them to avoid a bug in IE6
.height() returns the greater of the height and line-height
-->
<div id="qunit-fixture" style="top: 0; left: 0; z-index:1">
<div id="el1" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
<div id="el2" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
<div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div>
<div id="within" style="position: absolute; width: 12px; height: 12px; top: 2px; left: 0px; line-height: 12px;"></div>
<div id="scrollx" style="position: absolute; top: 0px; left: 0px">
<div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
<div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div>
</div>
<div style="position: absolute; height: 5000px; width: 5000px;"></div>
<div id="fractions-parent" style="position: absolute; left: 10.7432222px; top: 10.532325px; height: 30px; width: 201px;">
<div id="fractions-element"></div>
</div>
<div id="bug-5280" style="height: 30px; width: 201px;">
<div style="width: 50px; height: 10px;"></div>
</div>
<div id="bug-8710-within-smaller" style="position: absolute; width: 100px; height: 99px; top: 0px; left: 0px; line-height: 99px;"></div>
<div id="bug-8710-within-bigger" style="position: absolute; width: 100px; height: 101px; top: 0px; left: 0px; line-height: 101px;"></div>
</div>
</body>
</html>

766
jquery-ui/tests/unit/position/position_core.js vendored Normal file
View file

@ -0,0 +1,766 @@
(function( $ ) {
var win = $( window ),
scrollTopSupport = function() {
var support = win.scrollTop( 1 ).scrollTop() === 1;
win.scrollTop( 0 );
scrollTopSupport = function() {
return support;
};
return support;
};
module( "position", {
setup: function() {
win.scrollTop( 0 ).scrollLeft( 0 );
}
});
TestHelpers.testJshint( "position" );
test( "my, at, of", function() {
expect( 4 );
$( "#elx" ).position({
my: "left top",
at: "left top",
of: "#parentx",
collision: "none"
});
deepEqual( $( "#elx" ).offset(), { top: 40, left: 40 }, "left top, left top" );
$( "#elx" ).position({
my: "left top",
at: "left bottom",
of: "#parentx",
collision: "none"
});
deepEqual( $( "#elx" ).offset(), { top: 60, left: 40 }, "left top, left bottom" );
$( "#elx" ).position({
my: "left",
at: "bottom",
of: "#parentx",
collision: "none"
});
deepEqual( $( "#elx" ).offset(), { top: 55, left: 50 }, "left, bottom" );
$( "#elx" ).position({
my: "left foo",
at: "bar baz",
of: "#parentx",
collision: "none"
});
deepEqual( $( "#elx" ).offset(), { top: 45, left: 50 }, "left foo, bar baz" );
});
test( "multiple elements", function() {
expect( 3 );
var elements = $( "#el1, #el2" ),
result = elements.position({
my: "left top",
at: "left bottom",
of: "#parent",
collision: "none"
}),
expected = { top: 10, left: 4 };
deepEqual( result, elements );
elements.each(function() {
deepEqual( $( this ).offset(), expected );
});
});
test( "positions", function() {
expect( 18 );
var offsets = {
left: 0,
center: 3,
right: 6,
top: 0,
bottom: 6
},
start = { left: 4, top: 4 },
el = $( "#el1" );
$.each( [ 0, 1 ], function( my ) {
$.each( [ "top", "center", "bottom" ], function( vindex, vertical ) {
$.each( [ "left", "center", "right" ], function( hindex, horizontal ) {
var _my = my ? horizontal + " " + vertical : "left top",
_at = !my ? horizontal + " " + vertical : "left top";
el.position({
my: _my,
at: _at,
of: "#parent",
collision: "none"
});
deepEqual( el.offset(), {
top: start.top + offsets[ vertical ] * (my ? -1 : 1),
left: start.left + offsets[ horizontal ] * (my ? -1 : 1)
}, "Position via " + QUnit.jsDump.parse({ my: _my, at: _at }) );
});
});
});
});
test( "of", function() {
expect( 9 + (scrollTopSupport() ? 1 : 0) );
var event;
$( "#elx" ).position({
my: "left top",
at: "left top",
of: "#parentx",
collision: "none"
});
deepEqual( $( "#elx" ).offset(), { top: 40, left: 40 }, "selector" );
$( "#elx" ).position({
my: "left top",
at: "left bottom",
of: $( "#parentx"),
collision: "none"
});
deepEqual( $( "#elx" ).offset(), { top: 60, left: 40 }, "jQuery object" );
$( "#elx" ).position({
my: "left top",
at: "left top",
of: $( "#parentx" )[ 0 ],
collision: "none"
});
deepEqual( $( "#elx" ).offset(), { top: 40, left: 40 }, "DOM element" );
$( "#elx" ).position({
my: "right bottom",
at: "right bottom",
of: document,
collision: "none"
});
deepEqual( $( "#elx" ).offset(), {
top: $( document ).height() - 10,
left: $( document ).width() - 10
}, "document" );
$( "#elx" ).position({
my: "right bottom",
at: "right bottom",
of: $( document ),
collision: "none"
});
deepEqual( $( "#elx" ).offset(), {
top: $( document ).height() - 10,
left: $( document ).width() - 10
}, "document as jQuery object" );
win.scrollTop( 0 );
$( "#elx" ).position({
my: "right bottom",
at: "right bottom",
of: window,
collision: "none"
});
deepEqual( $( "#elx" ).offset(), {
top: win.height() - 10,
left: win.width() - 10
}, "window" );
$( "#elx" ).position({
my: "right bottom",
at: "right bottom",
of: win,
collision: "none"
});
deepEqual( $( "#elx" ).offset(), {
top: win.height() - 10,
left: win.width() - 10
}, "window as jQuery object" );
if ( scrollTopSupport() ) {
win.scrollTop( 500 ).scrollLeft( 200 );
$( "#elx" ).position({
my: "right bottom",
at: "right bottom",
of: window,
collision: "none"
});
deepEqual( $( "#elx" ).offset(), {
top: win.height() + 500 - 10,
left: win.width() + 200 - 10
}, "window, scrolled" );
win.scrollTop( 0 ).scrollLeft( 0 );
}
event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } );
$( "#elx" ).position({
my: "left top",
at: "left top",
of: event,
collision: "none"
});
deepEqual( $( "#elx" ).offset(), {
top: 300,
left: 200
}, "event - left top, left top" );
event = $.extend( $.Event( "someEvent" ), { pageX: 400, pageY: 600 } );
$( "#elx" ).position({
my: "left top",
at: "right bottom",
of: event,
collision: "none"
});
deepEqual( $( "#elx" ).offset(), {
top: 600,
left: 400
}, "event - left top, right bottom" );
});
test( "offsets", function() {
expect( 9 );
var offset;
$( "#elx" ).position({
my: "left top",
at: "left+10 bottom+10",
of: "#parentx",
collision: "none"
});
deepEqual( $( "#elx" ).offset(), { top: 70, left: 50 }, "offsets in at" );
$( "#elx" ).position({
my: "left+10 top-10",
at: "left bottom",
of: "#parentx",
collision: "none"
});
deepEqual( $( "#elx" ).offset(), { top: 50, left: 50 }, "offsets in my" );
$( "#elx" ).position({
my: "left top",
at: "left+50% bottom-10%",
of: "#parentx",
collision: "none"
});
deepEqual( $( "#elx" ).offset(), { top: 58, left: 50 }, "percentage offsets in at" );
$( "#elx" ).position({
my: "left-30% top+50%",
at: "left bottom",
of: "#parentx",
collision: "none"
});
deepEqual( $( "#elx" ).offset(), { top: 65, left: 37 }, "percentage offsets in my" );
$( "#elx" ).position({
my: "left-30.001% top+50.0%",
at: "left bottom",
of: "#parentx",
collision: "none"
});
offset = $( "#elx" ).offset();
equal( Math.round( offset.top ), 65, "decimal percentage offsets in my" );
equal( Math.round( offset.left ), 37, "decimal percentage offsets in my" );
$( "#elx" ).position({
my: "left+10.4 top-10.6",
at: "left bottom",
of: "#parentx",
collision: "none"
});
offset = $( "#elx" ).offset();
equal( Math.round( offset.top ), 49, "decimal offsets in my" );
equal( Math.round( offset.left ), 50, "decimal offsets in my" );
$( "#elx" ).position({
my: "left+right top-left",
at: "left-top bottom-bottom",
of: "#parentx",
collision: "none"
});
deepEqual( $( "#elx" ).offset(), { top: 60, left: 40 }, "invalid offsets" );
});
test( "using", function() {
expect( 10 );
var count = 0,
elems = $( "#el1, #el2" ),
of = $( "#parentx" ),
expectedPosition = { top: 60, left: 60 },
expectedFeedback = {
target: {
element: of,
width: 20,
height: 20,
left: 40,
top: 40
},
element: {
width: 6,
height: 6,
left: 60,
top: 60
},
horizontal: "left",
vertical: "top",
important: "vertical"
},
originalPosition = elems.position({
my: "right bottom",
at: "rigt bottom",
of: "#parentx",
collision: "none"
}).offset();
elems.position({
my: "left top",
at: "center+10 bottom",
of: "#parentx",
using: function( position, feedback ) {
deepEqual( this, elems[ count ], "correct context for call #" + count );
deepEqual( position, expectedPosition, "correct position for call #" + count );
deepEqual( feedback.element.element[ 0 ], elems[ count ] );
delete feedback.element.element;
deepEqual( feedback, expectedFeedback );
count++;
}
});
elems.each(function() {
deepEqual( $( this ).offset(), originalPosition, "elements not moved" );
});
});
function collisionTest( config, result, msg ) {
var elem = $( "#elx" ).position( $.extend({
my: "left top",
at: "right bottom",
of: "#parent"
}, config ) );
deepEqual( elem.offset(), result, msg );
}
function collisionTest2( config, result, msg ) {
collisionTest( $.extend({
my: "right bottom",
at: "left top"
}, config ), result, msg );
}
test( "collision: fit, no collision", function() {
expect( 2 );
collisionTest({
collision: "fit"
}, {
top: 10,
left: 10
}, "no offset" );
collisionTest({
collision: "fit",
at: "right+2 bottom+3"
}, {
top: 13,
left: 12
}, "with offset" );
});
// Currently failing in IE8 due to the iframe used by TestSwarm
if ( !/msie [\w.]+/.exec( navigator.userAgent.toLowerCase() ) ) {
test( "collision: fit, collision", function() {
expect( 2 + (scrollTopSupport() ? 1 : 0) );
collisionTest2({
collision: "fit"
}, {
top: 0,
left: 0
}, "no offset" );
collisionTest2({
collision: "fit",
at: "left+2 top+3"
}, {
top: 0,
left: 0
}, "with offset" );
if ( scrollTopSupport() ) {
win.scrollTop( 300 ).scrollLeft( 200 );
collisionTest({
collision: "fit"
}, {
top: 300,
left: 200
}, "window scrolled" );
win.scrollTop( 0 ).scrollLeft( 0 );
}
});
}
test( "collision: flip, no collision", function() {
expect( 2 );
collisionTest({
collision: "flip"
}, {
top: 10,
left: 10
}, "no offset" );
collisionTest({
collision: "flip",
at: "right+2 bottom+3"
}, {
top: 13,
left: 12
}, "with offset" );
});
test( "collision: flip, collision", function() {
expect( 2 );
collisionTest2({
collision: "flip"
}, {
top: 10,
left: 10
}, "no offset" );
collisionTest2({
collision: "flip",
at: "left+2 top+3"
}, {
top: 7,
left: 8
}, "with offset" );
});
test( "collision: flipfit, no collision", function() {
expect( 2 );
collisionTest({
collision: "flipfit"
}, {
top: 10,
left: 10
}, "no offset" );
collisionTest({
collision: "flipfit",
at: "right+2 bottom+3"
}, {
top: 13,
left: 12
}, "with offset" );
});
test( "collision: flipfit, collision", function() {
expect( 2 );
collisionTest2({
collision: "flipfit"
}, {
top: 10,
left: 10
}, "no offset" );
collisionTest2({
collision: "flipfit",
at: "left+2 top+3"
}, {
top: 7,
left: 8
}, "with offset" );
});
test( "collision: none, no collision", function() {
expect( 2 );
collisionTest({
collision: "none"
}, {
top: 10,
left: 10
}, "no offset" );
collisionTest({
collision: "none",
at: "right+2 bottom+3"
}, {
top: 13,
left: 12
}, "with offset" );
});
test( "collision: none, collision", function() {
expect( 2 );
collisionTest2({
collision: "none"
}, {
top: -6,
left: -6
}, "no offset" );
collisionTest2({
collision: "none",
at: "left+2 top+3"
}, {
top: -3,
left: -4
}, "with offset" );
});
test( "collision: fit, with margin", function() {
expect( 2 );
$( "#elx" ).css({
marginTop: 6,
marginLeft: 4
});
collisionTest({
collision: "fit"
}, {
top: 10,
left: 10
}, "right bottom" );
collisionTest2({
collision: "fit"
}, {
top: 6,
left: 4
}, "left top" );
});
test( "collision: flip, with margin", function() {
expect( 3 );
$( "#elx" ).css({
marginTop: 6,
marginLeft: 4
});
collisionTest({
collision: "flip"
}, {
top: 10,
left: 10
}, "left top" );
collisionTest2({
collision: "flip"
}, {
top: 10,
left: 10
}, "right bottom" );
collisionTest2({
collision: "flip",
my: "left top"
}, {
top: 0,
left: 4
}, "right bottom" );
});
test( "within", function() {
expect( 7 );
collisionTest({
within: document
}, {
top: 10,
left: 10
}, "within document" );
collisionTest({
within: "#within",
collision: "fit"
}, {
top: 4,
left: 2
}, "fit - right bottom" );
collisionTest2({
within: "#within",
collision: "fit"
}, {
top: 2,
left: 0
}, "fit - left top" );
collisionTest({
within: "#within",
collision: "flip"
}, {
top: 10,
left: -6
}, "flip - right bottom" );
collisionTest2({
within: "#within",
collision: "flip"
}, {
top: 10,
left: -6
}, "flip - left top" );
collisionTest({
within: "#within",
collision: "flipfit"
}, {
top: 4,
left: 0
}, "flipfit - right bottom" );
collisionTest2({
within: "#within",
collision: "flipfit"
}, {
top: 4,
left: 0
}, "flipfit - left top" );
});
test( "with scrollbars", function() {
expect( 4 );
$( "#scrollx" ).css({
width: 100,
height: 100,
left: 0,
top: 0
});
collisionTest({
of: "#scrollx",
collision: "fit",
within: "#scrollx"
}, {
top: 90,
left: 90
}, "visible" );
$( "#scrollx" ).css({
overflow: "scroll"
});
var scrollbarInfo = $.position.getScrollInfo( $.position.getWithinInfo( $( "#scrollx" ) ) );
collisionTest({
of: "#scrollx",
collision: "fit",
within: "#scrollx"
}, {
top: 90 - scrollbarInfo.height,
left: 90 - scrollbarInfo.width
}, "scroll" );
$( "#scrollx" ).css({
overflow: "auto"
});
collisionTest({
of: "#scrollx",
collision: "fit",
within: "#scrollx"
}, {
top: 90,
left: 90
}, "auto, no scroll" );
$( "#scrollx" ).css({
overflow: "auto"
}).append( $("<div>").height(300).width(300) );
collisionTest({
of: "#scrollx",
collision: "fit",
within: "#scrollx"
}, {
top: 90 - scrollbarInfo.height,
left: 90 - scrollbarInfo.width
}, "auto, with scroll" );
});
test( "fractions", function() {
expect( 1 );
$( "#fractions-element" ).position({
my: "left top",
at: "left top",
of: "#fractions-parent",
collision: "none"
});
deepEqual( $( "#fractions-element" ).offset(), $( "#fractions-parent" ).offset(), "left top, left top" );
});
test( "bug #5280: consistent results (avoid fractional values)", function() {
expect( 1 );
var wrapper = $( "#bug-5280" ),
elem = wrapper.children(),
offset1 = elem.position({
my: "center",
at: "center",
of: wrapper,
collision: "none"
}).offset(),
offset2 = elem.position({
my: "center",
at: "center",
of: wrapper,
collision: "none"
}).offset();
deepEqual( offset1, offset2 );
});
test( "bug #8710: flip if flipped position fits more", function() {
expect( 3 );
// Positions a 10px tall element within 99px height at top 90px.
collisionTest({
within: "#bug-8710-within-smaller",
of: "#parentx",
collision: "flip",
at: "right bottom+30"
}, {
top: 0,
left: 60
}, "flip - top fits all" );
// Positions a 10px tall element within 99px height at top 92px.
collisionTest({
within: "#bug-8710-within-smaller",
of: "#parentx",
collision: "flip",
at: "right bottom+32"
}, {
top: -2,
left: 60
}, "flip - top fits more" );
// Positions a 10px tall element within 101px height at top 92px.
collisionTest({
within: "#bug-8710-within-bigger",
of: "#parentx",
collision: "flip",
at: "right bottom+32"
}, {
top: 92,
left: 60
}, "no flip - top fits less" );
});
}( jQuery ) );

26
jquery-ui/tests/unit/progressbar/all.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar Test Suite</title>
<script src="../../../external/jquery/jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<link rel="stylesheet" href="../qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../qunit-composite.js"></script>
<script src="../subsuite.js"></script>
<script>
testAllVersions( "progressbar" );
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
</div>
</body>
</html>

40
jquery-ui/tests/unit/progressbar/progressbar.html Normal file
View file

@ -0,0 +1,40 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar Test Suite</title>
<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script>
TestHelpers.loadResources({
css: [ "core", "progressbar" ],
js: [
"ui/core.js",
"ui/widget.js",
"ui/progressbar.js"
]
});
</script>
<script src="progressbar_common.js"></script>
<script src="progressbar_core.js"></script>
<script src="progressbar_events.js"></script>
<script src="progressbar_methods.js"></script>
<script src="progressbar_options.js"></script>
<script src="../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div id="progressbar"></div>
</div>
</body>
</html>

12
jquery-ui/tests/unit/progressbar/progressbar_common.js vendored Normal file
View file

@ -0,0 +1,12 @@
TestHelpers.commonWidgetTests( "progressbar", {
defaults: {
disabled: false,
max: 100,
value: 0,
//callbacks
change: null,
complete: null,
create: null
}
});

53
jquery-ui/tests/unit/progressbar/progressbar_core.js vendored Normal file
View file

@ -0,0 +1,53 @@
module( "progressbar: core" );
test( "markup structure", function() {
expect( 5 );
var element = $( "#progressbar" ).progressbar();
ok( element.hasClass( "ui-progressbar" ), "main element is .ui-progressbar" );
ok( !element.hasClass( "ui-progressbar-indeterminate" ),
"main element is not .ui-progressbar-indeterminate" );
equal( element.children().length, 1, "main element contains one child" );
ok( element.children().eq( 0 ).hasClass( "ui-progressbar-value" ),
"child is .ui-progressbar-value" );
equal( element.children().children().length, 0, "no overlay div" );
});
test( "markup structure - indeterminate", function() {
expect( 5 );
var element = $( "#progressbar" ).progressbar({ value: false });
ok( element.hasClass( "ui-progressbar" ), "main element is .ui-progressbar" );
ok( element.hasClass( "ui-progressbar-indeterminate" ),
"main element is .ui-progressbar-indeterminate" );
equal( element.children().length, 1, "main element contains one child" );
ok( element.children().eq( 0 ).hasClass( "ui-progressbar-value" ),
"child is .ui-progressbar-value" );
equal( element.children().children( ".ui-progressbar-overlay" ).length, 1,
".ui-progressbar-value has .ui-progressbar-overlay" );
});
test( "accessibility", function() {
expect( 11 );
var element = $( "#progressbar" ).progressbar();
equal( element.attr( "role" ), "progressbar", "aria role" );
equal( element.attr( "aria-valuemin" ), 0, "aria-valuemin" );
equal( element.attr( "aria-valuemax" ), 100, "aria-valuemax" );
equal( element.attr( "aria-valuenow" ), 0, "aria-valuenow initially" );
element.progressbar( "value", 77 );
equal( element.attr( "aria-valuenow" ), 77, "aria-valuenow" );
element.progressbar( "option", "max", 150 );
equal( element.attr( "aria-valuemax" ), 150, "aria-valuemax" );
element.progressbar( "disable" );
equal( element.attr( "aria-disabled" ), "true", "aria-disabled on" );
element.progressbar( "enable" );
equal( element.attr( "aria-disabled" ), "false", "aria-disabled off" );
element.progressbar( "option", "value", false );
equal( element.attr( "aria-valuemin" ), 0, "aria-valuemin" );
equal( element.attr( "aria-valuemax" ), 150, "aria-valuemax" );
strictEqual( element.attr( "aria-valuenow" ), undefined, "aria-valuenow" );
});

51
jquery-ui/tests/unit/progressbar/progressbar_events.js vendored Normal file
View file

@ -0,0 +1,51 @@
module( "progressbar: events" );
test( "create", function() {
expect( 1 );
$( "#progressbar" ).progressbar({
value: 5,
create: function() {
equal( $( this ).progressbar( "value" ), 5, "Correct value at create" );
},
change: function() {
ok( false, "create has triggered change()" );
}
});
});
test( "change", function() {
expect( 2 );
var element = $( "#progressbar" ).progressbar();
element.one( "progressbarchange", function() {
equal( element.progressbar( "value" ), 5, "change triggered for middle value" );
});
element.progressbar( "value", 5 );
element.one( "progressbarchange", function() {
equal( element.progressbar( "value" ), 100, "change triggered for final value" );
});
element.progressbar( "value", 100 );
});
test( "complete", function() {
expect( 5 );
var value,
changes = 0,
element = $( "#progressbar" ).progressbar({
change: function() {
changes++;
equal( element.progressbar( "value" ), value, "change at " + value );
},
complete: function() {
equal( changes, 3, "complete triggered after change and not on indeterminate" );
equal( element.progressbar( "value" ), 100, "value is 100" );
}
});
value = 5;
element.progressbar( "value", value );
value = false;
element.progressbar( "value", value );
value = 100;
element.progressbar( "value", value );
});

35
jquery-ui/tests/unit/progressbar/progressbar_methods.js vendored Normal file
View file

@ -0,0 +1,35 @@
module( "progressbar: methods" );
test( "destroy", function() {
expect( 1 );
domEqual( "#progressbar", function() {
$( "#progressbar" ).progressbar().progressbar( "destroy" );
});
});
test( "disable", function() {
expect( 3 );
var element = $( "#progressbar" ).progressbar().progressbar( "disable" );
ok( element.progressbar( "widget" ).hasClass( "ui-state-disabled" ), "element gets ui-state-disabled" );
ok( element.progressbar( "widget" ).attr( "aria-disabled" ), "element gets aria-disabled" );
ok( element.progressbar( "widget" ).hasClass( "ui-progressbar-disabled" ), "element gets ui-progressbar-disabled" );
});
test( "value", function() {
expect( 3 );
var element = $( "<div>" ).progressbar({ value: 20 });
equal( element.progressbar( "value" ), 20, "correct value as getter" );
strictEqual( element.progressbar( "value", 30 ), element, "chainable as setter" );
equal( element.progressbar( "option", "value" ), 30, "correct value after setter" );
});
test( "widget", function() {
expect( 2 );
var element = $( "#progressbar" ).progressbar(),
widgetElement = element.progressbar( "widget" );
equal( widgetElement.length, 1, "one element" );
strictEqual( widgetElement[ 0 ], element[ 0 ], "same element" );
});

72
jquery-ui/tests/unit/progressbar/progressbar_options.js vendored Normal file
View file

@ -0,0 +1,72 @@
module( "progressbar: options" );
test( "{ value: 0 }, default", function() {
expect( 1 );
$( "#progressbar" ).progressbar();
equal( $( "#progressbar" ).progressbar( "value" ), 0 );
});
// Ticket #7231 - valueDiv should be hidden when value is at 0%
test( "value: visibility of valueDiv", function() {
expect( 4 );
var element = $( "#progressbar" ).progressbar({
value: 0
});
ok( element.children( ".ui-progressbar-value" ).is( ":hidden" ),
"valueDiv hidden when value is initialized at 0" );
element.progressbar( "value", 1 );
ok( element.children( ".ui-progressbar-value" ).is( ":visible" ),
"valueDiv visible when value is set to 1" );
element.progressbar( "value", 100 );
ok( element.children( ".ui-progressbar-value" ).is( ":visible" ),
"valueDiv visible when value is set to 100" );
element.progressbar( "value", 0 );
ok( element.children( ".ui-progressbar-value" ).is( ":hidden" ),
"valueDiv hidden when value is set to 0" );
});
test( "{ value: 5 }", function() {
expect( 1 );
$( "#progressbar" ).progressbar({
value: 5
});
equal( $( "#progressbar" ).progressbar( "value" ), 5 );
});
test( "{ value: -5 }", function() {
expect( 1 );
$( "#progressbar" ).progressbar({
value: -5
});
equal( $( "#progressbar" ).progressbar( "value" ), 0,
"value constrained at min" );
});
test( "{ value: 105 }", function() {
expect( 1 );
$( "#progressbar" ).progressbar({
value: 105
});
equal( $( "#progressbar" ).progressbar( "value" ), 100,
"value constrained at max" );
});
test( "{ value: 10, max: 5 }", function() {
expect( 1 );
$("#progressbar").progressbar({
max: 5,
value: 10
});
equal( $( "#progressbar" ).progressbar( "value" ), 5,
"value constrained at max" );
});
test( "change max below value", function() {
expect( 1 );
$("#progressbar").progressbar({
max: 10,
value: 10
}).progressbar( "option", "max", 5 );
equal( $( "#progressbar" ).progressbar( "value" ), 5,
"value constrained at max" );
});

13
jquery-ui/tests/unit/qunit-composite.css Normal file
View file

@ -0,0 +1,13 @@
iframe.qunit-subsuite {
position: fixed;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
border-width: 1px 0 0;
height: 45%;
width: 100%;
background: #fff;
}

112
jquery-ui/tests/unit/qunit-composite.js vendored Normal file
View file

@ -0,0 +1,112 @@
(function( QUnit ) {
QUnit.extend( QUnit, {
testSuites: function( suites ) {
QUnit.begin(function() {
QUnit.initIframe();
});
for ( var i = 0; i < suites.length; i++ ) {
QUnit.runSuite( suites[i] );
}
QUnit.done(function() {
this.iframe.style.display = "none";
});
},
runSuite: function( suite ) {
var path = suite;
if ( QUnit.is( "object", suite ) ) {
path = suite.path;
suite = suite.name;
}
asyncTest( suite, function() {
QUnit.iframe.setAttribute( "src", path );
});
},
initIframe: function() {
var body = document.body,
iframe = this.iframe = document.createElement( "iframe" ),
iframeWin;
iframe.className = "qunit-subsuite";
body.appendChild( iframe );
function onIframeLoad() {
var module, test,
count = 0;
if (iframe.src === "") {
return;
}
iframeWin.QUnit.moduleStart(function( data ) {
// capture module name for messages
module = data.name;
});
iframeWin.QUnit.testStart(function( data ) {
// capture test name for messages
test = data.name;
});
iframeWin.QUnit.testDone(function() {
test = null;
});
iframeWin.QUnit.log(function( data ) {
if (test === null) {
return;
}
// pass all test details through to the main page
var message = module + ": " + test + ": " + data.message;
expect( ++count );
QUnit.push( data.result, data.actual, data.expected, message );
});
iframeWin.QUnit.done(function() {
// start the wrapper test from the main page
start();
});
}
QUnit.addEvent( iframe, "load", onIframeLoad );
iframeWin = iframe.contentWindow;
}
});
QUnit.testStart(function( data ) {
// update the test status to show which test suite is running
QUnit.id( "qunit-testresult" ).innerHTML = "Running " + data.name + "...<br>&nbsp;";
});
QUnit.testDone(function() {
var i,
current = QUnit.id( this.config.current.id ),
children = current.children,
src = this.iframe.src;
// undo the auto-expansion of failed tests
for ( i = 0; i < children.length; i++ ) {
if ( children[i].nodeName === "OL" ) {
children[i].style.display = "none";
}
}
QUnit.addEvent(current, "dblclick", function( e ) {
var target = e && e.target ? e.target : window.event.srcElement;
if ( target.nodeName.toLowerCase() === "span" || target.nodeName.toLowerCase() === "b" ) {
target = target.parentNode;
}
if ( window.location && target.nodeName.toLowerCase() === "strong" ) {
window.location = src;
}
});
current.getElementsByTagName("a")[0].href = src;
});
}( QUnit ) );

26
jquery-ui/tests/unit/resizable/all.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable Test Suite</title>
<script src="../../../external/jquery/jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<link rel="stylesheet" href="../qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../qunit-composite.js"></script>
<script src="../subsuite.js"></script>
<script>
testAllVersions( "resizable" );
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
</div>
</body>
</html>

BIN
jquery-ui/tests/unit/resizable/images/test.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 391 B

84
jquery-ui/tests/unit/resizable/resizable.html Normal file
View file

@ -0,0 +1,84 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable Test Suite</title>
<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script>
TestHelpers.loadResources({
css: [ "core", "resizable" ],
js: [
"ui/core.js",
"ui/widget.js",
"ui/mouse.js",
"ui/resizable.js"
]
});
</script>
<script src="resizable_common.js"></script>
<script src="resizable_core.js"></script>
<script src="resizable_events.js"></script>
<script src="resizable_methods.js"></script>
<script src="resizable_options.js"></script>
<script src="resizable_test_helpers.js"></script>
<script src="../swarminject.js"></script>
<style>
#container {
width: 300px;
height: 200px;
}
#resizable1 {
background: green;
height: 100px;
width: 100px;
}
#resizable2 {
height: 100px;
width: 100px;
}
#container2 {
position: relative;
width: 400px;
height: 400px;
margin: 30px 0 0 30px;
}
#parent {
position: relative;
width: 300px;
height: 300px;
}
#child {
position: relative;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div id="container">
<div id="resizable1">I'm a resizable.</div>
<div id="resizer1" class="ui-resizable-handle ui-resizable-s"></div>
</div>
<div id="container2">
<div id="parent">
<div id="child">I'm a resizable.</div>
</div>
</div>
<img src="images/test.jpg" id="resizable2" alt="solid gray">
</div>
</body>
</html>

30
jquery-ui/tests/unit/resizable/resizable_common.js vendored Normal file
View file

@ -0,0 +1,30 @@
TestHelpers.commonWidgetTests( "resizable", {
defaults: {
alsoResize: false,
animate: false,
animateDuration: "slow",
animateEasing: "swing",
aspectRatio: false,
autoHide: false,
cancel: "input,textarea,button,select,option",
containment: false,
delay: 0,
disabled: false,
distance: 1,
ghost: false,
grid: false,
handles: "e,s,se",
helper: false,
maxHeight: null,
maxWidth: null,
minHeight: 10,
minWidth: 10,
zIndex: 90,
// callbacks
create: null,
resize: null,
start: null,
stop: null
}
});

244
jquery-ui/tests/unit/resizable/resizable_core.js vendored Normal file
View file

@ -0,0 +1,244 @@
/*
* resizable_core.js
*/
(function($) {
module("resizable: core");
/*
test("element types", function() {
var typeNames = ("p,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,div,form"
+ ",table,fieldset,address,ins,del,em,strong,q,cite,dfn,abbr"
+ ",acronym,code,samp,kbd,var,img,object,hr"
+ ",input,button,label,select,iframe").split(",");
$.each(typeNames, function(i) {
var typeName = typeNames[i];
el = $(document.createElement(typeName)).appendTo("body");
(typeName == "table" && el.append("<tr><td>content</td></tr>"));
el.resizable();
ok(true, "$('&lt;" + typeName + "/&gt').resizable()");
el.resizable("destroy");
el.remove();
});
});
*/
test("n", function() {
expect(4);
var handle = ".ui-resizable-n", target = $("#resizable1").resizable({ handles: "all" });
TestHelpers.resizable.drag(handle, 0, -50);
equal( target.height(), 150, "compare height" );
TestHelpers.resizable.drag(handle, 0, 50);
equal( target.height(), 100, "compare height" );
equal( target[0].style.left, "", "left should not be modified" );
equal( target[0].style.width, "", "width should not be modified" );
});
test("s", function() {
expect(5);
var handle = ".ui-resizable-s", target = $("#resizable1").resizable({ handles: "all" });
TestHelpers.resizable.drag(handle, 0, 50);
equal( target.height(), 150, "compare height" );
TestHelpers.resizable.drag(handle, 0, -50);
equal( target.height(), 100, "compare height" );
equal( target[0].style.top, "", "top should not be modified" );
equal( target[0].style.left, "", "left should not be modified" );
equal( target[0].style.width, "", "width should not be modified" );
});
test("e", function() {
expect(5);
var handle = ".ui-resizable-e", target = $("#resizable1").resizable({ handles: "all" });
TestHelpers.resizable.drag(handle, 50);
equal( target.width(), 150, "compare width");
TestHelpers.resizable.drag(handle, -50);
equal( target.width(), 100, "compare width" );
equal( target[0].style.height, "", "height should not be modified" );
equal( target[0].style.top, "", "top should not be modified" );
equal( target[0].style.left, "", "left should not be modified" );
});
test("w", function() {
expect(4);
var handle = ".ui-resizable-w", target = $("#resizable1").resizable({ handles: "all" });
TestHelpers.resizable.drag(handle, -50);
equal( target.width(), 150, "compare width" );
TestHelpers.resizable.drag(handle, 50);
equal( target.width(), 100, "compare width" );
equal( target[0].style.height, "", "height should not be modified" );
equal( target[0].style.top, "", "top should not be modified" );
});
test("ne", function() {
expect(5);
var handle = ".ui-resizable-ne", target = $("#resizable1").css({ overflow: "hidden" }).resizable({ handles: "all" });
TestHelpers.resizable.drag(handle, -50, -50);
equal( target.width(), 50, "compare width" );
equal( target.height(), 150, "compare height" );
TestHelpers.resizable.drag(handle, 50, 50);
equal( target.width(), 100, "compare width" );
equal( target.height(), 100, "compare height" );
equal( target[0].style.left, "", "left should not be modified" );
});
test("se", function() {
expect(6);
var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all" });
TestHelpers.resizable.drag(handle, 50, 50);
equal( target.width(), 150, "compare width" );
equal( target.height(), 150, "compare height" );
TestHelpers.resizable.drag(handle, -50, -50);
equal( target.width(), 100, "compare width" );
equal( target.height(), 100, "compare height" );
equal( target[0].style.top, "", "top should not be modified" );
equal( target[0].style.left, "", "left should not be modified" );
});
test("sw", function() {
expect(5);
var handle = ".ui-resizable-sw", target = $("#resizable1").resizable({ handles: "all" });
TestHelpers.resizable.drag(handle, -50, -50);
equal( target.width(), 150, "compare width" );
equal( target.height(), 50, "compare height" );
TestHelpers.resizable.drag(handle, 50, 50);
equal( target.width(), 100, "compare width" );
equal( target.height(), 100, "compare height" );
equal( target[0].style.top, "", "top should not be modified" );
});
test("nw", function() {
expect(4);
var handle = ".ui-resizable-nw", target = $("#resizable1").resizable({ handles: "all" });
TestHelpers.resizable.drag(handle, -50, -50);
equal( target.width(), 150, "compare width" );
equal( target.height(), 150, "compare height" );
TestHelpers.resizable.drag(handle, 50, 50);
equal( target.width(), 100, "compare width" );
equal( target.height(), 100, "compare height" );
});
test("handle with complex markup (#8756)", function() {
expect(2);
$("#resizable1")
.append(
$("<div>")
.addClass("ui-resizable-handle")
.addClass("ui-resizable-w")
.append($("<div>"))
);
var handle = ".ui-resizable-w div", target = $("#resizable1").resizable({ handles: "all" });
TestHelpers.resizable.drag(handle, -50);
equal( target.width(), 150, "compare width" );
TestHelpers.resizable.drag(handle, 50);
equal( target.width(), 100, "compare width" );
});
test("resizable accounts for scroll position correctly (#3815)", function() {
expect( 4 );
var position, top, left,
container = $("<div style='overflow:scroll;height:300px;width:300px;position:relative;'></div>").appendTo("#qunit-fixture"),
overflowed = $("<div style='width: 1000px; height: 1000px;'></div>").appendTo( container ),
el = $("<div style='height:100px;width:100px;position:absolute;top:10px;left:10px;'></div>").appendTo( overflowed ).resizable({ handles: "all" }),
handle = ".ui-resizable-e",
handlePosition = $(handle).position().left;
container.scrollLeft( 100 ).scrollTop( 100 );
position = el.position();
left = el.css("left");
top = el.css("top");
TestHelpers.resizable.drag(handle, 50, 50);
deepEqual( el.position(), position, "position stays the same when resized" );
equal( el.css("left"), left, "css('left') stays the same when resized" );
equal( el.css("top"), top, "css('top') stays the same when resized" );
equal( $(handle).position().left, handlePosition + 50, "handle also moved" );
});
test( "resizable stores correct size when using helper and grid (#9547)", function() {
expect( 2 );
var handle = ".ui-resizable-se",
target = $( "#resizable1" ).resizable({
handles: "all",
helper: "ui-resizable-helper",
grid: [ 10, 10 ]
});
TestHelpers.resizable.drag( handle, 1, 1 );
equal( target.width(), 100, "compare width" );
equal( target.height(), 100, "compare height" );
});
test( "nested resizable", function() {
expect( 4 );
var outer = $( "<div id='outer' style='width:50px'></div>" ),
inner = $( "<div id='inner' style='width:30px'></div>" ),
target = $( "#resizable1" ),
innerHandle,
outerHandle;
outer.appendTo( target );
inner.appendTo( outer );
inner.resizable( { handles : "e" } );
outer.resizable( { handles : "e" } );
target.resizable( { handles : "e" } );
innerHandle = $( "#inner > .ui-resizable-e" );
outerHandle = $( "#outer > .ui-resizable-e" );
TestHelpers.resizable.drag( innerHandle, 10 );
equal( inner.width(), 40, "compare width of inner element" );
TestHelpers.resizable.drag( innerHandle, -10 );
equal( inner.width(), 30, "compare width of inner element" );
TestHelpers.resizable.drag( outerHandle, 10 );
equal( outer.width(), 60, "compare width of outer element" );
TestHelpers.resizable.drag( outerHandle, -10 );
equal( outer.width(), 50, "compare width of outer element" );
inner.remove();
outer.remove();
});
})(jQuery);

241
jquery-ui/tests/unit/resizable/resizable_events.js vendored Normal file
View file

@ -0,0 +1,241 @@
/*
* resizable_events.js
*/
(function($) {
module("resizable: events");
test("start", function() {
expect(5);
var count = 0,
handle = ".ui-resizable-se";
$("#resizable1").resizable({
handles: "all",
start: function(event, ui) {
equal( ui.size.width, 100, "compare width" );
equal( ui.size.height, 100, "compare height" );
equal( ui.originalSize.width, 100, "compare original width" );
equal( ui.originalSize.height, 100, "compare original height" );
count++;
}
});
TestHelpers.resizable.drag(handle, 50, 50);
equal(count, 1, "start callback should happen exactly once");
});
test( "resize", function() {
expect( 9 );
var count = 0,
handle = ".ui-resizable-se";
$("#resizable1").resizable({
handles: "all",
resize: function( event, ui ) {
if ( count === 0 ) {
equal( ui.size.width, 125, "compare width" );
equal( ui.size.height, 125, "compare height" );
equal( ui.originalSize.width, 100, "compare original width" );
equal( ui.originalSize.height, 100, "compare original height" );
} else {
equal( ui.size.width, 150, "compare width" );
equal( ui.size.height, 150, "compare height" );
equal( ui.originalSize.width, 100, "compare original width" );
equal( ui.originalSize.height, 100, "compare original height" );
}
count++;
}
});
TestHelpers.resizable.drag( handle, 50, 50 );
equal( count, 2, "resize callback should happen exactly once per size adjustment" );
});
test( "resize (min/max dimensions)", function() {
expect( 5 );
var count = 0,
handle = ".ui-resizable-se";
$("#resizable1").resizable({
handles: "all",
minWidth: 60,
minHeight: 60,
maxWidth: 100,
maxHeight: 100,
resize: function( event, ui ) {
equal( ui.size.width, 60, "compare width" );
equal( ui.size.height, 60, "compare height" );
equal( ui.originalSize.width, 100, "compare original width" );
equal( ui.originalSize.height, 100, "compare original height" );
count++;
}
});
TestHelpers.resizable.drag( handle, -200, -200 );
equal( count, 1, "resize callback should happen exactly once per size adjustment" );
});
test( "resize (containment)", function() {
expect( 5 );
var count = 0,
handle = ".ui-resizable-se",
container = $("#resizable1").wrap("<div>").parent().css({
height: "100px",
width: "100px"
});
$("#resizable1").resizable({
handles: "all",
containment: container,
resize: function( event, ui ) {
equal( ui.size.width, 10, "compare width" );
equal( ui.size.height, 10, "compare height" );
equal( ui.originalSize.width, 100, "compare original width" );
equal( ui.originalSize.height, 100, "compare original height" );
count++;
}
});
// Prove you can't resize outside containment by dragging southeast corner southeast
TestHelpers.resizable.drag( handle, 100, 100 );
// Prove you can't resize outside containment by dragging southeast corner northwest
TestHelpers.resizable.drag( handle, -200, -200 );
equal( count, 1, "resize callback should happen exactly once per size adjustment" );
});
test("resize (grid)", function() {
expect(5);
var count = 0,
handle = ".ui-resizable-se";
$("#resizable1").resizable({
handles: "all",
grid: 50,
resize: function(event, ui) {
equal( ui.size.width, 150, "compare width" );
equal( ui.size.height, 150, "compare height" );
equal( ui.originalSize.width, 100, "compare original width" );
equal( ui.originalSize.height, 100, "compare original height" );
count++;
}
});
TestHelpers.resizable.drag(handle, 50, 50);
equal(count, 1, "resize callback should happen exactly once per grid-unit size adjustment");
});
test( "resize, custom adjustment", function() {
expect( 4 );
var handle = ".ui-resizable-se",
element = $( "#resizable1" ).resizable({
resize: function( event, ui ) {
ui.size.width = 100;
ui.size.height = 200;
ui.position.left = 300;
ui.position.top = 400;
}
});
TestHelpers.resizable.drag( handle, 50, 50 );
equal( element.width(), 100, "resize event can control width" );
equal( element.height(), 200, "resize event can control height" );
equal( element.position().left, 300, "resize event can control left" );
equal( element.position().top, 400, "resize event can control top" );
});
test("stop", function() {
expect(5);
var count = 0,
handle = ".ui-resizable-se";
$("#resizable1").resizable({
handles: "all",
stop: function(event, ui) {
equal( ui.size.width, 150, "compare width" );
equal( ui.size.height, 150, "compare height" );
equal( ui.originalSize.width, 100, "compare original width" );
equal( ui.originalSize.height, 100, "compare original height" );
count++;
}
});
TestHelpers.resizable.drag(handle, 50, 50);
equal(count, 1, "stop callback should happen exactly once");
});
test( "resize (containment) works with parent with negative offset", function() {
expect( 1 );
var widthBefore, widthAfter,
handle = ".ui-resizable-e",
target = $( "#resizable1" ),
absoluteContainer = target.wrap( "<div />" ).parent(),
fixedContainer = absoluteContainer.wrap( "<div />" ).parent(),
increaseWidthBy = 50;
// position fixed container in window top left
fixedContainer.css({
width: 400,
height: 100,
position: "fixed",
top: 0,
left: 0
});
// position absolute container within fixed on slightly outside window
absoluteContainer.css({
width: 400,
height: 100,
position: "absolute",
top: 0,
left: -50
});
// set up resizable to be contained within absolute container
target.resizable({
handles: "all",
containment: "parent"
}).css({
width: 300
});
widthBefore = target.width();
TestHelpers.resizable.drag( handle, increaseWidthBy, 0 );
widthAfter = target.width();
equal( widthAfter, ( widthBefore + increaseWidthBy ), "resizable width should be increased by the value dragged" );
});
})(jQuery);

21
jquery-ui/tests/unit/resizable/resizable_methods.js vendored Normal file
View file

@ -0,0 +1,21 @@
/*
* resizable_methods.js
*/
(function($) {
module( "resizable: methods" );
test( "disable", function() {
expect( 5 );
var element = $( "#resizable1" ).resizable({ disabled: false }),
chainable = element.resizable( "disable" );
ok( !element.resizable( "widget" ).hasClass( "ui-state-disabled" ), "element does not get ui-state-disabled" );
ok( !element.resizable( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" );
ok( element.resizable( "widget" ).hasClass( "ui-resizable-disabled" ), "element gets ui-resizable-disabled" );
equal( element.resizable( "option", "disabled" ), true, "disabled option setter" );
equal( chainable, element, "disable is chainable" );
});
})(jQuery);

466
jquery-ui/tests/unit/resizable/resizable_options.js vendored Normal file
View file

@ -0,0 +1,466 @@
/*
* resizable_options.js
*/
(function($) {
module("resizable: options");
test( "alsoResize", function() {
expect( 2 );
var other = $( "<div>" )
.css({
width: 50,
height: 50
})
.appendTo( "body" ),
element = $( "#resizable1" ).resizable({
alsoResize: other
}),
handle = ".ui-resizable-e";
TestHelpers.resizable.drag( handle, 80 );
equal( element.width(), 180, "resizable width" );
equal( other.width(), 130, "alsoResize width" );
});
test("aspectRatio: 'preserve' (e)", function() {
expect(4);
var handle = ".ui-resizable-e", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
TestHelpers.resizable.drag(handle, 80);
equal( target.width(), 130, "compare maxWidth");
equal( target.height(), 130, "compare maxHeight");
TestHelpers.resizable.drag(handle, -130);
equal( target.width(), 70, "compare minWidth");
equal( target.height(), 70, "compare minHeight");
});
test("aspectRatio: 'preserve' (w)", function() {
expect(4);
var handle = ".ui-resizable-w", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
TestHelpers.resizable.drag(handle, -80);
equal( target.width(), 130, "compare maxWidth");
equal( target.height(), 130, "compare maxHeight");
TestHelpers.resizable.drag(handle, 130);
equal( target.width(), 70, "compare minWidth");
equal( target.height(), 70, "compare minHeight");
});
test("aspectRatio: 'preserve' (n)", function() {
expect(4);
var handle = ".ui-resizable-n", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
TestHelpers.resizable.drag(handle, 0, -80);
equal( target.width(), 130, "compare maxWidth");
equal( target.height(), 130, "compare maxHeight");
TestHelpers.resizable.drag(handle, 0, 80);
equal( target.width(), 70, "compare minWidth");
equal( target.height(), 70, "compare minHeight");
});
test("aspectRatio: 'preserve' (s)", function() {
expect(4);
var handle = ".ui-resizable-s", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
TestHelpers.resizable.drag(handle, 0, 80);
equal( target.width(), 130, "compare maxWidth");
equal( target.height(), 130, "compare maxHeight");
TestHelpers.resizable.drag(handle, 0, -80);
equal( target.width(), 70, "compare minWidth");
equal( target.height(), 70, "compare minHeight");
});
test("aspectRatio: 'preserve' (se)", function() {
expect(4);
var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
TestHelpers.resizable.drag(handle, 80, 80);
equal( target.width(), 130, "compare maxWidth");
equal( target.height(), 130, "compare maxHeight");
TestHelpers.resizable.drag(handle, -80, -80);
equal( target.width(), 70, "compare minWidth");
equal( target.height(), 70, "compare minHeight");
});
test("aspectRatio: 'preserve' (sw)", function() {
expect(4);
var handle = ".ui-resizable-sw", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
TestHelpers.resizable.drag(handle, -80, 80);
equal( target.width(), 130, "compare maxWidth");
equal( target.height(), 130, "compare maxHeight");
TestHelpers.resizable.drag(handle, 80, -80);
equal( target.width(), 70, "compare minWidth");
equal( target.height(), 70, "compare minHeight");
});
test("aspectRatio: 'preserve' (ne)", function() {
expect(4);
var handle = ".ui-resizable-ne", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
TestHelpers.resizable.drag(handle, 80, -80);
equal( target.width(), 130, "compare maxWidth");
equal( target.height(), 130, "compare maxHeight");
TestHelpers.resizable.drag(handle, -80, 80);
equal( target.width(), 70, "compare minWidth");
equal( target.height(), 70, "compare minHeight");
});
test( "aspectRatio: Resizing can move objects", function() {
expect( 7 );
// http://bugs.jqueryui.com/ticket/7018 - Resizing can move objects
var handleW = ".ui-resizable-w",
handleNW = ".ui-resizable-nw",
target = $( "#resizable1" ).resizable({
aspectRatio: true,
handles: "all",
containment: "parent"
});
$( "#container" ).css({ width: 200, height: 300 });
$( "#resizable1" ).css({ width: 100, height: 100, left: 75, top: 200 });
TestHelpers.resizable.drag( handleW, -20 );
equal( target.width(), 100, "compare width - no size change" );
equal( target.height(), 100, "compare height - no size change" );
equal( target.position().left, 75, "compare left - no movement" );
// http://bugs.jqueryui.com/ticket/9107 - aspectRatio and containment not handled correctly
$( "#container" ).css({ width: 200, height: 300, position: "absolute", left: 100, top: 100 });
$( "#resizable1" ).css({ width: 100, height: 100, left: 0, top: 0 });
TestHelpers.resizable.drag( handleNW, -20, -20 );
equal( target.width(), 100, "compare width - no size change" );
equal( target.height(), 100, "compare height - no size change" );
equal( target.position().left, 0, "compare left - no movement" );
equal( target.position().top, 0, "compare top - no movement" );
});
test( "containment", function() {
expect( 4 );
var element = $( "#resizable1" ).resizable({
containment: "#container"
});
TestHelpers.resizable.drag( ".ui-resizable-se", 20, 30 );
equal( element.width(), 120, "unconstrained width within container" );
equal( element.height(), 130, "unconstrained height within container" );
TestHelpers.resizable.drag( ".ui-resizable-se", 400, 400 );
equal( element.width(), 300, "constrained width at containment edge" );
equal( element.height(), 200, "constrained height at containment edge" );
});
test( "containment - not immediate parent", function() {
expect( 4 );
// http://bugs.jqueryui.com/ticket/7485 - Resizable: Containment calculation is wrong
// when containment element is not the immediate parent
var element = $( "#child" ).resizable({
containment: "#container2",
handles: "all"
});
TestHelpers.resizable.drag( ".ui-resizable-e", 300, 0 );
equal( element.width(), 400, "Relative, contained within container width" );
TestHelpers.resizable.drag( ".ui-resizable-s", 0, 300 );
equal( element.height(), 400, "Relative, contained within container height" );
$( "#child" ).css( { left: 50, top: 50 } );
$( "#parent" ).css( { left: 50, top: 50 } );
$( "#container2" ).css( { left: 50, top: 50 } );
element = $( "#child" ).resizable({
containment: "#container2",
handles: "all"
});
TestHelpers.resizable.drag( ".ui-resizable-e", 400, 0 );
equal( element.width(), 300, "Relative with Left, contained within container width" );
TestHelpers.resizable.drag( ".ui-resizable-s", 0, 400 );
equal( element.height(), 300, "Relative with Top, contained within container height" );
});
test( "containment - immediate parent", function() {
expect( 4 );
// http://bugs.jqueryui.com/ticket/10140 - Resizable: Width calculation is wrong when containment element is "position: relative"
// when containment element is immediate parent
var element = $( "#child" ).resizable({
containment: "parent",
handles: "all"
});
TestHelpers.resizable.drag( ".ui-resizable-e", 400, 0 );
equal( element.width(), 300, "Relative, contained within container width" );
TestHelpers.resizable.drag( ".ui-resizable-s", 0, 400 );
equal( element.height(), 300, "Relative, contained within container height" );
$( "#child" ).css( { left: 50, top: 50 } );
$( "#parent" ).css( { left: 50, top: 50 } );
$( "#container2" ).css( { left: 50, top: 50 } );
element = $( "#child" ).resizable({
containment: "parent",
handles: "all"
});
TestHelpers.resizable.drag( ".ui-resizable-e", 400, 0 );
equal( element.width(), 250, "Relative with Left, contained within container width" );
TestHelpers.resizable.drag( ".ui-resizable-s", 0, 400 );
equal( element.height(), 250, "Relative with Top, contained within container height" );
});
test("grid", function() {
expect(4);
var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all", grid: [ 0, 20 ] });
TestHelpers.resizable.drag(handle, 3, 9);
equal( target.width(), 103, "compare width");
equal( target.height(), 100, "compare height");
TestHelpers.resizable.drag(handle, 15, 11);
equal( target.width(), 118, "compare width");
equal( target.height(), 120, "compare height");
});
test("grid (min/max dimensions)", function() {
expect(4);
var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all", grid: 20, minWidth: 65, minHeight: 65, maxWidth: 135, maxHeight: 135 });
TestHelpers.resizable.drag(handle, 50, 50);
equal( target.width(), 120, "grid should respect maxWidth");
equal( target.height(), 120, "grid should respect maxHeight");
TestHelpers.resizable.drag(handle, -100, -100);
equal( target.width(), 80, "grid should respect minWidth");
equal( target.height(), 80, "grid should respect minHeight");
});
test("grid (wrapped)", function() {
expect(4);
var handle = ".ui-resizable-se", target = $("#resizable2").resizable({ handles: "all", grid: [ 0, 20 ] });
TestHelpers.resizable.drag(handle, 3, 9);
equal( target.width(), 103, "compare width");
equal( target.height(), 100, "compare height");
TestHelpers.resizable.drag(handle, 15, 11);
equal( target.width(), 118, "compare width");
equal( target.height(), 120, "compare height");
});
test( "grid - Resizable: can be moved when grid option is set (#9611)", function() {
expect( 6 );
var oldPosition,
handle = ".ui-resizable-nw",
target = $( "#resizable1" ).resizable({
handles: "all",
grid: 50
});
TestHelpers.resizable.drag( handle, 50, 50 );
equal( target.width(), 50, "compare width" );
equal( target.height(), 50, "compare height" );
oldPosition = target.position();
TestHelpers.resizable.drag( handle, 50, 50 );
equal( target.width(), 50, "compare width" );
equal( target.height(), 50, "compare height" );
equal( target.position().top, oldPosition.top, "compare top" );
equal( target.position().left, oldPosition.left, "compare left" );
});
test( "grid - maintains grid with padding and border when approaching no dimensions", function() {
expect( 2 );
// http://bugs.jqueryui.com/ticket/10437 - Resizable: border with grid option working wrong
var handle = ".ui-resizable-nw",
target = $( "#resizable1" ).css({
padding: 5,
border: "5px solid black",
width: 80,
height: 80
}).resizable({
handles: "all",
grid: [ 50, 12 ]
});
TestHelpers.resizable.drag( handle, 50, 50 );
equal( target.outerWidth(), 50, "compare width" );
equal( target.outerHeight(), 52, "compare height" );
});
test("ui-resizable-se { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() {
expect(4);
var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 });
TestHelpers.resizable.drag(handle, -50, -50);
equal( target.width(), 60, "compare minWidth" );
equal( target.height(), 60, "compare minHeight" );
TestHelpers.resizable.drag(handle, 70, 70);
equal( target.width(), 100, "compare maxWidth" );
equal( target.height(), 100, "compare maxHeight" );
});
test("ui-resizable-sw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() {
expect(4);
var handle = ".ui-resizable-sw", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 });
TestHelpers.resizable.drag(handle, 50, -50);
equal( target.width(), 60, "compare minWidth" );
equal( target.height(), 60, "compare minHeight" );
TestHelpers.resizable.drag(handle, -70, 70);
equal( target.width(), 100, "compare maxWidth" );
equal( target.height(), 100, "compare maxHeight" );
});
test("ui-resizable-ne { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() {
expect(4);
var handle = ".ui-resizable-ne", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 });
TestHelpers.resizable.drag(handle, -50, 50);
equal( target.width(), 60, "compare minWidth" );
equal( target.height(), 60, "compare minHeight" );
TestHelpers.resizable.drag(handle, 70, -70);
equal( target.width(), 100, "compare maxWidth" );
equal( target.height(), 100, "compare maxHeight" );
});
test("ui-resizable-nw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() {
expect(4);
var handle = ".ui-resizable-nw", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 });
TestHelpers.resizable.drag(handle, 70, 70);
equal( target.width(), 60, "compare minWidth" );
equal( target.height(), 60, "compare minHeight" );
TestHelpers.resizable.drag(handle, -70, -70);
equal( target.width(), 100, "compare maxWidth" );
equal( target.height(), 100, "compare maxHeight" );
});
test( "custom handles { handles: { 's': $('#resizer1'), containment: 'parent' }", function () {
expect( 2 );
var handle = "#resizer1",
target = $( "#resizable1" ).resizable({ handles: { "s": $( "#resizer1" ) }, containment: "parent" });
TestHelpers.resizable.drag( handle, 0, 70 );
equal( target.height(), 170, "compare height" );
TestHelpers.resizable.drag( handle, 0, -70 );
equal( target.height(), 100, "compare height" );
});
test( "custom handles { handles: { 's': $('#resizer1')[0], containment: 'parent' }", function () {
expect( 2 );
var handle = "#resizer1",
target = $( "#resizable1" ).resizable({ handles: { "s": $( "#resizer1" )[ 0 ] }, containment: "parent" });
TestHelpers.resizable.drag( handle, 0, 70 );
equal( target.height(), 170, "compare height" );
TestHelpers.resizable.drag( handle, 0, -70 );
equal( target.height(), 100, "compare height" );
});
test("zIndex, applied to all handles", function() {
expect(8);
var target = $("<div></div>").resizable({ handles: "all", zIndex: 100 });
target.children( ".ui-resizable-handle" ).each( function( index, handle ) {
equal( $( handle ).css( "zIndex" ), 100, "compare zIndex" );
});
});
test( "alsoResize + containment", function() {
expect( 4 );
var other = $( "<div>" )
.css({
width: 50,
height: 50
})
.appendTo( "body" ),
element = $( "#resizable1" ).resizable({
alsoResize: other,
containment: "#container"
});
TestHelpers.resizable.drag( ".ui-resizable-se", 400, 400 );
equal( element.width(), 300, "resizable constrained width at containment edge" );
equal( element.height(), 200, "resizable constrained height at containment edge" );
equal( other.width(), 250, "alsoResize constrained width at containment edge" );
equal( other.height(), 150, "alsoResize constrained height at containment edge" );
});
test( "alsoResize + multiple selection", function() {
expect( 6 );
var other1 = $( "<div>" )
.addClass( "other" )
.css({
width: 50,
height: 50
})
.appendTo( "body" ),
other2 = $( "<div>" )
.addClass( "other" )
.css({
width: 50,
height: 50
})
.appendTo( "body"),
element = $( "#resizable1" ).resizable({
alsoResize: other1.add( other2 ),
containment: "#container"
});
TestHelpers.resizable.drag( ".ui-resizable-se", 400, 400 );
equal( element.width(), 300, "resizable constrained width at containment edge" );
equal( element.height(), 200, "resizable constrained height at containment edge" );
equal( other1.width(), 250, "alsoResize o1 constrained width at containment edge" );
equal( other1.height(), 150, "alsoResize o1 constrained height at containment edge" );
equal( other2.width(), 250, "alsoResize o2 constrained width at containment edge" );
equal( other2.height(), 150, "alsoResize o2 constrained height at containment edge" );
});
})(jQuery);

11
jquery-ui/tests/unit/resizable/resizable_test_helpers.js vendored Normal file
View file

@ -0,0 +1,11 @@
TestHelpers.resizable = {
drag: function( el, dx, dy ) {
// this mouseover is to work around a limitation in resizable
// TODO: fix resizable so handle doesn't require mouseover in order to be used
$( el ).simulate("mouseover").simulate( "drag", {
moves: 2,
dx: dx,
dy: dy
});
}
};

26
jquery-ui/tests/unit/selectable/all.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectable Test Suite</title>
<script src="../../../external/jquery/jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<link rel="stylesheet" href="../qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../qunit-composite.js"></script>
<script src="../subsuite.js"></script>
<script>
testAllVersions( "selectable" );
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
</div>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show more