Search code examples
angularunit-testingjestjsangular-spectator

How to set data on ActivatedRoute for spectator test?


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

  }

Solution

  • 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.