94 lines
2.4 KiB
TypeScript
Executable File
94 lines
2.4 KiB
TypeScript
Executable File
import {renderHook, act} from '@testing-library/react-hooks'
|
|
import useIntersectionObserver from './index'
|
|
|
|
const observerMap = new Map()
|
|
const instanceMap = new Map()
|
|
|
|
beforeAll(() => {
|
|
// @ts-ignore
|
|
global.IntersectionObserver = jest.fn((cb, options) => {
|
|
const instance = {
|
|
thresholds: Array.isArray(options.threshold)
|
|
? options.threshold
|
|
: [options.threshold],
|
|
root: options.root,
|
|
rootMargin: options.rootMargin,
|
|
observe: jest.fn((element: Element) => {
|
|
instanceMap.set(element, instance)
|
|
observerMap.set(element, cb)
|
|
}),
|
|
unobserve: jest.fn((element: Element) => {
|
|
instanceMap.delete(element)
|
|
observerMap.delete(element)
|
|
}),
|
|
disconnect: jest.fn(),
|
|
}
|
|
return instance
|
|
})
|
|
})
|
|
|
|
afterEach(() => {
|
|
// @ts-ignore
|
|
global.IntersectionObserver.mockClear()
|
|
instanceMap.clear()
|
|
observerMap.clear()
|
|
})
|
|
|
|
function mockAllIsIntersecting(isIntersecting: boolean): void {
|
|
observerMap.forEach((onChange, element) => {
|
|
mockIsIntersecting(element, isIntersecting)
|
|
})
|
|
}
|
|
|
|
function mockIsIntersecting(element: Element, isIntersecting: boolean): void {
|
|
const cb = observerMap.get(element)
|
|
if (cb) {
|
|
const entry = [
|
|
{
|
|
isIntersecting,
|
|
target: element,
|
|
intersectionRatio: isIntersecting ? 1 : 0,
|
|
},
|
|
]
|
|
|
|
act(() => cb(entry))
|
|
}
|
|
}
|
|
|
|
function intersectionMockInstance(element: Element): IntersectionObserver {
|
|
return instanceMap.get(element)
|
|
}
|
|
|
|
it('sets initialIsIntersecting', () => {
|
|
expect(
|
|
renderHook(() =>
|
|
useIntersectionObserver(null, {initialIsIntersecting: true})
|
|
).result.current.isIntersecting
|
|
).toBe(true)
|
|
expect(
|
|
renderHook(() =>
|
|
useIntersectionObserver(null, {initialIsIntersecting: false})
|
|
).result.current.isIntersecting
|
|
).toBe(false)
|
|
})
|
|
|
|
it('observes', () => {
|
|
const element = document.createElement('div')
|
|
renderHook(() => useIntersectionObserver(element))
|
|
const instance = intersectionMockInstance(element)
|
|
expect(instance.observe).toHaveBeenCalledWith(element)
|
|
})
|
|
|
|
it('should be intersecting', () => {
|
|
const element = document.createElement('div')
|
|
const {result} = renderHook(() => useIntersectionObserver(element))
|
|
|
|
expect(result.current.isIntersecting).toBe(false)
|
|
|
|
mockAllIsIntersecting(true)
|
|
expect(result.current.isIntersecting).toBe(true)
|
|
|
|
mockAllIsIntersecting(false)
|
|
expect(result.current.isIntersecting).toBe(false)
|
|
})
|