Angular тестирование события маршрутизатора, такого как NavigationEnd

Question

Я искал последние 2 дня, чтобы смоделировать событие маршрутизатора для проверки

    window.scrollTo(0, 0);

В этом блоке:

      ngOnInit() {
        this.router.events.subscribe((evt) => {
          if (!(evt instanceof NavigationEnd)) {
            return;
          }
          window.scrollTo(0, 0);
          if (this.object.attribut1) {
            this.loadSomething();
          }
          if (this.object.attribut2) {
            this.loadSomething2();
          }
        });
      }

Так что мне нужно смоделировать это: .router.events.subscribe ((evt) в тесте

У меня уже есть тест для этого window.scrollTo (это работает, но только если window.scrollTo находится вне события маршрутизатора):

      it('calls window.scrollTo', () => {
    expect(component).toBeDefined();

    const req = httpTestingController.expectOne(endpoint);
    expect(req).toBeDefined();
    expect(req.request.method).toEqual('GET');
    req.flush(MOCKED);
    fixture.detectChanges();

    expect(spyScrollTo).toHaveBeenCalled();
  });

Я нашел много примеров, но ничто не помогло мне, и я никогда не понимаю эти примеры.

Я буду очень благодарен, если кто-то получит объяснения или примеры. Спасибо:)

Answer 1

Вы должны смоделировать маршрутизатор и предоставить объект события.

Примерно так:

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;
  let eventsStub = new BehaviorSubject<any>(null);
  let routerStub = {
    events: eventsSub,
  };

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        YourComponent,
      ],
      providers: [
        // merge the two mocks like this !!
        { provide: Router, useValue: routerStub },
        {
          provide: ActivatedRoute,
          useValue: {
           snapshot: {
             queryParams: of({})
            },
            queryParams: of({}),
            queryParamMap: of({}),
           params: of({id: 'something'})
        },
      ],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    let mockNav = new NavigationEnd(1, 'any', 'any');
    // make events have the mockNav listed above
    eventsSub.next(mockNav);
    // this detectChanges will make ngOnInit be called
    fixture.detectChanges();
  });

  it('calls window.scrollTo', () => {
    expect(component).toBeDefined();
    expect(spyScrollTo).toHaveBeenCalled();
    // your other tests
  });
});

При выполнении этих тестов поместите журнал в subscribe, чтобы обеспечить тест прошел это:

ngOnInit() {
        this.router.events.subscribe((evt) => {
          if (!(evt instanceof NavigationEnd)) {
            return;
          }
          window.scrollTo(0, 0);
          console.log('After scrollTo!!!'); // !! remove when done but make sure you see this
          if (this.object.attribut1) {
            this.loadSomething();
          }
          if (this.object.attribut2) {
            this.loadSomething2();
          }
        });
      }