Introduction to Angular's TestBed
翻译自外国友人的文章，如果错误，请指教
如果在跑 SmoePage组件的测试，我们就不会在意APP剩余的部分，事实上，我们甚至希望剩余的那部分完全的消失不见。
还是之前那个简单的例子，为了实现隔离测试，可以用如下代码：
import { MyProvider } from './my-provider';
describe('My Provider', () => {
let myProvider;
beforeEach(() => {
myProvider = new MyProvider();
});
it('should do something', () => {
});
});
如果provider足够简单，上面的结构可以很好的测试它了。 Angular应用往往没有这么简单，因此，如果依赖于 dependency injection或者import modules就会让事情变得复杂起来，我们就不能再这样要设置我将测试的component：
myThing = new MyThing();
Using TestBed to Configure a Testing Module
TestBed背后的概念是非常简单的，它只是允许我们创建一个用于任何我们想要尝试的test的独立Angular测试环境。看起来有点儿复杂，其实跟我们跑的每个测试都一样。虽然不知道初始化TestBed配置时发生了什么，我会详细讲解我们将要做的事情来帮助你更好的理解它。
来看看用TestBed来创建的典型的 spec文件的样子：
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HomePage } from './home';
import { IonicModule, NavController } from 'ionic-angular';
import { NavMock } from '../../../test-config/mocks-ionic';
describe('Home Page', () => {
let comp: HomePage;
let fixture: ComponentFixture<HomePage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [HomePage],
imports: [
IonicModule.forRoot(HomePage)
],
providers: [
{ provide: NavController, useClass: NavMock }
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HomePage);
comp = fixture.componentInstance;
});
it('should create component', () => {
expect(comp instanceof HomePage).toBe(true);
});
});
这个spec文件独立地可以测试 HomePage组件。请注意下面这段代码：
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [HomePage],
imports: [
IonicModule.forRoot(HomePage)
],
providers: [
{ provide: NavController, useClass: NavMock }
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HomePage);
comp = fixture.componentInstance;
});
此时有两个 beforeEach代码块，一个使用TestBed配置测试用到的module，另外一个设置将在测试中使用的objects。
之所以用两个 beforeEach，是因为第一个中用了从Angular导入的 saync方法。它对异步处理很重要，当组件没有用到inline templates（使用了templateUrl加载）时就用到了异步加载，所以需要保证等待这个过程完成。
我们使用TestBed配置来完成。调用configureTestingModule 来提供组件运行需要的配置。如果HomePage注入了NavController,就需要用 mock来换掉它。这些设置跟我们在app.module.ts中做的基本相同，只是忽略了不要的东西。
在第二个 beforeEach代码块中，先调用TestBed的createComponent方法创建了一个 fixture来调用 ，也就是创建了一个我们配置好的组件的实例。fixture不是组件本身，而是创建测试的一个引用，它可以提供很多有用的properties和functions，稍后我们将会用到。使用fixture来设置实际componentInstance的引用，其实它就是HomePage组件的真是实例。如果HomePage中有定义类似articles的成员变量，此时就可以调用了:
comp.articles
网友评论