angular2 学习笔记 ( unit test 单元测试 )

第一次写单元测试.

以前一直都有听说 TDD 的事情.

今天总算是去尝试了一下.

先说说 TDD 的想法, 是这样的,

开发项目的流程 : 确定需求 -> 写类,接口,方法的名字(不写具体实现代码哦) -> 写测试代码 -> 这时测试的话一定是全部 fail 因为实现代码还没写嘛 -> 写实现代码 -> 运行测试 ...

这样的流程适合需要敏捷开发的项目, 如果你的项目经常需要扩展, 而且扩展往往是不在预计范围内的, 那么你必然需要使用敏捷开发模式和流程.

也只有把测试写好，以后代码修改了以后才不需要人工的再去测试一遍.

倒过来看的话，如果你的项目逻辑简单，扩展总是在预计范围呢, 那么你硬去搞敏捷开发写测试代码的话，就有点浪费了.

angular 框架支持测试. 使用 karma , jasmine, cli 来跑。

个人觉得要写的好测试, 对 angular 的依赖注入机制要有点基础.

通常我们会测试的东西是 component 和 service.

记得不是所以的东西都要测试的，就好像数学考试一样, 不需要每一题都 double check, 只测试那些容易出错的地方就可以了.

那什么地方容易出错呢. 这个因人而异, 看你自己的经验.

我个人的建议是测试那些关系比较多和复杂的地方.

比如我们要测试 component

我们需要先把 component 的依赖准备好，比如 component 依赖的服务.

beforeEach(() => {
TestBed.configureTestingModule({
imports: [StoogesModule],
declarations: [
SimpleComponent
],
providers: [
MockBackend,
BaseRequestOptions
]
});
TestBed.overrideComponent(SimpleComponent, {
set: {
providers: [
{
provide: Http,
deps: [
MockBackend,
BaseRequestOptions
],
useFactory: (backend: XHRBackend, defaultOptions: BaseRequestOptions) => {
return new Http(backend, defaultOptions);
}
}
]
}
});
TestBed.compileComponents();
this.fixture = TestBed.createComponent(SimpleComponent);
this.com = this.fixture.debugElement.componentInstance;
});

TestBed.configureTestingModule 是让我们写准备环境的. 它和 NgModule 差不多.

MockBackend 是模拟 http 数据用的

TestBed.overrideComponent 这个方法用来覆盖组件定义好的 provider

it("test", async(inject([MockBackend], (backend: MockBackend) => {
const mockResponse = {
data: [
{ id: 0, name: 'Video 0' },
{ id: 1, name: 'Video 1' },
{ id: 2, name: 'Video 2' },
{ id: 3, name: 'Video 3' },
]
};

backend.connections.subscribe((connection) => {
console.log("test");
connection.mockRespond(new Response(new ResponseOptions({
body: JSON.stringify(mockResponse)
})));
});

let com = this.com as SimpleComponent;
com.dada().subscribe(v => {
expect("haha").toBe("haha");
});
})));

async() 是帮助我们写异步的, 放在 It 的方法里面就行了

inject() 自然是依赖注入 service 咯, 这个写法是不是让你想起了 ng1 ?

backend.connections 是拦截所有的请求, 我们进一步判断 connection request url 来做出不同的 response data.

可以看出来，主要的代码都是为了搭建环境. 通过依赖注入去覆盖原有的 provider.

我们在看看 service.spec.ts

describe("test", () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
SimpleService
]
});
});

it("test1", async(inject([SimpleService], async (simple: SimpleService) => {
let data = await simple.getData();
console.log("a");
expect(data).toBe("a");
})));
});

这个比较简单, 因为不用 create component and override component provider.

写 await async 也是 ok 的哦.