fromEvent, выбрасывающий TypeError: недопустимая цель события в Angular Testing

Question

Когда я вызываю ngOnInit в тесте, я получаю следующую ошибку:

• TypeError: Недопустимая цель события
  • в setupSubscription (../node_modules/rxjs/internal/observable/ fromEvent. js: 52: 1)
  • в setupSubscription (../node_modules/rxjs/internal/observable/fromEvent.js:48:1)

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

StickyLoginButtonBarComponent

export class StickyLoginButtonBarComponent implements OnInit {
  cssClass = '';
  isLoggedIn = false;
  isMobileWidth = true;
  showStickyButton = true;

  private scrollSubscription: Subscription;
  private loggedInSubscription: Subscription;
  private readonly siteConfigSubscription: Subscription;

  constructor(
    private readonly authService: AuthService,
    protected router: Router,
    private readonly cd: ChangeDetectorRef,
    private readonly winRef: WindowRef,
    private readonly siteConfigService: SiteConfigurationDetailsService
  ) {}

  ngOnInit() {
    this.loggedInSubscription = this.authService
      .getLoggedInObservable()
      .subscribe(value => (this.isLoggedIn = value));
    this.showStickyButton = !this.isLoggedIn;

    const getScrollEvent$ = fromEvent(this.winRef.nativeWindow, 'scroll');

    /* User is scrolling */
    this.scrollSubscription = getScrollEvent$
      .pipe(throttleTime(300))
      .subscribe(() => {
        if (this.cssClass === '' && this.isMobileWidth) {
          this.cssClass = 'd-none';
          this.updateCssClass();
        }
      });


    /* User stopped scrolling */
    this.scrollSubscription = getScrollEvent$
      .pipe(
        startWith(0),
        debounceTime(400)
      )
      .subscribe(() => {
        this.cssClass = '';
        this.updateCssClass();
      });
  }

  protected updateCssClass(): void {
    if (!this.cd['destroyed']) {
      this.cd.detectChanges();
    }
  }
}

StickyLoginButtonBarTestComponent

describe('StickyLoginButtonBarComponent', () => {
  let component: StickyLoginButtonBarComponent;
  let fixture: ComponentFixture<StickyLoginButtonBarComponent>;
  let windowRef: WindowRef;

  @Component({
    selector: 'login-button',
    template: ''
  })
  class MockLoginButtonComponent {
    @Input()
    cssClass: string;
    @Input()
    buttonText: string;
  }

  const MockAuthService = {
    getLoggedInObservable(): Observable<boolean> {
      return of(false);
    }
  };

  const mockConfigurationService = {
    getNumberValueForKey(): Observable<number> {
      return of(570);
    }
  };

  class MockWinRef {
    nativeWindow = new (class {
      innerWidth = 430;
      length = 100;
      scroll(): any {}
    });
  }

  beforeEach(() => {

    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      providers: [
        { provide: AuthService, useValue: MockAuthService },
        {
          provide: SiteConfigurationDetailsService,
          useValue: mockConfigurationService
        },
        { provide: WindowRef, useClass: MockWinRef }
      ],
      declarations: [
        StickyLoginButtonBarComponent,
        MockLoginButtonComponent
      ]
    });

    windowRef = TestBed.get(WindowRef);
    fixture = TestBed.createComponent(StickyLoginButtonBarComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });


  it('should call updateCssClass when user is scrolling', () => {

    const input = fixture.debugElement.query(By.css('.login-bar'));
    input.triggerEventHandler('scroll', windowRef.nativeWindow);
    component.ngOnInit();
    spyOn(windowRef.nativeWindow, 'scroll');
    expect(windowRef.nativeWindow.scroll).toHaveBeenCalled();

  });
});

Answer 1

Мне удалось решить мою проблему, если кто-то тоже сталкивался с ней. Первая проблема заключалась в том, что я не очень насмехался над классом WindowRef, это приводило к ошибке состояния гонки. Второй вопрос был о том, как я пытался вызвать событие «прокрутка» в окне. Ниже мое решение моего первоначального вопроса:

 describe('StickyLoginButtonBarComponent', () => {
  let component: StickyLoginButtonBarComponent;
  let fixture: ComponentFixture<StickyLoginButtonBarComponent>;
  let windowRef: WindowRef;
  let spyOnInit: jasmine.Spy;
  let spyOnCdRef: jasmine.Spy;

  @Component({
    selector: 'login-button',
    template: ''
  })
  class MockLoginButtonComponent {
    @Input()
    cssClass: string;
    @Input()
    buttonText: string;
  }

  const MockAuthService = {
    getLoggedInObservable(): Observable<boolean> {
      return of(false);
    }
  };

  const mockConfigurationService = {
    getNumberValueForKey(): Observable<number> {
      return of(570);
    }
  };

  class MockWinRef {
    get nativeWindow(): any {
      return window;
    }
  }

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      providers: [
        { provide: AuthService, useValue: MockAuthService },
        {
          provide: SiteConfigurationDetailsService,
          useValue: mockConfigurationService
        },
        { provide: WindowRef, useClass: MockWinRef }
      ],
      declarations: [
        StickyLoginButtonBarComponent,
        MockLoginButtonComponent
      ]
    });

    windowRef = TestBed.get(WindowRef);
    fixture = TestBed.createComponent(StickyLoginButtonBarComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should call updateCssClass when user is scrolling', () => {
    spyOnInit = spyOn(component, 'ngOnInit');
    spyOnCdRef = spyOn((component as any).cd, 'detectChanges');

    component.cssClass = '';
    component.isMobileWidth = true;
    component.ngOnInit();

    const e = document.createEvent('Event');
    e.initEvent('scroll', true, true);
    windowRef.nativeWindow.dispatchEvent(e);

    expect(spyOnInit).toHaveBeenCalled();
    expect(component.cssClass).toEqual('d-none');
    expect(spyOnCdRef).toHaveBeenCalled();
  });

});