Test IntersectionObserver in an Angular component

Question

I'm using an IntersectionObserver to load data when user scroll to the bottom of the page.

@Output() onScroll = new EventEmitter();
@ViewChild('end') endOfList!: ElementRef<HTMLElement>;

observer!: IntersectionObserver;

constructor(private requests: ElementRef) { }

ngAfterViewInit() {
  this.observer = new IntersectionObserver(([entry]) => {
    entry.isIntersecting && this.onScroll.emit();
  }, this.requests.nativeElement);

  this.observer.observe(this.endOfList.nativeElement);
}

Everything works fine but I can't figure out how to test it.

I think I have to use a spy to spy on scroll or a mock of IntersectionObserver but I don't understand how to use them in my case.

Any ideas?

Answer 1

Mock the IntersectionObserver :

beforeEach(() => {
  fixture = TestBed.createComponent(RequestsInfiniteListComponent);
  component = fixture.componentInstance;

  class IntersectionObserver {
    observe: () => void;
    unobserve: () => void;

    constructor(
      public callback: (entries: Array<IntersectionObserverEntry>) => void
    ) {
      this.observe = jasmine.createSpy('observe');
      this.unobserve = jasmine.createSpy('unobserve');
    }
  }
  /* eslint-disable  @typescript-eslint/no-explicit-any */
  (window as any).IntersectionObserver = IntersectionObserver;
  fixture.detectChanges();
});