Ember 2.x Ember 2.x

Exercise 8 Solution, Part 2

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 2" 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 continues the Exercise 9 solution by writing the test for the is-in-array computed property macro.

Get Unlimited Access Now

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

>> [MUSIC]

>> Mike North: Is an array returns a computed property. And what we're trying to do here is evaluated as a function with no arguments in it. We expect that there are gonna be arguments passed of this thing. We expect there to be a context, in which this property can be evaluated.

[00:00:19] None of that's true, so it's blowing up, understandably. So the way I advise unit testing, computer property macros is to just define a new Ember object, set some properties up on it, set your computer property on it. And then or set up your computer property on it and then change the dependencies and observe what happens not observable.

[00:00:43] But not like create an observer but programmed for what happens in response to those changes. So we'll call it type ember object extend. And we're going to give it a property called item. And list. And then, we're gonna give it isItemInList, InArray, item and list. So, this is looking very similar to how we treated our GitHub org component and that we're just passing in two property keys.

[00:01:27] In our case we had org as the item. Our array was going into the favorites service but conceptually very similar. And my assertion is first gonna be, so I need an instance by the way.
>> Mike North: So I'm being explicit here. You could chain, extend, and create together and just spit out.

[00:01:55] You're basically defining a factory and then creating an object immediately thereafter, not holding a reference to the factory, but that would be fine in this case too. So what I wanna test is first that we can get the property and that it's what we expect. So I want to make sure that equal is a different assertion here.

[00:02:21] Obj, get item, isItemInList, and that should be in this case, false. And then it's a good practice as the third argument for equal or the second argument for okay, to write a message. Like a description of what this assert is doing. The reason is that it will appear in the test runner and especially if you're looking at like CI failures, it helps to know which assertion failed.

[00:02:52] And to not have to like dive in and otherwise you'll just see like pass, pass, pass, pass, pass for all of the assertions in the test. So this'll be Initial check for not-in-list. And it passed. And what do I mean by these descriptions? If we open this up, you see I have this here.

[00:03:19] We can compare that to this, which is far less useful. Okay. What is okay? So the next thing to do, is I'm going to do obj.get, list, add object six and then I'm gonna make a similar assert after except I expect it to be true.
>> Mike North: And fantastic, so it's not on the list.

[00:03:59] We add it to the list, it flips to true. And then we can even do something like this. I am not gonna go too much further cuz it's, don't wanna bore you guys but if we do set['item', 52].
>> Mike North: So we are basically checking the other dependency now.

>> Mike North: After changing the object it's not on the list anymore.
>> Mike North: And now we're gonna have three passing insertions. So this I mean you could go much further but this is good. This gives you sort of a test case that both of your dependencies work and for this simple computer property macro this is pretty good.

[00:04:54] So now let's move to our component integration test. So we're done with step one.
>> Mike North: The GitHub org test and I'm going to switch modules over here. And here we go. So okay, okay, that's fantastic. I'm gonna elaborate a little. So inline syntax.
>> Mike North: Basic rendering.
>> Mike North: Block syntax

>> Mike North: Fantastic so that's a little bit more informative. I'm gonna actually set up a new test just to demonstrate how that works and we can clean some of this stuff up. Alright. So we still expect two zero assertions will run. Understandable why this is failing. So what I'm going to do now is pass in an object that looks like what we expect an org to be and we'll see if the correct.

[00:06:13] Text for the org name shows up in the dom.
>> Mike North: And I'm gonna just run this test here.
>> Mike North: So worth noting that all of this is happening synchronously. Or it should be.
>> Mike North: This may be a problem.
>> Mike North: Get rid of this.
>> Mike North: [LAUGH] duh I don't have my dev tools open.

[00:07:23] Okay so notice it's kind of hard to see I'm gonna zoom in here. Notice that we have a div here and we have something that looks like our component, it's rendering sort of in an empty area but just be aware that you can put debugger statements midway through your test.

[00:07:40] In this case because it's synchronous we can just put it here and I'll show you the equivalent when we're doing the acceptance test and we're dealing with asynchrony. But here we can freeze and I can select this. To be quite honest I forgot what this actually looks like, okay so we can look for, we use find.

>> Mike North: Let's see how that works.
>> Mike North: Now I'm gonna make my life a little easier.
>> Mike North: I'm going to add a class to GitHub org.
>> Mike North: So that it's easier to build a selector for it rather than trying to find a ridiculously deep path of some sort, and so now if we do.

>> Mike North: There's our dom element and we can look for the a tag and then we can see what's the text there, perfect.
>> Mike North: Assert equal and my org. And to avoid more JSON problems you can actually do ember.$ which is just so you don't have to add more globals to your JSON config.

[00:09:14] Delete the debugger. Expect this to pass. And it does. All right. So, that is proving that works there and then we should be able to do org set id other and add a new assertion.
>> Mike North: So this is failing because of this rundown issue. And this has to do with setting properties, setting properties on objects.

[00:09:49] Remember how I showed this diagram of the red and blue blocks? Typically that stuff will happen in a run loop, so I've walked into this to show you guys how to get around this problem it's this simple. Ember.run arrow function.
>> Mike North: That's it.
>> Mike North: And, I'm being silly.

[00:10:16] The set is what needs to be in there. All right. So, now we're actually just seeing the fact that I'm testing for something that the object doesn't actually handle, right. So, we have a dependency on this object, not on the property ID for the object. So, if we swapped out the object as a whole, we would see that things would update as we expect.

[00:10:46] But in this case, I've changed something that really we don't have a dependency on. So, does that make sense why this is working the way it is? If we look at his inlay. So we're passing an item which is an object inside which is an ID. But we're just declaring a dependency on the outer, the object as a whole.

[00:11:10] If we did something like this.
>> Speaker 2: But that's not what you're testing.
>> Mike North: I'm sorry. I'm kind of confused here.
>> Mike North: [NOISE] Org set ID other. All right, I'm actually gonna skip over this. I just wanted to show you guys that we're on mainly.