MVVM Using WPF - Part 2

Creating View-Model Unit Tests using NUnit

In the previous post we created a basic MVVM WPF application; in this post we will add a Unit Tests project to the same solution and implement an Unit Test using NUnit.

Your solution explorer should look like this at the end of this tutorial:

Get NUnit Installed

Download the latest installer (This will add the NUnit libraries to the GAC and install the third separate Unit test runner). You can also add it using Nuget if you have that installed.

Some NUnit attributes and to assertions take note of:

• TestFixture (This describes a class instance. You can have multiple instances of a test class executed by referencing them above the class)
• TestCase (This will test a specific piece of logic)
• Equality Asserts (Checks whether the result should match or not )

* I am not using Mock objects in this tutorial but might want to also look into a blog on it here.

Create the Unit Test Project

• Create a new Class Library project and name it with the same name as the WPF project with trailing .Tests (E.g. MVVMExample.Tests). This naming convention is standard for all unit test projects.
• Reference the .NET nunit.framework assembly for the new Class Library
• Rename the Class1.cs to StudentTest.cs define the following class:

 

• Create a Unit test that executes multiple times with different values:

 

• Start NUnit and load the Test assembly (MVVMExample.Tests.dll) from the project bin folder.
• Right Click and select Run (All the tests should pass in this example):

Code for this post is available from GitHub.

MVVM Using WPF - Part 1

Pattern Introduction & Basic Application

The MVVM (Model View View-Model) architectural pattern is available for many modern UI development platforms (E.g. XAML and HTML – HTML however requires data binding libraries E.g. AngularJS or KnockoutJS while XAML supports this natively).  This tutorial will focus on XAML as the view markup language in the MVVM pattern without any framework or external libraries.

XAML provides built in separation of page logic and UI markup with the use of the code behind file but this is still tightly coupled together. Using a View-Model you are able to abstract the business logic but still do it with view friendly objects. The key here is the bindings and commands as they are the glue between your view markup and the view-model.

Not only is this approach complimentary to SoC principle and Object-oriented design but another benefit is that unit test (Discussed in Part 2) done on the View-Model includes the presentation tier without being affected by the view markup itself. This layer also provides decent opportunities for integration and acceptance test automation.

At the center of this pattern lies the View-Model layer. This layer exposes the business logic in a view/page specific context. This layer consists mainly out of two types of objects:

1. Model Objects, these can be reused between multiple View-Models that represent entities or groupings in your application. Typically these will be your Object Oriented Objects that supports view bindings.    
2. View-Model, this is wrapper class that facilitates interaction with the Model and View by exposing the model business logic in a view abstracted layer using the command pattern and the Model Objects. Typically each class will represent a specific page or component in the view.

WPF MVVM - Basic Application

This tutorial will show you how to create a basic MVVM WPF student info application. The final artifacts required by this solution will look as follows:

• Start by creating you view markup without defining the bindings yet. See the bullet-point for markup examples with bindings.

• Create a new Class Library for your View-Model layer (MVVMExample.ViewModels):

•  Creating a new View-Model object class (Student.cs)

 

As these objects need to be bound to the view it is important use the correct implementation of the INotifyPropertyChanged so that changes are effectively updated to all affected view bindings.

Create a few basic properties and actions for the student model object. You will see that the DelegateCommand cannot be resolved, we will add that next.

 

• We are going to use the command pattern to trigger actions. This will be done using a new ICommand instance. For that we are going to create a custom DelegateCommand class. 

• Creating your View-Model 
  

This wrapper class needs to expose the View-Model objects and command implementations to interact with them. This will become the data context of the view page it is designed for. There are a couple of MVVM frameworks that can facilitate MVVM tasks (E.g. Prsim, MVVM Light Toolkit), MVVM Foundation, Core MVVM). You can see a comparison here).

Next we need to define the command/s we will be using from the view. In this case we want to be able save the student data. We will use the DelegateCommand we created earlier with override functions. You can see they were passed in the previous snippet as closures (They execute in the parent object even though they are declared as part of the child).

• Now to visit your original view markup and add the bindings and Data Context of the view to the newly created View-Model.

In MVVM Using WPF – Part 2 we will add some Unit Tests using NUnit.

Code for this post is available from GitHub.

I found the following examples very useful during the creation of this blog post, thanks guys.

• MVVM (Model View View-Model) Simplified
• MVVM Pattern Made Simple
• A Ruby on Rails MVVM Windows Store Application example by Frank