Question

我在为Angular2组件的测试中为RouteParams依赖项注入模拟时遇到了一些麻烦。我的一般想法是，我可能会错过一些提供者。

测试失败：

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

有谁知道这个问题可能是什么？

import {
  it,
  inject,
  injectAsync,
  describe,
  beforeEach,
  beforeEachProviders,
  TestComponentBuilder
} from 'angular2/testing';

import {Component, provide} from 'angular2/core';
import {BaseRequestOptions, Http} from 'angular2/http';
import {MockBackend} from 'angular2/http/testing';
import {RouteParams, ROUTER_PROVIDERS, ROUTER_PRIMARY_COMPONENT} from 'angular2/router';

// Load the implementations that should be tested
import {Home} from './home';
import {Title} from './providers/title';

describe('Home', () => {
  // provide our implementations or mocks to the dependency injector

  beforeEachProviders(() => [
    Title,
    Home,
    provide(RouteParams, { useValue: new RouteParams({ id: '1' }) }),
    BaseRequestOptions,
    MockBackend,
    provide(Http, {
        useFactory: function(backend, defaultOptions) {
            return new Http(backend, defaultOptions);
        },
        deps: [MockBackend, BaseRequestOptions]
    }),
    provide(RouteParams, {
        useFactory: function() {
            return new RouteParams({ 'id':'1' });
        }
    })
  ]);

  it('should have a title', inject([ Home ], (home) => {
    expect(home.title.value).toEqual('Angular 2');
  }));

  it('should have a http', inject([ Home ], (home) => {
    expect(!!home.http).toEqual(true);
  }));

  it('should log ngOnInit', inject([ Home ], (home) => {
    spyOn(console, 'log');
    spyOn(console, 'info');
    expect(console.log).not.toHaveBeenCalled();
    expect(console.info).not.toHaveBeenCalled();

    home.ngOnInit();
    expect(console.log).toHaveBeenCalled();
    expect(console.info).toHaveBeenCalledWith('1');
  }));

});

Answer 1

管理自己解决这个问题，你使用

provide(RouteParams, { useValue: new RouteParams({ id: '1' }) })

模拟RouteProvider

import {
  it,
  inject,
  injectAsync,
  describe,
  beforeEach,
  beforeEachProviders,
  TestComponentBuilder
} from 'angular2/testing';

import {Component, provide} from 'angular2/core';
import {BaseRequestOptions, Http} from 'angular2/http';
import {MockBackend} from 'angular2/http/testing';
import {RouteParams, ROUTER_PROVIDERS, ROUTER_PRIMARY_COMPONENT} from 'angular2/router';

// Load the implementations that should be tested
import {Home} from './home';
import {Title} from './providers/title';

describe('Home', () => {
  // provide our implementations or mocks to the dependency injector

  beforeEachProviders(() => [
    Title,
    Home,
    provide(RouteParams, { useValue: new RouteParams({ id: '1' }) }),
    BaseRequestOptions,
    MockBackend,
    provide(Http, {
        useFactory: function(backend, defaultOptions) {
            return new Http(backend, defaultOptions);
        },
        deps: [MockBackend, BaseRequestOptions]
    })
  ]);

  it('should have a title', inject([ Home ], (home) => {
    expect(home.title.value).toEqual('Angular 2');
  }));

  it('should have a http', inject([ Home ], (home) => {
    expect(!!home.http).toEqual(true);
  }));

  it('should log ngOnInit', inject([ Home ], (home) => {
    spyOn(console, 'log');
    spyOn(console, 'info');
    expect(console.log).not.toHaveBeenCalled();
    expect(console.info).not.toHaveBeenCalled();

    home.ngOnInit();
    expect(console.log).toHaveBeenCalled();
    expect(console.info).toHaveBeenCalledWith('1');
  }));

});

Answer 2

对于那些在这里登陆的人，即使他们正在使用 Angular4

我只是继续创造了一个模拟。我想诀窍是嘲笑你需要的ActivatedRoute部分。对我来说，这样做了：

import {ActivatedRoute, ParamMap} from '@angular/router';

/**
 * Mocking the ActivatedRoute which is injected in the Component on creation.
 * This allows for easier testing as values can be set as needed.
 */
class MockActivatedRoute {
   paramMap = Observable.of(new Params());
}

/**
 * Bare bones implementation of ParamMap used in mock. Further tests can expand
 * on this implementation as needed.
 */
class Params implements ParamMap {
  keys: string[];

  private routes: {[key: string]: string|null} = {
    subject: 'foo',
    time: 'd-123-1',
    device: 'all',
    location: 'c-123'
  };

  constructor() {
    this.keys = Object.keys(this.routes);
  }

  has(name: string): boolean {
    throw new Error('Method not implemented.');
  }
  get(name: string): string|null {
    return this.routes[name];
  }
  getAll(name: string): string[] {
    throw new Error('Method not implemented.');
  }
}

然后在您的测试模块中确保您提供真实ActivatedRoute上的模拟服务：

providers: [
  {
    provide: ActivatedRoute,
    useValue: new MockActivatedRoute(),
  }
]

为了完成，我在组件I测试中使用它的方式：

ngOnInit() {
  this.route.paramMap
      .map((params: ParamMap) => params.get('subject') as string)
      .subscribe((subject: string) => this.subject = subject);
}

Angular2 - 在测试中模拟RouteParams

2 个答案: