Unit testing in Silverlight part 1

Part 1
Part 2
Part 3
Part 4

Unit testing is an important part of daily life for a developer and with good reason. After all unit testing software makes it easier to make changes and change is the only constant in software development!

With regular .NET code you can right click on a class and select “Create Unit Tests” to get started. Unfortunately with Silverlight that just shows the following empty dialog.

image

The reason being that Silverlight source code is compiled against a different runtime and Visual Studio 2008 doesn’t know how to run those tests. Fortunately the Silverlight Toolkit released here on CodePlex also contains the Silverlight unit testing framework Microsoft uses to build these controls.

Using this framework we can start building our own unit tests for Silverlight code.

Getting started is easy.

First create a new Silverlight project and name it SilverlightTest1 and a the following class to it:

 

using System;
using System.Windows;
using System.Windows.Media.Imaging;

namespace SilverlightTest1
{
    public class Photo
    {

        public string Title { get; set; }
        public string Url { get; set; }
        public double Height { get; set; }
        public double Width { get; set; }
        public Size Size
        {
            get
            {
                return new Size(Width, Height);
            }
        }

        public BitmapImage getImage()
        {
            BitmapImage image = new BitmapImage(new Uri(Url));
            return image;
        }
    }
}


This is the code we are going to test.



Next add a second Silverlight project to the solution. Name this one SilverlightTest1Tests and select the option to automatically generate a test page like this.



image



This is going to be the project that contains our test cases.



Next we need to add references to the project we are going to test and the two assemblies containing the test framework: Microsoft.Silverlight.Testing.dll and Microsoft.VisualStudio.QualityTools.UnitTesting.Silverlight.dll. These two DLL’s can be found in the folder where you unpacked the SilverlightToolkit_Nov08_Source.zip in the Source\Binaries folder.



image



We will not be using the Page1.xaml in the SilverlightTest1Tests project so go ahead and delete it. Instead we are going to use a root page generated by the test system. In order to use this open the App.xaml.cs file and locate the Application_Startup function. Here we are going to change the RootVisual like this:



 



private void Application_Startup(object sender, StartupEventArgs e)
{
    this.RootVisual = UnitTestSystem.CreateTestPage();
}


Now we can run this project. Doing so will give the following output:



image



Not all that interesting yet as there where no test cases yet.



So lets add out first unit test!



Right click the project and add a new class named PhotoTest and add the following code:



using Microsoft.VisualStudio.TestTools.UnitTesting;

namespace SilverlightTest1Tests
{
    [TestClass]
    public class PhotoTest
    {
        [TestMethod]
        public void Test1()
        {
            Assert.IsTrue(true);
        }
    }
}


Now rerun the SilverlightTest1Tests project and the browser should look like this:



image



Nice out first test [:)]



Lets add some more. The code below are some more tests:



[TestMethod]
public void PhotoCreator()
{
    Photo photo = new Photo();
}

[TestMethod]
public void PhotoSize()
{
    Photo photo = new Photo();
    photo.Height = 256;
    photo.Width = 128;

    Assert.AreEqual(256, photo.Size.Height);
    Assert.AreEqual(128, photo.Size.Width);
}

[TestMethod]
public void GetNullImage()
{
    Photo photo = new Photo();
    var image = photo.GetImage();
}


 



One useful trick is leave the browser with the test page open. That way we can just rebuild the project and hit refresh in the browser. If I do I end up with the following output:



image



Clearly something is wrong as the GetNullImage test is failing. This was actually expected because I never set the Url for the photo so we cannot retrieve the image. So we need to tell the test framework this was the expected outcome. So change the GetNullImage test to the following:



[TestMethod]
[ExpectedException(typeof(ArgumentNullException))]
public void GetNullImage()
{
    Photo photo = new Photo();
    var image = photo.GetImage();
}


The ExpectedException attribute tells the unit test system that an ArgumentNullException is supposed to be thrown. In fact the test will fail now if the exception is not raised. Rebuild and refresh the browser to see the following output:



image



Clearly all test run just fine again [:)]



 



Looking for more information on Silverlight unit testing? Then take a look at Jeff Wilcox blog posts here or Jonas Follesø here.



Enjoy!



 



Update: Part 1, Part 2, Part 3.



 



[f1]
[f2]

2 thoughts on “Unit testing in Silverlight part 1

  1. Have you tried to use unit testing with .Net Ria Services? Somehow I cannot figure out how to get access to the DomainService (vai the DomainContext). Would one use a mock for this?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>