Ember 2.x Ember 2.x

Exercise 8 Solution, Part 1

This course has been updated! We now recommend you take the Ember Octane Fundamentals course.

Check out a free preview of the full Ember 2.x course:
The "Exercise 8 Solution, Part 1" 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 begins the solution to Exercise 8 by cleaning up a number of integration tests that were generated by ember-cli. He also demonstrates how to mock-up data to make the testing process easier.

Get Unlimited Access Now

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

>> [MUSIC]

>> Mike North: So I'm gonna go through the process of creating a unit test for the computed property macro that we built is an array. I'm going to build a component integration test for our GitHub org component with a specific focus on making sure that the contract, both the data we pass in and the action we expect to come out, that is in place and doing what I expect it should be doing.

[00:00:30] And then finally, I'm going to go through like a relatively simple workflow that drills through a couple links, just kind of making sure that if any of the routes were to throw errors as part of their transition process, that would cause this test to fail. So it's a nice sort of smoke, high-level test that goes through a bunch of things, and if anything breaks along that long path, we would be alerted to it.

[00:01:04] So first, I'm going to actually go through and fix all the currently failing tests, with the exception of JSHint, cuz I don't wanna waste your guys' time doing that. So it looks like the favorite, something is different here about what the component expects to be rendered on the github-org test.

[00:01:27] So if we go to, tests, integration and we've got the github-org test here.
>> Mike North: So I'm gonna comment this out, so we're only dealing with one test at a time, one set of restrictions I should say. And what we're basically seeing if we look at the green versus the red here, we're seeing that we expect an empty string here.

[00:01:57] And what we're instead seeing as the text inside this component. The textual representation of this component is favorite and some square brackets. And we know that's exactly what we intended. So, I'm gonna use an ES6 string. Little known advantage of ES6 strings is that multiline string literals are really easy.

[00:02:24] So, gonna delete that.
>> Mike North: And then one more.
>> Mike North: And this should pass. My next error is that it expects two assertions, but only one was run. That is coming from this here. So this is part of the initial test that Ember CLI created for me. I have commented out one of the two assertions.

[00:02:57] I'm gonna fix this by just uncommenting this, and I know we're also going to hit the same test failure. So I'm gonna just copy this string into the expected result. I'm deliberately deleting template block text, so it is seeing template block text in the actual rendered component, but it's not expecting that.

>> Speaker 2: They're asking if you can make the text smaller in your text editor, or maybe just make the split screen a little bit-
>> Mike North: Better?
>> Speaker 2: It's hard when they're scrolling back and forth, so. Does that still look okay on the video? [INAUDIBLE] Recording. Thanks.
>> Mike North: So here, what I'm gonna do is delete yield, because I don't really care about this component working in block form.

[00:04:00] I currently am just using it in line form, and this is just gonna be an end line component. So, I'm gonna hide the passed tests. Just so we've got three failing tests left. GitHub-repo component, so test integration, and then we've got this GitHub-org test. Basically the same problem.

[00:04:29] Sorry, GitHub-repo, repo test. Basically the same problem here where we have to give it forks, watchers, and close the string. This is not really an effective test, it's because I don't have any data being passed into it, I'm running into a problem here. Prince.
>> Speaker 3: What are you doing with this, Prince?

>> Mike North: I think I may run into an additional problem. Cuz my editor is deleting [LAUGH] trailing spaces. All right, we're gonna leave that one for the time being, cuz I'm gonna fix that by providing some real data and we won't have trailing spaces anymore. So.
>> Speaker 4: I'm sorry.

>> Mike North: Yes.
>> Speaker 4: Can I ask a question?
>> Mike North: Sure.
>> Speaker 4: Would you, I mean I know we didn't do this TDD where you put up the test first. Ember had stopped us out of test, but could you talk just for a second about the concept of this specific test, like what are we gonna test?

>> Mike North: Yes.
>> Speaker 4: And what's a good test, for this?
>> Mike North: Right. So for the GitHub-repo component, I'm actually gonna skip that, cuz I wanna, I'll give you one good example of our more complex component. So I'll tell what I aim to do with the GitHub or a component.

[00:05:49] I want to verify that it behaves as I expect, and we can think about what that means, but behaves as I expect when I pass no data in at all. I wanna verify that it behaves as I expect when I pass in an org with, it's a positive test case where it has an ID, and I will verify that name is in fact rendered in the DOM when that is passed.

[00:06:17] And then I'm going to change the org. I'm gonna make sure that the data binding actually works. Change the org, and verify that the DOM changes in response. And then finally, I'm gonna programmatically click the little favorite link to the left of the org. And verify that the correct action is fired, and that the word favorite changes to unfavorite.

[00:06:39] So at a high level, this is verifying that it works as expected, and that the component with no arguments case doesn't completely blow up and throw a bunch of errors. At worst, like it would be acceptable if it just rendered some stuff but it was like there were some blanks that hadn't yet been filled in.

[00:07:04] That's acceptable compared to throwing an exception of some sort, which would be unacceptable. All right, and I like that approach, so I'm gonna actually, as I go into the acceptance test, kind of explain where I'm going with that as well as I go. So here, passing in template block text.

[00:07:28] Let's see, so I expected this. The result I got was this here. And looks like I need to add the same thing.
>> Mike North: Then I'm just gonna grab this, let it run, see where we're at. So that's there, and then this is going to.
>> Mike North: I just wanna make sure I'm looking at the correct test here.

[00:08:06] So we expected, let me comment this one out just so I know which test I'm looking at.
>> Mike North: So we expected this and got this.
>> Mike North: Followed by the forks and the watchers. All right, now this makes sense to me. So I'm actually gonna do.
>> Mike North: I'm gonna replace all the spaces, and.

>> Mike North: Is that what I'm actually doing here?
>> Mike North: Changed my mind, I'm just gonna add a couple new lines here.
>> Mike North: So no one see what's wrong here?
>> Speaker 5: You took out table block text from your rendered block, so now it's not expecting temper block text.
>> Speaker 2: This looks good now.

[00:09:26] Move closer.
>> Mike North: This is closer. So now comment out, take a look at this one. This actually looks good as well. And I'm gonna put something in here. ABC, and I will expect that to be here with what looks to be four or five spaces. Four or five new lines.

[00:09:54] Try it one more.
>> Speaker 6: It's just trailing space.
>> Mike North: Yeah, it could just be trailing space. So.
>> Speaker 2: Somebody said you still have a leading space issue?
>> Mike North: So I'm gonna start, I'm gonna actually plug in data, and we'll get rid of the trailing space issue. So the way, if we look at the comment on lines 11 and 12.

[00:10:22] We can actually set up context, we can set up something in the scope of the outside world, that we can then pass into the component with just this.set. So, I'm gonna create an object for a simulated repo. So,
>> Mike North: Ember Object extend, or I can just create it in this case, and a repo has a forks_count and a watchers_count, and a name.

>> Mike North: And then, I'm gonna pass it in.
>> Mike North: And make it available in the context.
>> Speaker 7: So the reason that you would use Ember Object as opposed to a plain old Javascript object is so that you can do like repo, sets, and its individual property?
>> Mike North: Yep, and it's also just to have it.

>> Mike North: And there's the name, right after, right before, I should say.
>> Mike North: This is why I hate the white space. All right, so this test on the top is passing, and then here we've got. I'm just gonna pass the same repo.
>> Mike North: And.
>> Mike North: Render.
>> Mike North: See, forks: 32, or 99, and delete one space.

[00:12:24] Sorry, I know this is boring. All right, so now we're actually done with fixing those tests, and now we've got, cannot read property index of undefined. I happen to know that this is in the test we're gonna focus on for our unit test. If has to do with what we've implemented in this util module we created for is an array, that's actually making the default unit test for the util, which Ember CL I created for us, blow up.

[00:12:58] So, you can filter so that we don't have to run all the tests over and over again and it'll reduce some clutter, so you can filter by a test module here. And here we're just looking at this util test. Is an array test, fantastic.