Question

我想测试一个具有一些依赖关系的简单组件。所以除其他外，我必须提供一些提供商 describe（'AccountLookupComponent'，（）=＆gt; { let component：AccountLookupComponent; let fixture：ComponentFixture enter code here;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [
                TestComponentWrapper,
                AccountLookupComponent
            ],
            schemas: [CUSTOM_ELEMENTS_SCHEMA],
            imports: [HttpModule],
            providers: [AccountLookupService, AuthHttp, AuthenticationService, AdalService, AdfsSecretService, CookieService, NgModule,
                { provide: 'IAccountLookupClient', useClass: AccountLookupClient },
                { provide: 'IApiClient', useClass: ApiClient },
                { provide: 'ITimeoutService', useClass: TimeoutService },

            ]

        })
            .compileComponents();

        fixture = TestBed.createComponent(TestComponentWrapper);
        component = fixture.debugElement.children[0].componentInstance;
        fixture.detectChanges();
    }));

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

@Component({
    selector: 'test-component-wrapper',
    template: `<account-lookup filterCurrentAccount="true"
                                [useAccountIdSearch]="true"
                                [useCompactResults]="true"
                                (accountSelected)="null"
                                placeholder="Find account">
                </account-lookup>`,

})
class TestComponentWrapper {


}

Answer 1

有两种方法可以使用提供程序测试组件

<强> 1。注入真实服务。

<强> 2。使用测试双打（存根，假货，间谍或嘲笑）。

第一种方法组件不必注入真实服务，但你可以做类似的事情：

TestBed.configureTestingModule({
  declarations: [ ExampleComponent ],
  providers:    [ ExampleService ]]
});

其他方法使用存根示例：

TestBed.configureTestingModule({
   declarations: [ ExampleComponent ],
   // Provide a test-double instead
   providers:    [ {provide: ExampleService, useValue: exampleServiceStub }]
});

// UserService from the root injector
exampleService = TestBed.get(ExampleService);

Answer 2

从NgModule数组中删除providers。这是装饰。你不应该把它用作令牌。

export function makeDecorator(
    name: string, props?: (...args: any[]) => any, parentClass?: any,
    chainFn?: (fn: Function) => void): (...args: any[]) => (cls: any) => any {
  const metaCtor = makeMetadataCtor(props);

  function DecoratorFactory(objOrType: any): (cls: any) => any { // => here is your provider

Angular 2单元测试错误：无法解析所有参数DecoratorFactory :(？）

2 个答案: