如何在 ActivatedRoute 上设置数据以进行观众测试？答案

【问题标题】：How to set data on ActivatedRoute for spectator test?如何在 ActivatedRoute 上设置数据以进行观众测试？
【发布时间】：2020-04-13 05:09:58
【问题描述】：

有人知道如何使用 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']);
    });

  }

【问题讨论】：

标签： angular unit-testing jestjs angular-spectator

【解决方案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 启动后在单个测试中使用的东西。

【讨论】：