diff --git a/src/__tests__/loadable-components/intersection-observer.test.js b/src/__tests__/loadable-components/intersection-observer.test.js index 7a1e687..0e1cb90 100644 --- a/src/__tests__/loadable-components/intersection-observer.test.js +++ b/src/__tests__/loadable-components/intersection-observer.test.js @@ -15,6 +15,7 @@ const loadableVisiblity = require('../../loadable-components') const opts = { loading: () => null, loader: () => Promise.resolve(), + observerOptions: { 'a': 'test' } } const props = {'a': 1, 'b': 2} @@ -104,4 +105,22 @@ describe('Loadable', () => { expect(globallyTrackedElements.length).toEqual(1) }) + + + test('it should call setIntersectionObserver with observerOptions', () => { + const mock = jest.fn().mockImplementation(() => { + return { + observe: () => {}, + } + }) + + global.IntersectionObserver = mock + + const Loader = loadableVisiblity(opts) + + mount() + + expect(mock).toHaveBeenCalledWith(expect.anything(), opts.observerOptions) + global.IntersectionObserver = IntersectionObserver + }); }) diff --git a/src/__tests__/react-loadable/intersection-observer.test.js b/src/__tests__/react-loadable/intersection-observer.test.js index 0117c4d..87baa1d 100644 --- a/src/__tests__/react-loadable/intersection-observer.test.js +++ b/src/__tests__/react-loadable/intersection-observer.test.js @@ -11,6 +11,7 @@ const LoadableVisibility = require('../../') const opts = { loading: () => null, loader: () => Promise.resolve(), + observerOptions: { 'a': 'test' } } const props = {'a': 1, 'b': 2} @@ -77,6 +78,23 @@ describe('Loadable', () => { expect(wrapper.find('.loading-class-name')).toHaveLength(0) expect(wrapper.find('LoadableObject')).toHaveLength(1) }); + + test('it should call setIntersectionObserver with observerOptions', () => { + const mock = jest.fn().mockImplementation(() => { + return { + observe: () => {}, + } + }) + + global.IntersectionObserver = mock + + const Loader = LoadableVisibility(opts) + + mount() + + expect(mock).toHaveBeenCalledWith(expect.anything(), opts.observerOptions) + global.IntersectionObserver = IntersectionObserver + }); }) describe('Loadable.Map', () => { diff --git a/src/createLoadableVisibilityComponent.js b/src/createLoadableVisibilityComponent.js index 72fbf68..5b0e1cc 100644 --- a/src/createLoadableVisibilityComponent.js +++ b/src/createLoadableVisibilityComponent.js @@ -4,16 +4,18 @@ import { IntersectionObserver } from './capacities' let intersectionObserver const trackedElements = new Map() -if (IntersectionObserver) { - intersectionObserver = new window.IntersectionObserver((entries, observer) => { - entries.forEach((entry) => { - const trackedElement = trackedElements.get(entry.target) - - if (trackedElement && entry.intersectionRatio > 0) { - trackedElement.visibilityHandler() - } - }) - }) +const setIntersectionObserver = (options = {}) => { + if (IntersectionObserver) { + intersectionObserver = new window.IntersectionObserver((entries, observer) => { + entries.forEach((entry) => { + const trackedElement = trackedElements.get(entry.target) + + if (trackedElement && entry.intersectionRatio > 0) { + trackedElement.visibilityHandler() + } + }) + }, options) + } } function createLoadableVisibilityComponent (args, { @@ -52,6 +54,7 @@ function createLoadableVisibilityComponent (args, { if (!preloaded) { const element = this.loadingRef trackedElements.set(element, this) + setIntersectionObserver(args[0].observerOptions) intersectionObserver.observe(element) } }