Ember 2.x Ember 2.x

Exercise 8 Solution, Part 4

Check out a free preview of the full Ember 2.x course:
The "Exercise 8 Solution, Part 4" Lesson is part of the full, Ember 2.x course featured in this preview video. Here's what you'd learn in this lesson:

Mike concludes Exercise 8 by demonstrating how to create an acceptance test.

Get Unlimited Access Now

Transcript from the "Exercise 8 Solution, Part 4" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Mike North: The way you generate an acceptance test is ember g acceptance test and then you will pass in as the name of the acceptance test will be usually like the URL you're visiting or the route you're visiting so we're just gonna call it index.
>> Mike North: And this is the default setup here I'm gonna change this to acceptance index, so we can see that what is happening is first we are visiting this thing called index and then we are just verifying that the current URL is what it's supposed to be.

[00:00:51] We can put a debugger inside and then remember that you want it to be in the promise chain and sure the URL says index but what's happened in fact is we've intermediate transitioned to the error sub state. And so we're seeing oops on the page and that is because we're in fact in the not found route.

[00:01:15] So we're going to visit this page instead and verify that ultimately we end up on. Remember yesterday we set up a redirect to take care of that. And this will pass. And just to prove to you guys that the real app is running.
>> Mike North: There it is. Right.

[00:01:43] So, this is the whole app. We're not testing in isolation anymore. So, I have a little, I have a second screen here with the instructions here. So, step one for the acceptance test was to visit the page. We're gonna verify that the current route name is correct. Just I've added a little mix to give you guys some variety.

[00:02:09] And at orgs route and then the next step is to click on the Ember JS GitHub org.
>> Mike North: And if we look at where we ended up we're in the Ember. And we're going to, from that point on, verify that the current url is correct.
>> Mike North: And it should be org/emberjs/repos.

[00:03:05] It's again testing our redirect, right, testing that we've actually forwarded through and made it there. Whoop, leading /
>> Speaker 2: CurrentUrl was return of relative.
>> Speaker 2: Obviously CurrentUrl is returning to relative path, not the full So it will be the path component of the url, it will emit the hostname and the and at repos page.

[00:03:39]
>> Mike North: The next step is to click on the link for the ember data repo. Use our same selector here more or less.
>> Mike North: So it's saying org not found.
>> Mike North: So I'm gonna actually debug this here. Make sure that my selector's doing what I think it should be doing

[00:04:26]
>> Mike North: Come on.
>> Mike North: So that is the ember data link.
>> Mike North: I know what the problem is here. It was a bug that was already in the code. So if we look at what's happening. If we look at the console we're using an incorrect attribute to form this URL.

[00:05:00] We're using the name of the repo instead of the login. So we've caught a bug here and we just need to go there's the org ID sorry it's in repo.
>> Mike North: Org log in.
>> Mike North: And now all the tests pass, because we know that that's what the green bar at the top means there.

[00:05:34] So at that point we should be, just verify the current URL
>> Mike North: And we're gonna make sure that there are some thing is in the issues list.
>> Mike North: This is not gonna work.
>> Mike North: Issues LI
>> Mike North: And I think just make sure there is something there
>> Mike North: And you can see that we're accumulating a nice little workflow here.

[00:07:14] And the last step is gonna be to click on the collaborator's or contributor's link.
>> Speaker 2: If there's other issues it's gonna break out test up.
>> Mike North: [LAUGH] Well, it will but I'm gonna drop something in that will have us testing sample data instead of. [INAUDIBLE] the appropriate test.

[00:07:41]
>> Mike North: Contributors
>> Mike North: Okay [NOISE], something's up here. Some contributors. See if there actually are items in that list. There are.
>> Mike North: I think I called it.
>> Mike North: Yup, my bad.
>> Mike North: All right, end on green. So that's our full acceptance test here. Sorry that was a little bit of a slog but the point is that in only 25 lines of code here we are able to kind of drill pretty deeply into our whole route hierarchy and we are doing a bunch of pivots.

[00:08:50] There's a lot of surface level coverage regaining in writing a test like this, and it's pretty readable considering that the alternative would be either the famous Node.js pyramid of doom call backs and call backs and call backs. Or a whole lot of promise chaining. The effort here is to let you write a test that really has a lot of asynchrony baked into it as if it were synchronous.

[00:09:22] And I'm quite excited about when we have support for Async 08 and things like JS Hint and all the tooling. So that we can, even to a higher degree, have this look like code and even mix it with code at that language level instead of having to rely on.

[00:09:47] So, last thing, drop in pretender. It's a really quick since I kinda did it in advance. [SOUND] So just to query this Json function at the top, so we can make use of it.
>> Mike North: Make the server available so that we can shut it down on the end.

[00:10:16]
>> Mike North: And fix my indent and then we're good. And server dot shut down, all that's doing is giving you back the real XML HTTP request object. And, dear, tests are failing. Some issues. So. At and then. So a good thing to do if there are errors that don't pop up in the console, is you can disable tricache.

[00:10:54]
>> Speaker 3: You said greater than two, you have two of each?
>> Mike North: Thank you. Good catch.
>> Speaker 4: Gotta beat more issues.
>> Mike North: Fantastic, all right. So we're passing now and if we look at the Network tab, no real API requests or send out. This is strictly on the UI side and so this is how you'd want to set things up if you're running on Travesia and don't want a bunch of random traffic coming into your API.