RouterTestingHarness — Angular

Тестовый стенд для Router, позволяющий сократить объем шаблонного кода, необходимого для тестирования маршрутов и компонентов маршрутов.

API

class RouterTestingHarness {
  constructor(fixture: ComponentFixture<{ routerOutletData: WritableSignal<unknown>; }>): RouterTestingHarness;
  readonly fixture: ComponentFixture<{ routerOutletData: WritableSignal<unknown>; }>;
  detectChanges(): void;
  readonly routeDebugElement: DebugElement | null;
  readonly routeNativeElement: HTMLElement | null;
  navigateByUrl(url: string): Promise<{} | null>;
  navigateByUrl<T>(url: string, requiredRoutedComponentType: Type<T>): Promise<T>;
  static create(initialUrl?: string | undefined): Promise<RouterTestingHarness>;
}

constructor

RouterTestingHarness

@paramfixtureComponentFixture<{ routerOutletData: WritableSignal<unknown>; }>

@returnsRouterTestingHarness

fixture

ComponentFixture<{ routerOutletData: WritableSignal<unknown>; }>

Тестовый модуль корневого компонента RouterTestingHarness

detectChanges

void

Запускает обнаружение изменений в корневом тестовом модуле.

@returnsvoid

routeDebugElement

DebugElement | null

DebugElement компонента RouterOutlet. null, если outlet не активирован.

routeNativeElement

HTMLElement | null

Нативный элемент компонента RouterOutlet. null, если outlet не активирован.

navigateByUrl

2 перегрузки

Запускает навигацию Router и ожидает ее завершения.

Для отображения компонентов Route используется корневой компонент с RouterOutlet, созданный для тестового стенда. В последующих вызовах navigateForTest в рамках того же теста используется тот же корневой компонент.

При тестировании Routes с защитами, отклоняющими навигацию, компонент RouterOutlet может не активироваться, а activatedComponent может быть null.

let isLoggedIn = false;
    const isLoggedInGuard: CanActivateFn = () => {
      return isLoggedIn ? true : inject(Router).parseUrl('/login');
    };

    TestBed.configureTestingModule({
      providers: [
        provideRouter([
          {path: 'admin', canActivate: [isLoggedInGuard], component: AdminComponent},
          {path: 'login', component: LoginComponent},
        ]),
      ],
    });

    const harness = await RouterTestingHarness.create('/admin');
    expect(TestBed.inject(Router).url).toEqual('/login');
    isLoggedIn = true;
    await harness.navigateByUrl('/admin');
    expect(TestBed.inject(Router).url).toEqual('/admin');

@paramurlstring

Цель навигации. Передается в Router.navigateByUrl.

@returnsPromise<{} | null>

Экземпляр активированного компонента RouterOutlet после завершения навигации (null, если outlet не активирован).

Запускает навигацию маршрутизатора и ожидает ее завершения.

Для отображения компонентов Route используется корневой компонент с RouterOutlet, созданный для тестового стенда.

it('navigates to routed component', async () => {
    @Component({standalone: true, template: 'hello {{name}}'})
    class TestCmp {
      name = 'world';
    }

    TestBed.configureTestingModule({
      providers: [provideRouter([{path: '', component: TestCmp}])],
    });

    const harness = await RouterTestingHarness.create();
    const activatedComponent = await harness.navigateByUrl('/', TestCmp);
    expect(activatedComponent).toBeInstanceOf(TestCmp);
    expect(harness.routeNativeElement?.innerHTML).toContain('hello world');
  });

В последующих вызовах navigateByUrl в рамках того же теста используется тот же корневой компонент.

Эта функция также упрощает тестирование компонентов, зависящих от данных ActivatedRoute.

@Component({
      imports: [AsyncPipe],
      template: `search: {{ (route.queryParams | async)?.query }}`,
    })
    class SearchCmp {
      constructor(
        readonly route: ActivatedRoute,
        readonly router: Router,
      ) {}

      async searchFor(thing: string) {
        await this.router.navigate([], {queryParams: {query: thing}});
      }
    }

    TestBed.configureTestingModule({
      providers: [provideRouter([{path: 'search', component: SearchCmp}])],
    });

    const harness = await RouterTestingHarness.create();
    const activatedComponent = await harness.navigateByUrl('/search', SearchCmp);
    await activatedComponent.searchFor('books');
    harness.detectChanges();
    expect(TestBed.inject(Router).url).toEqual('/search?query=books');
    expect(harness.routeNativeElement?.innerHTML).toContain('books');

@paramurlstring

Цель навигации. Передается в Router.navigateByUrl.

@paramrequiredRoutedComponentTypeType<T>

Требуемый тип активированного компонента RouterOutlet после завершения навигации. Если outlet не активирован или активирован другой компонент, эта функция вызовет ошибку.

@returnsPromise<T>

Экземпляр активированного компонента RouterOutlet после завершения навигации.

create

Promise<RouterTestingHarness>

Создает экземпляр RouterTestingHarness.

RouterTestingHarness также создает собственный корневой компонент с RouterOutlet для отображения компонентов маршрутов.

Вызывает ошибку, если экземпляр уже создан. Для использования этого тестового стенда также требуется destroyAfterEach: true в ModuleTeardownOptions

@paraminitialUrlstring | undefined

Цель навигации, которую нужно открыть перед возвратом тестового стенда.

@returnsPromise<RouterTestingHarness>