Lecture 45, Part 2: Testing AngularJS Services and $http

Loading...

Do curso por Johns Hopkins University

Single Page Web Applications with AngularJS

1362 classificações

Johns Hopkins University

Single Page Web Applications with AngularJS

1362 classificações

Curso 5 de 6 em Specialization Desenvolvimento Web com Ruby on Rails

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.

Na lição

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 44, Part 1: Testing AngularJS Controllers6:02

Lecture 44, Part 2: Testing AngularJS Controllers6:12

Lecture 44, Part 3: Testing AngularJS Controllers2:41

Lecture 44, Part 4: Testing AngularJS Controllers5:23

Lecture 45, Part 1: Testing AngularJS Services and $http3:51

Lecture 45, Part 2: Testing AngularJS Services and $http4:58

Conheça os instrutores

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

[SOUND] Okay,

so we're back in our code editor and I'm located in lecture 45 folder,

which is located in full stack dash course five examples folder.

And here, I opened up the readme.txt that tells us that code for

the entire application code that we're actually going to be testing

is copied directly from Lecture 25.

So you can look at that lecture if you want to see

it running in the original state.

Here we're going to take a look as to what that code does.

And basically it has a controller here that uses this menu category service.

And this menu category service reaches out to this API base which is this

URL right here.

If we scroll down you'll see this menu category service.

And basically it allows us to pull categories of different items within

the restaurant menu and we use this API base path because we injected

together with our $http service, into our MenuCategoriesService.

So that in fact is the service we want to test, and for this short lecture we're

just going to test one method which is getMenuCategories.

And what we want to get out of it is to make sure that we set it up properly such

that we passed back the response that is returned with the data from the server.

So what we will going to do this, let's go to menucategories.service.spec.js.

That's the file that we are writing our test in.

And let's take a look as to how we set it up.

The first thing we're doing here is we're calling the beforeEach and

we're injecting our module, our application module, MenuCategoriesApp.

That's the same one that came from

the main one from the application we're testing.

The next we're going to do is inject the dollar sign injector service.

Using that service, we can now call the get method and

literally pull out all the things we want to pull out from the angular context.

And one of them is the MenuCategoriesService itself that

we're testing.

Notice we're just saving it off as a variable Inside our describe,

that we can then reference inside of our it test method.

Notice that we also are not injecting anything manually inside

the MenuCategoriesService, even though it requires some injections.

We don't need to that.

Angle will take care of that for us automatically.

We also need the $HTTP back end so we can use that to mock out our requests.

And we also need the API base path and

that's what was defined right here as a constant because we need to reuse that

when we make our fake or mocked out network calls.

Once we expose those three things outside of our before each we

can then use it inside the it, the test method.

You can see herethe HTTP backend,

we're using the whenGET and we're basically compiling this URL.

We're saying ApiBasePath + the slash categories, and

if you take a look into our app and

scroll down to the actual method we're testing right here, getMenuCategories.

It is the API base path + /categories.json

which is exactly what we're doing here, /categories.json.

And then we're telling it when that call gets made, go ahead and intercept it and

respond with an array that just has two things, lunch and dessert strings.

That's really all we want.

We want to make sure it's set up properly.

Once we set this up, we can then called menucategories.getMenuCategories and

we know that that returns a promise because the htp server returns a promise.

And we're saying that we're going to catch that promise in the then function, and

we're going to grab the response.

And the response is response.data.

The data of the response is actually sitting inside the data property.

And depending, of course, on your response,

it might be a little bit different.

You might be just passing the data directly out of the getMenuCategories.

But in our case, we'd pass the entire response out.

That might have been a mistake, but it is what it is now.

Okay, so, we're checking now and expecting that response.data is equal to

what we basically told it to send back, which is lunch and dessert as an array.

And then, of course, we want to make sure not to forget since this is

an asynchronous call, want it go ahead and flush it right away, so

basically it will behave like a synchronous call.

So, let's save it.

Let's go back to our browser.

And let's click, I already started the browser sync.

So let's click on our test runner.

And you can see, should return categories list, is executing properly,

and we're seeing, zero failures so we're all good to go.

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2018 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play