Lecture 44, Part 4: Testing AngularJS Controllers

Loading...

来自 Johns Hopkins University 的课程

使用 AngularJS 创建单页应用

1400 个评分

Johns Hopkins University

使用 AngularJS 创建单页应用

1400 个评分

课程 5（共 6 门，Specialization Ruby 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.

从本节课中

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

与讲师见面

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

[MUSIC]

Okay so I'm back in my code editor, and I'm still in Lecture44 folder.

Here, I'm looking at the shoppinglist.controller.spec-v2.js,

the version 2 of the same Test setup.

I didn't want this test running before so

I stuck an x right in front of describe to basically temporarily disable it.

So I'm going to remove that x now.

The first thing we see is the beforeEach function.

And you can see there we have a couple of things we're doing here.

First we're creating our mock service called "ShoppingListServiceErrorMock".

And second we're actually loading our module that is our application module so

we can hook into that and test our controller.

Lets take a look as to how we're creating this mock service.

The way we're creating it is by letting angular inject the dollar sign provide,

the provide service.

The provide service has a service method, among other methods, and

we're calling the service method.

By passing it the name of our service,

which is ShoppingListServiceErrorMock, which is our mock service.

And right in line we're creating the service for us to use later.

And you can see,

it's the same type of stuff that you would use when you create a regular service.

I created this service local variable and attached a method to it called add item.

And created another one called add [INAUDIBLE] getItems, which returns null.

Here you could see I'm just returning that error message called

with a message test message.

So, that's it, now angular knows that

such a service called ShoppingList service error mock exists.

Let's go down and take a look as to what we're injecting.

When we're injecting stuff, we're no longer injecting just the controller that

we need to instantiate, we're also injecting the ShoppingListService mock.

Just like we would inject any other available service or controller,

and so on.

We're injecting it right here.

This one was not created inside this beforeEach.

Instead it was created using angular $provide.service method.

So, once we injected it,

we could actually provide it as that instance that got injected right here.

We could provide it as a value to our dollar sign controller call

which basically creates our shopping list controller and passes it in

the injected service, in this case with a key ShoppingListService and

the injected service instance that we're passing is ShoppingListServiceErrorMock.

So exactly the same one as before,

except now we're having angular inject it into the beforeEach function.

Instead of creating it manually ourselves inside of it.

Okay, so the last part is the actual test method.

And a test function is exactly the same, we're just calling this add item,

which triggers our shopping list service error mock to throw an error.

That error gets translated and the controller is supposed to set the error

message to be test message, whatever gets returned from that ShoppingListService,

which is Test message.

And we verify that it is, in fact, the case by calling the expect function.

If we go back, now that we saved it, we can see that both specs run and

spec version 2 of shopping list controller also run in green and

both of them passed with zero failures.

Okay, so let's summarize angular provides

ngMock module to help us with unit testing of our angular applications.

To test a controller you need to do the following.

You need to load the module that controller is in

with the angular.mock.module.

Passing it the name of the module that you developed for your application.

Then you used the dollar sign controller or

the controller service to instantiate the controller you want to test.

You use the controller instance to invoke methods, access properties and so on.

Now most of the setup that's done for the test is done in the beforeEach function.

The very least thing you should do is at least call the module with

the name of the module, but maybe even do some more preparations for your tests or

the preparations that all of your tests in your test suite, or

set of tests, are sharing between each other.

Now there's a couple of ways of creating these mock objects we're going to need in

order to control the environment our test runs in.

One of them is to create those objects manually.

But another one is you could use the dollar sign provide or

the provide service that you can inject, but

you have to inject it only through the module method that we spoke about before.

For other services you can use the regular, angular.mock.inject method and

they work just fine, because they resemble regular services as opposed to provide,

is really talking about provider services that we spoke about before when we

used the .config method that only provider services can be injected into that.

As opposed to other artifacts and resources in your angular application.

You could use the regular injection method.

Then this case, you would use the regular, or

the mock version of the regular, mock.inject method.

探索我们的目录

免费加入并获得个性化推荐、更新和优惠。

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2018 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取