Series: Making ember-cli Addons

Addon Acceptance Tests

Published on Apr 07, 2016

 

You can test addons- you just need to use the dummy app. In this video we create an example acceptance test.

Code

//test
import { test } from 'qunit';
import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';

moduleForAcceptance('Acceptance | blink tag');

test('visiting /blink-tag', function(assert) {
  visit('/');

  andThen(function() {
    assert.equal(currentURL(), '/');
    assert.equal(find('h1').text(), 'Hey!');
  });
});

//blink tag
import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'h1',
  show: true,
  classNameBindings: ['show:ember:blink-tag--invisible'],
  didInsertElement: function() {
    var self = this;
    setInterval(function() {
       if(!self.isDestroyed){
         self.toggleProperty('show');
       }
    }, 300);
  }
});

Transcript

Hey, everyone. Last time we showed that you could create a dummy app in your Ember application and you could serve it on localhost:4200. And that dummy app is in the tests folder in your addon, but you can also aside from doing manual testing with the dummy app, you can also do automated testing on it. It does come with some built-in, and in this episode we’ll show you how to make your own.

Our example will be an acceptance test. So we use the ember generate command to create an acceptance test called blink-tag. And so that’s going to generate something in our tests folder. Let’s go there and we’ll find that it’s created a new acceptance folder, and then it’s created this test in qunit. It does qunit by default but you can use Mocha as well, just like you can in a regular Ember app.

And so this acceptance test when it visits this, it’s going to visit this url in the dummy app. So for your acceptance tests, all of it is within the dummy app. And this is actually all there is that’s different with doing the addon acceptance tests and regular acceptance tests. It’s just that you’re using the dummy app as the app for those tests.

So if you want to, you can go ahead and go start making your own acceptance tests right now. For the rest of the video, I’m going to be creating a couple of specific tests in here, that the thought process I go through may be helpful to you, they may be not, so you can choose whether I continue to keep going or not.

So let’s start by checking that this test is passing. And oh-oh, it looks like it’s not. Wow, it’s really not passing. So we’re getting calling set on destroyed object. And as you can see it, it keeps on doing this.This tells me that there’s a broken loop somewhere, and that would be in our addon component here. So it’s getting destroyed and then it just keeps on going with the interval. So you can do if(self.isDestroyed). So if it’s not destroyed, then we’ll do the toggleProperty. And this is the sort of thing that Ember Concurrency, which was recently announced, is really good at solving so that you don’t have to do this isDestroyed check. But we’re not using that right now, and this makes it work, so our acceptance test is passing.

And this isn’t just in the test, by the way. This did uncover an actual problem that might have come up if we were using this in a real app. So it’s good that we did this.

Next we’ll go ahead and we’ll assert that it’s actually showing, so we’ll assert that Hey! is here in the h1. So assert.equal, and first we’ll grab it using jquery, and get the text and assert that it’s equal to Hey!. We’ll see that this is also grabbing the Dummy Tests header right here, and that’s not what we want.

So to get around this, you might think first to try doing this, but that also doesn’t work. I ended up using the find helper. And so the find helper, it understands Ember and so it will only find it within the dummy app and not in the header of the Ember app on the test page.

So that’s the basics of testing your addon, plus a little bit of my experience testing it. I’ll see you next time.