Coding Dojo XP Part 2: TDD & BDD with Nunit, Moq, WatiN, SpecFlow, and MVC 2.0

This post is a continuation of a 3 part series about my first coding dojo experience and what we created. I’m going to assume you’ve read part 1 of this series. Otherwise, you might be lost.

With that said, let me make a correction here to part 1 :)

The feature scenario should’ve been this:

Scenario: Sign Guestbook
    Given I am on the sign guestbook page
    When I have filled out all required information
    When I press sign
    Then I should be redirected to the full list of guestbook entries and see a success message

and not this:

Scenario: Sign Guestbook
    Given I have filled out all required information
    When I press sign
    Then I should be redirected to the full list of guestbook entries and see a success message

This means our SignGuestbookDefinitions changed to this:

    [Binding]
    public class SignGuestBookDefinitions
    {
        [Given(@"I am on the sign guestbook page")]
        public void GivenIAmOnTheSignGuestbookPage()
        {
            var browser = new IE();
            browser.GoTo("http://localhost:2345/guestbook/sign");
            Assert.That(browser.Title, Is.EqualTo("Sign Guestbook"));
        }

        [When(@"I have filled out all required information")]
        public void GivenIHaveFilledOutAllRequiredInformation()
        {
            ScenarioContext.Current.Pending();
        }

        [When(@"I press sign")]
        public void WhenIPressSign()
        {
            ScenarioContext.Current.Pending();
        }

        [Then(@"I should be redirected to the full list of guestbook entries and see a success message")]
        public void ThenIShouldBeRedirectedToTheFullListOfGuestbookEntriesAndSeeASuccessMessage()
        {
            ScenarioContext.Current.Pending();
        }
    }

Basically, I missed an important step that makes more sense now. Sorry about that!

Let’s go ahead and dig in. So last time I said I’d pick up with the unit tests necessary to get the next step definition working in our SpecFlow feature. So that’s where we are…

First, add a new class library project called Dojo.UnitTests and add a reference to moq, nunit.framework, and the Dojo.UI.

Now we’ll create a new file called GuestbookControllerTests. Basically we’re going to test our controller because that’s where we’re going to throw our view model to our view.

Second, write our test. Here’s what our first controller test looks like:

[TestFixture]
public class GuestbookControllerTests
{
    [Test]
    public void Sign_viewdata_model_should_return_SignGuestbookView()
    {
        var guestbookController = new GuestbookController();
        var result = guestbookController.Sign();

        Assert.That(result.ViewData.Model, Is.TypeOf(typeof(SignGuestbookView)));
    }
}

Now, to make it pass. We need to create a new class called SignGuestbookView, which we’ll place in our Dojo.UI project under the Models folder. For the time being, it doesn’t have any properties. We want to do the bare minimum to get the test to pass.

Run the test and it will fail stating that the value was actually null. So, we have to pass in this new class to our view. To do that, we edit the GuestbookController in our Dojo.UI project. It should now look like this:

        public ViewResult Sign()
        {
            return View(new SignGuestbookView());
        }

Okay, now we’re getting somewhere. We have all green now. However, we don’t really have anything yet. We’re trying to meet the “I have filled out all required information” step definition, so what is all required information? Well, in this case, it’s Name, Email, Comments and all are required. So…let’s keep going.

Let’s go ahead and add our properties to our SignGuestbookView so it’ll look like this:

    public class SignGuestbookView
    {
        public string Name { get; set; }
        public string Email { get; set; }
        public string Comments { get; set; }
    }

I’m not going to write a test to verify that the get set works for each one. Okay, so let’s create the view. I’ll use the MVC 2.0 syntax instead of my usual fluentHTML. So, here it is:

<%=Html.ValidationSummary(false, "Important Message") %>
<% using (Html.BeginForm())
   {%>
   <fieldset>
    <legend>Sign Guestbook</legend>
    <p><%=Html.LabelFor(f=>f.Name) %><br /><%=Html.TextBoxFor(f=>f.Name) %></p>
    <p><%=Html.LabelFor(f=>f.Email) %><br /><%=Html.TextBoxFor(f => f.Email)%></p>
    <p><%=Html.LabelFor(f=>f.Comments) %><br /><%=Html.TextAreaFor(f=>f.Comments) %></p>
    <input type="submit" value="Sign" />
   </fieldset>
<%} %>

I don’t think this needs any explanation, but basically it uses the model, SignGuestbookView, passed in from the controller. The f in the lambda expression represents the model. I’ve also seen it model=>model.Name, etc, but I like the f because it’s short and to me represents field. When we hit play and browse to guestbook/sign now, we get this view:

So now we can go back to our feature step definitions (SignGuestbookDefinitions.cs in the Dojo.Features project) and play with some more WatiN.

So back in our SignGuestbookDefinitions class, in the GivenIHaveFilledOutAllRequiredInformation step, we’re going to fill in our textboxes. It’s pretty easy, here it is:

[When(@"I have filled out all required information")]
public void GivenIHaveFilledOutAllRequiredInformation()
{
    _browser.TextField(Find.ByName("Name")).TypeText("John Doe");
    _browser.TextField(Find.ByName("Email")).TypeText("john@email.com");
    _browser.TextField(Find.ByName("Comments")).TypeText("John wuz here.");
}

That’s it! I love WatiN, it’s really cool for browser automation. OH! I should mention, I made the browser from the first step a private field. You’ll also notice that you don’t have to GoTo a URL again because the step definitions cascade down as I mentioned in the first post.

Okay, we have our next step complete. Now let’s implement the WhenIPressSign.

        [When(@"I press sign")]
        public void WhenIPressSign()
        {
            _browser.Button(Find.ByValue("Sign")).Click();
        }

Done! Next please! Okay, now we’re going to get into some fun stuff. So we need to redirect to a full list of guestbook entries and show a success message. So let’s handle the redirect first. Let’s write the test. I’m going to be using the MvcContrib.TestHelper for these tests. Here it is:

        [Test]
        public void Sign_should_redirect_when_no_model_errors_present()
        {
            var result = _controller.Sign(new SignGuestbookView());

            result.AssertActionRedirect().ToAction("Index");
        }

The AssertActionRedirect is part of the MvcContrib.TestHelper…VERY HANDY! Make sure to download the new version that is compatiable with MVC 2.0. So when we run this, it fails because we’re not redirecting currently, so let’s fix that problem.

        [HttpPost]
        public RedirectToRouteResult Sign(SignGuestbookView model)
        {
            return RedirectToAction("Index");
        }

Okay, run the test again and we get green! Now what? Well, let’s go check our step and see what we need to do next. We should show a success message and a full list of entries. Let’s take care of the success message now. Here’s the new test:

[Test]
public void Sign_should_redirect_when_no_model_errors_present_and_pass_a_success_flag()
{
    var result = _controller.Sign(new SignGuestbookView());

    result.AssertActionRedirect()
        .WithParameter("showSuccess", true)
        .ToAction("Index");
}

So, let’s implement this to work in the Sign(SignGuestbookView model) action:

        [HttpPost]
        public RedirectToRouteResult Sign(SignGuestbookView model)
        {
            return RedirectToAction("Index", new {showSuccess = true});
        }

Now we need to make a change to our Index action like this:

        public ActionResult Index(bool showSuccess)
        {
            if (showSuccess)
                ViewData["Success"] = "true";

            return View();
        }

Okay, let’s setup the display message in the Index view. This view just has this:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>View Guestbook</title>
</head>
<body>
    <div>
        <%=Html.DivSuccessMessage("Guestbook entry successfully added.") %>
    </div>
</body>
</html>

The DivSuccessMessage is a helper I wrote to check the ViewData[“Success”]. You can read more about my favorite extensions in an old post. Okay, I think we’re done with the success message. So, now we need to show a full list of guestbook entries. Well, I’m not sure how to test this one without assuming we have guestbook entries, so I’ll handle that with unit tests and in our step definition, we’re just going to make sure we’re on the right page. So, let’s go ahead and setup our final step definition and run those tests. They should all pass now. Here’s the final implementation:

[Then(@"I should be redirected to the full list of guestbook entries and see a success message")]
public void ThenIShouldBeRedirectedToTheFullListOfGuestbookEntriesAndSeeASuccessMessage()
{
    Assert.That(_browser.Title, Is.EqualTo("View Guestbook"));
    Assert.That(_browser.Div(Find.ByClass("success-message")).Text, Is.EqualTo("Guestbook entry successfully added."));
}

So this verifies that we’re on the right page and that our success message is displayed. You should see this:

I love seeing green! So, obviously we’re not done with everything required for our feature, but we’re close and have the basics all setup and configured. What’s nice is that we have built and tested the functionality and the application is ignorant of our actual implementation…because right now we don’t have any implementation. That’s a good thing. We should be able to build a whole guestbook app without ever actually knowing where we’re going to store the data. I think this is probably the safest way to develop because you know you’re not tying your application to a particular implmentation. Anyhow…let’s keep going.

First things first, we need to save our SignGuestbookView in the Sign action. Here’s our first test:

[Test]
public void Sign_should_save_and_redirect_when_no_model_errors_present()
{
    var result = _controller.Sign(new SignGuestbookView());
    _repository.Verify(rep=>rep.Save(new GuestbookEntry()));

    result.AssertActionRedirect().ToAction("Index");
}

I’m using moq to verify that a save method was called on our repository. Let’s make this pass. First we need a repository…should look like this:

    public interface IGuestbookRepository
    {
        void Save(GuestbookEntry model);
    }

Now we need the GuestbookEntry, which is our domain model representation of a guestbook entry.

    public class GuestbookEntry
    {
        public string Name { get; set; }
        public string Email { get; set; }
        public string Comments { get; set; }
    }

Now we need to define the repository in our test class like this:

private readonly Mock<IGuestbookRepository> _repository = new Mock<IGuestbookRepository>();

Okay, now we need to implement our controller action like so:

        public ActionResult Sign(SignGuestbookView model)
        {
            if (ViewData.ModelState.IsValid)
            {
                _repository.Save(model.CreateGuestbookEntry());
                return RedirectToAction("Index", new {showSuccess = true});
            }

            return View(model);
        }

Now we have to pass in our _repository in the controller’s constructor like this:

        private readonly IGuestbookRepository _repository;
        public GuestbookController(IGuestbookRepository repository)
        {
            _repository = repository;
        }

In order to finally get it to pass, I had to override the equals on the GuestbookEntry so moq could pick up the Save actually being called. So here are the tests for that implementation:

[TestFixture]
public class GuestBookEntryTests
{
    [Test]
    public void GuestbookEntry_should_equal_another_GuestbookEntry_if_email_addresses_match()
    {
        var entry = new GuestbookEntry();

        Assert.That(entry, Is.EqualTo(new GuestbookEntry()));
    }

    [Test]
    public void GuestbookEntry_should_not_equal_another_GuestbookEntry_if_email_addresses_do_not_match()
    {
        var entry = new GuestbookEntry();

        Assert.That(entry, Is.Not.EqualTo(new GuestbookEntry{Email = "donotmatch@email.com"}));
    }
}

Here’s the implementation:

        public override bool Equals(object obj)
        {
            var other = obj as GuestbookEntry;
            return other != null && other.Email == Email;
        }

Okay, so now all we need to do is display the guestbook entries. Well, here’s the test:

[Test]
public void Index_should_return_all_entries()
{
    _repository.Setup(rep => rep.GetAll()).Returns(new List<GuestbookEntry> {new GuestbookEntry()});
    var result = _controller.Index(false);

    Assert.That(result.AssertViewRendered().ViewData.Model, Is.TypeOf(typeof (List<GuestbookEntry>)));
    Assert.That(((IList<GuestbookEntry>)result.AssertViewRendered().ViewData.Model).Count, Is.EqualTo(1));
}

I’m using moq again here to GetAll from my repository and I return a list with just one GuestbookEntry in it. I call the Index action and pass in false because I don’t care about showing the success message. Then I assert that the model is of type list<guestbookentry> then I assert that there is one record in the list.

So, let’s get this test to pass. We need to add a new method to the repository called GetAll like this:

    public interface IGuestbookRepository
    {
        void Save(GuestbookEntry model);
        IList<GuestbookEntry> GetAll();
    }

Also, just FYI, I added a new project called Dojo.Core and added a domain folder & interfaces folder and put the GuestbookEntry and IGuestbookRepository in that project. Anyhow, let’s keep going…so now all we need to do is implement the index action like this:

       public ActionResult Index(bool showSuccess)
        {
            if (showSuccess)
                ViewData["Success"] = "true";

            return View(_repository.GetAll());
        }

Now we have all green. Alright, that’s it for this one. Feels good to see this:

Next post will have some of the implementation items in it. I probably won’t post every little detail like I have in this one and part 1, but I will provide the downloadable source. I did not get to the EmitMapper because I ended up just creating the CreateGuestbookEntry() on the view. I actually think I may have left that out of this post, but it is in the downloadable project.

Please note that when downloading the projects, you need to have SpecFlow installed, VS 2008 SP1 & MVC 2.0. Also, I’m going to add in a dummy repository and an empty constructor to the GuestbookController so the project will run without errors when you download it. I’ll tie in StructureMap in the next post.

I hope you enjoyed the post. Thanks for reading!

Download the Part 2 Solution

Coding Dojo XP Part 1: TDD & BDD with Nunit, WatiN, SpecFlow, and MVC 2.0

0

Saturday, I experienced my first coding dojo. I didn’t know what to expect, if I should prepare, what I should bring, etc. Well, I thought I’d let you know.

My experience was a good one. There were only 5 developers there, so it was easy to converse and ask questions. We talked about primarily TDD with nunit, moq, and WatiN. We also briefly talked about BDD with SpecFlow. It seems like you can’t really be prepared for a coding dojo. Just come with what you know and hopefully you’ll learn something new.

I brought my laptop this time, but ended up not pulling it out. Our dojo wasn’t like a typical coding dojo like the one talked about in the “How do you put on a coding dojo event?” video on YouTube. To learn more about coding dojos, check out codingdojo.org.

Now, for what I learned! I’m going to do 3 posts showing what we went over at the dojo. Part 1, this post, will be only about SpecFlow and how to set it up for your projects. Basically our leader/sensei came in and said pretend you were just handed a user story that says “Visitors to our website will be able to sign a guestbook”. So, with that user story in mind, we setup our SpecFlow. Here’s how:

1. Download SpecFlow

2. Run the installer

3. Create a new project called Dojo.Features (Dojo in our case, you can obviously call it whatever you want)

4. Add new SpecFlowFeature item to the project. We called it SignGuestBook.feature

5. SpecFlow provides an example, but this is what our’s looked like (NOTE: I couldn’t remember exactly what our’s looked like, but this is very similar :)

Feature: Sign
    In order to sign our guestbook
    As a visitor
    I want to be able to say that I was at the site

Scenario: Sign Guestbook
    Given I have filled out all required information
    When I press sign
    Then I should be redirected to the full list of guestbook entries and see a success message

As you can see, this is very readable and useful for BDD. The language used for the features is Gherkin, which is also used by Cucumber.

6. At this point, you can run your tests on the project. If you have Resharper, you can right-click the project name and click “Run Unit Tests”. If you have TestDriven.net, you can right-click and click “Run Test(s)”.

Obviously it will fail. Should look something like this:

7. Let’s make it pass. First we’ll copy the code it provides to us, which is this:

    [Binding]
    public class StepDefinitions
    {
        [Given(@"I have filled out all required information")]
        public void GivenIHaveFilledOutAllRequiredInformation()
        {
            ScenarioContext.Current.Pending();
        }
    }

8. Create a new SpecFlowStepDefinition item called SignGuestBookDefinitions. It will give you more samples, but we’re going to delete all of them. You could also just create an empty class and paste exactly what’s above in it, but I wanted to show you both ways.

So our final SignGuestBookDefinitions class should look like this:

using TechTalk.SpecFlow;

namespace Dojo.Features
{
    [Binding]
    public class SignGuestBookDefinitions
    {
        [Given(@"I have filled out all required information")]
        public void GivenIHaveFilledOutAllRequiredInformation()
        {
            ScenarioContext.Current.Pending();
        }
    }
}

9. Run the tests again. It should fail again at the next step. Should look like this:

Notice the second line says –> pending: …

Then it goes on to the next step definition and fails because we haven’t set it up. Let’s do that now, here it is:

using TechTalk.SpecFlow;

namespace Dojo.Features
{
    [Binding]
    public class SignGuestBookDefinitions
    {
        [Given(@"I have filled out all required information")]
        public void GivenIHaveFilledOutAllRequiredInformation()
        {
            ScenarioContext.Current.Pending();
        }

        [When(@"I press sign")]
        public void WhenIPressSign()
        {
            ScenarioContext.Current.Pending();
        }

        [Then(@"I should be redirected to the full list of guestbook entries and see a success message")]
        public void ThenIShouldBeRedirectedToTheFullListOfGuestbookEntriesAndSeeASuccessMessage()
        {
            ScenarioContext.Current.Pending();
        }
    }
}

If you reword your feature, you will need to change the matching attribute. There has to be a better way to set this up, but this was my first experience with SpecFlow and I’m basically recreating what we did on Saturday. So if you know another way or have blogged another way, please feel free to comment and your link!

10. Run the tests again and guess what, we fail again because everything is pending. It’s important to note that the given, when, then cascade, so you won’t always have an assert in each area.

11. Create your first implementation, which is our Given(). We used WatiN to do our testing for this part of the project, so you’ll need to download WatiN and reference it in the features project. Here’s what the first implementation looks like:

        [Given(@"I have filled out all required information")]
        public void GivenIHaveFilledOutAllRequiredInformation()
        {
            var browser = new IE();
            browser.GoTo("http://localhost:2345/guestbook/sign");
            Assert.That(browser.Title, Is.EqualTo("Sign Guestbook"));
        }

WatiN is a really cool UI testing tool. The two browsers that you can create an instance of are IE & Firefox. Generally speaking if it works in IE, it’s going to work in Firefox. So the next line is a goto, which tells WatiN to browse to that URL. Finally we do our nunit assert that the browser title matches “Sign Guestbook”.

12. Run your tests again and if you used IE instead of Firefox, you’ll most likely get this error:

“System.Threading.ThreadStateException: The CurrentThread needs to have it's ApartmentState set to ApartmentState.STA to be able to automate Internet Explorer. at WatiN.Core.IE.CheckThreadApartmentStateIsSTA()”

It’s REALLY annoying, but easily fixed. Just add an app.config file to your project and put this in it:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <configSections>
    <sectionGroup name="NUnit">
      <section name="TestRunner" type="System.Configuration.NameValueSectionHandler"/>
    </sectionGroup>
  </configSections>
  <NUnit>
    <TestRunner>
      <!-- Valid values are STA,MTA. Others ignored. -->
      <add key="ApartmentState" value="STA" />
    </TestRunner>
  </NUnit>
</configuration>

I also seem to remember our lead putting this “[assembly: NUnit.Framework.RequiresThread(System.Threading.ApartmentState.STA)]” at the end of the assemblyinfo.cs, but I didn’t find it necessary when re-creating the solution. I could’ve also just been imagining things…who knows.

13. Run your tests again and you should see IE launch and then your test fail because it doesn’t have anything at that URL yet. So you should get this error:

Expected string length 14 but was 44. Strings differ at index 0.

Expected: "Sign Guestbook"

But was:  "Internet Explorer cannot display the webpage"

14. Let’s make it pass.

1. Add a new project to your solution, we used MVC 2.0, so that’s what I’m going to do now too. I’m going to call it Dojo.UI. Set the new project to be the startup project.
2. Right-click the MVC project name and go to properties
3. Click the Web tab, and click “Specific Port” and change the port to match the URL we are using above. In my case, 2345.
4. Create a new Controller in the Controllers folder called “GuestbookController”
5. Add a Sign method to the new controller that returns a ViewResult
6. Create a new folder in the “Views” folder called “Guestbook
7. Create a new View called Sign.aspx
8. Change the title to be “Sign Guestbook”
9. Hit F5 and add to the address bar guestbook/sign

Okay, now we’re all set up. Let’s run our tests again. Now our first step passes, but the others still fail. Well, I hate seeing red, but the other two are going to have to wait because we have to write a lot more unit tests and development to get those to pass. So what do we do? Well, I’m going to have to ignore them so our bar stays yellow and we know there are some more tests we have to touch. Let’s do that real quick.

In the app.config in the Dojo.Features project, make it look like this:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <configSections>
    <sectionGroup name="NUnit">
      <section name="TestRunner" type="System.Configuration.NameValueSectionHandler"/>
    </sectionGroup>
    <section name="specFlow" type="TechTalk.SpecFlow.Configuration.ConfigurationSectionHandler, TechTalk.SpecFlow"/>
  </configSections>
  <specFlow>
    <unitTestProvider name="NUnit" />
    <runtime missingOrPendingStepsOutcome="Ignore" />
  </specFlow>
  <NUnit>
    <TestRunner>
      <!-- Valid values are STA,MTA. Others ignored. -->
      <add key="ApartmentState" value="STA" />
    </TestRunner>
  </NUnit>
</configuration>

15. Let’s run our tests again. You should see this:

Okay, that was part 1 of my coding dojo experience. SpecFlow & WatiN are really cool tools and obviously you’ll see more of them in later posts because we still have two definitions to implement.

What’s next:

Part 2: TDD with nunit & moq. We’ll also start building out the sign page in our MVC project. I also might try to throw in EmitMapper for our mapping to see the differences between it and AutoMapper.

Part 3: Repository implementation with Fluent NHibernate

Hopefully you enjoyed this post as much as I enjoyed learning about this stuff at the dojo. Thanks for reading!

Download the Part 1 Solution