Как протестировать маршрутизацию / навигацию в 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 маршрутам, спецификация нажимает кнопку и проверяет, сработала ли маршрутизация, а это не так.

0 ответов

Другие вопросы по тегам