Ionic测试之Angular中TestBed介绍与实践

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