Series: Automated Testing
Testing Part 5-Second and Third Acceptance Tests
Published on Nov 02, 2016
Last episode we broke down the basics of acceptance testing and created our first acceptance test.
In this episode we pick up speed and test a couple more aspects of our monster index. You'll learn how to interact with the page, how to pull text from the page, and more.
Code
//tests/acceptance/monster-index-test.js
import { test } from 'qunit';
import moduleForAcceptance from 'crud-2016/tests/helpers/module-for-acceptance';
moduleForAcceptance('Acceptance | monster index');
test('visiting /monsters', function(assert) {
let monsters = server.createList('monster', 10);
visit('/monsters');
andThen(function() {
assert.equal(currentURL(), '/monsters');
assert.equal(find('.monster').length, 10);
assert.equal(find('.monster .test-monster-name:first').text(), monsters[0].name);
});
click('.monster:first');
andThen(function(){
assert.equal(currentURL(), '/monsters/1/show');
assert.equal(find('.name').text(), monsters[0].name);
});
});
Transcript
In our last episode, we created our first acceptance test and explained all of the details of what we’re doing to create that test. And we can see here that the test is passing. If you’re new to the series, then you may think hey, that looks like a lot more than one test, but most of those are just jshint
.
So the page that we’re testing is this page, and right now we’re testing so we’re creating 10 monsters, visiting the page, and then testing that there are 10 monsters there. But how do we know those are the same 10 monsters? I mean it seems like it should be but let’s go ahead and check.
So we’ll go ahead and assign those 10 monsters to the monsters
variable. And that’ll still create them, it’ll just also assign them to the variable. And then let’s assert.equal
. Let’s say we find all the monsters and then we grab the first one. Then the thing we’re comparing it to is the first item in the monsters array. Our cli thing says failed
, expected [object Object]
whereas the actual
is [object Object]
. Let’s go ahead and go to our other view to get something in more detail. And we can see that one of these is an ember object while the other is a jquery object, or something like it. So once we look at our code we can see that’s obvious. Here we’re finding it in the DOM, and here we’re grabbing an ember object or some sort of JavaScript object.
So here for this first one we can just call .name
, and then we’ll see it’s expecting Sparkachu0
and here we have to find where on the page we display the name. So it appears to be within the monster-info
thing. So we could do some sort of includes rather than equality, or we could put in a span
with the class monster.name
to test-monster-name
, and there we go. So we’ll check that by monster
and then .test-monster-name
and then grabbing the first of those. And of course it’s still a jquery object, so we’re going to have to grab text
from it. And there we go, now they’re equal.
So that’s our second test. What about our third? Well, what we want to do is click on one of these and have it show this. So that’s what we want to test, that we click and then it shows. So we will go and we will click, and what will we click? Well, we’re going to have to select something. We’ll go ahead and click on class monster
, since that’s the class we’ve assigned to the link-to
. So click on .monster
and then we have an andThen
and what we want to test there, first we’ll assert
that the currentURL
is monsters/
, and id, let’s go ahead and guess 1
, and make sure we’re clicking on this first
monster as well. And let’s see what happens there. So we want it to also say show
. I forgot about that route. So 1/show
. So we we click on it and it goes to the right place, it just does not like our jshint
at all. There we go. Everyone’s happy.
Now we’ll make sure that what we’re showing there is correct. So let’s go to monstershow
to that template and let’s go ahead and check on the name. So we will assert
that the text
in name
is the same as the name
of the first item in the monsters array. And it says it is.
Now just to make sure that things are actually testing what we expect, let’s go ahead and add a little bit here. Excellent. So if we change what’s displayed in the app, then that will mess up our test. That means it’s a good test. It’s testing something real. And with that we have our second and third tests, maybe third, fourth, and fifth, depending on how you count it.
In the next episode, we’ll get into how to test editing and saving a monster.