Trying out BDD With SpecFlow and Selenium - Part 1

One of the biggest things I learned when I was working as a tester at IBM is how important testing really is in applications large and small. While I've moved on to full time development the test side of my work has really never gone away. While working on updating one of the features of the Extend Health side we've decided that it would be a good time to try out some testing that hasn't been covered much.

So with that we've decided to try out some Behavior Driven Development and write some integration tests for this new feature. Since we're a .NET shop we've decided to give SpecFlow a try instead of running Cucumber straight on Ruby. Fortunately if we ever decide to switch from SpecFlow to Cucumber our features will transition directly since they are in the Gherkin format. The main reason we're trying out this Gherkin format is that it gives us a Business Readable Domain Specific Language.

The advantage that this would buy us is that we could document the sites features in a way that both the business development team could read and write features in a way that we in development could directly write tests against them. This also helps us in development because we have a solid list of features we know that we need to implement and that we should be less likely to either break that feature or miss it altogether. This is one thing that Unit Tests just don't really buy you. It would be easy enough to write a suite of Unit Tests that don't cover the actual feature itself as described by the business.

So lets get to what a test in SpecFlow looks like.

Feature: Share this post
    In order to increase traffic to the blog to increase advertising revenue
    I want readers to share posts they find interesting

Scenario: Share on Twitter
    Given a person reading a blog post
    When they press the "Tweet This" button
    Then the Twitter popup should appear

So there we go, that's pretty simple looking right? That right there is the beauty of the Gherkin syntax to me. It is structured enough that we crazy programmer types could turn that into some tests (and we'll get there) but the business types can also read and understand what is going on here. Oh and because I think this is awesome, using Cucumber you can write this in a ton of different spoken languages.

One thing I'd like to point out though, is that while features and scenarios look really simple, I've found so far that the hardest part is writing a clear feature and scenario. Writing unit tests aren't very difficult since you break that down as much as possible. It all comes down to communication really, finding the best way to describe a feature without getting too broad or too detailed. The cucumber docs do have a really great example (scroll to the bottom) of applying the Five Whys to really decide why you want a feature and how to describe it.

So now that we've had a chance to check out the Gherkin syntax that SpecFlow uses, in my next post I'll show the actual code behind this feature and how we're starting to use Selenium to verify these features.

One Week Down Learning JavaScript and jQuery

Like I mentioned in my last post I've started a new job this Monday at Extend Health working in .NET with a bunch of fun technologies including ASP.NET MVC2, Nhibernate, some FubuMVC and  using a bunch of jQuery. At my last job at Mediaport I had just started teaching myself both ASP.NET MVC2 and digging deeper into JavaScript and jQuery. Now that my first week is done at Extend Health I've been happily digging through all the code and working on my assignment to study some more on JavaScript.

This week I have been reading Douglas Crockford's book JavaScript: The Good Parts. I had watched a video of his talk about JavaScript's good parts at Yahoo! before but reading this book has really opened my eyes to JavaScript and the power as well as pitfalls of the language. It is definitely going to take some time to fully appreciate the power JavaScript has.

So onto a little bit of what I've been up to during my first week.

jQuery Templates:

Besides just trying to become more familiar with JavaScript as well as jQuery I was looking at places we might be able to try out jQuery Templates which is one of the plugins developed by Microsoft that have recently become official parts of jQuery. After playing a little bit with the jQuery Templates I have to say that I really like them. I've seen a few template plugins that rely on you dumping all the templates into big ugly strings and with jquery-tmpl you can avoid all that. Here is a quick sample of one:

Pretty straightforward but the nice thing is that you don't have any ugly string to muck with. Instead you get a nicely encapsulated template which has a competent set of features including the each, if/else, and nesting of templates. I'll have to use it some more but this plugin looks really great and should get even better over time.

jQuery Datalink and Knockout.js


Along with the jQuery Templates I checked out another plugin from Microsoft called jQuery Datalink. The datalink plugin lets you bind a JavaScript object to a form and keep the two in sync without having to write a bunch of extra code. Here is a quick example of binding a form to a JavaScript object.

    First Name:
    
    Last Name:
    

    var person = {};
    $("form").bind(person);

With that, we've bound the person object to the form. This will give person the attributes firstName and lastName. Now whenever the text changes for the firstName or lastName text inputs the person object will be updated. Pretty simple, but it could prove useful.

While looking at the jQuery Datalink plugin I heard about Knockout.js which also provides databinding but takes a different approach than jQuery Datalink. In Knockout things are much more JavaScript oriented and is based of of the Model View ViewModel (MVVM) pattern.
So in Knockout, we create a view model that we will bind its attributes to in the HTML.

    The first name is 
    The last name is 

    var myViewModel = {
        personFirstName: ko.observable('Bob'),
        personLastName: ko.observable('Marley'),
    }

    ko.applyBindings(myViewModel);

And with that whenever the underlying JavaScript object changes the values will be updated in the HTML. That is just a simple example of what Knockout can do. Knockout looks like a really interesting project and the style of binding should feel familiar to any Silverlight or WPF developers since that is what this is based off. Hopefully I'll have some more time to write about Knockout.js as it seems like a really interesting project.

My first week has been really fun and I'm really looking forward to mastering JavaScript and digging much deeper in to ASP.NET MVC and C#. So here's to learning more code!