2017-07-24 17:36:52 +00:00
|
|
|
import LazyLoader from '~/lazy_loader';
|
2018-09-06 14:36:05 +00:00
|
|
|
import { TEST_HOST } from './test_constants';
|
2017-07-24 17:36:52 +00:00
|
|
|
|
|
|
|
let lazyLoader = null;
|
|
|
|
|
2018-09-06 14:36:05 +00:00
|
|
|
const execImmediately = callback => {
|
|
|
|
callback();
|
|
|
|
};
|
|
|
|
|
2018-09-03 07:44:46 +00:00
|
|
|
describe('LazyLoader', function() {
|
2017-07-24 17:36:52 +00:00
|
|
|
preloadFixtures('issues/issue_with_comment.html.raw');
|
|
|
|
|
2018-09-06 14:36:05 +00:00
|
|
|
describe('with IntersectionObserver disabled', () => {
|
|
|
|
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');
|
|
|
|
img.scrollIntoView();
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
expect(LazyLoader.loadImage).toHaveBeenCalled();
|
|
|
|
expect(img.getAttribute('src')).toBe(originalDataSrc);
|
|
|
|
expect(img).toHaveClass('js-lazy-loaded');
|
|
|
|
done();
|
|
|
|
}, 50);
|
|
|
|
});
|
|
|
|
|
|
|
|
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);
|
|
|
|
newImg.scrollIntoView();
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
expect(LazyLoader.loadImage).toHaveBeenCalled();
|
|
|
|
expect(newImg.getAttribute('src')).toBe(testPath);
|
|
|
|
expect(newImg).toHaveClass('js-lazy-loaded');
|
|
|
|
done();
|
|
|
|
}, 50);
|
|
|
|
});
|
|
|
|
|
|
|
|
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);
|
|
|
|
newImg.scrollIntoView();
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
expect(LazyLoader.loadImage).not.toHaveBeenCalled();
|
|
|
|
expect(newImg).not.toHaveClass('js-lazy-loaded');
|
|
|
|
done();
|
|
|
|
}, 50);
|
|
|
|
});
|
|
|
|
|
|
|
|
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);
|
|
|
|
newImg.scrollIntoView();
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
expect(LazyLoader.loadImage).not.toHaveBeenCalled();
|
|
|
|
expect(newImg).not.toHaveClass('js-lazy-loaded');
|
|
|
|
done();
|
|
|
|
}, 50);
|
|
|
|
});
|
|
|
|
|
|
|
|
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);
|
|
|
|
newImg.scrollIntoView();
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
expect(LazyLoader.loadImage).toHaveBeenCalled();
|
|
|
|
expect(newImg).toHaveClass('js-lazy-loaded');
|
|
|
|
done();
|
|
|
|
}, 50);
|
2017-07-24 17:36:52 +00:00
|
|
|
});
|
|
|
|
});
|
2018-09-06 14:36:05 +00:00
|
|
|
|
|
|
|
describe('with IntersectionObserver enabled', () => {
|
|
|
|
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-09-03 07:44:46 +00:00
|
|
|
it('should copy value from data-src to src for img 1', function(done) {
|
2017-07-24 17:36:52 +00:00
|
|
|
const img = document.querySelectorAll('img[data-src]')[0];
|
|
|
|
const originalDataSrc = img.getAttribute('data-src');
|
|
|
|
img.scrollIntoView();
|
|
|
|
|
|
|
|
setTimeout(() => {
|
2018-09-06 14:36:05 +00:00
|
|
|
expect(LazyLoader.loadImage).toHaveBeenCalled();
|
2017-07-24 17:36:52 +00:00
|
|
|
expect(img.getAttribute('src')).toBe(originalDataSrc);
|
2018-09-06 14:36:05 +00:00
|
|
|
expect(img).toHaveClass('js-lazy-loaded');
|
2017-07-24 17:36:52 +00:00
|
|
|
done();
|
2018-09-06 14:36:05 +00:00
|
|
|
}, 50);
|
2017-07-24 17:36:52 +00:00
|
|
|
});
|
|
|
|
|
2018-09-03 07:44:46 +00:00
|
|
|
it('should lazy load dynamically added data-src images', function(done) {
|
2017-07-24 17:36:52 +00:00
|
|
|
const newImg = document.createElement('img');
|
2018-09-06 14:36:05 +00:00
|
|
|
const testPath = `${TEST_HOST}/img/testimg.png`;
|
2017-07-24 17:36:52 +00:00
|
|
|
newImg.className = 'lazy';
|
|
|
|
newImg.setAttribute('data-src', testPath);
|
|
|
|
document.body.appendChild(newImg);
|
|
|
|
newImg.scrollIntoView();
|
|
|
|
|
|
|
|
setTimeout(() => {
|
2018-09-06 14:36:05 +00:00
|
|
|
expect(LazyLoader.loadImage).toHaveBeenCalled();
|
2017-07-24 17:36:52 +00:00
|
|
|
expect(newImg.getAttribute('src')).toBe(testPath);
|
2018-09-06 14:36:05 +00:00
|
|
|
expect(newImg).toHaveClass('js-lazy-loaded');
|
2017-07-24 17:36:52 +00:00
|
|
|
done();
|
2018-09-06 14:36:05 +00:00
|
|
|
}, 50);
|
2017-07-24 17:36:52 +00:00
|
|
|
});
|
|
|
|
|
2018-09-03 07:44:46 +00:00
|
|
|
it('should not alter normal images', function(done) {
|
2017-07-24 17:36:52 +00:00
|
|
|
const newImg = document.createElement('img');
|
2018-09-06 14:36:05 +00:00
|
|
|
const testPath = `${TEST_HOST}/img/testimg.png`;
|
2017-07-24 17:36:52 +00:00
|
|
|
newImg.setAttribute('src', testPath);
|
|
|
|
document.body.appendChild(newImg);
|
|
|
|
newImg.scrollIntoView();
|
|
|
|
|
|
|
|
setTimeout(() => {
|
2018-09-06 14:36:05 +00:00
|
|
|
expect(LazyLoader.loadImage).not.toHaveBeenCalled();
|
|
|
|
expect(newImg).not.toHaveClass('js-lazy-loaded');
|
|
|
|
done();
|
|
|
|
}, 50);
|
|
|
|
});
|
|
|
|
|
|
|
|
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);
|
|
|
|
newImg.scrollIntoView();
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
expect(LazyLoader.loadImage).not.toHaveBeenCalled();
|
2017-07-24 17:36:52 +00:00
|
|
|
expect(newImg).not.toHaveClass('js-lazy-loaded');
|
|
|
|
done();
|
2018-09-06 14:36:05 +00:00
|
|
|
}, 50);
|
|
|
|
});
|
|
|
|
|
|
|
|
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);
|
|
|
|
newImg.scrollIntoView();
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
expect(LazyLoader.loadImage).toHaveBeenCalled();
|
|
|
|
expect(newImg).toHaveClass('js-lazy-loaded');
|
|
|
|
done();
|
|
|
|
}, 50);
|
2017-07-24 17:36:52 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|