How to set data on ActivatedRoute for spectator test?

757 Views Asked by At

Does anybody know how to test the resolved route data in the component using Spectator? In my component code I get the Todo array data and set it to dataSource for the material-table. I want to test that if I stub ActivatedRoute with a Todo(), it will populate my dataSource.

I cannot get this test to work. I have tried multiple ways of setting route.data. None of the examples online specifically show how to test the route this way.

Any ideas?

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');
  });

Component code

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

  }
1

There are 1 best solutions below

0
On BEST ANSWER

If you want to set the data you can do it in the initial createRoutingFactory params:

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

In your example you're using setAllData which is something I would only use inside an individual test once the TestBed is bootstrapped.