Stephen Walther on ASP.NET MVC

Improving the AJAX Control Toolkit with the Lightweight Test Automation Framework (LTAF)

Stephen Walther — Sun, 05 Jul 2009 02:35:09 GMT

The AJAX Control Toolkit is an incredibly popular set of controls that enable you to easily add JavaScript functionality to an ASP.NET application. The AJAX Control Toolkit has consistently been one of the top three most popular downloads from CodePlex since the birth of CodePlex (see http://www.CodePlex.com).

Lately, we’ve been thinking hard about methods of improving the quality of the AJAX Control Toolkit controls. We want to improve the quality of the AJAX Control Toolkit controls so that they match the very high standards of quality of the official ASP.NET framework controls such as the GridView and TextBox controls.

In discussions of quality, the issue of testing immediately comes up. Right now, the AJAX Control Toolkit solution includes a test project named ToolkitTests. (You can see this project if you download the Source version of the AJAX Control Toolkit from CodePlex). This project contains a set of automated functional tests for each control in the AJAX Control Toolkit (see Figure 1). For example, there is a file named Calendar.aspx which contains a set of tests for the Calendar control.

Figure 1 – Tests in the ToolkitTests project

You can run all of these tests by requesting the Default.aspx page from the ToolkitTests project. The Default.aspx page contains a test runner. If you click the Select All link, and then click the Run Tests button, then all of the tests are run (see Figure 2).

Figure 2 – Running tests

Having a set of tests like this that can be run automatically is invaluable. It means that we can modify existing AJAX Control Toolkit controls and know whether we have broken existing functionality. We run these tests in a standard set of browsers to ensure that the AJAX Control Toolkit controls are cross-browser compatible.

In order to improve the quality of the AJAX Control Toolkit, we plan to significantly improve the quality of the tests that accompany the Toolkit. However, the AJAX Control Toolkit currently uses a proprietary functional test framework. The test framework was invented for the AJAX Control Toolkit and it is used nowhere else.

For this reason, we decided to investigate using alternative functional test frameworks. We had several specific criteria for selecting a functional test framework:

1) The functional test framework needs to be an open-source project.

2) The functional test framework needs to work with all major browsers including Internet Explorer, FireFox, Safari, Opera, and Chrome.

3) The functional test framework needs to support simulating complex browser interactions.

4) The functional test framework needs to be easy for the Quality Assurance team at Microsoft to use.

In order to meet all of these requirements, we decided to use the Lightweight Test Automation Framework as the testing framework for the AJAX Control Toolkit moving forward.

The Lightweight Test Automation Framework

The Lightweight Test Automation Framework (LTAF) is an open source functional test framework available from CodePlex at:

http://aspnet.codeplex.com/Wiki/View.aspx?title=ASP.NET%20QA

LTAF is a lightweight version of the very same testing framework that the ASP.NET Quality Assurance team uses to test the standard ASP.NET controls. The framework is compatible with all major web browsers and the framework enables you to simulate complex JavaScript behaviors.

An important consideration for the ASP.NET AJAX team is that the Microsoft QA team is already very familiar with this framework. Therefore, any member of the Microsoft QA team can easily test the AJAX Control Toolkit using this framework.

Our plan is to include all of the LTAF tests used by the QA team with the download of the AJAX Control Toolkit. That way, if you modify the Toolkit, then you can run the LTAF tests to check whether or not your modifications have broken existing controls.

In the following sections, I provide you with a brief introduction to using LTAF.

Downloading and Installing LTAF

After downloading the Microsoft.Web.Testing.Lightweight.zip file from the CodePlex website, you need to remember to unblock the downloaded ZIP. Right-click the file and click the Unblock button (see Figure 3).

Figure 3 – Unblocking the download file

Next, unzip the file into a new folder and double-click the Microsoft.Web.Testing.Lightweight.sln file to open up the LTAF solution. Build the project by selecting the menu option Build, Build Solution.

The LTAF solution contains the following projects:

· SampleWebSite – Contains sample LTAF tests

· FunctionalTestsWebSite – Contains BVT tests written using LTAF

· Microsoft.Web.Testing.Lightweight – Contains the source code for LTAF

· Microsoft.Web.Testing.Lightweight.UnitTests – Contains unit tests for LTAF

The fastest way to try out LTAF is to run the tests in the SampleWebSite project.
Right-click the Default.aspx page contained in the Test folder and select the menu option View In Browser. The page in Figure 4 appears.

Figure 4 – The LTAF Test Runner

Click the link labeled All Test Cases to select all of the tests and click the Run Tests button to run the tests. All the tests that pass are highlighted with green and a checkmark (see Figure 5).

Figure 5 – LTAF test results

So you might be wondering where the functional tests executed by the test runner are defined. You can find the tests in the App_Code\Test folder. For example, the Test folder includes a class named UserManagementTests.cs that contains a set of tests for the Login.aspx page. An abridged version of this class is contained in Listing 1.

Listing 1 – UserManagementTests.cs [C#]

using System;
using Microsoft.Web.Testing.Light;

[WebTestClass]
public class UserManagementTests
{
    [WebTestMethod]
    public void SignInAndSignOut()
    {
        // Navigate to the login page
        HtmlPage page = new HtmlPage("Login.aspx");

        // Fill Login control user/password and click login button
        page.Elements.Find("UserName").SetText("ValidUser");
        page.Elements.Find("Password").SetText("foo");
        page.Elements.Find("LoginButton").Click(WaitFor.Postback);

        // Verify content of the Home page
        Assert.AreEqual("Welcome back ValidUser!", page.Elements.Find("LoginName1").GetInnerText());

        // Click the logout tab
        page.Elements.Find("tab-signout").Click(WaitFor.Postback);

        // Verify login tab now exists.
        Assert.IsTrue(page.Elements.Exists("tab-login"));
    }

}

The class in Listing 1 is decorated with the WebTestClass attribute and the functional test method is decorated with the WebTestMethod attribute.

The SignInAndSignOut() method performs the following tests:

1) It verifies that entering the user name ValidUser and password foo into the Login form on the Login.aspx page results in a page that displays the message “Welcome back ValidUser!”.

2) It verifies that clicking the Logout tab causes the Login tab to appear.

Notice how the HtmlPage class and HtmlElement class are used to interact with a web page. For example, the HtmlPage.Elements.Find() method is used to retrieve a particular DOM element. The HtmlElement.Click() method is used to simulate a button click.

Using LTAF in a New or Existing ASP.NET Website

If you want to use LTAF with a new or existing ASP.NET Website then you need to do two things:

1) Add a reference to the Microsoft.Web.Testing.Lightweight.dll assembly

2) Add a folder named Test that contains the test runner (the Default.aspx and DriverPage.aspx files)

For example, imagine that you have created an ASP.NET website that contains the ASP.NET page in Listing 2. This page contains a single button. Whenever you click the button, the number displayed by the Label control is incremented by 1 (see Figure 6).

Listing 2 – Counter.aspx

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void btnAdd_Click(object sender, EventArgs e)
    {
        var newValue = int.Parse(lblCounter.Text) + 1;
        lblCounter.Text = newValue.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <asp:Label
        id="lblCounter"
        Text="0"
        Runat="server" />
    
    <asp:Button
        id="btnAdd"
        Text="Add 1"
        Runat="server" OnClick="btnAdd_Click" />
    
    </div>
    </form>
</body>
</html>

Figure 6 – The Counters.aspx page

If you want to test this page using LTAF then you first need to add a reference to the Microsoft.Web.Testing.Lightweight.dll assembly. Select the menu option Website, Add Reference. Click the Browse tab and browse to the folder where you downloaded LTAF (see Figure 7).

Figure 7 – Adding a reference to LTAF

Next, we need to add the Test folder (that contains the Default.aspx and DriverPage.aspx files) into our new website. Using Windows Explorer, navigate to the directory where you downloaded LTAF. You can drag the Test folder from Window Explorer into the Solution Explorer window in your website project (or copy and paste the folder). After you add this folder, your Solution Explorer window should look like Figure 8.

Figure 8 – Solution Explorer with Test folder

Now, we are ready to write some tests. Add a new class to your website named CounterTests.cs (Visual Studio will prompt you to add the class to your App_Code folder). Enter the code in Listing 3.

Listing 3 – CounterTests.cs

using Microsoft.Web.Testing.Light;

[WebTestClass]
public class CounterTests
{
    [WebTestMethod]
    public void ButtonIncrementsByOne()
    {
        // Get the Counters.aspx page
        HtmlPage page = new HtmlPage("/Counter.aspx");

        // Click the btnAdd Button
        page.Elements.Find("btnAdd").Click(WaitFor.Postback);

        // Get the value of the Counters Label
        var labelValue = page.Elements.Find("lblCounter").GetInnerText();

        // Verify that the Label has the value 1
        Assert.AreEqual("1", labelValue);
    }
}

The test class in Listing 3 contains one test method named ButtonIncrementsByOne(). This test verifies that clicking the button increments the value displayed in the Label by one.

You can run the test by opening the Test/Default.aspx page. After you open this page, you can select the ButtonIncrementsByOne test, and click the Run Tests button to execute the test. When the test runs successfully, you get the page in Figure 9.

Figure 9 – Results of running test

Conclusion

The Lightweight Testing Automation Framework (LTAF) is a very powerful framework for building functional tests. It is (a lightweight version) of the testing framework used by the ASP.NET Quality Assurance team and it is the testing framework used to build tests for the ASP.NET framework.

You can use this test framework to build functional tests for your ASP.NET applications. Simply download LTAF from CodePlex and start writing your functional tests in either C# or VB.NET.

We plan to use LTAF for the AJAX Control Toolkit because (1) LTAF works with all modern browsers including Internet Explorer, Firefox, Safari, Opera, and Chrome (2) it is open-source and (3) because LTAF is based on the same testing framework used internally by the ASP.NET QA team, we expect the QA team to continue to invest in improving LTAF over time.

Joining the ASP.NET AJAX Feature Team

Stephen Walther — Tue, 16 Jun 2009 04:10:07 GMT

Hey, I am shifting teams at Microsoft! A little more than a year ago, I started working at Microsoft on the www.ASP.net community team creating ASP.NET MVC content. Over the past year, I’ve been doing things like speaking at a lot of conferences (PDC, Tech-Ed Emea, Tech-Ed India, MIX, ASP.NET Connections), writing a lot of tutorials and recording a lot of videos, and finishing a book. It has been an intense experience.

Next week, I am officially joining the ASP.NET team as a feature PM with a focus on ASP.NET AJAX. I’m going to be working on the Microsoft AJAX Framework and the AJAX Control Toolkit. I get to write specs!

I’m really excited about Ajax. Anyone who has read my latest ASP.NET Unleashed book or who has heard me speak at any conference over the last 4 years knows that I am an Ajax fanatic. There is some really exciting stuff that we are working on for the next version of ASP.NET AJAX. And, I am really excited to work with the other members of the ASP.NET team – Boris Rivers-Moore, Simon Calvert, Scott Hunter, Stefan Schackow, Scott Galloway, Phil Haack.

I do need to change the title of my blog. I’m still going to write on ASP.NET MVC, but I’m going to start writing much more about Ajax.

Back from Tech-ed India

Stephen Walther — Wed, 27 May 2009 16:35:15 GMT

Thank you to everyone who came to my talks at Tech-ed India! It was great meeting so many developers in India (I finally got to meet many people who I have been reading their blogs for years).

I’ve had several people request the slides and sample files from the talk so I am posting them here.

ASP.NET 4 Talk – The slides and sample files.
MVC Talk – The slides. The Contact Manager sample application is located at http://www.ASP.net/mvc/learn.
AJAX 4.0 Talk – The slides and sample files.

Unit Testing JavaScript with FireUnit

Stephen Walther — Mon, 18 May 2009 16:45:25 GMT

I’ve been investigating different unit testing frameworks for JavaScript lately and I stumbled onto FireUnit. FireUnit is a unit testing framework created by John Resig (of well-deserved jQuery fame) and Jan Odvarko. In this blog entry, I provide a brief overview of the FireUnit testing framework. In particular, I explain how you can use FireUnit to unit test JavaScript code.

Installing FireUnit

FireUnit is implemented as a FireFox extension. This is both bad and good. First, the bad news. You cannot use FireUnit with Internet Explorer, Safari, Chrome, or any other browser than Mozilla Firefox.

Here’s the good news. FireUnit extends Firefox with a new Test tab. This Test tab appears as an extra Firebug tab. Therefore, seeing test results is very convenient.

Before you can use FireUnit, you need to first install the Firebug extension for Firefox. If you haven’t already installed Firebug then you should be ashamed of yourself. Every JavaScript developer is required, by law, to have Firebug installed. You can learn about Firebug by visiting http://Firebug.org. the easiest way to install Firebug is to select the menu option Tools, Add-ons within Firefox, select the Get Add-ons tab and enter Firebug in the search box (see Figure 1).

Figure 1 – Adding Firebug

After you install Firebug, you can install FireUnit. Navigate to the following website within Firefox:

http://FireUnit.org

After you install FireUnit, a new Test tab appears when you open Firebug (see Figure 2). Your FireUnit test results appear in this tab. Figure 2 depicts what happens when two tests pass and one test fails.

Figure 2 – Viewing test results

Making Assertions in FireUnit

Documentation on FireUnit is very limited. To learn what methods are available, I downloaded the source for FireUnit and looked at the functions defined in the fireunit.js file (this file includes some helpful comments). I also used the Firebug DOM inspector and inspected the fireunit class.

Here is a list of the test assertion methods that you can call:

· ok(pass, msg, expected, actual) – Pass specifies a condition that when true causes the test to pass.

· compare(expected, actual, msg) – Compares two strings.

· reCompare(expected, result, msg) – Compares a string to a regular expression pattern. The expected parameter represents the regular expression pattern.

· testDone() – Call this method to display a summary of all of the test results.

The methods listed above are methods of the fireunit class. Notice that these are non-standard method names for a unit testing framework. You use fireunit.ok() instead of assert.AreEqual().

Listing 1 contains a MathUtility class created in JavaScript.

Listing 1 – MathUtility.js

function MathUtility() {

    this.add = function(val1, val2) {
        return val1 + val2;
    };
}

Listing 2 contains a MathUtilityTests class that contains a set of tests for the MathUtility class.

Listing 2 – MathUtilityTests.js

/// <reference path="MathUtility.js"/>

function MathUtilityTests()
{
    this.testAddPositiveNumbers = function()
    {
        // Arrange
        var mathUtility = new MathUtility();
        
        // Act
        var result = mathUtility.add(1,3);

        // Assert
        fireunit.ok(result === 4, "Test add positive numbers");        
    }

    this.testAddNegativeNumbers = function()
    {
        // Arrange
        var mathUtility = new MathUtility();

        // Act
        var result = mathUtility.add(-1,-3);

        // Assert
        fireunit.ok(result === 4, "Test add negative numbers");        
    }


    this.testAddNegativeAndPositiveNumbers = function()
    {
        // Arrange
        var mathUtility = new MathUtility();

        // Act
        var result = mathUtility.add(-1,3);

        // Assert
        fireunit.ok(result === 2, "Test add negative and positive numbers");        
    }
}

Notice that Listing 2 consists of a set of tests. The fireunit.ok() method is used to perform assertions about a particular condition (we are doing state verification here). The <reference> comment at the top of the file is used to enable Intellisense for the MathUtility class for Visual Studio/Visual Web Developer (Visual Studio JavaScript Intellisense is an amazing and useful feature).

Listing 3 consists of an HTML page that includes both the MathUtility and MathUtilityTests JavaScript files. Each of the test methods in the MathUtilityTests class is called by iterating through all of the class methods that start with the keyword test. Finally, the fireunit.testDone() method is called to display the summary of test results.

When you open the HTML page in Listing 3 in Firefox, you see the test results in Figure 2.

Listing 3 – Test1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    
    <script src="MathUtility.js" type="text/javascript"></script>
    <script src="MathUtilityTests.js" type="text/javascript"></script>

    <script type="text/javascript">

        var mathUtilityTests = new MathUtilityTests();

        // Run all tests in MathUtilityTests
        var method;
        for (method in mathUtilityTests) {
            if (method.substring(0, 4) == 'test')
                mathUtilityTests[method]();
        }

        // Display result summary
        fireunit.testDone();
    
    </script>

</head>
<body>

</body>
</html>

Figure 2 – Results of opening the Test1.html page

Running a Suite of Tests

According to the documentation, you should be able to run a suite of tests by using the fireunit.runTests() method like this:

if (fireunit.forceHttp()) {
    // Run all tests in AddTests.htm and SubtractTests.htm         
    fireunit.runTests("AddTests.htm", "SubtractTests.htm");
 
    // Display result summary
    fireunit.testDone();
}

In this case, the tests in the AddTests.htm and SubtractTests.htm should be run. Unfortunately, I could not get this code to work. The fireunit.forceHttp() method always returns false.

Simulating Browser Events

FireUnit overlaps, a little bit, in functionality with an acceptance testing tool such as Selenium. FireUnit includes a small set of methods for simulating browser events:

· click(node) – Simulates a click event on an HTML DOM node.

· focus(node) – Simulates a focus event on an HTML DOM node.

· id(id) – Shortcut for document.getElementById().

· key(node, letter) – Simulates a keypress event on an HTML DOM node with the specified letter.

· mouseDown(node) – Simulates a mousedown event on an HTML DOM node.

· value(node, text) – Assigns the text to the value property of an HTML DOM node.

For example, the HTML page in Listing 4 verifies that clicking a button changes the text in a <span> tag to the value Hello World!

Listing 4 – TestClick.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Test Click</title>
    
    <script type="text/javascript">

        function showHello() {
            document.getElementById('message').innerHTML = "Hello World!";
        }
    
    </script>
    
</head>
<body>

<button id="btn" onclick="showHello()">Click Here</button>
<span id="message"></span>


<script type="text/javascript">
    // Act
    fireunit.click("btn");
    var result = document.getElementById('message').innerHTML;
    
    // Assert
    fireunit.compare("Hello World!", result, "Click displays Hello World!");
    fireunit.testDone();
</script>


</body>
</html>

The fireunit.click() method simulates clicking the button in the page (see Figure 3). The test in Listing 4 uses the fireunit.compare() method to verify that the contents of the message <span> tag match the text Hello World!

Figure 3 – The fireunit.click() method causes the message to appear

Summary

I like the FireUnit user interface. In other words, I like the fact that your test results appear in a Firebug tab automatically. Because the interface forces you to see your test results every time you open a page, this interface enables you to make testing a natural part of developing JavaScript code.

FireUnit is still in its infancy. The framework has a very limited set of features. In particular, it is frustrating that you cannot use FireUnit with browsers other than Firefox.

My HP Mini Runs Visual Studio 2010

Stephen Walther — Thu, 14 May 2009 17:05:38 GMT

Before my trip to India, I bought an HP Mini 2140 netbook. It is a beautiful machine. It weighs only 4 pounds. It has a 1024x576 resolution screen (normal width but short height). It has almost a full sized keyboard. My favorite feature is that, theoretically, it has a 6 cell battery that can last 8 hours – a mind-boggling long amount of time.

The mini came with Windows XP pre-installed. That wouldn’t do. So, I immediately downloaded the release candidate of Windows 7 and installed it on the netbook. The mini does not have a DVD or CD drive. I copied the Windows 7 download to a USB drive and mounted the drive using Daemon Tools. I was able to install Windows 7 from the USB drive.

Next, I installed Windows Live Sync (what used to be called foldershare). Windows Live Sync keeps the files in the My Documents\Everywhere folder synchronized between my normal laptop, my desktop, and my netbook. I can modify a document in my netbook while riding the Microsoft bus into work in the morning, and have the document changes automatically synchronized with my desktop computer in my office.

Finally, I installed Visual Studio 2010 on the netbook. I grabbed the latest build right off the assembly line. Most likely, I am violating every recommendation for the minimum configuration of a computer to run Visual Studio 2010, but so far it has run just fine.

I wasn’t sure if Visual Studio would work on the netbook – the HP Mini’s Atom processor doesn’t exactly make the machine a speed demon. And, you definitely don’t want to run multiple applications while running Visual Studio. However, the experience is good enough to do light coding on an airplane or a bus (I might even try using the netbook to demo Visual Studio 2010 for a talk).

I did experience a moment during the installation process during which I was sure that installation would fail. Visual Studio complained that I did not meet the minimum screen resolution requirements (my netbook was short by a measly 3 pixels). However, I ignored the warning and everything installed without a hitch.