I'm trying to test if an element in a sidebar is correctly collapsed when a user navigates to a page. I'm having troubles trying to mock the Angular Router in my Jest tests.
The code i'm trying to test:
this.router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe((event: NavigationEnd) => {
this.current = event.url;
if (this.current.includes('page1')) {
this._expandMenu(this.page1Toggle);
if (this.current.includes('page2')) {
this._expandMenu(this.page2Toggle);
}
}
this._closeMenu();
});
Trying to mock the router:
let eventSubject: Subject<Event> = new Subject<Event>();
export class MockRouter {
events: Observable<Event> = eventSubject;
}
The test:
it('should open insight manager dropdown if on insight page', fakeAsync(() => {
// Arrange
let event = new NavigationEnd(1, '/home/page1', '');
// Act
eventSubject.next(event);
flush();
fixture.detectChanges();
let page1Toggle = fixture.debugElement.query(By.css('#page1Toggle'));
let dropdown = page1Toggle.nativeElement.nextSibling;
// Assert
expect(page1Toggle.attributes['aria-expanded']).toBeTruthy();
expect(dropdown.classList).toContain('show');
}));
I've tried providing the Router as such { provide: Router, useClass: MockRouter} but keep getting errors when trying to instantiate the fixture:
let fixture: ComponentFixture<SideBarComponent>;
let comp: SideBarComponent;
fixture = TestBed.createComponent(SideBarComponent); --Cannot read property 'root' of undefined
comp = fixture.componentInstance;
Aucun commentaire:
Enregistrer un commentaire