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.