calendar.html revision 76438e9b6959cc0bd7e35fb9cf5a11c87a37f744
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Calendar Tests</title>
<script type="text/javascript" src="/build/yui/yui.js"></script>
</head>
<body class="yui3-skin-sam">
<h1>Calendar Tests</h1>
<p><input type="button" value="Run Tests" id="btnRun" disabled=true></p>
<div id="container"></div>
<script type="text/javascript">
(function() {
YUI({
base: "/build/",
logInclude:{"TestRunner":true},
useConsole: true,
allowRollup: false,
filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'min'
}).use("console", "test", "dump", "calendar", "node-event-simulate", function(Y) {
// Set up the page
var ASSERT = Y.Assert,
ARRAYASSERT = Y.ArrayAssert,
btnRun = Y.one("#btnRun"),
myConsole = new Y.Console().render();
btnRun.set("disabled", false);
Y.on("click", function(){
Y.Test.Runner.run();
}, btnRun);
var BasicCalendar = new Y.Test.Case({
name: "Basic Calendar Tests",
setUp : function () {
var firstcontainer = "<div id='firstcontainer'></div>";
var secondcontainer = "<div id='secondcontainer'></div>";
Y.one('#container').appendChild(Y.Node.create(firstcontainer));
Y.one('#container').appendChild(Y.Node.create(secondcontainer));
this.firstcalendar = null;
this.secondcalendar = null;
},
tearDown : function () {
delete this.firstcalendar;
delete this.secondcalendar;
Y.one('#firstcontainer').remove();
Y.one('#secondcontainer').remove();
},
testBasicCalendar : function() {
var cfg = {
contentBox: "#firstcontainer",
date: new Date(2011,11,5)
};
this.firstcalendar = new Y.Calendar(cfg);
this.firstcalendar.render();
//calendar is visible
Y.Assert.areEqual(this.firstcalendar.get('visible'), true);
//calendar date is normalized correctly
var calendarDate = this.firstcalendar.get("date");
Y.Assert.areEqual(2011, calendarDate.getFullYear());
Y.Assert.areEqual(11, calendarDate.getMonth());
Y.Assert.areEqual(1, calendarDate.getDate());
// Test that the first and last days of the month render correctly
// Test that showPreviousMonth and showNextMonth are false by default
Y.Assert.areEqual(false, this.firstcalendar.get("showPrevMonth"));
Y.Assert.areEqual(false, this.firstcalendar.get("showNextMonth"));
},
testPrevAndNextMonth : function () {
var cfg = {
contentBox: "#firstcontainer",
date: new Date(2011,11,5),
showPrevMonth: true,
showNextMonth: true
};
this.firstcalendar = new Y.Calendar(cfg);
this.firstcalendar.render();
// Test that showPreviousMonth and showNextMonth are true
Y.Assert.areEqual(true, this.firstcalendar.get("showPrevMonth"));
Y.Assert.areEqual(true, this.firstcalendar.get("showNextMonth"));
// Test that previous and next months are showing
Y.Assert.areEqual("27", Y.one("#firstcontainer").one(".calendar_col2.yui3-calendar-prevmonth-day").getContent());
Y.Assert.areEqual("28", Y.one("#firstcontainer").one(".calendar_col3.yui3-calendar-prevmonth-day").getContent());
Y.Assert.areEqual("29", Y.one("#firstcontainer").one(".calendar_col4.yui3-calendar-prevmonth-day").getContent());
Y.Assert.areEqual("30", Y.one("#firstcontainer").one(".calendar_col5.yui3-calendar-prevmonth-day").getContent());
Y.Assert.areEqual("1", Y.one("#firstcontainer").one(".calendar_col2.yui3-calendar-nextmonth-day").getContent());
Y.Assert.areEqual("2", Y.one("#firstcontainer").one(".calendar_col3.yui3-calendar-nextmonth-day").getContent());
Y.Assert.areEqual("3", Y.one("#firstcontainer").one(".calendar_col4.yui3-calendar-nextmonth-day").getContent());
Y.Assert.areEqual("4", Y.one("#firstcontainer").one(".calendar_col5.yui3-calendar-nextmonth-day").getContent());
Y.Assert.areEqual("5", Y.one("#firstcontainer").one(".calendar_col6.yui3-calendar-nextmonth-day").getContent());
Y.Assert.areEqual("6", Y.one("#firstcontainer").one(".calendar_col7.yui3-calendar-nextmonth-day").getContent());
Y.Assert.areEqual("7", Y.one("#firstcontainer").one(".calendar_col8.yui3-calendar-nextmonth-day").getContent());
},
testTwoCalendars : function () {
var cfg1 = {
contentBox: "#firstcontainer",
date: new Date(2011,11,5),
showPrevMonth: true,
showNextMonth: true
};
var cfg2 = {
contentBox: "#secondcontainer",
date: new Date(2011,11,5),
showPrevMonth: true,
showNextMonth: true
};
this.firstcalendar = new Y.Calendar(cfg1);
this.firstcalendar.render();
this.secondcalendar = new Y.Calendar(cfg2);
this.secondcalendar.render();
Y.Assert.areNotEqual(this.firstcalendar.get("id"), this.secondcalendar.get("id"));
Y.Assert.areNotEqual(this.firstcalendar._calendarId, this.secondcalendar._calendarId);
},
testCalendarClick : function() {
var cfg = {
contentBox: "#firstcontainer",
date: new Date(2011,11,5)
};
this.firstcalendar = new Y.Calendar(cfg);
this.firstcalendar.render();
// Click on a specific calendar cell;
var calendarid = this.firstcalendar._calendarId;
Y.one("#" + calendarid + "_pane_0_6_15").simulate("click");
var currentDate = this.firstcalendar.get("selectedDates")[0];
Y.Assert.areEqual(currentDate.getFullYear(), 2011);
Y.Assert.areEqual(currentDate.getMonth(), 11);
Y.Assert.areEqual(currentDate.getDate(), 15);
// Click on a different calendar cell
Y.one("#" + calendarid + "_pane_0_8_31").simulate("click");
currentDate = this.firstcalendar.get("selectedDates")[0];
Y.Assert.areEqual(currentDate.getFullYear(), 2011);
Y.Assert.areEqual(currentDate.getMonth(), 11);
Y.Assert.areEqual(currentDate.getDate(), 31);
// Click to advance the month
Y.one(".yui3-calendarnav-nextmonth").simulate("click");
// Click on a date in the new month
Y.one("#" + calendarid + "_pane_0_8_17").simulate("click");
currentDate = this.firstcalendar.get("selectedDates")[0];
Y.Assert.areEqual(currentDate.getFullYear(), 2012);
Y.Assert.areEqual(currentDate.getMonth(), 0);
Y.Assert.areEqual(currentDate.getDate(), 17);
},
testCustomHeader : function() {
var cfg = {
contentBox: "#firstcontainer",
date: new Date(2011,11,5)
};
this.firstcalendar = new Y.Calendar(cfg);
this.firstcalendar.set("headerRenderer", function (curDate) {
var ydate = Y.DataType.Date,
output = ydate.format(curDate, {
format: "%m %Y"
});
return output;
});
this.firstcalendar.render();
var currentHeaderString = this.firstcalendar.get("contentBox").one(".yui3-calendar-header-label").get("text");
Y.Assert.areEqual("12 2011", currentHeaderString);
// Click to advance the month
Y.one(".yui3-calendarnav-nextmonth").simulate("click");
currentHeaderString = this.firstcalendar.get("contentBox").one(".yui3-calendar-header-label").get("text");
Y.Assert.areEqual("01 2012", currentHeaderString);
},
testMultiplePanes : function () {
var cfg = {
contentBox: "#firstcontainer",
date: new Date(2011,11,5),
selectionMode: "multiple"
};
// Set the content template to a two-pane template
Y.CalendarBase.CONTENT_TEMPLATE = Y.CalendarBase.TWO_PANE_TEMPLATE;
this.firstcalendar = new Y.Calendar(cfg);
this.firstcalendar.render();
// Click on a date
var calendarid = this.firstcalendar._calendarId;
Y.one("#" + calendarid + "_pane_0_6_29").simulate("click");
// Shift-click another date
Y.one("#" + calendarid + "_pane_1_7_2").simulate("click", {shiftKey: true});
var date0 = this.firstcalendar.get("selectedDates")[0];
var date1 = this.firstcalendar.get("selectedDates")[1];
var date2 = this.firstcalendar.get("selectedDates")[2];
var date3 = this.firstcalendar.get("selectedDates")[3];
var date4 = this.firstcalendar.get("selectedDates")[4];
Y.Assert.areEqual(date0.getFullYear(), 2011);
Y.Assert.areEqual(date0.getMonth(), 11);
Y.Assert.areEqual(date0.getDate(), 29);
Y.Assert.areEqual(date1.getFullYear(), 2011);
Y.Assert.areEqual(date1.getMonth(), 11);
Y.Assert.areEqual(date1.getDate(), 30);
Y.Assert.areEqual(date2.getFullYear(), 2011);
Y.Assert.areEqual(date2.getMonth(), 11);
Y.Assert.areEqual(date2.getDate(), 31);
Y.Assert.areEqual(date3.getFullYear(), 2012);
Y.Assert.areEqual(date3.getMonth(), 0);
Y.Assert.areEqual(date3.getDate(), 1);
Y.Assert.areEqual(date4.getFullYear(), 2012);
Y.Assert.areEqual(date4.getMonth(), 0);
Y.Assert.areEqual(date4.getDate(), 2);
}
});
var suite = new Y.Test.Suite({name:"Basic Calendar Test Suite"});
suite.add(BasicCalendar);
Y.Test.Runner.setName("Calendar Test Runner");
Y.Test.Runner.add(suite);
Y.Test.Runner.run();
});
})();
</script>
</body>
</html>