有没有办法用 Jest 测试 Angular 路由器？

Question

我正在尝试测试用户导航到页面时侧边栏中的元素是否正确折叠。我在 Jest 测试中尝试模拟 Angular 路由器时遇到了麻烦。

我要测试的代码：

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

试图模拟路由器：

let eventSubject: Subject<Event> = new Subject<Event>();

export class MockRouter {
    events: Observable<Event> = eventSubject;
}

测试：

it('should open page1 dropdown if on page1', 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');
    }));

我已经尝试提供路由器 { provide: Router, useClass: MockRouter} 但是在尝试实例化夹具时不断出错：

let fixture: ComponentFixture<SideBarComponent>;
let comp: SideBarComponent;
beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [
                SideBarComponent,
            ],
            imports: [
                RouterTestingModule
            ],
            providers: [
                { provide: Router, useClass: MockRouter}
            ]
        }).compileComponents();
fixture = TestBed.createComponent(SideBarComponent); --Cannot read property 'root' of undefined
comp = fixture.componentInstance;

Answer 1

通过使用 Angular 的 RouterLinkActive 找到一种处理显示/折叠功能的更好方法