angular - 从一个来源加载所有组件和提供程序以进行 Angular 单元测试

Question

我在上个月左右一直在学习 Angular 2 单元测试，并且遇到了一个繁琐的过程，我试图弄清楚如何解决这个问题。这个繁琐的过程与导入组件用于单元测试的每个提供程序有关。我想知道是否有一种方法可以导入包含我的应用程序的所有组件和提供程序的单个文件(可能是 app.module.ts 文件)，然后我可以挑选我需要的组件和提供程序。

作为引用，这是我目前在我的 Angular 单元测试中所做的:

// Angular and Ionic Dependencies
import { async, TestBed, tick, fakeAsync } from '@angular/core/testing';
import { MockBackend } from '@angular/http/testing';
import { SimpleChange } from '@angular/core';
import { IonicModule, Platform, NavController } from 'ionic-angular';
import { Storage }                              from '@ionic/storage';
import { Observable } from 'rxjs/Rx';
import {
    BaseRequestOptions, ConnectionBackend, RequestOptions, Response,
    ResponseOptions, Http, XHRBackend, HttpModule, RequestMethod
} from '@angular/http';

// My App Dependencies
import { ComponentToTest } from '/location/component-to-test';
import { ComponentProviderOne } from '/location/component-provider-one';
import { ComponentProviderTwo } from '/locaiton/component-provider-two';
import { ComponentProviderThree } from '/location/component-provider-three';

describe('ComponentToTest', () => {
  let fixture;
  let component;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ComponentToTest], // declare the test component
        imports: [
          IonicModule.forRoot(ComponentToTest)
        ],
        providers: [
          ComponentProviderOne,
          ComponentProviderTwo,
          ComponentProviderThree,
          { provide: XHRBackend, useClass: MockBackend},
          MockBackend,
          BaseRequestOptions,
          {
            provide: Http,
            deps: [MockBackend, BaseRequestOptions],
            useFactory:
              (backend: XHRBackend, defaultOptions: BaseRequestOptions) => {
                  return new Http(backend, defaultOptions);
              }
          }
        ]
    });
  });
}

我希望避免为所有 ComponentProviderX 使用所有这些导入。

我想补充的另一个引用是，在 AngularJS 中，我能够通过以下方式加载我所有的应用程序组件和服务:

describe('componentToTest', function() {
  var $httpBackend,
      $q,
      $rootScope,
      componentToTest,
      componentServiceOne,
      componentServiceTwo,
      componentServiceThree;

  // Load the Angular 1 module file that has 
  // a reference of all the apps Components and Services
  beforeEach(module('angular1ModuleFile'));

  beforeEach(inject(function(
    _$httpBackend_,
    _$q_,
    _$rootScope_,
    _componentToTest_,
    _componentServiceOne_,
    _componentServiceTwo_,
    _componentServiceThree_

  ) {
    $httpBackend = _$httpBackend_;
    $q = _$q_;
    $rootScope = _$rootScope_;

    componentToTest = _componentToTest_;
    componentServiceOne = _componentServiceOne_;
    componentServiceTwo = _componentServiceTwo_;
    componentServiceThree = _componentServiceThree_;
  }));
});

总而言之，是否可以在 Angular 单元测试中做类似的事情？也就是说，我是否可以使用单个导入(如 angular1ModuleFile)加载我的所有应用程序组件和提供程序以进行 Angular 单元测试？

Answer 1

我在某处创建了一个名为 testbed-configs.ts 的文件

它包含:

const testbedBase = {
  declarations: [AppComponent, TestTypesPage],
  providers: [
    { provide: YourService, useClass: YourService},
  ],
  imports: [IonicModule.forRoot()]
}

export default testbedBase;

然后在你的 test.spec.ts 文件中

import testbedBase from 'src/testbed-configs';

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule(testbedBase).compileComponents();

    fixture = TestBed.createComponent(YourTestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));