[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.