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

Merge commit 'd32092c1f0' as 'jquery-ui'

Browse source
This commit is contained in:
Mark Schouten 2016-08-05 12:47:57 +02:00
commit b23131fdc2
717 changed files with 518330 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

28
jquery-ui/tests/.jshintrc Normal file
View file

@ -0,0 +1,28 @@
{
"boss": true,
"curly": true,
"eqeqeq": true,
"eqnull": true,
"expr": true,
"immed": true,
"noarg": true,
"quotmark": "double",
"smarttabs": true,
"trailing": true,
"undef": true,
"unused": true,
"browser": true,
"es3": true,
"evil": true,
"jquery": true,
"globals": {
"define": false,
"Globalize": false,
"QUnit": false,
"require": true,
"requirejs": true,
"JSHINT": false
}
}

BIN
jquery-ui/tests/images/jquery_521x191.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
jquery-ui/tests/images/jqueryui_32x32.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

18
jquery-ui/tests/index.css Normal file
View file

@ -0,0 +1,18 @@
.ui-widget-header {
padding: 0.2em 0.5em;
margin: 0;
}
.ui-widget-content {
padding: 1em;
margin-bottom: 1em;
}
p {
margin: 0;
}
ul {
margin: 0;
list-style: none;
}
li {
line-height: 2em;
}

33
jquery-ui/tests/index.html Normal file
View file

@ -0,0 +1,33 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 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 Tests</h1>
<div>
<h2>Unit Tests</h2>
<p><a href="unit/index.html">Unit tests</a> exist for all functionality in jQuery UI.
The unit tests can be run locally (some tests require a web server with PHP)
to ensure proper functionality before committing changes.
The unit tests are also run on <a href="http://swarm.jquery.org/project/jqueryui">TestSwarm</a>
for every commit.</p>
<h2>Visual Tests</h2>
<p><a href="visual/index.html">Visual tests</a> only exist in cases where we can't verify proper functionality
with unit tests. These may be either purely visual or just hard to automate.
Most visual tests will provide a description of what is happening on the page
and what to look for.</p>
</div>
</div>
</body>
</html>

10
jquery-ui/tests/index.js vendored Normal file
View file

@ -0,0 +1,10 @@
$( function() {
$( "#main" )
.addClass( "ui-widget" )
.find( "h1, h2" )
.addClass( "ui-widget-header ui-corner-top" )
.next()
.addClass( "ui-widget-content ui-corner-bottom" );
} );

151
jquery-ui/tests/lib/bootstrap.js vendored Normal file
View file

@ -0,0 +1,151 @@
( function() {
requirejs.config( {
paths: {
"globalize": "../../../external/globalize/globalize",
"globalize/ja-JP": "../../../external/globalize/globalize.culture.ja-JP",
"jquery": jqueryUrl(),
"jquery-simulate": "../../../external/jquery-simulate/jquery.simulate",
"jshint": "../../../external/jshint/jshint",
"lib": "../../lib",
"phantom-bridge": "../../../node_modules/grunt-contrib-qunit/phantomjs/bridge",
"qunit-assert-classes": "../../../external/qunit-assert-classes/qunit-assert-classes",
"qunit-assert-close": "../../../external/qunit-assert-close/qunit-assert-close",
"qunit": "../../../external/qunit/qunit",
"testswarm": "http://swarm.jquery.org/js/inject.js?" + ( new Date() ).getTime(),
"ui": "../../../ui"
},
shim: {
"globalize/ja-JP": [ "globalize" ],
"jquery-simulate": [ "jquery" ],
"qunit-assert-close": [ "qunit" ],
"testswarm": [ "qunit" ]
}
} );
// Create a module that disables back compat for UI modules
define( "jquery-no-back-compat", [ "jquery" ], function( $ ) {
$.uiBackCompat = false;
return $;
} );
// Create a dummy bridge if we're not actually testing in PhantomJS
if ( !/PhantomJS/.test( navigator.userAgent ) ) {
define( "phantom-bridge", function() {} );
}
// Load all modules in series
function requireModules( dependencies, callback, modules ) {
if ( !dependencies.length ) {
if ( callback ) {
callback.apply( null, modules );
}
return;
}
if ( !modules ) {
modules = [];
}
var dependency = dependencies.shift();
require( [ dependency ], function( module ) {
modules.push( module );
requireModules( dependencies, callback, modules );
} );
}
// Load a set of test file along with the required test infrastructure
function requireTests( dependencies, noBackCompat ) {
dependencies = [
"lib/qunit",
noBackCompat ? "jquery-no-back-compat" : "jquery",
"jquery-simulate"
].concat( dependencies );
// Load the TestSwarm injector, if necessary
if ( parseUrl().swarmURL ) {
dependencies.push( "testswarm" );
}
requireModules( dependencies, function( QUnit ) {
QUnit.start();
} );
}
// Parse the URL into key/value pairs
function parseUrl() {
var data = {};
var parts = document.location.search.slice( 1 ).split( "&" );
var length = parts.length;
var i = 0;
var current;
for ( ; i < length; i++ ) {
current = parts[ i ].split( "=" );
data[ current[ 0 ] ] = current[ 1 ];
}
return data;
}
function jqueryUrl() {
var version = parseUrl().jquery;
var url;
if ( version === "git" ) {
url = "http://code.jquery.com/jquery-" + version;
} else {
url = "../../../external/jquery-" + ( version || "1.12.4" ) + "/jquery";
}
return url;
}
// Load test modules based on data attributes
// - data-modules: list of test modules to load
// - data-widget: A widget to load test modules for
// - Automatically loads common, core, events, methods, and options
// - data-deprecated: Loads the deprecated test modules for a widget
// - data-no-back-compat: Set $.uiBackCompat to false
( function() {
// Find the script element
var scripts = document.getElementsByTagName( "script" );
var script = scripts[ scripts.length - 1 ];
// Read the modules
var modules = script.getAttribute( "data-modules" );
if ( modules ) {
modules = modules
.replace( /^\s+|\s+$/g, "" )
.split( /\s+/ );
} else {
modules = [];
}
var widget = script.getAttribute( "data-widget" );
var deprecated = !!script.getAttribute( "data-deprecated" );
var noBackCompat = !!script.getAttribute( "data-no-back-compat" );
if ( widget ) {
modules = modules.concat( [
( deprecated ? "common-deprecated" : "common" ),
"core",
"events",
"methods",
"options"
] );
if ( deprecated ) {
modules = modules.concat( "deprecated" );
}
}
// Load the jQuery 1.7 fixes, if necessary
if ( parseFloat( parseUrl().jquery ) === 1.7 ) {
modules.push( "ui/jquery-1-7" );
}
requireTests( modules, noBackCompat );
} )();
} )();

137
jquery-ui/tests/lib/common.js vendored Normal file
View file

@ -0,0 +1,137 @@
define( [
"qunit",
"jquery" ],
function( QUnit, $ ) {
var exports = {};
function testWidgetDefaults( widget, defaults ) {
var pluginDefaults = $.ui[ widget ].prototype.options;
// Ensure that all defaults have the correct value
QUnit.test( "defined defaults", function( assert ) {
var count = 0;
$.each( defaults, function( key, val ) {
assert.expect( ++count );
if ( $.isFunction( val ) ) {
assert.ok( $.isFunction( pluginDefaults[ key ] ), key );
return;
}
assert.deepEqual( pluginDefaults[ key ], val, key );
} );
} );
// Ensure that all defaults were tested
QUnit.test( "tested defaults", function( assert ) {
var count = 0;
$.each( pluginDefaults, function( key ) {
assert.expect( ++count );
assert.ok( key in defaults, key );
} );
} );
}
function testWidgetOverrides( widget ) {
if ( $.uiBackCompat === false ) {
QUnit.test( "$.widget overrides", function( assert ) {
assert.expect( 4 );
$.each( [
"_createWidget",
"destroy",
"option",
"_trigger"
], function( i, method ) {
assert.strictEqual( $.ui[ widget ].prototype[ method ],
$.Widget.prototype[ method ], "should not override " + method );
} );
} );
}
}
function testBasicUsage( widget ) {
QUnit.test( "basic usage", function( assert ) {
assert.expect( 3 );
var defaultElement = $.ui[ widget ].prototype.defaultElement;
$( defaultElement ).appendTo( "body" )[ widget ]().remove();
assert.ok( true, "initialized on element" );
$( defaultElement )[ widget ]().remove();
assert.ok( true, "initialized on disconnected DOMElement - never connected" );
// Ensure manipulating removed elements works (#3664)
$( defaultElement ).appendTo( "body" ).remove()[ widget ]().remove();
assert.ok( true, "initialized on disconnected DOMElement - removed" );
} );
}
exports.testWidget = function( widget, settings ) {
QUnit.module( widget + ": common widget" );
exports.testJshint( "/widgets/" + widget );
testWidgetDefaults( widget, settings.defaults );
testWidgetOverrides( widget );
if ( !settings.noDefaultElement ) {
testBasicUsage( widget );
}
QUnit.test( "version", function( assert ) {
assert.expect( 1 );
assert.ok( "version" in $.ui[ widget ].prototype, "version property exists" );
} );
};
exports.testJshint = function( module ) {
// Function.prototype.bind check is needed because JSHint doesn't work in ES3 browsers anymore
// https://github.com/jshint/jshint/issues/1384
if ( QUnit.urlParams.nojshint || !Function.prototype.bind ) {
return;
}
QUnit.test( "JSHint", function( assert ) {
var ready = assert.async();
require( [ "jshint" ], function() {
assert.expect( 1 );
$.when(
$.ajax( {
url: "../../../ui/.jshintrc",
dataType: "json"
} ),
$.ajax( {
url: "../../../ui/" + module + ".js",
dataType: "text"
} )
)
.done( function( hintArgs, srcArgs ) {
var globals, passed, errors,
jshintrc = hintArgs[ 0 ],
source = srcArgs[ 0 ];
globals = jshintrc.globals || {};
delete jshintrc.globals;
passed = JSHINT( source, jshintrc, globals );
errors = $.map( JSHINT.errors, function( error ) {
// JSHINT may report null if there are too many errors
if ( !error ) {
return;
}
return "[L" + error.line + ":C" + error.character + "] " +
error.reason + "\n" + error.evidence + "\n";
} ).join( "\n" );
assert.ok( passed, errors );
ready();
} )
.fail( function( hintError, srcError ) {
assert.ok( false, "error loading source: " + ( hintError || srcError ).statusText );
ready();
} );
} );
} );
};
return exports;
} );

23
jquery-ui/tests/lib/css.js vendored Normal file
View file

@ -0,0 +1,23 @@
( function() {
function includeStyle( url ) {
document.write( "<link rel='stylesheet' href='../../../" + url + "'>" );
}
// Find the script element
var scripts = document.getElementsByTagName( "script" );
var script = scripts[ scripts.length - 1 ];
// Load the modules
var modules = script.getAttribute( "data-modules" );
if ( modules ) {
modules = modules.split( /\s+/ );
for ( var i = 0; i < modules.length; i++ ) {
includeStyle( "themes/base/" + modules[ i ] + ".css" );
}
}
// Load the QUnit stylesheet
includeStyle( "external/qunit/qunit.css" );
} )();

33
jquery-ui/tests/lib/helper.js vendored Normal file
View file

@ -0,0 +1,33 @@
define( [
"jquery"
], function( $ ) {
var exports = {};
exports.forceScrollableWindow = function( appendTo ) {
// The main testable area is 10000x10000 so to enforce scrolling,
// this DIV must be greater than 10000 to work
return $( "<div>" )
.css( {
height: "11000px",
width: "11000px"
} )
.appendTo( appendTo || "#qunit-fixture" );
};
exports.onFocus = function( element, onFocus ) {
var fn = function( event ) {
if ( !event.originalEvent ) {
return;
}
element.off( "focus", fn );
onFocus();
};
element.on( "focus", fn )[ 0 ].focus();
};
return exports;
} );

123
jquery-ui/tests/lib/qunit-assert-domequal.js vendored Normal file
View file

@ -0,0 +1,123 @@
/*
* Experimental assertion for comparing DOM objects.
*
* Serializes an element and some properties and attributes and its children if any,
* otherwise the text. Then compares the result using deepEqual().
*/
define( [
"qunit",
"jquery"
], function( QUnit, $ ) {
var domEqual = QUnit.assert.domEqual = function( selector, modifier, message ) {
var assert = this;
// Get current state prior to modifier
var expected = extract( selector, message );
function done() {
var actual = extract( selector, message );
assert.push( QUnit.equiv( actual, expected ), actual, expected, message );
}
// Run modifier (async or sync), then compare state via done()
if ( modifier.length ) {
modifier( done );
} else {
modifier();
done();
}
};
domEqual.properties = [
"disabled",
"readOnly"
];
domEqual.attributes = [
"autocomplete",
"aria-activedescendant",
"aria-controls",
"aria-describedby",
"aria-disabled",
"aria-expanded",
"aria-haspopup",
"aria-hidden",
"aria-labelledby",
"aria-pressed",
"aria-selected",
"aria-valuemax",
"aria-valuemin",
"aria-valuenow",
"class",
"href",
"id",
"nodeName",
"role",
"tabIndex",
"title"
];
function getElementStyles( elem ) {
var styles = {};
var style = elem.ownerDocument.defaultView ?
elem.ownerDocument.defaultView.getComputedStyle( elem, null ) :
elem.currentStyle;
var key, len;
if ( style && style.length && style[ 0 ] && style[ style[ 0 ] ] ) {
len = style.length;
while ( len-- ) {
key = style[ len ];
if ( typeof style[ key ] === "string" ) {
styles[ $.camelCase( key ) ] = style[ key ];
}
}
// Support: Opera, IE <9
} else {
for ( key in style ) {
if ( typeof style[ key ] === "string" ) {
styles[ key ] = style[ key ];
}
}
}
return styles;
}
function extract( selector, message ) {
var elem = $( selector );
if ( !elem.length ) {
QUnit.push( false, null, null,
"domEqual failed, can't extract " + selector + ", message was: " + message );
return;
}
var result = {};
var children;
$.each( domEqual.properties, function( index, attr ) {
var value = elem.prop( attr );
result[ attr ] = value != null ? value : "";
} );
$.each( domEqual.attributes, function( index, attr ) {
var value = elem.attr( attr );
result[ attr ] = value != null ? value : "";
} );
result.style = getElementStyles( elem[ 0 ] );
result.events = $._data( elem[ 0 ], "events" );
result.data = $.extend( {}, elem.data() );
delete result.data[ $.expando ];
children = elem.children();
if ( children.length ) {
result.children = elem.children().map( function() {
return extract( $( this ) );
} ).get();
} else {
result.text = elem.text();
}
return result;
}
} );

52
jquery-ui/tests/lib/qunit.js vendored Normal file
View file

@ -0,0 +1,52 @@
define( [
"qunit",
"jquery",
"qunit-assert-classes",
"qunit-assert-close",
"lib/qunit-assert-domequal",
"phantom-bridge"
], function( QUnit, $ ) {
QUnit.config.autostart = false;
QUnit.config.requireExpects = true;
QUnit.config.urlConfig.push( {
id: "nojshint",
label: "Skip JSHint",
tooltip: "Skip running JSHint, e.g., within TestSwarm, where Jenkins runs it already"
} );
QUnit.config.urlConfig.push( {
id: "jquery",
label: "jQuery version",
value: [
"1.7.0", "1.7.1", "1.7.2",
"1.8.0", "1.8.1", "1.8.2", "1.8.3",
"1.9.0", "1.9.1",
"1.10.0", "1.10.1", "1.10.2",
"1.11.0", "1.11.1", "1.11.2", "1.11.3",
"1.12.0", "1.12.1", "1.12.2", "1.12.3", "1.12.4",
"2.0.0", "2.0.1", "2.0.2", "2.0.3",
"2.1.0", "2.1.1", "2.1.2", "2.1.3", "2.1.4",
"2.2.0", "2.2.1", "2.2.2", "2.2.3", "2.2.4",
"3.0.0",
"3.1.0",
"git", "custom"
],
tooltip: "Which jQuery Core version to test against"
} );
QUnit.reset = ( function( reset ) {
return function() {
// Ensure jQuery events and data on the fixture are properly removed
$( "#qunit-fixture" ).empty();
// Let QUnit reset the fixture
reset.apply( this, arguments );
};
} )( QUnit.reset );
return QUnit;
} );

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

@ -0,0 +1,131 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js" data-modules="core accordion"></script>
<script src="../../lib/bootstrap.js" data-widget="accordion"></script>
<style>
#list, #list1 *, #navigation, #navigation *, #collapsible, #collapsible * {
margin: 0;
padding: 0;
font-size: 12px;
line-height: 15px;
}
#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>

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="../../../external/qunit-composite/qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/qunit-composite/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>

32
jquery-ui/tests/unit/accordion/common.js vendored Normal file
View file

@ -0,0 +1,32 @@
define( [
"lib/common",
"ui/widgets/accordion"
], function( common ) {
common.testWidget( "accordion", {
defaults: {
active: 0,
animate: {},
classes: {
"ui-accordion-header": "ui-corner-top",
"ui-accordion-header-collapsed": "ui-corner-all",
"ui-accordion-content": "ui-corner-bottom"
},
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
}
} );
} );

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

@ -0,0 +1,209 @@
define( [
"qunit",
"jquery",
"./helper",
"ui/widgets/accordion"
], function( QUnit, $, testHelper ) {
var setupTeardown = testHelper.setupTeardown,
state = testHelper.state;
QUnit.module( "accordion: core", setupTeardown() );
$.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) {
QUnit.test( "markup structure: " + type, function( assert ) {
assert.expect( 10 );
var element = $( selector ).accordion(),
headers = element.find( ".ui-accordion-header" ),
content = headers.next();
assert.hasClasses( element, "ui-accordion ui-widget" );
assert.equal( headers.length, 3, ".ui-accordion-header elements exist, correct number" );
assert.hasClasses( headers[ 0 ],
"ui-accordion-header ui-accordion-header-active ui-accordion-icons" );
assert.hasClasses( headers[ 1 ],
"ui-accordion-header ui-accordion-header-collapsed ui-accordion-icons" );
assert.hasClasses( headers[ 2 ],
"ui-accordion-header ui-accordion-header-collapsed ui-accordion-icons" );
assert.equal( content.length, 3, ".ui-accordion-content elements exist, correct number" );
assert.hasClasses( content[ 0 ],
"ui-accordion-content ui-widget-content ui-accordion-content-active" );
assert.hasClasses( content[ 1 ], "ui-accordion-content ui-widget-content" );
assert.hasClasses( content[ 2 ], "ui-accordion-content ui-widget-content" );
assert.deepEqual( element.find( ".ui-accordion-header" ).next().get(),
element.find( ".ui-accordion-content" ).get(),
"content panels come immediately after headers" );
} );
} );
QUnit.test( "handle click on header-descendant", function( assert ) {
assert.expect( 1 );
var element = $( "#navigation" ).accordion();
$( "#navigation h2:eq(1) a" ).trigger( "click" );
state( assert, element, 0, 1, 0 );
} );
QUnit.test( "accessibility", function( assert ) {
assert.expect( 61 );
var element = $( "#list1" ).accordion( {
active: 1,
collapsible: true
} ),
headers = element.find( ".ui-accordion-header" );
assert.equal( element.attr( "role" ), "tablist", "element role" );
headers.each( function( i ) {
var header = headers.eq( i ),
panel = header.next();
assert.equal( header.attr( "role" ), "tab", "header " + i + " role" );
assert.equal( header.attr( "aria-controls" ), panel.attr( "id" ), "header " + i + " aria-controls" );
assert.equal( panel.attr( "role" ), "tabpanel", "panel " + i + " role" );
assert.equal( panel.attr( "aria-labelledby" ), header.attr( "id" ), "panel " + i + " aria-labelledby" );
} );
assert.equal( headers.eq( 1 ).attr( "tabindex" ), 0, "active header has tabindex=0" );
assert.equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab (1) has aria-selected=true" );
assert.equal( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab (1) has aria-expanded=true" );
assert.equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "false", "active tabpanel (1) has aria-hidden=false" );
assert.equal( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header (0) has tabindex=-1" );
assert.equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab (0) has aria-selected=false" );
assert.equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab (0) has aria-expanded=false" );
assert.equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (0) has aria-hidden=true" );
assert.equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
assert.equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
assert.equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
assert.equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
element.accordion( "option", "active", 0 );
assert.equal( headers.eq( 0 ).attr( "tabindex" ), 0, "active header (0) has tabindex=0" );
assert.equal( headers.eq( 0 ).attr( "aria-selected" ), "true", "active tab (0) has aria-selected=true" );
assert.equal( headers.eq( 0 ).attr( "aria-expanded" ), "true", "active tab (0) has aria-expanded=true" );
assert.equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "false", "active tabpanel (0) has aria-hidden=false" );
assert.equal( headers.eq( 1 ).attr( "tabindex" ), -1, "inactive header (1) has tabindex=-1" );
assert.equal( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab (1) has aria-selected=false" );
assert.equal( headers.eq( 1 ).attr( "aria-expanded" ), "false", "inactive tab (1) has aria-expanded=false" );
assert.equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (1) has aria-hidden=true" );
assert.equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
assert.equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
assert.equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
assert.equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
element.accordion( "option", "active", false );
assert.equal( headers.eq( 0 ).attr( "tabindex" ), 0, "previously active header (0) has tabindex=0" );
assert.equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab (0) has aria-selected=false" );
assert.equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab (0) has aria-expanded=false" );
assert.equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (0) has aria-hidden=true" );
assert.equal( headers.eq( 1 ).attr( "tabindex" ), -1, "inactive header (1) has tabindex=-1" );
assert.equal( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab (1) has aria-selected=false" );
assert.equal( headers.eq( 1 ).attr( "aria-expanded" ), "false", "inactive tab (1) has aria-expanded=false" );
assert.equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (1) has aria-hidden=true" );
assert.equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
assert.equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
assert.equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
assert.equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
element.accordion( "option", "active", 1 );
assert.equal( headers.eq( 1 ).attr( "tabindex" ), 0, "active header has tabindex=0" );
assert.equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab (1) has aria-selected=true" );
assert.equal( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab (1) has aria-expanded=true" );
assert.equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "false", "active tabpanel (1) has aria-hidden=false" );
assert.equal( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header (0) has tabindex=-1" );
assert.equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab (0) has aria-selected=false" );
assert.equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab (0) has aria-expanded=false" );
assert.equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (0) has aria-hidden=true" );
assert.equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
assert.equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
assert.equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
assert.equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
} );
QUnit.test( "keyboard support", function( assert ) {
var ready = assert.async();
assert.expect( 13 );
var element = $( "#list1" ).accordion(),
headers = element.find( ".ui-accordion-header" ),
anchor = headers.eq( 1 ).next().find( "a" ).eq( 0 ),
keyCode = $.ui.keyCode;
assert.equal( headers.filter( ".ui-state-focus" ).length, 0, "no headers focused on init" );
headers.eq( 0 ).simulate( "focus" );
setTimeout( step1 );
function step1() {
assert.hasClasses( headers.eq( 0 ), "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() {
assert.hasClasses( headers.eq( 1 ), "ui-state-focus", "DOWN moves focus to next header" );
headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.RIGHT } );
setTimeout( step3 );
}
function step3() {
assert.hasClasses( headers.eq( 2 ), "ui-state-focus", "RIGHT moves focus to next header" );
headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.DOWN } );
setTimeout( step4 );
}
function step4() {
assert.hasClasses( headers.eq( 0 ), "ui-state-focus", "DOWN wraps focus to first header" );
headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.UP } );
setTimeout( step5 );
}
function step5() {
assert.hasClasses( headers.eq( 2 ), "ui-state-focus", "UP wraps focus to last header" );
headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.LEFT } );
setTimeout( step6 );
}
function step6() {
assert.hasClasses( headers.eq( 1 ),
"ui-state-focus", "LEFT moves focus to previous header" );
headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.HOME } );
setTimeout( step7 );
}
function step7() {
assert.hasClasses( headers.eq( 0 ), "ui-state-focus", "HOME moves focus to first header" );
headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.END } );
setTimeout( step8 );
}
function step8() {
assert.hasClasses( headers.eq( 2 ), "ui-state-focus", "END moves focus to last header" );
headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.ENTER } );
setTimeout( step9 );
}
function step9() {
assert.equal( element.accordion( "option", "active" ), 2, "ENTER activates panel" );
headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.SPACE } );
setTimeout( step10 );
}
function step10() {
assert.equal( element.accordion( "option", "active" ), 1, "SPACE activates panel" );
anchor.simulate( "focus" );
setTimeout( step11 );
}
function step11() {
assert.lacksClasses( headers.eq( 1 ), "ui-state-focus",
"header loses focus when focusing inside the panel" );
anchor.simulate( "keydown", { keyCode: keyCode.UP, ctrlKey: true } );
setTimeout( step12 );
}
function step12() {
assert.hasClasses( headers.eq( 1 ), "ui-state-focus", "CTRL+UP moves focus to header" );
ready();
}
} );
} );

169
jquery-ui/tests/unit/accordion/events.js vendored Normal file
View file

@ -0,0 +1,169 @@
define( [
"qunit",
"jquery",
"./helper",
"ui/widgets/accordion"
], function( QUnit, $, testHelper ) {
var setupTeardown = testHelper.setupTeardown,
state = testHelper.state;
QUnit.module( "accordion: events", setupTeardown() );
QUnit.test( "create", function( assert ) {
assert.expect( 10 );
var element = $( "#list1" ),
headers = element.children( "h3" ),
contents = headers.next();
element.accordion( {
create: function( event, ui ) {
assert.equal( ui.header.length, 1, "header length" );
assert.strictEqual( ui.header[ 0 ], headers[ 0 ], "header" );
assert.equal( ui.panel.length, 1, "panel length" );
assert.strictEqual( ui.panel[ 0 ], contents[ 0 ], "panel" );
}
} );
element.accordion( "destroy" );
element.accordion( {
active: 2,
create: function( event, ui ) {
assert.equal( ui.header.length, 1, "header length" );
assert.strictEqual( ui.header[ 0 ], headers[ 2 ], "header" );
assert.equal( ui.panel.length, 1, "panel length" );
assert.strictEqual( ui.panel[ 0 ], contents[ 2 ], "panel" );
}
} );
element.accordion( "destroy" );
element.accordion( {
active: false,
collapsible: true,
create: function( event, ui ) {
assert.equal( ui.header.length, 0, "header length" );
assert.equal( ui.panel.length, 0, "panel length" );
}
} );
element.accordion( "destroy" );
} );
QUnit.test( "beforeActivate", function( assert ) {
assert.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 ) {
assert.ok( !( "originalEvent" in event ) );
assert.equal( ui.oldHeader.length, 0 );
assert.equal( ui.oldPanel.length, 0 );
assert.equal( ui.newHeader.length, 1 );
assert.strictEqual( ui.newHeader[ 0 ], headers[ 0 ] );
assert.equal( ui.newPanel.length, 1 );
assert.strictEqual( ui.newPanel[ 0 ], content[ 0 ] );
state( assert, element, 0, 0, 0 );
} );
element.accordion( "option", "active", 0 );
state( assert, element, 1, 0, 0 );
element.one( "accordionbeforeactivate", function( event, ui ) {
assert.equal( event.originalEvent.type, "click" );
assert.equal( ui.oldHeader.length, 1 );
assert.strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] );
assert.equal( ui.oldPanel.length, 1 );
assert.strictEqual( ui.oldPanel[ 0 ], content[ 0 ] );
assert.equal( ui.newHeader.length, 1 );
assert.strictEqual( ui.newHeader[ 0 ], headers[ 1 ] );
assert.equal( ui.newPanel.length, 1 );
assert.strictEqual( ui.newPanel[ 0 ], content[ 1 ] );
state( assert, element, 1, 0, 0 );
} );
headers.eq( 1 ).trigger( "click" );
state( assert, element, 0, 1, 0 );
element.one( "accordionbeforeactivate", function( event, ui ) {
assert.ok( !( "originalEvent" in event ) );
assert.equal( ui.oldHeader.length, 1 );
assert.strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] );
assert.equal( ui.oldPanel.length, 1 );
assert.strictEqual( ui.oldPanel[ 0 ], content[ 1 ] );
assert.equal( ui.newHeader.length, 0 );
assert.equal( ui.newPanel.length, 0 );
state( assert, element, 0, 1, 0 );
} );
element.accordion( "option", "active", false );
state( assert, element, 0, 0, 0 );
element.one( "accordionbeforeactivate", function( event, ui ) {
assert.ok( !( "originalEvent" in event ) );
assert.equal( ui.oldHeader.length, 0 );
assert.equal( ui.oldPanel.length, 0 );
assert.equal( ui.newHeader.length, 1 );
assert.strictEqual( ui.newHeader[ 0 ], headers[ 2 ] );
assert.equal( ui.newPanel.length, 1 );
assert.strictEqual( ui.newPanel[ 0 ], content[ 2 ] );
event.preventDefault();
state( assert, element, 0, 0, 0 );
} );
element.accordion( "option", "active", 2 );
state( assert, element, 0, 0, 0 );
} );
QUnit.test( "activate", function( assert ) {
assert.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 ) {
assert.equal( ui.oldHeader.length, 0 );
assert.equal( ui.oldPanel.length, 0 );
assert.equal( ui.newHeader.length, 1 );
assert.strictEqual( ui.newHeader[ 0 ], headers[ 0 ] );
assert.equal( ui.newPanel.length, 1 );
assert.strictEqual( ui.newPanel[ 0 ], content[ 0 ] );
} );
element.accordion( "option", "active", 0 );
element.one( "accordionactivate", function( event, ui ) {
assert.equal( ui.oldHeader.length, 1 );
assert.strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] );
assert.equal( ui.oldPanel.length, 1 );
assert.strictEqual( ui.oldPanel[ 0 ], content[ 0 ] );
assert.equal( ui.newHeader.length, 1 );
assert.strictEqual( ui.newHeader[ 0 ], headers[ 1 ] );
assert.equal( ui.newPanel.length, 1 );
assert.strictEqual( ui.newPanel[ 0 ], content[ 1 ] );
} );
headers.eq( 1 ).trigger( "click" );
element.one( "accordionactivate", function( event, ui ) {
assert.equal( ui.oldHeader.length, 1 );
assert.strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] );
assert.equal( ui.oldPanel.length, 1 );
assert.strictEqual( ui.oldPanel[ 0 ], content[ 1 ] );
assert.equal( ui.newHeader.length, 0 );
assert.equal( ui.newPanel.length, 0 );
} );
element.accordion( "option", "active", false );
// Prevent activation
element.one( "accordionbeforeactivate", function( event ) {
assert.ok( true );
event.preventDefault();
} );
element.one( "accordionactivate", function() {
assert.ok( false );
} );
element.accordion( "option", "active", 1 );
} );
} );

36
jquery-ui/tests/unit/accordion/helper.js vendored Normal file
View file

@ -0,0 +1,36 @@
define( [
"qunit",
"jquery",
"lib/helper",
"ui/widgets/accordion"
], function( QUnit, $, helper ) {
return $.extend( helper, {
equalHeight: function( assert, accordion, height ) {
accordion.find( ".ui-accordion-content" ).each( function() {
assert.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( assert, accordion ) {
var expected = $.makeArray( arguments ).slice( 2 ),
actual = accordion.find( ".ui-accordion-content" ).map( function() {
return $( this ).css( "display" ) === "none" ? 0 : 1;
} ).get();
assert.deepEqual( actual, expected );
}
} );
} );

138
jquery-ui/tests/unit/accordion/methods.js vendored Normal file
View file

@ -0,0 +1,138 @@
define( [
"qunit",
"jquery",
"./helper",
"ui/widgets/accordion"
], function( QUnit, $, testHelper ) {
var equalHeight = testHelper.equalHeight,
setupTeardown = testHelper.setupTeardown,
state = testHelper.state;
QUnit.module( "accordion: methods", setupTeardown() );
QUnit.test( "destroy", function( assert ) {
assert.expect( 1 );
assert.domEqual( "#list1", function() {
$( "#list1" ).accordion().accordion( "destroy" );
} );
} );
QUnit.test( "enable/disable", function( assert ) {
assert.expect( 7 );
var element = $( "#list1" ).accordion();
state( assert, element, 1, 0, 0 );
element.accordion( "disable" );
assert.hasClasses( element, "ui-state-disabled" );
assert.equal( element.attr( "aria-disabled" ), "true", "element gets aria-disabled" );
assert.hasClasses( element, "ui-accordion-disabled" );
// Event does nothing
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "click" );
state( assert, element, 1, 0, 0 );
// Option still works
element.accordion( "option", "active", 1 );
state( assert, element, 0, 1, 0 );
element.accordion( "enable" );
element.accordion( "option", "active", 2 );
state( assert, element, 0, 0, 1 );
} );
QUnit.test( "refresh", function( assert ) {
assert.expect( 19 );
var element = $( "#navigation" )
.parent()
.height( 300 )
.end()
.accordion( {
heightStyle: "fill"
} );
equalHeight( assert, element, 255 );
element.parent().height( 500 );
element.accordion( "refresh" );
equalHeight( assert, element, 455 );
element = $( "#list1" );
element.accordion();
state( assert, element, 1, 0, 0 );
// Disable panel via markup
element.find( "h3.bar" ).eq( 1 ).addClass( "ui-state-disabled" );
element.accordion( "refresh" );
state( assert, element, 1, 0, 0 );
// Don't add multiple icons
element.accordion( "refresh" );
assert.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( assert, element, 1, 0, 0, 0 );
// Remove all tabs
element.find( "h3.bar, div.foo" ).remove();
element.accordion( "refresh" );
state( assert, element );
assert.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( assert, element, 1, 0, 0, 0 );
// Activate third tab
element.accordion( "option", "active", 2 );
state( assert, 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( assert, 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( assert, 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( assert, element, 1 );
// Collapse all panels
element.accordion( "option", {
collapsible: true,
active: false
} );
state( assert, element, 0 );
element.accordion( "refresh" );
state( assert, element, 0 );
} );
QUnit.test( "widget", function( assert ) {
assert.expect( 2 );
var element = $( "#list1" ).accordion(),
widgetElement = element.accordion( "widget" );
assert.equal( widgetElement.length, 1, "one element" );
assert.strictEqual( widgetElement[ 0 ], element[ 0 ], "same element" );
} );
} );

498
jquery-ui/tests/unit/accordion/options.js vendored Normal file
View file

@ -0,0 +1,498 @@
define( [
"qunit",
"jquery",
"./helper",
"ui/widgets/accordion"
], function( QUnit, $, testHelper ) {
var equalHeight = testHelper.equalHeight,
setupTeardown = testHelper.setupTeardown,
state = testHelper.state;
QUnit.module( "accordion: options", setupTeardown() );
QUnit.test( "{ active: default }", function( assert ) {
assert.expect( 2 );
var element = $( "#list1" ).accordion();
assert.equal( element.accordion( "option", "active" ), 0 );
state( assert, element, 1, 0, 0 );
} );
QUnit.test( "{ active: null }", function( assert ) {
assert.expect( 2 );
var element = $( "#list1" ).accordion( {
active: null
} );
assert.equal( element.accordion( "option", "active" ), 0 );
state( assert, element, 1, 0, 0 );
} );
QUnit.test( "{ active: false }", function( assert ) {
assert.expect( 7 );
var element = $( "#list1" ).accordion( {
active: false,
collapsible: true
} );
state( assert, element, 0, 0, 0 );
assert.equal( element.find( ".ui-accordion-header.ui-state-active" ).length, 0, "no headers selected" );
assert.equal( element.accordion( "option", "active" ), false );
element.accordion( "option", "collapsible", false );
state( assert, element, 1, 0, 0 );
assert.equal( element.accordion( "option", "active" ), 0 );
element.accordion( "destroy" );
element.accordion( {
active: false
} );
state( assert, element, 1, 0, 0 );
assert.strictEqual( element.accordion( "option", "active" ), 0 );
} );
// http://bugs.jqueryui.com/ticket/11938
QUnit.test( "{ active: false, collapsible: true }", function( assert ) {
assert.expect( 1 );
var element = $( "#collapsible" ).accordion(),
height = element.outerHeight();
element
.accordion( "destroy" )
.accordion( {
active: false,
collapsible: true
} )
.accordion( "option", "active", 0 );
assert.equal( element.outerHeight(), height );
} );
QUnit.test( "{ active: Number }", function( assert ) {
assert.expect( 8 );
var element = $( "#list1" ).accordion( {
active: 2
} );
assert.equal( element.accordion( "option", "active" ), 2 );
state( assert, element, 0, 0, 1 );
element.accordion( "option", "active", 0 );
assert.equal( element.accordion( "option", "active" ), 0 );
state( assert, element, 1, 0, 0 );
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "click" );
assert.equal( element.accordion( "option", "active" ), 1 );
state( assert, element, 0, 1, 0 );
element.accordion( "option", "active", 10 );
assert.equal( element.accordion( "option", "active" ), 1 );
state( assert, element, 0, 1, 0 );
} );
QUnit.test( "{ active: -Number }", function( assert ) {
assert.expect( 8 );
var element = $( "#list1" ).accordion( {
active: -1
} );
assert.equal( element.accordion( "option", "active" ), 2 );
state( assert, element, 0, 0, 1 );
element.accordion( "option", "active", -2 );
assert.equal( element.accordion( "option", "active" ), 1 );
state( assert, element, 0, 1, 0 );
element.accordion( "option", "active", -10 );
assert.equal( element.accordion( "option", "active" ), 1 );
state( assert, element, 0, 1, 0 );
element.accordion( "option", "active", -3 );
assert.equal( element.accordion( "option", "active" ), 0 );
state( assert, element, 1, 0, 0 );
} );
QUnit.test( "{ animate: false }", function( assert ) {
assert.expect( 3 );
var element = $( "#list1" ).accordion( {
animate: false
} ),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
$.fn.animate = function() {
assert.ok( false, ".animate() called" );
};
assert.ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 1 );
assert.ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
assert.ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
} );
QUnit.test( "{ animate: Number }", function( assert ) {
var ready = assert.async();
assert.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 ) {
assert.equal( options.duration, 100, "correct duration" );
assert.equal( options.easing, undefined, "default easing" );
animate.apply( this, arguments );
};
assert.ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 1 );
panels.promise().done( function() {
assert.ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
assert.ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
ready();
} );
} );
QUnit.test( "{ animate: String }", function( assert ) {
var ready = assert.async();
assert.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 ) {
assert.equal( options.duration, undefined, "default duration" );
assert.equal( options.easing, "linear", "correct easing" );
animate.apply( this, arguments );
};
assert.ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 1 );
panels.promise().done( function() {
assert.ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
assert.ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
ready();
} );
} );
QUnit.test( "{ animate: {} }", function( assert ) {
var ready = assert.async();
assert.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 ) {
assert.equal( options.duration, undefined, "default duration" );
assert.equal( options.easing, undefined, "default easing" );
animate.apply( this, arguments );
};
assert.ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 1 );
panels.promise().done( function() {
assert.ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
assert.ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
ready();
} );
} );
QUnit.test( "{ animate: { duration, easing } }", function( assert ) {
var ready = assert.async();
assert.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 ) {
assert.equal( options.duration, 100, "correct duration" );
assert.equal( options.easing, "linear", "correct easing" );
animate.apply( this, arguments );
};
assert.ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 1 );
panels.promise().done( function() {
assert.ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
assert.ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
ready();
} );
} );
QUnit.test( "{ animate: { duration, easing } }, animate down", function( assert ) {
var ready = assert.async();
assert.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 ) {
assert.equal( options.duration, 100, "correct duration" );
assert.equal( options.easing, "linear", "correct easing" );
animate.apply( this, arguments );
};
assert.ok( panels.eq( 1 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 0 );
panels.promise().done( function() {
assert.ok( panels.eq( 1 ).is( ":hidden" ), "first panel hidden" );
assert.ok( panels.eq( 0 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
ready();
} );
} );
QUnit.test( "{ animate: { duration, easing, down } }, animate down", function( assert ) {
var ready = assert.async();
assert.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 ) {
assert.equal( options.duration, 100, "correct duration" );
assert.equal( options.easing, "swing", "correct easing" );
animate.apply( this, arguments );
};
assert.ok( panels.eq( 1 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 0 );
panels.promise().done( function() {
assert.ok( panels.eq( 1 ).is( ":hidden" ), "first panel hidden" );
assert.ok( panels.eq( 0 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
ready();
} );
} );
QUnit.test( "{ collapsible: false }", function( assert ) {
assert.expect( 4 );
var element = $( "#list1" ).accordion( {
active: 1
} );
element.accordion( "option", "active", false );
assert.equal( element.accordion( "option", "active" ), 1 );
state( assert, element, 0, 1, 0 );
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "click" );
assert.equal( element.accordion( "option", "active" ), 1 );
state( assert, element, 0, 1, 0 );
} );
QUnit.test( "{ collapsible: true }", function( assert ) {
assert.expect( 6 );
var element = $( "#list1" ).accordion( {
active: 1,
collapsible: true
} );
element.accordion( "option", "active", false );
assert.equal( element.accordion( "option", "active" ), false );
state( assert, element, 0, 0, 0 );
element.accordion( "option", "active", 1 );
assert.equal( element.accordion( "option", "active" ), 1 );
state( assert, element, 0, 1, 0 );
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "click" );
assert.equal( element.accordion( "option", "active" ), false );
state( assert, element, 0, 0, 0 );
} );
QUnit.test( "{ event: null }", function( assert ) {
assert.expect( 5 );
var element = $( "#list1" ).accordion( {
event: null
} );
state( assert, element, 1, 0, 0 );
element.accordion( "option", "active", 1 );
assert.equal( element.accordion( "option", "active" ), 1 );
state( assert, element, 0, 1, 0 );
// Ensure default click handler isn't bound
element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "click" );
assert.equal( element.accordion( "option", "active" ), 1 );
state( assert, element, 0, 1, 0 );
} );
QUnit.test( "{ event: custom }", function( assert ) {
assert.expect( 11 );
var element = $( "#list1" ).accordion( {
event: "custom1 custom2"
} );
state( assert, element, 1, 0, 0 );
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" );
assert.equal( element.accordion( "option", "active" ), 1 );
state( assert, element, 0, 1, 0 );
// Ensure default click handler isn't bound
element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "click" );
assert.equal( element.accordion( "option", "active" ), 1 );
state( assert, element, 0, 1, 0 );
element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "custom2" );
assert.equal( element.accordion( "option", "active" ), 2 );
state( assert, 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" );
assert.equal( element.accordion( "option", "active" ), 2 );
state( assert, element, 0, 0, 1 );
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom3" );
assert.equal( element.accordion( "option", "active" ), 1 );
state( assert, element, 0, 1, 0 );
} );
QUnit.test( "{ header: default }", function( assert ) {
assert.expect( 2 );
// Default: > li > :first-child,> :not(li):even
// > :not(li):even
state( assert, $( "#list1" ).accordion(), 1, 0, 0 );
// > li > :first-child
state( assert, $( "#navigation" ).accordion(), 1, 0, 0 );
} );
QUnit.test( "{ header: custom }", function( assert ) {
assert.expect( 6 );
var element = $( "#navigationWrapper" ).accordion( {
header: "h2"
} );
element.find( "h2" ).each( function() {
assert.hasClasses( this, "ui-accordion-header" );
} );
assert.equal( element.find( ".ui-accordion-header" ).length, 3 );
state( assert, element, 1, 0, 0 );
element.accordion( "option", "active", 2 );
state( assert, element, 0, 0, 1 );
} );
QUnit.test( "{ heightStyle: 'auto' }", function( assert ) {
assert.expect( 3 );
var element = $( "#navigation" ).accordion( { heightStyle: "auto" } );
equalHeight( assert, element, 105 );
} );
QUnit.test( "{ heightStyle: 'content' }", function( assert ) {
assert.expect( 3 );
var element = $( "#navigation" ).accordion( { heightStyle: "content" } ),
sizes = element.find( ".ui-accordion-content" ).map( function() {
return $( this ).height();
} ).get();
assert.equal( sizes[ 0 ], 75 );
assert.equal( sizes[ 1 ], 105 );
assert.equal( sizes[ 2 ], 45 );
} );
QUnit.test( "{ heightStyle: 'fill' }", function( assert ) {
assert.expect( 3 );
$( "#navigationWrapper" ).height( 500 );
var element = $( "#navigation" ).accordion( { heightStyle: "fill" } );
equalHeight( assert, element, 455 );
} );
QUnit.test( "{ heightStyle: 'fill' } with sibling", function( assert ) {
assert.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( assert, element, 355 );
} );
QUnit.test( "{ heightStyle: 'fill' } with multiple siblings", function( assert ) {
assert.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( assert, element, 305 );
} );
QUnit.test( "{ icons: false }", function( assert ) {
assert.expect( 8 );
var element = $( "#list1" );
function icons( on ) {
assert.deepEqual( element.find( "span.ui-icon" ).length, on ? 3 : 0 );
assert.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 );
} );
QUnit.test( "{ icons: hash }", function( assert ) {
assert.expect( 3 );
var element = $( "#list1" ).accordion( {
icons: { activeHeader: "a1", header: "h1" }
} );
assert.hasClasses( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ), "a1" );
element.accordion( "option", "icons", { activeHeader: "a2", header: "h2" } );
assert.lacksClasses( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ), "a1" );
assert.hasClasses( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ), "a2" );
} );
} );

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

@ -0,0 +1,69 @@
<!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="../../external/qunit-composite/qunit-composite.css">
<script src="../../external/qunit/qunit.js"></script>
<script src="../../external/qunit-composite/qunit-composite.js"></script>
<script>
(function() {
var params = [],
suites = [
"accordion/accordion.html",
"autocomplete/autocomplete.html",
"button/button.html",
"checkboxradio/checkboxradio.html",
"controlgroup/controlgroup.html",
"core/core.html",
"datepicker/datepicker.html",
"dialog/dialog.html",
"draggable/draggable.html",
"droppable/droppable.html",
"effects/effects.html",
"form-reset-mixin/form-reset-mixin.html",
"menu/menu.html",
"position/position.html",
"progressbar/progressbar.html",
"resizable/resizable.html",
"selectable/selectable.html",
"selectmenu/selectmenu.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="../../../external/qunit-composite/qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/qunit-composite/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>

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

@ -0,0 +1,23 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js" data-modules="core menu autocomplete"></script>
<script src="../../lib/bootstrap.js" data-widget="autocomplete"></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>

37
jquery-ui/tests/unit/autocomplete/common.js vendored Normal file
View file

@ -0,0 +1,37 @@
define( [
"lib/common",
"ui/widgets/autocomplete"
], function( common ) {
common.testWidget( "autocomplete", {
defaults: {
appendTo: null,
autoFocus: false,
classes: {},
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
}
} );
} );

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

@ -0,0 +1,432 @@
define( [
"qunit",
"jquery",
"ui/widgets/autocomplete"
], function( QUnit, $ ) {
QUnit.module( "autocomplete: core" );
QUnit.test( "markup structure", function( assert ) {
assert.expect( 2 );
var element = $( "#autocomplete" ).autocomplete(),
menu = element.autocomplete( "widget" );
assert.hasClasses( element, "ui-autocomplete-input" );
assert.hasClasses( menu, "ui-autocomplete ui-widget ui-widget-content" );
} );
QUnit.test( "prevent form submit on enter when menu is active", function( assert ) {
assert.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 );
assert.equal( menu.find( ".ui-menu-item-wrapper.ui-state-active" ).length, 1,
"menu item is active" );
event = $.Event( "keydown" );
event.keyCode = $.ui.keyCode.ENTER;
element.trigger( event );
assert.ok( event.isDefaultPrevented(), "default action is prevented" );
} );
QUnit.test( "allow form submit on enter when menu is not active", function( assert ) {
assert.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 );
assert.ok( !event.isDefaultPrevented(), "default action is prevented" );
} );
( function() {
QUnit.test( "up arrow invokes search - input", function( assert ) {
arrowsInvokeSearch( assert, "#autocomplete", true, true );
} );
QUnit.test( "down arrow invokes search - input", function( assert ) {
arrowsInvokeSearch( assert, "#autocomplete", false, true );
} );
QUnit.test( "up arrow invokes search - textarea", function( assert ) {
arrowsInvokeSearch( assert, "#autocomplete-textarea", true, false );
} );
QUnit.test( "down arrow invokes search - textarea", function( assert ) {
arrowsInvokeSearch( assert, "#autocomplete-textarea", false, false );
} );
QUnit.test( "up arrow invokes search - contenteditable", function( assert ) {
arrowsInvokeSearch( assert, "#autocomplete-contenteditable", true, false );
} );
QUnit.test( "down arrow invokes search - contenteditable", function( assert ) {
arrowsInvokeSearch( assert, "#autocomplete-contenteditable", false, false );
} );
QUnit.test( "up arrow moves focus - input", function( assert ) {
arrowsMoveFocus( assert, "#autocomplete", true );
} );
QUnit.test( "down arrow moves focus - input", function( assert ) {
arrowsMoveFocus( assert, "#autocomplete", false );
} );
QUnit.test( "up arrow moves focus - textarea", function( assert ) {
arrowsMoveFocus( assert, "#autocomplete-textarea", true );
} );
QUnit.test( "down arrow moves focus - textarea", function( assert ) {
arrowsMoveFocus( assert, "#autocomplete-textarea", false );
} );
QUnit.test( "up arrow moves focus - contenteditable", function( assert ) {
arrowsMoveFocus( assert, "#autocomplete-contenteditable", true );
} );
QUnit.test( "down arrow moves focus - contenteditable", function( assert ) {
arrowsMoveFocus( assert, "#autocomplete-contenteditable", false );
} );
QUnit.test( "up arrow moves cursor - input", function( assert ) {
arrowsNavigateElement( assert, "#autocomplete", true, false );
} );
QUnit.test( "down arrow moves cursor - input", function( assert ) {
arrowsNavigateElement( assert, "#autocomplete", false, false );
} );
QUnit.test( "up arrow moves cursor - textarea", function( assert ) {
arrowsNavigateElement( assert, "#autocomplete-textarea", true, true );
} );
QUnit.test( "down arrow moves cursor - textarea", function( assert ) {
arrowsNavigateElement( assert, "#autocomplete-textarea", false, true );
} );
QUnit.test( "up arrow moves cursor - contenteditable", function( assert ) {
arrowsNavigateElement( assert, "#autocomplete-contenteditable", true, true );
} );
QUnit.test( "down arrow moves cursor - contenteditable", function( assert ) {
arrowsNavigateElement( assert, "#autocomplete-contenteditable", false, true );
} );
function arrowsInvokeSearch( assert, id, isKeyUp, shouldMove ) {
assert.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 ) } );
assert.equal( didMove, shouldMove, "respond to arrow" );
}
function arrowsMoveFocus( assert, id, isKeyUp ) {
assert.expect( 1 );
var element = $( id ).autocomplete( {
source: [ "a" ],
delay: 0,
minLength: 0
} );
element.autocomplete( "instance" )._move = function() {
assert.ok( true, "repsond to arrow" );
};
element.autocomplete( "search" );
element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } );
}
function arrowsNavigateElement( assert, id, isKeyUp, shouldMove ) {
assert.expect( 1 );
var didMove = false,
element = $( id ).autocomplete( {
source: [ "a" ],
delay: 0,
minLength: 0
} );
element.on( "keypress", function( e ) {
didMove = !e.isDefaultPrevented();
} );
element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } );
element.simulate( "keypress" );
assert.equal( didMove, shouldMove, "respond to arrow" );
}
} )();
QUnit.test( "past end of menu in multiline autocomplete", function( assert ) {
var ready = assert.async();
assert.expect( 2 );
var customVal = "custom value",
element = $( "#autocomplete-contenteditable" ).autocomplete( {
delay: 0,
source: [ "javascript" ],
focus: function( event, ui ) {
assert.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 } );
assert.equal( element.text(), customVal );
ready();
} );
} );
QUnit.test( "ESCAPE in multiline autocomplete", function( assert ) {
var ready = assert.async();
assert.expect( 2 );
var customVal = "custom value",
element = $( "#autocomplete-contenteditable" ).autocomplete( {
delay: 0,
source: [ "javascript" ],
focus: function( event, ui ) {
assert.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 } );
assert.equal( element.text(), customVal );
ready();
} );
} );
QUnit.test( "handle race condition", function( assert ) {
var ready = assert.async();
assert.expect( 3 );
var count = 0,
element = $( "#autocomplete" ).autocomplete( {
source: function( request, response ) {
count++;
if ( request.term.length === 1 ) {
assert.equal( count, 1, "request with 1 character is first" );
setTimeout( function() {
response( [ "one" ] );
setTimeout( checkResults );
} );
return;
}
assert.equal( count, 2, "request with 2 characters is second" );
response( [ "two" ] );
}
} );
element.autocomplete( "search", "a" );
element.autocomplete( "search", "ab" );
function checkResults() {
assert.equal( element.autocomplete( "widget" ).find( ".ui-menu-item" ).text(), "two",
"correct results displayed" );
ready();
}
} );
QUnit.test( "simultaneous searches (#9334)", function( assert ) {
var ready = assert.async();
assert.expect( 2 );
var element = $( "#autocomplete" ).autocomplete( {
source: function( request, response ) {
setTimeout( function() {
response( [ request.term ] );
} );
},
response: function() {
assert.ok( true, "response from first instance" );
}
} ),
element2 = $( "#autocomplete-textarea" ).autocomplete( {
source: function( request, response ) {
setTimeout( function() {
response( [ request.term ] );
} );
},
response: function() {
assert.ok( true, "response from second instance" );
ready();
}
} );
element.autocomplete( "search", "test" );
element2.autocomplete( "search", "test" );
} );
QUnit.test( "ARIA", function( assert ) {
assert.expect( 13 );
var element = $( "#autocomplete" ).autocomplete( {
source: [ "java", "javascript" ]
} ),
liveRegion = element.autocomplete( "instance" ).liveRegion;
assert.equal( liveRegion.children().length, 0, "Empty live region on create" );
assert.equal( liveRegion.attr( "aria-live" ), "assertive",
"Live region's aria-live attribute must be assertive" );
assert.equal( liveRegion.attr( "aria-relevant" ), "additions",
"Live region's aria-relevant attribute must be additions" );
assert.equal( liveRegion.attr( "role" ), "status",
"Live region's role attribute must be status" );
element.autocomplete( "search", "j" );
assert.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 } );
assert.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 } );
assert.equal( liveRegion.children().filter( ":visible" ).text(), "javascript",
"Live region updated when default focus is prevented" );
element.autocomplete( "search", "javas" );
assert.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" );
assert.equal( liveRegion.children().filter( ":visible" ).text(), "No search results.",
"Live region for no values" );
assert.equal( liveRegion.children().length, 5,
"Should be five children in the live region after the above" );
assert.equal( liveRegion.children().filter( ":visible" ).length, 1,
"Only one should be still visible" );
assert.ok( liveRegion.children().filter( ":visible" )[ 0 ] === liveRegion.children().last()[ 0 ],
"The last one should be the visible one" );
element.autocomplete( "destroy" );
assert.equal( liveRegion.parent().length, 0,
"The liveRegion should be detached after destroy" );
} );
QUnit.test( "ARIA, aria-label announcement", function( assert ) {
assert.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 } );
assert.equal( liveRegion.children().filter( ":visible" ).text(), "People : anders andersson",
"Live region changed on keydown to announce the highlighted value's aria-label attribute" );
} );
QUnit.test( "ARIA, init on detached input", function( assert ) {
assert.expect( 1 );
var element = $( "<input>" ).autocomplete( {
source: [ "java", "javascript" ]
} ),
liveRegion = element.autocomplete( "instance" ).liveRegion;
assert.equal( liveRegion.parent().length, 1, "liveRegion must have a parent" );
} );
QUnit.test( ".replaceWith() (#9172)", function( assert ) {
assert.expect( 1 );
var element = $( "#autocomplete" ).autocomplete(),
replacement = "<div>test</div>",
parent = element.parent();
element.replaceWith( replacement );
assert.equal( parent.html().toLowerCase(), replacement );
} );
QUnit.test( "Search if the user retypes the same value (#7434)", function( assert ) {
var ready = assert.async();
assert.expect( 3 );
var element = $( "#autocomplete" ).autocomplete( {
source: [ "java", "javascript" ],
delay: 0
} ),
menu = element.autocomplete( "instance" ).menu.element;
element.val( "j" ).simulate( "keydown" );
setTimeout( function() {
assert.ok( menu.is( ":visible" ), "menu displays initially" );
element.trigger( "blur" );
assert.ok( !menu.is( ":visible" ), "menu hidden after blur" );
element.val( "j" ).simulate( "keydown" );
setTimeout( function() {
assert.ok( menu.is( ":visible" ), "menu displays after typing the same value" );
ready();
} );
} );
} );
QUnit.test( "Close on click outside when focus remains", function( assert ) {
var ready = assert.async();
assert.expect( 2 );
var element = $( "#autocomplete" ).autocomplete( {
source: [ "java", "javascript" ],
delay: 0
} );
var menu = element.autocomplete( "widget" );
$( "body" ).on( "mousedown", function( event ) {
event.preventDefault();
} );
element.val( "j" ).autocomplete( "search", "j" );
setTimeout( function() {
assert.ok( menu.is( ":visible" ), "menu displays initially" );
$( "body" ).simulate( "mousedown" );
setTimeout( function() {
assert.ok( menu.is( ":hidden" ), "menu closes after clicking elsewhere" );
ready();
} );
} );
} );
} );

193
jquery-ui/tests/unit/autocomplete/events.js vendored Normal file
View file

@ -0,0 +1,193 @@
define( [
"qunit",
"jquery",
"ui/widgets/autocomplete"
], function( QUnit, $ ) {
QUnit.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 ) {
QUnit.test( "all events - " + settings.type, function( assert ) {
var ready = assert.async();
assert.expect( 13 );
var element = $( settings.selector )
.autocomplete( {
autoFocus: false,
delay: 0,
source: data,
search: function( event ) {
assert.equal( event.originalEvent.type, "keydown", "search originalEvent" );
},
response: function( event, ui ) {
assert.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() {
assert.ok( menu.is( ":visible" ), "menu open on open" );
},
focus: function( event, ui ) {
assert.equal( event.originalEvent.type, "menufocus", "focus originalEvent" );
assert.deepEqual( ui.item, { label: "Java", value: "Java" }, "focus ui.item" );
},
close: function( event ) {
assert.equal( event.originalEvent.type, "menuselect", "close originalEvent" );
assert.ok( menu.is( ":hidden" ), "menu closed on close" );
},
select: function( event, ui ) {
assert.equal( event.originalEvent.type, "menuselect", "select originalEvent" );
assert.deepEqual( ui.item, { label: "Java", value: "Java" }, "select ui.item" );
},
change: function( event, ui ) {
assert.equal( event.originalEvent.type, "blur", "change originalEvent" );
assert.deepEqual( ui.item, { label: "Java", value: "Java" }, "change ui.item" );
assert.ok( menu.is( ":hidden" ), "menu closed on change" );
ready();
}
} ),
menu = element.autocomplete( "widget" );
element.simulate( "focus" )[ settings.valueMethod ]( "j" ).trigger( "keydown" );
setTimeout( function() {
assert.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" );
} );
} );
} );
} );
QUnit.test( "change without selection", function( assert ) {
var ready = assert.async();
assert.expect( 1 );
var element = $( "#autocomplete" ).autocomplete( {
delay: 0,
source: data,
change: function( event, ui ) {
assert.strictEqual( ui.item, null );
ready();
}
} );
element.triggerHandler( "focus" );
element.val( "ja" ).triggerHandler( "blur" );
} );
QUnit.test( "cancel search", function( assert ) {
var ready = assert.async();
assert.expect( 6 );
var first = true,
element = $( "#autocomplete" ).autocomplete( {
delay: 0,
source: data,
search: function() {
if ( first ) {
assert.equal( element.val(), "ja", "val on first search" );
first = false;
return false;
}
assert.equal( element.val(), "java", "val on second search" );
},
open: function() {
assert.ok( true, "menu opened" );
}
} ),
menu = element.autocomplete( "widget" );
element.val( "ja" ).trigger( "keydown" );
setTimeout( function() {
assert.ok( menu.is( ":hidden" ), "menu is hidden after first search" );
element.val( "java" ).trigger( "keydown" );
setTimeout( function() {
assert.ok( menu.is( ":visible" ), "menu is visible after second search" );
assert.equal( menu.find( ".ui-menu-item" ).length, 2, "# of menu items" );
ready();
} );
} );
} );
QUnit.test( "cancel focus", function( assert ) {
var ready = assert.async();
assert.expect( 1 );
var customVal = "custom value",
element = $( "#autocomplete" ).autocomplete( {
delay: 0,
source: data,
focus: function() {
$( this ).val( customVal );
return false;
}
} );
element.val( "ja" ).trigger( "keydown" );
setTimeout( function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
assert.equal( element.val(), customVal );
ready();
} );
} );
QUnit.test( "cancel select", function( assert ) {
var ready = assert.async();
assert.expect( 1 );
var customVal = "custom value",
element = $( "#autocomplete" ).autocomplete( {
delay: 0,
source: data,
select: function() {
$( this ).val( customVal );
return false;
}
} );
element.val( "ja" ).trigger( "keydown" );
setTimeout( function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
assert.equal( element.val(), customVal );
ready();
} );
} );
QUnit.test( "blur during remote search", function( assert ) {
var ready = assert.async();
assert.expect( 1 );
var ac = $( "#autocomplete" ).autocomplete( {
delay: 0,
source: function( request, response ) {
assert.ok( true, "trigger request" );
ac.simulate( "blur" );
setTimeout( function() {
response( [ "result" ] );
ready();
}, 25 );
},
open: function() {
assert.ok( false, "opened after a blur" );
}
} );
ac.val( "ro" ).trigger( "keydown" );
} );
} );

49
jquery-ui/tests/unit/autocomplete/methods.js vendored Normal file
View file

@ -0,0 +1,49 @@
define( [
"qunit",
"jquery",
"ui/widgets/autocomplete"
], function( QUnit, $ ) {
QUnit.module( "autocomplete: methods" );
QUnit.test( "destroy", function( assert ) {
assert.expect( 1 );
assert.domEqual( "#autocomplete", function() {
$( "#autocomplete" ).autocomplete().autocomplete( "destroy" );
} );
} );
QUnit.test( "search, close", function( assert ) {
assert.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" );
assert.ok( menu.is( ":hidden" ), "menu is hidden on init" );
element.autocomplete( "search" );
assert.ok( menu.is( ":visible" ), "menu is visible after search" );
assert.equal( menu.find( ".ui-menu-item" ).length, data.length, "all items for a blank search" );
element.val( "has" ).autocomplete( "search" );
assert.equal( menu.find( ".ui-menu-item" ).text(), "haskell", "only one item for set input value" );
element.autocomplete( "search", "ja" );
assert.equal( menu.find( ".ui-menu-item" ).length, 2, "only java and javascript for 'ja'" );
element.autocomplete( "close" );
assert.ok( menu.is( ":hidden" ), "menu is hidden after close" );
} );
QUnit.test( "widget", function( assert ) {
assert.expect( 2 );
var element = $( "#autocomplete" ).autocomplete(),
widgetElement = element.autocomplete( "widget" );
assert.equal( widgetElement.length, 1, "one element" );
assert.hasClasses( widgetElement, "ui-menu" );
} );
} );

324
jquery-ui/tests/unit/autocomplete/options.js vendored Normal file
View file

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

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="../../../external/qunit-composite/qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/qunit-composite/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>

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

@ -0,0 +1,29 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js" data-modules="core button"></script>
<script src="../../lib/bootstrap.js" data-widget="button" data-no-back-compat="true"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<form id="form1">
<div><button id="button">Label</button></div>
<div><button id="button2">label <span>with span</span></button></div>
<div><input id="submit" type="submit" value="Label"></div>
</form>
<form id="form2">
<button id="button-disabled" disabled>Button</button>
<a href="#" id="anchor-button">Anchor Button</a>
</form>
</div>
</body>
</html>

27
jquery-ui/tests/unit/button/common-deprecated.js vendored Normal file
View file

@ -0,0 +1,27 @@
define( [
"lib/common",
"ui/widgets/button"
], function( common ) {
common.testWidget( "button", {
defaults: {
classes: {
"ui-button": "ui-corner-all"
},
disabled: null,
icon: null,
iconPosition: "beginning",
icons: {
primary: null,
secondary: null
},
label: null,
showLabel: true,
text: true,
// Callbacks
create: null
}
} );
} );

22
jquery-ui/tests/unit/button/common.js vendored Normal file
View file

@ -0,0 +1,22 @@
define( [
"lib/common",
"ui/widgets/button"
], function( common ) {
common.testWidget( "button", {
defaults: {
classes: {
"ui-button": "ui-corner-all"
},
disabled: null,
icon: null,
iconPosition: "beginning",
label: null,
showLabel: true,
// Callbacks
create: null
}
} );
} );

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

@ -0,0 +1,26 @@
define( [
"qunit",
"jquery",
"ui/safe-active-element",
"ui/widgets/button"
], function( QUnit, $ ) {
QUnit.module( "Button: core" );
QUnit.test( "Disabled button loses focus", function( assert ) {
var ready = assert.async();
assert.expect( 2 );
var element = $( "#button" ).button();
element.focus();
setTimeout( function() {
assert.equal( element[ 0 ], $.ui.safeActiveElement( document ), "Button is focused" );
element.button( "disable" );
assert.notEqual( element[ 0 ], $.ui.safeActiveElement( document ), "Button has had focus removed" );
ready();
} );
} );
} );

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

@ -0,0 +1,61 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button Deprecated Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js" data-modules="core button"></script>
<script src="../../lib/bootstrap.js" data-widget="button" data-deprecated="true"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div class="buttonset"><button id="button">Label</button><button>button 2</button></div>
<div><button id="button2">label <span>with span</span></button></div>
<div id="radio0" style="margin-top: 2em;">
<input type="radio" id="radio01" name="radio" checked="checked"><label for="radio01">Choice 1</label>
<input type="radio" id="radio02" name="radio"><label for="radio02">Choice 2</label>
<input type="radio" id="radio03" name="radio"><label for="radio03">Choice 3</label>
</div>
<div id="checkbox0">
<input type="checkbox" id="checkbox01" name="checkbox"><label for="checkbox01">Choice 1</label>
<input type="checkbox" id="checkbox02" name="checkbox"><label for="checkbox02">Choice 2</label>
<input type="checkbox" id="checkbox03" name="checkbox"><label for="checkbox03">Choice 3</label>
</div>
<form>
<div id="radio1" style="margin-top: 2em;">
<input type="radio" id="radio11" name="radio"><label for="radio11">Choice 1</label>
<input type="radio" id="radio12" name="radio" checked="checked"><label for="radio12">Choice 2</label>
<input type="radio" id="radio13" name="radio"><label for="radio13">Choice 3</label>
</div>
</form>
<form>
<div id="radio2" style="margin-top: 2em;">
<input type="radio" id="radio21" name="radio"><label for="radio21">Choice 1</label>
<input type="radio" id="radio22" name="radio"><label for="radio22">Choice 2</label>
<input type="radio" id="radio23" name="radio" checked="checked"><label for="radio23">Choice 3</label>
</div>
</form>
<form>
<div id="radio3">
<input type="radio" id="radio31" name="data['Page']['parse']"><label for="radio31">Choice 1</label>
<input type="radio" id="radio32" name="data['Page']['parse']" checked="checked"><label for="radio32">Choice 2</label>
<input type="radio" id="radio33" name="data['Page']['parse']"><label for="radio33">Choice 3</label>
</div>
</form>
<input type="checkbox" id="check"><label for="check">Toggle</label>
<input type="checkbox" id="check2"><label for="check2">Checkbox</label>
<div><input id="submit" type="submit" value="Label"></div>
<button id="button-disabled" disabled>Button</button>
<button id="button1">Button</button>
<a href="#" id="anchor-button">Anchor Button</a>
</div>
</body>
</html>

197
jquery-ui/tests/unit/button/deprecated.js vendored Normal file
View file

@ -0,0 +1,197 @@
define( [
"qunit",
"jquery",
"ui/widgets/button"
], function( QUnit, $ ) {
QUnit.module( "Button (deprecated): core" );
QUnit.test( "Calling button on a checkbox input calls checkboxradio widget", function( assert ) {
var checkbox = $( "#checkbox01" );
assert.expect( 2 );
checkbox.button();
assert.ok( !!checkbox.checkboxradio( "instance" ),
"Calling button on a checkbox creates checkboxradio instance" );
assert.ok( !checkbox.checkboxradio( "option", "icon" ),
"Calling button on a checkbox sets the checkboxradio icon option to false" );
} );
QUnit.test( "Calling buttonset calls controlgroup", function( assert ) {
var controlgroup = $( ".buttonset" );
assert.expect( 1 );
controlgroup.buttonset();
assert.ok( controlgroup.is( ":ui-controlgroup" ), "Calling buttonset creates controlgroup instance" );
} );
QUnit.module( "Button (deprecated): methods" );
QUnit.test( "destroy", function( assert ) {
assert.expect( 1 );
assert.domEqual( "#checkbox02", function() {
$( "#checkbox02" ).button().button( "destroy" );
} );
} );
QUnit.test( "refresh: Ensure disabled state is preserved correctly.", function( assert ) {
assert.expect( 5 );
var element = null;
element = $( "#checkbox02" );
element.button( { disabled: true } ).button( "refresh" );
assert.ok( element.button( "option", "disabled" ), "Checkboxes should remain disabled after refresh" );
assert.ok( element.prop( "disabled" ), "Input remains disabled after refresh" );
element = $( "#radio02" );
element.button( { disabled: true } ).button( "refresh" );
assert.ok( element.button( "option", "disabled" ), "Radio buttons should remain disabled after refresh" );
element = $( "#checkbox02" );
element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
assert.ok( !element.button( "option", "disabled" ), "Changing a checkbox's disabled property should update the state after refresh." );
element = $( "#radio02" );
element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
assert.ok( !element.button( "option", "disabled" ), "Changing a radio button's disabled property should update the state after refresh." );
} );
QUnit.module( "button (deprecated): options" );
QUnit.test( "Setting items option on buttonset sets the button properties on the items option", function( assert ) {
assert.expect( 2 );
var controlgroup = $( ".buttonset" );
controlgroup.buttonset( { items: "bar" } );
assert.equal( controlgroup.controlgroup( "option", "items.button" ), "bar",
"items.button set when setting items option on init on buttonset" );
controlgroup.buttonset( "option", "items", "foo" );
assert.equal( controlgroup.controlgroup( "option", "items.button" ), "foo",
"items.button set when setting items option on buttonset" );
} );
QUnit.test( "disabled, null", function( assert ) {
assert.expect( 2 );
$( "#radio02" ).prop( "disabled", true ).button( { disabled: null } );
assert.deepEqual( $( "#radio02" ).button( "option", "disabled" ), true,
"disabled option set to true" );
assert.deepEqual( true, $( "#radio02" ).prop( "disabled" ), "element is not disabled" );
} );
QUnit.test( "text / showLabel options proxied", function( assert ) {
assert.expect( 8 );
var button = $( "#button" );
button.button( {
text: false,
icon: "ui-icon-gear"
} );
assert.equal( button.button( "option", "showLabel" ), false,
"Setting the text option to false sets the showLabel option to false on init" );
button.button( "option", "showLabel", true );
assert.equal( button.button( "option", "text" ), true,
"Setting showLabel true with option method sets text option to true" );
button.button( "option", "text", false );
assert.equal( button.button( "option", "showLabel" ), false,
"Setting text false with option method sets showLabel option to false" );
button.button( "option", "text", true );
assert.equal( button.button( "option", "showLabel" ), true,
"Setting text true with option method sets showLabel option to true" );
button.button( "option", "showLabel", false );
assert.equal( button.button( "option", "text" ), false,
"Setting showLabel false with option method sets text option to false" );
button.button( "destroy" );
button.button( {
text: true,
icon: "ui-icon-gear"
} );
assert.equal( button.button( "option", "showLabel" ), true,
"Setting the text option to true sets the showLabel option to true on init" );
button.button( "destroy" );
button.button( {
showLabel: true,
icon: "ui-icon-gear"
} );
assert.equal( button.button( "option", "text" ), true,
"Setting the showLabel option to true sets the text option to true on init" );
button.button( "destroy" );
button.button( {
showLabel: false,
icon: "ui-icon-gear"
} );
assert.equal( button.button( "option", "text" ), false,
"Setting the showLabel option to false sets the text option to false on init" );
} );
QUnit.test( "icon / icons options properly proxied", function( assert ) {
assert.expect( 10 );
var button = $( "#button" );
button.button( {
icon: "foo"
} );
assert.equal( button.button( "option", "icons.primary" ), "foo",
"Icon option properly proxied on init" );
button.button( {
icon: "bar"
} );
assert.equal( button.button( "option", "icons.primary" ), "bar",
"Icon option properly proxied with option method" );
button.button( {
icons: {
primary: "foo"
}
} );
assert.equal( button.button( "option", "icon" ), "foo",
"Icons primary option properly proxied with option method" );
assert.equal( button.button( "option", "iconPosition" ), "beginning",
"Icons primary option sets iconPosition option to beginning" );
button.button( {
icons: {
secondary: "bar"
}
} );
assert.equal( button.button( "option", "icon" ), "bar",
"Icons secondary option properly proxied with option method" );
assert.equal( button.button( "option", "iconPosition" ), "end",
"Icons secondary option sets iconPosition option to end" );
button.button( "destroy" );
button.button( {
icons: {
primary: "foo"
}
} );
assert.equal( button.button( "option", "icon" ), "foo",
"Icons primary option properly proxied on init" );
assert.equal( button.button( "option", "iconPosition" ), "beginning",
"Icons primary option sets iconPosition option to beginning on init" );
button.button( {
icons: {
secondary: "bar"
}
} );
assert.equal( button.button( "option", "icon" ), "bar",
"Icons secondary option properly proxied on init" );
assert.equal( button.button( "option", "iconPosition" ), "end",
"Icons secondary option sets iconPosition option to end on init" );
} );
} );

23
jquery-ui/tests/unit/button/events.js vendored Normal file
View file

@ -0,0 +1,23 @@
define( [
"qunit",
"jquery",
"ui/widgets/button"
], function( QUnit, $ ) {
QUnit.module( "Button: events" );
QUnit.test( "Anchor recieves click event when spacebar is pressed", function( assert ) {
var ready = assert.async();
assert.expect( 1 );
var element = $( "#anchor-button" ).button();
element.on( "click", function( event ) {
event.preventDefault();
assert.ok( true, "click occcured as a result of spacebar" );
ready();
} );
element.trigger( $.Event( "keyup", { keyCode: $.ui.keyCode.SPACE } ) );
} );
} );

35
jquery-ui/tests/unit/button/methods.js vendored Normal file
View file

@ -0,0 +1,35 @@
define( [
"qunit",
"jquery",
"ui/widgets/button"
], function( QUnit, $ ) {
QUnit.module( "Button: methods" );
QUnit.test( "destroy", function( assert ) {
assert.expect( 1 );
assert.domEqual( "#button", function() {
$( "#button" ).button().button( "destroy" );
} );
} );
QUnit.test( "refresh: Ensure disabled state is preserved correctly.", function( assert ) {
assert.expect( 3 );
var element = $( "<a href='#'></a>" );
element.button( { disabled: true } ).button( "refresh" );
assert.ok( element.button( "option", "disabled" ),
"Anchor button should remain disabled after refresh" );
element = $( "<button></button>" );
element.button( { disabled: true } ).button( "refresh" );
assert.ok( element.button( "option", "disabled" ), "<button> should remain disabled after refresh" );
element = $( "<button></button>" );
element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
assert.ok( !element.button( "option", "disabled" ),
"Changing a <button>'s disabled property should update the state after refresh." );
} );
} );

185
jquery-ui/tests/unit/button/options.js vendored Normal file
View file

@ -0,0 +1,185 @@
define( [
"qunit",
"jquery",
"ui/widgets/button"
], function( QUnit, $ ) {
QUnit.module( "button: options" );
QUnit.test( "disabled, explicit value", function( assert ) {
assert.expect( 8 );
var element = $( "#button" ).button( { disabled: false } );
assert.strictEqual( element.button( "option", "disabled" ), false, "disabled option set to false" );
assert.strictEqual( element.prop( "disabled" ), false, "Disabled property is false" );
assert.lacksClasses( element.button( "widget" ), "ui-state-disabled ui-button-disabled" );
element = $( "#button" ).button( { disabled: true } );
assert.hasClasses( element.button( "widget" ), "ui-state-disabled" );
assert.strictEqual( element.button( "widget" ).attr( "aria-disabled" ), undefined,
"element does not get aria-disabled" );
assert.hasClasses( element.button( "widget" ), "ui-button-disabled" );
assert.strictEqual( element.button( "option", "disabled" ), true, "disabled option set to true" );
assert.strictEqual( element.prop( "disabled" ), true, "Disabled property is set" );
} );
// We are testing the default here because the default null is a special value which means to check
// the DOM. We need to make sure this happens correctly. Checking the options should never return
// null, it should always be true or false.
QUnit.test( "disabled, null", function( assert ) {
assert.expect( 4 );
var element = $( "#button" ),
elementDisabled = $( "#button-disabled" );
element.add( elementDisabled ).button( { disabled: null } );
assert.strictEqual( element.button( "option", "disabled" ), false, "disabled option set to false" );
assert.strictEqual( element.prop( "disabled" ), false, "element is disabled" );
assert.strictEqual( elementDisabled.button( "option", "disabled" ), true,
"disabled option set to true" );
assert.strictEqual( elementDisabled.prop( "disabled" ), true, "element is disabled" );
} );
QUnit.test( "showLabel, false, without icon", function( assert ) {
assert.expect( 4 );
var button = $( "#button" ).button( {
showLabel: false
} );
assert.lacksClasses( button, "ui-button-icon-only" );
assert.strictEqual( button.button( "option", "showLabel" ), true,
"showLabel false only allowed if icon true" );
button.button( "option", "showLabel", false );
assert.lacksClasses( button, "ui-button-icon-only" );
assert.strictEqual( button.button( "option", "showLabel" ), true,
"showLabel false only allowed if icon true" );
} );
QUnit.test( "showLabel, false, with icon", function( assert ) {
assert.expect( 1 );
var button = $( "#button" ).button( {
showLabel: false,
icon: "iconclass"
} );
assert.hasClasses( button, "ui-button ui-corner-all ui-widget ui-button-icon-only" );
} );
QUnit.test( "label, default", function( assert ) {
assert.expect( 2 );
var button = $( "#button" ).button();
assert.deepEqual( button.text(), "Label" );
assert.deepEqual( button.button( "option", "label" ), "Label" );
} );
QUnit.test( "label, with html markup", function( assert ) {
assert.expect( 3 );
var button = $( "#button2" ).button();
assert.deepEqual( button.text(), "label with span" );
assert.deepEqual( button.html().toLowerCase(), "label <span>with span</span>" );
assert.deepEqual( button.button( "option", "label" ).toLowerCase(), "label <span>with span</span>" );
} );
QUnit.test( "label, explicit value", function( assert ) {
assert.expect( 2 );
var button = $( "#button" ).button( {
label: "xxx"
} );
assert.deepEqual( button.text(), "xxx" );
assert.deepEqual( button.button( "option", "label" ), "xxx" );
} );
QUnit.test( "label, default, with input type submit", function( assert ) {
assert.expect( 2 );
var button = $( "#submit" ).button();
assert.deepEqual( button.val(), "Label" );
assert.deepEqual( button.button( "option", "label" ), "Label" );
} );
QUnit.test( "label, explicit value, with input type submit", function( assert ) {
assert.expect( 2 );
var button = $( "#submit" ).button( {
label: "xxx"
} );
assert.deepEqual( button.val(), "xxx" );
assert.deepEqual( button.button( "option", "label" ), "xxx" );
} );
QUnit.test( "icon", function( assert ) {
assert.expect( 4 );
var button = $( "#button" ).button( {
showLabel: false,
icon: "iconclass"
} ),
icon = button.find( ".ui-icon" );
assert.hasClasses( icon, "iconclass" );
assert.equal( icon.length, 1, "button with icon option set has icon" );
button.button( "option", "icon", false );
assert.equal( button.find( ".ui-icon" ).length, 0, "setting icon to false removes the icon" );
button.button( "option", "icon", "iconclass" );
assert.ok( button.find( ".ui-icon" ).length, "setting icon to a value adds the icon" );
} );
QUnit.test( "icon position", function( assert ) {
assert.expect( 22 );
var button = $( "#button" ).button( {
icon: "ui-icon-gear"
} ),
icon = button.find( ".ui-icon" ),
space = button.find( ".ui-button-icon-space" );
assert.equal( icon.length, 1, "button with icon option set has icon" );
assert.equal( button.button( "option", "iconPosition" ), "beginning",
"Button has iconPosition beginning by default" );
assert.equal( button.contents()[ 0 ], icon[ 0 ], "icon is prepended when position is begining" );
assert.equal( icon.next()[ 0 ], space[ 0 ], "icon is followed by a space when position is begining" );
assert.equal( space.length, 1,
"ui-button-icon-space contains a breaking space iconPosition:beginning" );
assert.lacksClasses( icon, "ui-widget-icon-block" );
button.button( "option", "iconPosition", "end" );
icon = button.find( ".ui-icon" );
space = button.find( ".ui-button-icon-space" );
assert.equal( icon.length, 1, "Changing position to end does not re-create or duplicate icon" );
assert.equal( button.button( "option", "iconPosition" ), "end", "Button has iconPosition end" );
assert.equal( button.contents().last()[ 0 ], icon[ 0 ], "icon is appended when position is end" );
assert.equal( icon.prev()[ 0 ], space[ 0 ], "icon is preceeded by a space when position is end" );
assert.equal( space.length, 1,
"ui-button-icon-space contains a breaking space iconPosition:beginning" );
assert.lacksClasses( icon, "ui-widget-icon-block" );
button.button( "option", "iconPosition", "top" );
icon = button.find( ".ui-icon" );
assert.equal( icon.length, 1, "Changing position to top does not re-create or duplicate icon" );
assert.equal( button.button( "option", "iconPosition" ), "top", "Button has iconPosition top" );
assert.equal( button.contents()[ 0 ], icon[ 0 ], "icon is prepended when position is top" );
assert.ok( !button.find( "ui-button-icon-space" ).length,
"Button should not have an iconSpace with position: top" );
assert.hasClasses( icon, "ui-widget-icon-block" );
button.button( "option", "iconPosition", "bottom" );
icon = button.find( ".ui-icon" );
assert.equal( icon.length, 1, "Changing position to bottom does not re-create or duplicate icon" );
assert.equal( button.button( "option", "iconPosition" ), "bottom", "Button has iconPosition top" );
assert.equal( button.contents().last()[ 0 ], icon[ 0 ], "icon is prepended when position is bottom" );
assert.ok( !button.find( "ui-button-icon-space" ).length,
"Button should not have an iconSpace with position: bottom" );
assert.hasClasses( icon, "ui-widget-icon-block" );
} );
} );

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

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

76
jquery-ui/tests/unit/checkboxradio/checkboxradio.html Normal file
View file

@ -0,0 +1,76 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Checkboxradio Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js" data-modules="core button checkboxradio"></script>
<script src="../../lib/bootstrap.js" data-widget="button"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div id="radio0">
<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>
<form id="form1">
<div id="radio1">
<input type="radio" id="radio11" name="radio"><label for="radio11">Choice 1</label>
<input type="radio" id="radio12" name="radio"><label for="radio12">Choice 2</label>
<input type="radio" id="radio13" name="radio" checked="checked"><label for="radio13">Choice 3</label>
</div>
</form>
<form id="form2">
<div id="radio2">
<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>
<label for="checkbox-method-refresh" id="checkbox-method-refresh-label">checkbox refresh</label>
<input type="checkbox" id="checkbox-method-refresh"/>
<label for="checkbox-method-destroy" class="bar" id="checkbox-method-destroy-label">checkbox refresh</label>
<input type="checkbox" class="foo" id="checkbox-method-destroy"/>
<label for="checkbox-method-disable">checkbox refresh</label>
<input type="checkbox" class="foo" id="checkbox-method-disable"/>
<label for="radio-method-refresh" id="radio-method-refresh-label">radio refresh</label>
<input type="radio" id="radio-method-refresh"/>
<label for="radio-method-destroy" class="bar" id="radio-method-destroy-label">radio refresh</label>
<input type="radio" class="foo" id="radio-method-destroy"/>
<label for="radio-method-disable">radio refresh</label>
<input type="radio" class="foo" id="radio-method-disable"/>
<label for="checkbox-option-disabled">checkbox disabled</label>
<input type="checkbox" class="foo" id="checkbox-option-disabled"/>
<label for="checkbox-option-icon">checkbox icon</label>
<input type="checkbox" class="foo" id="checkbox-option-icon"/>
<label for="checkbox-option-label">checkbox label<input type="checkbox" class="foo" id="checkbox-option-label"/></label>
<label>
<input type="checkbox" id="label-with-no-for"/>
</label>
<form id="form3"></form>
<input type="radio" name="crazy-form" id="crazy-form-1" form="form3" checked="checked">
<label for="crazy-form-1">Choice 1</label>
<input type="radio" name="crazy-form" id="crazy-form-2" form="form3">
<label for="crazy-form-2">Choice 2</label>
</div>
</body>
</html>

22
jquery-ui/tests/unit/checkboxradio/common.js vendored Normal file
View file

@ -0,0 +1,22 @@
define( [
"lib/common",
"ui/widgets/checkboxradio"
], function( common ) {
common.testWidget( "checkboxradio", {
noDefaultElement: true,
defaults: {
classes: {
"ui-checkboxradio-label": "ui-corner-all",
"ui-checkboxradio-icon": "ui-corner-all"
},
disabled: null,
icon: true,
label: null,
// Callbacks
create: null
}
} );
} );

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

@ -0,0 +1,138 @@
define( [
"qunit",
"jquery",
"ui/widgets/checkboxradio"
], function( QUnit, $ ) {
QUnit.module( "Checkboxradio: core" );
QUnit.test( "Checkbox - Initial class structure", function( assert ) {
assert.expect( 2 );
var input = $( "#check" ),
label = $( "label[for=check]" );
input.checkboxradio();
assert.hasClasses( input, "ui-helper-hidden-accessible ui-checkboxradio" );
assert.hasClasses( label, "ui-button ui-widget ui-checkboxradio-label ui-corner-all" );
} );
QUnit.test( "Radios - Initial class structure", function( assert ) {
assert.expect( 6 );
var inputs = $( "#radio0 input" ),
labels = $( "#radio0 label" );
inputs.checkboxradio();
inputs.each( function() {
assert.hasClasses( this, "ui-helper-hidden-accessible" );
} );
labels.each( function() {
assert.hasClasses( this, "ui-button" );
} );
} );
QUnit.test( "Ensure checked after single click on checkbox label button", function( assert ) {
var ready = assert.async();
assert.expect( 2 );
$( "#check2" ).checkboxradio().change( function() {
var label = $( this ).checkboxradio( "widget" );
assert.ok( this.checked, "checked ok" );
assert.hasClasses( label, "ui-state-active" );
} );
// Support: Opera
// Opera doesn't trigger a change event when this is done synchronously.
// This seems to be a side effect of another test, but until that can be
// tracked down, this delay will have to do.
setTimeout( function() {
$( "#check2" ).checkboxradio( "widget" ).simulate( "click" );
ready();
} );
} );
QUnit.test( "Handle form association via form attribute", function( assert ) {
assert.expect( 4 );
var radio1 = $( "#crazy-form-1" ).checkboxradio();
var radio1Label = radio1.checkboxradio( "widget" );
var radio2 = $( "#crazy-form-2" ).checkboxradio();
var radio2Label = radio2.checkboxradio( "widget" );
radio2.change( function() {
assert.ok( this.checked, "#2 checked" );
assert.ok( !radio1[ 0 ].checked, "#1 not checked" );
assert.hasClasses( radio2Label, "ui-state-active" );
assert.lacksClasses( radio1Label, "ui-state-active" );
} );
radio2Label.simulate( "click" );
} );
QUnit.test( "Checkbox creation requires a label, and finds it in all cases", function( assert ) {
assert.expect( 7 );
var groups = [
"<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>",
"<span><input type='checkbox' id='t7092b'><label for='t7092b'></label></span>",
"<span><span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label></span>",
"<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>",
"<span><input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span></span>",
"<span><label><input type='checkbox' id='t7092f'></label></span>",
"<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>"
];
$.each( groups, function( index, markup ) {
var group = $( markup );
group.find( "input[type=checkbox]" ).checkboxradio();
assert.hasClasses( group.find( "label" ), "ui-button" );
} );
} );
QUnit.test( "Calling checkboxradio on an unsupported element throws an error", function( assert ) {
assert.expect( 2 );
var errorMessage =
"Can't create checkboxradio on element.nodeName=div and element.type=undefined";
var error = new Error( errorMessage );
assert.raises(
function() {
$( "<div>" ).checkboxradio();
},
// Support: jQuery 1.7.0 only
$.fn.jquery === "1.7" ? errorMessage : error,
"Proper error thrown"
);
errorMessage = "Can't create checkboxradio on element.nodeName=input and element.type=button";
error = new Error( errorMessage );
assert.raises(
function() {
$( "<input type='button'>" ).checkboxradio();
},
// Support: jQuery 1.7.0 only
$.fn.jquery === "1.7" ? errorMessage : error,
"Proper error thrown"
);
} );
QUnit.test( "Calling checkboxradio on an input with no label throws an error", function( assert ) {
assert.expect( 1 );
var errorMessage = "No label found for checkboxradio widget";
var error = new Error( errorMessage );
assert.raises(
function() {
$( "<input type='checkbox'>" ).checkboxradio();
},
// Support: jQuery 1.7.0 only
$.fn.jquery === "1.7" ? errorMessage : error,
"Proper error thrown"
);
} );
} );

45
jquery-ui/tests/unit/checkboxradio/events.js vendored Normal file
View file

@ -0,0 +1,45 @@
define( [
"qunit",
"jquery",
"ui/widgets/checkboxradio"
], function( QUnit, $ ) {
QUnit.module( "Checkboxradio: events" );
QUnit.test(
"Resetting a checkbox's form should refresh the visual state of the checkbox",
function( assert ) {
var ready = assert.async();
assert.expect( 2 );
var form = $( "<form>" +
"<label for='c1'></label><input id='c1' type='checkbox' checked>" +
"</form>" ),
checkbox = form.find( "input[type=checkbox]" ).checkboxradio(),
widget = checkbox.checkboxradio( "widget" );
checkbox.prop( "checked", false ).checkboxradio( "refresh" );
assert.lacksClasses( widget, "ui-state-active" );
form.get( 0 ).reset();
setTimeout( function() {
assert.hasClasses( widget, "ui-state-active" );
ready();
}, 1 );
}
);
QUnit.test( "Checkbox shows focus when using keyboard navigation", function( assert ) {
var ready = assert.async();
assert.expect( 2 );
var check = $( "#check" ).checkboxradio(),
label = $( "label[for='check']" );
assert.lacksClasses( label, "ui-state-focus" );
check.focus();
setTimeout( function() {
assert.hasClasses( label, "ui-state-focus" );
ready();
} );
} );
} );

97
jquery-ui/tests/unit/checkboxradio/methods.js vendored Normal file
View file

@ -0,0 +1,97 @@
define( [
"qunit",
"jquery",
"ui/widgets/checkboxradio"
], function( QUnit, $ ) {
QUnit.module( "Checkboxradio: methods" );
$.each( [ "checkbox", "radio" ], function( index, value ) {
QUnit.test( value + ": refresh", function( assert ) {
var widget, icon,
checkbox = value === "checkbox",
input = $( "#" + value + "-method-refresh" );
assert.expect( checkbox ? 11 : 8 );
input.checkboxradio();
widget = input.checkboxradio( "widget" );
icon = widget.find( ".ui-icon" );
assert.strictEqual( icon.length, 1,
"There is initally one icon" );
icon.remove();
input.checkboxradio( "refresh" );
icon = widget.find( ".ui-icon" );
assert.strictEqual( icon.length, 1,
"Icon is recreated on refresh if absent" );
assert.hasClasses( icon, "ui-icon-blank" );
if ( checkbox ) {
assert.lacksClasses( icon, "ui-icon-check" );
}
assert.lacksClasses( widget, "ui-checkboxradio-checked" );
input.prop( "checked", true );
input.checkboxradio( "refresh" );
if ( checkbox ) {
assert.hasClasses( icon, "ui-icon-check" );
}
assert[ !checkbox ? "hasClasses" : "lacksClasses" ]( icon, "ui-icon-blank" );
assert.hasClasses( widget, "ui-checkboxradio-checked" );
input.prop( "checked", false );
input.checkboxradio( "refresh" );
assert.hasClasses( icon, "ui-icon-blank" );
if ( checkbox ) {
assert.lacksClasses( icon, "ui-icon-check" );
}
assert.lacksClasses( widget, "ui-checkboxradio-checked" );
} );
QUnit.test( value + ": destroy", function( assert ) {
assert.expect( 1 );
assert.domEqual( "#" + value + "-method-destroy", function() {
$( "#" + value + "-method-destroy" ).checkboxradio().checkboxradio( "destroy" );
} );
} );
QUnit.test( value + ": disable / enable", function( assert ) {
assert.expect( 4 );
var input = $( "#" + value + "-method-disable" ),
widget = input.checkboxradio().checkboxradio( "widget" );
input.checkboxradio( "disable" );
assert.hasClasses( widget, "ui-state-disabled" );
assert.strictEqual( input.is( ":disabled" ), true,
value + " is disabled when disable is called" );
input.checkboxradio( "enable" );
assert.lacksClasses( widget, "ui-state-disabled" );
assert.strictEqual( input.is( ":disabled" ), false,
value + " has disabled prop removed when enable is called" );
} );
QUnit.test( value + ": widget returns the label", function( assert ) {
assert.expect( 1 );
var input = $( "#" + value + "-method-refresh" ),
label = $( "#" + value + "-method-refresh-label" );
input.checkboxradio();
assert.strictEqual( input.checkboxradio( "widget" )[ 0 ], label[ 0 ],
"widget method returns label" );
} );
} );
QUnit.test( "Input wrapped in a label preserved on refresh", function( assert ) {
var input = $( "#label-with-no-for" ).checkboxradio(),
element = input.checkboxradio( "widget" );
assert.expect( 1 );
input.checkboxradio( "refresh" );
assert.strictEqual( input.parent()[ 0 ], element[ 0 ], "Input preserved" );
} );
} );

206
jquery-ui/tests/unit/checkboxradio/options.js vendored Normal file
View file

@ -0,0 +1,206 @@
define( [
"qunit",
"jquery",
"ui/widgets/checkboxradio"
], function( QUnit, $ ) {
QUnit.module( "Checkboxradio: options" );
function assertDisabled( checkbox, assert ) {
assert.hasClasses( checkbox.checkboxradio( "widget" ), "ui-state-disabled",
"label gets ui-state-disabled" );
assert.strictEqual( checkbox.is( ":disabled" ), true, "checkbox is disabled" );
}
function assertEnabled( checkbox, assert ) {
assert.lacksClasses( checkbox.checkboxradio( "widget" ), "ui-state-disabled",
"label has ui-state-disabled removed when disabled set to false" );
assert.strictEqual( checkbox.is( ":disabled" ), false,
"checkbox has disabled prop removed when disabled set to false" );
}
QUnit.test( "disabled", function( assert ) {
assert.expect( 6 );
var checkbox = $( "#checkbox-option-disabled" );
checkbox.checkboxradio( {
disabled: true
} );
assertDisabled( checkbox, assert );
checkbox.checkboxradio( "option", "disabled", false );
assertEnabled( checkbox, assert );
checkbox.checkboxradio( "option", "disabled", true );
assertDisabled( checkbox, assert );
} );
QUnit.test( "disabled - prop true on init", function( assert ) {
assert.expect( 2 );
var checkbox = $( "#checkbox-option-disabled" );
checkbox.prop( "disabled", true );
checkbox.checkboxradio();
assertDisabled( checkbox, assert );
} );
QUnit.test( "disabled - explicit null value, checks the DOM", function( assert ) {
assert.expect( 2 );
var checkbox = $( "#checkbox-option-disabled" );
checkbox.prop( "disabled", true );
checkbox.checkboxradio( {
disabled: null
} );
assertDisabled( checkbox, assert );
} );
function assertNoIcon( assert, checkbox ) {
assert.strictEqual( checkbox.checkboxradio( "widget" ).find( "span.ui-icon" ).length, 0,
"Label does not contain an icon" );
}
function assertIcon( checkbox, icon, assert ) {
var iconElement = checkbox.checkboxradio( "widget" ).find( ".ui-icon" );
icon = icon || "blank";
assert.strictEqual( iconElement.length, 1,
"Label contains icon" );
assert.hasClasses( iconElement, "ui-checkboxradio-icon ui-corner-all ui-icon " +
"ui-icon-background ui-icon-" + icon,
"Icon has proper classes" );
if ( icon === "blank" ) {
assert.lacksClasses( iconElement, "ui-icon-check ui-state-checked" );
}
}
QUnit.test( "icon - false on init", function( assert ) {
var checkbox = $( "#checkbox-option-icon" );
assert.expect( 1 );
checkbox.checkboxradio( { icon: false } );
assertNoIcon( assert, checkbox );
} );
QUnit.test( "icon - default unchecked", function( assert ) {
var checkbox = $( "#checkbox-option-icon" );
assert.expect( 3 );
checkbox.checkboxradio();
assertIcon( checkbox, false, assert );
} );
QUnit.test( "icon - default checked", function( assert ) {
var checkbox = $( "#checkbox-option-icon" ).attr( "checked", true );
assert.expect( 2 );
checkbox.checkboxradio();
assertIcon( checkbox, "check ui-state-checked", assert );
} );
QUnit.test( "icon", function( assert ) {
var checkbox = $( "#checkbox-option-icon" );
assert.expect( 9 );
checkbox.prop( "checked", true );
checkbox.checkboxradio();
assertIcon( checkbox, "check ui-state-checked", assert );
checkbox.checkboxradio( "option", "icon", false );
assertNoIcon( assert, checkbox );
checkbox.checkboxradio( "option", "icon", true );
assertIcon( checkbox, "check ui-state-checked", assert );
checkbox.checkboxradio( "option", "icon", false );
assertNoIcon( assert, checkbox );
checkbox.checkboxradio( "option", "icon", true );
checkbox.prop( "checked", false ).checkboxradio( "refresh" );
assertIcon( checkbox, false, assert );
} );
QUnit.test( "label - default", function( assert ) {
var checkbox = $( "#checkbox-option-label" ),
widget;
assert.expect( 2 );
checkbox.checkboxradio();
widget = checkbox.checkboxradio( "widget" );
assert.strictEqual( checkbox.checkboxradio( "option", "label" ),
"checkbox label", "When no value passed on create text from dom is used for option" );
assert.strictEqual( $.trim( widget.text() ),
"checkbox label", "When no value passed on create text from dom is used in dom" );
} );
QUnit.test( "label - explicit value", function( assert ) {
assert.expect( 5 );
var checkbox = $( "#checkbox-option-label" ).checkboxradio( {
label: "foo"
} ),
widget = checkbox.checkboxradio( "widget" ),
icon = widget.find( ".ui-icon" ),
iconSpace = widget.find( ".ui-checkboxradio-icon-space" );
assert.strictEqual( checkbox.checkboxradio( "option", "label" ),
"foo", "When value is passed on create value is used for option" );
assert.strictEqual( $.trim( widget.text() ),
"foo", "When value is passed on create value is used in dom" );
assert.strictEqual( icon.length, 1,
"Icon is preserved when label is set on init when wrapped in label" );
assert.strictEqual( iconSpace.length, 1,
"Icon space is preserved when label is set on init when wrapped in label" );
assert.strictEqual( $( "#checkbox-option-label" ).length, 1,
"Element is preserved when label is set on init when wrapped in label" );
} );
QUnit.test( "label - explicit null value", function( assert ) {
var checkbox = $( "#checkbox-option-label" ),
widget;
assert.expect( 2 );
// The default null is a special value which means to check the DOM.
// We need to make sure that the option never return null.
// It should always be true or false after initialization.
checkbox.checkboxradio( {
label: null
} );
widget = checkbox.checkboxradio( "widget" );
assert.strictEqual( checkbox.checkboxradio( "option", "label" ),
"checkbox label", "When null is passed on create text from dom is used for option" );
assert.strictEqual( $.trim( widget.text() ),
"checkbox label", "When null is passed on create text from dom is used in dom" );
} );
QUnit.test( "label", function( assert ) {
assert.expect( 4 );
var checkbox = $( "#checkbox-option-label" ),
widget;
checkbox.checkboxradio();
widget = checkbox.checkboxradio( "widget" );
checkbox.checkboxradio( "option", "label", "bar" );
assert.strictEqual( checkbox.checkboxradio( "option", "label" ),
"bar", "When value is passed value is used for option" );
assert.strictEqual( $.trim( widget.text() ),
"bar", "When value is passed value is used in dom" );
checkbox.checkboxradio( "option", "label", null );
assert.strictEqual( checkbox.checkboxradio( "option", "label" ),
"bar", "When null is passed text from dom is used for option" );
assert.strictEqual( $.trim( widget.text() ),
"bar", "When null is passed text from dom is used in dom" );
} );
} );

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

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

29
jquery-ui/tests/unit/controlgroup/common.js vendored Normal file
View file

@ -0,0 +1,29 @@
define( [
"lib/common",
"ui/widgets/controlgroup",
"ui/widgets/checkboxradio",
"ui/widgets/selectmenu",
"ui/widgets/button",
"ui/widgets/spinner"
], function( common ) {
common.testWidget( "controlgroup", {
defaults: {
classes: {},
direction: "horizontal",
disabled: null,
items: {
"button": "input[type=button], input[type=submit], input[type=reset], button, a",
"checkboxradio": "input[type='checkbox'], input[type='radio']",
"selectmenu": "select",
"spinner": ".ui-spinner-input",
"controlgroupLabel": ".ui-controlgroup-label"
},
onlyVisible: true,
// Callbacks
create: null
}
} );
} );

89
jquery-ui/tests/unit/controlgroup/controlgroup.html Normal file
View file

@ -0,0 +1,89 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Controlgroup Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js" data-modules="core button checkboxradio selectmenu spinner controlgroup"></script>
<script src="../../lib/bootstrap.js" data-modules="common core methods options"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div class="controlgroup">
<button style="display:none">Button with icon only</button>
<select>
<option>Fast</option>
<option>Medium</option>
<option>Slow</option>
</select>
<label for="checkbox">Checkbox</label>
<input type="checkbox" value="checkbox" id="checkbox" />
<select>
<option>Fast</option>
<option>Medium</option>
<option>Slow</option>
</select>
<div class="test"></div>
<button>Button with icon on the bottom</button>
<label for="spinner" class="ui-controlgroup-label"># of cars</label>
<input id="spinner" class="ui-spinner-input">
<select>
<option>Fast</option>
<option>Medium</option>
<option>Slow</option>
</select>
</div>
<select id="select-sanatize">
<option>Fast</option>
<option>Medium</option>
<option>Slow</option>
</select>
<div class="controlgroup-pre">
<select id="select-pre">
<option>Fast</option>
<option>Medium</option>
<option>Slow</option>
</select>
<button>Button with icon on the bottom</button>
</div>
<div class="controlgroup-refresh">
<select id="select-refresh">
<option>Fast</option>
<option>Medium</option>
<option>Slow</option>
</select>
<label class="ui-controlgroup-label">Label</label>
<button>Button with icon on the bottom</button>
</div>
<div class="controlgroup-single-select">
<select id="select-single">
<option>Fast</option>
<option>Medium</option>
<option>Slow</option>
</select>
</div>
<div class="controlgroup-single-button">
<button class="single-button">button</button>
</div>
<div class="controlgroup-class-key-init">
<select id="class-key-init-child">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div class="controlgroup-class-key-dupe">
<select id="class-key-dupe-first">
<option>Option 1</option>
<option>Option 2</option>
</select>
<select id="class-key-dupe-second">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>
</body>
</html>

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

@ -0,0 +1,200 @@
define( [
"qunit",
"jquery",
"ui/widgets/controlgroup",
"ui/widgets/checkboxradio",
"ui/widgets/selectmenu",
"ui/widgets/button",
"ui/widgets/spinner"
], function( QUnit, $ ) {
QUnit.module( "Controlgroup: Core" );
QUnit.test( "selectmenu: open/close corners", function( assert ) {
assert.expect( 12 );
var element = $( ".controlgroup" ).controlgroup(),
selects = element.find( "select" ),
selectButton = selects.eq( 0 ).selectmenu( "widget" );
selects.eq( 0 ).selectmenu( "open" );
assert.hasClasses( selectButton, "ui-corner-tl",
"Horizontal: First selectmenu gets ui-corner-tl when opened" );
selects.eq( 0 ).selectmenu( "close" );
assert.hasClasses( selectButton, "ui-corner-left",
"Horizontal: First selectmenu gets ui-corner-left when closed" );
selectButton = selects.eq( 1 ).selectmenu( "widget" );
selects.eq( 1 ).selectmenu( "open" );
assert.lacksClassStart( selectButton, "ui-corner" );
selects.eq( 1 ).selectmenu( "close" );
assert.lacksClassStart( selectButton, "ui-corner" );
selectButton = selects.eq( 2 ).selectmenu( "widget" );
selects.eq( 2 ).selectmenu( "open" );
assert.hasClasses( selectButton, "ui-corner-tr",
"Horizontal: Last selectmenu gets ui-corner-tr when opened" );
selects.eq( 2 ).selectmenu( "close" );
assert.hasClasses( selectButton, "ui-corner-right",
"Horizontal: Last selectmenu gets ui-corner-right when closed" );
element.controlgroup( "option", "direction", "vertical" );
selectButton = selects.eq( 0 ).selectmenu( "widget" );
selects.eq( 0 ).selectmenu( "open" );
assert.hasClasses( selectButton, "ui-corner-top",
"vertical: First selectmenu gets ui-corner-top when opened" );
selects.eq( 0 ).selectmenu( "close" );
assert.hasClasses( selectButton, "ui-corner-top",
"vertical: First selectmenu gets ui-corner-top when closed" );
selectButton = selects.eq( 1 ).selectmenu( "widget" );
selects.eq( 1 ).selectmenu( "open" );
assert.lacksClassStart( selectButton, "ui-corner" );
selects.eq( 1 ).selectmenu( "close" );
assert.lacksClassStart( selectButton, "ui-corner" );
selectButton = selects.eq( 2 ).selectmenu( "widget" );
selects.eq( 2 ).selectmenu( "open" );
assert.lacksClassStart( selectButton, "ui-corner" );
selects.eq( 2 ).selectmenu( "close" );
assert.hasClasses( selectButton, "ui-corner-bottom",
"vertical: Last selectmenu gets ui-corner-bottom when closed" );
} );
QUnit.test( "selectmenu: controlgroupLabel", function( assert ) {
assert.expect( 2 );
var element = $( ".controlgroup" ).controlgroup();
var label = element.find( ".ui-controlgroup-label" );
assert.hasClasses( label, "ui-widget ui-widget-content ui-state-default ui-controlgroup-item" );
assert.hasClasses( label.find( "span" ), "ui-controlgroup-label-contents" );
} );
var assertSanatized = function( assert, initClasses, expectedClasses, message ) {
var selectmenu = $( "#select-sanatize" ).selectmenu( {
classes: {
"ui-selectmenu-button-open": initClasses
}
} ).selectmenu( "instance" );
var classes = {
"ui-selectmenu-button-open": "ui-corner-top"
};
var result = $.ui.controlgroup.prototype._resolveClassesValues( classes, selectmenu );
assert.deepEqual( result, {
"ui-selectmenu-button-open": expectedClasses + " ui-corner-top"
}, message );
};
QUnit.test( "_resolveClassesValues", function( assert ) {
assert.expect( 6 );
assertSanatized( assert, "bar ui-corner-bottom", "bar", "Single corner class removed end" );
assertSanatized( assert, "ui-corner-bottom bar", "bar", "Single corner class removed beginning" );
assertSanatized( assert, "bar ui-corner-bottom ui-corner-left", "bar", "Multiple corner classes removed end" );
assertSanatized( assert, "ui-corner-bottom ui-corner-left bar", "bar", "Multiple corner classes removed beginning" );
assertSanatized( assert, "bar ui-corner-bottom ui-corner-left foo", "bar foo", "Multiple corner class removed middle" );
assertSanatized( assert, "bar", "bar", "No corner classes" );
} );
QUnit.test( "Single controlgroup select - horizontal", function( assert ) {
assert.expect( 4 );
var group = $( ".controlgroup-single-select" ).controlgroup();
var select = group.find( ".ui-selectmenu-button" );
assert.hasClasses( select, "ui-corner-all" );
assert.lacksClasses( select,
"ui-corner-left ui-corner-right ui-corner-top ui-corner-left" +
" ui-corner-tr ui-corner-tl ui-corner-bl ui corner-br" );
group.find( "select" ).selectmenu( "open" );
assert.hasClasses( select, "ui-corner-top" );
assert.lacksClasses( select,
"ui-corner-left ui-corner-right ui-corner-all ui-corner-left" +
" ui-corner-tr ui-corner-tl ui-corner-bl ui corner-br" );
} );
QUnit.test( "Single controlgroup select - vertical", function( assert ) {
assert.expect( 4 );
var group = $( ".controlgroup-single-select" ).controlgroup( {
direction: "verticle"
} );
var select = group.find( ".ui-selectmenu-button" );
assert.hasClasses( select, "ui-corner-all" );
assert.lacksClasses( select,
"ui-corner-left ui-corner-right ui-corner-top ui-corner-left" +
" ui-corner-tr ui-corner-tl ui-corner-bl ui corner-br" );
group.find( "select" ).selectmenu( "open" );
assert.hasClasses( select, "ui-corner-top" );
assert.lacksClasses( select,
"ui-corner-left ui-corner-right ui-corner-all ui-corner-left" +
" ui-corner-tr ui-corner-tl ui-corner-bl ui corner-br" );
} );
QUnit.test( "Single controlgroup button - horizontal", function( assert ) {
assert.expect( 2 );
var group = $( ".controlgroup-single-button" ).controlgroup();
var button = group.find( "button" );
assert.hasClasses( button, "ui-corner-all" );
assert.lacksClasses( button,
"ui-corner-left ui-corner-right ui-corner-top ui-corner-left" +
" ui-corner-tr ui-corner-tl ui-corner-bl ui corner-br" );
} );
QUnit.test( "Single controlgroup button - vertical", function( assert ) {
assert.expect( 2 );
var group = $( ".controlgroup-single-button" ).controlgroup( {
direction: "verticle"
} );
var button = group.find( "button" );
assert.hasClasses( button, "ui-corner-all" );
assert.lacksClasses( button,
"ui-corner-left ui-corner-right ui-corner-top ui-corner-left" +
" ui-corner-tr ui-corner-tl ui-corner-bl ui corner-br" );
} );
QUnit.module( "Controlgroup: Non-empty class key", {
setup: function() {
this.classKey = $.ui.selectmenu.prototype.options.classes[ "ui-selectmenu-button-closed" ];
$.ui.selectmenu.prototype.options.classes[ "ui-selectmenu-button-closed" ] =
"something-custom";
},
teardown: function() {
$.ui.selectmenu.prototype.options.classes[ "ui-selectmenu-button-closed" ] = this.classKey;
}
} );
QUnit.test( "Controlgroup instantiates child widgets with correct options", function( assert ) {
assert.expect( 1 );
$( ".controlgroup-class-key-init" ).controlgroup();
assert.hasClasses( $( "#class-key-init-child" ).next(), "something-custom" );
} );
QUnit.test( "Controlgroup correctly assigns child widget classes options key", function( assert ) {
assert.expect( 2 );
$( ".controlgroup-class-key-dupe" ).controlgroup();
assert.strictEqual(
( $( "#class-key-dupe-first" )
.selectmenu( "option", "classes.ui-selectmenu-button-closed" )
.match( /something-custom/g ) || [] ).length, 1,
"Class 'something-custom' appears exactly once in the first widget's class key value" );
assert.strictEqual(
( $( "#class-key-dupe-second" )
.selectmenu( "option", "classes.ui-selectmenu-button-closed" )
.match( /something-custom/g ) || [] ).length, 1,
"Class 'something-custom' appears exactly once in the second widget's class key value" );
} );
} );

188
jquery-ui/tests/unit/controlgroup/methods.js vendored Normal file
View file

@ -0,0 +1,188 @@
define( [
"qunit",
"jquery",
"ui/widgets/controlgroup",
"ui/widgets/checkboxradio",
"ui/widgets/selectmenu",
"ui/widgets/button",
"ui/widgets/spinner"
], function( QUnit, $ ) {
QUnit.module( "Controlgroup: methods" );
QUnit.test( "destroy", function( assert ) {
assert.expect( 1 );
assert.domEqual( ".controlgroup", function() {
$( ".controlgroup" ).controlgroup().controlgroup( "destroy" );
$( "#spinner" ).addClass( "ui-spinner-input" );
} );
} );
QUnit.test( "disable", function( assert ) {
assert.expect( 2 );
var element = $( ".controlgroup" ).controlgroup().controlgroup( "disable" );
assert.lacksClasses( element, "ui-state-disabled",
"The widget does not get the disabled class, because we disable each child widget" );
assert.strictEqual( element.find( ".ui-state-disabled" ).length, 9,
"Child widgets are disabled" );
} );
QUnit.test( "enable", function( assert ) {
assert.expect( 2 );
var element = $( ".controlgroup" ).controlgroup().controlgroup( "enable" );
assert.lacksClasses( element, "ui-state-disabled",
"ui-state-disabled is not present on widget after enabling" );
assert.strictEqual( element.find( "ui-state-disabled" ).length, 0,
"Child widgets are disabled" );
} );
var tests = {
"checkboxradio": "<input type='checkbox'>",
"selectmenu": "<select><option>foo</option></select>",
"button": "<button>button text</button>",
"spinner": "<input class='ui-spinner-input'>"
},
orientations = {
"horizontal": [
"ui-corner-left",
false,
false,
"ui-corner-right"
],
"vertical": [
"ui-corner-top",
false,
false,
"ui-corner-bottom"
]
};
// Iterate through supported element markup
$.each( tests, function( widget, html ) {
// Check in both horizontal and vertical orientations
$.each( orientations, function( name, classes ) {
QUnit.test( "refresh: " + widget + ": " + name, function( assert ) {
assert.expect( 41 );
var i, control, label, currentClasses,
controls = [],
element = $( "<div>" ).controlgroup( {
direction: name
} ).appendTo( "body" );
// Checks the elements with in the controlgroup against the expected class list
function checkCornerClasses( classList ) {
for ( var j = 0; j < 4; j++ ) {
if ( classList[ j ] ) {
assert.hasClasses( controls[ j ][ widget ]( "widget" ), classList[ j ] );
} else {
assert.lacksClassStart( controls[ j ][ widget ]( "widget" ), "ui-corner" );
}
}
}
function showElements( index, value ) {
$( value )[ widget ]( "widget" ).show();
}
// Hide each element and check the corner classes
function iterateHidden( onlyVisible ) {
for ( i = 0; i < 4; i++ ) {
$( controls ).each( showElements );
controls[ i ][ widget ]( "widget" ).hide();
currentClasses = classes.slice( 0 );
if ( onlyVisible ) {
if ( i === 0 ) {
currentClasses[ i + 1 ] = classes[ i ];
currentClasses[ i ] = false;
} else if ( i === 3 ) {
currentClasses[ i - 1 ] = classes[ i ];
currentClasses[ i ] = false;
}
}
element.controlgroup( "refresh" );
checkCornerClasses( currentClasses );
}
}
// Add a label for each element and then append the element to the control group
for ( i = 0; i < 4; i++ ) {
control = $( html ).attr( "id", "id" + i );
label = $( "<label>label text</label>" ).attr( "for", "id" + i );
controls.push( control );
element.append( control, label );
}
// Refresh the controlgroup now that its populated
element.controlgroup( "refresh" );
for ( i = 0; i < 4; i++ ) {
assert.strictEqual( controls[ i ].is( ":ui-" + widget ), true,
name + ": " + widget + " " + i + ": is a " + widget + " widget" );
}
// Check that we have the right classes
checkCornerClasses( classes );
// Hide each element and then check its classes
iterateHidden( true );
// Set the exclude option to false so we no longer care about hidden
element.controlgroup( "option", "onlyVisible", false );
// Iterate hiding the elements again and check their corner classes
iterateHidden();
// Disable the first control
if ( widget === "spinner" ) {
controls[ 0 ].spinner( "disable" );
}
controls[ 0 ].prop( "disabled", true );
element.controlgroup( "refresh" );
assert.hasClasses( controls[ 0 ][ widget ]( "widget" ), "ui-state-disabled" );
// Remove the controlgroup before we start the next set
element.remove();
} );
} );
} );
QUnit.test( "Child Classes Option: init", function( assert ) {
assert.expect( 1 );
var selectmenu = $( "#select-pre" ).selectmenu( {
classes: {
"ui-selectmenu-button-closed": "test-class"
}
} );
$( ".controlgroup-pre" ).controlgroup();
assert.hasClasses( selectmenu.selectmenu( "widget" ), "test-class" );
} );
QUnit.test( "Child Classes Option: refresh", function( assert ) {
assert.expect( 1 );
var controlgroup = $( ".controlgroup-refresh" ).controlgroup();
var selectmenu = $( "#select-refresh" ).selectmenu( {
classes: {
"ui-selectmenu-button-closed": "test-class"
}
} );
controlgroup.controlgroup( "refresh" );
assert.hasClasses( selectmenu.selectmenu( "widget" ), "test-class" );
} );
QUnit.test( "Controlgroup Label: refresh", function( assert ) {
assert.expect( 1 );
var controlgroup = $( ".controlgroup-refresh" ).controlgroup();
controlgroup.controlgroup( "refresh" );
assert.strictEqual( controlgroup.find( ".ui-controlgroup-label-contents" ).length, 1,
"Controlgroup label does not re-wrap on refresh" );
} );
} );

111
jquery-ui/tests/unit/controlgroup/options.js vendored Normal file
View file

@ -0,0 +1,111 @@
define( [
"qunit",
"jquery",
"ui/widgets/controlgroup",
"ui/widgets/checkboxradio",
"ui/widgets/selectmenu",
"ui/widgets/button",
"ui/widgets/spinner"
], function( QUnit, $ ) {
QUnit.module( "Controlgroup: options" );
QUnit.test( "disabled", function( assert ) {
assert.expect( 4 );
var element = $( ".controlgroup" ).controlgroup().controlgroup( "option", "disabled", true );
assert.lacksClasses( element, "ui-state-disabled" );
assert.equal( element.find( ".ui-state-disabled" ).length, 9, "Child widgets are disabled" );
element.controlgroup( "option", "disabled", false );
assert.lacksClasses( element, "ui-state-disabled" );
assert.strictEqual( element.find( ".ui-state-disabled" ).length, 0, "Child widgets are not disabled" );
} );
QUnit.test( "items - null", function( assert ) {
assert.expect( 2 );
var element = $( ".controlgroup" ).controlgroup( {
items: {
"button": null,
"selectmenu": null,
"checkboxradio": null
}
} );
assert.strictEqual( element.children( ".ui-button" ).length, 0,
"Child widgets are not called when selector is null" );
element.controlgroup( "option", "items", {
"button": "button"
} );
assert.strictEqual( element.children( ".ui-button" ).length, 2,
"Correct child widgets are called when selector is updated" );
} );
QUnit.test( "items: custom selector", function( assert ) {
assert.expect( 1 );
var element = $( ".controlgroup" ).controlgroup( {
items: {
"button": ".button"
}
} );
assert.strictEqual( element.children( ".ui-button" ).length, 4,
"Correct child widgets are called when custom selector used" );
} );
$.widget( "ui.test", {
_create: function() {
this.element.addClass( "ui-test ui-button" );
},
// Controlgroup requires a refresh method to exist
refresh: $.noop
} );
QUnit.test( "items: custom widget", function( assert ) {
assert.expect( 2 );
var element = $( ".controlgroup" ).controlgroup( {
items: {
"test": ".test"
}
} );
assert.strictEqual( element.children( ".ui-button" ).length, 7,
"Correct child widgets are called when custom selector used" );
assert.strictEqual( element.children( ".ui-test" ).length, 1,
"Custom widget called" );
} );
QUnit.test( "onlyVisible", function( assert ) {
assert.expect( 4 );
var element = $( ".controlgroup" ).controlgroup( {
onlyVisible: false
} ),
buttons = element.children( ".ui-button" );
assert.lacksClassStart( buttons.eq( 1 ), "ui-corner" );
assert.hasClasses( buttons.eq( 0 ), "ui-corner-left",
"onlyVisible: false: First button hidden second button doesn't get a corner class" );
element.controlgroup( "option", "onlyVisible", true );
assert.lacksClassStart( buttons.eq( 0 ), "ui-corner" );
assert.hasClasses( buttons.eq( 1 ), "ui-corner-left",
"onlyVisible: true: First button is hidden second button get corner class" );
} );
QUnit.test( "direction", function( assert ) {
assert.expect( 6 );
var element = $( ".controlgroup" ).controlgroup(),
buttons = element.children( ".ui-button" ).filter( ":visible" );
assert.hasClasses( element, "ui-controlgroup-horizontal" );
assert.hasClasses( buttons.first(), "ui-corner-left" );
assert.hasClasses( buttons.last(), "ui-corner-right" );
element.controlgroup( "option", "direction", "vertical" );
assert.hasClasses( element, "ui-controlgroup-vertical" );
assert.hasClasses( buttons.first(), "ui-corner-top" );
assert.hasClasses( buttons.last(), "ui-corner-bottom" );
} );
} );

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="../../../external/qunit-composite/qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/qunit-composite/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>

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

@ -0,0 +1,214 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Core Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js"></script>
<script src="../../lib/bootstrap.js" data-modules="core selector"></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>
<form>
<fieldset id="enabledFieldset">
<input>
</fieldset>
<fieldset id="disabledFieldset" disabled="disabled">
<input>
</fieldset>
</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>
<span id="nestedVisibilityOverrideAncestor" style="visibility: visible;">
<input id="nestedVisibilityOverrideAncestor-input">
<span tabindex="1" id="nestedVisibilityOverrideAncestor-span">.</span>
</span>
<span tabIndex="1" id="nestedVisibilityInheritWithHiddenAncestor"
style="visibility: inherit;">.</span>
<input id="nestedVisibilityInheritWithHiddenAncestor-input" style="visibility: inherit;">
</div>
<div id="visibilityVisibleAncestor" style="visibility: visible;">
<span tabIndex="1" id="nestedVisibilityInheritWithVisibleAncestor"
style="visibility: inherit;">.</span>
<input id="nestedVisibilityInheritWithVisibleAncestor-input" style="visibility: inherit;">
</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 id="labels-fragment">
<label for="test">1</label>
<div>
<div>
<form>
<label for="test">2</label>
<label>3
<input id="test">
</label>
<label for="test">4</label>
</form>
<label for="test">5</label>
</div>
<div>
<div>
<form>
<label for="test">6</label>
</form>
</div>
</div>
</div>
<div>
<div>
<form>
<label for="test">7</label>
<label>
</label>
<label for="test">8</label>
</form>
<label for="test">9</label>
</div>
<div>
<div>
<form>
<input id="test-2">
<label for="test">10</label>
</form>
</div>
</div>
</div>
</div>
<div id="weird-['x']-id"></div>
</div>
<!-- This is intentionally outside the test fixture. We don't want this
markup to be removed and reinserted between tests, as it will remove saved
refrences in the tests. -->
<div id="form-test">
<input id="body:_implicit_form">
<input id="body:_explicit_form" form="form-1">
<form id="form-1">
<input id="form-1:_implicit_form">
<input id="form-1:_explicit_form" form="form-1">
</form>
<form id="form-2">
<input id="form-2:_implicit_form">
<input id="form-2:_explicit_form_other_form" form="form-1">
</form>
</div>
<div id="form-test-detached">
<input id="fragment:_implicit_form">
<!-- Support: Chrome > 33
When an input with a form attribute is inside a fragment, and not contained by any form,
the form property returns the proper form. However resetting the form does not reset the
input. The following input is commented out to stop the test from failing in this case.
<input id="fragment:_explicit_form" form="form-3">
-->
<form id="form-3">
<input id="form-3:_implicit_form">
<input id="form-3:_explicit_form" form="form-3">
</form>
<form id="form-4">
<input id="form-4:_implicit_form">
<input id="form-4:_explicit_form_other_form" form="form-3">
</form>
</div>
</body>
</html>

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

@ -0,0 +1,208 @@
define( [
"qunit",
"jquery",
"lib/common",
"ui/form",
"ui/labels",
"ui/unique-id"
], function( QUnit, $, common ) {
QUnit.module( "core - jQuery extensions" );
common.testJshint( "core" );
QUnit.test( "innerWidth - getter", function( assert ) {
assert.expect( 2 );
var el = $( "#dimensions" );
assert.equal( el.innerWidth(), 122, "getter passthru" );
el.hide();
assert.equal( el.innerWidth(), 122, "getter passthru when hidden" );
} );
QUnit.test( "innerWidth - setter", function( assert ) {
assert.expect( 2 );
var el = $( "#dimensions" );
el.innerWidth( 120 );
assert.equal( el.width(), 98, "width set properly" );
el.hide();
el.innerWidth( 100 );
assert.equal( el.width(), 78, "width set properly when hidden" );
} );
QUnit.test( "innerHeight - getter", function( assert ) {
assert.expect( 2 );
var el = $( "#dimensions" );
assert.equal( el.innerHeight(), 70, "getter passthru" );
el.hide();
assert.equal( el.innerHeight(), 70, "getter passthru when hidden" );
} );
QUnit.test( "innerHeight - setter", function( assert ) {
assert.expect( 2 );
var el = $( "#dimensions" );
el.innerHeight( 60 );
assert.equal( el.height(), 40, "height set properly" );
el.hide();
el.innerHeight( 50 );
assert.equal( el.height(), 30, "height set properly when hidden" );
} );
QUnit.test( "outerWidth - getter", function( assert ) {
assert.expect( 2 );
var el = $( "#dimensions" );
assert.equal( el.outerWidth(), 140, "getter passthru" );
el.hide();
assert.equal( el.outerWidth(), 140, "getter passthru when hidden" );
} );
QUnit.test( "outerWidth - setter", function( assert ) {
assert.expect( 2 );
var el = $( "#dimensions" );
el.outerWidth( 130 );
assert.equal( el.width(), 90, "width set properly" );
el.hide();
el.outerWidth( 120 );
assert.equal( el.width(), 80, "width set properly when hidden" );
} );
QUnit.test( "outerWidth(true) - getter", function( assert ) {
assert.expect( 2 );
var el = $( "#dimensions" );
assert.equal( el.outerWidth( true ), 154, "getter passthru w/ margin" );
el.hide();
assert.equal( el.outerWidth( true ), 154, "getter passthru w/ margin when hidden" );
} );
QUnit.test( "outerWidth(true) - setter", function( assert ) {
assert.expect( 2 );
var el = $( "#dimensions" );
el.outerWidth( 130, true );
assert.equal( el.width(), 76, "width set properly" );
el.hide();
el.outerWidth( 120, true );
assert.equal( el.width(), 66, "width set properly when hidden" );
} );
QUnit.test( "outerHeight - getter", function( assert ) {
assert.expect( 2 );
var el = $( "#dimensions" );
assert.equal( el.outerHeight(), 86, "getter passthru" );
el.hide();
assert.equal( el.outerHeight(), 86, "getter passthru when hidden" );
} );
QUnit.test( "outerHeight - setter", function( assert ) {
assert.expect( 2 );
var el = $( "#dimensions" );
el.outerHeight( 80 );
assert.equal( el.height(), 44, "height set properly" );
el.hide();
el.outerHeight( 70 );
assert.equal( el.height(), 34, "height set properly when hidden" );
} );
QUnit.test( "outerHeight(true) - getter", function( assert ) {
assert.expect( 2 );
var el = $( "#dimensions" );
assert.equal( el.outerHeight( true ), 98, "getter passthru w/ margin" );
el.hide();
assert.equal( el.outerHeight( true ), 98, "getter passthru w/ margin when hidden" );
} );
QUnit.test( "outerHeight(true) - setter", function( assert ) {
assert.expect( 2 );
var el = $( "#dimensions" );
el.outerHeight( 90, true );
assert.equal( el.height(), 42, "height set properly" );
el.hide();
el.outerHeight( 80, true );
assert.equal( el.height(), 32, "height set properly when hidden" );
} );
QUnit.test( "uniqueId / removeUniqueId", function( assert ) {
assert.expect( 3 );
var el = $( "img" ).eq( 0 );
assert.equal( el.attr( "id" ), null, "element has no initial id" );
el.uniqueId();
assert.ok( /ui-id-\d+$/.test( el.attr( "id" ) ), "element has generated id" );
el.removeUniqueId();
assert.equal( el.attr( "id" ), null, "unique id has been removed from element" );
} );
QUnit.test( "Labels", function( assert ) {
assert.expect( 2 );
var expected = [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10" ];
var dom = $( "#labels-fragment" );
function testLabels( testType ) {
var labels = dom.find( "#test" ).labels();
var found = labels.map( function() {
// Support: Core 1.9 Only
// We use $.trim() because core 1.9.x silently fails when white space is present
return $.trim( $( this ).text() );
} ).get();
assert.deepEqual( found, expected,
".labels() finds all labels in " + testType + ", and sorts them in DOM order" );
}
testLabels( "the DOM" );
// Detach the dom to test on a fragment
dom.detach();
testLabels( "document fragments" );
} );
( function() {
var domAttached = $( "#form-test" );
var domDetached = $( "#form-test-detached" ).detach();
function testForm( name, dom ) {
var inputs = dom.find( "input" );
inputs.each( function() {
var input = $( this );
QUnit.test( name + this.id.replace( /_/g, " " ), function( assert ) {
var ready = assert.async();
assert.expect( 1 );
var form = input.form();
// If input has a form the value should reset to "" if not it should be "changed"
var value = form.length ? "" : "changed";
input.val( "changed" );
// If there is a form we reset just that. If there is not a form, reset every form.
// The idea is if a form is found resetting that form should reset the input.
// If no form is found no amount of resetting should change the value.
( form.length ? form : dom.find( "form" ).addBack( "form" ) ).each( function() {
this.reset();
} );
setTimeout( function() {
assert.equal( input.val(), value, "Proper form found for #" + input.attr( "id" ) );
ready();
} );
} );
} );
}
testForm( "form: attached: ", domAttached );
testForm( "form: detached: ", domDetached );
} )();
} );

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

@ -0,0 +1,285 @@
define( [
"qunit",
"jquery",
"ui/data",
"ui/escape-selector",
"ui/focusable",
"ui/tabbable"
], function( QUnit, $ ) {
QUnit.module( "core - selectors" );
QUnit.assert.isFocusable = function( selector, msg ) {
this.push( $( selector ).is( ":focusable" ), null, null,
msg + " - selector " + selector + " is focusable" );
};
QUnit.assert.isNotFocusable = function( selector, msg ) {
this.push( $( selector ).length && !$( selector ).is( ":focusable" ), null, null,
msg + " - selector " + selector + " is not focusable" );
};
QUnit.assert.isTabbable = function( selector, msg ) {
this.push( $( selector ).is( ":tabbable" ), null, null,
msg + " - selector " + selector + " is tabbable" );
};
QUnit.assert.isNotTabbable = function( selector, msg ) {
this.push( $( selector ).length && !$( selector ).is( ":tabbable" ), null, null,
msg + " - selector " + selector + " is not tabbable" );
};
QUnit.test( "data", function( assert ) {
assert.expect( 15 );
var element;
function shouldHaveData( msg ) {
assert.ok( element.is( ":data(test)" ), msg );
}
function shouldNotHaveData( msg ) {
assert.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" );
} );
QUnit.test( "focusable - visible, enabled elements", function( assert ) {
assert.expect( 22 );
assert.isNotFocusable( "#formNoTabindex", "form" );
assert.isFocusable( "#formTabindex", "form with tabindex" );
assert.isFocusable( "#enabledFieldset input", "input in enabled fieldset" );
assert.isNotFocusable( "#disabledFieldset input", "input in disabled fieldset" );
assert.isFocusable( "#visibleAncestor-inputTypeNone", "input, no type" );
assert.isFocusable( "#visibleAncestor-inputTypeText", "input, type text" );
assert.isFocusable( "#visibleAncestor-inputTypeCheckbox", "input, type checkbox" );
assert.isFocusable( "#visibleAncestor-inputTypeRadio", "input, type radio" );
assert.isFocusable( "#visibleAncestor-inputTypeButton", "input, type button" );
assert.isNotFocusable( "#visibleAncestor-inputTypeHidden", "input, type hidden" );
assert.isFocusable( "#visibleAncestor-button", "button" );
assert.isFocusable( "#visibleAncestor-select", "select" );
assert.isFocusable( "#visibleAncestor-textarea", "textarea" );
assert.isFocusable( "#visibleAncestor-object", "object" );
assert.isFocusable( "#visibleAncestor-anchorWithHref", "anchor with href" );
assert.isNotFocusable( "#visibleAncestor-anchorWithoutHref", "anchor without href" );
assert.isNotFocusable( "#visibleAncestor-span", "span" );
assert.isNotFocusable( "#visibleAncestor-div", "div" );
assert.isFocusable( "#visibleAncestor-spanWithTabindex", "span with tabindex" );
assert.isFocusable( "#visibleAncestor-divWithNegativeTabindex", "div with tabindex" );
assert.isFocusable( "#nestedVisibilityInheritWithVisibleAncestor",
"span, visibility: inherit inside visibility: visible parent" );
assert.isFocusable( "#nestedVisibilityInheritWithVisibleAncestor-input",
"input, visibility: inherit inside visibility: visible parent" );
} );
QUnit.test( "focusable - disabled elements", function( assert ) {
assert.expect( 9 );
assert.isNotFocusable( "#disabledElement-inputTypeNone", "input, no type" );
assert.isNotFocusable( "#disabledElement-inputTypeText", "input, type text" );
assert.isNotFocusable( "#disabledElement-inputTypeCheckbox", "input, type checkbox" );
assert.isNotFocusable( "#disabledElement-inputTypeRadio", "input, type radio" );
assert.isNotFocusable( "#disabledElement-inputTypeButton", "input, type button" );
assert.isNotFocusable( "#disabledElement-inputTypeHidden", "input, type hidden" );
assert.isNotFocusable( "#disabledElement-button", "button" );
assert.isNotFocusable( "#disabledElement-select", "select" );
assert.isNotFocusable( "#disabledElement-textarea", "textarea" );
} );
QUnit.test( "focusable - hidden styles", function( assert ) {
assert.expect( 12 );
assert.isNotFocusable( "#displayNoneAncestor-input", "input, display: none parent" );
assert.isNotFocusable( "#displayNoneAncestor-span", "span with tabindex, display: none parent" );
assert.isNotFocusable( "#visibilityHiddenAncestor-input", "input, visibility: hidden parent" );
assert.isNotFocusable( "#visibilityHiddenAncestor-span", "span with tabindex, visibility: hidden parent" );
assert.isFocusable( "#nestedVisibilityOverrideAncestor-input", "input, visibility: visible parent but visibility: hidden grandparent" );
assert.isFocusable( "#nestedVisibilityOverrideAncestor-span", "span with tabindex, visibility: visible parent but visibility: hidden grandparent " );
assert.isNotFocusable( "#nestedVisibilityInheritWithHiddenAncestor", "span, visibility: inherit inside visibility: hidden parent" );
assert.isNotFocusable( "#nestedVisibilityInheritWithHiddenAncestor-input", "input, visibility: inherit inside visibility: hidden parent" );
assert.isNotFocusable( "#displayNone-input", "input, display: none" );
assert.isNotFocusable( "#visibilityHidden-input", "input, visibility: hidden" );
assert.isNotFocusable( "#displayNone-span", "span with tabindex, display: none" );
assert.isNotFocusable( "#visibilityHidden-span", "span with tabindex, visibility: hidden" );
} );
QUnit.test( "focusable - natively focusable with various tabindex", function( assert ) {
assert.expect( 4 );
assert.isFocusable( "#inputTabindex0", "input, tabindex 0" );
assert.isFocusable( "#inputTabindex10", "input, tabindex 10" );
assert.isFocusable( "#inputTabindex-1", "input, tabindex -1" );
assert.isFocusable( "#inputTabindex-50", "input, tabindex -50" );
} );
QUnit.test( "focusable - not natively focusable with various tabindex", function( assert ) {
assert.expect( 4 );
assert.isFocusable( "#spanTabindex0", "span, tabindex 0" );
assert.isFocusable( "#spanTabindex10", "span, tabindex 10" );
assert.isFocusable( "#spanTabindex-1", "span, tabindex -1" );
assert.isFocusable( "#spanTabindex-50", "span, tabindex -50" );
} );
QUnit.test( "focusable - area elements", function( assert ) {
assert.expect( 3 );
assert.isFocusable( "#areaCoordsHref", "coords and href" );
assert.isFocusable( "#areaNoCoordsHref", "href but no coords" );
assert.isNotFocusable( "#areaNoImg", "not associated with an image" );
} );
QUnit.test( "focusable - dimensionless parent with overflow", function( assert ) {
assert.expect( 1 );
assert.isFocusable( "#dimensionlessParent", "input" );
} );
QUnit.test( "tabbable - visible, enabled elements", function( assert ) {
assert.expect( 20 );
assert.isNotTabbable( "#formNoTabindex", "form" );
assert.isTabbable( "#formTabindex", "form with tabindex" );
assert.isTabbable( "#enabledFieldset input", "input in enabled fieldset" );
assert.isNotTabbable( "#disabledFieldset input", "input in disabled fieldset" );
assert.isTabbable( "#visibleAncestor-inputTypeNone", "input, no type" );
assert.isTabbable( "#visibleAncestor-inputTypeText", "input, type text" );
assert.isTabbable( "#visibleAncestor-inputTypeCheckbox", "input, type checkbox" );
assert.isTabbable( "#visibleAncestor-inputTypeRadio", "input, type radio" );
assert.isTabbable( "#visibleAncestor-inputTypeButton", "input, type button" );
assert.isNotTabbable( "#visibleAncestor-inputTypeHidden", "input, type hidden" );
assert.isTabbable( "#visibleAncestor-button", "button" );
assert.isTabbable( "#visibleAncestor-select", "select" );
assert.isTabbable( "#visibleAncestor-textarea", "textarea" );
assert.isTabbable( "#visibleAncestor-object", "object" );
assert.isTabbable( "#visibleAncestor-anchorWithHref", "anchor with href" );
assert.isNotTabbable( "#visibleAncestor-anchorWithoutHref", "anchor without href" );
assert.isNotTabbable( "#visibleAncestor-span", "span" );
assert.isNotTabbable( "#visibleAncestor-div", "div" );
assert.isTabbable( "#visibleAncestor-spanWithTabindex", "span with tabindex" );
assert.isNotTabbable( "#visibleAncestor-divWithNegativeTabindex", "div with tabindex" );
} );
QUnit.test( "tabbable - disabled elements", function( assert ) {
assert.expect( 9 );
assert.isNotTabbable( "#disabledElement-inputTypeNone", "input, no type" );
assert.isNotTabbable( "#disabledElement-inputTypeText", "input, type text" );
assert.isNotTabbable( "#disabledElement-inputTypeCheckbox", "input, type checkbox" );
assert.isNotTabbable( "#disabledElement-inputTypeRadio", "input, type radio" );
assert.isNotTabbable( "#disabledElement-inputTypeButton", "input, type button" );
assert.isNotTabbable( "#disabledElement-inputTypeHidden", "input, type hidden" );
assert.isNotTabbable( "#disabledElement-button", "button" );
assert.isNotTabbable( "#disabledElement-select", "select" );
assert.isNotTabbable( "#disabledElement-textarea", "textarea" );
} );
QUnit.test( "tabbable - hidden styles", function( assert ) {
assert.expect( 10 );
assert.isNotTabbable( "#displayNoneAncestor-input", "input, display: none parent" );
assert.isNotTabbable( "#displayNoneAncestor-span", "span with tabindex, display: none parent" );
assert.isNotTabbable( "#visibilityHiddenAncestor-input", "input, visibility: hidden parent" );
assert.isNotTabbable( "#visibilityHiddenAncestor-span", "span with tabindex, visibility: hidden parent" );
assert.isTabbable( "#nestedVisibilityOverrideAncestor-input", "input, visibility: visible parent but visibility: hidden grandparent" );
assert.isTabbable( "#nestedVisibilityOverrideAncestor-span", "span with tabindex, visibility: visible parent but visibility: hidden grandparent " );
assert.isNotTabbable( "#displayNone-input", "input, display: none" );
assert.isNotTabbable( "#visibilityHidden-input", "input, visibility: hidden" );
assert.isNotTabbable( "#displayNone-span", "span with tabindex, display: none" );
assert.isNotTabbable( "#visibilityHidden-span", "span with tabindex, visibility: hidden" );
} );
QUnit.test( "tabbable - natively tabbable with various tabindex", function( assert ) {
assert.expect( 4 );
assert.isTabbable( "#inputTabindex0", "input, tabindex 0" );
assert.isTabbable( "#inputTabindex10", "input, tabindex 10" );
assert.isNotTabbable( "#inputTabindex-1", "input, tabindex -1" );
assert.isNotTabbable( "#inputTabindex-50", "input, tabindex -50" );
} );
QUnit.test( "tabbable - not natively tabbable with various tabindex", function( assert ) {
assert.expect( 4 );
assert.isTabbable( "#spanTabindex0", "span, tabindex 0" );
assert.isTabbable( "#spanTabindex10", "span, tabindex 10" );
assert.isNotTabbable( "#spanTabindex-1", "span, tabindex -1" );
assert.isNotTabbable( "#spanTabindex-50", "span, tabindex -50" );
} );
QUnit.test( "tabbable - area elements", function( assert ) {
assert.expect( 3 );
assert.isTabbable( "#areaCoordsHref", "coords and href" );
assert.isTabbable( "#areaNoCoordsHref", "href but no coords" );
assert.isNotTabbable( "#areaNoImg", "not associated with an image" );
} );
QUnit.test( "tabbable - dimensionless parent with overflow", function( assert ) {
assert.expect( 1 );
assert.isTabbable( "#dimensionlessParent", "input" );
} );
QUnit.test( "escapeSelector", function( assert ) {
assert.expect( 1 );
assert.equal( $( "#" + $.ui.escapeSelector( "weird-['x']-id" ) ).length, 1,
"properly escapes selectors to use as an id" );
} );
} );

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="../../../external/qunit-composite/qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/qunit-composite/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>

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

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

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

@ -0,0 +1,545 @@
define( [
"qunit",
"jquery",
"lib/common",
"./helper",
"ui/widgets/datepicker",
"ui/i18n/datepicker-he"
], function( QUnit, $, common, testHelper ) {
QUnit.module( "datepicker: core", {
beforeEach: function() {
$( "body" ).trigger( "focus" );
}
} );
common.testJshint( "widgets/datepicker" );
QUnit.test( "initialization - Reinitialization after body had been emptied.", function( assert ) {
assert.expect( 1 );
var bodyContent = $( "body" ).children(), inp = $( "#inp" );
$( "#inp" ).datepicker();
$( "body" ).empty().append( inp );
$( "#inp" ).datepicker();
assert.ok( $( "#" + $.datepicker._mainDivId ).length === 1, "Datepicker container added" );
$( "body" ).empty().append( bodyContent ); // Returning to initial state for later tests
} );
QUnit.test( "widget method - empty collection", function( assert ) {
assert.expect( 1 );
$( "#nonExist" ).datepicker(); // Should create nothing
assert.ok( !$( "#ui-datepicker-div" ).length, "Non init on empty collection" );
} );
QUnit.test( "widget method", function( assert ) {
assert.expect( 1 );
var actual = $( "#inp" ).datepicker().datepicker( "widget" )[ 0 ];
assert.deepEqual( $( "body > #ui-datepicker-div:last-child" )[ 0 ], actual );
} );
QUnit.test( "baseStructure", function( assert ) {
var ready = assert.async();
assert.expect( 58 );
var header, title, table, thead, week, panel, inl, child,
inp = testHelper.initNewInput(),
dp = $( "#ui-datepicker-div" );
function step1() {
testHelper.onFocus( inp, function() {
assert.ok( dp.is( ":visible" ), "Structure - datepicker visible" );
assert.ok( !dp.is( ".ui-datepicker-rtl" ), "Structure - not right-to-left" );
assert.ok( !dp.is( ".ui-datepicker-multi" ), "Structure - not multi-month" );
assert.equal( dp.children().length, 2, "Structure - child count" );
header = dp.children( ":first" );
assert.ok( header.is( "div.ui-datepicker-header" ), "Structure - header division" );
assert.equal( header.children().length, 3, "Structure - header child count" );
assert.ok( header.children( ":first" ).is( "a.ui-datepicker-prev" ) && header.children( ":first" ).html() !== "", "Structure - prev link" );
assert.ok( header.children( ":eq(1)" ).is( "a.ui-datepicker-next" ) && header.children( ":eq(1)" ).html() !== "", "Structure - next link" );
title = header.children( ":last" );
assert.ok( title.is( "div.ui-datepicker-title" ) && title.html() !== "", "Structure - title division" );
assert.equal( title.children().length, 2, "Structure - title child count" );
assert.ok( title.children( ":first" ).is( "span.ui-datepicker-month" ) && title.children( ":first" ).text() !== "", "Structure - month text" );
assert.ok( title.children( ":last" ).is( "span.ui-datepicker-year" ) && title.children( ":last" ).text() !== "", "Structure - year text" );
table = dp.children( ":eq(1)" );
assert.ok( table.is( "table.ui-datepicker-calendar" ), "Structure - month table" );
assert.ok( table.children( ":first" ).is( "thead" ), "Structure - month table thead" );
thead = table.children( ":first" ).children( ":first" );
assert.ok( thead.is( "tr" ), "Structure - month table title row" );
assert.equal( thead.find( "th" ).length, 7, "Structure - month table title cells" );
assert.ok( table.children( ":eq(1)" ).is( "tbody" ), "Structure - month table body" );
assert.ok( table.children( ":eq(1)" ).children( "tr" ).length >= 4, "Structure - month table week count" );
week = table.children( ":eq(1)" ).children( ":first" );
assert.ok( week.is( "tr" ), "Structure - month table week row" );
assert.equal( week.children().length, 7, "Structure - week child count" );
assert.ok( week.children( ":first" ).is( "td.ui-datepicker-week-end" ), "Structure - month table first day cell" );
assert.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 = testHelper.initNewInput( {
changeMonth: true,
changeYear: true,
showButtonPanel: true
} );
testHelper.onFocus( inp, function() {
title = dp.find( "div.ui-datepicker-title" );
assert.ok( title.children( ":first" ).is( "select.ui-datepicker-month" ), "Structure - month selector" );
assert.ok( title.children( ":last" ).is( "select.ui-datepicker-year" ), "Structure - year selector" );
panel = dp.children( ":last" );
assert.ok( panel.is( "div.ui-datepicker-buttonpane" ), "Structure - button panel division" );
assert.equal( panel.children().length, 2, "Structure - button panel child count" );
assert.ok( panel.children( ":first" ).is( "button.ui-datepicker-current" ), "Structure - today button" );
assert.ok( panel.children( ":last" ).is( "button.ui-datepicker-close" ), "Structure - close button" );
inp.datepicker( "hide" ).datepicker( "destroy" );
step3();
} );
}
function step3() {
// Multi-month 2
inp = testHelper.initNewInput( { numberOfMonths: 2 } );
testHelper.onFocus( inp, function() {
assert.ok( dp.is( ".ui-datepicker-multi" ), "Structure multi [2] - multi-month" );
assert.equal( dp.children().length, 3, "Structure multi [2] - child count" );
child = dp.children( ":first" );
assert.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)" );
assert.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)" );
assert.ok( child.is( "div.ui-datepicker-row-break" ), "Structure multi [2] - row break" );
assert.ok( dp.is( ".ui-datepicker-multi-2" ), "Structure multi [2] - multi-2" );
inp.datepicker( "hide" ).datepicker( "destroy" );
step4();
} );
}
function step4() {
// Multi-month 3
inp = testHelper.initNewInput( { numberOfMonths: 3 } );
testHelper.onFocus( inp, function() {
assert.ok( dp.is( ".ui-datepicker-multi-3" ), "Structure multi [3] - multi-3" );
assert.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 = testHelper.initNewInput( { numberOfMonths: [ 2, 2 ] } );
testHelper.onFocus( inp, function() {
assert.ok( dp.is( ".ui-datepicker-multi" ), "Structure multi - multi-month" );
assert.equal( dp.children().length, 6, "Structure multi [2,2] - child count" );
child = dp.children( ":first" );
assert.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)" );
assert.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)" );
assert.ok( child.is( "div.ui-datepicker-row-break" ), "Structure multi [2,2] - row break" );
child = dp.children( ":eq(3)" );
assert.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)" );
assert.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)" );
assert.ok( child.is( "div.ui-datepicker-row-break" ), "Structure multi [2,2] - row break" );
inp.datepicker( "hide" ).datepicker( "destroy" );
// Inline
inl = testHelper.init( "#inl" );
dp = inl.children();
assert.ok( dp.is( ".ui-datepicker-inline" ), "Structure inline - main div" );
assert.ok( !dp.is( ".ui-datepicker-rtl" ), "Structure inline - not right-to-left" );
assert.ok( !dp.is( ".ui-datepicker-multi" ), "Structure inline - not multi-month" );
assert.equal( dp.children().length, 2, "Structure inline - child count" );
header = dp.children( ":first" );
assert.ok( header.is( "div.ui-datepicker-header" ), "Structure inline - header division" );
assert.equal( header.children().length, 3, "Structure inline - header child count" );
table = dp.children( ":eq(1)" );
assert.ok( table.is( "table.ui-datepicker-calendar" ), "Structure inline - month table" );
assert.ok( table.children( ":first" ).is( "thead" ), "Structure inline - month table thead" );
assert.ok( table.children( ":eq(1)" ).is( "tbody" ), "Structure inline - month table body" );
inl.datepicker( "destroy" );
// Inline multi-month
inl = testHelper.init( "#inl", { numberOfMonths: 2 } );
dp = inl.children();
assert.ok( dp.is( ".ui-datepicker-inline" ) && dp.is( ".ui-datepicker-multi" ), "Structure inline multi - main div" );
assert.equal( dp.children().length, 3, "Structure inline multi - child count" );
child = dp.children( ":first" );
assert.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)" );
assert.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)" );
assert.ok( child.is( "div.ui-datepicker-row-break" ), "Structure inline multi - row break" );
inl.datepicker( "destroy" );
ready();
} );
}
step1();
} );
QUnit.test( "customStructure", function( assert ) {
var ready = assert.async();
assert.expect( 20 );
var header, panel, title, thead,
inp = testHelper.initNewInput( $.datepicker.regional.he ),
dp = $( "#ui-datepicker-div" );
function step1() {
inp.datepicker( "option", "showButtonPanel", true );
testHelper.onFocus( inp, function() {
assert.ok( dp.is( ".ui-datepicker-rtl" ), "Structure RTL - right-to-left" );
header = dp.children( ":first" );
assert.ok( header.is( "div.ui-datepicker-header" ), "Structure RTL - header division" );
assert.equal( header.children().length, 3, "Structure RTL - header child count" );
assert.ok( header.children( ":first" ).is( "a.ui-datepicker-next" ), "Structure RTL - prev link" );
assert.ok( header.children( ":eq(1)" ).is( "a.ui-datepicker-prev" ), "Structure RTL - next link" );
panel = dp.children( ":last" );
assert.ok( panel.is( "div.ui-datepicker-buttonpane" ), "Structure RTL - button division" );
assert.equal( panel.children().length, 2, "Structure RTL - button panel child count" );
assert.ok( panel.children( ":first" ).is( "button.ui-datepicker-close" ), "Structure RTL - close button" );
assert.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 = testHelper.initNewInput( {
hideIfNoPrevNext: true,
minDate: new Date( 2008, 2 - 1, 4 ),
maxDate: new Date( 2008, 2 - 1, 14 )
} );
inp.val( "02/10/2008" );
testHelper.onFocus( inp, function() {
header = dp.children( ":first" );
assert.ok( header.is( "div.ui-datepicker-header" ), "Structure hide prev/next - header division" );
assert.equal( header.children().length, 1, "Structure hide prev/next - links child count" );
assert.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 = testHelper.initNewInput( { changeMonth: true } );
testHelper.onFocus( inp, function() {
title = dp.children( ":first" ).children( ":last" );
assert.equal( title.children().length, 2, "Structure changeable month - title child count" );
assert.ok( title.children( ":first" ).is( "select.ui-datepicker-month" ), "Structure changeable month - month selector" );
assert.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 = testHelper.initNewInput( { changeYear: true } );
testHelper.onFocus( inp, function() {
title = dp.children( ":first" ).children( ":last" );
assert.equal( title.children().length, 2, "Structure changeable year - title child count" );
assert.ok( title.children( ":first" ).is( "span.ui-datepicker-month" ), "Structure changeable year - read-only month" );
assert.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 = testHelper.initNewInput( { changeFirstDay: false } );
testHelper.onFocus( inp, function() {
thead = dp.find( ".ui-datepicker-calendar thead tr" );
assert.equal( thead.children().length, 7, "Structure read-only first day - thead child count" );
assert.equal( thead.find( "a" ).length, 0, "Structure read-only first day - thead links count" );
inp.datepicker( "hide" ).datepicker( "destroy" );
ready();
} );
}
// 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 );
} );
QUnit.test( "keystrokes", function( assert ) {
assert.expect( 26 );
var inp = testHelper.init( "#inp" ),
date = new Date();
inp.val( "" ).datepicker( "show" ).
simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
testHelper.equalsDate( assert, inp.datepicker( "getDate" ), date, "Keystroke enter" );
inp.val( "02/04/2008" ).datepicker( "show" ).
simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
testHelper.equalsDate( assert, 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 } );
testHelper.equalsDate( assert, inp.datepicker( "getDate" ), date, "Keystroke ctrl+home" );
inp.val( "02/04/2008" ).datepicker( "show" ).
simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.END } );
assert.ok( inp.datepicker( "getDate" ) == null, "Keystroke ctrl+end" );
inp.val( "" ).datepicker( "show" ).
simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } );
assert.ok( inp.datepicker( "getDate" ) == null, "Keystroke esc" );
inp.val( "02/04/2008" ).datepicker( "show" ).
simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } );
testHelper.equalsDate( assert, 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 } );
testHelper.equalsDate( assert, 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 );
testHelper.equalsDate( assert, 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 );
testHelper.equalsDate( assert, 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 );
testHelper.equalsDate( assert, 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 );
testHelper.equalsDate( assert, 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 );
testHelper.equalsDate( assert, 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 );
testHelper.equalsDate( assert, 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 );
testHelper.equalsDate( assert, 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 );
testHelper.equalsDate( assert, 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 } );
testHelper.equalsDate( assert, 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 } );
testHelper.equalsDate( assert, 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 } );
testHelper.equalsDate( assert, 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 } );
testHelper.equalsDate( assert, 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 } );
testHelper.equalsDate( assert, 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 } );
testHelper.equalsDate( assert, 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 } );
testHelper.equalsDate( assert, 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 } );
testHelper.equalsDate( assert, 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 } );
testHelper.equalsDate( assert, 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 } );
testHelper.equalsDate( assert, 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 } );
testHelper.equalsDate( assert, inp.datepicker( "getDate" ), new Date( 2008, 4 - 1, 4 ),
"Keystroke pgdn step 2" );
} );
QUnit.test( "mouse", function( assert ) {
assert.expect( 15 );
var inl,
inp = testHelper.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 );
testHelper.equalsDate( assert, inp.datepicker( "getDate" ), date, "Mouse click" );
inp.val( "02/04/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar tbody a:contains(12)", dp ).simulate( "click", {} );
testHelper.equalsDate( assert, 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", {} );
assert.ok( inp.datepicker( "getDate" ) == null, "Mouse click - close" );
inp.val( "02/04/2008" ).datepicker( "show" );
$( "button.ui-datepicker-close", dp ).simulate( "click", {} );
testHelper.equalsDate( assert, 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", {} );
testHelper.equalsDate( assert, 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 );
testHelper.equalsDate( assert, 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" );
testHelper.equalsDate( assert, 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" );
testHelper.equalsDate( assert, 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" );
testHelper.equalsDate( assert, 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" );
testHelper.equalsDate( assert, inp.datepicker( "getDate" ), new Date( 2008, 2 - 1, 18 ),
"Mouse click - next + min/max" );
// Inline
inl = testHelper.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 );
testHelper.equalsDate( assert, 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", {} );
testHelper.equalsDate( assert, 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 );
testHelper.equalsDate( assert, 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" );
testHelper.equalsDate( assert, 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" );
testHelper.equalsDate( assert, inl.datepicker( "getDate" ), new Date( 2008, 3 - 1, 18 ),
"Mouse click inline - next" );
} );
} );

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

@ -0,0 +1,21 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js" data-modules="core datepicker"></script>
<script src="../../lib/bootstrap.js" data-widget="datepicker"></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>

163
jquery-ui/tests/unit/datepicker/events.js vendored Normal file
View file

@ -0,0 +1,163 @@
define( [
"qunit",
"jquery",
"./helper",
"ui/widgets/datepicker"
], function( QUnit, $, testHelper ) {
QUnit.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;
}
QUnit.test( "events", function( assert ) {
assert.expect( 26 );
var dateStr, newMonthYear, inp2,
inp = testHelper.init( "#inp", { onSelect: callback } ),
date = new Date();
// OnSelect
inp.val( "" ).datepicker( "show" ).
simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
assert.equal( selectedThis, inp[ 0 ], "Callback selected this" );
assert.equal( selectedInst, $.data( inp[ 0 ], testHelper.PROP_NAME ), "Callback selected inst" );
assert.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 );
assert.equal( selectedDate, $.datepicker.formatDate( "mm/dd/yy", date ),
"Callback selected date - ctrl+down" );
inp.val( "" ).datepicker( "show" ).
simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } );
assert.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 } );
assert.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 );
assert.equal( selectedThis, inp[ 0 ], "Callback change month/year this" );
assert.equal( selectedInst, $.data( inp[ 0 ], testHelper.PROP_NAME ), "Callback change month/year inst" );
assert.equal( selectedDate, newMonthYear( date ),
"Callback change month/year date - pgup" );
inp.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } );
date.setMonth( date.getMonth() + 1 );
assert.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 );
assert.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 );
assert.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 );
assert.equal( selectedDate, newMonthYear( date ),
"Callback change month/year date - ctrl+pgdn" );
inp.datepicker( "setDate", new Date( 2007, 1 - 1, 26 ) );
assert.equal( selectedDate, "2007/1", "Callback change month/year date - setDate" );
selectedDate = null;
inp.datepicker( "setDate", new Date( 2007, 1 - 1, 12 ) );
assert.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 );
assert.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 );
assert.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 );
assert.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 );
assert.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 } );
assert.equal( selectedThis, inp[ 0 ], "Callback close this" );
assert.equal( selectedInst, $.data( inp[ 0 ], testHelper.PROP_NAME ), "Callback close inst" );
assert.equal( selectedDate, "", "Callback close date - esc" );
inp.val( "" ).datepicker( "show" ).
simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
assert.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 } );
assert.equal( selectedDate, "02/04/2008", "Callback close date - preset" );
inp.val( "02/04/2008" ).datepicker( "show" ).
simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.END } );
assert.equal( selectedDate, "", "Callback close date - ctrl+end" );
inp2 = testHelper.init( "#inp2" );
inp2.datepicker().datepicker( "option", { onClose: callback } ).datepicker( "show" );
inp.datepicker( "show" );
assert.equal( selectedThis, inp2[ 0 ], "Callback close this" );
} );
QUnit.test( "beforeShowDay-getDate", function( assert ) {
assert.expect( 3 );
var inp = testHelper.init( "#inp", { beforeShowDay: function() { inp.datepicker( "getDate" ); return [ true, "" ]; } } ),
dp = $( "#ui-datepicker-div" );
inp.val( "01/01/2010" ).datepicker( "show" );
// Contains non-breaking space
assert.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 ).trigger( "click" );
$( "a.ui-datepicker-next", dp ).trigger( "click" );
// Contains non-breaking space
assert.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 ).trigger( "click" );
$( "a.ui-datepicker-prev", dp ).trigger( "click" );
// Contains non-breaking space
assert.equal( $( "div.ui-datepicker-title" ).text(),
$( "<span>November&#xa0;2009</span>" ).text(), "After prev clicks" );
inp.datepicker( "hide" );
} );
} );

39
jquery-ui/tests/unit/datepicker/helper.js vendored Normal file
View file

@ -0,0 +1,39 @@
define( [
"qunit",
"jquery",
"lib/helper",
"ui/widgets/datepicker"
], function( QUnit, $, helper ) {
return $.extend( helper, {
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( assert, d1, d2, message ) {
if ( !d1 || !d2 ) {
assert.ok( false, message + " - missing date" );
return;
}
d1 = new Date( d1.getFullYear(), d1.getMonth(), d1.getDate() );
d2 = new Date( d2.getFullYear(), d2.getMonth(), d2.getDate() );
assert.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 this.init( id, options );
},
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

134
jquery-ui/tests/unit/datepicker/methods.js vendored Normal file
View file

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

1154
jquery-ui/tests/unit/datepicker/options.js vendored Normal file
View file

File diff suppressed because it is too large Load diff

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="../../../external/qunit-composite/qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/qunit-composite/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>

54
jquery-ui/tests/unit/dialog/common-deprecated.js vendored Normal file
View file

@ -0,0 +1,54 @@
define( [
"lib/common",
"ui/widgets/dialog"
], function( common ) {
common.testWidget( "dialog", {
defaults: {
appendTo: "body",
autoOpen: true,
buttons: [],
classes: {
"ui-dialog": "ui-corner-all",
"ui-dialog-titlebar": "ui-corner-all"
},
closeOnEscape: true,
closeText: "Close",
dialogClass: "",
disabled: false,
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
}
} );
} );

53
jquery-ui/tests/unit/dialog/common.js vendored Normal file
View file

@ -0,0 +1,53 @@
define( [
"lib/common",
"ui/widgets/dialog"
], function( common ) {
common.testWidget( "dialog", {
defaults: {
appendTo: "body",
autoOpen: true,
buttons: [],
classes: {
"ui-dialog": "ui-corner-all",
"ui-dialog-titlebar": "ui-corner-all"
},
closeOnEscape: true,
closeText: "Close",
disabled: false,
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
}
} );
} );

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

@ -0,0 +1,319 @@
define( [
"qunit",
"jquery",
"ui/widgets/dialog"
], function( QUnit, $ ) {
// TODO add teardown callback to remove dialogs
QUnit.module( "dialog: core" );
QUnit.test( "markup structure", function( assert ) {
assert.expect( 11 );
var element = $( "<div>" ).dialog( {
buttons: [ {
text: "Ok",
click: $.noop
} ]
} ),
widget = element.dialog( "widget" ),
titlebar = widget.find( ".ui-dialog-titlebar" ),
title = titlebar.find( ".ui-dialog-title" ),
close = titlebar.find( ".ui-dialog-titlebar-close" ),
buttonpane = widget.find( ".ui-dialog-buttonpane" ),
buttonset = widget.find( ".ui-dialog-buttonset" ),
buttons = buttonset.find( ".ui-button" );
assert.hasClasses( widget, "ui-dialog ui-dialog-buttons ui-widget ui-widget-content" );
assert.hasClasses( titlebar, "ui-dialog-titlebar ui-widget-header" );
assert.equal( titlebar.length, 1, "Dialog has exactly one titlebar" );
assert.hasClasses( close, "ui-dialog-titlebar-close ui-widget" );
assert.equal( close.length, 1, "Titlebar has exactly one close button" );
assert.equal( title.length, 1, "Titlebar has exactly one title" );
assert.hasClasses( element, "ui-dialog-content ui-widget-content" );
assert.hasClasses( buttonpane, "ui-dialog-buttonpane ui-widget-content" );
assert.equal( buttonpane.length, 1, "Dialog has exactly one buttonpane" );
assert.equal( buttonset.length, 1, "Buttonpane has exactly one buttonset" );
assert.equal( buttons.length, 1, "Buttonset contains exactly 1 button when created with 1" );
} );
QUnit.test( "markup structure - no buttons", function( assert ) {
assert.expect( 7 );
var element = $( "<div>" ).dialog(),
widget = element.dialog( "widget" ),
titlebar = widget.find( ".ui-dialog-titlebar" ),
title = titlebar.find( ".ui-dialog-title" ),
close = titlebar.find( ".ui-dialog-titlebar-close" );
assert.hasClasses( widget, "ui-dialog ui-widget ui-widget-content" );
assert.hasClasses( titlebar, "ui-dialog-titlebar ui-widget-header" );
assert.equal( titlebar.length, 1, "Dialog has exactly one titlebar" );
assert.hasClasses( close, "ui-dialog-titlebar-close ui-widget" );
assert.equal( close.length, 1, "Titlebar has exactly one close button" );
assert.equal( title.length, 1, "Titlebar has exactly one title" );
assert.hasClasses( element, "ui-dialog-content ui-widget-content" );
} );
QUnit.test( "title id", function( assert ) {
assert.expect( 1 );
var titleId,
element = $( "<div>" ).dialog();
titleId = element.dialog( "widget" ).find( ".ui-dialog-title" ).attr( "id" );
assert.ok( /ui-id-\d+$/.test( titleId ), "auto-numbered title id" );
element.remove();
} );
QUnit.test( "ARIA", function( assert ) {
assert.expect( 4 );
var element = $( "<div>" ).dialog(),
wrapper = element.dialog( "widget" );
assert.equal( wrapper.attr( "role" ), "dialog", "dialog role" );
assert.equal( wrapper.attr( "aria-labelledby" ), wrapper.find( ".ui-dialog-title" ).attr( "id" ) );
assert.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();
assert.equal( element.dialog( "widget" ).attr( "aria-describedby" ), null, "no aria-describedby added, as already present in markup" );
element.remove();
} );
QUnit.test( "widget method", function( assert ) {
assert.expect( 1 );
var dialog = $( "<div>" ).appendTo( "#qunit-fixture" ).dialog();
assert.deepEqual( dialog.parent()[ 0 ], dialog.dialog( "widget" )[ 0 ] );
dialog.remove();
} );
QUnit.test( "focus tabbable", function( assert ) {
var ready = assert.async();
assert.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" ).trigger( "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" ).trigger( "focus" ).trigger( "blur" );
element.dialog( "instance" )._focusTabbable();
setTimeout( function() {
assert.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 ) {
assert.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 ) {
assert.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 ) {
assert.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 ) {
assert.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() {
assert.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().on( "keydown", function( event ) {
event.preventDefault();
inputs.first().trigger( "focus" );
} );
}
},
function( done ) {
var inputs = element.find( "input"
);
assert.equal
( document.activeElement, inputs[ 1 ], "Focus starts on second input" );
inputs.last().simulate( "keydown", { keyCode: $.ui.keyCode.TAB } );
setTimeout( function() {
assert.equal( document.activeElement, inputs[ 0 ],
"Honor preventDefault, allowing custom focus management" );
done();
}, 50 );
},
ready
);
}
step1();
} );
QUnit.test( "#7960: resizable handles below modal overlays", function( assert ) {
assert.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 );
assert.ok( resizableZindex < overlayZindex, "Resizable handles have lower z-index than modal overlay" );
dialog.dialog( "destroy" );
} );
QUnit.test( "Prevent tabbing out of dialogs", function( assert ) {
var ready = assert.async();
assert.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() {
assert.equal( document.activeElement, inputs[ 0 ], "Tab key event move d focus within the modal" );
// Check shift tab
$( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB, shiftKey: true } );
setTimeout( checkShiftTab );
}
function checkShiftTab() {
assert.equal( document.activeElement, inputs[ 1 ], "Shift-Tab key event moved focus back to second input" );
element.remove();
setTimeout( ready );
}
inputs[ 1 ].focus();
setTimeout( function() {
assert.equal( document.activeElement, inputs[ 1 ], "Focus set on second input" );
inputs.eq( 1 ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB } );
setTimeout( checkTab );
} );
} );
QUnit.test( "#9048: multiple modal dialogs opened and closed in different order",
function( assert ) {
var ready = assert.async();
assert.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" ).trigger( "focus" );
assert.ok( true, "event handlers cleaned up (no errors thrown)" );
ready();
} );
} );
QUnit.test( "interaction between overlay and other dialogs", function( assert ) {
var ready = assert.async();
$.widget( "ui.testWidget", $.ui.dialog, {
options: {
modal: true,
autoOpen: false
}
} );
assert.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" ).trigger( "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" ).trigger( "focus" );
setTimeout( function() {
assert.equal( document.activeElement, secondInput[ 0 ] );
// Last active dialog must receive focus
firstInput.trigger( "focus" );
$( "#favorite-animal" ).trigger( "focus" );
setTimeout( function() {
assert.equal( document.activeElement, firstInput[ 0 ] );
// Cleanup
first.remove();
second.remove();
delete $.ui.testWidget;
delete $.fn.testWidget;
ready();
} );
} );
} );
} );
} );

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

@ -0,0 +1,34 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js" data-modules="core button dialog"></script>
<script src="../../lib/bootstrap.js" data-widget="dialog" data-deprecated="true"></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>

61
jquery-ui/tests/unit/dialog/deprecated.js vendored Normal file
View file

@ -0,0 +1,61 @@
define( [
"qunit",
"jquery",
"ui/widgets/dialog"
], function( QUnit, $ ) {
QUnit.module( "dialog (deprecated): options" );
QUnit.test( "dialogClass", function( assert ) {
assert.expect( 5 );
var element = $( "<div>" ).dialog(),
widget = element.dialog( "widget" );
assert.lacksClasses( widget, "foo", "dialogClass not specified. class not added" );
element.remove();
element = $( "<div>" ).dialog( { dialogClass: "foo" } );
widget = element.dialog( "widget" );
assert.hasClasses( widget, "foo", "dialogClass in init, foo class added" );
element.dialog( "option", "dialogClass", "foobar" );
assert.lacksClasses( widget, "foo", "dialogClass changed, previous one was removed" );
assert.hasClasses( widget, "foobar", "dialogClass changed, new one was added" );
element.remove();
element = $( "<div>" ).dialog( { dialogClass: "foo bar" } );
widget = element.dialog( "widget" );
assert.hasClasses( widget, "foo bar", "dialogClass in init, two classes." );
element.remove();
} );
QUnit.test( "buttons - deprecated options", function( assert ) {
assert.expect( 7 );
var buttons,
element = $( "<div></div>" ).dialog( {
buttons: [
{
html: "a button",
"class": "additional-class",
id: "my-button-id",
click: function() {
assert.equal( this, element[ 0 ], "correct context" );
},
icons: { primary: "ui-icon-cancel" },
text: false
}
]
} );
buttons = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
assert.equal( buttons.length, 1, "correct number of buttons" );
assert.equal( buttons.attr( "id" ), "my-button-id", "correct id" );
assert.equal( $.trim( buttons.text() ), "a button", "correct label" );
assert.hasClasses( buttons, "additional-class" );
assert.deepEqual( buttons.button( "option", "icon" ), "ui-icon-cancel" );
assert.equal( buttons.button( "option", "showLabel" ), false );
buttons.trigger( "click" );
element.remove();
} );
} );

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

@ -0,0 +1,34 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js" data-modules="core button dialog"></script>
<script src="../../lib/bootstrap.js" data-widget="dialog" data-no-back-compat="true"></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>

373
jquery-ui/tests/unit/dialog/events.js vendored Normal file
View file

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

58
jquery-ui/tests/unit/dialog/helper.js vendored Normal file
View file

@ -0,0 +1,58 @@
define( [
"qunit",
"jquery",
"lib/helper",
"ui/widgets/dialog"
], function( QUnit, $, helper ) {
return $.extend( helper, {
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( assert, element, dx, dy, expectedDX, expectedDY, msg ) {
var actualDX, actualDY, offsetAfter,
d = element.dialog( "widget" ),
handle = $( ".ui-dialog-titlebar", d ),
offsetBefore = d.offset();
this.drag( element, handle, dx, dy );
offsetAfter = d.offset();
msg = msg ? msg + "." : "";
actualDX = offsetAfter.left - offsetBefore.left;
actualDY = offsetAfter.top - offsetBefore.top;
assert.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( assert, element, dw, dh, msg ) {
var heightAfter, widthAfter, actual, expected,
d = element.dialog( "widget" ),
handle = $( ".ui-resizable-se", d ),
heightBefore = element.height(),
widthBefore = element.width();
this.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 };
assert.deepEqual( actual, expected, "resized[" + 50 + ", " + 50 + "] " + msg );
}
} );
} );

272
jquery-ui/tests/unit/dialog/methods.js vendored Normal file
View file

@ -0,0 +1,272 @@
define( [
"qunit",
"jquery",
"ui/widgets/dialog"
], function( QUnit, $ ) {
QUnit.module( "dialog: methods", {
afterEach: function() {
$( "body>.ui-dialog" ).remove();
}
} );
QUnit.test( "init", function( assert ) {
assert.expect( 6 );
$( "<div></div>" ).appendTo( "body" ).dialog().remove();
assert.ok( true, ".dialog() called on element" );
$( [] ).dialog().remove();
assert.ok( true, ".dialog() called on empty collection" );
$( "<div></div>" ).dialog().remove();
assert.ok( true, ".dialog() called on disconnected DOMElement - never connected" );
$( "<div></div>" ).appendTo( "body" ).remove().dialog().remove();
assert.ok( true, ".dialog() called on disconnected DOMElement - removed" );
var element = $( "<div></div>" ).dialog();
element.dialog( "option", "foo" );
element.remove();
assert.ok( true, "arbitrary option getter after init" );
$( "<div></div>" ).dialog().dialog( "option", "foo", "bar" ).remove();
assert.ok( true, "arbitrary option setter after init" );
} );
QUnit.test( "destroy", function( assert ) {
assert.expect( 17 );
var element, element2;
$( "#dialog1, #form-dialog" ).hide();
assert.domEqual( "#dialog1", function() {
var dialog = $( "#dialog1" ).dialog().dialog( "destroy" );
assert.equal( dialog.parent()[ 0 ], $( "#qunit-fixture" )[ 0 ] );
assert.equal( dialog.index(), 0 );
} );
assert.domEqual( "#form-dialog", function() {
var dialog = $( "#form-dialog" ).dialog().dialog( "destroy" );
assert.equal( dialog.parent()[ 0 ], $( "#qunit-fixture" )[ 0 ] );
assert.equal( dialog.index(), 2 );
} );
// Ensure dimensions are restored (#8119)
$( "#dialog1" ).show().css( {
width: "400px",
minHeight: "100px",
height: "200px"
} );
assert.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" );
assert.equal( $( ".ui-widget-overlay" ).length, 0, "overlay does not exist" );
assert.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 } );
assert.equal( $( ".ui-widget-overlay" ).length, 2, "overlays created when dialogs are open" );
assert.equal( $( document ).data( "ui-dialog-overlays" ), 2, "ui-dialog-overlays equals the number of open overlays" );
element.dialog( "close" );
assert.equal( $( ".ui-widget-overlay" ).length, 1, "overlay remains after closing one dialog" );
assert.equal( $( document ).data( "ui-dialog-overlays" ), 1, "ui-dialog-overlays equals the number of open overlays" );
element.dialog( "destroy" );
assert.equal( $( ".ui-widget-overlay" ).length, 1, "overlay remains after destroying one dialog" );
assert.equal( $( document ).data( "ui-dialog-overlays" ), 1, "ui-dialog-overlays equals the number of open overlays" );
element2.dialog( "destroy" );
assert.equal( $( ".ui-widget-overlay" ).length, 0, "overlays removed when all dialogs are destoryed" );
assert.equal( $( document ).data( "ui-dialog-overlays" ), undefined, "ui-dialog-overlays equals the number of open overlays" );
} );
QUnit.test( "#9000: Dialog leaves broken event handler after close/destroy in certain cases", function( assert ) {
var ready = assert.async();
assert.expect( 1 );
$( "#dialog1" ).dialog( { modal:true } ).dialog( "close" ).dialog( "destroy" );
setTimeout( function() {
$( "#favorite-animal" ).trigger( "focus" );
assert.ok( true, "close and destroy modal dialog before its really opened" );
ready();
} );
} );
QUnit.test( "#4980: Destroy should place element back in original DOM position", function( assert ) {
assert.expect( 2 );
var container = $( "<div id='container'><div id='modal'>Content</div></div>" ),
modal = container.find( "#modal" );
modal.dialog();
assert.ok( !$.contains( container[ 0 ], modal[ 0 ] ), "dialog should move modal element to outside container element" );
modal.dialog( "destroy" );
assert.ok( $.contains( container[ 0 ], modal[ 0 ] ), "dialog(destroy) should place element back in original DOM position" );
} );
QUnit.test( "enable/disable disabled", function( assert ) {
assert.expect( 3 );
var element = $( "<div></div>" ).dialog();
element.dialog( "disable" );
assert.equal( element.dialog( "option", "disabled" ), false, "disable method doesn't do anything" );
assert.lacksClasses( element, "ui-dialog-disabled ui-state-disabled", "disable method doesn't add classes" );
assert.ok( !element.dialog( "widget" ).attr( "aria-disabled" ), "disable method doesn't add aria-disabled" );
} );
QUnit.test( "close", function( assert ) {
assert.expect( 3 );
var element,
expected = $( "<div></div>" ).dialog(),
actual = expected.dialog( "close" );
assert.equal( actual, expected, "close is chainable" );
element = $( "<div></div>" ).dialog();
assert.ok( element.dialog( "widget" ).is( ":visible" ) && !element.dialog( "widget" ).is( ":hidden" ), "dialog visible before close method called" );
element.dialog( "close" );
assert.ok( element.dialog( "widget" ).is( ":hidden" ) && !element.dialog( "widget" ).is( ":visible" ), "dialog hidden after close method called" );
} );
QUnit.test( "isOpen", function( assert ) {
assert.expect( 4 );
var element = $( "<div></div>" ).dialog();
assert.equal( element.dialog( "isOpen" ), true, "dialog is open after init" );
element.dialog( "close" );
assert.equal( element.dialog( "isOpen" ), false, "dialog is closed" );
element.remove();
element = $( "<div></div>" ).dialog( { autoOpen: false } );
assert.equal( element.dialog( "isOpen" ), false, "dialog is closed after init" );
element.dialog( "open" );
assert.equal( element.dialog( "isOpen" ), true, "dialog is open" );
element.remove();
} );
QUnit.test( "moveToTop", function( assert ) {
assert.expect( 5 );
function order() {
var actual = $( ".ui-dialog" ).map( function() {
return +$( this ).css( "z-index" );
} ).get();
assert.deepEqual( actual, $.makeArray( arguments ) );
}
var dialog1, dialog2,
focusOn = "dialog1";
dialog1 = $( "#dialog1" ).dialog( {
focus: function() {
assert.equal( focusOn, "dialog1" );
}
} );
focusOn = "dialog2";
dialog2 = $( "#dialog2" ).dialog( {
focus: function() {
assert.equal( focusOn, "dialog2" );
}
} );
order( 100, 101 );
focusOn = "dialog1";
dialog1.dialog( "moveToTop" );
order( 102, 101 );
} );
QUnit.test( "moveToTop: content scroll stays intact", function( assert ) {
assert.expect( 2 );
var otherDialog = $( "#dialog1" ).dialog(),
scrollDialog = $( "#form-dialog" ).dialog( {
height: 200
} );
scrollDialog.scrollTop( 50 );
assert.equal( scrollDialog.scrollTop(), 50 );
otherDialog.dialog( "moveToTop" );
assert.equal( scrollDialog.scrollTop(), 50 );
} );
QUnit.test( "open", function( assert ) {
assert.expect( 3 );
var element,
expected = $( "<div></div>" ).dialog(),
actual = expected.dialog( "open" );
assert.equal( actual, expected, "open is chainable" );
element = $( "<div></div>" ).dialog( { autoOpen: false } );
assert.ok( element.dialog( "widget" ).is( ":hidden" ) && !element.dialog( "widget" ).is( ":visible" ), "dialog hidden before open method called" );
element.dialog( "open" );
assert.ok( element.dialog( "widget" ).is( ":visible" ) && !element.dialog( "widget" ).is( ":hidden" ), "dialog visible after open method called" );
} );
// http://bugs.jqueryui.com/ticket/6137
QUnit.test( "Ensure form elements don't reset when opening a dialog", function( assert ) {
assert.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 );
assert.equal( d1.find( "input:checked" ).val(), "b", "checkbox b is checked" );
d1.dialog( "open" );
assert.equal( d1.find( "input:checked" ).val(), "b", "checkbox b is checked" );
d1.remove();
} );
QUnit.test( "#8958: dialog can be opened while opening", function( assert ) {
var ready = assert.async();
assert.expect( 1 );
var element = $( "<div>" ).dialog( {
autoOpen: false,
modal: true,
open: function() {
assert.equal( $( ".ui-widget-overlay" ).length, 1 );
ready();
}
} );
// 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" ).trigger( "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.
.on( "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.
.on( "blur", function() {
element.dialog( "open" );
} )
.trigger( "focus" );
} );
QUnit.test( "#5531: dialog width should be at least minWidth on creation", function( assert ) {
assert.expect( 4 );
var element = $( "<div></div>" ).dialog( {
width: 200,
minWidth: 300
} );
assert.equal( element.dialog( "option", "width" ), 300, "width is minWidth" );
element.dialog( "option", "width", 200 );
assert.equal( element.dialog( "option", "width" ), 300, "width unchanged when set to < minWidth" );
element.dialog( "option", "width", 320 );
assert.equal( element.dialog( "option", "width" ), 320, "width changed if set to > minWidth" );
element.remove();
element = $( "<div></div>" ).dialog( {
minWidth: 300
} );
assert.ok( element.dialog( "option", "width" ) >= 300, "width is at least 300" );
element.remove();
} );
} );

566
jquery-ui/tests/unit/dialog/options.js vendored Normal file
View file

@ -0,0 +1,566 @@
define( [
"qunit",
"jquery",
"./helper",
"ui/widgets/dialog",
"ui/effects/effect-blind",
"ui/effects/effect-explode"
], function( QUnit, $, testHelper ) {
QUnit.module( "dialog: options" );
QUnit.test( "appendTo", function( assert ) {
assert.expect( 16 );
var detached = $( "<div>" ),
element = $( "#dialog1" ).dialog( {
modal: true
} );
assert.equal( element.dialog( "widget" ).parent()[ 0 ], document.body, "defaults to body" );
assert.equal( $( ".ui-widget-overlay" ).parent()[ 0 ], document.body, "overlay defaults to body" );
element.dialog( "destroy" );
element.dialog( {
appendTo: ".wrap",
modal: true
} );
assert.equal( element.dialog( "widget" ).parent()[ 0 ], $( "#wrap1" )[ 0 ], "first found element" );
assert.equal( $( ".ui-widget-overlay" ).parent()[ 0 ], $( "#wrap1" )[ 0 ], "overlay first found element" );
assert.equal( $( "#wrap2 .ui-dialog" ).length, 0, "only appends to one element" );
assert.equal( $( "#wrap2 .ui-widget-overlay" ).length, 0, "overlay only appends to one element" );
element.dialog( "destroy" );
element.dialog( {
appendTo: null,
modal: true
} );
assert.equal( element.dialog( "widget" ).parent()[ 0 ], document.body, "null" );
assert.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" );
assert.equal( element.dialog( "widget" ).parent()[ 0 ], $( "#wrap1" )[ 0 ], "modified after init" );
assert.equal( $( ".ui-widget-overlay" ).parent()[ 0 ], $( "#wrap1" )[ 0 ], "overlay modified after init" );
element.dialog( "destroy" );
element.dialog( {
appendTo: detached,
modal: true
} );
assert.equal( element.dialog( "widget" ).parent()[ 0 ], detached[ 0 ], "detached jQuery object" );
assert.equal( detached.find( ".ui-widget-overlay" ).parent()[ 0 ], detached[ 0 ], "overlay detached jQuery object" );
element.dialog( "destroy" );
element.dialog( {
appendTo: detached[ 0 ],
modal: true
} );
assert.equal( element.dialog( "widget" ).parent()[ 0 ], detached[ 0 ], "detached DOM element" );
assert.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 );
assert.equal( element.dialog( "widget" ).parent()[ 0 ], detached[ 0 ], "detached DOM element via option()" );
assert.equal( detached.find( ".ui-widget-overlay" ).length, 0, "overlay detached DOM element via option()" );
element.dialog( "destroy" );
} );
QUnit.test( "autoOpen", function( assert ) {
assert.expect( 2 );
var element = $( "<div></div>" ).dialog( { autoOpen: false } );
assert.ok( !element.dialog( "widget" ).is( ":visible" ), ".dialog({ autoOpen: false })" );
element.remove();
element = $( "<div></div>" ).dialog( { autoOpen: true } );
assert.ok( element.dialog( "widget" ).is( ":visible" ), ".dialog({ autoOpen: true })" );
element.remove();
} );
QUnit.test( "buttons", function( assert ) {
assert.expect( 21 );
var btn, i, newButtons,
buttons = {
"Ok": function( ev ) {
assert.ok( true, "button click fires callback" );
assert.equal( this, element[ 0 ], "context of callback" );
assert.equal( ev.target, btn[ 0 ], "event target" );
},
"Cancel": function( ev ) {
assert.ok( true, "button click fires callback" );
assert.equal( this, element[ 0 ], "context of callback" );
assert.equal( ev.target, btn[ 1 ], "event target" );
}
},
element = $( "<div></div>" ).dialog( { buttons: buttons } );
btn = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
assert.equal( btn.length, 2, "number of buttons" );
i = 0;
$.each( buttons, function( key ) {
assert.equal( btn.eq( i ).text(), key, "text of button " + ( i + 1 ) );
i++;
} );
assert.hasClasses( btn.parent(), "ui-dialog-buttonset" );
assert.hasClasses( element.parent(), "ui-dialog-buttons" );
btn.trigger( "click" );
newButtons = {
"Close": function( ev ) {
assert.ok( true, "button click fires callback" );
assert.equal( this, element[ 0 ], "context of callback" );
assert.equal( ev.target, btn[ 0 ], "event target" );
}
};
assert.deepEqual( element.dialog( "option", "buttons" ), buttons, ".dialog('option', 'buttons') getter" );
element.dialog( "option", "buttons", newButtons );
assert.deepEqual( element.dialog( "option", "buttons" ), newButtons, ".dialog('option', 'buttons', ...) setter" );
btn = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
assert.equal( btn.length, 1, "number of buttons after setter" );
btn.trigger( "click" );
i = 0;
$.each( newButtons, function( key ) {
assert.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" );
assert.equal( btn.length, 0, "all buttons have been removed" );
assert.equal( element.find( ".ui-dialog-buttonset" ).length, 0, "buttonset has been removed" );
assert.lacksClasses( element.parent(), "ui-dialog-buttons" );
element.remove();
} );
QUnit.test( "buttons - advanced", function( assert ) {
assert.expect( 7 );
var buttons,
element = $( "<div></div>" ).dialog( {
buttons: [
{
text: "a button",
"class": "additional-class",
id: "my-button-id",
click: function() {
assert.equal( this, element[ 0 ], "correct context" );
},
icon: "ui-icon-cancel",
showLabel: false
}
]
} );
buttons = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
assert.equal( buttons.length, 1, "correct number of buttons" );
assert.equal( buttons.attr( "id" ), "my-button-id", "correct id" );
assert.equal( $.trim( buttons.text() ), "a button", "correct label" );
assert.hasClasses( buttons, "additional-class" );
assert.deepEqual( buttons.button( "option", "icon" ), "ui-icon-cancel" );
assert.equal( buttons.button( "option", "showLabel" ), false );
buttons.trigger( "click" );
element.remove();
} );
QUnit.test( "#9043: buttons with Array.prototype modification", function( assert ) {
assert.expect( 1 );
Array.prototype.test = $.noop;
var element = $( "<div></div>" ).dialog();
assert.equal( element.dialog( "widget" ).find( ".ui-dialog-buttonpane" ).length, 0,
"no button pane" );
element.remove();
delete Array.prototype.test;
} );
QUnit.test( "closeOnEscape", function( assert ) {
assert.expect( 6 );
var element = $( "<div></div>" ).dialog( { closeOnEscape: false } );
assert.ok( true, "closeOnEscape: false" );
assert.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 } );
assert.ok( element.dialog( "widget" ).is( ":visible" ) && !element.dialog( "widget" ).is( ":hidden" ), "dialog is open after ESC" );
element.remove();
element = $( "<div></div>" ).dialog( { closeOnEscape: true } );
assert.ok( true, "closeOnEscape: true" );
assert.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 } );
assert.ok( element.dialog( "widget" ).is( ":hidden" ) && !element.dialog( "widget" ).is( ":visible" ), "dialog is closed after ESC" );
} );
QUnit.test( "closeText", function( assert ) {
assert.expect( 4 );
var element = $( "<div></div>" ).dialog();
assert.equal( $.trim( element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).text() ), "Close",
"default close text" );
element.remove();
element = $( "<div></div>" ).dialog( { closeText: "foo" } );
assert.equal( $.trim( element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).text() ), "foo",
"closeText on init" );
element.remove();
element = $( "<div></div>" ).dialog().dialog( "option", "closeText", "bar" );
assert.equal( $.trim( element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).text() ), "bar",
"closeText via option method" );
element.remove();
element = $( "<div></div>" ).dialog( { closeText: "<span>foo</span>" } );
assert.equal( $.trim( element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).text() ), "<span>foo</span>",
"closeText is escaped" );
element.remove();
} );
QUnit.test( "draggable", function( assert ) {
assert.expect( 4 );
var element = $( "<div></div>" ).dialog( { draggable: false } );
testHelper.testDrag( assert, element, 50, -50, 0, 0 );
element.dialog( "option", "draggable", true );
testHelper.testDrag( assert, element, 50, -50, 50, -50 );
element.remove();
element = $( "<div></div>" ).dialog( { draggable: true } );
testHelper.testDrag( assert, element, 50, -50, 50, -50 );
element.dialog( "option", "draggable", false );
testHelper.testDrag( assert, element, 50, -50, 0, 0 );
element.remove();
} );
QUnit.test( "height", function( assert ) {
assert.expect( 4 );
var element = $( "<div></div>" ).dialog();
assert.equal( element.dialog( "widget" ).outerHeight(), 150, "default height" );
element.remove();
element = $( "<div></div>" ).dialog( { height: 237 } );
assert.equal( element.dialog( "widget" ).outerHeight(), 237, "explicit height" );
element.remove();
element = $( "<div></div>" ).dialog();
element.dialog( "option", "height", 238 );
assert.equal( element.dialog( "widget" ).outerHeight(), 238, "explicit height set after init" );
element.remove();
element = $( "<div></div>" ).css( "padding", "20px" )
.dialog( { height: 240 } );
assert.equal( element.dialog( "widget" ).outerHeight(), 240, "explicit height with padding" );
element.remove();
} );
QUnit.test( "maxHeight", function( assert ) {
assert.expect( 3 );
var element = $( "<div></div>" ).dialog( { maxHeight: 200 } );
testHelper.drag( element, ".ui-resizable-s", 1000, 1000 );
assert.close( element.dialog( "widget" ).height(), 200, 1, "maxHeight" );
element.remove();
element = $( "<div></div>" ).dialog( { maxHeight: 200 } );
testHelper.drag( element, ".ui-resizable-n", -1000, -1000 );
assert.close( element.dialog( "widget" ).height(), 200, 1, "maxHeight" );
element.remove();
element = $( "<div></div>" ).dialog( { maxHeight: 200 } ).dialog( "option", "maxHeight", 300 );
testHelper.drag( element, ".ui-resizable-s", 1000, 1000 );
assert.close( element.dialog( "widget" ).height(), 300, 1, "maxHeight" );
element.remove();
} );
QUnit.test( "maxWidth", function( assert ) {
assert.expect( 3 );
var element = $( "<div></div>" ).dialog( { maxWidth: 200 } );
testHelper.drag( element, ".ui-resizable-e", 1000, 1000 );
assert.close( element.dialog( "widget" ).width(), 200, 1, "maxWidth" );
element.remove();
element = $( "<div></div>" ).dialog( { maxWidth: 200 } );
testHelper.drag( element, ".ui-resizable-w", -1000, -1000 );
assert.close( element.dialog( "widget" ).width(), 200, 1, "maxWidth" );
element.remove();
element = $( "<div></div>" ).dialog( { maxWidth: 200 } ).dialog( "option", "maxWidth", 300 );
testHelper.drag( element, ".ui-resizable-w", -1000, -1000 );
assert.close( element.dialog( "widget" ).width(), 300, 1, "maxWidth" );
element.remove();
} );
QUnit.test( "minHeight", function( assert ) {
assert.expect( 3 );
var element = $( "<div></div>" ).dialog( { minHeight: 10 } );
testHelper.drag( element, ".ui-resizable-s", -1000, -1000 );
assert.close( element.dialog( "widget" ).height(), 10, 1, "minHeight" );
element.remove();
element = $( "<div></div>" ).dialog( { minHeight: 10 } );
testHelper.drag( element, ".ui-resizable-n", 1000, 1000 );
assert.close( element.dialog( "widget" ).height(), 10, 1, "minHeight" );
element.remove();
element = $( "<div></div>" ).dialog( { minHeight: 10 } ).dialog( "option", "minHeight", 30 );
testHelper.drag( element, ".ui-resizable-n", 1000, 1000 );
assert.close( element.dialog( "widget" ).height(), 30, 1, "minHeight" );
element.remove();
} );
QUnit.test( "minWidth", function( assert ) {
assert.expect( 3 );
var element = $( "<div></div>" ).dialog( { minWidth: 10 } );
testHelper.drag( element, ".ui-resizable-e", -1000, -1000 );
assert.close( element.dialog( "widget" ).width(), 10, 1, "minWidth" );
element.remove();
element = $( "<div></div>" ).dialog( { minWidth: 10 } );
testHelper.drag( element, ".ui-resizable-w", 1000, 1000 );
assert.close( element.dialog( "widget" ).width(), 10, 1, "minWidth" );
element.remove();
element = $( "<div></div>" ).dialog( { minWidth: 30 } ).dialog( "option", "minWidth", 30 );
testHelper.drag( element, ".ui-resizable-w", 1000, 1000 );
assert.close( element.dialog( "widget" ).width(), 30, 1, "minWidth" );
element.remove();
} );
QUnit.test( "position, default center on window", function( assert ) {
assert.expect( 2 );
// Dialogs alter the window width and height in Firefox
// so we collect that information before creating the dialog
// Support: Firefox
var winWidth = $( window ).width(),
winHeight = $( window ).height(),
element = $( "<div></div>" ).dialog(),
dialog = element.dialog( "widget" ),
offset = dialog.offset();
assert.close( offset.left, Math.round( winWidth / 2 - dialog.outerWidth() / 2 ) + $( window ).scrollLeft(), 1, "dialog left position of center on window on initilization" );
assert.close( offset.top, Math.round( winHeight / 2 - dialog.outerHeight() / 2 ) + $( window ).scrollTop(), 1, "dialog top position of center on window on initilization" );
element.remove();
} );
QUnit.test( "position, right bottom at right bottom via ui.position args", function( assert ) {
assert.expect( 2 );
// Dialogs alter the window width and height in Firefox
// so we collect that information before creating the dialog
// Support: Firefox
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();
assert.close( offset.left, winWidth - dialog.outerWidth() + $( window ).scrollLeft(), 1, "dialog left position of right bottom at right bottom on initilization" );
assert.close( offset.top, winHeight - dialog.outerHeight() + $( window ).scrollTop(), 1, "dialog top position of right bottom at right bottom on initilization" );
element.remove();
} );
QUnit.test( "position, at another element", function( assert ) {
assert.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();
assert.close( offset.left, 600, 1, "dialog left position at another element on initilization" );
assert.close( 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();
assert.close( offset.left, 610, 1, "dialog left position at another element via setting option" );
assert.close( offset.top, 410, 1, "dialog top position at another element via setting option" );
element.remove();
parent.remove();
} );
QUnit.test( "resizable", function( assert ) {
assert.expect( 4 );
var element = $( "<div></div>" ).dialog();
testHelper.shouldResize( assert, element, 50, 50, "[default]" );
element.dialog( "option", "resizable", false );
testHelper.shouldResize( assert, element, 0, 0, "disabled after init" );
element.remove();
element = $( "<div></div>" ).dialog( { resizable: false } );
testHelper.shouldResize( assert, element, 0, 0, "disabled in init options" );
element.dialog( "option", "resizable", true );
testHelper.shouldResize( assert, element, 50, 50, "enabled after init" );
element.remove();
} );
QUnit.test( "title", function( assert ) {
assert.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
assert.equal( titleText(), $( "<span>&#160;</span>" ).html(), "[default]" );
assert.equal( element.dialog( "option", "title" ), null, "option not changed" );
element.remove();
element = $( "<div title='foo'>" ).dialog();
assert.equal( titleText(), "foo", "title in element attribute" );
assert.equal( element.dialog( "option", "title" ), "foo", "option updated from attribute" );
element.remove();
element = $( "<div></div>" ).dialog( { title: "foo" } );
assert.equal( titleText(), "foo", "title in init options" );
assert.equal( element.dialog( "option", "title" ), "foo", "opiton set from options hash" );
element.remove();
element = $( "<div title='foo'>" ).dialog( { title: "bar" } );
assert.equal( titleText(), "bar", "title in init options should override title in element attribute" );
assert.equal( element.dialog( "option", "title" ), "bar", "opiton set from options hash" );
element.remove();
element = $( "<div></div>" ).dialog().dialog( "option", "title", "foo" );
assert.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
assert.equal( titleText(), $( "<span>&#160;</span>" ).html(), "[default]" );
assert.equal( element.dialog( "option", "title" ), null, "option not changed" );
element.remove();
} );
QUnit.test( "width", function( assert ) {
assert.expect( 3 );
var element = $( "<div></div>" ).dialog();
assert.close( element.dialog( "widget" ).width(), 300, 1, "default width" );
element.remove();
element = $( "<div></div>" ).dialog( { width: 437 } );
assert.close( element.dialog( "widget" ).width(), 437, 1, "explicit width" );
element.dialog( "option", "width", 438 );
assert.close( element.dialog( "widget" ).width(), 438, 1, "explicit width after init" );
element.remove();
} );
QUnit.test( "#4826: setting resizable false toggles resizable on dialog", function( assert ) {
assert.expect( 6 );
var i,
element = $( "<div></div>" ).dialog( { resizable: false } );
testHelper.shouldResize( assert, element, 0, 0, "[default]" );
for ( i = 0; i < 2; i++ ) {
element.dialog( "close" ).dialog( "open" );
testHelper.shouldResize( assert, element, 0, 0, "initialized with resizable false toggle (" + ( i + 1 ) + ")" );
}
element.remove();
element = $( "<div></div>" ).dialog( { resizable: true } );
testHelper.shouldResize( assert, element, 50, 50, "[default]" );
for ( i = 0; i < 2; i++ ) {
element.dialog( "close" ).dialog( "option", "resizable", false ).dialog( "open" );
testHelper.shouldResize( assert, element, 0, 0, "set option resizable false toggle (" + ( i + 1 ) + ")" );
}
element.remove();
} );
QUnit.test( "#8051 - 'Explode' dialog animation causes crash in IE 6, 7 and 8", function( assert ) {
var ready = assert.async();
assert.expect( 1 );
var element = $( "<div></div>" ).dialog( {
show: "explode",
focus: function() {
assert.ok( true, "dialog opened with animation" );
element.remove();
ready();
}
} );
} );
QUnit.test( "#4421 - Focus lost from dialog which uses show-effect", function( assert ) {
var ready = assert.async();
assert.expect( 1 );
var element = $( "<div></div>" ).dialog( {
show: "blind",
focus: function() {
assert.equal( element.dialog( "widget" ).find( document.activeElement ).length, 1, "dialog maintains focus" );
element.remove();
ready();
}
} );
} );
QUnit.test( "Open followed by close during show effect", function( assert ) {
var ready = assert.async();
assert.expect( 1 );
var element = $( "<div></div>" ).dialog( {
show: "blind",
close: function() {
assert.ok( true, "dialog closed properly during animation" );
element.remove();
ready();
}
} );
setTimeout( function() {
element.dialog( "close" );
}, 100 );
} );
} );

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="../../../external/qunit-composite/qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/qunit-composite/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>

48
jquery-ui/tests/unit/draggable/common.js vendored Normal file
View file

@ -0,0 +1,48 @@
define( [
"lib/common",
"ui/widgets/draggable"
], function( common ) {
common.testWidget( "draggable", {
defaults: {
appendTo: "parent",
axis: false,
cancel: "input, textarea, button, select, option",
classes: {},
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
}
} );
} );

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

@ -0,0 +1,394 @@
define( [
"qunit",
"jquery",
"./helper",
"ui/widgets/draggable",
"ui/widgets/droppable",
"ui/widgets/resizable"
], function( QUnit, $, testHelper ) {
QUnit.module( "draggable: core" );
QUnit.test( "element types", function( assert ) {
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( "," );
assert.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>" );
}
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
assert.close( offsetBefore.left, offsetAfter.left - 50, 1, "dragged[50, 50] " + "<" + typeName + "> left" );
assert.close( offsetBefore.top, offsetAfter.top - 50, 1, "dragged[50, 50] " + "<" + typeName + "> top" );
el.draggable( "destroy" );
el.remove();
} );
} );
QUnit.test( "No options, relative", function( assert ) {
assert.expect( 2 );
testHelper.shouldMove( assert, $( "#draggable1" ).draggable(), "no options, relative" );
} );
QUnit.test( "No options, absolute", function( assert ) {
assert.expect( 2 );
testHelper.shouldMove( assert, $( "#draggable2" ).draggable(), "no options, absolute" );
} );
QUnit.test( "resizable handle with complex markup (#8756 / #8757)", function( assert ) {
assert.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 } );
assert.equal( target.width(), 250, "compare width" );
// Todo: fix resizable so it doesn't require a mouseover
handle.simulate( "mouseover" ).simulate( "drag", { dx: 50 } );
assert.equal( target.width(), 200, "compare width" );
} );
QUnit.test( "#8269: Removing draggable element on drop", function( assert ) {
assert.expect( 2 );
var element = $( "#draggable1" ).wrap( "<div id='wrapper' />" ).draggable( {
stop: function() {
assert.ok( true, "stop still called despite element being removed from DOM on drop" );
}
} ),
dropOffset = $( "#droppable" ).offset();
$( "#droppable" ).droppable( {
drop: function() {
$( "#wrapper" ).remove();
assert.ok( true, "element removed from DOM on drop" );
}
} );
// Support: Opera 12.10, Safari 5.1, jQuery <1.8
if ( testHelper.unreliableContains ) {
assert.ok( true, "Opera <12.14 and Safari <6.0 report wrong values for $.contains in jQuery < 1.8" );
assert.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
QUnit.test( "Stray mousemove after mousedown still drags", function( assert ) {
assert.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.on( "mousedown", function() {
$( document ).simulate( "mousemove", { button: -1 } );
} );
testHelper.shouldMove( assert, element, "element is draggable" );
} );
QUnit.test( "#6258: not following mouse when scrolled and using overflow-y: scroll", function( assert ) {
assert.expect( 2 );
var element = $( "#draggable1" ).draggable( {
stop: function( event, ui ) {
assert.equal( ui.position.left, 1, "left position is correct despite overflow on HTML" );
assert.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" );
testHelper.forceScrollableWindow();
$( "html" )
.css( "overflow-y", "scroll" )
.css( "overflow-x", "scroll" )
.scrollTop( 300 )
.scrollLeft( 300 );
element.simulate( "drag", {
dx: 1,
dy: 1,
moves: 1
} );
} );
QUnit.test( "#9315: jumps down with offset of scrollbar", function( assert ) {
assert.expect( 2 );
var element = $( "#draggable2" ).draggable( {
stop: function( event, ui ) {
assert.equal( ui.position.left, 11, "left position is correct when position is absolute" );
assert.equal( ui.position.top, 11, "top position is correct when position is absolute" );
$( "html" ).scrollTop( 0 ).scrollLeft( 0 );
}
} );
testHelper.forceScrollableWindow();
$( "html" ).scrollTop( 300 ).scrollLeft( 300 );
element.simulate( "drag", {
dx: 1,
dy: 1,
moves: 1
} );
} );
QUnit.test( "scroll offset with fixed ancestors", function( assert ) {
assert.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 ) {
assert.equal( ui.position.left, 10, "left position is correct when parent position is fixed" );
assert.equal( ui.position.top, 10, "top position is correct when parent position is fixed" );
$( document ).scrollTop( 0 ).scrollLeft( 0 );
}
} );
testHelper.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"
QUnit.test( "position in scrollable parent with overflow: " + overflow, function( assert ) {
assert.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 ) {
assert.equal( ui.position.left, expected, "left position is correct when grandparent is scrolled" );
assert.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
} );
} );
} );
QUnit.test( "#5727: draggable from iframe", function( assert ) {
assert.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();
assert.equal( draggable1.closest( iframeBody ).length, 1 );
// TODO: fix draggable within an IFRAME to fire events on the element properly
// and these testHelper.shouldMove relies on events for testing
//testHelper.shouldMove( assert, draggable1, "draggable from an iframe" );
} );
QUnit.test( "#8399: A draggable should become the active element after you are finished interacting with it, but not before.", function( assert ) {
assert.expect( 2 );
var element = $( "<a href='#'>link</a>" ).appendTo( "#qunit-fixture" ).draggable();
$( document ).one( "mousemove", function() {
assert.notStrictEqual( document.activeElement, element.get( 0 ), "moving a draggable anchor did not make it the active element" );
} );
testHelper.move( element, 50, 50 );
assert.strictEqual( document.activeElement, element.get( 0 ), "finishing moving a draggable anchor made it the active element" );
} );
QUnit.test( "blur behavior - handle is main element", function( assert ) {
var ready = assert.async();
assert.expect( 3 );
var element = $( "#draggable1" ).draggable(),
focusElement = $( "<div tabindex='1'></div>" ).appendTo( element );
testHelper.onFocus( focusElement, function() {
assert.strictEqual( document.activeElement, focusElement.get( 0 ), "test element is focused before mousing down on a draggable" );
testHelper.move( focusElement, 1, 1 );
// Http://bugs.jqueryui.com/ticket/10527
// Draggable: Can't select option in modal dialog (IE8)
assert.strictEqual( document.activeElement, focusElement.get( 0 ), "test element is focused after mousing down on itself" );
testHelper.move( element, 50, 50 );
// Http://bugs.jqueryui.com/ticket/4261
// active element should blur when mousing down on a draggable
assert.notStrictEqual( document.activeElement, focusElement.get( 0 ), "test element is no longer focused after mousing down on a draggable" );
ready();
} );
} );
QUnit.test( "blur behavior - descendant of handle", function( assert ) {
var ready = assert.async();
assert.expect( 2 );
var element = $( "#draggable2" ).draggable( { handle: "span" } ),
// The handle is a descendant, but we also want to grab a descendant of the handle
handle = element.find( "span em" ),
focusElement = $( "<div tabindex='1'></div>" ).appendTo( element );
testHelper.onFocus( focusElement, function() {
assert.strictEqual( document.activeElement, focusElement.get( 0 ), "test element is focused before mousing down on a draggable" );
testHelper.move( handle, 50, 50 );
// Elements outside of the handle should blur (#12472, #14905)
assert.notStrictEqual( document.activeElement, focusElement.get( 0 ), "test element is no longer focused after mousing down on a draggable" );
ready();
} );
} );
QUnit.test( "ui-draggable-handle assigned to appropriate element", function( assert ) {
assert.expect( 5 );
var p = $( "<p>" ).appendTo( "#qunit-fixture" ),
element = $( "<div><p></p></div>" ).appendTo( "#qunit-fixture" ).draggable();
assert.hasClasses( element, "ui-draggable-handle" );
element.draggable( "option", "handle", "p" );
assert.lacksClasses( element, "ui-draggable-handle" );
assert.hasClasses( element.find( "p" ), "ui-draggable-handle",
"ensure handle class name is constrained within the draggble (#10212)" );
assert.lacksClasses( p, "ui-draggable-handle" );
element.draggable( "destroy" );
assert.lacksClasses( element.find( "p" ), "ui-draggable-handle" );
} );
QUnit.test( "ui-draggable-handle managed correctly in nested draggables", function( assert ) {
assert.expect( 4 );
var parent = $( "<div><div></div></div>" ).draggable().appendTo( "#qunit-fixture" ),
child = parent.find( "div" ).draggable();
assert.hasClasses( parent, "ui-draggable-handle", "parent has class name on init" );
assert.hasClasses( child, "ui-draggable-handle", "child has class name on init" );
parent.draggable( "destroy" );
assert.lacksClasses( parent, "ui-draggable-handle", "parent loses class name on destroy" );
assert.hasClasses( child, "ui-draggable-handle", "child retains class name on destroy" );
} );
// Support: IE 8 only
// IE 8 implements DOM Level 2 Events which only has events bubble up to the document.
// We skip this test since it would be impossible for it to pass in such an environment.
QUnit[ document.documentMode === 8 ? "skip" : "test" ](
"does not stop propagation to window",
function( assert ) {
assert.expect( 1 );
var element = $( "#draggable1" ).draggable();
var handler = function() {
assert.ok( true, "mouseup propagates to window" );
};
$( window ).on( "mouseup", handler );
element.simulate( "drag", {
dx: 10,
dy: 10
} );
$( window ).off( "mouseup", handler );
}
);
} );

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

@ -0,0 +1,98 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js" data-modules="core"></script>
<script src="../../lib/bootstrap.js" data-widget="draggable"></script>
<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: 800px;
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>
</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="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>

165
jquery-ui/tests/unit/draggable/events.js vendored Normal file
View file

@ -0,0 +1,165 @@
define( [
"qunit",
"jquery",
"ui/widgets/draggable"
], function( QUnit, $ ) {
var element;
QUnit.module( "draggable: events", {
beforeEach: function() {
element = $( "<div>" ).appendTo( "#qunit-fixture" );
},
afterEach: function() {
element.draggable( "destroy" );
}
} );
QUnit.test( "callbacks occurrence count", function( assert ) {
assert.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
} );
assert.equal( start, 1, "start callback should happen exactly once" );
assert.equal( dragc, 3, "drag callback should happen exactly once per mousemove" );
assert.equal( stop, 1, "stop callback should happen exactly once" );
} );
QUnit.test( "stopping the start callback", function( assert ) {
assert.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
} );
assert.equal( start, 1, "start callback should happen exactly once" );
assert.equal( dragc, 0, "drag callback should not happen at all" );
assert.equal( stop, 0, "stop callback should not happen if there wasnt even a start" );
} );
QUnit.test( "stopping the drag callback", function( assert ) {
assert.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
} );
assert.equal( start, 1, "start callback should happen exactly once" );
assert.equal( stop, 1, "stop callback should happen, as we need to actively stop the drag" );
} );
QUnit.test( "stopping the stop callback", function( assert ) {
assert.expect( 1 );
element.draggable( {
helper: "clone",
stop: function() {
return false;
}
} );
element.simulate( "drag", {
dx: 10,
dy: 10
} );
assert.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
QUnit.test( "position and offset in hash is consistent between start, drag, and stop", function( assert ) {
assert.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;
assert.deepEqual( startPos, dragPos, "start position equals drag position plus distance" );
assert.deepEqual( dragPos, stopPos, "drag position equals stop position" );
assert.deepEqual( startOffset, dragOffset, "start offset equals drag offset plus distance" );
assert.deepEqual( dragOffset, stopOffset, "drag offset equals stop offset" );
} );
} );

161
jquery-ui/tests/unit/draggable/helper.js vendored Normal file
View file

@ -0,0 +1,161 @@
define( [
"qunit",
"jquery",
"lib/helper",
"ui/widgets/draggable"
], function( QUnit, $, helper ) {
return $.extend( helper, {
// 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( assert, 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 };
assert.deepEqual( ui.position, positionExpected, "position dragged[" + dx + ", " + dy + "] " + msg );
} );
},
testDragOffset: function( assert, 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 ) {
assert.deepEqual( ui.offset, offsetExpected, "offset dragged[" + dx + ", " + dy + "] " + msg );
} );
},
testDragHelperOffset: function( assert, 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 ) {
assert.deepEqual( ui.helper.offset(), offsetExpected, "offset dragged[" + dx + ", " + dy + "] " + msg );
} );
},
testDrag: function( assert, el, handle, dx, dy, expectedDX, expectedDY, msg ) {
this.testDragPosition( assert, el, dx, dy, expectedDX, expectedDY, msg );
this.testDragOffset( assert, el, dx, dy, expectedDX, expectedDY, msg );
$( handle ).simulate( "drag", {
dx: dx,
dy: dy
} );
},
shouldMovePositionButNotOffset: function( assert, el, msg, handle ) {
handle = handle || el;
this.testDragPosition( assert, el, 100, 100, 100, 100, msg );
this.testDragHelperOffset( assert, el, 100, 100, 0, 0, msg );
$( handle ).simulate( "drag", {
dx: 100,
dy: 100
} );
},
shouldMove: function( assert, el, msg, handle ) {
handle = handle || el;
this.testDrag( assert, el, handle, 100, 100, 100, 100, msg );
},
shouldNotMove: function( assert, el, msg, handle ) {
handle = handle || el;
this.testDrag( assert, el, handle, 100, 100, 0, 0, msg );
},
shouldNotDrag: function( assert, el, msg, handle ) {
handle = handle || el;
var newOffset,
element = $( el ),
beginOffset = element.offset();
element.on( "dragstop", function() {
assert.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
assert.equal( newOffset.left, beginOffset.left, "Offset left should not be different" );
assert.equal( newOffset.top, beginOffset.top, "Offset top should not be different" );
element.off( "dragstop" );
},
setScrollable: function( what, isScrollable ) {
var overflow = isScrollable ? "scroll" : "hidden";
$( what ).css( { overflow: overflow, overflowX: overflow, overflowY: overflow } );
},
testScroll: function( assert, el, position ) {
var oldPosition = $( "#main" ).css( "position" );
$( "#main" ).css( { position: position, top: "0px", left: "0px" } );
this.shouldMove( assert, 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.on( "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.on( "drag", function( e, ui ) {
el.data( "last_dragged_parent", ui.helper.parent()[ 0 ] );
} );
}
} );
} );

105
jquery-ui/tests/unit/draggable/methods.js vendored Normal file
View file

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

1505
jquery-ui/tests/unit/draggable/options.js vendored Normal file
View file

File diff suppressed because it is too large Load diff

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="../../../external/qunit-composite/qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/qunit-composite/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>

28
jquery-ui/tests/unit/droppable/common-deprecated.js vendored Normal file
View file

@ -0,0 +1,28 @@
define( [
"lib/common",
"ui/widgets/droppable"
], function( common ) {
common.testWidget( "droppable", {
defaults: {
accept: "*",
activeClass: false,
addClasses: true,
classes: {},
disabled: false,
greedy: false,
hoverClass: false,
scope: "default",
tolerance: "intersect",
// Callbacks
activate: null,
create: null,
deactivate: null,
drop: null,
out: null,
over: null
}
} );
} );

26
jquery-ui/tests/unit/droppable/common.js vendored Normal file
View file

@ -0,0 +1,26 @@
define( [
"lib/common",
"ui/widgets/droppable"
], function( common ) {
common.testWidget( "droppable", {
defaults: {
accept: "*",
addClasses: true,
classes: {},
disabled: false,
greedy: false,
scope: "default",
tolerance: "intersect",
// Callbacks
activate: null,
create: null,
deactivate: null,
drop: null,
out: null,
over: null
}
} );
} );

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

@ -0,0 +1,30 @@
define( [
"qunit",
"jquery",
"./helper",
"ui/widgets/droppable"
], function( QUnit, $, testHelper ) {
QUnit.module( "droppable: core" );
QUnit.test( "element types", function( assert ) {
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( "," );
assert.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();
testHelper.shouldDrop( assert );
el.droppable( "destroy" );
el.remove();
} );
} );
} );

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

@ -0,0 +1,23 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js" data-modules="core"></script>
<script src="../../lib/bootstrap.js" data-widget="droppable" data-deprecated="true"></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>

1
jquery-ui/tests/unit/droppable/deprecated.js vendored Normal file
View file

@ -0,0 +1 @@
define( function() {} );

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

@ -0,0 +1,24 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js" data-modules="core"></script>
<script src="../../lib/bootstrap.js" data-widget="droppable"
data-no-back-compat="true"></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>

65
jquery-ui/tests/unit/droppable/events.js vendored Normal file
View file

@ -0,0 +1,65 @@
define( [
"qunit",
"jquery",
"ui/widgets/droppable"
], function( QUnit, $ ) {
QUnit.module( "droppable: events" );
QUnit.test( "droppable destruction/recreation on drop event", function( assert ) {
assert.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
} );
assert.lacksClasses( droppable2, "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');
});
*/
} );

21
jquery-ui/tests/unit/droppable/helper.js vendored Normal file
View file

@ -0,0 +1,21 @@
define( [
"qunit",
"jquery",
"lib/helper"
], function( QUnit, $, helper ) {
return $.extend( helper, {
shouldDrop: function( assert ) {
// Todo: actually implement this
assert.ok( true, "missing test - untested code is broken code" );
},
shouldNotDrop: function( assert ) {
// Todo: actually implement this
assert.ok( true, "missing test - untested code is broken code" );
}
} );
} );

93
jquery-ui/tests/unit/droppable/methods.js vendored Normal file
View file

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

206
jquery-ui/tests/unit/droppable/options.js vendored Normal file
View file

@ -0,0 +1,206 @@
define( [
"qunit",
"jquery",
"ui/widgets/droppable"
], function( QUnit, $ ) {
QUnit.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');
});
*/
QUnit.test( "{ addClasses: true }, default", function( assert ) {
assert.expect( 1 );
var el = $( "<div />" ).droppable( { addClasses: true } );
assert.hasClasses( el, "ui-droppable" );
el.droppable( "destroy" );
} );
QUnit.test( "{ addClasses: false }", function( assert ) {
assert.expect( 1 );
var el = $( "<div />" ).droppable( { addClasses: false } );
assert.lacksClasses( el, "ui-droppable" );
el.droppable( "destroy" );
} );
QUnit.test( "scope", function( assert ) {
assert.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();
assert.equal( draggableOffset.left, droppableOffset.left );
assert.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();
assert.equal( draggableOffset.left, oldDraggableOffset.left );
assert.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');
});
*/
QUnit.test( "tolerance, intersect", function( assert ) {
assert.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.off( "drop" ).on( "drop", function() {
assert.equal( true, data[ 2 ], data[ 3 ] );
} );
$( draggable ).simulate( "drag", {
dx: data[ 0 ],
dy: data[ 1 ]
} );
} );
} );
QUnit.test( "tolerance, pointer", function( assert ) {
assert.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.off( "drop" ).on( "drop", function() {
assert.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.off( "drop" ).on( "drop", function() {
assert.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');
});
*/
} );

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="../../../external/qunit-composite/qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/qunit-composite/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>

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

@ -0,0 +1,386 @@
define( [
"qunit",
"jquery",
"lib/common",
"ui/effect",
"ui/effects/effect-blind",
"ui/effects/effect-bounce",
"ui/effects/effect-clip",
"ui/effects/effect-drop",
"ui/effects/effect-explode",
"ui/effects/effect-fade",
"ui/effects/effect-fold",
"ui/effects/effect-highlight",
"ui/effects/effect-puff",
"ui/effects/effect-pulsate",
"ui/effects/effect-scale",
"ui/effects/effect-shake",
"ui/effects/effect-size",
"ui/effects/effect-slide",
"ui/effects/effect-transfer"
], function( QUnit, $, common ) {
QUnit.assert.present = function( value, array, message ) {
this.push( jQuery.inArray( value, array ) !== -1, value, array, message );
};
QUnit.assert.notPresent = function( value, array, message ) {
this.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;
QUnit.module( "effects.core" );
// TODO: test all signatures of .show(), .hide(), .toggle().
// Look at core's signatures and UI's signatures.
QUnit.test( ".hide() with step", function( assert ) {
var ready = assert.async();
assert.expect( 1 );
var element = $( "#elem" ),
step = function() {
assert.ok( true, "step callback invoked" );
step = $.noop;
};
element.hide( {
step: function() {
step();
},
complete: ready
} );
} );
QUnit.test( "Immediate Return Conditions", function( assert ) {
var hidden = $( "div.hidden" ),
count = 0;
assert.expect( 3 );
hidden.hide( "blind", function() {
assert.equal( ++count, 1, "Hide on hidden returned immediately" );
} ).show().show( "blind", function() {
assert.equal( ++count, 2, "Show on shown returned immediately" );
} );
assert.equal( ++count, 3, "Both Functions worked properly" );
} );
QUnit.test( ".hide() with hidden parent", function( assert ) {
assert.expect( 1 );
var element = $( "div.hidden" ).children();
element.hide( "blind", function() {
assert.equal( element.css( "display" ), "none", "display: none" );
} );
} );
QUnit.test( "Parse of null for options", function( assert ) {
var ready = assert.async();
var hidden = $( "div.hidden" ),
count = 0;
assert.expect( 1 );
hidden.show( "blind", null, 1, function() {
assert.equal( ++count, 1, "null for options still works" );
ready();
} );
} );
QUnit.test( "removeClass", function( assert ) {
assert.expect( 3 );
var element = $( "<div>" );
assert.equal( "", element[ 0 ].className );
element.addClass( "destroyed" );
assert.equal( "destroyed", element[ 0 ].className );
element.removeClass();
assert.equal( "", element[ 0 ].className );
} );
QUnit.module( "effects.core: animateClass" );
QUnit.test( "animateClass works with borderStyle", function( assert ) {
var ready = assert.async();
var test = $( "div.animateClass" );
assert.expect( 3 );
test.toggleClass( "testAddBorder", minDuration, function() {
test.toggleClass( "testAddBorder", minDuration, function() {
assert.equal( test.css( "borderLeftStyle" ), "none", "None border set" );
ready();
} );
assert.equal( test.css( "borderLeftStyle" ), "solid", "None border not immedately set" );
} );
assert.equal( test.css( "borderLeftStyle" ), "solid", "Solid border immedately set" );
} );
QUnit.test( "animateClass works with colors", function( assert ) {
var ready = assert.async();
var test = $( "div.animateClass" ),
oldStep = jQuery.fx.step.backgroundColor;
assert.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;
assert.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() {
assert.present( test.css( "backgroundColor" ), [ "#ffffff", "#fff", "rgb(255, 255, 255)" ], "Color is final" );
ready();
}
} );
} );
QUnit.test( "animateClass calls step option", function( assert ) {
assert.expect( 1 );
var ready = assert.async();
var test = jQuery( "div.animateClass" ),
step = function() {
assert.ok( true, "Step Function Called" );
test.stop();
ready();
step = $.noop;
};
test.toggleClass( "testChangeBackground", {
step: function() {
step();
}
} );
} );
QUnit.test( "animateClass works with children", function( assert ) {
assert.expect( 3 );
var ready = assert.async();
var animatedChild,
test = $( "div.animateClass" ),
h2 = test.find( "h2" );
test.toggleClass( "testChildren", {
children: true,
duration: duration,
complete: function() {
assert.equal( h2.css( "fontSize" ), "20px", "Text size is final during complete" );
test.toggleClass( "testChildren", {
duration: duration,
complete: function() {
assert.equal( h2.css( "fontSize" ), "10px", "Text size revertted after class removed" );
ready();
},
step: function( val, fx ) {
if ( fx.elem === h2[ 0 ] ) {
assert.ok( false, "Error - Animating property on h2" );
}
}
} );
},
step: function( val, fx ) {
if ( fx.prop === "fontSize" && fx.elem === h2[ 0 ] && !animatedChild ) {
assert.equal( fx.end, 20, "animating font size on child" );
animatedChild = true;
}
}
} );
} );
QUnit.test( "animateClass clears style properties when stopped", function( assert ) {
var ready = assert.async();
var test = $( "div.animateClass" ),
style = test[ 0 ].style,
orig = style.cssText;
assert.expect( 2 );
test.addClass( "testChangeBackground", duration );
assert.notEqual( orig, style.cssText, "cssText is not the same after starting animation" );
test
.stop( true, true )
.promise()
.then( function() {
assert.equal( orig, $.trim( style.cssText ), "cssText is the same after stopping animation midway" );
ready();
} );
} );
QUnit.test( "animateClass: css and class changes during animation are not lost (#7106)",
function( assert ) {
var ready = assert.async();
assert.expect( 2 );
var test = $( "div.ticket7106" );
// Ensure the class stays and that the css property stays
function animationComplete() {
assert.hasClasses( test, "testClass", "class change during animateClass was not lost" );
assert.equal( test.height(), 100, "css change during animateClass was not lost" );
ready();
}
// Add a class and change a style property after starting an animated class
test.addClass( "animate", minDuration, animationComplete )
.addClass( "testClass" )
.height( 100 );
} );
QUnit.test( "createPlaceholder: only created for static or relative elements", function( assert ) {
assert.expect( 4 );
assert.ok( $.effects.createPlaceholder( $( ".relative" ) ).length, "placeholder created for relative element" );
assert.ok( $.effects.createPlaceholder( $( ".static" ) ).length, "placeholder created for static element" );
assert.ok( !$.effects.createPlaceholder( $( ".absolute" ) ), "placeholder not created for absolute element" );
assert.ok( !$.effects.createPlaceholder( $( ".fixed" ) ), "placeholder not created for fixed element" );
} );
QUnit.test( "createPlaceholder: preserves layout affecting properties", function( assert ) {
assert.expect( 7 );
var position = 5,
element = $( ".relative" ).css( {
top: position,
left: position
} ),
before = {
offset: element.offset(),
outerWidth: element.outerWidth( true ),
outerHeight: element.outerHeight( true ),
"float": element.css( "float" ),
position: element.position()
},
placeholder = $.effects.createPlaceholder( element );
// Placeholders are only placed to preserve the effect on layout. Considering
// top and left do not change layout, they are not preserved, which makes some
// of the math simpler in the implementation.
assert.deepEqual( before.offset.top - position, placeholder.offset().top, "offset top preserved" );
assert.deepEqual( before.offset.left - position, placeholder.offset().left, "offset left preserved" );
assert.deepEqual( before.position.top - position, placeholder.position().top, "position top preserved" );
assert.deepEqual( before.position.left - position, placeholder.position().left, "position left preserved" );
assert.deepEqual( before[ "float" ], placeholder.css( "float" ), "float preserved" );
assert.deepEqual( before.outerWidth, placeholder.outerWidth( true ), "width preserved" );
assert.deepEqual( before.outerHeight, placeholder.outerHeight( true ), "height preserved" );
} );
QUnit.module( "transfer" );
QUnit.test( "transfer() without callback", function( assert ) {
var ready = assert.async();
assert.expect( 0 );
// Verify that the effect works without a callback
$( "#elem" ).transfer( {
to: ".animateClass",
duration: 1
} );
setTimeout( function() {
ready();
}, 25 );
} );
QUnit.test( "transfer() with callback", function( assert ) {
var ready = assert.async();
assert.expect( 1 );
$( "#elem" ).transfer( {
to: ".animateClass",
duration: 1
}, function() {
assert.ok( true, "callback invoked" );
ready();
} );
} );
$.each( $.effects.effect, function( effect ) {
QUnit.module( "effects." + effect );
common.testJshint( "effects/effect-" + effect );
if ( effect === "transfer" ) {
return;
}
QUnit.test( "show/hide", function( assert ) {
var ready = assert.async();
assert.expect( 12 );
var hidden = $( "div.hidden" ),
count = 0,
test = 0;
function queueTest( fn ) {
count++;
var point = count;
return function( next ) {
test++;
assert.equal( point, test, "Queue function fired in order" );
if ( fn ) {
fn();
} else {
setTimeout( next, minDuration );
}
};
}
function duringTest( fn ) {
return function( next ) {
setTimeout( fn );
next();
};
}
hidden
.queue( queueTest() )
.queue( duringTest( function() {
assert.ok( hidden.is( ":animated" ),
"Hidden is seen as animated during .show(\"" + effect + "\", time)" );
} ) )
.show( effect, minDuration, queueTest( function() {
assert.equal( hidden.css( "display" ), "block",
"Hidden is shown after .show(\"" + effect + "\", time)" );
assert.ok( !$( ".ui-effects-placeholder" ).length,
"No placeholder remains after .show(\"" + effect + "\", time)" );
} ) )
.queue( queueTest() )
.queue( duringTest( function() {
assert.ok( hidden.is( ":animated" ),
"Hidden is seen as animated during .hide(\"" + effect + "\", time)" );
} ) )
.hide( effect, minDuration, queueTest( function() {
assert.equal( hidden.css( "display" ), "none",
"Back to hidden after .hide(\"" + effect + "\", time)" );
assert.ok( !$( ".ui-effects-placeholder" ).length,
"No placeholder remains after .hide(\"" + effect + "\", time)" );
} ) )
.queue( queueTest( function() {
assert.deepEqual( hidden.queue(), [ "inprogress" ], "Only the inprogress sentinel remains" );
ready();
} ) );
} );
QUnit.test( "relative width & height - properties are preserved", function( assert ) {
var ready = assert.async();
var test = $( "div.relWidth.relHeight" ),
width = test.width(), height = test.height(),
cssWidth = test[ 0 ].style.width, cssHeight = test[ 0 ].style.height;
assert.expect( 4 );
test.toggle( effect, minDuration, function() {
assert.equal( test[ 0 ].style.width, cssWidth, "Inline CSS Width has been reset after animation ended" );
assert.equal( test[ 0 ].style.height, cssHeight, "Inline CSS Height has been rest after animation ended" );
ready();
} );
assert.equal( test.width(), width, "Width is the same px after animation started" );
assert.equal( test.height(), height, "Height is the same px after animation started" );
} );
} );
} );

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

@ -0,0 +1,106 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js"></script>
<script src="../../lib/bootstrap.js" data-modules="core scale">
</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;
}
.relative {
position: relative;
top: 0px;
left: 0px;
}
.absolute {
position: absolute;
top: 0px;
left: 0px;
}
.fixed {
position: fixed;
top: 0px;
left: 0px;
}
.static {
position: static;
}
</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 class="relative"></div>
<div class="absolute"></div>
<div class="fixed"></div>
<div class="static"></div>
</div>
</body>
</html>

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