Angular 2单元测试

Question

我在使用Jasmine进行单元测试时遇到了一些问题。第一个：

我需要在一个名为CaseList的组件中进行测试：

gotoDetail(case: Case){
  this._router.navigate(['CaseDetail', {"id": case.id}]);
}

我在测试中所有的尝试给出的错误是this._router是未定义的，这是因为我没有在测试中定义它，因为我不知道如何定义它！我甚至没有在测试中想出任何好的尝试，因为我不知道如何继续。这就是为什么我没有在这里发布任何尝试的原因。

编辑:路由器测试中与上述问题相关的部分，但我在一个单独的文件中测试所有的路由！这个测试起作用了！

it('Should navigate to Case Detail List', (done) => {   
router.navigate(['CaseDetail', {id: 'test'}]).then(() => {
        expect(location.path()).toEqual('/casedetail/test');
        done();
    }).catch(e => done.fail(e));
});

来自详图组件的第二个测试(用户在选择大小写后导航到该组件)：

addStep(){
  this.case.getSteps().push(new Step());
}

我还有一个需要测试的remove方法：

removeStep(step: Step){
  this.case.removeStep(step);
}

此组件的构造函数：

constructor(public _routeParams: RouteParams, public _service: Service) {
  this.case = _service.getById(_routeParams.get('id'));
}

所以我尝试为add-method做的测试：

it('passes new step to case-class', () => {
  spyOn(case, 'addStep')
  .and.returnValue(Observable.of({complete: true}))
  caseDetail.addStep();
  expect(case.addStep).toHaveBeenCalledWith(step);
});

因此，这些方法调用一个名为"Case“的单独类中的方法。

当测试这些情况时，我得到的错误是null。我猜是路由和服务搞乱了它，因为在同一个组件中，我有其他“相同”的方法，测试这些方法工作得很好。但它们属于不同的类别。

方法，引用一个“步骤”-class：

addFeedback(step: Step){
  step.addFeedback(new Feedback());
}

测试运行得很完美：

it('passes feedback value to Step class', () => {
  spyOn(step, 'addFeedback')
  .and.returnValue(Observable.of({complete: true}))
  caseDetail.addFeedback(step);
  expect(step.addFeedback).toHaveBeenCalledWith(feedback);
})

因此，很明显，在测试组件时，我应该定义所需的一切，因为反馈方法的测试是有效的。我只需要以某种方式定义"case“对象，这样它就不会抱怨它为空。

希望你能解决我手头的问题，希望你能帮上忙！:)

Answer 1

为了让您的测试用例正常工作，您必须在测试之前添加路由器和case作为提供者。

路由示例：

import {RootRouter} from 'angular2/src/router/router';
import {Location, RouteParams, Router, RouteRegistry, ROUTER_PRIMARY_COMPONENT} from 'angular2/router';
import {SpyLocation} from 'angular2/src/mock/location_mock';
import {provide} from 'angular2/core';

describe('Router', () => {
  let location, router;

  beforeEachProviders(() => [
    RouteRegistry,
    provide(Location, {useClass: SpyLocation}),
    provide(Router, {useClass: RootRouter}),
    provide(ROUTER_PRIMARY_COMPONENT, {useValue: App}),
  ]);

  beforeEach(inject([Router, Location], (_router, _location) => {
    router = _router;
    location = _location;
  }));

  it('Should be able to navigate to Home', done => {
    router.navigate(['Index']).then(() => {
      expect(location.path()).toBe('');
      done();
    }).catch(e => done.fail(e));
  });
});

案例提供者：

  import {Case} from '../case';

  beforeEachProviders(() => [
    provide(case, Case)
  ]);