更新 2018-06-03

spy object

当组件或则服务有对其它服务依赖的时候,我们通常会把这些依赖写成 spy 或则叫 fake.

为什么这样做的呢 ?

主要的原因是我们不应该依赖具体的代码,假设具体的代码错了,我们这个服务也会跟着报错.

所以单元测试的 "单元",就是说我们必须把我们要测试的东西独立放到一个测试环境里头,对外部任何依赖都做隔离.

如果报错,那么一定是它错了,绝对不能是因为被其它人影响而报错. 所以我们必须把依赖的服务都写成 spy.

describe('SecondService', () => {let firstServiceSpy: jasmine.SpyObj<FirstService>; // 定义依赖的服务beforeEach(() => {firstServiceSpy = jasmine.createSpyObj('firstService', ['getValue']); //创建假的服务firstServiceSpy.getValue.and.returnValue('firstValue'); // 直接设定返回的结果 (这样不管这个服务的具体实现正不正确, 我们都不会被影响到)TestBed.configureTestingModule({providers: [SecondService,{ provide: FirstService, useValue: firstServiceSpy } // 替换掉 provide 就可以了]});});it(`getValue should return 'firstValueSecondValue'`, inject([SecondService], (secondService : SecondService) => {    expect(secondService.getValue()).toBe('firstValuesecondValue'); }));});

第一次写单元测试.

以前一直都有听说 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 的哦.

转载于:https://www.cnblogs.com/keatkeat/p/6440806.html

angular2 学习笔记 ( unit test 单元测试 )相关推荐

  1. Merriam-Webster's Vocabulary Builder 学习笔记 Unit 6

    Unit 6 [equ-]:"equal" equalize equivalent:相等的 equilateral:等边的 equation:方程式:等式:等同看待:(多种因素的) ...

  2. Merriam-Webster's Vocabulary Builder 学习笔记 Unit 5

    Unit 5 [mal-]:"bad" malady:疾病:弊病 malpractice:渎职 malodorous:难闻的 malefactor:犯罪分子 malevolent: ...

  3. Merriam-Webster's Vocabulary Builder 学习笔记 Unit 8

    Unit 8 [port-]:"to carry" portable porter transport        trans-,转移,-port,携带 export porta ...

  4. angular2 学习笔记 ( Http 请求)

    更新 : 2017-06-08  总觉得 angular 的 http 怎么就多了 Request, Headers, Response 这些麻烦东东呢. 原来这些都是游览器的"新特性&qu ...

  5. Angular2学习笔记——NgModule

    在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并 ...

  6. Angular2学习笔记——在子组件中拿到路由参数

    工作中碰到的问题,特此记录一下. Angular2中允许我们以`path\:id\childPath`的形式来定义路由,比如: export const appRoutes: RouterConfig ...

  7. Merriam-Webster's Vocabulary Builder 学习笔记 Unit 19

    Unit 19 2018.05.27 [bio-]:"life" biology:生物学 biosphere:生物圈 biotechnology:生物技术 bionic:仿生学的 ...

  8. Merriam-Webster's Vocabulary Builder 学习笔记 Unit 24

    Unit 24 2018.01.13 [mand-]:"entrust" or "order" command commandment:戒条 commando: ...

  9. ng bootstrap css,Angular2学习笔记-ng bootstrap中motal组件使用

    ng bootstrap是一个angular UI bootstrap库,里面包含了一些基本的UI组件(日期选择组件,按钮,下拉框等).目前的版本为v1.0.0-alpha.14,基于angular2 ...

最新文章

  1. Pokémon Go数据收集是否带来隐私问题
  2. 在开课吧学python的经历-28岁,年薪30万,工作5年,被裁掉只用了5分钟
  3. 更换jdk Error:could not open '...jvm.cfg'解决方法
  4. Python3 turtle教程
  5. what should you do if you want to have a high efficiency for communication
  6. EditText 被遮挡和显示不全问题
  7. 第3章 Python 数字图像处理(DIP) - 灰度变换与空间滤波5 - 分段线性变换 - 灰度级分层
  8. nutz配置druid监控
  9. fileservice 类代码放哪里_一步步开发Windows服务(Windows Service)[转]
  10. 树莓派4B引脚定义及运行实例
  11. win7资源监视器介绍
  12. QQ互联开发者信息认证
  13. 什么是Servlet容器
  14. 非常有用的150个生活小常识
  15. (超详细笔记整理)动力节点_老杜 | JavaSE进阶 【P486之后】
  16. coffeescript html5,CoffeeScript入门
  17. 腾讯AI Lab 2020年度回顾:科技向善,迈向通用人工智能
  18. rls lms 对比 matlab,自适应均衡器的LMS和RLS两种算法的特性与仿真分析
  19. Unity Transform 检视器快速复制粘贴
  20. sklearn sklearn中KFold()的具体用法

热门文章

  1. Sublime Text 使用介绍、全套快捷键及插件推荐
  2. linux实用小功能
  3. 如何继承SWT组件?
  4. JVM优化系列-详解JVM堆内存分析
  5. 35岁前需要完成的事
  6. MongoDB中MapReduce介绍与使用
  7. python 减少可调用对象的参数个数
  8. Laravel 5.4: 特殊字段太长报错 420000 字段太长
  9. 20165302 学习基础和C语言基础调查
  10. 利用微服务构建现代应用(一)