Sessions is temporarily moving to YouTube, check out all our new videos here.

High Level Abstractions

Tobias Bieniek speaking at EmberFest in October, 2017
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

High level abstractions reduce accidental complexity. That is not only true for your production code but also for your test code. What this Lightning Talk is really about is high level assertions.


So this is me. I work at simplabs with Jessica, Marco, Clement, and Andy. You might know me from Ember CLI where I do a thing or two. Those are my handles on GitHub and Twitter if you want to contact me. This talk is about high level abstractions. We might have heard a talk today about that. There is a great quote from a famous Ember developer called Ed Faulkner. And he told us today that high level abstractions reduce accidental complexity. That is not only true for your production code but also for your test code. What this talk is really about is high level assertions. What I mean by that is I want to look at an example. Imagine you have this template. This template essentially has two states. In one of the states, we have an extra CSS clause, and in one of the states we have an extra tag in the text. I'd expect this test would look roughly like this. So we would test one case. Then we'd fill out an input field and then we would just start the second case. And now Jessica already told you you can use async/await. That makes the test much easier to read, obviously. So the whole andThen blocks are gone. And it's just much easier to follow. But that's not what I wanted to focus on. I want to focus on the assertions. And you can see the text content trim stuff. It's not really clear what we are actually testing. And there's even this weird new line character up there. Also the test that we have, a CSS class is rather verbose. And so, if you use EmberCLI Mocha there is a solution for that. It is ChaiJS. There is a plugin for ChaiJS which is called chai-dom. It allows you to write English text assertions, sort of. So you say "expect" and you put an element in, and you can run assertions like two half texts and then just put the text in. The good thing is, for EmberCLI Mocha users, you're done, it just works, it's perfect. For QUnit right now, EmberCLI Chai does work with QUnit. Unfortunately, EmberCLI Chai is using Chai version two, which works. Chai version 3 does not work with QUnit. So we will have to renew support for that. So basically we needed a replacement at simplabs. And this is basically what we came up with. This is the API that we wanted to have. So we just put a selector in and we run a simple assertion, for example, has text, does not have class, has text, has class, stuff like that. And since we're in the Ember community, it is actually very easy for you to get that too. And that's basically it. So you can run it as a stand-alone QUnit plugin but once you instal it in an EmberCLI project, it will automatically hook itself into the EmberCLI build pipeline. And you can just use it in the tests. These are some examples of what you can do with it. You can test if an element exists. You can test the CSS classes, if it's focused, what values it has, if it has attributes, stuff like that. And then there's one more thing. I did some conference-driven development yesterday when I took out the slides, and we have actually done a code mod so you can actually convert most of your assertions to these new assertions automatically. And that's all I have! Thank you.