library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
9461f6680b
jquery-ui/tests/unit/calendar/calendar_options.js

321 lines
12 KiB
JavaScript
Raw Normal View History

Calendar: Add calendar widget Add calendar widget by copying and renaming datepicker widget files. Remove datepicker functionality, options and methods from Calendar. Remove calendar functionality, options and methods from Datepicker. Adjust tests due to split and changed specification. Remove duplicated demo files and fix some demos. Simplify calendar generation, use CSS instead of inline styles. Fix destroy method. Make use of uniqueId method. Fix focus highlighting when month is changed. Add version property. Add common unit tests. Fix input keyboard handling.
2014-06-03 21:18:51 +00:00
(function( $ ) {
module( "calendar: options" );
Calendar: Add buttons option
2014-06-19 22:13:20 +00:00
test("buttons", function() {
expect( 21 );
var button, i, newButtons,
buttons = {
"Ok": function( event ) {
ok(true, "button click fires callback" );
equal( this, element[ 0 ], "context of callback" );
equal( event.target, button[ 0 ], "event target" );
},
"Cancel": function( event ) {
ok( true, "button click fires callback" );
equal( this, element[ 0 ], "context of callback" );
equal( event.target, button[ 1 ], "event target" );
}
},
element = $( "#calendar" ).calendar({ buttons: buttons });
button = element.calendar( "widget" ).find( ".ui-calendar-buttonpane button" );
equal( button.length, 2, "number of buttons" );
i = 0;
$.each( buttons, function( key ) {
equal( button.eq( i ).text(), key, "text of button " + ( i + 1 ) );
i++;
});
ok( button.parent().hasClass( "ui-calendar-buttonset" ), "buttons in container" );
ok(
element.calendar( "widget" ).hasClass( "ui-calendar-buttons" ),
"calendar wrapper adds class about having buttons"
);
button.trigger( "click" );
newButtons = {
"Close": function( event ) {
ok( true, "button click fires callback" );
equal( this, element[ 0 ], "context of callback" );
equal( event.target, button[ 0 ], "event target" );
}
};
deepEqual(
element.calendar( "option", "buttons" ),
buttons,
".calendar('option', 'buttons') getter"
);
element.calendar( "option", "buttons", newButtons );
deepEqual(
element.calendar( "option", "buttons" ),
newButtons,
".calendar('option', 'buttons', ...) setter"
);
button = element.calendar( "widget" ).find( ".ui-calendar-buttonpane button" );
equal( button.length, 1, "number of buttons after setter" );
button.trigger( "click" );
i = 0;
$.each( newButtons, function( key ) {
equal( button.eq( i ).text(), key, "text of button " + ( i + 1 ) );
i += 1;
});
element.calendar( "option", "buttons", null );
button = element.calendar( "widget" ).find( ".ui-calendar-buttonpane button" );
equal( button.length, 0, "all buttons have been removed" );
equal( element.find( ".ui-calendar-buttonset" ).length, 0, "buttonset has been removed" );
equal( element.hasClass( "ui-calendar-buttons" ), false, "calendar element removes class about having buttons" );
element.remove();
});
test( "buttons - advanced", function() {
expect( 7 );
var buttons,
element = $( "#calendar" ).calendar({
buttons: [{
text: "a button",
"class": "additional-class",
id: "my-button-id",
click: function() {
equal( this, element[ 0 ], "correct context" );
},
icons: {
primary: "ui-icon-cancel"
},
showText: false
}]
});
buttons = element.calendar( "widget" ).find( ".ui-calendar-buttonpane button" );
equal( buttons.length, 1, "correct number of buttons" );
equal( buttons.attr( "id" ), "my-button-id", "correct id" );
equal ( buttons.text(), "a button", "correct label" );
ok( buttons.hasClass( "additional-class" ), "additional classes added" );
deepEqual( buttons.button( "option", "icons" ), { primary: "ui-icon-cancel", secondary: null } );
equal( buttons.button( "option", "text" ), false );
buttons.click();
element.remove();
});
Calendar: Add calendar widget Add calendar widget by copying and renaming datepicker widget files. Remove datepicker functionality, options and methods from Calendar. Remove calendar functionality, options and methods from Datepicker. Adjust tests due to split and changed specification. Remove duplicated demo files and fix some demos. Simplify calendar generation, use CSS instead of inline styles. Fix destroy method. Make use of uniqueId method. Fix focus highlighting when month is changed. Add version property. Add common unit tests. Fix input keyboard handling.
2014-06-03 21:18:51 +00:00
test( "dateFormat", function() {
expect( 2 );
var element = $( "#calendar" ).calendar({
value: "1/1/14"
}),
firstDayLink = element.calendar( "widget" ).find( "td[id]:first a" );
firstDayLink.trigger( "mousedown" );
equal( element.calendar( "value" ), "1/1/14", "default formatting" );
element.calendar( "option", "dateFormat", { date: "full" } );
equal( element.calendar( "value" ), "Wednesday, January 1, 2014", "updated formatting" );
});
test( "eachDay", function() {
expect( 5 );
var timestamp,
input = $( "#calendar" ).calendar(),
picker = input.calendar( "widget" ),
firstCell = picker.find( "td[id]:first" );
equal( firstCell.find( "a" ).length, 1, "days are selectable by default" );
timestamp = parseInt( firstCell.find( "a" ).attr( "data-timestamp" ), 10 );
equal( new Date( timestamp ).getDate(), 1, "first available day is the 1st by default" );
// Do not render the 1st of the month
input.calendar( "option", "eachDay", function( day ) {
if ( day.date === 1 ) {
day.render = false;
}
});
firstCell = picker.find( "td[id]:first" );
timestamp = parseInt( firstCell.find( "a" ).attr( "data-timestamp" ), 10 );
equal( new Date( timestamp ).getDate(), 2, "first available day is the 2nd" );
// Display the 1st of the month but make it not selectable.
input.calendar( "option", "eachDay", function( day ) {
if ( day.date === 1 ) {
day.selectable = false;
}
});
firstCell = picker.find( "td[id]:first" );
equal( firstCell.find( "a" ).length, 0, "the 1st is not selectable" );
input.calendar( "option", "eachDay", function( day ) {
if ( day.date === 1 ) {
day.extraClasses = "ui-custom";
}
});
ok( picker.find( "td[id]:first a" ).hasClass( "ui-custom" ), "extraClasses applied" );
input.calendar( "destroy" );
});
test( "showWeek", function() {
expect( 7 );
var input = $( "#calendar" ).calendar(),
container = input.calendar( "widget" );
equal( container.find( "thead th" ).length, 7, "just 7 days, no column cell" );
equal( container.find( ".ui-calendar-week-col" ).length, 0,
"no week column cells present" );
input.calendar( "destroy" );
input = $( "#calendar" ).calendar({ showWeek: true });
container = input.calendar( "widget" );
equal( container.find( "thead th" ).length, 8, "7 days + a column cell" );
ok( container.find( "thead th:first" ).is( ".ui-calendar-week-col" ),
"first cell should have ui-datepicker-week-col class name" );
equal( container.find( ".ui-calendar-week-col" ).length,
container.find( "tr" ).length, "one week cell for each week" );
input.calendar( "destroy" );
input = $( "#calendar" ).calendar();
container = input.calendar( "widget" );
equal( container.find( "thead th" ).length, 7, "no week column" );
input.calendar( "option", "showWeek", true );
equal( container.find( "thead th" ).length, 8, "supports changing option after init" );
});
test( "min / max", function() {
Calendar: Add min and max option. Improve render day cell mechanism.
2014-06-04 17:07:23 +00:00
expect( 7 );
// With existing date
var element = $( "#calendar" ).calendar(),
minDate = new Date( 2008, 2 - 1, 29 ),
maxDate = new Date( 2008, 12 - 1, 7 );
element
.calendar( "option", { min: minDate } )
.calendar( "value", "6/4/08" );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value > min" );
element
.calendar( "option", { min: minDate } )
.calendar( "value", "1/4/08" );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value < min" );
element
.calendar( "option", { min: null } )
.calendar( "value", "6/4/08" )
.calendar( "option", { max: maxDate } );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value < max" );
element
.calendar( "option", { max: maxDate } )
.calendar( "value", "1/4/09" );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - setDate > max" );
element
.calendar( "option", { min: minDate, max: maxDate } )
.calendar( "value", "1/4/08" );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value < min" );
element
.calendar( "option", { min: minDate, max: maxDate } )
.calendar( "value", "6/4/08" );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value > min, < max" );
element
.calendar( "option", { min: minDate, max: maxDate } )
.calendar( "value", "1/4/09" );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value > max" );});
Calendar: Add calendar widget Add calendar widget by copying and renaming datepicker widget files. Remove datepicker functionality, options and methods from Calendar. Remove calendar functionality, options and methods from Datepicker. Adjust tests due to split and changed specification. Remove duplicated demo files and fix some demos. Simplify calendar generation, use CSS instead of inline styles. Fix destroy method. Make use of uniqueId method. Fix focus highlighting when month is changed. Add version property. Add common unit tests. Fix input keyboard handling.
2014-06-03 21:18:51 +00:00
/*
// TODO: Move this to $.date, Globalize or calendar widget
test( "daylightSaving", function() {
expect( 25 );
var inp = TestHelpers.calendar.init( "#inp" ),
dp = $( "#ui-datepicker-div" );
ok(true, "Daylight saving - " + new Date());
// Australia, Sydney - AM change, southern hemisphere
inp.val( "04/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(6) a", dp).simulate( "click" );
equal(inp.val(), "04/05/2008", "Daylight saving - Australia 04/05/2008" );
inp.val( "04/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(7) a", dp).simulate( "click" );
equal(inp.val(), "04/06/2008", "Daylight saving - Australia 04/06/2008" );
inp.val( "04/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(8) a", dp).simulate( "click" );
equal(inp.val(), "04/07/2008", "Daylight saving - Australia 04/07/2008" );
inp.val( "10/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(6) a", dp).simulate( "click" );
equal(inp.val(), "10/04/2008", "Daylight saving - Australia 10/04/2008" );
inp.val( "10/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(7) a", dp).simulate( "click" );
equal(inp.val(), "10/05/2008", "Daylight saving - Australia 10/05/2008" );
inp.val( "10/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(8) a", dp).simulate( "click" );
equal(inp.val(), "10/06/2008", "Daylight saving - Australia 10/06/2008" );
// Brasil, Brasilia - midnight change, southern hemisphere
inp.val( "02/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(20) a", dp).simulate( "click" );
equal(inp.val(), "02/16/2008", "Daylight saving - Brasil 02/16/2008" );
inp.val( "02/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(21) a", dp).simulate( "click" );
equal(inp.val(), "02/17/2008", "Daylight saving - Brasil 02/17/2008" );
inp.val( "02/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(22) a", dp).simulate( "click" );
equal(inp.val(), "02/18/2008", "Daylight saving - Brasil 02/18/2008" );
inp.val( "10/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(13) a", dp).simulate( "click" );
equal(inp.val(), "10/11/2008", "Daylight saving - Brasil 10/11/2008" );
inp.val( "10/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(14) a", dp).simulate( "click" );
equal(inp.val(), "10/12/2008", "Daylight saving - Brasil 10/12/2008" );
inp.val( "10/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(15) a", dp).simulate( "click" );
equal(inp.val(), "10/13/2008", "Daylight saving - Brasil 10/13/2008" );
// Lebanon, Beirut - midnight change, northern hemisphere
inp.val( "03/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(34) a", dp).simulate( "click" );
equal(inp.val(), "03/29/2008", "Daylight saving - Lebanon 03/29/2008" );
inp.val( "03/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(35) a", dp).simulate( "click" );
equal(inp.val(), "03/30/2008", "Daylight saving - Lebanon 03/30/2008" );
inp.val( "03/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(36) a", dp).simulate( "click" );
equal(inp.val(), "03/31/2008", "Daylight saving - Lebanon 03/31/2008" );
inp.val( "10/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(27) a", dp).simulate( "click" );
equal(inp.val(), "10/25/2008", "Daylight saving - Lebanon 10/25/2008" );
inp.val( "10/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(28) a", dp).simulate( "click" );
equal(inp.val(), "10/26/2008", "Daylight saving - Lebanon 10/26/2008" );
inp.val( "10/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(29) a", dp).simulate( "click" );
equal(inp.val(), "10/27/2008", "Daylight saving - Lebanon 10/27/2008" );
// US, Eastern - AM change, northern hemisphere
inp.val( "03/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(13) a", dp).simulate( "click" );
equal(inp.val(), "03/08/2008", "Daylight saving - US 03/08/2008" );
inp.val( "03/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(14) a", dp).simulate( "click" );
equal(inp.val(), "03/09/2008", "Daylight saving - US 03/09/2008" );
inp.val( "03/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(15) a", dp).simulate( "click" );
equal(inp.val(), "03/10/2008", "Daylight saving - US 03/10/2008" );
inp.val( "11/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(6) a", dp).simulate( "click" );
equal(inp.val(), "11/01/2008", "Daylight saving - US 11/01/2008" );
inp.val( "11/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(7) a", dp).simulate( "click" );
equal(inp.val(), "11/02/2008", "Daylight saving - US 11/02/2008" );
inp.val( "11/01/2008" ).calendar( "show" );
$( ".ui-calendar-calendar td:eq(8) a", dp).simulate( "click" );
equal(inp.val(), "11/03/2008", "Daylight saving - US 11/03/2008" );
});
*/
})(jQuery);
Reference in New Issue Copy Permalink