pingles

Testing Liquid Blocks With assert_select

I’ve been looking at trying to write some Liquid tags for use as Mephisto plugins. I still have my doubts as to how productive it is to extend/work with Liquid, but at least I’m making some small headway.

I’d gotten as far as having some code working (there were no errors in the running of the test) but I needed to test more deeply: that I could actually render something useful.

To me, tests are essential as a means of proving I’m making progress, and actually writing code that works. This is even more useful in a relatively new environment (read: Mephisto and Liquid).

Thankfully, Rails already includes some great stuff for testing HTML templating (and our controllers), especially now with the recent addition of assert_select to core. By default, it works by reading the respone inside your functional and integration tests via Rails’ @response object. However, it will also work with an HTML::Node so to test our Liquid block renders correctly we just need to create an HTML document from it!

Our test looks something like this

12345678910

def test_should_see_one_image_in_template_results      template = Liquid::Template.parse(        "{% flickrphotostream %}          <img src='' alt='{{pic.title}}' />        {% endflickrphotostream %}"        )      root_node = HTML::Document.new(template.render).root      assert_select root_node, 'img[alt=my title]'    end

We assert that we find an image tag that with some alt text set to our picture’s title. All nice and simple.

I’ll work on getting the rest of the code written, now I have a way to test it! All that’s left is to beautify it up a little - that’s too much hook-up code I’ll need in each test for my liking :)

Relative Dates with Scribbish in Mephisto

By default, the theme I’d been using with Mephisto displayed dates in a relatively obtuse way, at least for a blog.

One of the things I’ve learned to appreciate more when reading blogs is that by looking at the published date, I can determine how recently it was updated, and, whether it’s a blog that’s full of life. Very much unlike this one of late :)

Although just putting the published date gives me that information, it’s more than I really need. Actually, all I’m interested in is how recent the post was. Not when the post was precisely made. That has a use, but as a regular surfer to the site I don’t mind. In my RSS client (NewsFire), the important thing is whether it’s a new post.

The same data, different consumption scenarios, different priorities.

I wanted to get relative dates working again. After all, Typo used to support that for most of the themes I’d tried. So, rather than displaying the whole date, I’d like it to display ‘3 days ago’, for instance.

Turns out, the Scribbish theme for Mephisto already includes this support. It has a scribbish.js JavaScript file that includes a function to show_dates_as_local_time.

Sweet. Everything’s already there. Almost.

All that’s needed is to add a span element to the liquid template (with it’s class set to scribbish_date) that includes the expected date format (Tuesday, November 21, 2006 14:57:00 GMT - for example), that is then replaced by the JavaScript. That way, the markup contains a full date and time.

So, inside the _article_author.liquid template, look for the following:

<abbr class="published" title="{{ article.published_at | date: '%Y-%m-%dT%H:%M:%S+00:00' }}"></abbr>

Change it to

<abbr class="published" title="{{ article.published_at | date: '%Y-%m-%dT%H:%M:%S+00:00' }}">  <span class="scribbish_date" title="{{ article.published_at | date: '%A, %B %d, %Y %H:%M:%S %Z' }}">  {{ article.published_at | date: ‘%A, %B %d, %Y %H:%M:%S %Z’ }}  </span></abbr>

The “%A, %B %d, %Y %H:%M:%S %Z” format string ensures the date gets rendered correctly (Tuesday, November 21, 2006 14:57:00 GMT) and when you browse to the page, the date gets replaced. Magic.