玩转Angular1(18)

文章目录

AngularJS(v1.5.8)已经成为项目们的基本框架,《玩转Angular1》系列用于记录项目中的一些好玩或者比较特别的思路。
本文介绍使用mock本地数据模拟的过程。

模拟数据相关


angular-mock简介

Angular-mock模块为angular单元测试提供模块定义、加载、注入等支持。辅助Karma、Jasmine等JS测试工具来模拟angular方法,测试angular应用。
除此之外,Angular-mock还扩展了ng的多个核心服务,使之可以被测试代码以同步的方式进行审查和控制。

mock功能:

  • 基于数据模板生成模拟数据
  • 基于HTML模板生成模拟数据
  • 拦截并模拟ajax请求

这里我们只需要用到最后一个功能即可。

模块组件:

  • 对象

    • angular.mock:’angular-mocks.js’的命名空间,其中包含测试代码。
  • 服务

    • $exceptionHandler:通过$exceptionHandler模拟实现重抛或记录错误信息。查看$exceptionHandlerProvider获取配置信息。
    • $log:模拟实现$log收集所有数组中已记录的日志信息(每一个记录等级一个数组)。这些数组被作为logs属性可每个具体等级的log方法获取。例:对于等级error数组可被 $log.error.logs获取。
    • $interval:模拟实现$interval服务。
    • $httpBackend:为使用了$http service的应用提供单元测试的伪HTTP后台。
    • $timeout:该服务仅是一个简单的装饰器,为$timeout服务添加了”flush”和”verifyNoPendingTasks” 方法。
    • $controller:为$controller提供了额外的bindings参数,这在测试使用了bindToController指令的控制器时很有用处。

$httpBackend

$httpBackend是ngMock模块中的服务,可以模拟后端Http请求返回。
在路由匹配时,将会拦截请求并返回模拟的结果。

$httpBackend常用方法:

  • when:新建一个后端定义(backend definition)。when(method, url, [data], [headers]);
  • expect:新建一个请求期望(request expectation)。expect(method, url, [data], [headers]);

  • when和expect都需要4个参数method, url, data, headers, 其中后2个参数可选。

    • method表示http方法注意都需要是大写(GET, PUT…)
    • url请求的url可以为正则或者字符串
    • data请求时带的参数
    • headers请求时设置的header

如果这些参数都提供了,那只有当这些参数都匹配的时候才会正确的匹配请求。
when和expect都会返回一个带respond方法的对象。
respond方法有3个参数status,data,headers通过设置这3个参数就可以伪造返回的响应数据了。

$httpBackend.when与$httpBackend.expect的区别在于:
$httpBackend.expect的伪后台只能被调用一次(调用一次后会被清除),第二次调用就会报错,而且$httpBackend.resetExpectations可以移除所有的expect而对when没有影响。

when和expect都有对应的快捷方法whenGET, whenPOST,whenHEAD, whenJSONP, whenDELETE, whenPUT; expect也一样

参考

添加mock模拟数据


bootstrap.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// ...
// 注入angular相关依赖
const dependencies = [
...
'ngMockE2E'
];
// 获取angular的app
const ngModule = angular.module('AngularFree', dependencies);
// 注入模拟服务
require('angular-mocks');
import mockModule from './mock';
mockModule(ngModule);
// ...

添加mock服务

我们在app文件夹下添加mock文件夹,用于放置mock相关的设置和数据。
添加index.ts文件,用于总的输出:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 文件夹根据模块(路由)分相关的服务
import user from './user'; // 用户模块数据模拟
import service from './service'; // 服务模块数据模拟
import system from './system'; // 系统模块数据模拟
export default ngModule => {
// 注入各个模块的模拟服务
user(ngModule);
service(ngModule);
system(ngModule);
ngModule.run(['$httpBackend', $httpBackend => {
// 登录
$httpBackend.whenPOST(/login[^/]*/).respond(require('./login.json'));
// 需添加其余的passThrough,这样未添加拦截的则可以正常发送请求
$httpBackend.whenGET(/.*/).passThrough();
$httpBackend.whenPOST(/.*/).passThrough();
$httpBackend.whenPUT(/.*/).passThrough();
$httpBackend.whenDELETE(/.*/).passThrough();
}]);
};

服务的数据模拟

每个服务都使用相似的方式来拦截路由和返回数据:

1
2
3
4
5
6
7
8
9
10
11
12
13
// app/mock/user/index.ts
export default ngModule => {
ngModule.run(['$httpBackend', ($httpBackend) => {
// 用户列表数据获取
$httpBackend.whenGET(/users[^/]*/).respond(require('./userList.json'));
// 用户详情获取
$httpBackend.whenGET(//users/(.+)/).respond(require('./userDetail.json'));
// 用户新建
$httpBackend.whenPOST(//users/(.+)/).respond(200, '');
// 用户编辑
$httpBackend.whenPUT(//users/(.+)/).respond(200, '');
}]);
};

然后我们通过添加相应的json文件,里面保存着需要返回的数据,则可以很方便地使用了呢。

结束语


这节主要简单介绍使用mock本地数据模拟的过程,这也是为什么我们之前创建的一些http服务都经过angular的$http服务进行封装的原因,这样的话我们就能很方便地使用angular的mock和$httpBackend服务了。

查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢