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