Contracts for automated UI testing

I’ve seen people write tests that assert that a button has a ‘disabled’ CSS classname to test if a button is disabled. I have then seen those same tests break because someone changed the styles so that ‘btn-disabled’ is now the classname of choice for styling that state, but of course nothing actually broke, the test failure was a false negative. At the same time the old styles for the ‘disabled’ class have been removed, but some buttons have been left with the old classname – tests still pass but it is (to the user) broken, a false positive. The example test below shows this kind of assert.

assert(page.myButton).hasClassName('.disabled', 'Should be disabled');

Isolated UI testing with PhantomJS

If you’re working on a JavaScript web application that uses APIs to separate the concerns of UI and domain model then you can test your UI as an isolated concern.  Mock the Ajax responses from your API, write functional UI tests, and make assertions on outgoing requests.

Some notes on Grumble.js, CoDesign.js & Artify.js

Grumble.js, CoDesign.js & Artify.js are my three most successful projects on Github. They are all successful in different ways but one common success was simply that I learnt something from each of them.

Asynchronous UI: When to lie

Let’s work on the premise that we are comfortable building user interfaces that lie. We won’t lie when something was successful, but we will lie when there is a temporary internet connection failure or an internal server error. The user might be annoyed when they find out (if they find out), they might lose trust in our application; or, they might try again, and it’ll probably be successful this time.

JavaScript Scope: with()

JavaScript unlike other C like languages does not have block scope, variable definitions are not exclusive to code blocks inside any pair of curely brackets unless the brackets belong to a function declaration. Well almost. The with statement creates a new scope based on the properties of an object.

JavaScript Scope: Hoisting

Hoisting is the effect of the JavaScript runtime alotting variable space for an entire execution context regardless of when the ‘var’ statement is used. Essentially, each ‘var’ statement gets moved to the top of the function but the assignment is left where it is.

SASS: Learning to let go of your CSS sensibilities

SASS to my surprise is really nice way to build large style sheets. It’s programming-centric approach (as opposed to markup-centric) allows more explicit inheritance patterns making module styles easier to read and easier to maintain. But there is a catch..