diff options
Diffstat (limited to 'spec/javascripts/lazy_loader_spec.js')
-rw-r--r-- | spec/javascripts/lazy_loader_spec.js | 174 |
1 files changed, 102 insertions, 72 deletions
diff --git a/spec/javascripts/lazy_loader_spec.js b/spec/javascripts/lazy_loader_spec.js index eac4756e8a9..cbdc1644430 100644 --- a/spec/javascripts/lazy_loader_spec.js +++ b/spec/javascripts/lazy_loader_spec.js @@ -1,16 +1,19 @@ import LazyLoader from '~/lazy_loader'; import { TEST_HOST } from './test_constants'; - -let lazyLoader = null; +import scrollIntoViewPromise from './helpers/scroll_into_view_promise'; +import waitForPromises from './helpers/wait_for_promises'; +import waitForAttributeChange from './helpers/wait_for_attribute_change'; const execImmediately = callback => { callback(); }; describe('LazyLoader', function() { + let lazyLoader = null; + preloadFixtures('issues/issue_with_comment.html.raw'); - describe('with IntersectionObserver disabled', () => { + describe('without IntersectionObserver', () => { beforeEach(function() { loadFixtures('issues/issue_with_comment.html.raw'); @@ -36,14 +39,15 @@ describe('LazyLoader', function() { 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); + + Promise.all([scrollIntoViewPromise(img), waitForAttributeChange(img, ['data-src', 'src'])]) + .then(() => { + expect(LazyLoader.loadImage).toHaveBeenCalled(); + expect(img.getAttribute('src')).toBe(originalDataSrc); + expect(img).toHaveClass('js-lazy-loaded'); + done(); + }) + .catch(done.fail); }); it('should lazy load dynamically added data-src images', function(done) { @@ -52,14 +56,18 @@ describe('LazyLoader', function() { 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); + + Promise.all([ + scrollIntoViewPromise(newImg), + waitForAttributeChange(newImg, ['data-src', 'src']), + ]) + .then(() => { + expect(LazyLoader.loadImage).toHaveBeenCalled(); + expect(newImg.getAttribute('src')).toBe(testPath); + expect(newImg).toHaveClass('js-lazy-loaded'); + done(); + }) + .catch(done.fail); }); it('should not alter normal images', function(done) { @@ -67,13 +75,15 @@ describe('LazyLoader', function() { 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); + scrollIntoViewPromise(newImg) + .then(waitForPromises) + .then(() => { + expect(LazyLoader.loadImage).not.toHaveBeenCalled(); + expect(newImg).not.toHaveClass('js-lazy-loaded'); + done(); + }) + .catch(done.fail); }); it('should not load dynamically added pictures if content observer is turned off', done => { @@ -84,13 +94,15 @@ describe('LazyLoader', function() { 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); + scrollIntoViewPromise(newImg) + .then(waitForPromises) + .then(() => { + expect(LazyLoader.loadImage).not.toHaveBeenCalled(); + expect(newImg).not.toHaveClass('js-lazy-loaded'); + done(); + }) + .catch(done.fail); }); it('should load dynamically added pictures if content observer is turned off and on again', done => { @@ -102,17 +114,22 @@ describe('LazyLoader', function() { 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); + Promise.all([ + scrollIntoViewPromise(newImg), + waitForAttributeChange(newImg, ['data-src', 'src']), + ]) + .then(waitForPromises) + .then(() => { + expect(LazyLoader.loadImage).toHaveBeenCalled(); + expect(newImg).toHaveClass('js-lazy-loaded'); + done(); + }) + .catch(done.fail); }); }); - describe('with IntersectionObserver enabled', () => { + describe('with IntersectionObserver', () => { beforeEach(function() { loadFixtures('issues/issue_with_comment.html.raw'); @@ -136,14 +153,15 @@ describe('LazyLoader', function() { 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); + + Promise.all([scrollIntoViewPromise(img), waitForAttributeChange(img, ['data-src', 'src'])]) + .then(() => { + expect(LazyLoader.loadImage).toHaveBeenCalled(); + expect(img.getAttribute('src')).toBe(originalDataSrc); + expect(img).toHaveClass('js-lazy-loaded'); + done(); + }) + .catch(done.fail); }); it('should lazy load dynamically added data-src images', function(done) { @@ -152,14 +170,18 @@ describe('LazyLoader', function() { 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); + + Promise.all([ + scrollIntoViewPromise(newImg), + waitForAttributeChange(newImg, ['data-src', 'src']), + ]) + .then(() => { + expect(LazyLoader.loadImage).toHaveBeenCalled(); + expect(newImg.getAttribute('src')).toBe(testPath); + expect(newImg).toHaveClass('js-lazy-loaded'); + done(); + }) + .catch(done.fail); }); it('should not alter normal images', function(done) { @@ -167,13 +189,15 @@ describe('LazyLoader', function() { 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); + scrollIntoViewPromise(newImg) + .then(waitForPromises) + .then(() => { + expect(LazyLoader.loadImage).not.toHaveBeenCalled(); + expect(newImg).not.toHaveClass('js-lazy-loaded'); + done(); + }) + .catch(done.fail); }); it('should not load dynamically added pictures if content observer is turned off', done => { @@ -184,13 +208,15 @@ describe('LazyLoader', function() { 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); + scrollIntoViewPromise(newImg) + .then(waitForPromises) + .then(() => { + expect(LazyLoader.loadImage).not.toHaveBeenCalled(); + expect(newImg).not.toHaveClass('js-lazy-loaded'); + done(); + }) + .catch(done.fail); }); it('should load dynamically added pictures if content observer is turned off and on again', done => { @@ -202,13 +228,17 @@ describe('LazyLoader', function() { 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); + Promise.all([ + scrollIntoViewPromise(newImg), + waitForAttributeChange(newImg, ['data-src', 'src']), + ]) + .then(() => { + expect(LazyLoader.loadImage).toHaveBeenCalled(); + expect(newImg).toHaveClass('js-lazy-loaded'); + done(); + }) + .catch(done.fail); }); }); }); |