fix: ensure thresholds exists, by setting it on the instance (#194)

Author: thebuilder

src/__tests__/intersection.test.js

@@ -1,15 +1,5 @@
 import { observe, unobserve, destroy } from '../intersection'
-
-global.IntersectionObserver = jest.fn((cb, options) => ({
-  thresholds: Array.isArray(options.threshold)
-    ? options.threshold
-    : [options.threshold],
-  root: options.root,
-  rootMargin: options.rootMargin,
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn(),
-}))
+import '../test-utils'
 
 afterEach(() => destroy())
 
@@ -22,6 +12,7 @@ it('should observe', () => {
   expect(instance).toMatchObject({
     observerId: '0',
     inView: false,
+    thresholds: [0],
     observer: {
       thresholds: [0],
     },
@@ -41,6 +32,7 @@ it('should observe with options', () => {
   expect(instance).toMatchObject({
     observerId: '0',
     inView: false,
+    thresholds: [0],
     observer: {
       thresholds: [0],
     },
@@ -54,6 +46,7 @@ it('should observe with threshold', () => {
   expect(instance).toMatchObject({
     observerId: '1',
     inView: false,
+    thresholds: [1],
     observer: {
       thresholds: [1],
     },
@@ -67,6 +60,7 @@ it('should observe with Array threshold', () => {
   expect(instance).toMatchObject({
     observerId: '0.3,0.6',
     inView: false,
+    thresholds: [0.3, 0.6],
     observer: {
       thresholds: [0.3, 0.6],
     },

src/intersection.ts

@@ -11,6 +11,7 @@ export type ObserverInstance = {
   inView: boolean
   observerId: string
   observer: IntersectionObserver
+  thresholds: number[]
 }
 
 const INSTANCE_MAP: Map<Element, ObserverInstance> = new Map()
@@ -78,6 +79,10 @@ export function observe(
     inView: false,
     observerId,
     observer: observerInstance,
+    // Make sure we have the thresholds value. It's undefined on a browser like Chrome 51.
+    thresholds:
+      observerInstance.thresholds ||
+      (Array.isArray(threshold) ? threshold : [threshold]),
   }
 
   INSTANCE_MAP.set(element, instance)
@@ -150,10 +155,8 @@ function onChange(changes: IntersectionObserverEntry[]) {
     // Firefox can report a negative intersectionRatio when scrolling.
     /* istanbul ignore else */
     if (instance && intersectionRatio >= 0) {
-      const thresholds = instance.observer.thresholds
-
       // If threshold is an array, check if any of them intersects. This just triggers the onChange event multiple times.
-      let inView = thresholds.some(threshold => {
+      let inView = instance.thresholds.some(threshold => {
         return instance.inView
           ? intersectionRatio > threshold
           : intersectionRatio >= threshold

src/test-utils.ts

@@ -28,7 +28,7 @@ beforeAll(() => {
 
 afterEach(() => {
   // @ts-ignore
-  global.IntersectionObserver.mockReset()
+  global.IntersectionObserver.mockClear()
   instanceMap.clear()
   observerMap.clear()
 })