Question

假设我想简单地对一个组件进行单元测试，该组件采用从路径的一部分获取的参数。例如，我的组件的ngOnInit如下所示：

  ngOnInit() {
    this.route.parent.params.switchMap((params: Params) => this.service.getProject(params['projectId']))
      .subscribe((project: Project) => this.update(project));
  }

我现在怎么办： 1：设置我的测试，以便组件创建工作，所以我可以单元测试其他部分

使用回答编辑 - 示例ActivatedRouteStub应该使用也具有可观察参数的父项进行扩展，我应该使用useClass而不是useValue（忘记将其更改回来）：

@Injectable()
export class ActivatedRouteStub {

    // ActivatedRoute.params is Observable
    private subject = new BehaviorSubject(this.testParams);
    params = this.subject.asObservable();

    // Test parameters
    private _testParams: {};
    get testParams() { return this._testParams; }
    set testParams(params: {}) {
        this._testParams = params;
        this.subject.next(params);
    }

    // ActivatedRoute.snapshot.params
    get snapshot() {
        return { params: this.testParams };
    }
        // ActivatedRoute.parent.params
    get parent() {
        return { params: this.subject.asObservable() };
    }
}

2：在我的UnitTest中为projectId提供一个值？

angular2文档中的示例似乎不适用于switchMap，甚至根本不适用（我已经使用了ActivatedRouteStub，但到目前为止没有运气 - params总是未定义的。）

编辑回答：

describe('ProjectDetailsComponent', () => {
  let component: ProjectDetailsComponent;
  let fixture: ComponentFixture<ProjectDetailsComponent>;
  let activatedRoute: ActivatedRouteStub;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule.withRoutes([{ path: 'projects/:projectId', component: ProjectDetailsComponent }])],
      declarations: [ProjectDetailsComponent],
      schemas: [NO_ERRORS_SCHEMA],
      providers: [{ provide: ProjectsService, useClass: ProjectsServiceStub }, {provide: ActivatedRoute, useClass: ActivatedRouteStub}]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ProjectDetailsComponent);
    component = fixture.componentInstance;
    activatedRoute = fixture.debugElement.injector.get(ActivatedRoute);
    activatedRoute.testParams = { projectId: '123'};
    fixture.detectChanges();
  });

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

Answer 1

只有在你没有正确创建存根的情况下，params的唯一方法是未定义的。看看电话

this.route.parent.params.switchMap

params是一个深层次的嵌套属性。所以作为普通的JS对象你需要

let mock = {
  parent: {
    params: Observable.of(...)
  }
}

如果你想使用一个类，你可以使用像

这样的东西

class ActivatedRouteStub {

  parent = {
    params: Observable.of({})
  };

  set testParams(params: any) {
    this.parent.params = Observable.of(params);
  }
}

您只需使用testParams上的setter设置parent.params的值即可。那么，当您执行stub.testParams = whatever时，该值将在parent.params的可观察值上设置。

更新

除了以上有关如何实现此功能的说明之外，您的配置中也存在错误

{provide: ActivatedRoute, useValue: ActivatedRouteStub}

useValue应该是您创建的对象。所以你传递的是一个类，那个类将是注入的，而不是类的实例。如果您希望Angular创建它，那么您应该使用useClass。否则，您应该自己创建实例，并将该实例用作值

{provide: ActivatedRoute, useValue: new ActivatedRouteStub() }

注意实例化。

Answer 2

如果最终有人遇到了Angular 7的问题，Angular文档将给出一个清晰的示例，说明如何测试依赖于ActivatedRoute服务https://angular.io/guide/testing#activatedroutestub的组件。与上面的回复略有不同。

如何单元测试Angular 2路由参数

2 个答案:

更新