Как протестировать маршрутизацию / навигацию в Angular с помощью Jest/Spectator?
Я пытаюсь написать сквозные спецификации для приложения Angular 10, и мне не удается протестировать переход от одного компонента к другому через маршрутизатор / навигацию (работает нормально, когда я запускаю приложение в браузере).
Мой маршрут настроен так:
export const routes: Routes = [
{
path: 'bulk-edit',
component: BulkEditComponent,
data: {
title: 'Bulk Edit',
},
}
];
У меня есть шаблон панели навигации:
<header>
<mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" color="primary">
<div>
<button mat-icon-button (click)="auth.login()" *ngIf="!auth.loggedIn">
<mat-icon>login</mat-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>apps</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item routerLink="bulk-edit" *ngIf="auth.loggedIn">
<mat-icon>settings_input_component</mat-icon>
<span>Bulk Edit</span>
</button>
</mat-menu>
<span>{{ title }}</span>
</div>
<div>
<app-publisher-selector *ngIf="auth.loggedIn"></app-publisher-selector>
<button mat-icon-button (click)="auth.logout()" *ngIf="auth.loggedIn" matTooltip="Log Out">
<mat-icon>sensor_door</mat-icon>
</button>
</div>
</mat-toolbar>
</header>
И моя спецификация выглядит так:
spectator = createComponent();
loader = TestbedHarnessEnvironment.loader(spectator.fixture);
const menu = await loader.getHarness(MatMenuHarness);
await menu.open();
const menuItems = await menu.getItems();
expect(menuItems.length).toEqual(1);
expect(await menuItems[0].getText()).toMatch('Bulk Edit');
await menuItems[0].click();
await spectator.fixture.whenStable();
// THIS IS WHERE IT STOPS PASSING
expect(spectator.inject(Location).path()).toEqual('bulk-edit');
Я пробовал разные варианты для
createComponent
, или
createComponentFactory
или же
createRoutingFactory
, с или без
stubsEnabled
. Кажется, что ничего не работает, и маршрутизация не запускает загрузку компонента, прикрепленного к маршруту.
Мне удалось добавить событие при щелчке по этому console.log, и щелчок действительно запускает его во время выполнения спецификации, поэтому событие распространяется; просто маршрутизация не работает.
Значение
(spectator.fixture.nativeElement as HTMLDivElement).outerHTML
не меняется.
Изменить: я создал небольшой проект воспроизведения, он размещен на https://stackblitz.com/edit/angular-ivy-epvfki, однако он не запускается непосредственно на StackBlitz (в браузере не может быть шутки), поэтому он требует загрузки и
yarn install
ng test
Это тестовое приложение имеет 2 кнопки, ведущие к 2 маршрутам, спецификация нажимает кнопку и проверяет, сработала ли маршрутизация, а это не так.