如何为观众测试在ActivatedRoute上设置数据？

Question

是否有人知道如何使用Spectator测试组件中已解析的路由数据？在我的组件代码中，我获取Todo数组数据，并将其设置为dataSource表。我想测试如果我用Todo()存根ActivatedRoute，它将填充我的dataSource。

我不能让这个测试开始工作。我尝试过多种设置route.data的方法。网上的任何一个例子都没有具体说明如何以这种方式测试路由。

有什么想法吗？

let spectator: SpectatorRouting<ListTodoComponent>;

  const createComponent = createRoutingFactory({
    declarations:[
      DateTimeFormatPipe,
      LoaderComponent
    ],
    imports: [
      HttpClientTestingModule,
      RouterTestingModule,
      MatPaginatorModule,
      FlexLayoutModule,
      MatProgressSpinnerModule,
      MatTableModule,
      MatDialogModule,
      MatButtonModule,
      MatPaginatorModule],
    component: ListTodoComponent
  });

  beforeEach(() => {
    spectator = createComponent();
    spectator.activatedRouteStub.setAllData([new Todo(133,'some 
   title','dsdsd','dsdsds','dsds','dsdss')]);
  });

  it('should populate dataSource with one todo', () => {
    spectator.component.ngOnInit();
    expect(spectator.component.dataSource.data.length).toBe(1);
    expect(spectator.component.dataSource.data[0]).toHaveClass('Todo');
  });

组件代码

 ngOnInit() {
    this.route.data.pipe(
      take(1),
    ).subscribe(res => {
      this.dataSource = new MatTableDataSource(res['data']);
    });

  }

Answer 1

如果您想设置数据，可以在初始的createRoutingFactory参数中这样做：

const createComponent = createRoutingFactory({
    data: {
        foo: 'bar'
    }
    declarations:[
      DateTimeFormatPipe,
      LoaderComponent
    ],
    imports: [
      HttpClientTestingModule,
      RouterTestingModule,
      MatPaginatorModule,
      FlexLayoutModule,
      MatProgressSpinnerModule,
      MatTableModule,
      MatDialogModule,
      MatButtonModule,
      MatPaginatorModule],
    component: ListTodoComponent
  });

在您的示例中，您使用的是setAllData，这是我在启动TestBed之后才会在单个测试中使用的东西。