Silverlight 3.0, Astoria, LINQ to SQL (1): Setting Up Astoria & LINQ to SQL

Silverlight 3.0 that just came out during MIX09 has a new control called DataForm. In essence, this control binds to an object/collection and from it you can view, edit, add, delete, page, etc. It looks like having a MS Access display your records through its Form.

Mike Taulty (one of the developers in the Silverlight team) made an excellent video showcasing the features and functionality of the DataForm control in Silverlight. You can watch the video here. There is a good blog post recap by Vikram Pendse.

I am not going to repeat what Mike has shown in the video. But what I am going to show through this post is how to build a DataForm that does CRUD (create, read, update, delete) to a LINQ to SQL data layer via ADO.NET Data Service. This first post in the series is to show how to build/prepare the solution, projects, and some ground work in LINQ to SQL and connecting it to ADO.NET Data Service.

What do you need to follow along? Several things:

• Visual Studio 2008 (or Web Express or VS Express) with SP 1


• SQL Server (Express 2005 or above)
• Silverlight 3.0 Tools
• Silverlight Toolkit

For the database, I am going to use Northwind. If you do not have Northwind, you can get it from here.

OK, let's begin.
1. Create a Class Library project for our LINQ to SQL project. Why not just create the LINQ to SQL inside a web project for our data service? Because making it in its own project allow us to reuse it. For instance if I want to build a web Dynamic Data project connecting to the same DB, I can just reference this project in my Dynamic Data project. I called project as "Northwind.DalLinq". Add references to "System.Data.Services" and "System.Data.Services.Client".

2. Create a Silverlight project. I named mine as "Northwind.Silverlight".

When you do this, it will then ask you whether you want to host the Silverlight application inside a new website. This website will host not only our Silverlight application, but also the ADO.NET Data Service that talks to our LINQ to SQL. So, I selected "Web Application Project" and hit OK. You can choose "Web Site" or "MVC Web Project" if you want to - it does not really matter.

Add references to "System.ComponentModel", "System.ComponentModel.DataAnnotation", "System.Windows.Controls.Data", and "System.Windows.Controls.Data.DataForm" in the "Northwind.Silverlight" project. Add references to "Northwind.DalLinq" to the "Northwind.Silverlight.Web" project.

So at this point, your solution should look like this:

3. Create a LINQ to SQL class in "Northwind.DalLinq" project and create all table mappings into the dbml, as well as the stored proc. We are going to use them all in this post, but for simplicity, let's just add all. If you feel you know what you're doing, feel free to be more selective.

4. Create an ADO.NET Data Service item in the "Northwind.Silverlight.Web". Right click on the "Northwind.Silverlight.Web" project, "Add New Item", select "ADO.NET Data Service". I name mine as "NorthwindDataService".

Open up "NorthwindDataService.cs" (the codebehind for the ADO.NET Data Service item we just added) and enable it to bind to our Northwind data context. We do this by filling the generic for the DataService type in the class declaration line.

    public class NorthwindDataService : DataService<Northwind.DalLinq.NorthwindDBDataContext>

Then we also need to indicate which table mapping are going to be available to be accessed. We do this by specifying it in this line:

config.SetEntitySetAccessRule("*", EntitySetRights.All);

Right now that will allow ALL to be accessible. This is OK for our exercise, but in reality we want to allow with caution. So your code should look like this:

namespace Northwind.Silverlight.Web
{
    public class NorthwindDataService : DataService<Northwind.DalLinq.NorthwindDBDataContext>
    {
        // This method is called only once to initialize service-wide policies.
        public static void InitializeService(IDataServiceConfiguration config)
        {
            // TODO: set rules to indicate which entity sets and service operations are visible, updatable, etc.
            // Examples:
            config.SetEntitySetAccessRule("*", EntitySetRights.All);
            // config.SetServiceOperationAccessRule("MyServiceOperation", ServiceOperationRights.All);
        }
    }
}

5. Make sure that your web application is running on a static port, so our Service Reference will be able to find it later. To do this, right click on the "Northwind.Silverlight.Web" project and click "Properties", go to "Web" tab. In here, we want to make sure our port is static by setting it to "Specific Port" instead of the default "Auto-assign Port". You can use any port number that is available.

Alright, right now we already setup our basic LINQ to SQL mapping from our DB, setting up our Silverlight project along with the web application to host it, and lastly we created a new ADO.NET Data Service item in our web application project.

So let's try it! Set "Northwind.Silverlight.Web" project as the StartUp and set "NorthwindDataService.svc" as the Start Page and hit F5!

Most likely you will get this error:

WHAAATTT???

6. Well, no need to panic ... you can set the error to be verbose and it will give you more information. The error is basically caused by ADO.NET confusion about what is the field that holds the primary key of the table mappings that we did in the LINQ to SQL. If you use Entity Framework, it will do it out of the box, but not LINQ to SQL apparently, so we need to decorate the classes with DataServiceKey attribute. Since the dbml generated by LINQ to SQL contains partial classes of the mappings, we can just simply add our own partial class that match with the generated part.

Add a class to our "Northwind.DalLinq" project and call it "NorthwindDB.Custom.cs". So your solution should look like this:

In that class, we declare our partial classes from our DB mappings decorated with the "DataServiceKey" attribute. Here are several examples on how to do them:

namespace Northwind.DalLinq
{
    [DataServiceKey("CategoryID")]
    public partial class Category { }

    [DataServiceKey("TerritoryID")]
    public partial class Territory { }

    [DataServiceKey(new string[] { "CustomerID", "CustomerTypeID" })]
    public partial class CustomerCustomerDemo { }

    // TODO: do the rest of the classes
}

Now, if we try hitting F5 again, we then should get a different result:

So now we have our ADO.NET Data Service ready and in my next post I will show you how to hook it up to the DataForm control to display our data.
-- read more and comment ...

Calculating Business Days

A common problem in making custom scheduler application is figuring out how to schedule future items or to predict the next due date. For an example, let's say you are the programmer in UPS (the shipping company wearing everything in brown) - and let say you want to give an ability for the customers to view that if a shipment is shipped on a certain date, it would take 5 business days after the shipment date to get to their door - let's call this a delivery date (an existing functionality). Simple enough, right? If we are just doing this in our head, it sounds pretty easy. But we need to remember that we must skip holidays and weekends - since UPS is only open and operating on BUSINESS DAYS.

There are actually an easy solution to this (which we will see) and I also made a more optimized solution and compared the performance.

We are going to assume that there is a list (List _holidays) that holds the holiday schedule. So our method will be given a start date and an interval - and it should figure out the next date. Here is the code for the easiest solution.

private DateTime ProjectDateByLoop(DateTime startDate, int interval)
{
    DateTime endDate = startDate;
    int i = 0;
    while (i < interval)
    {
        endDate = endDate.AddDays(1.0);
        if (endDate.DayOfWeek != DayOfWeek.Saturday && endDate.DayOfWeek != DayOfWeek.Sunday && (!_holidays.Contains(endDate)))
            i++;
    }
    return endDate;
}

A very simple code, it basically increment the day one by one and check whether it is a holiday or not or whether it falls on a weekend.

As we see above, it is very very simple and it works accurately. In my example above about UPS, this is probably is the best solution for the problem: simple code, easy to maintain, and works! But, as I look into it, I started to wonder what if the interval is in the range of thousands, or millions? It is very unlikely and may never be used ever - but I felt compelled (with the encouragement of certain people) to find a better way of doing this.

So, with that in mind, I produced this code below.

private static int CountDaysInDates(DayOfWeek queriedDay, DateTime startDate, DateTime endDate)
{
    TimeSpan ts = endDate - startDate;
    // get number of full weeks within dates
    int count = (int)Math.Floor(ts.TotalDays / 7);
    
    // get remainder and adjust 
    int remainder = (int)(ts.TotalDays % 7);
    int numOfDaySinceLastQueriedDay = (int)(endDate.DayOfWeek - queriedDay);
    if (numOfDaySinceLastQueriedDay < 0) numOfDaySinceLastQueriedDay += 7;
    if (remainder >= numOfDaySinceLastQueriedDay) count++;
    return count;
}

private DateTime ProjectDate(DateTime startDate, int interval)
{
    DateTime endDate = startDate;

    if (interval == 0)
        endDate = startDate;
    else
    {
        endDate = startDate.AddDays(interval);
        int numOfSaturday = CountDaysInDates(DayOfWeek.Saturday, startDate.DayOfWeek == DayOfWeek.Saturday ? startDate.AddDays(1) : startDate, endDate);
        int numOfSunday = CountDaysInDates(DayOfWeek.Sunday, startDate.DayOfWeek == DayOfWeek.Sunday ? startDate.AddDays(1) : startDate, endDate);

        int numOfHoliday = _holidays.Count(h => h >= startDate && h <= endDate && (h.DayOfWeek != DayOfWeek.Sunday && h.DayOfWeek != DayOfWeek.Saturday));
        int offSet = numOfSaturday + numOfSunday + numOfHoliday;
        endDate = ProjectDate(endDate, offSet);
    }
    return endDate;
}

At first glance, the second code should be much faster, since it does not have any loop at all. But, it is not quite as simple as the first code (even though it is still simple). The method CountDaysInDates is basically for counting how many times a day (like "Monday") occurs within 2 given dates. I use this method to calculate how many Saturdays and Sundays (weekends) to skipped. Why not just count the number of weekends? Because there is a likelihood that the start date is on a Sunday which needs to be skipped and counted only as "half" of a weekend. Secondly, I want the code to be flexible enough that if the algorithm is used to skip only Sundays, it can be modified easily.

The method ProjectDate is a recursive method. In it basically I checked the number of Saturdays and Sundays plus holidays and add them together - and then call ProjectDate again with the new start date (after interval was added) with the new interval (Sundays + Saturdays + holidays).

So ... how are the performance of these two algorithms? Amazingly enough, when they are used with small intervals, the performance difference is negligible in real use. So, I created an iteration for 100,000 times to run both and measure the execution time.

private void TargetDateHarness()
{
    int totalPasses = 100000;
    int interval = 720;
    DateTime targetDate;

    System.Diagnostics.Stopwatch sw = new System.Diagnostics.Stopwatch();
    sw.Start();
    for (int i = 0; i <= totalPasses; i++)
        targetDate = ProjectDate(DateTime.Today, interval);
    sw.Stop();
    TimeSpan ts = sw.Elapsed;
    testContextInstance.WriteLine("Non-Loop time: " + ts.TotalMilliseconds + " ms");

    sw.Reset();
    sw.Start();
    for (int i = 0; i <= totalPasses; i++)
        targetDate = ProjectDateByLoop(DateTime.Today, interval);
    sw.Stop();
    ts = sw.Elapsed;
    testContextInstance.WriteLine("Loop time: " + ts.TotalMilliseconds + " ms");
}

The result:

Non-Loop time: 2018.7745 ms (2 seconds)
Loop time: 53362.9731 ms (53 seconds)

-- read more and comment ...

ASP.NET Lightweight Automation Framework - Add, Edit, Delete (3/3)

In the last post, we discussed about LAF & how to test a page with list on it. We did paging, sort, and simple display. Now in this post I will show you how to do a test for Add/Edit and Delete.

Here is the code for testing Add Customer functionality from the UI. The essence of the code is that after navigating to the Customer List page, we click on the "New Customer" link with an expectation that the new customer form will show (so we verify it). Then after the form shows, fill it in with information and click "Save" button. This then should close the form and redisplay the list with the new Customer in it - so we verify that it is in there. At this point, our Add is already working. I included at the same time, a test for common edit & deletion.

[WebTestMethod]
public void AddCustomer()
{
    HtmlPage page = new HtmlPage("");

    // navigate to Customer
    page.Navigate("/Customer/");

    // Verify search result
    HtmlTableElement gridView = (HtmlTableElement)page.Elements.Find("CustomerListingTable");
    Assert.IsNotNull(gridView);

    // click new Customer
    page.Elements.Find("a", "New Customer", 0).Click(WaitFor.None);
    System.Threading.Thread.Sleep(1000);

    // verify new form exists
    Assert.IsTrue(page.Elements.Find("CustomerDetail").IsVisible());
    Assert.IsTrue(page.Elements.Exists("Cancel"));

    // enter information
    page.Elements.Find("FirstName").SetText("AFIRST");
    page.Elements.Find("LastName").SetText("ALAST");
    page.Elements.Find("MiddleInitial").SetText("A");
    page.Elements.Find("DoB").SetText("1/1/1999");
    page.Elements.Find("TitleId").SetSelectedIndex(0);

    // click submit
    page.Elements.Find("Save").Click(WaitFor.None);
    System.Threading.Thread.Sleep(1000);

    // verify entry in list
    Assert.IsFalse(page.Elements.Find("CustomerDetail").IsVisible());
    Assert.IsTrue(gridView.Rows[1].Cells[(int)ColumnNames.LastName].GetInnerText() == "ALAST");

    // click detail
    gridView.Rows[1].Cells[0].ChildElements[0].Click(WaitFor.None);
    System.Threading.Thread.Sleep(1000);

    // click edit
    page.Elements.Find("a", "Edit", 0).Click(WaitFor.None);
    System.Threading.Thread.Sleep(1000);

    // edit information
    page.Elements.Find("FirstName").SetText("AFIRSTUPDATED");
    page.Elements.Find("LastName").SetText("ALASTUPDATED");
    page.Elements.Find("MiddleInitial").SetText("B");
    page.Elements.Find("DoB").SetText("2/2/2000");
    page.Elements.Find("TitleId").SetSelectedIndex(1);

    // click submit
    page.Elements.Find("Update").Click(WaitFor.None);
    System.Threading.Thread.Sleep(1000);

    // verify entry in list
    Assert.IsFalse(page.Elements.Find("IdentityDetail").IsVisible());
    Assert.IsTrue(gridView.Rows[1].Cells[(int)ColumnNames.LastName].GetInnerText() == "AFIRSTUPDATED");

    // click detail
    gridView.Rows[1].Cells[0].ChildElements[0].Click(WaitFor.None);
    System.Threading.Thread.Sleep(1000);

    // click delete with confirm 
    page.Elements.Find("a", "Delete", 0).Click(new CommandParameters(WaitFor.None, PopupAction.ConfirmOK));
    System.Threading.Thread.Sleep(1000);

    // verify
    Assert.IsTrue(gridView.Rows[1].Cells[(int)ColumnNames.LastName].GetInnerText() != "ALAST");
}

This is a very rudimentary test only testing best case scenarios where add, edit, and delete are successful. In my project, I also build tests for if there are any error during saving, or business rules violations, when somebody hit cancel, etc. But, the simple example above should provide enough basis to be built on top of for those other tests.

- Part 2: List, Paging, Sorting
- Part 3: Add, Edit, Delete
-- read more and comment ...

Using jQuery to Create Hot-Keys for Web Widgets

I recently created a "dashboard" for one of my project and with jQuery, it was actually pretty easy and fun. Here is a simplified model of what I did.

First of all, you will need to download and include jQuery CORE, jQuery UI, and a hot-key plug-in in your web application. You can get the instruction on how to do that from here.

Here is the basic style I am using to create the boxes:

    .content { width: 450px; }
    .dashboard { border: solid 1px #ccc; }
    .wrapper { height:100%;}
    .displayrestore { clear:both; margin: 0 2px 0 2px; height:100px; overflow:auto; }
    .displaymaximize { clear: both; display:none;}
    div.maximize { clear:both; width:450px; height: 250px; font-size:2em; background-color: #888;}
    div.restore { width:200px; clear:none; float:left; margin-right:8px;background-color: #ddd;}
    div.minimize { width:200px; clear:none; float:left; margin-right:8px;}

Here is the script to initialize my hot-keys and setting all the widget boxes to "restore" mode. As you can see that each div is bound to a hot-key ("ctrl-1", etc) and they are all bound to "ctrl-m" to minimize all and to "ctrl-r" to restore all.

        var speed = "normal";
        var MainArea = "Main";
        var DashboardArea = "Dashboard";

        $(document).ready(function() {
            for (var i = 0; i < $("#" + DashboardArea).children().length; i++) {
                displayRestore($("#" + DashboardArea).children()[i].id.substring(DashboardArea.length));
            }
            $.hotkeys.add('Ctrl+r', function() {
                for (var i = 0; i < $("#" + DashboardArea).children().length; i++) {
                    displayRestore($("#" + DashboardArea).children()[i].id.substring(DashboardArea.length));
                }
            });
            $.hotkeys.add('Ctrl+m', function() {
                for (var i = 0; i < $("#" + DashboardArea).children().length; i++) {
                    displayMinimize($("#" + DashboardArea).children()[i].id.substring(DashboardArea.length));
                }
            });
            $.hotkeys.add('Ctrl+1', function() { displayCascadeMaximize('ItemOne'); });
            $.hotkeys.add('Ctrl+2', function() { displayCascadeMaximize('ItemTwo'); });
            $.hotkeys.add('Ctrl+3', function() { displayCascadeMaximize('ItemThree'); });
            $.hotkeys.add('Ctrl+4', function() { displayCascadeMaximize('ItemFour'); });
            $.hotkeys.add('Ctrl+5', function() { displayCascadeMaximize('ItemFive'); });
            $.hotkeys.add('Ctrl+6', function() { displayCascadeMaximize('ItemSix'); });
        });

Below is the function to handle maximize event to the widget. It checks first whether there is any widget in maximize mode inside the "main" container and if there is any, restore it then maximize the one intended to be maximized.

        function displayCascadeMaximize(source) {
            // restore what is currently in max mode
            if ($("#" + MainArea).children().length > 0)
                displayRestore($("#" + MainArea).children()[0].id);

            // display selected widget in main area with maximize view
            displayMaximize(source);
        }

        function displayMaximize(source) {
            // create a clone of selected widget and put in main area
            $("#" + MainArea).html($("#" + source));

            // display maximize mode
            $("#" + source + "Maximize").show(speed);
            $("#" + source + "Restore").hide(speed);

            // adjust css
            $("#" + source).removeClass("restore");
            $("#" + source).removeClass("minimize");
            $("#" + source).addClass("maximize");
        }

The handler for restore is pretty straight forward. It checks whether the "source" intended to be restored is in the "main" container or not and based on that execute the correct restore process.

        function displayRestore(source) {
            if ($("#" + source).parent()[0].id == MainArea) {
                // if source is in main area then remove it from main area and show in Dashboard area
                $("#" + DashboardArea + source).html($("#" + MainArea).html());
                $("#" + MainArea).html("");
                $("#" + DashboardArea + " #" + source).show(speed);

                if ($("#" + DashboardArea + " #" + source).hasClass("restore")) { }
                else {
                    $("#" + DashboardArea + " #" + source + "Maximize").hide(speed);
                    $("#" + DashboardArea + " #" + source + "Restore").show(speed);

                    $("#" + DashboardArea + " #" + source).addClass("restore");
                    $("#" + DashboardArea + " #" + source).removeClass("minimize");
                    $("#" + DashboardArea + " #" + source).removeClass("maximize");
                }
            }
            else {
                // if source is in Dashboard area
                $("#" + source + "Maximize").hide(speed);
                $("#" + source + "Restore").show(speed);

                $("#" + source).addClass("restore");
                $("#" + source).removeClass("minimize");
                $("#" + source).removeClass("maximize");
            }
        }

The handler for restore is pretty much the same as restore - except it executes minimize instead of restore.

        function displayMinimize(source) {
            if ($("#" + source).parent()[0].id == MainArea) {
                // if source is in main area then remove it from main area and show in Dashboard area
                $("#" + DashboardArea + source).html($("#" + MainArea).html());
                $("#" + MainArea).html("");
                $("#" + DashboardArea + " #" + source).show(speed);

                if ($("#" + DashboardArea + " #" + source).hasClass("minimize")) { }
                else {
                    $("#" + DashboardArea + " #" + source + "Maximize").hide(speed);
                    $("#" + DashboardArea + " #" + source + "Restore").hide(speed);

                    $("#" + DashboardArea + " #" + source).addClass("minimize");
                    $("#" + DashboardArea + " #" + source).removeClass("restore");
                    $("#" + DashboardArea + " #" + source).removeClass("maximize");
                }
            }
            else {
                // if source is in Dashboard area
                $("#" + source + "Maximize").hide(speed);
                $("#" + source + "Restore").hide(speed);

                $("#" + source).addClass("minimize");
                $("#" + source).removeClass("restore");
                $("#" + source).removeClass("maximize");
            }
        }

The HTML:

    

        

        

        

            

                

                    

                        Item One in Restore Mode
                    
                    

                        Item One in Maximize Mode
                    
                    
 
                
            
            

                

                    

                        Item Two in Restore Mode
                    
                    

                        Item Two in Maximize Mode
                    
                    
 
                
            
            
            

                

                    

                        Item Three in Restore Mode
                    
                    

                        Item Three in Maximize Mode
                    
                    
 
                
            
            
            

                

                    

                        Item Four in Restore Mode
                    
                    

                        Item Four in Maximize Mode
                    
                    
 
                
            
            
            

                

                    

                        Item Five in Restore Mode
                    
                    

                        Item Five in Maximize Mode
                    
                    
 
                
            
            
            

                

                    

                        Item Six in Restore Mode
                    
                    

                        Item Six in Maximize Mode
                    
                    
 
                
            
            
        
    

-- read more and comment ...

ASP.NET Lightweight Automation Framework - List, Paging, Sorting (2/3)

In the last post, I wrote about LAF, difference between LAF and unit test, controller test, etc. Now we are going to get into on how to user LAF, especially in ASP.NET MVC project.

In my demo project I have a Customer list (it can be any list) that looks like this:

So I want to test all web functionality that an end user will and can possibly do. How do I do it with LAF?

First, create a web application to run your LAF project. ou can follow the instruction to do that here.

After you got that setup, create a class file and start writing tests. So in my example, I want to tests for simply displaying the list, sorting, paging, clicking "New", clicking "Select", and clicking "Delete".

OK, let's begin with displaying the list:

[WebTestMethod]
public void FullList()
{
   HtmlPage page = new HtmlPage("");

   // navigate to Customer list page
   page.Navigate("/Customer/");
            
   // Verify search result
   HtmlTableElement gridView = (HtmlTableElement)page.Elements.Find("CustomerListingTable");
   Assert.IsNotNull(gridView);
}

So a very simple test where basically I navigate to the Customer page and make sure it displays my table. I can do additional checks like whether there are 10 rows in my list, whether the first record is correct, etc. We will see how to do those things in the following test examples.

So, how about testing Sorting functionality? In our list, a user should be able to click on the header and sort the data based on that field ascendingly and then descendingly.

[WebTestMethod]
public void SortByFirstName()
{
    HtmlPage page = new HtmlPage("");

    // navigate to Customer list page
    page.Navigate("/Customer/");

    // Verify search result
    HtmlTableElement gridView = (HtmlTableElement)page.Elements.Find("CustomerListingTable");
    Assert.IsNotNull(gridView);

    // sort by first name desc
    gridView.Rows[0].Cells[(int)ColumnNames.FirstName].ChildElements[0].Click(WaitFor.None);
    // wait for my jQuery ajax
    System.Threading.Thread.Sleep(1000);

    // verify
    Assert.IsTrue(gridView.Rows[1].Cells[(int)ColumnNames.FirstName].GetInnerText().CompareTo(gridView.Rows[2].Cells[(int)ColumnNames.FirstName].GetInnerText()) >= 0);

    // sort by first name asc
    gridView.Rows[0].Cells[(int)ColumnNames.FirstName].ChildElements[0].Click(WaitFor.None);
    System.Threading.Thread.Sleep(1000);

    // verify
    Assert.IsTrue(gridView.Rows[1].Cells[(int)ColumnNames.FirstName].GetInnerText().CompareTo(gridView.Rows[2].Cells[(int)ColumnNames.FirstName].GetInnerText()) <= 0);
}

What happen in the code above is quite simple; after navigating to the Customer list page, the test verify whether the grid/table exists. After that, it navigate within the table and click the header of the first name column (I enumerated my columns). Then I verify the result by comparing the first name data between the 1st record and the 2nd record according to the sort direction.

Now let's test our paging. There are multiple ways to page through the data according to our list. A user can click on the page number, or click on a previous or next link, and they can do it through the top page numbers or the bottom one.

[WebTestMethod]
public void PageByNumberTop()
{
    HtmlPage page = new HtmlPage("");

    // navigate to Customer list page
    page.Navigate("/Customer/");

    // Verify search result
    HtmlTableElement gridView = (HtmlTableElement)page.Elements.Find("CustomerListingTable");
    Assert.IsNotNull(gridView);

    // get the paging links
    HtmlElement topPaging = page.Elements.Find("pagination-clean-top");

    // verify page 1 and goto page 2
    page.Elements.Find("toppage2").Click(WaitFor.None);
    System.Threading.Thread.Sleep(1000);

    // verify page 2 and goto page 3
    Assert.AreEqual("2", topPaging.ChildElements[2].GetInnerText());
    page.Elements.Find("toppage3").Click(WaitFor.None);
    System.Threading.Thread.Sleep(1000);

    // verify page 3 and goto page 4
    Assert.AreEqual("3", topPaging.ChildElements[3].GetInnerText());
    page.Elements.Find("toppage4").Click(WaitFor.None);
    System.Threading.Thread.Sleep(1000);

    // verify page 4 and goto page 1
    Assert.AreEqual("4", topPaging.ChildElements[4].GetInnerText());
    page.Elements.Find("toppage1").Click(WaitFor.None);
    System.Threading.Thread.Sleep(1000);

    // verify page 1 and goto page 3
    Assert.AreEqual("1", topPaging.ChildElements[1].GetInnerText());
    page.Elements.Find("toppage3").Click(WaitFor.None);
    System.Threading.Thread.Sleep(1000);

    // verify page 3 
    Assert.AreEqual("3", topPaging.ChildElements[3].GetInnerText());

}

What happen on the code above is basically I queried the page number link and click it. From the default page 1, to page 2, then page 3, then page 4, to test consecutive paging. After that, from page 4 jumped to page 1, then jumped to page 3. Obviously, there are more variety of these that we can do, but hopefully you get the idea. Also, in this code, I am just testing on paging by number for if the users are just paging using the page numbers on the top. To test the previous or next link, the code should be pretty similar to this.

- Part 1: Overview
- Part 3: Add, Edit, Delete
-- read more and comment ...

Not on The Menu: Quesadilla at Chipotle

Last night I went to Chipotle for dinner with my wife and son. There were like 5 or 6 people a head of me in the line - so I took my time to ponder what I want to order.

When it was about just 2 more person ahead of me, I saw the lady behind the counter did something I have never seen before in Chipotle - she put cheese on the tortilla then fold it and put it on the tortilla press/warmer.

Then the next guy - the guy who is directly in front of me - said something like this "Same thing - chicken quesadilla." After hearing that, I reread the menu on the big board again and again and again - and I was pretty sure that quesadilla was not on the menu.

So now, it was my turn to order, I ordered my half chicken and half carnitas salad and then I said, "Can I have a small cheese quesadilla for my son?" As I was expected, the lady said, "Sure. Just cheese?" and I replied back "Yes, just cheese."

As I walked down and selected my choices of salsa, sour cream, and cheese, I glanced back at the menu trying to find the word "quesadilla" - but it was nowhere to be found. Then at the cashier register, the cashier lady punched the buttons and I briefly saw that there was an entry for my small chicken quesadilla - it was also in the receipt - for $1.00. I am not sure how much the big quesadilla is or if you add meat to it.

So there you go, Chipotle has quesadilla - btw the small cheese quesadilla is great for kids!

Some Chipotle tips & tricks:
1. If you are getting a carry out, order online!
2. Instead of getting a fajita wrap, get a fajita bol WITH tortilla on the side. On the bowl, you can get extra stuff without the fear of tearing your tortilla. Plus it is not as messy and easier to bring home if you cannot finish it.
3. You can get half & half meat. So you can get chicken & steak or steak and carnitas, etc. They will charge you for the higher price ($0.50 difference I think between chicken and steak/carnitas).
4. You can get more than one type of salsa. So get corn salsa AND verde AND the hot salsa if you want - or nay combination thereof.
5. If you are ordering a salad and feel that it is kinda small - so add stuff to it (but no beans or rice). I usually add onions/peppers and salsa combination.
-- read more and comment ...

ASP.NET Lightweight Automation Framework - Overview (1/3)

ASP.NET QA Team released the Lightweight Automation Framework on mid Feb 2009 - and I have been using it to test the project I am working on (an ASP.NET MVC project). Suffice to say that I am thrilled and having fun with it (and actually caught some bugs because of it!!).

In this post I will outline the basic of Lightweight Automation Framework (LAF) and in the following posts I will put some sample code, quirks, how to, etc.

What is Lightweight Automation Framework?
LAF is an internal test tool that ASP.NET QA team use to do regression testing on ASP.NET feature. Remember that it is a tool, so you still have to build your tests, but this framework allows you to build and run or do your tests easily and in a more comprehensive manner - and most importantly, it is automated.

How does LAF differs from regular unit test or other test project such as MVC controller tests?
LAF is a regression test tool - so it suppose to test the web application from user's perspective. This would be the tool to use to implement all your use-case scenarios testing. So the scope is much larger compared to unit test.

Another thing that we will see is that LAF actually runs as within an ASP.NET application - instead of just running/executing code. LAF will actually read and manipulate the DOM in the browser (you can run in IE, FF, Safari or Opera). So when you run a typical test in LAF, it will look like someone is running the web application in a browser and clicking this, entering data, etc etc.

This is something wonderful with LAF, since what used to be tedious and hard to be done - end user testing - now can be automated (by code).

Where can I get it?
You can download the source code in its codeplex page as well as read further about it.

ASP.NET QA Team also has a blog here.

- Part 2: List, Paging, Sorting
- Part 3: Add, Edit, Delete
-- read more and comment ...