如何将 angular2 服务注入单元测试?(RC3) [英] How do you inject an angular2 service into a unit test? (RC3)

问题描述

我正在使用 RC3.我正在实施新的 Angular2 路由器，如下所示:https://angular.io/docs/ts/latest/guide/router.html

I am using RC3. I am implementing the new Angular2 router as documented here: https://angular.io/docs/ts/latest/guide/router.html

一切正常，但我在单元测试中遇到问题.具体来说，我无法将 Angular2 服务注入到我的单元测试中.

Everything works fine but I am having problem in unit testing. Specifically, I cannot inject Angular2 services into my unit tests.

我的相关组件代码是:

import {Component} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  templateUrl: ...
  styleUrls: ...
})

export class Route1DetailComponent {

  constructor(private route:ActivatedRoute) {
    console.log(route);
  }
}

我的单元测试看起来像:

my unit test looks like:

import {
  expect, it, iit, xit,
  describe, ddescribe, xdescribe,
  beforeEach, beforeEachProviders, withProviders,
  async, inject
} from '@angular/core/testing';

import {ActivatedRoute} from '@angular/router';
import {Route1DetailComponent} from './route1-detail.component';
import {TestComponentBuilder} from '@angular/compiler/testing';

describe('route1-detail.component.ts', () => {

  beforeEachProviders(() => [
    {provide: ActivatedRoute, useClass: ActivatedRoute}
  ]);

  it('should instantiate component',
    async(inject([TestComponentBuilder, ActivatedRoute], (tcb:TestComponentBuilder, ar: ActivatedRoute) => {
      tcb.createAsync(Route1DetailComponent).then((fixture) => {
        expect(fixture.componentInstance instanceof Route1DetailComponent).toBe(true, 'should create Route1DetailComponent');
        console.log(ar);
    });
  })));

});

应该实例化组件"单元测试失败.错误是:

The 'should instantiate component' unit test fails. The error is:

无法解析 'ActivatedRoute'(?, ?, ?, ?, ?) 的所有参数.确保所有参数都用 Inject 修饰或有有效的类型注释，并且 'ActivatedRoute' 装饰有可注射.

Cannot resolve all parameters for 'ActivatedRoute'(?, ?, ?, ?, ?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'ActivatedRoute' is decorated with Injectable.

我如何让它工作?

当我不注入 ActivatedRoute 时，一切正常.

When I do not inject ActivatedRoute everything works fine.

谢谢.

推荐答案

在进行单元测试时，有时某个服务会因为没有在正常环境中使用而导致问题.您可以测试以查看它是否已被调用，而无需在整个服务中运行单元测试.通过创建一个模拟类来做到这一点.

When unit testing, sometimes a certain service causes issues just because it's not being used in a normal environment. You can test to see if it has been called, without having the unit test run through the whole service. Do this by creating a mock class.

describe('route1-detail.component.ts', () => {

class MockActivatedRoute {}

beforeEachProviders(() => [
    {provide: ActivatedRoute, useClass: MockActivatedRoute}
  ]);

it('should instantiate component',
  async(inject([TestComponentBuilder, ActivatedRoute], (tcb:TestComponentBuilder, ar: MockActivatedRoute) => {
  tcb.createAsync(Route1DetailComponent).then((fixture) => {
    expect(fixture.componentInstance instanceof Route1DetailComponent).toBe(true, 'should create Route1DetailComponent');
    console.log(ar);
  });
})));

注意这部分:inject([TestComponentBuilder, ActivatedRoute], (tcb:TestComponentBuilder, ar: MockActivatedRoute.当代码在寻找 ActivatedRoute 时，您将它传递给模拟服务.当然，如果您专门尝试对 ActivatedRoute 本身进行单元测试，那么创建模拟服务就无法实现该目的.如果它尝试从该服务调用方法，您可能需要向模拟类添加方法或变量.

Notice this part: inject([TestComponentBuilder, ActivatedRoute], (tcb:TestComponentBuilder, ar: MockActivatedRoute. When the code is looking for ActivatedRoute, you are passing it the mock service. Of course if you are specifically trying to unit test ActivatedRoute itself, then creating a mock service defeats that purpose. You might have to add methods or variables to the mock class if it tries to call methods from that service.

这篇关于如何将 angular2 服务注入单元测试?(RC3)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！