test: improve test coverage of intersection.js

Author: thebuilder

src/intersection.js

@@ -120,7 +120,7 @@ function onChange(changes) {
     const { isIntersecting, intersectionRatio, target } = intersection
     const instance = INSTANCE_MAP.get(target)
 
-    // Firefox can report a negative intersectionRatio when scrolling. Ignore this, and
+    // Firefox can report a negative intersectionRatio when scrolling.
     if (instance && intersectionRatio >= 0) {
       const options = instance.options
 

tests/Observer.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-named-as-default-member */
 import React from 'react'
 import { mount } from 'enzyme'
 import Observer from '../src/index.js'
@@ -123,7 +124,7 @@ it('Should recreate observer when root change', () => {
   expect(instance.observeNode).toHaveBeenCalled()
 })
 
-it('Should recreate observer when root change', () => {
+it('Should recreate observer when rootMargin change', () => {
   const wrapper = mount(<Observer>Content</Observer>)
   const instance = wrapper.instance()
   jest.spyOn(instance, 'observeNode')

tests/intersection.test.js

@@ -74,8 +74,165 @@ it('should observe with rootId', () => {
     },
   })
 })
+it('should observe without rootId', () => {
+  const cb = jest.fn()
+  const instance = observe(el, cb, { threshold: 0, root: {} })
+
+  expect(instance).toMatchObject({
+    visible: false,
+    options: {
+      root: {},
+    },
+  })
+})
 
 it('should unobserve', () => {
   observe(el, jest.fn())
   unobserve(el)
 })
+
+it('should keep observer when unobserve with multiple elements', () => {
+  observe(el, jest.fn())
+  observe({ el: 'htmlElement2' }, jest.fn())
+  unobserve(el)
+})
+
+it('should trigger onChange with ratio 0', () => {
+  const cb = jest.fn()
+  const instance = observe(el, cb)
+  const calls = global.IntersectionObserver.mock.calls
+  const [onChange] = calls[calls.length - 1]
+
+  // We now have the onChange method
+  onChange([
+    {
+      target: el,
+      intersectionRatio: 0,
+    },
+  ])
+
+  expect(cb).toHaveBeenCalledWith(true)
+  expect(instance.visible).toBe(true)
+})
+
+it('should trigger onChange with multiple thresholds ', () => {
+  const cb = jest.fn()
+  const instance = observe(el, cb, { threshold: [0, 0.5] })
+  const calls = global.IntersectionObserver.mock.calls
+  const [onChange] = calls[calls.length - 1]
+
+  // We now have the onChange method
+  onChange([
+    {
+      target: el,
+      intersectionRatio: 0,
+    },
+  ])
+
+  expect(cb).toHaveBeenCalledWith(true)
+  expect(instance.visible).toBe(true)
+})
+
+it('should trigger onChange with isIntersection', () => {
+  const cb = jest.fn()
+  const instance = observe(el, cb)
+  const calls = global.IntersectionObserver.mock.calls
+  const [onChange] = calls[calls.length - 1]
+
+  // We now have the onChange method
+  onChange([
+    {
+      target: el,
+      intersectionRatio: 0,
+      isIntersecting: true,
+    },
+  ])
+
+  expect(cb).toHaveBeenCalledWith(true)
+  expect(instance.visible).toBe(true)
+})
+
+it('should not trigger if threshold is undefined', () => {
+  const cb = jest.fn()
+  const instance = observe(el, cb, { threshold: undefined })
+  const calls = global.IntersectionObserver.mock.calls
+  const [onChange] = calls[calls.length - 1]
+
+  // We now have the onChange method
+  onChange([
+    {
+      target: el,
+      intersectionRatio: 0,
+    },
+  ])
+
+  expect(cb).toHaveBeenCalledWith(false)
+  expect(instance.visible).toBe(false)
+})
+
+it('should trigger onChange with isIntersection false', () => {
+  const cb = jest.fn()
+  const instance = observe(el, cb)
+  const calls = global.IntersectionObserver.mock.calls
+  const [onChange] = calls[calls.length - 1]
+
+  // We now have the onChange method
+  onChange([
+    {
+      target: el,
+      intersectionRatio: 0,
+      isIntersecting: false,
+    },
+  ])
+
+  expect(cb).toHaveBeenCalledWith(false)
+  expect(instance.visible).toBe(false)
+})
+
+it('should trigger clear visible when going back to 0', () => {
+  const cb = jest.fn()
+  const instance = observe(el, cb)
+  const calls = global.IntersectionObserver.mock.calls
+  const [onChange] = calls[calls.length - 1]
+
+  onChange([
+    {
+      target: el,
+      intersectionRatio: 0.1,
+    },
+  ])
+
+  expect(instance.visible).toBe(true)
+  onChange([
+    {
+      target: el,
+      intersectionRatio: 0,
+    },
+  ])
+
+  expect(instance.visible).toBe(false)
+})
+
+it('should trigger clear visible when going back to 0 with array threshold', () => {
+  const cb = jest.fn()
+  const instance = observe(el, cb, { threshold: [0, 0.5] })
+  const calls = global.IntersectionObserver.mock.calls
+  const [onChange] = calls[calls.length - 1]
+
+  onChange([
+    {
+      target: el,
+      intersectionRatio: 0.1,
+    },
+  ])
+
+  expect(instance.visible).toBe(true)
+  onChange([
+    {
+      target: el,
+      intersectionRatio: 0,
+    },
+  ])
+
+  expect(instance.visible).toBe(false)
+})