如何在 ActivatedRoute 上设置数据进行旁观者测试？

Question

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

我无法让这个测试工作。我尝试了多种设置 route.data 的方法。 None 的在线示例具体说明了如何以这种方式测试路由。

有什么想法吗？

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 启动，我只会在单个测试中使用它。

如何在 ActivatedRoute 上设置数据进行旁观者测试？

How to set data on ActivatedRoute for spectator test?

unit-testing

jestjs

angular

angular-spectator