Click here to Skip to main content
Click here to Skip to main content
Go to top

Unit Testing a Silverlight View Model Style Modal Popup

, 6 May 2010
Rate this:
Please Sign up or sign in to vote.
An example of a View Model Style Modal Popup Unit Test.

A View Model Modal Popup Unit Test

Live examples:

The View Model Style pattern allows a programmer to create an application that has absolutely no UI (user interface). The programmer only creates a ViewModel and a Model. A designer with no programming ability at all is then able to start with a blank page and completely create the View (UI) in Microsoft Expression Blend 4 (or higher). If you are new to View Model Style, it is suggested that you read Silverlight View Model Style: An (Overly) Simplified Explanation for an introduction.

This article demonstrates how you can Unit Test a Modal Popup.

To learn how to make pop-ups, see: MVVMPopUp.aspx.

The Pop-up Demo

Let's look at the normal operation of the pop-up demo.

There is a section at the top that adds the two numbers entered (note: I just realized that it will throw an error if you enter a non-number, I should have created a Unit Test before I wrote the code and that would not have slipped through! Smile | :) ).

You can select a Default Value on the main page and click Show Popup.

The Default Value that you selected on the main page will be set in the drop down. You have the option to change the value in the drop down, and then click OK, Cancel, or the X (in the upper right hand corner of the Popup) to close the Popup.

The value selected in the drop down of the Popup will display on the main page as Popup Result.

Unit Testing a View Model Style Modal Popup

With the View Model Style, you can just instantiate a Popup in the View Model and simply show it. The Popup is not considered to be part of the main View page. It's as if we are navigating to another page temporarily. The main View page actually knows nothing about the Popup. All it knows is that it raised an ICommand and passed it a Default Value, and then later a property on its page was somehow changed (the Popup Result).

If you want to test the Popup, you simply need to test the View Model.

Silverlight Unit Testing

In Visual Studio 2010, we can simply add a Silverlight Unit Testing project by selecting Add, then New Project... then create a Silverlight Unit Test Application project.

After it creates the project, add references to Microsoft.Expression.Interactions (otherwise you will get the error: The attachable property 'Triggers' was not found in type 'Interaction') and your Silverlight project that is being tested (MVVMPopUp).

Next, open up your Tests.cs file and add a few tests:

using System.Windows.Shapes;
using Microsoft.Silverlight.Testing;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using MVVMPopUp;

namespace SilverlightTest1
{
    [TestClass]
    public class Tests
    {
        [TestMethod]
        public void DoMathTestGood()
        {            
            // Create an instanace of the ViewModel
            MainViewModel VM = new MainViewModel();

            // Set the values
            VM.Value1Property = "100";
            VM.Value2Property = "100";

            // Perform calculation
            VM.DoMath(null);

            // We expect the result to be 200         
            Assert.AreEqual(VM.MathResultProperty, "200", true);
        }

        [TestMethod]
        public void TestPopupClickClose()
        {
            // Create an instanace of the ViewModel
            MainViewModel VM = new MainViewModel();

            // Set the Default value that will be passed to the Popup
            // Open the Popup
            VM.ShowPopUP("Yes");
            // Close the Popup
            VM.PopUP.Close();

            // Get the resut of the Popup
            string result = VM.SelectedPopUpValueProperty;

            // We passed Yes as the Default and we clicked the Close button 
            // So the expected result is "Yes - Cancel"
            Assert.AreEqual(result, "Yes - Cancel", true);
        }

        [TestMethod]
        public void TestPopupClickOK()
        {
            // Create an instanace of the ViewModel
            MainViewModel VM = new MainViewModel();

            // Set the Default value that will be passed to the Popup
            // Open the Popup
            VM.ShowPopUP("YES");

            // Close the Popup by Clicking OK

            // Get an instance of the ViewModel that the main ViewModel is using
            // for the Popup
            PopUpViewModel PopUpVM = (PopUpViewModel)VM.PopUP.DataContext;
            // Pass that to the Popups Set-up Command
            PopUpVM.SetPopUp(VM.PopUP);
            // Click the OK button
            PopUpVM.OKButton(null);

            // Get the resut of the Popup
            string result = VM.SelectedPopUpValueProperty;

            // We passed Yes as the Default and we clicked the Cancel button 
            // So the expected result is "Yes - Ok"
            Assert.AreEqual(result, "Yes - Ok", true);
        }

        [TestMethod]
        public void TestPopupClickCancel()
        {
            // Create an instanace of the ViewModel
            MainViewModel VM = new MainViewModel();

            // Set the Default value that will be passed to the Popup
            // Open the Popup
            VM.ShowPopUP("YES");

            // Close the Popup by Clicking Cancel

            // Get an instance of the ViewModel that the main ViewModel is using
            // for the Popup
            PopUpViewModel PopUpVM = (PopUpViewModel)VM.PopUP.DataContext;
            // Pass that to the Popups Set-up Command
            PopUpVM.SetPopUp(VM.PopUP);
            // Click the Cancel button
            PopUpVM.CancelButton(null);

            // Get the resut of the Popup
            string result = VM.SelectedPopUpValueProperty;

            // We passed Yes as the Default and we clicked the Cancel button 
            // So the expected result is "Yes - Cancel"
            Assert.AreEqual(result, "Yes - Cancel", true);
        }

        // If you run the test below, run use Ctrl+F5
        // (Start Without Debugging)

        //[TestMethod]
        //public void DoMathTestBad()
        //{
        //    // Create an instanace of the ViewModel
        //    MainViewModel VM = new MainViewModel();

        //    // Set the values
        //    VM.Value1Property = "100";
        //    VM.Value2Property = "200";

        //    // Perform calculation
        //    VM.DoMath(null);

        //    // We expect this test to fail
        //    Assert.AreEqual(VM.MathResultProperty, "99", true);
        //}
    }
}

Running the Tests

You run the tests by running the Silverlight Unit Test Application that you just created.

In the website project, right click on the test page that was created when you created the Silverlight Unit Test Application project, and set it as the start page. This is also how you switch between viewing the test page, and viewing the normal application. When you want to view the normal application, set it's page as the start page.

Hit Ctrl+F5 (Start Without Debugging) to run the tests. If you just use F5 (Run With Debugging), the application will stop if a test fails. You may need debugging if you are actually debugging your tests, so use what is appropriate.

When you run the Test project, you will see a box that appears with a 5 second count down timer that also allows you to enter a tag to run only some of the tests.

The tests will run and you will see the output.

What's Wrong With Code-Behind Code?

There is nothing wrong with code-behind code, I have been writing it for over a decade. However, View Model Style is concerned with creating applications with Designers who do not want to touch code.

If I used standard code-behind, I would be in a situation where, even changing a drop down to a list box would require a code change. By not putting code in the code-behind, the Designer can make radical re-designs without requiring code changes.

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)

Share

About the Author

defwebserver
Software Developer (Senior) http://ADefWebserver.com
United States United States
Michael Washington is a Microsoft MVP. He is a ASP.NET and
C# programmer.
He is the founder of
LightSwitchHelpWebsite.com

He has a son, Zachary and resides in Los Angeles with his wife Valerie.

He is the Author of:
Follow on   Twitter

Comments and Discussions

 
Question[My vote of 1] Misinformation - my vote of 1 PinmemberAustin Harris25-Jul-12 12:21 
GeneralRe: [My vote of 1] Misinformation - my vote of 1 Pinmemberdefwebserver25-Jul-12 12:53 
QuestionThank you PinmemberMember 859903921-Feb-12 18:00 
AnswerRe: Thank you Pinmemberdefwebserver21-Feb-12 18:40 
GeneralMy vote of 5 PinmemberEric Xue (brokensnow)5-Sep-10 11:52 
GeneralRe: My vote of 5 Pinmemberdefwebserver21-Feb-12 18:41 
GeneralVM to V dependency Pinmemberk.shirgir@orbisglobal.com.au26-May-10 20:33 
GeneralRe: VM to V dependency Pinmemberdefwebserver27-May-10 2:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 6 May 2010
Article Copyright 2010 by defwebserver
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid