Quixote Day 2 Report

We’ve finished day 2 of the Quixote hackathon and livestream with another release. Version 0.2 is now up on GitHub and npm and ready for you to download and use.

(In case you missed the announcement, Quixote is a library for unit testing CSS. It’s open source and I’m developing it live on hitbox.tv every day through Thursday this week.)

Today, we introduced diff(), Quixote’s primary API. It’s the main way you’ll use Quixote.

With diff(), you describe everything you expect about how an element should be displayed by the browser. Rather than making multiple assertions, you’ll make just one assertion in multiple parts.

For example, if you wanted to check that an element is positioned (50, 10), you could write the following test:

it("positions element where I want it", function() {
  var element = frame.getElement("#my-element");
  assert.equal(element.diff({
    left: 50,
    top: 10
  }), "");
});

If the test fails, diff() will return a message such as “Element '#my-element' left edge expected 50, but was 47”.

The above code works today and is part of the 0.2 release. So far, diff() only supports basic positions (an element’s top, right, bottom, and left edges), but it demonstrates the direction we’re taking the API.

Tomorrow: Relative Comparisons

Although assertions about pixel positions are useful, it’s not really how people think. You’re much more likely to say things like “the top of this element should be aligned with the top of that one,” or “these two elements should be the same height,” or “this element should be centered under that one.”

In other words, you typically don’t want to make assertions about absolute pixel positioning; you want to talk about how elements relate to each other.

That’s coming up in the next release of Quixote. We’ve already gotten the basics working. Now, instead of writing left: 50, you can say things like this:

it("positions element relative to the menu and sidebar", function() {
  assert.equal(element.diff({
    top: sidebar.top,
    left: menu.left
  }), "");
});

That means “the top edge of the element is aligned with the top of the sidebar, and the left edge is aligned with the left edge of the menu.” When the assertion fails, you get an error that looks like this: “Expected left edge of element '#my-element' (50px) to match left edge of element '.menu' (15px), but was 35px to the right”.

This example already works. Tomorrow, we’re going to expand and generalize it and add a bunch more comparison options. It’s going to be an exciting day.

Thanks again to everyone who participated! If you’d like to join us for day 3, we’re starting at 10am PDT (GMT-7) at hitbox.tv/jamesshore. The code is available on GitHub and you can download the latest releast using npm install quixote.

Related Reading

comments powered by Disqus