Posts Tagged ‘Silverlight’

Silverlight Functional Testing with WebAii Framework

Summary

In this article you’ll get a glimpse of how the UltiStudio development team is tackleing the functionality tests for the product. If you are a Silverlight developer or are familiar with Silverlight you know that testing Silverlight applications for their functionality is not a trial task. This article will expose you to a young framework developed by the Art of Test people. Its name is WebAii.

Requirements

You should have the latest Visual Studio installed. MbUnit and TestDriven.Net should also be installed. Additionally, you should know how to create a Test Project and how to add Test Fixtures to it.

Who will benefit from this Article?

Anyone that works with Silverlight and is desperately looking for a way of functionally tests their applications.

WebAii, Here we go! ( with Super Mario voice :p )

This framework is currently Beta for Silverlight applications, young as I said earlier, therefore if you are planning to use it be patient and hang on. Let’s jump right into the tests. You will need the following files, download them to a preferred location and be ready to add their assemblies to your test project in Visual Studio.

• [WebAii 2009 Framework|

• MbUnit

Once you have located the DLLs and assuming that you have Visual Studio, MbUnit and TestDrive.NET installed, go ahead and create a "MbUnit Test Project" in Visual Studio. Next, add a new TextFixture to your project and you are now ready to write some tests.

Setting up the Test Fixture

Once we've added the Fixture we should have something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

namespace Editor.FunctionalTests

{

class SilverlightFunctionalTests

{

}

}

Now, add the MbUnit attribute [TestFixture] to the class, (don’t forget to make it public). Additionally, add a SetUp method. The code should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using MbUnit.Framework;

namespace Editor.FunctionalTests

{

[TestFixture]

public class SilverlightFunctionalTests

{

[TestFixtureSetUp]

public void SetUp()

{

}

}

}

Great! that was easy and I’m sure most of you are did this even before you read this. Next, we will add the WebAii to the Fixture. For the purpose of this example I will use a random URL, make sure you write yours correctly and that the URL you point to has the Silverlight application you are trying to test. I have added most of the WebAii set up within the SetUp method I just created, however feel free to put this code where you think it’s better. Go ahead and add the following code and then we’ll go over it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
using MbUnit.Framework;

using ArtOfTest.WebAii.Core;

using ArtOfTest.WebAii.TestTemplates;

using ArtOfTest.WebAii.Silverlight;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

namespace Editor.FunctionalTests

{

[TestFixture]

public class SilverlightFunctionalTests : BaseTest

{

private SilverlightApp _app;

[TestFixtureSetUp]

public void SetUp()

{

Settings settings = GetSettings();

settings.DefaultBrowser = BrowserType.InternetExplorer;

settings.EnableSilverlight = true;

Initialize(settings);

Manager.LaunchNewBrowser();

ActiveBrowser.NavigateTo("URL");

SilverlightAppsList apps = ActiveBrowser.SilverlightApps();

_app = apps.ElementAt(0);

_app.Connect();

}

}

}

public class SilverlightFunctionalTests : BaseTest

private SilverlightApp _app;

…

Settings settings = GetSettings();

settings.DefaultBrowser = BrowserType.InternetExplorer;

settings.EnableSilverlight = true;

Initialize(settings);

…

The first thing you’ll notice is that I’ve added WebAii objects (Green) . Most of this is set up and you will have to copy this code as is. Here, I’ve added inheritance to the BaseTest class, created a SilverlightApp object and initialized the settings by setting the a default browser and enabling silverlight.

Manager.LaunchNewBrowser();

ActiveBrowser.NavigateTo(“URL”);

SilverlightAppsList apps = ActiveBrowser.SilverlightApps();

_app = apps.ElementAt(0);

_app.Connect();

The next thing I wrote (Orange) will launch the browser we set in the settings and it will make it navigate to the URL that we have specified. Then the code will tell the browser to find all the Silverlight applications in the page and return a SilverlightAppsList (list of Silverlight applications). For the purpose of this example we only have one application in the page, hence why I get the element at position 0 within the list. Finally, I set the global SilverlightApp and immediately after, I called Connect() on the SilverlightApp.

At this point we are ready to start writing tests.

Writing Tests, finally!

Here is the fun stuff. I will show you a test that does a simple thing, it will click on the Silverlight application. In this section of this article I will try to give you a very broad understanding of what you should do in order to write your own tests. The framework does offer several methods that will allow you to be creative with your tests. I’ll point some of the most used ones and then I’ll give you a link for you to digest the rest.

To the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
[Test]

public void ClickingSilverlightApplication_ShouldClickTheApplication_Test()

{

//Preconditions

FrameworkElement control = _app.FindName("PopupBorder1");

control.Wait.ForVisible();

//Actions

control.User.Click();

//Postconditions

Assert.isTrue(true);

}

//Preconditions

FrameworkElement control = _app.FindName(“PopupBorder1″);

control.Wait.ForVisible();

Fair enough, we have our precious test. It looks easy too\! As you can see, it works exactly as any unit test framework would. Allow me to explain it first. Initially (Green), I use the WebAii framework FindName method. There are a couple of things to say about this. FindName is a method that will look within the XAML of your silverlight application and it will try to find a XAML node with the Name attribute equal to the string you are passing to the method. The other thing I should say is that you can also call FindName like this: FindName<T>(<string>) where T is a specific type; I will show an example later on.

Keep in mind you have to know the Name attribute to find objects in the silverlight application. If the object is not found your test will time out and fail, so you will know. If it doesn’t then you’ll end up with a FrameworkElement or T if you used FindName<T>(<string>). As in the previous code, call Wait.ForVisible(). This will allow our test and the silverlight application to wait for each other.

control.User.Click();

The next piece of code (Orange) used the User property to call the action: Click(), simply to click on the found object. In this Actions section of the test you will usually be calling .User.<Something>, there are a lot of things that WebAii can do to mock the user functionality, here are some included on the version released at the moment I’m writing this article:

1
2
3
4
5
6
7
8
9
10
11
control.User.DragTo(...)

control.User.HoverOver(...)

control.User.KeyDown(...)

control.User.KeyPress(...)

control.User.MouseEnter(...)

control.User.TypeText(...)

You can get all of them by using the IntelliSense feature in Visual Studio. Their documentation is pretty good too.

As promised, here is the example of the FindName<T> overload.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
[Test]

public void FindEllipse_FindEllipseInApplication_Test()

{

//Preconditions

Ellipse control = app.FindName&lt;Ellipse&gt;("SomeEllipse");

control.Wait.ForVisible();

//Actions

//someaction

//Postconditions

//Asserts

}

Word of advise: The returned Ellipse is not a Silverlight control, is a WebAii control which means they are different types of objects. This means you will need to be creative in order to assert the different properties of the object.

Conclusion

By now you should have a broad understanding of how the WebAii framework works for Silverlight and what it’s needed to create tests based on this framework. Additionally, you should be aware that there are many options when it comes to mocking the User behavior and that in order to find objects in your application and interact with them you will need their XAML Name attribute. If you have any questions or get stuck anywhere while testing with WebAii don’t hesitate to submit a comment or write me an email to my Ultimate Email

If you want to learn more about WebAii and Silverlight head over to WebAii and Silverlight Documentation

Posted: August 10th, 2009
Categories: Programming, Technology
Tags: , , , , , ,
Comments: No Comments.

Silverlight Testing with Microsoft Silverlight Testing Framework

Summary

This page intents to explain in simple non-technical words how some of the unit testing, specifically testing for the designer portion of the project, is being done. This page contains examples of some unit tests and an explanation of their behavior.

1. Getting Familiar with Silverlight

If you are familiar with Silverlight already feel free to move on to section 2 of this page

For those of you that are not familiar with the Silverlight way of things, allow me to mention a couple of concepts to get you on the right track and to ease your understanding of the unit tests to follow.

Silverlight, in a nutshell, it’s driven by UserControls. These are Xaml files with code behind just like many other technologies from Microsoft, in Silverlight they are “rendered” when they are called in your browser.

For example:

1
2
3
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

This Xaml, which represents a UserControl, will display a TextBlock with the Text content of Hello World.

These UserControls as you would expect, can be constructed in your code behind to dynamically add more content to it. For example:

1
2
3
TextBlock textBlock = new TextBlock();
textBlock.Text = "Hello World";
LayoutRoot.Children.Add(textBlock);

To finalize this short Silverlight review, let me just say that obviously you can add as many other classes to a Silverlight project allowing the use of all of the wonders of Object Oriented programming, however only the UserControls will be the ones seen in the browser.

That’s it!

2. Lets jump right to it…

A simple file to test, and for the purpose of this example, it’s Editor.xaml file. This file is divided in 4 sections, when you open the Editor in a browser you would see the following:

editor screenshot

As you can see there are 4 sections ( Menu, Tool Bar, Designer, Status Bar ). In Silverlight terms these sections are called Borders (I said I wouldn’t get technical, I know). The simplest test that I can think of, is to test if the rendered Editor Xaml page has 4 sections. Here is what the test would look like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[TestMethod]
[Asynchronous]
public void XAML_EditorContainsFourRowsTest()
{
//Preconditions
int rowDefinitions = 4;

//Actions
TestPanel.Children.Add(_page);

//Postconditions
EnqueueCallback( (Action)(() =&gt; Assert.AreEqual(_page.LayoutRoot.RowDefinitions.Count, rowDefinitions )));
EnqueueTestComplete();
}

The first thing you’ll notice is that this test looks similar to what a test would look in any other framework, i.e. MbUnit, etc.. The next thing you’ll notice is the [Asynchronous] tag. This is because Silverlight Unit Test Framework has support of asynchronous calls that are used when UserControls have data driven service calls. The last thing you’ll notice is that I’ve divided the method in 3 sections. I do it because it looks organized and I think is good practice. Preconditions includes initialization of variables and objects later used in the postconditions assertions against data gathered in the actions section. Actions includes calls to the object in test, in the example “_page” was added to the TestPanel UserControl. Postconditions includes assertions. Calls to EnqueueCallback and EnqueueTestComplete are part of the Asynchronous feature.

If this test wasn’t Asynchronous it would look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
[TestMethod]

public void XAML_EditorContainsFourRowsTest()

{

//Preconditions

int rowDefinitions = 4;

//Actions

TestPanel.Children.Add(_page);

//Postconditions

Assert.AreEqual(_page.LayoutRoot.RowDefinitions.Count, rowDefinitions );

}

Now, lets look at a more involved test. This next test is a test to a method in the AccordionToolBox UserControl.

The Accordion ToolBox currently looks like this:

accordion toolbox screenshot

Simply has an Accordion Silverlight control with some AccordionItem Silverlight controls and inside of each AccordionItem there is a StackPanel Silverlight control with some Buttons in it. In the UltiStudio world this are the equivalents:

  • AccordionItem EQUALS Section
  • Button inside StackPanel of AccordionItem EQUALS a Section Item

Here is a test to make sure that the code creating a section actually creates a section behind the scenes or dynamically.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
[TestMethod]

public void InitializeSectionContent_Test()

{

//Preconditions

ToolBoxSection toolBoxSection = new ToolBoxSection("General", 1);

ToolBoxItem item = new ToolBoxItem("1 Column Section", 1, 1);

toolBoxSection.Items = new Collection();

toolBoxSection.Items.Add(item);

int expectedSectionSize = 1;

//Actions

AccordionItem accordionItem = _accordionToolBox.InitializeSectionContent(toolBoxSection);

StackPanel accordionContent = accordionItem.Content as StackPanel;

//Postconditions

Assert.IsNotNull(accordionItem);

Assert.AreEqual(accordionContent.Children.Count, expectedSectionSize);

}

Assuming you read the previous test, you’ll know how this test is divided. The test is simple hardcoding a section with an item and passing it to the InitializeSectionContent method in the AccordionToolBox UserControl, then the test verifies that the method created an AccordionItem with the section properties which include the item inside its StackPanel.

As per the comment I received from Robert, the _accordionToolBox object is variable that I initialized in the setup portion of the fixture. It would look something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
[TestClass]

public class AccordionToolBoxTests : SilverlightTest

{

private AccordionToolBox _accordionToolBox;

private Mock _mockFactory;

List _sections;

[TestInitialize]

public void SetUp()

{

_mockFactory = new Mock(MockBehavior.Strict);

_sections = new List();

_accordionToolBox = new AccordionToolBox(_mockFactory.Object);

TestPanel.Children.Add(_accordionToolBox);

}

Don’t mind the Mock if you are not familiar with it, Mock falls outside the scope of this article.

For now, I will leave this document as is, and if you have questions and suggestion please let me know, I will keep adding to it along with our development.

Posted: August 10th, 2009
Categories: Programming, Technology
Tags: , , , , , , ,
Comments: No Comments.
Get Adobe Flash playerPlugin by wpburn.com wordpress themes