0:00
[SOUND].
Okay, we're back in our code editor, and we're located in Lecture46,
which is located in fullstack-course5/examples folder.
And you can see the app that we're testing our directive from
was copied directly out of Lecture28.
Okay, so let's close this Read Me file, and here's our app.
It's called ShoppingListDirectiveApp.
And in it we have a directive that we declared called ShoppingList.
You can see the DDO setup right here, the directive definition object.
And you can see it's using a template URL.
And if we look at this template it's basically just an h3 with a title and
then we're looping over something that is sitting inside list.items.
So we need a title and
a list.items in order to have our directive output this properly.
So let's go ahead and take a look at our shoppinglist.directive.spec.js.
So here you can see in a describe function we're saying shoppingList component.
That's just announcing what we are, and
we're also storing the $compile and $rootScope for later use in our test.
In here, I've set up the expected HTML.
And you can see here it's a whole bunch of HTML, which I'm actually replacing
all the spaces inside of it using a regular expression with empty space.
Meaning I want to remove all the spaces because the spacing
keeps changing depending on how it's actually displayed or
how I copied it from my Chrome console, so it's not going to matter the spacing.
I just want to make sure that the content is basically exactly the same, and
as you can see, these slashes right here are needed.
If I remove one, it doesn't really know how to let the string wrap around, so
these back slashes are needed so
the JavaScript interpreter will know how to read this as one long string.
Okay, so next thing we're doing is we're getting this module,
we're loading the module, which is ShoppingListDirectiveApp.
And by the way, the way I got this string is simply by running the code and
running this application and then looking in the Chrome developer tools and
copying what I thought was the correct answer, so to speak,
what I thought was produced correctly.
So now I can reuse this over and over because I can control the specific
things inside of this list that is getting generated by,
basically, mocking things out when I run the test.
So let's go ahead and look at another beforeEach,
where I'm basically just injecting the compile service and the $scope service,
there's literally nothing else to it here.
Just making sure that they're saved off, so I can later use them somewhere else.
Okay, the last thing I'm doing here is taking care of my template.
Since my template is not just a regular template,
but it's a templateURL, Angular will try to reach out and
grab this shoppingList.html using Ajax, and I don't want that to happen.
So in order to avoid that I'm using this $templateCache which is
templateCache service and what I'm doing here is basically using regular Ajax,
and you could look through this code, it's a very standard Ajax to place it or
to grab the contents of that HTML file.
And I'm using false here, which is admittedly a hack, to make sure that
it's not an asynchronous call, but it is actually a synchronous call.
And once I grab all the contents of that and they get saved into this directive
template variable, I take my templateCache and
I put it into, in other words it's like a map that has keys and
storage associated with those keys and I associate the key shoppingList.html
which is the name of our template right here which going to get reach out to.
I'm associating that with the directive template which is what the contents
of the template are once I pulled them out using just regular AJAX, well not really
AJAX more like just a regular request, to be able to pull the contents of that file.
Okay, that's really all there is to it, and now the actual test.
So here we're checking that it replaces the element with the appropriate content.
Okay, the first thing we're going to do is we're going to set up our list.
Remember if you look at shoppingList.html,
it's expecting this list that I can grab items out of.
So, it's expecting that from the surrounding content, right?
The content that's going to be surrounding this is going to be some other HTML,
maybe index.html, that this is going to get placed into and
we're expecting that list is going to be one of the objects I can access.
So I am going to go ahead and make sure that that's available.
So I'm going to create this list object and I'm going to place a couple of items
in there, an array of items here, one is going to have item 1 and quantity 1.
The other one name is item 2, quantity 2.
And what I'm going to do next is create a list property directly on
the scope object and equal it to that list that I created right here.
Once that's done I'm going to create the HTML the same way I would have
placed it inside index.html or some other template.
I'm going to create my directory which is shopping-list and
I'm going to call it my-list because apparently that is what it is requiring.
Let's go take a look.
5:28
You can see, myList is what it's expecting and I'm going to also give it a title.
And it's expecting, let's go back to the code here,
it's expecting just a regular string right here.
So since it's an @.
So I'm going to give it a string called test title.
And after I'm done with that I can take that HTML, right here that HTML, and I can
pass it directly into the compile function which is going to produce a function that
expects another argument that is a scope that I could bind things from.
Meaning the HTML is going to look for
certain things like this list property on some scope that I give it right here.
So therefore, so this is going to produce a function that is when you
execute this function, which is what we're doing, basically, in line immediately,
is going to use this scope as the data holder for whatever this directive needs.
So it's going to bind the data to the directive
from the scope that I provide right here.
And that's how we get this element,
compiled, bound with the data element, right here.
And the next thing I need to do is I need to fire all the watches
such that the scope expression will actually get evaluated and
whatever data that I bound to this compiled html will actually get
inserted inside of our html automatically for us by Angular.
Once that's done, I can now start testing.
So what I'm doing here is I'm calling element.html, and
since I don't really know all the different classes on whatever else
that Angular will insert into my HTML.
I'll go ahead and replace all the spaces because I don't know how it's going
to space things out, with basically just an empty space.
And then, I'm going to test it to contain the expected HTML.
Which if you look, I also basically grabbed
from the Chrome Developer Tools and I also replaced all the spaces in there.
So you know it's going to be the same thing but without all these spaces.
And all I want to know is, is it same exact string or not?
So let's go ahead and go to the browser.
And I have this already started, so if I click SpecRunner.html,
you can see shoppingList component,
which is actually a mistake because really it should say shoppingList directive.
Let's go back and
quickly change that, let's put it that describe shoppingList directive.
8:03
Okay, so let's summarize.
In order to test the directive, you should roughly follow the following steps.
The first thing you would do is you would use a mock inject method to inject
the $rootScope and $compile services in beforeEach function.
If the directive you're testing is using templateUrl property,
you use some method to place the template contents into the $templateCache.
Now the two available methods are the hacky way that we did it In this lecture,
which is making kind of a asynchronous call and
kind of turning off the asynchronous part of it and making it synchronous.
Or you could use the command line Karma test runner, and
this is really what's more recommended than what we did in this lecture.
In the test method, you place whatever properties are needed for
the directive on the $rootScope.
Therefore, you're really simulating an environment
in which a directive really functions and runs.
The next step is for
you to use the $compile service to compile the directive string,
which is what your directive is declaring itself to be in your regular HTML.
And then using the return function, or the $compile service,
to bind with the data by passing it the $rootScope service.
The final step to prepare you to be able to test things is for
you to call the $rootScope.digest(), and
that updates the compiled HTML to whatever data you bound to that particular scope.
And the HTML is now ready to be tested for
what it would look like when it shows up to the end user.
And now all you really need to do is to grab that HTML with the .html()
method on that element that you compiled and bound to the data to and
just compare it with some data or some string that you know to be kind of
the ground truth and what you expect the end result to be.
Yaakov ChaikinAdjunct Professor, Graduate Computer Science
