Peppermint-Demo.zip [Zip, 1.2 MB]

Silverlight:

Requires Visual Studio 2010 (or express)
Requires the Silverlight Toolkit
Requires the test framework binaries included in the zip

Windows Phone:

Requires the Windows Phone development tools CTP
Requires the test framework binaries included in the zip

An early preview set of bits are online at http://jeffatmix.com/ – and the next release of the Silverlight Toolkit when Silverlight 4 ships will contain support for the phone officially. Stay tuned for more.

Over the next few weeks, I’ll be blogging plenty on these subjects.

UNIT TESTING SILVERLIGHT AND WINDOWS PHONE APPLICATIONS
Jeff Wilcox in Lagoon B (Mandalay Bay)
Tuesday, March 16, 2010 2:05 PM (30 minutes)

Session materials, slides and code will be posted after the session at http://jeffatmix.com/.

Synposis from http://live.visitmix.com/MIX10/Sessions/CL59:

Learn how to create and maintain Silverlight and Windows Phone 7 Series applications using the Silverlight Unit Test Framework. See what tools are available to easily validate controls and application interfaces, add automatic testing to builds, and gain a solid understanding of test principles to deliver great experiences for your clients and customers.

What’ll be new at MIX for testing?

• Support for testing those Windows Phone 7 Series apps!
• New release of the Silverlight Unit Test Framework, with a modern user interface, Out of Browser support, and more.

Hope to see you all in Vegas! And if not – these sessions always make it online super quick. Let me know if there’s anything in particular you want covered in the talk.

More on David Anson’s blog post about the WPF charting components.

It demonstrates simple concepts for linking files from a Silverlight to WPF project, using partial classes and partial methods, preprocessor directives, and other tools to create projects that work throughout the Microsoft Client Platform.

Silverlight sample application

WPF sample application -100% the same source

Download the samples – Zip, 596 KB
The Zip contains the following work:

• Toolbar control for Silverlight and WPF
• Sample application for the Toolbox
• Continuum application – same XAML and CS shared between a Silverlight and WPF application that uses the DataGrid, charting controls, and our custom Toolbar control
• Value-add code, Awesome.cs, that adds some simple functionality to the WPF application only

Hope this helps.

This provides a very nice experience when using Visual Studio 2008 and Expression Blend 3, since the Toolkit’s controls appear alongside all other Silverlight SDK controls now.

I wanted to take a few minutes and record a few questions and answers about the new experience. Let me know if there are some other questions you’d like answered.

Why are there two setup downloads for the March 2009 release?

The March 2009 release is available for targeting Silverlight 2 applications (recommended for most developers and designers working on current production Silverlight 2 apps), and a Silverlight 3 Beta release.

Since the target platform is important, you can make a choice. Of course, both the Silverlight 2 and Silverlight 3 Beta installs for the Silverlight Toolkit support side-by-side; however, the Visual Studio 2008′s Silverlight Tools do not support “multi-targeting,” so you really should decide and stick to a single target development environment for Silverlight coding today.

What are the system requirements?

The Silverlight Toolkit only requires a recent version of the .NET framework to install. However, for the best experience, you should have one of these development environments installed and configured:

• Visual Studio 2008 SP1 with the Silverlight Tools (Silverlight 2 or Silverlight 3 Beta)
• Visual Web Developer Express with the Silverlight Tools (Silverlight 2 or Silverlight 3 Beta)
• Expression Blend 2 SP1 with Silverlight 2
• Expression Blend 3 MIX ’09 Preview with Silverlight 3 Beta

More information about these tools and downloads is available at http://silverlight.net/getstarted/silverlight3/default.aspx.

You can install the Silverlight Toolkit before or after the Silverlight Tools installation.

What’s with the namespace change to System.Windows.Controls?

As the Silverlight Toolkit has begun delivering controls into the official Silverlight SDK, it became apparent that we should be consistent across the Silverlight platform with regard to the namespace used for the Microsoft controls. As a result, we decided to make this namespace change along with the new “.Toolkit” assembly name scheme.

Where’s the AutoCompleteBox control? How about TreeView?

Some of the “Stable” controls were moved to the official Microsoft Silverlight 3 Beta SDK, since they are trending towards the “Mature” quality band. As a result, the controls live in different assemblies depending on whether you are performing Silverlight 2 or Silverlight 3 Beta development.

In the Silverlight 2 Toolkit March 2009 release, AutoCompleteBox is in System.Windows.Controls.Input.Toolkit. TreeView is in System.Windows.Controls.Toolkit.

In the Silverlight 3 Toolkit March 2009 release, AutoCompleteBox is in System.Windows.Controls.Input. TreeView is in System.Windows.Controls. These assemblies are part of the Silverlight 3 Beta SDK and DO NOT require installation of the Silverlight Toolkit.

The Silverlight 2 controls are compatible with Silverlight 3, so existing applications will continue to work – but we do highly recommend that you update to the appropriate Silverlight Toolkit for your target Silverlight version, since we do add version-enhanced features, such as animation easing for the Silverlight Toolkit charts in the Silverlight 3 Beta.

More information about the assembly and namespace name changes is available in this post by Shawn Burke.

What is installed with the Silverlight Toolkit now?

You’ll find the same basics as before, plus some. You’ll find these in the “Microsoft Silverlight 3 Toolkit March 2009″ (or similarly named folder for the Silverlight 2 version) folder in your Start Menu.

• New “Welcome” page with general information about the release, plus a link to the breaking changes and release notes for the release.
• Links to the CodePlex site for the Toolkit, plus the Silverlight.net discussion forums
• A link to the sample application for the Toolkit, served from the local system
• Links to Zip files containing the control source code and/or the sample source code
• The documentation for the Toolkit controls in CHM format. The documentation file no longer requires the “Unlock” workaround step on Windows Vista and Windows 7. Do note that the documentation for former Silverlight Toolkit controls that now appear in the Silverlight 3 SDK, such as AutoCompleteBox, are now located in the official Silverlight documentation. An offline download of the SDK documentation is also available.

What rocked about the Zip?

Well, in my mind, it was:

• Transparent experience
• Nothing fancy
• Lightweight. Nothing to install, so if you didn’t want it anymore, you could just delete the files, for instance.

What was so bad about the Zip?

• No integration into Visual Studio or Expression Blend out-of-the-box, without doing some manual file copy or registry work
• Confusing to users used to a setup experience
• CHM documentation files downloaded in a Zip require “Unlocking” before they work. Until then, they appear broken.

Would you consider offering releases in a Zip file, optionally, still?

We’re open to the idea. Especially now that there’s an Eclipse Silverlight development experience, we do need to be mindful of the need to use the releases on other platforms.

Since our packaging infrastructure was initially designed to output these nice .Zip files, it wouldn’t be too tough for us to get this going. We’ll see what the customer requests look like.

How do I select whether I want to get the source code to the controls?

There is an installation option for a feature called “Source code,” you can click on the box to the left of the item and remove the component if you would not like to install the source package.

If you do select this feature (per the default), a .Zip file is placed on the system that contains the source code. You can extract the zip file into a location of your selection to build or view the source.

As always, the source is also available on the Silverlight Toolkit CodePlex site.

What about Microsoft Expression Blend integration?

The Blend 3 MIX09 Preview release includes support for having the Silverlight Toolkit appear in the “Custom Controls” tab of the Asset Library. This is only available for Silverlight 3 Beta, not the Silverlight 2 / Expression Blend 2 product.

There is some really great design time support in this release. For instance, if you just drop a “Chart” control onto your Blend design canvas, you’re greeted with a chart that has simple design time data! It might look a little like one of those “the most bars anywhere” cell phone commercials, but it is very helpful for styling.

What powers the installer?

We leveraged the open source Windows Installer XML (WiX) toolset, an excellent and easy way to build Windows Installer packages. Kudos to Eric St. John, a Microsoft developer who contributes to WiX, for excellent advice, btw!

This was important to our small development team, since we wanted to spend time working on new features like awesome design-time integration and new controls like accordion instead of assigning a developer to the setup full-time.

Hope you like the new experience. Let us know!

One of the most important messages that I had during the talk is the flexibility that the Microsoft Client Platform enables: you can be a Rich Internet App developer today, and build an enterprise Line of Business app tomorrow, since so many of the concepts, APIs, and ideas are shared between these frameworks.

Download session deck (4.7 MB PowerPoint 2007)
View the session on the VisitMix.com site: http://videos.visitmix.com/MIX09/T87F

Check out other awesome Silverlight, WPF, and Expression. Hope this helps. Let me know what you think.

I’ve enjoyed the conversations that I have had with many of you in prior years, and this year won’t be any different – although the breadth of Silverlight geek knowledge I’m interested in sharing and discussing sure is growing:

• The Silverlight Toolkit
• Silverlight unit testing
• The client continuum – Silverlight and WPF source and knowledge sharing

Did I mention that I’ll be speaking at MIX this year?

The session schedule is a little fluid at times, but as of right now, MIX attendees can can come hear the talk on Friday the 20th, talk MIX09-T87F, in the San Polo 3501 room in The Venetian. I’ll be discussing the compatibility work that we’re doing to work towards a world where you can write your code once, and share it between your WPF and Silverlight projects.

Microsoft Silverlight and Windows Presentation Foundation (WPF): Sharing Skills and Code

Friday March 20 | 2:00 PM – 3:15 PM | San Polo 3501

Jeff Wilcox, Silverlight Toolkit

Come get an in-depth understanding of the compatibility between WPF and Silverlight. Learn the relationship between WPF and the various subsystems of Silverlight including: XAML parsing and serialization, control instantiation, styling and templating, layout, rendering, and more. Also, learn how to build applications that fully exploit both Silverlight and WPF.

Best of all, like other MIX conferences, these sessions should make their way online for the world to view.

Other awesome talks

There are a ton of talks scheduled, and I’ve had the honor of getting a preview of some of the content. In no particular order, I wanted to share the synopsis from a few other talks…

High-Speed RIA Development with the Microsoft Silverlight Toolkit MIX09-T15F

Shawn Oster, Silverlight Toolkit

Come learn how the Silverlight Toolkit can help jumpstart development of stunning Web experiences, and learn how to use the latest controls to create more immersive, more manageable user experiences.. Using Microsoft Visual Studio and Microsoft Expression Blend, explore advanced debugging and unit testing techniques for building components that work across Silverlight and Windows Presentation Foundation (WPF).

Brad and Nikhil have been hard at work on some exciting new projects, and I bet these will be exciting:

Building Amazing Business Centric Applications with Microsoft Silverlight 3 MIX09-T40F

Brad Abrams

This will be a great Silverlight session, but we won’t be able to release any details until after MIX09 Keynotes. Check this abstract after MIX09 Keynotes for a complete session description.

Plus,

Building Data-Driven Applications with Microsoft Silverlight and Microsoft ASP.NET MIX09-T41F

Nikhil Kothari

This will be a great Silverlight session, but we won’t be able to release any details until after MIX09 Keynotes. Check this abstract after MIX09 Keynotes for a complete session description.

And, if you’re looking to build out controls for Silverlight, check out Karen’s talk:

Building Microsoft Silverlight Controls MIX09-T16F

Karen Corby, Silverlight

Learn how to encapsulate structure, animation, and logic inside custom controls that handle theming, layout, validation, and data binding. Using Microsoft Visual Studio and Microsoft Expression Blend, explore advanced design, coding, debugging, and testing techniques for building components that work interchangeably in Silverlight and Windows Presentation Foundation (WPF).

[ Full list of Silverlight-tagged sessions at MIX’09 ]

Let’s chat!

In preparation for MIX, I’m going to have to cut back my sleep a little bit to acclimate my system to the 24-7 experience that is the conference and Las Vegas.

If you want to chat Silverlight controls, Silverlight Toolkit, unit testing, or fine beers, you name it, I want to talk about it. Shawn Burke and Shawn Oster from the Silverlight Toolkit should also be in attendance, so you might even be able to corner a few of us to get a great idea of what’s going on with the Silverlight Toolkit.

Get ready for some Twitter action

I have a love-hate relationship with Twitter… but the good news is that I’m actively on Twitter again. It was fun participating in #mvp09 this year, and Twitter makes it easy to stay in touch, meet up, and enjoy the conference experience.

http://twitter.com/jeffwilcox

Hope to see you there!

1/6/09 Update: Updated templates are available that should be used for the final Silverlight 2 release. Please see the MSDN Code Gallery site and/or this post from October ’08.

Test-driven development is something that every developer can appreciate once they’ve tried it, and something that I’ve worked hard to enable for Silverlight with the release of the controls source.  Scott Guthrie previously posted about the Silverlight 2 Beta 1 release, with a First Look at Silverlight 2 post followed by the First Look at Using Expression Blend with Silverlight 2.  If we could take the same application from the Blend post & create a set of unit tests for the components in the app, it would pay dividends once we start adding new features or working with other developers on the project.

If you’d like to hear more about any part of the framework, let me know in the comments and I’ll come back with that information.  Previous posts that may be helpful if you don’t have time to complete this tutorial today: a video walkthrough of the control unit tests, and a quick introduction to the unit testing bits with download locations and installation instructions.

Test support for Silverlight

At MIX we released source code to the controls, unit tests, and we including a unit test framework that runs in the web browser using Silverlight on the Mac and PC.  The Microsoft.Silverlight.Testing framework is simple, easy-to-use, and will give developers yet another way to increase their productivity and application quality.

In today’s post we’ll take our working chat interface from Scott’s last tutorial, improve its testability, and add some simple tests.  At the end we’ll have a set of cross-platform, cross-browser tests that can run everywhere:

The framework will be familiar to anyone who’s used the desktop unit testing tools inside Visual Studio Team Test (and also now available with Visual Studio 2008 Professional): the same types and attributes are available for unit testing now in Silverlight.

Having unit tests is extremely useful because the more test scenarios you create, the more confidence you’ll have when adding features and fixing bugs, especially if you’re working with a team of developers.  Since the test projects are packaged like any other Silverlight application, there’s no special installation process to run the tests.  On the Silverlight controls team we’ve built thousands of these tests!

A PDF of this tutorial is also available for download here.

Getting started with unit test projects

At the end of ScottGu’s last post, we were in Visual Studio, having just hooked up the UI data binding and wiring up the SendButton’s Click method. 

There are now two choices we have for adding a ‘test project’ to the solution.  Option 1 will explain how the testing hooks up to run in the browser.  Option 2 (skip ahead) is what you’d probably actually want to do.

Option 1: Adding a new project and manually hooking up the test framework

Add a New Silverlight Application to use as a test project

We’ll create a new test project by selecting the File->Add->Project menu item within Visual Studio 2008.  Inside the New Project dialog, drill down into the Silverlight project types and select “Silverlight Application”:

Note: Make sure not to accidentally select the “Test” project types, since that’s for the desktop framework and not Silverlight.  Silverlight unit test projects are not integrated with Visual Studio, so the integrated test features will not work-Silverlight unit tests run in the web browser host.

We’ll name the project “Test”, although if your solution has many discrete components, you may want to pick a better identifier.  When we click the “OK” button, Visual Studio will ask us to choose the type of application project.  To keep it simple, let’s just use the option to automatically generate an HTML test page:

After clicking “OK”, we’ll then have 2 projects within the ChatClient solution.  You can switch between the startup projects by right-clicking on either the ChatClient or Test project and choosing “Set StartUp Project”.  Next up, adding the unit test assemblies.

Adding references to the unit test framework

The unit test framework is being provided as a download separate from the SDK, as part of the control source code package that you can download here.

If we place the test framework assemblies in a directory within the solution, we can then add them as references to the test project by going to the Project->Add Reference menu item and then clicking on the “Browse” tab and finding that folder:

Select all three of the files and click “OK”.

Wiring up the test framework

We now need to make some quick changes to the default project to wire up the test framework:

• Removing Page.xaml and the Page.xaml.cs code-behind file
• Updating App.xaml’s code-behind file to create a unit test page

First, highlight the Page.xaml file within the Test project.  Go to the Edit->Delete menu item and when prompted to confirm the operation, select “OK”.

Your Visual Studio solution should now look like this:

Next, we need to replace the RootVisual with a call to create the test page.  The test page handles preparing the framework, starting up the unit test engine, and then running through test classes found and reporting results on the web page.

To wire up the framework,

• Add a reference to the namespace Microsoft.Silverlight.Testing
• Replace the RootVisual with a call to UnitTestSystem.CreateTestPage.  The parameter to the method enables the framework’s test engine to reflect on your test assembly.

Here’s the updated App.xaml.cs:

Now we’re ready to start adding tests.

Option 2: Adding a new test project using prebuilt templates

It’s much easier to use Visual Studio project templates to do all the work above.  Previously posted about here.

Download the templates

• SilverlightTestProject.zip (project template, adds a test project Silverlight application to the solution)
  Copy this into your “%userprofile%\Documents\Visual Studio 2008\Templates\ProjectTemplates”
• SilverlightTestClass.zip (item template, adds a test class to your Silverlight test project)
  Copy this into your “%userprofile%\Documents\Visual Studio 2008\Templates\ItemTemplates”

Add a test project to your solution

To create a new Silverlight test project, with your Silverlight application or class library open:

• Right-click on the solution
• Select the Add->New Project menu item
• Click on the root “Visual C#” project type node
• Under “My Templates”, select “Silverlight Test Project”, and give your test project a name

There’s a default test.cs file that you can use as a starting point, or to add additional test classes to your test project in the future, you can:

• Right-click on the test project
• Select the Add->New Item menu option
• Click on the root “Visual C#” category
• Select “Silverlight Test Class” and provide a name for your new class

Adding the first test

All that’s left for us to do now is start adding unit tests.  To verify that everything’s hooked up and we can start testing, let’s add a no-op test that will always pass.

Even if you haven’t used the Visual Studio unit test framework before, it’s really easy to pick up since the attributes are self describing:

• The metadata and assertion types can be found within the Microsoft.VisualStudio.TestTools.UnitTesting namespace
• Tests are made up of test classes and test methods

Add a new class to the test project by going to the Project->Add Class menu item, provide the name “SampleTest.cs” and click “OK”.  Here’s a simple test file:

Although we’re building a C# test project today, here’s what the same test would look like in Visual Basic:

Run the unit tests

To run the test project, make sure that it is set as the StartUp project by going to the Project->Set as StartUp Project menu item.  Then, simply press F5 to start debugging (and your web browser).

Since this is a test without any Silverlight controls or interface, nothing is displayed on the plugin’s surface.  Only the test log, created by the HTML DOM bridge feature in Silverlight 2, is displayed.  The log shows the test classes and methods that run, any failures, and a clear indication of the number of tests that ran:

API Unit Tests

Now that we know how to prepare a test project, add test classes, and run the tests, we can add some useful tests.  A well-designed application might follow a Model-View pattern that decouples the UI.  Not only does this make development easier, but using this common pattern will make our application easier to test.

Thankfully our chat client that we built previously did make use of data binding to abstract away the underlying application state from the user interface.

Testing our application code

The first test we created didn’t actually exercise any of our application’s components and always passed.  Let’s go ahead and delete the SampleTest.cs file by highlighting it, right-clicking and choosing the “Delete” menu option, and then confirming the deletion.

To get started we’ll need to add a reference to the app project so that the types are available to the test code.  Select the ‘Test’ project in Visual Studio, navigate to the Project->Add Reference menu item, and then click the Projects tab.  Select the ChatClient and click the “OK” button:

Testing our ChatSession class

For our first “real” test, let’s create a new test class titled “ChatSessionTest.cs” within the test project.  ChatSession is an interesting type because it implements the INotifyPropertyChanged interface and contains an ObservableCollection.  Here’s a snippet of these declarations from the code:

Since the ChatSession doesn’t need to know anything about the types that are subscribing to changes notices through the MessageHistory collection, it enforces the Model-View separation and means that we can add a unit test that verifies that the ObservableCollection is properly firing events.

Go ahead and add a new unit test: create a new class inside the Test project named ChatSessionTest.  We’ll then decorate the ChatSessionTest.cs file by importing the unit test metadata namespace, and also the namespace for the chat application:

Performing Negative Testing

You can use the ExpectedExceptionAttribute to indicate to the unit test runtime that an Exception should be thrown, and that the test is considered to pass if the type is equal to the type provided in metadata.  This is handy to add unit tests to verify your assumptions and how your components react to unexpected data.

Let’s go ahead and use this to add a test called “NullInstance” whose purpose is to try reading a property from a null instance of ChatSession, and verify that the NullReferenceException is thrown by the CLR:

If we go ahead and run the tests now by pressing F5, we’ll be greeted by the bright green “success” indicator in the log.

Testing the designer data

While we were working with Expression Blend before, there was a set of sample data that helped the design-time experience by showing a preview with some fake data. 

Since the method which adds this fake data to a ChatSession instance is a private method, and we want designers to have a consistent experience while working in their design tools, it only makes sense that we should probably add some test coverage here.  In order to verify this data, we’ll need to make the chat client a little easier to test first – this is one of those sticky test issues that is less than ideal, especially since Silverlight client code is ‘transparent,’ and so private reflection isn’t available.

To do our testing, we have to use the InternalsVisibleTo attribute to allow our test assembly to view internal types and methods of the ChatClient assembly.  Within the ChatClient project, open the “Properties” folder and select the AssemblyInfo.cs file.  If the file doesn’t exist, simply add a new code file.  At a minimum, make sure to add the InternalsVisibleTo declaration.   The parameter to the attribute is the name of your test assembly-only that assembly will be able to access the internal members of ChatClient.

Then, open up the ChatSession.cs file and add the keyword “internal” to the method called PopulateDummyData.  This will change the method from being private to internal:

Now, jump back to our ChatSessionTest and add a test method that creates a new chat session instance, populates the designer data by calling the internal PopulateWithDummyData method (which is now accessible to our test code), and then performs some validation:

Inside this test, we’ve used some new functionality: the Description attribute acts like a comment that can help with analyzing any test failures in the future, and we’re also using the CollectionAssert verification routines.

Testing the CollectionChanged event

For good measure, let’s add one more test: let’s make sure that the ObservableCollection is actually observing:

We have a lot going on here, but it’s easy to break down:

• a new ChatSession instance is created
• a local boolean is created to track whether our event listener has been called successfully
• assertions have been added in for robustness. 
• the SendMessage method on the ChatSession instance is called, which should immediately fire the CollectionChanged event and call the delegate that we wired up to the change event.

To make sure all the tests are passing before continuing, build the project and press F5 to run the tests:

Surprisingly, we have a unit test failure! The log now has a summary of the failures (this is useful if running thousands of tests), and the failing method has some exception information.

Some quick analysis will show us that inside ChatSession.cs’s ConnectWithRemoteUser method, we’re assuming that the PropertyChanged event handler is not null:

The fix is to encase the event handler calls with a check for null:

After marking the fix, a quick F5 run of the tests will confirm our fix:

Now we have some good API tests that are well suited for testing Silverlight class library projects, including validating data structures and business objects.  Having a large suite of such tests will give us a lot more confidence when we add the complexity of the user interface into the equation.

Simple UI Tests

Beyond API tests, you can also build tests that simulate user activity by calling methods that glue together your interface with your application logic.  You can examine the visual tree, modify control properties, and perform a number of useful tests with your application code. 

Although we aren’t looking to simulate mouse events or key presses, we can still validate a large set of the functionality in our chat app by programming against the Page type defined in ChatClient.

Moving our resources into Page.xaml

Since we defined a number of application resources inside the App.xaml file for the chat client, these key resources that define the history view and send button won’t be available to our test application (they’re separate apps).

To demonstrate testing our ChatClient’s Page, which makes up the bulk of our ‘app’, we’ll need to move the resources from App.xaml to Page.xaml inside the chat client project.  This is actually extremely easy to do using Expression Blend (or manually, using the XAML text editor in Visual Studio and some cut-and-paste).

We should open up Expression Blend 2.5 March 2008 Preview again and open our ChatClient solution.  Inside, we can double-click on Page.xaml to open that view again. The first thing you’ll notice is that the test project is also now available inside Expression Blend:

If we wanted to run the tests right now, we could right-click on the test project, set is as the Startup Project, and then if we went to the Project->Test Solution menu item (or pressed F5), all of our unit tests would run without us having to be in Visual Studio, a good time saver.

To move the two application resources from the application level to the page level, we need to click on the Resources tab in the upper right corner of Blend.  Then, expand both the App.xaml and Page.xaml elements so that we can see all of the available resources:

Now we just have to select each resource individually and drag them into the Page.xaml area.

The resources should now look like this:

Go ahead and exit Blend now, saving your changes to App.xaml and Page.xaml.

Creating a test class to test our UI

The last thing to do now is create a few tests to actually exercise our application as our end users will.  Since the Silverlight test project is actually just another Silverlight application, we don’t have the ability to simulate user-initiated actions (no fancy UI automation here), such as mouse clicks and key presses.  What we can do, however, is test: that the code that wires up our button events works, that the visual tree is updated, and that the data source is reflecting the expected set of data.

The first thing we need to do is create a new test class.  With Visual Studio open and the test project highlighted, select the Project->Add Class menu item, give the new class the name “ClientTest.cs”, and then press “OK”.

Understanding the SilverlightTest base class

If you’re authoring Silverlight-specific tests and would like the ability to write much more advanced tests, you can inherit from the base class SilverlightTest, which is in the Microsoft.Silverlight.Testing namespace.

The base class provides support for interacting with the root visual and HTML DOM bridge.  Additionally, the base class defines a number of helper methods that can be used in conjunction with the [Asynchronous] attribute to create tests that run beyond the scope of the test method, until the TestComplete method is called.  Such tests are beyond the scope of what I’d like to present in this tutorial, but you could use these methods to verify network requests, background worker events, and other interesting scenarios.

In a future blog post I’ll jump into some of the advanced functionality, including the ‘Asynchronous’ test concept, so subscribe to my blog if you haven’t already!

To prepare to use this base class with our ClientTest, we need to:

• Add a using statement for Microsoft.Silverlight.Testing
• Add a using statement for Microsoft.VisualStudio.TestTools.UnitTesting
• Add a using statement for ChatClient
• Inherit from the SilverlightTest base class and mark our class as a test

Add our first interface test

Our test class should also be customized for testing our application page, so we need to add a private member variable to save our current instance of the ChatClient’s Page type. 

To make testing many scenarios easy, we’ll create a TestInitialize method that will be called before each TestMethod.  Inside the initialization routine, we’ll use some of the functionality that the SilverlightTest base class exposes to interact with the TestSurface.  This is a special type created specifically for this kind of testing: if you access the TestSurface in a test, the contents of the TestSurface (which is a Grid) will be cleared before the next test method runs.  This saves you from having to write code to cleanup temporary visuals used in tests. 

We’ll use TestSurface to add a new instance of our Page before each test. Let’s have a look at our initial work on ClientTest:

And so next we can add a test method to verify that the object has a width greater than zero:

If you instead wanted to test a fixed width, and validate that the actual width is applied after the layout is updated, then you could use a test like this:

For now let’s just keep the DisplayDefaultSize test.  If we go ahead and run the tests right now, we’ll see the chat application popup for a very brief second before being removed from the TestSurface.

Add an interface test that simulates sending messages using the TextBox:

The most interesting thing that we can test is that when a user enters text into the TextBox and then clicks the button, that the message is reflected in the data source and is displayed correctly.  To do this, we need to:

• Set the MessageBox’s Text value to represent the user’s chat string
• Simulate the Button’s Click event by calling our underlying SendButton_Click method inside Page.xaml.cs
• Send some messages
• Verify the data source

Optionally, you could also spend time to jump into the visual tree and verify the various control values.

This is pretty straightforward.  To call the SendButton_Click method we need to make it an internal method, so go back into Page.xaml.cs for the chat application and make that change:

Next, back inside our ClientTest.cs file, let’s add a helper method called SendMessage that works with the text box and calls the SendButton_Click method.  Then we can write a quick string of calls to SendMessage and then verify the result in the data source:

That’s it!  We now have an end-to-end test that sends messages within the app.  To perform some final testing, we could either press F5 to debug and run the test project, or navigate to the test project’s page with another browser such as Firefox or Safari.  On my machine the test page for the test project is located in “C:\Silverlight2\ChatClient\Test\ClientBin\TestPage.html”.

The good and bad news is that if we run these tests, they happen extremely fast.  You can efficiently easily run thousands of tests using this simple in-browser test experience.  Here’s what it would look like if we froze the screen right when the SendManyMessages test ran on my Mac Pro:

There’s a lot of useful functionality in the unit test framework, including the same metadata and assertions as the desktop’s.  I’ll be including more information about this framework on my blog.

Summary

By creating and running unit tests inside the web browser, you’ve now learned another way to build solid, usable, testable applications using Silverlight 2 Beta 1.  Having this unit test capability available to the community is important, and I hope that you’ll see great use for this while developing your applications.  The Microsoft.Silverlight.Testing framework is simple, easy-to-use and will give developers yet another way to increase their productivity and application quality.

Since simple unit tests are source-compatible with the desktop unit test framework in Visual Studio, it will be easy to move existing desktop developers onto Silverlight application work.  Kudos to the Visual Studio Team Test team who created a rock-solid unit test foundation, having the same capability here for Silverlight is key: I’ve been able to move many of my class libraries to Silverlight and keep the same exact unit test source that was written for the unit test framework in VS.

If you haven’t had experience with this great unit test framework before, you’ll be able to take that metadata knowledge back to your desktop developers as well.

Hope all of you that are test-driven development fans find this a good start to bringing that to your Silverlight work,
Jeff Wilcox

p.s. Feedback

I’m definitely interested to know if you’re able to make use of this framework, so please use this post to discuss the framework at length!

A few things to call out that are known issues or differences: data-driven tests aren’t available in Silverlight, there’s no direct Visual Studio intergration (the “Create Unit Tests” feature shouldn’t be used), negative testing with ExpectedExceptionAttribute needs a fix at the framework level, and without private reflection in the Silverlight product for apps, the ability to get to private types like you can in the full desktop unit test framework isn’t there today.

I’ve already received some great feedback and as a result of that, am going to look into what we can do to polish the framework further.  We’ll also look into what it would take to release the source code of the framework itself, since that’d be much more helpful to folks building this into their existing test infrastructure – Reflector only gets you so far.

PDF Available
Download a PDF of this tutorial here

In this video I introduce the control source and unit test announcement from MIX, and then walk you through:

• exploring the Silverlight 2 Beta 1 control source code, unit test and unit test framework download
• using Visual Studio 2008 to run the control unit tests
• adding the Exclusive attribute to narrow the test(s) that run in the browser when analyzing tests
• running the tests in Firefox
• running the tests in Expression Blend 2.5

I hope you find this useful, I’m planning on screencasting a more in-depth look at the test framework in the future.  I’ll try and enunciate a little better next time, the audio could have been clearer.

Speaking of video, don’t forget that all of the sessions for the MIX conference are online at http://sessions.visitmix.com/.

It is my hope that this provides the ability for teams to do some level of test-driven development using Silverlight, and so I’m very interested in receiving your feedback on how it works.  We’ve had pretty good success using this framework for developing the managed Silverlight controls that were released in the Silverlight 2 Beta 1 SDK at MIX.

Exploring the control unit tests:
Shawn Burke gives an overview of the control source code, unit tests and framework
3/20 Update: I’ve also added a quick video post with a screencast that shows the control tests running.

Using the unit test framework:
Coming soon , once I’m back from MIX’08 I’ll get the tutorial posts off to a start – subscribe to my feed!

 
Microsoft.Silverlight.Testing running DataGrid control tests

Built on the power of the Visual Studio Team Test unit test framework

If you’ve used the unit test framework built into the Visual Studio Team Test editions (now available with Visual Studio 2008 Professional as well), then you know just how easy and powerful the framework is. 

You’ll find that pretty much everything in the desktop unit test framework is available here when it comes to metadata and attributes.  There’s no data-driven tests or advanced host attribute support, but we’ve also added some helpful attributes such as “Exclusive” attribute (that lives in the Microsoft.Silverlight.Testing namespace), since there’s no Visual Studio integration with the framework.

Hopefully this will also help you to get more familiar with the Visual Studio unit test framework so that you can use it for your desktop apps, since the metadata and assertion class knowledge transfers perfectly.

If you’re new to the unit test framework, check out the MSDN documentation on the Assert, StringAssert, and CollectionAssert classes, plus of course the attribute metadata.

MSDN Library Documentation: Microsoft.VisualStudio.TestTools.UnitTesting

A sample testcase that uses the unit test framework’s attributes; this particular test source code can run using Microsoft.Silverlight.Testing or the desktop Visual Studio Team Test unit test framework, if the references for the project are updated.

Downloading the framework

To get started, download the Silverlight 2 Beta 1 controls source code.  Inside the self-extracted Zip file, there is a subdirectory called ‘bin’ that contains the three assemblies that make up the unit test framework:

These are typical Silverlight class library assemblies, so you can reference them in your projects like any other library.

Installing the framework

To make it easier to add the test framework assemblies as references’ to your projects, I’d recommend copying the framework assemblies into the client libraries directory where the SDK installs the controls and other bits.

To do this, simply copy the three into “%programfiles%\Microsoft SDKs\Silverlight\v2.0\Libraries\Client”.  The next time you use Visual Studio’s Add Reference window from within a Silverlight application project, you’ll see the assemblies present:

Please note that the unit test framework isn’t part of the SDK, but this is a convenient place to store them.

Helpful C# test project templates

Although it’s pretty easy to tie into the framework by adding a new Silverlight application project to your solution, that requires a few hookup details, such as removing Page.xaml.cs, updating the root visual, and some other magic.

It’s much easier to instead use these helpful Visual Studio 2008 project and item templates:

• SilverlightTestProject.zip (project template, adds a test project Silverlight application to the solution)
  Copy this into your “%userprofile%\Documents\Visual Studio 2008\Templates\ProjectTemplates”
• SilverlightTestClass.zip (item template, adds a test class to your Silverlight test project)
  Copy this into your “%userprofile%\Documents\Visual Studio 2008\Templates\ItemTemplates”

Using the C# test project templates

To create a new Silverlight test project, with your Silverlight application or class library open:

• Right-click on the solution
• Select the Add->New Project menu item
• Click on the root “Visual C#” project type node
• Under “My Templates”, select “Silverlight Test Project”, and give your test project a name

There’s a default test.cs file that you can use as a starting point, or to add additional test classes to your test project:

• Right-click on the test project
• Select the Add->New Item menu option
• Click on the root “Visual C#” category
• Select “Silverlight Test Class” and provide a name for your new class

Hope you find this is pretty useful, let me know!
Jeff

To use this component in your own Silverlight 2 Beta 1 project, you can grab the bits either way:
Download HtmlExtensions.cs
Download HtmlExtensions.dll (zip, referenced component can be used by C# and VB Silverlight 2 beta 1 apps)

New HTML DOM bridge APIs that relate to this, and can be used directly from the Window instance of HtmlPage: Eval, Alert, and on HtmlPage, Body:

I’m also now offering a small assembly version of this class for any Visual Basic developers to use in their application targeting Silverlight 2.

Hope this helps!

To use this component in your own Silverlight 2 Beta 1 project, you can grab the bits either way:
Download Md5.cs
Download JeffWilcox.Md5.dll (zip, referenced component can be used by C# and VB Silverlight 2 beta 1 apps)

The MD5 types are in the namespace JeffWilcox.Utilities.Silverlight, so that it doesn’t clash with anything.  Feel free to rename the namespace to suit your project’s needs.  The easiest way to use these bits is just to add a reference to the assembly to your project, the MD5 assembly will then be included in your finished app’s .Xap file.

While working on implementing the Flickr web services API within a .NET-enabled Silverlight sample application, I needed to use the MD5 algorithm that isn’t available within the cryptography APIs. Like many REST-based web services, the simple Flickr API uses MD5 along with a form of “signing” with a known secret.

The excellent MD5 implementation was created by the GL Conseil/Flow Group SAS; they did this work to enable MD5 within the Compact Framework 2.0.

Calling the function is very simple.  In C#:

And in VB:

Hope this helps!

I’ll be posting a lot more great information about this in the coming weeks, but wanted to get the link out there!

The source code for the Silverlight 2 Beta 1 controls includes implementations for the following controls:

• Button
• ButtonBase
• Calendar
• CheckBox
• ContentControl
• DataGrid
• DatePicker
• GridSplitter
• HyperlinkButton
• ListBox
• RadioButton
• RangeBase
• RepeatButton
• ScrollViewer
• Slider
• ToogleButton
• ToolTip
• WatermarkedTextBox

Unit tests for the controls are located in respective ‘Test’ subdirectories, which use Microsoft.Silverlight.Testing.dll and related test framework binaries located in the ‘Bin’ directory.

For more information about Silverlight 2 Beta 1, see the Silverlight 2 SDK Beta 1. To get the Silverlight 2 Beta 1 browser plug-in, go to this page.

There were legends in the crowd last year, from all over the web and world, and the discussions were awesome.  Don MacAskill and Jeff Barr in a web services panel; the legendary Scott Guthrie wooing the audience with pure coder awesomeness; MySpace and Facebook threw some parties that just paled in comparison to the Silverlight party at PURE… but that was oh so last year!

Since that conference, the rich client has just continued to evolve and it is obvious that there’s a lot of goodness in taking the web experience to the next level.  Every day I’m seeing more and more Flash in use across the web, so it’s a growing technology space.  The experience of using Highrise to manage tasks and projects is sweet, simple and backed by solid JavaScript and Ruby coders.  More companies are recognizing the importance of front-end engineers.  People are starting to get serious about testability.  This is a fun industry to be in.

Ok, so what am I looking forward to in particular?

• Controls
  Just look what ScottGu’s showing here and here- there’s a button. there’s a datagrid. very good!
• Testing Silverlight apps
  Learning what designs and developers of rich client apps expect with regards to testing, testability of apps, how test-driven development can work with Silverlight, if designers would find unit tests useful, and so on…
• Learning how people are using Silverlight so that I can do a better job giving people what they expect and want in a rich client platform
• Seeing how people are using the HTML DOM bridge
• Seeing what fluxcapacity‘s up to
• Networking and hearing what everyone has to say!
• Warmer weather than Seattle’s been having

Whether you’ll be in Vegas for MIX or not, drop me a line and stay in touch, I’m hoping to post quite a bit about the Silverlight 2 goodness on my blog once I have some time to stop and catch my breath.

See you there!

My Blog • Twitter • LinkedIn • Facebook • Flickr MIX’08 photos