Running Jasmine BDD Specs in the Terminal

I had a pretty bad week with Ruby on Windows 7 64 bit: I tried to set up DBI and ODBC on my work machine but I did not have any luck with that.

I needed something to feel good about, so I decided to set up Jasmine BDD spec execution in the terminal on OS X.

I downloaded the standalone zip file from Jasmine's web site and made sure that the sample specs are executing fine with the SpecRunner.html file in the browser.

I wanted to execute the exact same specs but instead of running it in the browser, I wanted to do it in terminal.

Michael Hines' blog post was a pretty good starting point. He used JazzMoney, so I tried it myself.

I easily found JazzMoney's installation instructions on their github page.

It has prerequisites: I had to install harmony first.

I picked ruby-1.9.2-head from RVM, created a new gemset called "jasmine" and I got started.
Harmony has dependencies as well, I had to get stackdeck and johnson before I installed harmony.

$ gem install stackdeck
$ gem install johnson -v "2.0.0.pre3"

This is where it turned ugly. Stackdeck got installed fine, but johnson had some issues.

Building native extensions. This could take a while...
ERROR: Error installing johnson:
ERROR: Failed to build gem native extension.

After Googling the error I found out that johnson is not playing nice with Ruby beyond 1.8.7. I went back to RVM and started out by installing a new version of Ruby.
Here is what I did:

$ rvm install 1.8.7-p249
$ rvm 1.8.7-p249
$ rvm gemset create jasmine
$ rvm 1.8.7-p249@jasmine // switched to jasmine gemset
$ gem install stackdeck
$ gem install johnson -v "2.0.0.pre3"
$ gem install harmony // I tested harmony with a quick test in IRB, worked fine
$ gem install jazz_money

I did not have any problems with installing the gems under 1.8.7.

I had to create a Ruby script that sets up the test suite and this is the file I ran in the terminal. My run_specs.rb file was placed into the root folder right next to SpecRunner.html:

require 'rubygems'
require 'jazz_money'

javascript_files = [
  'spec/SpecHelper.js',
  'spec/PlayerSpec.js'
]

jasmine_spec_files = [
  'src/Player.js',
  'src/Song.js'
]

JazzMoney::Runner.new(javascript_files, jasmine_spec_files).call

I ran the file with the following parameters:

$  ruby run_specs.rb -f n -c

Success! This is the output I received in the terminal:

I did one more thing: I created a shell script, this way I did not have to remember all the command line arguments.
I saved this in the specrunner.sh file:

ruby run_specs.rb -f n -c

I can now invoke my specs by running "sh specrunner.sh" in the terminal.

JavaScript Closures for DRY-ing Up The Logic

Our #Hackibou today was a real blast. We focused on JavaScript development using the great Jasmine BDD framework. Since most of us were a little rusty on JS, we decided to start with something very simple: a Calculator. Our task was to develop a calculator that accepts an array of integer numbers in its add(), subtract(), multiply() and divide() functions.

We started out with a couple of very simple specs:

describe("Calculator", function() {
  var calculator;
  beforeEach(function() {
   calculator = new Calculator();
  });

  describe("Arithmetic operations on an array input", function() {
   it("creates a new Calculator object", function() {
    expect(calculator).not.toBeNull();
   });

   it("adds two numbers together", function() {
    expect(calculator.add([1,0])).toEqual(1);
   });

   it("adds three numbers together", function() {
    expect(calculator.add([1,2,3])).toEqual(6);
   });

   it("multiplies two numbers", function(){
    expect(calculator.multiply([1,2])).toEqual(2);
   });
  });
});

And our - not too elegant - solution was this:

function Calculator() {
  this.add = function(input) {
    var result = 0;
    for(i = 0; i<input.length; ++i) {
      result += input[i];
    }
    return result;
  }

  this.multiply = function(input) {
    var result = 1;
    for(i=0; i<input.length; ++i) {
      result *= input[i];
    }
    return result;
  }
}

Look at the code above. 90% of the code is duplicated there. One of us suggested assigning the first element of the array to the result right on the declaration. With this change the only difference between the two functions is the operation. One uses addition and the other multiplication. I played with JS closures a little bit before, so I proposed this:

function Calculator() {
 var operator = function(result, input) { return result + input; };
 this.add = function(input){
  return operation(input, operator);
 };

 this.multiply = function(input){
  return operation(input, function(result, input){return result*input;});
 }

 function operation(input, operator) {
  var result = input[0];
  for(i = 1; i < input.length; i++){
   result = operator(result, input[i]);
  }
  return result;
 }
}

Check out the operation() function. It uses two parameters, the first one is the array of integers and the other is a function object that holds the calculation logic. It's invoked on line 14. The variable result is both passed in as the first input and is assigned as the result of the function call. One of us suggested using the shift() function on the input array, this way we did not have to start our for loop with the second element of the array. Our operation() function now looked like this:

function operation(input, operator) {
 var result = input.shift();
 for(i = 0; i < input.length; i++){
  result = operator(result, input[i]);
 }
 return result;
}

Adding subtraction and division was very simple:

this.subtract = function(input){
  return operation(input, function(result, input){return result-input;});
 }

 this.divide = function(input){
  return operation(input, function(result, input){return result/input;});
 }

Please note that there is no if statement in the Calculator object.

Our final solution can be found in this gist.

Making Your Tests More Readable with MSpec

After playing with MSpec on somebody else' machine a couple of weeks ago I decided to give it a try today and tweak it a bit. I worked on the Movie Tickets kata with someone who was not an experienced TDD/BDD-er and this is how far we went.

Getting MSpec is pretty easy. Pull the source code from the github repo and build it. Once you have everything built you should just reference the dll in your C# project: Machine.Specifications.
I wanted to keep my solution as simple as possible so I kept both the TicketCalculator and its specs in the same .cs file.

The kata specifies the method names that you start with so I went ahead and created the class:

public class TicketCalculator {
  public void StartPurchase(int runtime, DayOfWeek day, bool isParquet, bool is3D) {}
  public void AddTicket(int age, bool isStudent) {}
  public decimal FinishPurchase() {return 0m;}
}

I put my first spec right below the TicketCalculator class:

[Subject("Basic admission rates")]
public class Purchasing_general_ticket_as_an_adult_non_student{
  private static TicketCalculator _calculator;

  Establish setup_expectation = () => {
    _calculator = new TicketCalculator();
    _calculator.StartPurchase(115, DayOfWeek.Monday, true, false);};

  Because trigger = () =>
    _calculator.AddTicket(33, false);

  It verify = () =>
    _calculator.FinishPurchase().ShouldEqual(11m);
}

It compiled fine, however, when I executed the spec this is the error I got:

(1 test), 1 test failed
TryMSpec (1 test), 1 test failed
Basic admission rates, Purchasing general ticket as an adult non student (1 test), 1 test failed
verify, Failed: Machine.Specifications.SpecificationException: Should equal [11] but is [0]

Since refactoring in the "red" is forbidden, I did the simplest thing that would make my test to pass: I returned 11 from the "FinishPurchase()" method.

I am looking at both the MSpec code and the output and they are ugly: it's really hard to read. To me a test is readable when I can show it to someone and can pretty much tell what's going on in there.

My spec passed so I started cleaning up my code. The first thing I did was introducing new aliases for the delegate names. Establish, Because and It felt awkward. I always think about Given-When-Then state transitions in my tests and this change just felt more natural to me.

using Given = Machine.Specifications.Establish;
using When = Machine.Specifications.Because;
using Then = Machine.Specifications.It;

[Subject("Basic admission rates")]
  public class Purchasing_general_ticket_as_an_adult_non_student{
    private static TicketCalculator _calculator;

    Given setup_expectation = () =>{
      _calculator = new TicketCalculator();
      _calculator.StartPurchase(115, DayOfWeek.Monday, true, false);};

    When trigger = () =>
      _calculator.AddTicket(33, false);

    Then verify = () =>
      _calculator.FinishPurchase().ShouldEqual(11m);
  }

This was a good start, but the code is far from readable. I tweaked the delegate names a little bit and I ended up with this:

[Subject("Basic admission rates")]
  public class Purchasing_general_ticket_as_an_adult_non_student{
    private static TicketCalculator _calculator;

    Given i_buy_a_standard_movie_ticket = () =>{
      _calculator = new TicketCalculator();
      _calculator.StartPurchase(115, DayOfWeek.Monday, true, false);};

    When i_purchase_it_for_an_adult_non_student = () =>
      _calculator.AddTicket(33, false);

    Then i_pay_11_bucks = () =>
      _calculator.FinishPurchase().ShouldEqual(11m);
  }

Try to read this code! There is some noise around it, but you should be able to read it out:

  Given - I buy a standard movie ticket
  When - I purchase it for an adult non-student
  Then - I pay $11

I don't have much space on this page, but if you indent the lambda a little more the Given - When - Then words will become more apparent.

Let's look at the second scenario: a standard movie ticket for a student is $8.
Here is my spec for that:

[Subject("Basic admission rates")]
public class Purchasing_general_ticket_as_an_adult_student{
  private static TicketCalculator _calculator;

  Given i_buy_a_standard_movie_ticket = () => {
    _calculator = new TicketCalculator();
    _calculator.StartPurchase(115, DayOfWeek.Monday, true, false);};

  When i_purchase_it_for_an_adult_student = () =>
    _calculator.AddTicket(33, true);

  Then i_pay_8_bucks = () =>
    _calculator.FinishPurchase().ShouldEqual(8m);
}

When I executed the spec with MSpec I received the following error:

(2 tests), 1 test failed
TryMSpec (2 tests), 1 test failed
Basic admission rates, Purchasing general ticket as an adult non student (1 test), Success
i pay 11 bucks, Success
Basic admission rates, Purchasing general ticket as an adult student (1 test), 1 test failed
i pay 8 bucks, Failed: Machine.Specifications.SpecificationException: Should equal [8] but is [11]

Again, I did the simplest thing that could possibly work:

public class TicketCalculator{
  private decimal _ticket_price = 11m;
  public void StartPurchase(int runtime, DayOfWeek day, bool isParquet, bool is3D) {}

  public void AddTicket(int age, bool isStudent){
    if (isStudent)
      _ticket_price = 8m;
  }

  public decimal FinishPurchase(){ return _ticket_price; }
}

Everything passed:

(2 tests), Success
TryMSpec (2 tests), Success
Basic admission rates, Purchasing general ticket as an adult non student (1 test), Success
i pay 11 bucks, Success
Basic admission rates, Purchasing general ticket as an adult student (1 test), Success
i pay 8 bucks, Success

Notice we have duplication in our specs: the "Given" delegate is duplicated the exact same way in both of them. Time to DRY up the code a little bit. I created a base class called SpecBase and moved the field "_calculator" and the "Given" delegate into it.

public class SpecBase{
  protected static TicketCalculator _calculator;

  Given i_buy_a_standard_movie_ticket = () => {
    _calculator = new TicketCalculator();
    _calculator.StartPurchase(115, DayOfWeek.Monday, true, false);
  };
}

Both of the specs are now inheriting from this base class. The second one looks like this:

[Subject("Basic admission rates")]
public class Purchasing_general_ticket_as_an_adult_student : SpecBase{
  When i_purchase_it_for_an_adult_student = () =>
    _calculator.AddTicket(33, true);

  Then i_pay_8_bucks = () =>
    _calculator.FinishPurchase().ShouldEqual(8m);
}

This way the spec is short and there is no duplication, however, I don't see the "Given" part in it. I took care of it by renaming the "SpecBase" class to "Given_i_buy_a_standard_ticket" and with the right indentation I should have a readable spec that tells a story.

[Subject("Basic admission rates")]
public class Purchasing_general_ticket_as_an_adult_student : 
  Given_i_buy_a_standard_ticket{
  When i_purchase_it_for_an_adult_student = () => _calculator.AddTicket(33, true);
  Then i_pay_8_bucks = () => _calculator.FinishPurchase().ShouldEqual(8m);
}

You can find the final C# file in this gist: http://gist.github.com/576433.

I'd like to list a couple of things that you should see - and maybe follow - based on this example:

• look at the length of the specs, none of them are more than 3 lines of code,
• there is no code duplication,
• there is only one assertion in each one of them,
• the spec tells you a story.

Where Should I Host My Family Videos?

Wow, it's been a while since I last posted anything on my blog! A lot has happened: I spent an entire month with my family in Hungary. I even took a short trip to Austria as well. I enjoyed many Black Forest cakes with great cappuccinos.
Returning to the US has its ups and downs: on one hand we are back in our comfortable home, on the other we miss all our relatives living on the Old Continent.

We've been posting short - 30 seconds long - videos on our family web site that I host on my home server. We have a LAMP setup with Gallery2 on it. It has served us well, however, our cable provider noticed that there is significant data download through our 8080 port. I received their first warning letter right after we got back. It was pretty obvious that I had to look for some kind of a cloud hosting solution.

Some people recommended using Amazon S3 but I wanted to stick with Google. Posting photos to a Picasa web album is very simple but it has one shortcoming: you can't upload a video in flv format. You can upload them to YouTube and then somehow link that into the album but I just was not ready to go with that hybrid solution.

We chose Blogger.com to host our photos and videos. We can easily upload photos there plus adding a little more text is always welcomed by our family. But what about the videos? Well, Google Sites is there for the rescue.

I use the unbelievably awesome ffmpeg to convert my ~60 MB 30 seconds clip into a 1 MB flash movie.

For you, dear reader, here is the script I use:

ffmpeg -i [your_avi_movie.AVI] -ar 11025 -ab 32 -f flv -s 320x240 [your_output_movie.flv]

This might seem cryptic when you look at it first, but google ffmpeg and you should find all the info you need. For example the "-f" switch is the format, "-s" is the size.

Once the movie is converted, I just upload it to my Google Site. It was not straightforward where and how to upload it, so here are the steps I took:

1) Go to your Google site (you should have one with a Google account)
2) Go to More Actions => Manage Site
3) Under "Site content" select "Attachments"
4) You should see the "Upload" button to upload your movies

Having the movie there is all fine, but I needed a Flash Player to properly play them in the web page. After a quick search I settled with OS Flv. I uploaded the player swf file to my site and I had everything ready to post my videos.

Here is the short HTML code I used to link in the flv movies through the OS Flv player into our blog page.

<object height="240" id="flvPlayer" width="320">
  <param name="movie" value="[link_to_os_flv_player.swf]">
  <param name="FlashVars" value="&movie=[link_to_your_movie_file.flv]">
  <embed src="[link_to_os_flv_player.swf]" flashvars="&movie=[link_to_your_movie_file.flv]" width="320" height="240" type="application/x-shockwave-flash"></embed>
</object>

And here is a quick movie clip I made in July, 76 MB compressed to around 1 MB. Enjoy!

Dynamic Properties In Ruby

I've been working on this Rails 3 app where users can define what fields they want to have for their track records. The problem I was facing: how can I dynamically add properties to an object?

I have this class:

class Track
  attr_accessor :value

  def initialize(value)
    @value = value
  end
end

The value field is populated by the application, it'll always be valid JSON data.

After the track object is initialized, I'd like to be able to call "distance" and "running" properties on my track object. The following RSpec code describes what I need:

describe Track do
  it "should add distance and running as read-only properties" do
    track = Track.new('{"distance":2,"what":"running in the park"}')    
    track.distance.should == 2
    track.what.should == 'running in the park'
  end
end

The question is: how can I do that?

First I thought about hooking into the method_missing method in the Track object. It worked, but I was unhappy with the solution. It seemed clumsy and it's not going to provide the best performance either. I exactly know what my methods are going to be called since it'll be set from the value field.

After googling the topic I found the solution: define_method.

I had to parse the JSON data which was easy with the json gem.

require 'rubygems'
require 'json'

data = '{"distance":2,"what":"running"}'
parsed_data = JSON.parse(data)
puts parsed_data["distance"] # => 2

Once I knew how I'll parse the JSON string, adding the define_method calls to the initialize method was easy.
You can find the final solution here:

require 'rubygems'
require 'json'
require 'spec'

class Track
  attr_accessor :value

  def initialize(value)
    @value = value

    parsed_values = JSON.parse(value)
    fields = parsed_values.keys.inject([]) do |result, element|
      result << element.to_sym
    end

    fields.each do |field|
      self.class.send(:define_method, field) do
        parsed_values[field.to_s]    
      end
    end
  end
end

describe Track do
  it "should add distance and running as read-only properties" do
    track = Track.new('{"distance":2,"what":"running in the park"}')
    track.distance.should == 2
    track.what.should == 'running in the park'
  end
end

There are a couple of things worth mentioning here.
See how elegantly the symbol array is populated from the hash keys on line 12 with the array's "inject" method.
All the magic with dynamic methods happens on line 15. Please note how define_method message is sent to the object's class reference. All it does is returns the value from the parsed JSON data.

I found this article very helpful. I went through the examples and now I know what's going on behind the scene when I use "has_many :addresses" is my Rails models.

Hackibou

It all started a couple of weeks ago when I suggested to @pragmaticpat that we should get together for a little BDD with RSpec in Ruby. I have always wanted to work on the Roman Numerals ruby quiz that I found in the book "Best Ruby Quiz", I thought this could be a pretty good chance of trying it. Set up the place (Caribou - hence the name Hackibou), date and time and we were ready to do it. A couple of days before the date I tweeted about it. Word got out and two great guys (@joelhelbling and @johnwesp) decided to join us.

We had three hours to work on this quiz. I got a latte, asked a lady to give up the table she used, set up a blank project with @pragmaticpat and we started coding. We did two 45 minutes sessions in the afternoon. We discussed what we did and switched pairs after the first session. We intentionally kept the code we wrote and tried to build on top of that in the second session. Unfortunately we did not finish the quiz. Joel took it the farthest, he worked on it at the end of the day. You can see his code on github.

All in all, we all had a great time.

At the end of our session Joel did a quick demo on jspec with JavaScript. It seems really cool, I have to give it try soon.

I hope Hackibou won't be a one time event. I am planning on organizing one in 2-3 weeks. I hope to see you there!

Put on Your Hat and Dance to Sinatra

It's been almost two weeks since we had our kick-off/planning meeting. We ended up with screen shots - very vague, drawn on a white board - and some stories in Pivotal Tracker. I immediately started to look for css templates. I am not a designer, but I do like simple and clean design. Ended up picking one from http://www.freecsstemplates.org/.

My goal was not to jump into code and create models, database tables and such. I'd like to have a rough HTML prototype that can help us figuring out what we really need. I emphasize HTML, because I want to be able to change it easily. I don't want to have a migration script created when we need to add one more field to a form.

I started out with an index and the user signup page. When I added the confirmation page I quickly realized that I'll have serious duplication unless I do something about it. My header and footer html content was repeated in three HTML files. I know this is only a prototype helping us discovering how our web app should work. But still. Even my prototype code should be DRY-ed up. I badly needed a template solution.

I could have created a skeleton Rails app, but that just seemed too heavy for this purpose.

I remember Matt Otto's (@matthewotto) tweet from late March:

I saw the tweet, I did not really pay attention to it then. But after I created my thrid page and noticed the duplication, I knew I had to find something. I can't recall why I looked at Sinatra a couple of days later, but I was blown away. It is exactly what I needed! I put a simple app together with it and I was convinced: I found my template engine for the prototype!

Here is the only Ruby file I had in my sample app:

# myapp.rb
require 'rubygems'
require 'sinatra'

get '/' do
  'Hello, World!'
end

get '/hello/:name' do
  # matches "GET /hello/foo" and "GET /hello/bar"
  # params[:name] is 'foo' or 'bar'
  "Hello #{params[:name]}!"
end

get '/test' do
  @data = 'Hello from test!'
  erb :index
end

The first block is executed when you make a request - assuming you run the app locally - to http://localhost:4567. There is no template rendering, you'll only see the string "Hello, World!" in the browser.

Ok, this works, but how could I use this for my templates? 

Digging into the Sinatra documentation I found the solution. I had to create the following directory structure:

-|

-|-views

        |- index.erb

        |- layout.erb

-|-myapp.rb

layout.erb is my template:

<html>
<head>
<title>Something Test</title>
</head>
<body>
<div id="content">
<%= yield %>
</div>
<div id="footer">
<hr/>
</div>
</body>
</html>

And index.erb provides the page content:

<div>
This is the content: <%= @data %>
</div>

Please note that I set the @data variable in the "get '/test'" block.

And that's it. I tell Sinatra to grab the index.erb file and since I have layout.erb it knows it has to render that as a template. There is a whole lot more to Sinatra than this of course. I found the "Sinatra Book" really helpful. I'd recommend taking a look at it if you want to give Sinatra a try.

I used HTML in ERB first, but then Matt Otto tweeted that he went with (HAML) so I started playing with that.

HAML looked cryptic, but once you get the hang of it, it's really simple.

In the end, I started using HAML and SASS for my prototypes, I'll blog about them in my follow-up blog post.