Блог

Я пытаюсь написать тест, который пытается вызвать activate событие <router-outlet> элемента. Вот моя настройка:

Маршруты приложений:

 const routes: Routes = [{
  path: 'path/for/component/:id',
  component: MyComponent,
  children: [
    { path: '', pathMatch: 'full', component: MySubComponent, outlet: 'outletname' }
  ]
}];
 

Многокомпонентный HTML:

 <mat-tab-group>
  <mat-tab label="Tab 1">
    <ng-template mat-tab-label>Tab 1</ng-template>
    <router-outlet name="outletname" (activate)="onActivate($event)"></router-outlet>
  </mat-tab>
  <mat-tab label="Tab 2">
    <!-- more content here -->
  </mat-tab>
</mat-tab-group>
 

МиКомпонент TS:

 export class MyComponent {
  constructor(private route: ActivatedRoute) { }
  onActivate(obj: any): void { /* do the things */ }
}
 

Спецификация микомпонента:

 describe('MyComponent', () => {
  let activatedRoute: ActivatedRoute;

  beforeAll(() => {
    activatedRoute = new ActivatedRoute();
  });

  beforeEach(() => {
    /* 
     * set activatedRoute properties such as URL and component to try
     * to get the onActivate() callback to fire on component render
     */
  });

  it('should test results of onActivate event', async () => {
    /*
     * 1. setup and construct the component
     * 2. test result of onActivate() callback
     */
  });
});
 

Для всех, кому интересно, все, что действительно происходит в полной реализации компонента, — это то, что activate обратный вызов просто уведомляет MyComponent о том, какая вкладка отображается в данный момент, чтобы я мог открыть диалоговое окно, если пользователь при необходимости перейдет на другую вкладку.

Моя проблема в том, что я не могу понять, как правильно смоделировать ActivatedRoute объект, чтобы activate событие срабатывало при MyComponent построении в моем тесте. Насколько я понимаю, и здесь я могу быть совершенно неправ, <router-outlet> он должен срабатывать, когда текущий маршрут совпадает path с моим списком маршрутов. В идеале я хотел бы запустить activate обратный вызов без необходимости явно вызывать его в своем тесте, т. Е. Я не хочу, чтобы мне приходилось говорить component.onActivate(eventObj) в своем тесте. Я ожидаю <router-outlet> , что рендеринг будет частью построения компонента до тех пор, пока ActivatedRoute у него будет соответствующая информация. Итак, вопрос в следующем: сколько из ActivatedRoute них должно быть указано в beforeEach() функция для того, чтобы правильно <router-outlet> выполнить рендеринг? Возможно ли это вообще? Неужели я совершенно на неверном пути? Я что, слишком много об этом думаю?

Я хотел бы в конечном итоге использовать ActivatedRoute макет класса вместо реального класса, чтобы уменьшить объем накладных расходов и обеспечить только минимально необходимую функциональность для облегчения дальнейших тестов, но сначала я должен заставить этот класс работать, прежде чем я смогу правильно абстрагировать служебный класс.

Любая помощь будет очень признательна! Заранее спасибо!