debian-mirror-gitlab/spec/javascripts/lazy_loader_spec.js

215 lines
6.8 KiB
JavaScript
Raw Normal View History

2017-09-10 17:25:29 +05:30
import LazyLoader from '~/lazy_loader';
2018-12-05 23:21:45 +05:30
import { TEST_HOST } from './test_constants';
2019-01-03 12:48:30 +05:30
let lazyLoader = null;
2017-09-10 17:25:29 +05:30
2018-12-05 23:21:45 +05:30
const execImmediately = callback => {
callback();
};
2018-11-20 20:47:30 +05:30
describe('LazyLoader', function() {
2017-09-10 17:25:29 +05:30
preloadFixtures('issues/issue_with_comment.html.raw');
2019-01-03 12:48:30 +05:30
describe('with IntersectionObserver disabled', () => {
2018-12-05 23:21:45 +05:30
beforeEach(function() {
loadFixtures('issues/issue_with_comment.html.raw');
lazyLoader = new LazyLoader({
observerNode: 'foobar',
});
spyOn(LazyLoader, 'supportsIntersectionObserver').and.callFake(() => false);
spyOn(LazyLoader, 'loadImage').and.callThrough();
spyOn(window, 'requestAnimationFrame').and.callFake(execImmediately);
spyOn(window, 'requestIdleCallback').and.callFake(execImmediately);
// Doing everything that happens normally in onload
lazyLoader.register();
});
afterEach(() => {
lazyLoader.unregister();
});
it('should copy value from data-src to src for img 1', function(done) {
const img = document.querySelectorAll('img[data-src]')[0];
const originalDataSrc = img.getAttribute('data-src');
2019-01-03 12:48:30 +05:30
img.scrollIntoView();
setTimeout(() => {
expect(LazyLoader.loadImage).toHaveBeenCalled();
expect(img.getAttribute('src')).toBe(originalDataSrc);
expect(img).toHaveClass('js-lazy-loaded');
done();
}, 50);
2018-12-05 23:21:45 +05:30
});
it('should lazy load dynamically added data-src images', function(done) {
const newImg = document.createElement('img');
const testPath = `${TEST_HOST}/img/testimg.png`;
newImg.className = 'lazy';
newImg.setAttribute('data-src', testPath);
document.body.appendChild(newImg);
2019-01-03 12:48:30 +05:30
newImg.scrollIntoView();
setTimeout(() => {
expect(LazyLoader.loadImage).toHaveBeenCalled();
expect(newImg.getAttribute('src')).toBe(testPath);
expect(newImg).toHaveClass('js-lazy-loaded');
done();
}, 50);
2018-12-05 23:21:45 +05:30
});
it('should not alter normal images', function(done) {
const newImg = document.createElement('img');
const testPath = `${TEST_HOST}/img/testimg.png`;
newImg.setAttribute('src', testPath);
document.body.appendChild(newImg);
2019-01-03 12:48:30 +05:30
newImg.scrollIntoView();
2018-12-05 23:21:45 +05:30
2019-01-03 12:48:30 +05:30
setTimeout(() => {
expect(LazyLoader.loadImage).not.toHaveBeenCalled();
expect(newImg).not.toHaveClass('js-lazy-loaded');
done();
}, 50);
2018-12-05 23:21:45 +05:30
});
it('should not load dynamically added pictures if content observer is turned off', done => {
lazyLoader.stopContentObserver();
const newImg = document.createElement('img');
const testPath = `${TEST_HOST}/img/testimg.png`;
newImg.className = 'lazy';
newImg.setAttribute('data-src', testPath);
document.body.appendChild(newImg);
2019-01-03 12:48:30 +05:30
newImg.scrollIntoView();
2018-12-05 23:21:45 +05:30
2019-01-03 12:48:30 +05:30
setTimeout(() => {
expect(LazyLoader.loadImage).not.toHaveBeenCalled();
expect(newImg).not.toHaveClass('js-lazy-loaded');
done();
}, 50);
2018-12-05 23:21:45 +05:30
});
it('should load dynamically added pictures if content observer is turned off and on again', done => {
lazyLoader.stopContentObserver();
lazyLoader.startContentObserver();
const newImg = document.createElement('img');
const testPath = `${TEST_HOST}/img/testimg.png`;
newImg.className = 'lazy';
newImg.setAttribute('data-src', testPath);
document.body.appendChild(newImg);
2019-01-03 12:48:30 +05:30
newImg.scrollIntoView();
2018-12-05 23:21:45 +05:30
2019-01-03 12:48:30 +05:30
setTimeout(() => {
expect(LazyLoader.loadImage).toHaveBeenCalled();
expect(newImg).toHaveClass('js-lazy-loaded');
done();
}, 50);
2017-09-10 17:25:29 +05:30
});
});
2018-12-05 23:21:45 +05:30
2019-01-03 12:48:30 +05:30
describe('with IntersectionObserver enabled', () => {
2018-12-05 23:21:45 +05:30
beforeEach(function() {
loadFixtures('issues/issue_with_comment.html.raw');
lazyLoader = new LazyLoader({
observerNode: 'foobar',
});
spyOn(LazyLoader, 'loadImage').and.callThrough();
spyOn(window, 'requestAnimationFrame').and.callFake(execImmediately);
spyOn(window, 'requestIdleCallback').and.callFake(execImmediately);
// Doing everything that happens normally in onload
lazyLoader.register();
});
afterEach(() => {
lazyLoader.unregister();
});
2018-11-20 20:47:30 +05:30
it('should copy value from data-src to src for img 1', function(done) {
2017-09-10 17:25:29 +05:30
const img = document.querySelectorAll('img[data-src]')[0];
const originalDataSrc = img.getAttribute('data-src');
2019-01-03 12:48:30 +05:30
img.scrollIntoView();
setTimeout(() => {
expect(LazyLoader.loadImage).toHaveBeenCalled();
expect(img.getAttribute('src')).toBe(originalDataSrc);
expect(img).toHaveClass('js-lazy-loaded');
done();
}, 50);
2017-09-10 17:25:29 +05:30
});
2018-11-20 20:47:30 +05:30
it('should lazy load dynamically added data-src images', function(done) {
2017-09-10 17:25:29 +05:30
const newImg = document.createElement('img');
2018-12-05 23:21:45 +05:30
const testPath = `${TEST_HOST}/img/testimg.png`;
2017-09-10 17:25:29 +05:30
newImg.className = 'lazy';
newImg.setAttribute('data-src', testPath);
document.body.appendChild(newImg);
2019-01-03 12:48:30 +05:30
newImg.scrollIntoView();
setTimeout(() => {
expect(LazyLoader.loadImage).toHaveBeenCalled();
expect(newImg.getAttribute('src')).toBe(testPath);
expect(newImg).toHaveClass('js-lazy-loaded');
done();
}, 50);
2017-09-10 17:25:29 +05:30
});
2018-11-20 20:47:30 +05:30
it('should not alter normal images', function(done) {
2017-09-10 17:25:29 +05:30
const newImg = document.createElement('img');
2018-12-05 23:21:45 +05:30
const testPath = `${TEST_HOST}/img/testimg.png`;
2017-09-10 17:25:29 +05:30
newImg.setAttribute('src', testPath);
document.body.appendChild(newImg);
2019-01-03 12:48:30 +05:30
newImg.scrollIntoView();
2017-09-10 17:25:29 +05:30
2019-01-03 12:48:30 +05:30
setTimeout(() => {
expect(LazyLoader.loadImage).not.toHaveBeenCalled();
expect(newImg).not.toHaveClass('js-lazy-loaded');
done();
}, 50);
2018-12-05 23:21:45 +05:30
});
it('should not load dynamically added pictures if content observer is turned off', done => {
lazyLoader.stopContentObserver();
const newImg = document.createElement('img');
const testPath = `${TEST_HOST}/img/testimg.png`;
newImg.className = 'lazy';
newImg.setAttribute('data-src', testPath);
document.body.appendChild(newImg);
2019-01-03 12:48:30 +05:30
newImg.scrollIntoView();
2018-12-05 23:21:45 +05:30
2019-01-03 12:48:30 +05:30
setTimeout(() => {
expect(LazyLoader.loadImage).not.toHaveBeenCalled();
expect(newImg).not.toHaveClass('js-lazy-loaded');
done();
}, 50);
2018-12-05 23:21:45 +05:30
});
it('should load dynamically added pictures if content observer is turned off and on again', done => {
lazyLoader.stopContentObserver();
lazyLoader.startContentObserver();
const newImg = document.createElement('img');
const testPath = `${TEST_HOST}/img/testimg.png`;
newImg.className = 'lazy';
newImg.setAttribute('data-src', testPath);
document.body.appendChild(newImg);
2019-01-03 12:48:30 +05:30
newImg.scrollIntoView();
2018-12-05 23:21:45 +05:30
2019-01-03 12:48:30 +05:30
setTimeout(() => {
expect(LazyLoader.loadImage).toHaveBeenCalled();
expect(newImg).toHaveClass('js-lazy-loaded');
done();
}, 50);
2017-09-10 17:25:29 +05:30
});
});
});