Explore
For Enterprise
Join for Free
Log In

浏览
搜索
企业版
登录
免费加入

Lecture 44, Part 4: Testing AngularJS Controllers

Loading...

使用 AngularJS 创建单页应用

约翰霍普金斯大学

4.9（1,498 个评分） | 61K 名学生已注册

课程 5（共 6 门，Ruby on Rails Web 开发专项课程）

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.

查看授课大纲

您将学习的技能

Unit Testing, JavaScript, Angularjs, Web Development

审阅

4.9（1,498 个评分）

5 stars
1,373 ratings
4 stars
103 ratings
3 stars
14 ratings
2 stars
4 ratings
1 star
4 ratings

PB

Mar 28, 2017

First of all I want to thank the author of this course in investing his time sharing knowledges about this JS framework. The course helped me to better understand the mechanism of Angular framework.

DR

Sep 18, 2016

This is an excellent course. The lectures are clear and very well-prepared. The course material is excellent and Yaakov is an excellent presenter: very informative and engaging. Highly recommended.

从本节课中

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

脚本

[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 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

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

通过 Google Play 获取

Coursera
关于
管理团队
工作机会
目录
证书
MasterTrack™ 证书
学位
企业版
政府版

社区
Learners
Partners
Developers
Beta Testers
Translators

连接
博客
Facebook
领英
Twitter
Instagram
YouTube
技术博客

更多
条款
隐私
帮助
内容访问
媒体
联系我们
目录
附属公司