Как провести модульное тестирование переменной типа () => void

Я пытаюсь написать модульные тесты для компонента, использующего MediaQueryList. Я изо всех сил пытаюсь охватить одну строку, которая назначает функцию стрелки переменной.

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

Мои занятия:

export class AppComponent implements OnDestroy {
  mobileQuery: MediaQueryList;
  _mobileQueryListener: () => void;

  constructor(
    private changeDetectorRef: ChangeDetectorRef,
    private media: MediaMatcher
  ) {
    this.mobileQuery = this.media.matchMedia('(max-width: 1000px)');
    this._mobileQueryListener = () => this.changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

  ngOnDestroy(): void {
    this.mobileQuery.removeListener(this._mobileQueryListener);
  }
}

Мой тест:

it('should setup the media query', () => {
  const fixture = TestBed.createComponent(AppComponent);
  const app = fixture.componentInstance;

  expect(app.mobileQuery).toBeTruthy();
  expect(app._mobileQueryListener).toEqual(/* ??? */);
});

Я хочу достичь 100% покрытия кода, и для этого мне нужно покрыть назначение _mobileQueryListener. Есть идеи?

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
3
0
397
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, вы должны попробовать проверить:

it('should setup the media query', () => {
  const fixture = TestBed.createComponent(AppComponent);
  const app = fixture.componentInstance;

  expect(app.mobileQuery).toBeTruthy();
  expect(app._mobileQueryListener).toBeDefined();
});

_mobileQueryListener: () => void; — это просто объявление, а не инициализация переменной. Итак, проверьте, определено ли оно.

и чтобы проверить поведение _mobileQueryListener для вызова detectChanges(), вы можете добавить еще один тестовый пример (убедитесь, что у вас есть public changeDetectorRef, чтобы поместить spy над ним):

it('should should call "detectChanges()" from "_mobileQueryListener"', () => {
  const fixture = TestBed.createComponent(AppComponent);
  const app = fixture.componentInstance;
  expect(app._mobileQueryListener).toBeDefined();
  spyOn(app.changeDetectorRef,"detectChanges").and.callThrough();
  app._mobileQueryListener();
  expect(app.changeDetectorRef.detectChanges).toHaveBeenCalled();
});

Кстати, переместите код ниже в блок beforeEach() и объявите эти переменные глобально.

  fixture = TestBed.createComponent(AppComponent);
  app = fixture.componentInstance;

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