1

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

我无法让这个测试工作。我尝试了多种设置 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']);
    });

  }
4

1 回答 1

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

于 2021-12-12T20:44:41.967 回答