2020-06-10 05:08:35 -04:00
|
|
|
import { noop } from 'lodash';
|
|
|
|
import { useMockMutationObserver, useMockIntersectionObserver } from 'helpers/mock_dom_observer';
|
2021-02-14 13:09:20 -05:00
|
|
|
import { TEST_HOST } from 'helpers/test_constants';
|
2021-01-14 19:10:45 -05:00
|
|
|
import waitForPromises from 'helpers/wait_for_promises';
|
2020-08-17 17:09:56 -04:00
|
|
|
import LazyLoader from '~/lazy_loader';
|
2020-06-10 05:08:35 -04:00
|
|
|
|
2020-12-23 16:10:24 -05:00
|
|
|
const execImmediately = (callback) => {
|
2020-06-10 05:08:35 -04:00
|
|
|
callback();
|
|
|
|
};
|
|
|
|
|
|
|
|
const TEST_PATH = `${TEST_HOST}/img/testimg.png`;
|
|
|
|
|
|
|
|
describe('LazyLoader', () => {
|
|
|
|
let lazyLoader = null;
|
|
|
|
|
|
|
|
const { trigger: triggerMutation } = useMockMutationObserver();
|
|
|
|
const { trigger: triggerIntersection } = useMockIntersectionObserver();
|
|
|
|
|
|
|
|
const triggerChildMutation = () => {
|
|
|
|
triggerMutation(document.body, { options: { childList: true, subtree: true } });
|
|
|
|
};
|
|
|
|
|
2020-12-23 16:10:24 -05:00
|
|
|
const triggerIntersectionWithRatio = (img) => {
|
2020-06-10 05:08:35 -04:00
|
|
|
triggerIntersection(img, { entry: { intersectionRatio: 0.1 } });
|
|
|
|
};
|
|
|
|
|
|
|
|
const createLazyLoadImage = () => {
|
|
|
|
const newImg = document.createElement('img');
|
|
|
|
newImg.className = 'lazy';
|
2022-06-10 20:09:17 -04:00
|
|
|
newImg.setAttribute('data-src', TEST_PATH);
|
2020-06-10 05:08:35 -04:00
|
|
|
|
|
|
|
document.body.appendChild(newImg);
|
|
|
|
triggerChildMutation();
|
|
|
|
|
|
|
|
return newImg;
|
|
|
|
};
|
|
|
|
|
|
|
|
const createImage = () => {
|
|
|
|
const newImg = document.createElement('img');
|
|
|
|
newImg.setAttribute('src', TEST_PATH);
|
|
|
|
|
|
|
|
document.body.appendChild(newImg);
|
|
|
|
triggerChildMutation();
|
|
|
|
|
|
|
|
return newImg;
|
|
|
|
};
|
|
|
|
|
2020-07-27 08:09:50 -04:00
|
|
|
const mockLoadEvent = () => {
|
|
|
|
const addEventListener = window.addEventListener.bind(window);
|
|
|
|
|
|
|
|
jest.spyOn(window, 'addEventListener').mockImplementation((event, callback) => {
|
|
|
|
if (event === 'load') {
|
|
|
|
callback();
|
|
|
|
} else {
|
|
|
|
addEventListener(event, callback);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2020-06-10 05:08:35 -04:00
|
|
|
beforeEach(() => {
|
|
|
|
jest.spyOn(window, 'requestAnimationFrame').mockImplementation(execImmediately);
|
|
|
|
jest.spyOn(window, 'requestIdleCallback').mockImplementation(execImmediately);
|
|
|
|
jest.spyOn(LazyLoader, 'loadImage');
|
2020-07-27 08:09:50 -04:00
|
|
|
|
|
|
|
mockLoadEvent();
|
2020-06-10 05:08:35 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
document.body.innerHTML = '';
|
|
|
|
});
|
|
|
|
|
|
|
|
describe.each`
|
|
|
|
hasIntersectionObserver | trigger
|
|
|
|
${true} | ${triggerIntersectionWithRatio}
|
|
|
|
${false} | ${noop}
|
|
|
|
`(
|
|
|
|
'with hasIntersectionObserver=$hasIntersectionObserver',
|
|
|
|
({ hasIntersectionObserver, trigger }) => {
|
|
|
|
let origIntersectionObserver;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
origIntersectionObserver = global.IntersectionObserver;
|
|
|
|
global.IntersectionObserver = hasIntersectionObserver
|
|
|
|
? global.IntersectionObserver
|
|
|
|
: undefined;
|
|
|
|
|
|
|
|
lazyLoader = new LazyLoader({
|
|
|
|
observerNode: 'foobar',
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
global.IntersectionObserver = origIntersectionObserver;
|
|
|
|
lazyLoader.unregister();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('determines intersection observer support', () => {
|
|
|
|
expect(LazyLoader.supportsIntersectionObserver()).toBe(hasIntersectionObserver);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should copy value from data-src to src for img 1', () => {
|
|
|
|
const img = createLazyLoadImage();
|
|
|
|
|
|
|
|
// Doing everything that happens normally in onload
|
|
|
|
lazyLoader.register();
|
|
|
|
|
|
|
|
trigger(img);
|
|
|
|
|
|
|
|
expect(LazyLoader.loadImage).toHaveBeenCalledWith(img);
|
|
|
|
expect(img.getAttribute('src')).toBe(TEST_PATH);
|
2022-06-10 20:09:17 -04:00
|
|
|
expect(img.getAttribute('data-src')).toBe(null);
|
2020-06-10 05:08:35 -04:00
|
|
|
expect(img).toHaveClass('js-lazy-loaded');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should lazy load dynamically added data-src images', async () => {
|
|
|
|
lazyLoader.register();
|
|
|
|
|
|
|
|
const newImg = createLazyLoadImage();
|
|
|
|
|
|
|
|
trigger(newImg);
|
|
|
|
|
|
|
|
await waitForPromises();
|
|
|
|
|
|
|
|
expect(LazyLoader.loadImage).toHaveBeenCalledWith(newImg);
|
|
|
|
expect(newImg.getAttribute('src')).toBe(TEST_PATH);
|
|
|
|
expect(newImg).toHaveClass('js-lazy-loaded');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not alter normal images', () => {
|
|
|
|
const newImg = createImage();
|
|
|
|
|
|
|
|
lazyLoader.register();
|
|
|
|
|
|
|
|
expect(LazyLoader.loadImage).not.toHaveBeenCalled();
|
|
|
|
expect(newImg).not.toHaveClass('js-lazy-loaded');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not load dynamically added pictures if content observer is turned off', async () => {
|
|
|
|
lazyLoader.register();
|
|
|
|
lazyLoader.stopContentObserver();
|
|
|
|
|
|
|
|
const newImg = createLazyLoadImage();
|
|
|
|
|
|
|
|
await waitForPromises();
|
|
|
|
|
|
|
|
expect(LazyLoader.loadImage).not.toHaveBeenCalledWith(newImg);
|
|
|
|
expect(newImg).not.toHaveClass('js-lazy-loaded');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should load dynamically added pictures if content observer is turned off and on again', async () => {
|
|
|
|
lazyLoader.register();
|
|
|
|
lazyLoader.stopContentObserver();
|
|
|
|
lazyLoader.startContentObserver();
|
|
|
|
|
|
|
|
const newImg = createLazyLoadImage();
|
|
|
|
|
|
|
|
trigger(newImg);
|
|
|
|
|
|
|
|
await waitForPromises();
|
|
|
|
|
|
|
|
expect(LazyLoader.loadImage).toHaveBeenCalledWith(newImg);
|
|
|
|
expect(newImg.getAttribute('src')).toBe(TEST_PATH);
|
|
|
|
expect(newImg).toHaveClass('js-lazy-loaded');
|
|
|
|
});
|
|
|
|
},
|
|
|
|
);
|
|
|
|
});
|