A couple weeks ago Davis wrote about using pseudo-classical inheritance to make your JavaScript more object-oriented. I agree with a number of his points about the goal of well-structured code. However, based on my just-over-a-month experience in JavaScript, I personally don't like to shoehorn the language into object-orientation via pseudo-classical inheritance.
For the sake of examples consider the following class hierarchy: Athlete, Footballer, and Defender.
Interesting Things
There is a new release of Jasmine, the Javascript testing framework written by several people here at Pivotal Labs, due to a bug found in CI related to implementing Rack.
For those uninitiated to Javascript BDD testing, here is a quick example.
it('should be a test', function () {
var foo = 0
foo++;
expect(foo).toBeTruthy();
expect(foo).toEqual(1);
});
Be sure to check out Jasmine at Github.
Javascript tests are good, but manually-maintained HTML fixtures are painful. It's time consuming to keep fixture markup in sync with the actual markup produced by your app. Despite best efforts, deviations arise, leading to bugs and false positives in tests.
For the past few months on Mavenlink, we've been pre-generating real-life fixture markup and making it available in our javascript tests. Results have been positive.
We've moved JsUnit from SourceForge (where it's been hosted for over 8 years) to GitHub, under Pivotal's account:
http://github.com/pivotal/jsunit
The motivation is (1) to bring JsUnit development more officially in-house at Pivotal Labs, where it has a better chance of getting more attention than it has historically, and (2) to more easily allow the wider community to contribute.
Fork away!
The project that I'm working on is using Screw.Unit for Javascript testing. We recently ran into a case where we found ourselves copying and pasting some code. We wanted to DRY up our specs and found a neat way to do it that I figured I'd share with everyone. Here's a really simple example to demonstrate how we did it.
Given a cat model that keeps track of the number of lives the cat has left:
function Cat() {
var lives = 9;
this.die = function(num) {
lives = lives - 1
};
this.lives = function(){
return lives;
};
this.isDead = function() {
return lives <= 0
};
}
Lets make up a spec that checks that isDead works for some values of lives:
Screw.Unit(function() {
describe('Cat', function() {
var cat;
describe('isDead', function(){
var shouldNotBeDeadBehavior = function(num){
describe("when the cat has " + num + " lives left", function(){
it("it should not be dead", function(){
cat = new Cat({lives: num});
expect(cat.isDead()).to(be_false);
});
});
}
for (i=3;i>0;i--){
shouldNotBeDeadBehavior.call(Screw.Specification, i);
}
describe("when the cat has 0 lives left", function(){
it("it should be dead", function(){
cat = new Cat({lives: 0});
expect(cat.isDead()).to(be_true);
});
});
});
});
});
The neat part in here is the line:
shouldNotBeDeadBehavior.call(Screw.Specification, i);
If you're not familiar with it, the call function in javascript allows you to define what "this" is for that function call. By calling our shared behavior with Screw.Specification, we're saying that we want to execute this function within the context of the Screw.Unit Specifications. This lets us execute our specs as though they were written in various places. The test results from this spec look like this
This is one way to DRY up some of your Screw.Unit specs. If you find yourself copying and pasting code, consider refactoring the spec out into a shared behavior instead.
Have other good ways to clean up Srew.Unit specs? Share them in the commments!
Ask for Help
"How do I redefine a CSS class in javascript"
You can create a new <style> element and append it to the head. This should probably be avoided if you can help it.
If you simply want to toggle between 2 states, consider putting both sets of rules in the CSS and toggling a class on the body or other container.
*"Should I use BOSH for XMPP on the iPhone?"
Probably not. If you have a long-running low latency XMPP connection, you'll probably want to use a socket from the CFNetwork package. That's the most we know about iPhone development right now.
Interesting Things
- New tracker updates with better burndown charting!
Next Tuesday, July 14, at 10pm PST, Chris Sepulveda from Pivotal Labs will be broadcasting an O'Reilly WebCast on automated unit testing with the Palm Mojo SDK. Developer testing is at the heart of Pivotal Labs's development practices, and we're excited to be involved in bringing testing to Mojo development. The WebCast will cover the following:
- Introduce BDD & Jasmine
- Installing Jasmine & add related code to the app to support BDD
- Discuss how to write a failing test first, then add functionality to make a test pass
- Develop a simple webOS application test first, with the Mojo SDK
There's more information about the WebCast on webOSHelp.net.
Date: Tuesday, July 14th at 10 am PT
Price: Free
Duration: Approximately 60 minutes
To register: http://oreilly.com/go/palmmojo
JQuery Events/live + ScrewUnit = :-(. ScrewUnit swaps the DOM "out from under" the elements that Events/live is watching, which messes with ScrewUnit. Call
dieon the DOM elements that live events are watching.ScrewUnit + CI + IE = :'-( Also, When ScrewUnit suites become large, they trigger IE's "slow script" warning, which can freeze your continuous integration build. Check out the Registry Hack to set your own timeout.
We have a fan of Thor in the house: "Map options to a class. Simply create a class with the appropriate annotations, and have options automatically map to functions and parameters." Which, as is (not) obvious, indicates that Thor is a replacement for rake.
Ask for Help
"Has anyone implemented mutli-table (class table) inheritance in Rails, as apposed to single table inheritance (STI)?"
- There are some plugins that nobody has tried, such as inherits_from
- What about a view to represent the super set of tables and rows?
"We're looking for a dead-simple, drop-in JS rating or 'starting' plugin."
Check out the start-rating jQuery plugin. Any other suggestions?
Interesting Things
- IE doesn't allow you to change the type of an input. If you create an input with createElement, IE will not allow you to change that element to a button. This was discovered when a project's javascript dom builder code was modified to generate inputs of type=button rather than type=submit. The cross-browser solution was to create some other temporary dom element such as a div and then set the innerHtml of that element to a type=button input, then extract that child element and return it in the builder call. Yeah!
Ask for Help
"What's the best way to get gems for forked repos?"
There was quite a discussion on this. The specific issue is that the team is trying to use Compass (Chris Eppstein gave a talk on Compass at Pivotal on 3/18-look for the future video on our Talks Page.) For the moment, since compass depends on the edge version of sass you must first manually install sass before installing the compass gem.
- One suggestion was to submit a fix for the gem. This is not a good solution in this case since the new version of sass/haml is expected to be released soon, fixing compass and simplifying its installation.
- Pivotal will likely host its own internal gem server at some point to deal with issues like this.
- The Has My Gem Built Yet? service might be useful in some situations, but not for this specific problem.