RadCalendar for ASP.NET (AJAX) localization and all the necessary to have culture independent automated tests

First some background:

Recently I’ve been working on an interesting task, which required digging into some details in RadCalendar control localization implementation. Due to a customer bug report, I tested the RadCalendar control in a non-English culture for a specific scenario. I also ran the automated tests we had built for the Calendar control and was shocked at the fact that so many tests simply failed. The reason is that these tests expected some certain Calendar element values, which generally depend on the culture you run the control on. I took the challenge to investigate, implement the necessary methods and update the tests so that those can be culture-independent from now on.

So for those who are interested in RadCalendar localization, this post will clarify which component elements are localized and how. The post lists the main RadCalendar features and properties that the control provides for localization.

I’m listing the RadCalendar elements being localized by the culture in use. I’m also explaining how these elements are formed so that the automated tests can build the necessary values runtime to avoid the culture dependency (attached to the post C# class provides all the helper methods in question). RadCalendar exposes some properties for localization as well as elements formatting, which are also pointed below.

Let’s start with the element people immediately find:

Calendar Title:

This is simple: by default RadCalendar creates its title by the month name and year. The component provides a couple of properties (TitleSettings) to change the title: TitleFormat, TitleAlign, DateRangeSeparator (the last for Multi-Month View mode -- see the next point) as well as TitleStyle group of properties to change the appearance. Read more about the title settings in documentation here.

The automated tests access the title by its ID: <RadCalendarID>_Title. To get the month name by culture, the automated tests call System.Globalization.CultureInfo.DateTimeFormat.GetMonthName() method.

Calendar Multi-Month View Titles

The main as well as the single month title is culture dependent as well. While the main title is easy customizable through the first and the last months, the tests locate the single month titles through the DateTimeFormatInfo.AbbreviatedMonthNames[] array.

Calendar Fast Navigation Months

Clicking on the calendar title, one gets the “Month/Year Navigation Popup” provided for faster navigation to the month/year in interest.

The month abbreviations rounded in blue depend on the culture in use. The automated tests get those from the same DateTimeFormatInfo.AbbreviatedMonthNames[] array. Note that the FastNavigation “Today”, “OK” and “Cancel” buttons in this popup can be localized through the FastNavigationSettings RadCalendar properties as in the demo below:

http://demos.telerik.com/aspnet/prometheus/Calendar/Examples/Functionality/Globalization/DefaultCS.aspx

Calendar Week Days (header selectors)

Those links select all the respective days in RadCalendar when clicked or just highlight the days on hover (the whole week can be highlighted/selected by the week number on left – see the next point). The automated tests access the elements by their title: the day names are available through DateTimeFormatInfo.DayNames[] array.

By the way, here are the rendered headers in that table (shot from Firebug):

Why don’t we use the ID of that <th> element instead? The reason is quite on topic -- the order (so the IDs) depends on the culture. In other words the Top_cs_5 element represents “Tuesday” in English but “Friday” in Bulgarian for example.

Locating the week dates

Talking about the week selectors on the other hand, here is a typical scenario the tests should cover:

• Click on week number (guess what – it depends on the culture)
• Verify all the days of that week are selected

This is quite interesting in terms of culture-independent test. The test click on the row element, accessed by the ID:

Then we need all the dates in the selected week. The method used for this purpose (see getWeekDates() from the attached C# class for details) locates the first day of the week through the CultureInfo DateTimeFormatInfo.FirstDayOfWeek, then lists the day names available in DateTimeFormatInfo.DayNames[] and calculates the indices difference with the given date to get the first date from the week in question. Taking all the dates from the week is now a trivial task.

Days Cell Title

To be able to click on a certain date in the calendar (simulating user selecting that date), the tests need to locate the day cell. As the order of the Calendar cells depends on the culture (again) and for the sake of readability, the automated tests don’t access the date cells by cell index, but through the localized cell title instead.

The default calendar cell title format is defined as "dddd, MMMM dd, yyyy" in RadCalendar but is changeable by DayCellToolTipFormat property. So the exact day cell title can be accessed through the DateTime.ToString(<format>, CultureInfo) method.

I would also recommend the RadCalendar documentation resources for localization as additional readings:

Happy localizing!

-Konstantin

RadCalendarCultureIndependentTest.zip