Rickard Nilsson

TDD Katas has become very popular in a small segment of the development community and we call our selves software craftsmen. We are passionate about software development as a craft and engage in different activities to better our selves and our peers.

My first kata cast, for instance, has been viewed close to 10k times on Vimeo since its publication. Much of the attention is of course due to Roy Osherove linking to my blog post from his TDD Kata 1 page. This time Roy initiated a sequel, meant to introduce interaction based testing using mocks and possibly stubs, and continue the teaching process of TDD and unit testing practices.

The Kata Cast

The following screen cast covers the entire kata in .NET, complete with Osherove’s three steps as well as manual UI testing at the end.

For best viewing experience I recommend watching it on Vimeo.com in HD

String Calculator TDD Kata 2 - Interactions from Rickard Nilsson on Vimeo.

The tools I use are Visual Studio, ReSharper, TestDriven.NET, Moq for mocking, and NUnit.

The code

The code and Visual Studio solution for the finished Kata can be downloaded from GitHub:

Download source

Discussion

As Osherove mentions in his instructions, this kata is not as simple as the first part, nor as simple as most katas out there. The reason is the element of interaction based unit testing involved, which is quite difficult to wrap you mind around, and it took quite a while to get the steps right. I thought I should share my path to the kata in its present form for others to learn from and comment on.

The Kata

Step 1. Everytime you call Add(string) it also outputs the number result of the calculation in a new line to the terminal or console. (remember to try and do this test first!)

As I did this test first I started out pretty much as how it ended up in the cast. However, after a while I tried to take a step back and see if there were any smells in the code I had not yet discovered.

I found that I didn’t really like the mixed responsibilities that the Calculator class got when I introduced writing to the console. This could be seen as a logging feature and thus a perfect candidate to become an aspect (in AOP). I started playing around with PostSharp and ended up with the following solution which is quite clean.

Which, at most, leaves the mark of a custom attribute in the Calculator class:

The problem with this solution is the way PostSharp works. It does all its magic as a post compilation step so everything is pretty much static. This is a problem in a testing scenario when we need to inject the mocked console in this case, hence the smelly ContainerFactory.Current stuff.

Another problem with this solution is that in part three, the console app, we need to disable or override what is outputed. This ends up becoming a static mess which did not feel right at all. If you have another view on this please leave a comment.

Step 2. Create a program (test first)that uses string calculator, which the user can invoke through the terminal/console by calling “scalc ‘1,2,3’” and will output the following line before exiting: “The result is 6”

For step 2 and 3 I thought a bit about refactoring to a UI design pattern like MVP, MVC or MVVM but finally decided to drop it, mainly because I didn’t know any framework like that for console applications. If the application grows I think this is the right way to go, but for the known requirements it’s an overkill, especially considering how small the solution is.

Step 3. Instead of exiting after the first result, the program will ask the user for“another input please” and print the result of the new user input out as well, until the user gives no input and just presses enter. in that case it will exit.

I played around a bit with SpecFlow, which has ha free form Given/When/Then specification syntax, on the later part of the kata. However, I felt that I lost velocity so I dropped it as well. Maybe, if I had some way of conducting complete acceptance testing through a real console, I would have pursued this further. It was simply too much to write, for example:

Scenario: Prompt user for another input
	Given a new string calculator
	And the user has entered: a valid input
	When the program has outputed The result is 1
	Then the user is prompted for another input 
Scenario: Quit on empty input
	Given a new string calculator
	And the user is prompted for another input
	When the user hits enter
	Then the program should exit

Figure 3. SpecFlow Feature specification for the console app

If you have any thoughts, comments, suggestions, or any other feedback please leave them below or ping me on twitter.

Day 3, the final day of Codegarden 2011, the annual Umbraco festival, is over and the Umbraco community is once again scattered all over the world. An interesting point that was maid during the round up was that only 250+ of the 200 000 active Umbraco users attended the conference. However, the fortunate part of the community, which were able to attend, is an awesome crowd with lots of really talented people. Thank you all for making it such a great experience.

Highlights from Codegarden 11:

Umbraco is the single most active project on Codeplex…

…Umbraco is teaming up with Mark Boulton Design to give users a better and more beautiful experience…

…Umbraco v5 CTP is available for download on Codeplex, the beta is scheduled for release later this summer and the final version will be coming at the end of 2011…

…v5 is a complete rewrite built on ASP.NET MVC with a solid foundation, rearchitected from the ground up using best practices, patterns, and frameworks like unit testing, IoC, DI, nHibernate, Autofac, etc…

…you can read all about and influence the development of v5 at http://jupiter.umbraco.org

…Deli is the new Umbraco package marketplace on http://our.umbraco.org where you can buy and, or sell packages…

…there are basically two approaches for implementing multilingual sites in Umbraco, either you duplicate the node structure per language, or use logic in your templates to get the language specific content from another sub document or property.

www.asp.net has run on Umbraco for more than a year now. Microsoft is planning to move MSDN and Technet to Umbraco as well, which means that Microsoft is really pushing Umbraco and because of this, Umbraco’s growth has escalated, even in the US.

…Courier 2 is the way to do continuous integration and deployment with Umbraco. There are no providers for TFS yet though…

…ClientDependency framework is a powerful tool for managing JavaScript and CSS dependencies in ASP.NET applications and has been an integral part of Umbraco since v4.

Finally, i give the conference 5 of 5 because its so much more than just a conference, actually more of a festival including great people, activities, sessions, service, and food. Very much recommended if you’re into Umbraco in any way.

Day 2 of Codegarden 11 has come to an end. And what and end it was. The infamous Umbraco Bingo brought the craziest things ever, including a marching girl band, a midget Elvis, a pillow fight, and the grand prize of getting a real Umbraco tattoo live on stage!

The conference, on the other hand, was a little slow, and for me it was mainly focused on the low level concepts, and patterns used in Umbraco 5, coming much later this year (se yesterday’s post). If day one contained very brief subjects with very little details, the second day was quit the opposite.

For me, the most interesting thing from todays sessions was the one on the ClientDependency framework. This is something that has been shipped with Umbraco backend since v4 but is actually a separate project on Codeplex, entirely independent of Umbraco itself. The framework provides a way to automatically manage JavaScript and CSS dependencies in any ASP.NET web application, using best practices like merging, minification, and compression, as well as automatically setting far future expire headers (I’ve written a post on minifying JavaScript and CSS before).

Tomorrow is the final day of Codegarden…

Codegarden 11 is an annual developer conference for everything Umbraco where everyone from casual users to core developers attend to learn, share ideas, network and socialize for three days in sunny Copenhagen. This year’s event is all about Jupiter – version 5 of Umbraco rearchitected on ASP.NET MVC, scheduled to ship later this year. Actually, the CTP was released live on the stage during the keynote.

Another exciting news from HQ, the company behind Umbraco, is version 2 of Courier, which promises to deliver automated deployment of content and developer artifacts to Umbraco, made really easy. They even dropped the price to 99€!

A new thing HQ are releasing now at Codegarden is Umbraco Deli, which is a marketplace for packages. Up until this point, there’s really been no place like this where you can sell licenses to your packages for download, other on your own.

The first day of Codegarden has come to an end and it’s been a really grate day for me, meeting all these new people which, are passionate about much of the same things I am. The day finished on a canal boat and after that the party continued into the night at a local office here in Copenhagen.

Looking forward to another great day!

Also follow my Codegarden experience through twitter, flickr, and Facebook.

It has been almost three years since I wrote my top ranking post on this blog: Applying stylesheets dynamically with jQuery. It was a quick and dirty example of a testing scenario pulled together for a colleague but it has become my number one linked post. It is still the post that gets the most hits every month because it is the first hit on Google for jquery add stylesheet which seems to be a lot of people has trouble with.

So, I felt it was time to do another post on the subject considering I’ve been using jQuery more or less every day these last three years.

jQuery Plugin

I’ve created a simple jQuery plugin for adding or switching out stylesheets dynamically and interactively and it can be used like this:

<ul>

    <li><a href="#" rel="1.css">Apply Stylesheet 1a>li>

    <li><a href="#" rel="2.css">Apply Stylesheet 2a>li>

    <li><a href="#" rel="3.css">Apply Stylesheet 3a>li>

ul>

$('a').click(function () {

    $.stylesheets.clear().add($(this).attr('rel'));

    return false;

});

$.stylesheets = (function () {

    var stylesheets,

        add,

        clear;

    add = function (cssfile) {

        $('head').append(''" rel="stylesheet" />');

        return stylesheets;

    };

    clear = function () {

        $('head link[rel=stylesheet]').remove();

        return stylesheets;

    };

    return stylesheets = {

        add: add,

        clear: clear

    };

} ());

Download source / demo

I’ve created a Facebook page for rickardnilsson.net to be able to share more unedited material to the world than I have time with if I would write blog posts.

…and it will not be just another twitter feed rather I will have the opportunity to discuss and interact with people sharing my set of interests including web development, internet and social media.

Update: I would like to thank all of you who helped med secure a username on Facebook

If you share my interests or like me for some reason, please “Like” me on the button above to get all the extra material as well as blog post updates served conveniently on your Facebook wall.

-- Rickard

Since Facebook launched their share link feature anyone including you can share your site or pages to their friends. You can tailor what is displayed on the Facebook wall in terms of title, description image and URL.

Facebook is smart enough to use the html meta tags on your page for title and description and it may list some or all of the tags to the user to choose from. This is great as a starting point and may be enough in many cases, however in some it is not.

Say that you put a Like button on a page. What happens when a user Likes it is that Facebook uses the title and description as before but it may try to pick an image from the page, probably closest in proximity to the Like button. This may not be what you want as you might want a specific image to be displayed on Likes.

Open Graph protocol

The Open Graph protocol enables you to integrate your web pages into the Facebook social graph. You can turn your pages into graph objects by adding additional meta information.

<html xmlns:og="http://ogp.me/ns#">

  <head>

    <title>Join the dark side with Son of Obsidian Visual Studio color schemetitle>

    <meta property="og:title" content="Join the dark side with Son of Obsidian Visual Studio color scheme"/>

    <meta property="og:type" content="article"/>

    <meta property="og:url" content="http://rickardnilsson.net/post/2011/05/05/join-the-dark-side-with-son-of-obsidian.aspx"/>

    <meta property="og:image" content="http://rickardnilsson.net/image/Rickard_Nilsson.jpg"/>

    <meta property="og:description"

          content="Join the dark side with Visual Stuide color scheme

          Son of Obsidian. Download it from http://studiostyl.es/"/>

    ...

  head>

  ...

html>

Additional images

One image may not be enough e.g. when users share your page with the above mentioned Share link feature. To still enable users to pick one of the images on your page you can add additional og:image tags to the header.

Photographed for Hotspot · Photo by Henrik Bäck

A couple of month ago I switched my Dell dev machine for a new MacBook Pro and it has been a joy ever since. Even though my main work still is in Windows and Visual Studio I much rather do it on a virtual machine on top of Mac OS X than on my old Dell.

I’m running Win7 virtually on VirtualBox complete with my dev tools, including Visual Studio and ReSharper.

For office and communication I’m using Office 2011 and Communicator 2011 for Mac and it works great!

Do you also want to join the dark side? This is the theme I use.

Download it from studiostyl.es/schemes/son-of-obsidian

Change settings in the Tools > Options > Environment > Import and Export Settings dialog.

After graduation I started out on my professional career as developer on the .NET stack. As I was new to the platform and tools I began searching for means to educate myself and continue to stay up to date with everything that was going on in the industry.

I found that listening to audio talk shows, or “podcasts”, was a great way to get an even flow of new information about the platform, industry and the .NET community. The podcasts quickly introduced me to a whole new world of MVPs, regional directors, .NET user groups, events, and conferences, new technology, as well as how it is to work in the business.

My advice to you, professional or student, novice or experienced, who is interested in building software with Microsoft tooling and products, follow one or more of these channels because for me, they really boosted my career and has been a cheap way for me to get ahead. I use the time on the commute every day to stay on top of things.

The .NET podcasts I have followed since the beginning and still follow every week are:

Subscribe · iTunes · Zune · Facebook page

Favorite shows:

642. Bruce Lawson and Remy Sharp on HTML 5
346. Future of .NET Panel at DevTeach Toronto
240. The ORM Smackdown!

Subscribe · iTunes

Favorite shows:

256. JavaScript and jQuery: Moving beyond Alert()
72. Be a Better Developer in Six Months
31. Test Driven