mardi 17 décembre 2019

Is there a way to test Angular Router with Jest?

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