Как настроить данные ActivatedRoute для зрительского теста?

Кто-нибудь знает, как проверить разрешенные данные маршрута в компоненте с помощью Spectator? В коде моего компонента я получаю данные массива Todo и устанавливаю его в dataSource для таблицы материалов. Я хочу проверить, что если я закрою ActivatedRoute с помощью Todo(), он заполнит мой источник данных.

Я не могу заставить этот тест работать. Я пробовал несколько способов установить 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']);
    });

  }

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.

Другие вопросы по тегам