最近进入到新的项目，前端采用Angular开发，恶补了一阵子关于Angular的知识，跟Angular相关的Rxjs和Ngrx也不能少。经过几个小的功能模块的开发后，也开始适应了Angular+Rxjs+Ngrx的开发模式。
但是，写UT的时候，却又是【一！脸！懵！逼！】
使用TestBed解决注入问题
首先面临的问题是：Angular一般会使用依赖注入（DI）来创建服务， 当某个服务依赖另一个服务时，DI 就会找到或创建那个被依赖的服务。 如果那个被依赖的服务还有它自己的依赖，DI 也同样会找到或创建它们。但是在编写单元测试的时候，谁来帮忙做注入？
下面是一个例子：
// file: Master.service.ts
@Injectable()
export class MasterService {
constructor(private subService: SubService) { }
getValue() { return this.subService.getValue(); }
}
MasterService 依赖于SubService, 通过构造函数注入，SubService的定义如下：
// file: Sub.service.ts
@Injectable()
export class SubService {
constructor() { }
getValue() { return "value"; }
}
如果要为MasterService写UT，就需要解决依赖问题。
方法一：
比较“笨”的一个解决办法就是自己在单元测试中主动创建要注入的实例，然后作为构造函数传递，如下：
// file: master.service.spec.ts
describe('MasterService without Angular testing support', () => {
let masterService: MasterService;
it('#getValue should return real value from the real service', () => {
//new一个SubService的实例，然后通过MasterService的构造函数传入
masterService = new MasterService(new SubService());
expect(masterService.getValue()).toBe('real value');
});
it('#getValue should return faked value from a fakeService', () => {
//new一个假的SubService实例，但是它实现了Subservice的方法，然后通过MasterService的构造函数传入
masterService = new MasterService(new FakeSubService());
expect(masterService.getValue()).toBe('faked service value');
});
it('#getValue should return stubbed value from a spy', () => {
// 通过jasmin创建一个spy对象，把spy对象通过MasterService的构造函数传入
const subServiceSpy =
jasmine.createSpyObj('SubService', ['getValue']);
const stubValue = 'stub value';
subServiceSpy.getValue.and.returnValue(stubValue);
masterService = new MasterService(subServiceSpy);
expect(masterService.getValue())
.toBe(stubValue, 'service returned stub value');
expect(subServiceSpy.getValue.calls.count())
.toBe(1, 'spy method was called once');
expect(subServiceSpy.getValue.calls.mostRecent().returnValue)
.toBe(stubValue);
});
});
缺陷在于：当要注入的对象比较复杂的时候，这种方法就会力不从心。
方法二（推荐）：
其实，Angular官方也考虑到了这个问题，提供了TestBed（来自@angular/core/testing）。TestBed 会动态创建一个用来模拟 @NgModule 的 Angular 测试模块。
具体如下：
// file: master.service.spec.ts
describe('MasterService without Angular testing support', () => {
let masterService: MasterService;
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
MasterService,
SubService
]
});
//从TestBed获取一个masterService的实例，不必关心SubService，Angular会自动注入
masterService = TestBed.get(MasterService);
});
it('#getValue should return real value from the real service', () => {
expect(masterService.getValue()).toBe('real value');
});
});
TestBed.congigureTestingModule方法接受一个配置对象，其属性与@NgModule类似（imports，providers,declarations)等，具体参见https://angular.cn/api/core/testing/TestModuleMetadata），模拟出一个@NgModule。
在这个例子中，在provider中声明了MasterService和SubService，此时TestBed会管理他们的生命周期，在使用TestBed.get(MasterService)时，TestBed会帮助实例话具体的对象和构建依赖对象。
同样的，在使用TestBed时，我们也可以使用spy对象，如下：
// file: master.service.spec.ts
describe('MasterService without Angular testing support', () => {
let masterService: MasterService;
beforeEach(() => {
//创建一个spy，名字是SubService，并且提供getValue方法
const spy = jasmine.createSpyObj('SubService', ['getValue']);
TestBed.configureTestingModule({
providers: [
MasterService,
{ provide: SubService, useValue: spy }//使用spy的SubService
]
});
//在masterService实例话的时候，会取到spy的SubService对象
masterService = TestBed.get(MasterService);
});
});
弹珠测试
其次就是针对Rxjs的Observable的单元测试，模拟Observable的数据流和异步是很困难的一件事情。
传统的做法是spy observable的值，并且在subscribe中使用done。
it('async with observable', (done: DoneFn) => {
// the spy's most recent call returns the observable
asyncMethod.calls.mostRecent().returnValue.subscribe(() => {
// check the result here;
done();
});
});
但是不足之处在于无法模拟Observable的数据流，Rxjs提供的弹珠测试的方式，很好的解决了这个问题。它们可以使我们以同步且可靠的方式来测试异步操作。
下面用一个例子简单介绍弹珠测试，更多详细信息可以参考官方说明：https://cn.rx.js.org/manual/usage.html#h12。
import { cold, hot } from 'jasmine-marbles';
const input = hot('-a--b--c--', { a: 1, b: 2, c: 3 });
const expected = cold('-x--y--z--', { x: 10, y: 20, z: 30 });
expect(input.pipe(map(i => 10 * i ))).toBeObservable(expected);
首先，从jasmine-marbles中导入cold和hot函数. cold和hot都接受一个满足弹珠语法的字符串，和一个可选的对象，分别返回TestHotObservable和TestColdObservable对象（都继承自Observable）。 区别在于hot方法返回的是一个表示已经被订阅且在运行中的Observable，cold返回的是暂未被订阅的Observable。
在这个例子中，'-a--b--c—'的每一个字符都表示一帧，-表示一个空白帧，a,b,c分别表示在该帧的数据，他们的值是hot第二个参数对象里面对应key所对应的值，所以例子中的hot会产生一个，在第二帧发出1，第5帧发出2，第8帧发出3的Observable。同理，可以明白变量expected的意思。
最后，我们可以通过使用expect的toBeObservable来判断经过处理的input这个Observable的值是否与expected的值相等。
参考文档
TestBed和MarbleTest可以极大的提高Angular中UT编写的简便性，这里只是抛砖引玉举了两个简答的例子，更多的高级功能，还是有待大家一起发掘。下面是一些重要的参考链接：
https://angular.cn/guide/testing
https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/testing/marble-testing.md
https://cn.rx.js.org/manual/usage.html