On Friday last (December 19^th) I took part in a virtual Umbraco hackathon. The idea was to create some BDD (Behaviour Driven Development) tests for the Umbraco UI.

Online Collaboration

We used a number of tools to collaborate online. A great number of tools! Here is a list, in no particular order:

Google Hangout (above). I found this to be a bit flaky, and we got kicked off a couple of times during the day. However, the reindeer button is awesome! It's also a pretty useful tool for this kind of thing.

Trello. This is where we created our test scenarios.

GoToMeeting. This is what we used for the initial conference call to kick off the day.

join.me We used this to share screens. Very easy to use - recommended.

uChat. Matt set up a set of chatrooms using JabbR, a SignalR powered chat application. This worked very well and reminded me a lot of the old days at University.

BitBucket. Matt created a repository to store the Umbraco UI tests in a single solution. This solution also included the Umbraco binaries, so there was no need to have Umbraco installed separately.

Coding Tools

In order to create our BDD style tests, we used a couple of tools:

SpecFlow: this allowed us to easily convert the scenarios from Trello into code

Selenium: this allowed us to automate the browser actions when running the tests

The Idea

The idea is very simple. You create a bunch of scenarios that you would like to test, using a simple human-readable syntax, like this:

Given that I am on the install welcome screen
When I click the "Let's get started" button
Then the database configuration page displays

Then you translate these into actual code that you can run. This looks something like this:

Scenario: Lets get started
Given I am on the install welcome screen
When I click the lets get started button
Then the database configuration page displays

This is stored in your .feature file, which is a specflow concept that you can read about in the documentation on github. You then need to code up the actions which are required to run your tests. So take for example the Given statement, above. This will need to be coded in your .cs file like so:

[Given(@"I am on the install welcome screen")]
public void GivenIAmAtTheInstallWelcomeScreen()
{
Browser.Url = string.Format("http://localhost:{0}/{1}", ConfigurationManager.AppSettings["port"], "Install");
}

Your .cs file will need to implement the AbstractWebDriverStepDefinition. Note that this is really just a function that has been decorated with the Given keyword. Note also that the text in double-quotes, i.e. "I am on the install welcome screen", matches the text in the .feature file. Here is the rest of the code for this test:

[When(@"I click the lets get started button")]
public void WhenIClickTheLetsGetStartedButton()
{
Browser.FindElement(By.LinkText("Lets get started!")).Click();
}

[Then(@"the database configuration page displays")]
public void ThenTheDatabaseConfigurationPageDisplays()
{
Assert.IsTrue(Browser.PageSource.Contains("Database configuration"));
}

Note that we're using Selenium features like Browser.Url and Browser.FindElement, etc to automate our tests. And that is very basically it.

You can download the project using your mercurial client from Bitbucket at this URL and have a play for yourself:

https://bitbucket.org/mattbrailsford/umbraco.cms.web.ui.tests

To access the Umbraco v5 UI Scenarios board on Trello you'll need to have a Trello login and then contact anyone who was involved on the day and we can give you access - twitter is probably the best option.

You can use resharper or nunit to open and run your unit tests through Visual Studio.

Thanks

A big thank you to Matt for setting everything up and helping us through it - it was definitely an interesting and useful learning experience! Thanks also to the other guys for making it a fun day and for putting in the work. Here's to the next one!