Datepicker tests: Update to QUnit 2.x, shift to use no globals

This commit is contained in:
Felix Nagel 2016-12-11 17:53:53 +01:00
parent c0f1bd6526
commit 800307be2a
4 changed files with 127 additions and 117 deletions

View File

@ -1,19 +1,20 @@
define( [
"qunit",
"jquery",
"ui/widgets/datepicker"
], function( $ ) {
], function( QUnit, $ ) {
module( "datepicker: core", {
setup: function() {
QUnit.module( "datepicker: core", {
beforeEach: function() {
this.element = $( "#datepicker" ).datepicker( { show: false, hide: false } );
this.widget = this.element.datepicker( "widget" );
},
teardown: function() {
afterEach: function() {
this.element.datepicker( "destroy" ).val( "" );
}
} );
test( "input's value determines starting date", function( assert ) {
QUnit.test( "input's value determines starting date", function( assert ) {
assert.expect( 3 );
this.element = $( "<input>" ).appendTo( "#qunit-fixture" );
@ -22,12 +23,13 @@ test( "input's value determines starting date", function( assert ) {
this.element.datepicker( "open" );
equal( this.widget.find( ".ui-calendar-month" ).html(), "January", "correct month displayed" );
equal( this.widget.find( ".ui-calendar-year" ).html(), "2014", "correct year displayed" );
equal( this.widget.find( ".ui-state-active" ).html(), "1", "correct day highlighted" );
assert.equal( this.widget.find( ".ui-calendar-month" ).html(), "January", "correct month displayed" );
assert.equal( this.widget.find( ".ui-calendar-year" ).html(), "2014", "correct year displayed" );
assert.equal( this.widget.find( ".ui-state-active" ).html(), "1", "correct day highlighted" );
} );
asyncTest( "base structure", function( assert ) {
QUnit.test( "base structure", function( assert ) {
var ready = assert.async();
assert.expect( 5 );
var that = this;
@ -35,46 +37,48 @@ asyncTest( "base structure", function( assert ) {
this.element.focus();
setTimeout( function() {
ok( that.widget.is( ":visible" ), "Datepicker visible" );
equal( that.widget.children().length, 3, "Child count" );
ok( that.widget.is( ".ui-calendar" ), "Class ui-calendar" );
ok( that.widget.is( ".ui-datepicker" ), "Class ui-datepicker" );
ok( that.widget.is( ".ui-front" ), "Class ui-front" );
assert.ok( that.widget.is( ":visible" ), "Datepicker visible" );
assert.equal( that.widget.children().length, 3, "Child count" );
assert.ok( that.widget.is( ".ui-calendar" ), "Class ui-calendar" );
assert.ok( that.widget.is( ".ui-datepicker" ), "Class ui-datepicker" );
assert.ok( that.widget.is( ".ui-front" ), "Class ui-front" );
that.element.datepicker( "close" );
start();
ready();
}, 50 );
} );
asyncTest( "Keyboard handling: focus", function( assert ) {
QUnit.test( "Keyboard handling: focus", function( assert ) {
var ready = assert.async();
assert.expect( 2 );
var that = this;
ok( !this.widget.is( ":visible" ), "datepicker closed" );
assert.ok( !this.widget.is( ":visible" ), "datepicker closed" );
this.element.focus();
setTimeout( function() {
ok( that.widget.is( ":visible" ), "Datepicker opens when receiving focus" );
start();
assert.ok( that.widget.is( ":visible" ), "Datepicker opens when receiving focus" );
ready();
}, 100 );
} );
asyncTest( "Keyboard handling: keystroke up", function( assert ) {
QUnit.test( "Keyboard handling: keystroke up", function( assert ) {
var ready = assert.async();
assert.expect( 2 );
var that = this;
ok( !this.widget.is( ":visible" ), "datepicker closed" );
assert.ok( !this.widget.is( ":visible" ), "datepicker closed" );
this.element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } );
setTimeout( function() {
ok( that.widget.is( ":visible" ), "Keystroke up opens datepicker" );
start();
assert.ok( that.widget.is( ":visible" ), "Keystroke up opens datepicker" );
ready();
}, 100 );
} );
test( "Keyboard handling: input", function( assert ) {
QUnit.test( "Keyboard handling: input", function( assert ) {
assert.expect( 6 );
var that = this,
@ -92,10 +96,10 @@ test( "Keyboard handling: input", function( assert ) {
that.element
.val( "" )
.datepicker( "open" );
ok( instance.isOpen, "datepicker is open before escape" );
assert.ok( instance.isOpen, "datepicker is open before escape" );
that.element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } );
ok( !instance.isOpen, "escape closes the datepicker" );
assert.ok( !instance.isOpen, "escape closes the datepicker" );
that.element
.val( "1/1/14" )
@ -120,11 +124,12 @@ test( "Keyboard handling: input", function( assert ) {
} );
// TODO: implement
test( "ARIA", function() {
expect( 0 );
QUnit.test( "ARIA", function( assert ) {
assert.expect( 0 );
} );
asyncTest( "mouse", function( assert ) {
QUnit.test( "mouse", function( assert ) {
var ready = assert.async();
assert.expect( 4 );
var that = this;
@ -142,7 +147,7 @@ asyncTest( "mouse", function( assert ) {
that.element.val( "" ).datepicker( "refresh" );
that.element.simulate( "click" );
strictEqual( that.element.datepicker( "valueAsDate" ), null, "Mouse click - close" );
assert.strictEqual( that.element.datepicker( "valueAsDate" ), null, "Mouse click - close" );
that.element.val( "4/4/08" ).datepicker( "refresh" ).datepicker( "open" );
that.element.simulate( "click" );
@ -161,7 +166,7 @@ asyncTest( "mouse", function( assert ) {
"Mouse click - abandoned"
);
start();
ready();
}, 100 );
} );

View File

@ -1,30 +1,31 @@
define( [
"qunit",
"jquery",
"ui/widgets/datepicker"
], function( $ ) {
], function( QUnit, $ ) {
module( "datepicker: events", {
setup: function() {
QUnit.module( "datepicker: events", {
beforeEach: function() {
this.element = $( "#datepicker" ).datepicker( { show: false, hide: false } );
this.widget = this.element.datepicker( "widget" );
},
teardown: function() {
afterEach: function() {
this.element.datepicker( "destroy" ).val( "" );
}
} );
test( "beforeOpen", function( assert ) {
QUnit.test( "beforeOpen", function( assert ) {
assert.expect( 3 );
var that = this;
this.element.datepicker( {
beforeOpen: function() {
ok( true, "beforeOpen event fired before open" );
ok( that.element.datepicker( "widget" ).is( ":hidden" ), "calendar hidden on beforeOpen" );
assert.ok( true, "beforeOpen event fired before open" );
assert.ok( that.element.datepicker( "widget" ).is( ":hidden" ), "calendar hidden on beforeOpen" );
},
open: function() {
ok( that.element.datepicker( "widget" ).is( ":visible" ), "calendar open on open" );
assert.ok( that.element.datepicker( "widget" ).is( ":visible" ), "calendar open on open" );
}
} );
@ -36,21 +37,21 @@ test( "beforeOpen", function( assert ) {
return false;
},
open: function() {
ok( false, "calendar should not open when openBefore is canceled" );
assert.ok( false, "calendar should not open when openBefore is canceled" );
}
} )
.datepicker( "open" );
} );
test( "change", function( assert ) {
QUnit.test( "change", function( assert ) {
assert.expect( 4 );
var shouldFire;
this.element.datepicker( {
change: function( event ) {
ok( shouldFire, "change event fired" );
equal(
assert.ok( shouldFire, "change event fired" );
assert.equal(
event.type,
"datepickerchange",
"change event"
@ -71,14 +72,14 @@ test( "change", function( assert ) {
this.widget.find( "tbody button" ).eq( 2 ).simulate( "mousedown" );
} );
test( "close", function( assert ) {
QUnit.test( "close", function( assert ) {
assert.expect( 4 );
var shouldFire;
this.element.datepicker( {
close: function() {
ok( shouldFire, "close event fired" );
assert.ok( shouldFire, "close event fired" );
}
} );
@ -103,22 +104,23 @@ test( "close", function( assert ) {
this.widget.find( "tbody tr:first button:first" ).simulate( "mousedown" );
} );
test( "open", function( assert ) {
QUnit.test( "open", function( assert ) {
assert.expect( 2 );
var that = this;
this.element.datepicker( {
open: function() {
ok( true, "open event fired on open" );
ok( that.widget.is( ":visible" ), "calendar open on open" );
assert.ok( true, "open event fired on open" );
assert.ok( that.widget.is( ":visible" ), "calendar open on open" );
}
} );
this.element.datepicker( "open" );
} );
asyncTest( "select", function( assert ) {
QUnit.test( "select", function( assert ) {
var ready = assert.async();
assert.expect( 4 );
var message = "",
@ -126,8 +128,8 @@ asyncTest( "select", function( assert ) {
this.element.datepicker( {
select: function( event ) {
ok( true, "select event fired " + message );
equal(
assert.ok( true, "select event fired " + message );
assert.equal(
event.originalEvent.type,
"calendarselect",
"select originalEvent " + message
@ -169,7 +171,7 @@ asyncTest( "select", function( assert ) {
setTimeout( function() {
$( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } );
that.element.datepicker( "close" );
start();
ready();
}, 100 );
}

View File

@ -1,114 +1,115 @@
define( [
"qunit",
"jquery",
"ui/widgets/datepicker"
], function( $ ) {
], function( QUnit, $ ) {
module( "datepicker: methods", {
setup: function() {
QUnit.module( "datepicker: methods", {
beforeEach: function() {
this.element = $( "#datepicker" ).datepicker( { show: false, hide: false } );
this.widget = this.element.datepicker( "widget" );
},
teardown: function() {
afterEach: function() {
this.element.datepicker( "destroy" ).val( "" );
}
} );
test( "destroy", function( assert ) {
QUnit.test( "destroy", function( assert ) {
assert.expect( 3 );
var input = $( "<input>" ).appendTo( "#qunit-fixture" );
assert.domEqual( input, function() {
input.datepicker();
ok( input.attr( "aria-owns" ), "aria-owns attribute added" );
ok( input.attr( "aria-haspopup" ), "aria-haspopup attribute added" );
assert.ok( input.attr( "aria-owns" ), "aria-owns attribute added" );
assert.ok( input.attr( "aria-haspopup" ), "aria-haspopup attribute added" );
input.datepicker( "destroy" );
} );
} );
test( "enable / disable", function( assert ) {
QUnit.test( "enable / disable", function( assert ) {
assert.expect( 10 );
this.element.datepicker( "disable" );
ok( this.element.datepicker( "option", "disabled" ), "disabled option is set" );
ok( this.widget.hasClass( "ui-datepicker-disabled" ), "has disabled widget class name" );
ok( this.element.hasClass( "ui-state-disabled" ), "has disabled state class name" );
equal( this.element.attr( "aria-disabled" ), "true", "has ARIA disabled" );
equal( this.element.attr( "disabled" ), "disabled", "input disabled" );
assert.ok( this.element.datepicker( "option", "disabled" ), "disabled option is set" );
assert.ok( this.widget.hasClass( "ui-datepicker-disabled" ), "has disabled widget class name" );
assert.ok( this.element.hasClass( "ui-state-disabled" ), "has disabled state class name" );
assert.equal( this.element.attr( "aria-disabled" ), "true", "has ARIA disabled" );
assert.equal( this.element.attr( "disabled" ), "disabled", "input disabled" );
this.element.datepicker( "enable" );
ok( !this.element.datepicker( "option", "disabled" ), "enabled after enable() call" );
ok( !this.widget.hasClass( "ui-datepicker-disabled" ), "no longer has disabled widget class name" );
ok( !this.element.hasClass( "ui-state-disabled" ), "no longer has disabled state class name" );
equal( this.element.attr( "aria-disabled" ), "false", "no longer has ARIA disabled" );
equal( this.element.attr( "disabled" ), undefined, "input no longer disabled" );
assert.ok( !this.element.datepicker( "option", "disabled" ), "enabled after enable() call" );
assert.ok( !this.widget.hasClass( "ui-datepicker-disabled" ), "no longer has disabled widget class name" );
assert.ok( !this.element.hasClass( "ui-state-disabled" ), "no longer has disabled state class name" );
assert.equal( this.element.attr( "aria-disabled" ), "false", "no longer has ARIA disabled" );
assert.equal( this.element.attr( "disabled" ), undefined, "input no longer disabled" );
} );
test( "widget", function( assert ) {
QUnit.test( "widget", function( assert ) {
assert.expect( 1 );
deepEqual( $( "body > .ui-front" )[ 0 ], this.widget[ 0 ] );
assert.deepEqual( $( "body > .ui-front" )[ 0 ], this.widget[ 0 ] );
this.widget.remove();
} );
test( "open / close", function( assert ) {
QUnit.test( "open / close", function( assert ) {
assert.expect( 7 );
ok( this.widget.is( ":hidden" ), "calendar hidden on init" );
assert.ok( this.widget.is( ":hidden" ), "calendar hidden on init" );
this.element.datepicker( "open" );
ok( this.widget.is( ":visible" ), "open: calendar visible" );
equal( this.widget.attr( "aria-hidden" ), "false", "open: calendar aria-hidden" );
equal( this.widget.attr( "aria-expanded" ), "true", "close: calendar aria-expanded" );
assert.ok( this.widget.is( ":visible" ), "open: calendar visible" );
assert.equal( this.widget.attr( "aria-hidden" ), "false", "open: calendar aria-hidden" );
assert.equal( this.widget.attr( "aria-expanded" ), "true", "close: calendar aria-expanded" );
this.element.datepicker( "close" );
ok( !this.widget.is( ":visible" ), "close: calendar hidden" );
equal( this.widget.attr( "aria-hidden" ), "true", "close: calendar aria-hidden" );
equal( this.widget.attr( "aria-expanded" ), "false", "close: calendar aria-expanded" );
assert.ok( !this.widget.is( ":visible" ), "close: calendar hidden" );
assert.equal( this.widget.attr( "aria-hidden" ), "true", "close: calendar aria-hidden" );
assert.equal( this.widget.attr( "aria-expanded" ), "false", "close: calendar aria-expanded" );
} );
test( "value", function( assert ) {
QUnit.test( "value", function( assert ) {
assert.expect( 4 );
this.element.datepicker( "value", "1/1/14" );
equal( this.element.val(), "1/1/14", "input's value set" );
assert.equal( this.element.val(), "1/1/14", "input's value set" );
this.element.datepicker( "open" );
ok(
assert.ok(
this.widget.find( "button[data-ui-calendar-timestamp]" ).eq( 0 ).hasClass( "ui-state-active" ),
"first day marked as selected"
);
equal( this.element.datepicker( "value" ), "1/1/14", "getter" );
assert.equal( this.element.datepicker( "value" ), "1/1/14", "getter" );
this.element.val( "abc" );
strictEqual( this.element.datepicker( "value" ), null, "Invalid values should return null." );
assert.strictEqual( this.element.datepicker( "value" ), null, "Invalid values should return null." );
} );
test( "valueAsDate", function( assert ) {
QUnit.test( "valueAsDate", function( assert ) {
assert.expect( 5 );
strictEqual( this.element.datepicker( "valueAsDate" ), null, "Default" );
assert.strictEqual( this.element.datepicker( "valueAsDate" ), null, "Default" );
this.element.datepicker( "valueAsDate", new Date( 2014, 0, 1 ) );
equal( this.element.val(), "1/1/14", "Input's value set" );
ok(
assert.equal( this.element.val(), "1/1/14", "Input's value set" );
assert.ok(
this.widget.find( "button[data-ui-calendar-timestamp]" ).eq( 0 ).hasClass( "ui-state-active" ),
"First day marked as selected"
);
assert.dateEqual( this.element.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ), "Getter" );
this.element.val( "a/b/c" );
equal( this.element.datepicker( "valueAsDate" ), null, "Invalid dates return null" );
assert.equal( this.element.datepicker( "valueAsDate" ), null, "Invalid dates return null" );
} );
test( "isValid", function( assert ) {
QUnit.test( "isValid", function( assert ) {
assert.expect( 2 );
this.element.val( "1/1/14" );
ok( this.element.datepicker( "isValid" ) );
assert.ok( this.element.datepicker( "isValid" ) );
this.element.val( "1/1/abc" );
ok( !this.element.datepicker( "isValid" ) );
assert.ok( !this.element.datepicker( "isValid" ) );
} );
} );

View File

@ -1,54 +1,55 @@
define( [
"qunit",
"jquery",
"ui/widgets/datepicker"
], function( $ ) {
], function( QUnit, $ ) {
module( "datepicker: options", {
setup: function() {
QUnit.module( "datepicker: options", {
beforeEach: function() {
this.element = $( "#datepicker" ).datepicker( { show: false, hide: false } );
this.widget = this.element.datepicker( "widget" );
},
teardown: function() {
afterEach: function() {
this.element.datepicker( "destroy" ).val( "" );
}
} );
test( "appendTo", function( assert ) {
QUnit.test( "appendTo", function( assert ) {
assert.expect( 6 );
var container = this.widget.parent()[ 0 ],
detached = $( "<div>" );
equal( container, document.body, "defaults to body" );
assert.equal( container, document.body, "defaults to body" );
this.element.datepicker( "destroy" );
this.element.datepicker( { appendTo: "#qunit-fixture" } );
container = this.element.datepicker( "widget" ).parent()[ 0 ];
equal( container, $( "#qunit-fixture" )[ 0 ], "child of specified element" );
assert.equal( container, $( "#qunit-fixture" )[ 0 ], "child of specified element" );
this.element.datepicker( "destroy" );
this.element.datepicker( { appendTo: "#does-not-exist" } );
container = this.element.datepicker( "widget" ).parent()[ 0 ];
equal( container, document.body, "set to body if element does not exist" );
assert.equal( container, document.body, "set to body if element does not exist" );
this.element.datepicker( "destroy" );
this.element.datepicker()
.datepicker( "option", "appendTo", "#qunit-fixture" );
container = this.element.datepicker( "widget" ).parent()[ 0 ];
equal( container, $( "#qunit-fixture" )[ 0 ], "modified after init" );
assert.equal( container, $( "#qunit-fixture" )[ 0 ], "modified after init" );
this.element.datepicker( "destroy" );
this.element.datepicker( { appendTo: detached } );
container = this.element.datepicker( "widget" ).parent()[ 0 ];
equal( container, detached[ 0 ], "detached jQuery object" );
assert.equal( container, detached[ 0 ], "detached jQuery object" );
this.element.datepicker( "destroy" );
this.element.datepicker( { appendTo: detached[ 0 ] } );
container = this.element.datepicker( "widget" ).parent()[ 0 ];
equal( container, detached[ 0 ], "detached DOM element" );
assert.equal( container, detached[ 0 ], "detached DOM element" );
} );
test( "min / max", function( assert ) {
QUnit.test( "min / max", function( assert ) {
assert.expect( 10 );
var min, max;
@ -87,7 +88,7 @@ test( "min / max", function( assert ) {
} );
test( "Pass-through options", function( assert ) {
QUnit.test( "Pass-through options", function( assert ) {
assert.expect( 11 );
var options = {
@ -107,23 +108,24 @@ test( "Pass-through options", function( assert ) {
$.each( options, function( key, value ) {
input.datepicker( "option", key, value );
deepEqual(
assert.deepEqual(
instance.calendar.calendar( "option", key ),
value,
"option " + key + ": correct value"
);
if ( key === "dateFormat" ) {
equal( input.val(), "Wednesday, January 1, 2014", "option " + key + ": updated format" );
assert.equal( input.val(), "Wednesday, January 1, 2014", "option " + key + ": updated format" );
}
if ( key === "locale" ) {
equal( input.val(), "Mittwoch, 1. Januar 2014", "option " + key + ": updated locale" );
assert.equal( input.val(), "Mittwoch, 1. Januar 2014", "option " + key + ": updated locale" );
}
} );
} );
asyncTest( "position", function( assert ) {
QUnit.test( "position", function( assert ) {
var ready = assert.async();
assert.expect( 3 );
var input = $( "<input>" ).datepicker().appendTo( "body" ).css( {
@ -148,11 +150,11 @@ asyncTest( "position", function( assert ) {
"datepicker on right hand side of input after position change" );
input.remove();
start();
ready();
} );
} );
test( "Stop datepicker from appearing with beforeOpen event handler - nothing", function( assert ) {
QUnit.test( "Stop datepicker from appearing with beforeOpen event handler - nothing", function( assert ) {
assert.expect( 1 );
this.element.datepicker( {
@ -160,10 +162,10 @@ test( "Stop datepicker from appearing with beforeOpen event handler - nothing",
} );
this.element.datepicker( "open" );
ok( this.element.datepicker( "widget" ).is( ":visible" ), "beforeOpen returns nothing" );
assert.ok( this.element.datepicker( "widget" ).is( ":visible" ), "beforeOpen returns nothing" );
} );
test( "Stop datepicker from appearing with beforeOpen event handler - true", function( assert ) {
QUnit.test( "Stop datepicker from appearing with beforeOpen event handler - true", function( assert ) {
assert.expect( 1 );
this.element.datepicker( {
@ -172,10 +174,10 @@ test( "Stop datepicker from appearing with beforeOpen event handler - true", fun
}
} );
this.element.datepicker( "open" );
ok( this.element.datepicker( "widget" ).is( ":visible" ), "beforeOpen returns true" );
assert.ok( this.element.datepicker( "widget" ).is( ":visible" ), "beforeOpen returns true" );
} );
test( "Stop datepicker from appearing with beforeOpen event handler - false", function( assert ) {
QUnit.test( "Stop datepicker from appearing with beforeOpen event handler - false", function( assert ) {
assert.expect( 1 );
this.element.datepicker( {
@ -184,7 +186,7 @@ test( "Stop datepicker from appearing with beforeOpen event handler - false", fu
}
} );
this.element.datepicker( "open" );
ok( !this.element.datepicker( "widget" ).is( ":visible" ), "beforeOpen returns false" );
assert.ok( !this.element.datepicker( "widget" ).is( ":visible" ), "beforeOpen returns false" );
} );
} );