Test Driven Development with ASP.Net MVC (Part 3)

The series in full:

In Part 2 we looked the feature we are going to implement, along with the behaviour it needs to exhibit. In this post we will quickly cover the architecture of the application, and then get on with the implementation.

System Architecture

A lot of the examples of using TDD with MVC are fairly simple and straightforward.  Whilst this keeps the implementation simple, I though that my example should try to reflect the real world a bit more, without going overboard.  In order to really show the outside in approach with vertical slices, I need more layers to slice through.

The “Crazy Events” application 

The application will have the following components:

  • UI  Layer- ASP.Net MVC3
  • Service Layer – For the example this will be a simple in-process service layer to hold the business logic.  It could just as easily be WCF Web Services.
  • Repository Layer – To encapsulate the data access.  For the example they provide access to in-memory data, but would more likely be talking to a database, maybe with a suitable ORM.

So, from the layers we should be able to implement test first by testing the Controller action, the services and an relevant repository methods that are appropriate for testing.  We could also test the MVC routes, but I will leave that for another post.

The starting point

I am going to start with an almost empty solution with just two projects, an empty MVC3 Project, and an empty test project.  I am going to use MSTest, but any Unit Testing framework could be used. You may already have a application template in place, with all the projects and dependencies for the layers and such already created. That’s fine too. I just want to show that TDD doesn’t have to be scary, even with an empty solution.

The first test…

Ok, so here we are, ready to start implementing the event search functionality.  Writing the first test can be hard, where do you start? I always try to start with the most simple test that will make progress towards the goal.

MVC offers us some help.  The URL routing in MVC can be very helpful in deciding where to go, as it too describes the behaviour of the web site.  If we were to navigate to the event search page, we may well navigate to http://www.crazyevents.com/event/search. This would translate to a Controller called Event with an Action called Search.  This looks like a good place to start.

The most straight forward first test would be to test that the search action on the event controller returns the default view as per the MVC conventions. Lets write the test:


    public class WhenSearchingEventControllerShould



        public void DisplayTheDefaultSearchEventView()



            var eventController = new EventController();


            var result = (ViewResult)eventController.Search();





It is possible to tell from the above code that this test would fail. It is safe to say it will not even compile. Lets take this as the first “red” stage.

At this stage I just want to talk for a second about ReSharper. For those not familiar ReSharper is a Developer productivity tool that removes a lot of friction from working within Visual Studio. It supports lots of quick navigation and re factoring options, and generally just makes the whole experience a little more enjoyable. There are similar tools available, and it is possible to work without it.

The red text is ReSharper’s way of saying that something is missing. In this case it is suggesting that the EventController and Search method are missing, so lets create them.

Firstly I create the EventController. There a few ways to do this. I tend to use the ReSharper Action to create the class, which will create the class in the same file. It doesn’t matter for now that the controller is in the wrong place, it can be moved easily later. If you prefer you could create the file in the correct place (in the Controller folder of the MVC Project) and add the necessary Using statement. Remember we need to add just enough code to get the test up and running, so the next step is to add the Search method on the Controller. The file can be moved to its rightful home if you haven’t done so already.

using System.Web.Mvc;

namespace CrazyEvents.Controllers


    public class EventController : Controller


        public ViewResult Search()


            return View();




There is only one last thing to sort out, we are missing a view. So I create one now. It will be very simple, and will not be Strongly Types at this stage, as we do not yet know what Model it will use.


    ViewBag.Title = “Search”;



I know, not much to look at yet, but remember this is just one of several steps to get us up and running from a standing start. A quick run of the test shows us we are on the right track. Notice ow the test class and test method name make a readable behavioural statement.

Unit Test Session

One down, many to go…

So we now have a functioning, albeit a fairly useless MVC application. We can always run it, just to make sure everything is okay. A quick addition to the route is required to register our new functionality. I will add it to the ‘root’ route for now, so the search page loads by default. It can always be changed later.

routes.MapRoute(“Root”, string.Empty, new { controller = “Event”, action = “Search” });

Running the app will result in a fairly uninspiring page. In the next post I will continue to build up the functionality one test at a time.

The series in full:


5 Responses to Test Driven Development with ASP.Net MVC (Part 3)

  1. Pingback: Test Driven Development with ASP.Net MVC (Part 1) « James Heppinstall: On Development

  2. Pingback: Test Driven Development with ASP.Net MVC (Part 2) « James Heppinstall: On Development

  3. Pablo Ferro says:

    Thanks! Keep it coming!

  4. Pingback: Test Driven Development with ASP.Net MVC (Part 4) « James Heppinstall: On Development

  5. Pingback: Test Driven Development with ASP.Net MVC (Part 5) « James Heppinstall: On Development

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: