Mobile Zone is brought to you in partnership with:

Rabeb is a fresh graduate computer engineer. She specializes in User Experience Technologies including Windows Phone 7 and Windows 8, in addition to C# and .NET Technologies. She was selected for the Microsoft reality show Career Factor as Windows Phone 7 Finalist .She is passionate about new technologies . She is an avid proponent of social media , enjoy blogging http://rabeb.wordpress.com and tweeting @Rabeb_Othmani Rabeb is a DZone MVB and is not an employee of DZone and has posted 7 posts at DZone. You can read more from them at their website. View Full User Profile

Unit Testing Your Windows Phone Mango App

03.19.2012
| 3797 views |
  • submit to reddit

Making apps is good, but making apps that work perfectly is better Winking smile 

In order to make sure that your app works fine you may want to test your code .

So let’s take a walk through Mango Unit Testing Framework.

First thing you need to know is that we are using Silverlight Unit Test Framework by Jeff Wilcox who recently updated the Silverlight Unit Test framework Binaries to be compatible with Mango.

You can grab the new assemblies from here.

Next you should have something to test …right ? Smile with tongue out 

Nothing complicated, we will work with the famous “ Hello Mango” sample.

In Visual Studio : File—> New project –> Silverlight for Windows Phone

Choose Windows Phone application and name it “ Hello Mango” . Since we are working with Mango, don’t forget to choose the Windows Phone 7.1 version Winking smile 

new project

 

 

We will change the application title to “ Hello Mango” , the page title to “ Unit Test” and we will add a textblock containing “ Hello Mango” :

    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
                <TextBlock x:Name="ApplicationTitle" Text="Hello Mango" Style="{StaticResource PhoneTextNormalStyle}"/>
                <TextBlock x:Name="PageTitle" Text="Unit Test" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
     
            <!–ContentPanel – place additional content here–>
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <TextBlock Height="146" HorizontalAlignment="Left" Margin="92,137,0,0" x:Name="txt" x:FieldModifier="public" Text="Hello Mango" VerticalAlignment="Top" Width="277" />
            </Grid>

Now that you have your sample app ready , run it to make sure that everything is fine and then we will move to the test project.

the test project is also a Windows phone application called “ HelloMangoTest”

test

 

 

We need to convert the windows phone application to a Unit Test project:

Download the assemblies as describe it below , unzip the file and make sure they are unlocked so you can use them on your local machine.

Add the two assemblies to the “ HelloMangoTest” project :

addReference

                                  ref

 

You have also to delete the MainPage.xaml  because Silverlight Unit Test Framework has a TestPage.

delete

 

One more thing to do :

In the App.xaml.cs, add

    this.RootVisual = UnitTestSystem.CreateTestPage();

  , you will have this code:

    public App()
            {
                
                UnhandledException += Application_UnhandledException;
                InitializeComponent();
                this.RootVisual = UnitTestSystem.CreateTestPage();

Set the test project as a Startup Project and now you are ready to write the tests.

add a new class and name it “ test” :

newClasstestt

 

In this test we want to make sure that when the MainPage is initialized , there is indeed a textBlock ( we called it “ txt” ) . Here is the code :

using Microsoft.Silverlight.Testing;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using HelloMango;
 
 
namespace HelloMangoTest
{
    [TestClass]
    public class test
    {
        [TestMethod]
        public void pass()
        {
            MainPage page = new MainPage();
            Assert.IsTrue(page.txt != null); 

When you run the project, you will get this first screen :

first screen

And I have no idea what this screen is Smile with tongue out   I need to ask Jeff Wilcox about it.

Surprisingly it’s not working Confused smile So I did a small search and found out that I shouldn’t delete the MainPage and change the Rootvisual in the App.xaml.cs.

Instead I put this code in my MainPage.xaml.cs in the test project :

     
    using Microsoft.Silverlight.Testing;
     
    namespace HelloMangoTest1
    {
        public partial class MainPage : PhoneApplicationPage
        {
            
            public MainPage()
            {
                InitializeComponent();
                const bool runUnitTests = true;
                if (runUnitTests)
                {
                    Content = UnitTestSystem.CreateTestPage();
                    IMobileTestPage imtp = Content as IMobileTestPage;
                    if (imtp != null) { BackKeyPress += (x, xe) => xe.Cancel = imtp.NavigateBack(); }
                }
            }
        }
    }

If the Boolean is true, the unit test become the content of the Mainpage.

Let’s run again …Wohoo! It’s working not only on the emulator but also  on a real device :

150_0168150_0170

The list of Test classes under your project will be shown in first page. You can go into each class to see all test methods by clicking on the name of class.

In our case you will see Test and pass. Click on the method’s name ( pass) and you will get the test information , the result is “ passed”.

That was an introduction of how to use Silverlight Unit Test Framework with Mango Smile

 

Published at DZone with permission of Rabeb Othmani, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)