Mango Baby Steps : Unit Testing your app

Making apps is good , 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” :

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

Code Snippet
  1. this.RootVisual = UnitTestSystem.CreateTestPage();

  , you will have this code:

Code Snippet
  1. public App()
  2.         {
  3.             
  4.             UnhandledException += Application_UnhandledException;
  5.             InitializeComponent();
  6.             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 :

Code Snippet
  1. using Microsoft.Silverlight.Testing;
  2. using Microsoft.VisualStudio.TestTools.UnitTesting;
  3. using HelloMango;
  4.  
  5.  
  6. namespace HelloMangoTest
  7. {
  8.     [TestClass]
  9.     public class test
  10.     {
  11.         [TestMethod]
  12.         public void pass()
  13.         {
  14.             MainPage page = new MainPage();
  15.             Assert.IsTrue(page.txt != null);
  16.         }
  17.         
  18.  
  19.     }
  20. }

 

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 :

Code Snippet
  1.  
  2. using Microsoft.Silverlight.Testing;
  3.  
  4. namespace HelloMangoTest1
  5. {
  6.     public partial class MainPage : PhoneApplicationPage
  7.     {
  8.         
  9.         public MainPage()
  10.         {
  11.             InitializeComponent();
  12.             const bool runUnitTests = true;
  13.             if (runUnitTests)
  14.             {
  15.                 Content = UnitTestSystem.CreateTestPage();
  16.                 IMobileTestPage imtp = Content as IMobileTestPage;
  17.                 if (imtp != null) { BackKeyPress += (x, xe) => xe.Cancel = imtp.NavigateBack(); }
  18.             }
  19.         }
  20.     }
  21. }

 

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

Advertisements

About rabeb

Unapologetic Muslim, Tunisian,Arab, African, Woman-In-Tech, Engineer, Developer advocate for Nexmo, Feminist, Traveller, Blogger, Woman. Proud of all of the above.

Posted on August 14, 2011, in Mango, Unit Test. Bookmark the permalink. 5 Comments.

  1. Pretty great post. I simply stumbled upon your weblog and wished
    to say that I have really loved browsing your blog posts.
    In any case I’ll be subscribing in your feed and I hope you write again soon!

  2. Great post. I am dealing with a few of these issues as well.

    .

  1. Pingback: Mango Baby Steps: Unit Testing your WP7 app

  2. Pingback: Mango Baby Steps: Unit Testing your WP7 app – www.nalli.net

  3. Pingback: Unit Testing für Apps « Pocketmobile's Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: