Lecture 46, Part 2: Testing AngularJS Directives

Loading...

Del curso dictado por Johns Hopkins University

Single Page Web Applications with AngularJS

1429 calificaciones

Johns Hopkins University

Single Page Web Applications with AngularJS

1429 calificaciones

Curso 5 de 6 en SpecializationRuby on Rails Web Development

Do you want to write powerful, maintainable, and testable front end applications faster and with less code? Then consider joining this course to gain skills in one of the most popular Single Page Application (SPA) frameworks today, AngularJS. Developed and backed by Google, AngularJS is a very marketable skill to acquire. In this course, we will explore the core design of AngularJS 1.x (latest version of AngularJS 1), its components and code organization techniques. We will enhance the functionality of our web app by utilizing dependency injection to reuse existing services as well as write our own. We will create reusable HTML components that take advantage of AngularJS data binding as well as extend HTML syntax with a very powerful feature of AngularJS called directives. We’ll set up routing so our SPA can have multiple views. We will also learn how to unit test our functionality. At the end of this course, you will build a fully functional, well organized and tested web application using AngularJS and deploy it to the cloud.

De la lección

Module 5 - Form Validation, Testing, and Restaurant Site Development

Welcome to module 5! This is the last module in the course. We'll start this module by learning just how easy it is to validate forms with Angular. We will then delve into unit testing our AngularJS code. We will go over how to set up tests for every type of major Angular artifact: controller, service, directive, and component, as well as how to test services that access the network through the HTTP service. However, the last part of the module is the most fun. We will take the site that was developed for our real client in my previous course and re-write the entire thing using AngularJS. However, the coding fun doesn't have to stop there. After you finish the required part of the course, you can move on to the optional bonus part where we take our newly developed AngularJS application and enhance with it even more features that will allow the restaurant owners to administer their own data. We'll go over setting up authentication, editing restaurant menu items, uploading menu item pictures and so on.

Lecture 46, Part 1: Testing AngularJS Directives6:08

Lecture 46, Part 2: Testing AngularJS Directives10:04

Lecture 47, Part 1: Testing AngularJS Components2:13

Lecture 47, Part 2: Testing AngularJS Components5:32

Conoce a los instructores

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science
Whiting School of Engineering

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

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.

Okay, and let's go back and now it's now going to say shoppingList directive, and

it replaces the element with the appropriate content.

And I can see it's green, I have one spec with zero failures, so

therefore our tests succeeded and the strings match exactly.

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.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2019 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play