https://main--blog--adobecom.hlx.page/media_17927691d22fe4e1bd058e94762a224fdc57ebb7b.mp4
diff --git a/test/blocks/video/video.test.js b/test/blocks/video/video.test.js
index 3a4ac9b1e9..e80298c650 100644
--- a/test/blocks/video/video.test.js
+++ b/test/blocks/video/video.test.js
@@ -1,26 +1,25 @@
import { readFile } from '@web/test-runner-commands';
import { expect, assert } from '@esm-bundle/chai';
+
import sinon from 'sinon';
-import { waitFor, waitForElement } from '../../helpers/waitfor.js';
-import { setConfig, createTag } from '../../../libs/utils/utils.js';
+import { waitForElement } from '../../helpers/waitfor.js';
+import { setConfig } from '../../../libs/utils/utils.js';
setConfig({});
const { default: init } = await import('../../../libs/blocks/video/video.js');
+document.body.innerHTML = await readFile({ path: './mocks/body.html' });
describe('video uploaded using franklin bot', () => {
- beforeEach(async () => {
- document.body.innerHTML = await readFile({ path: './mocks/body.html' });
- });
-
- afterEach(() => {
- document.body.innerHTML = '';
- });
+ it('decorates no-lazy video', async () => {
+ const block = document.querySelector('.video.no-lazy');
+ const a = block.querySelector('a');
+ a.textContent = 'no-lazy';
+ block.append(a);
- it('decorates video', (done) => {
- const anchor = createTag('a');
- anchor.remove = () => done();
- init(anchor);
+ init(a);
+ const video = await waitForElement('.video.no-lazy video');
+ expect(video).to.exist;
});
it('decorates video', async () => {
@@ -75,6 +74,7 @@ describe('video uploaded using franklin bot', () => {
it('no hoverplay attribute added when with autoplay on loop', async () => {
const block = document.querySelector('.video.autoplay.playonhover');
const a = block.querySelector('a');
+ a.textContent = 'no-lazy';
block.append(a);
init(a);
@@ -86,6 +86,7 @@ describe('video uploaded using franklin bot', () => {
it('decorate video with hoverplay when only hoverplay is added to url', async () => {
const block = document.querySelector('.video.hoveronly');
const a = block.querySelector('a');
+ a.textContent = 'no-lazy';
block.append(a);
init(a);
@@ -96,6 +97,7 @@ describe('video uploaded using franklin bot', () => {
it('decorate video with viewportplay only with autoplay', async () => {
const block = document.querySelector('.video.autoplay.viewportplay');
const a = block.querySelector('a');
+ a.textContent = 'no-lazy';
block.append(a);
init(a);
@@ -106,6 +108,7 @@ describe('video uploaded using franklin bot', () => {
it('play video when element reached 80% viewport', async () => {
const block = document.querySelector('.video.autoplay.viewportplay.scrolled-80');
const a = block.querySelector('a');
+ a.textContent = 'no-lazy';
block.append(a);
const nextFrame = () => new Promise((resolve) => {
requestAnimationFrame(resolve);
@@ -113,10 +116,13 @@ describe('video uploaded using franklin bot', () => {
init(a);
const video = block.querySelector('video');
+ const source = video.querySelector('source');
+ source.setAttribute('src', 'https://www.adobe.com/creativecloud/media_1167374e3354ef57f126fa78a55cbc1708ac4babd.mp4');
+ source.setAttribute('type', 'video/mp4');
+
const playSpy = sinon.spy(video, 'play');
const pauseSpy = sinon.spy(video, 'pause');
- const intersectionObserverAddsSource = () => video.querySelector('source');
- await waitFor(intersectionObserverAddsSource);
+
video.scrollIntoView();
await nextFrame();
await new Promise((resolve) => {
@@ -124,22 +130,20 @@ describe('video uploaded using franklin bot', () => {
});
assert.isTrue(playSpy.calledOnce);
- // push the video out of the viewport
- const div = document.createElement('div');
- div.style.height = '2000px';
- video.parentNode.insertBefore(div, video);
-
+ document.body.scrollIntoView();
await nextFrame();
await new Promise((resolve) => {
setTimeout(resolve, 100);
});
assert.isTrue(pauseSpy.calledOnce);
+
expect(video.hasAttribute('data-play-viewport')).to.be.true;
});
it('Don\'t play the video once it end when autoplay1 enabled', async () => {
const block = document.querySelector('.video.autoplay1.viewportplay.ended');
const a = block.querySelector('a');
+ a.textContent = 'no-lazy';
block.append(a);
const nextFrame = () => new Promise((resolve) => {
requestAnimationFrame(resolve);
@@ -147,13 +151,15 @@ describe('video uploaded using franklin bot', () => {
init(a);
const video = block.querySelector('video');
+ const source = video.querySelector('source');
+ source.setAttribute('src', 'https://www.adobe.com/creativecloud/media_1167374e3354ef57f126fa78a55cbc1708ac4babd.mp4');
+ source.setAttribute('type', 'video/mp4');
+
const playSpy = sinon.spy(video, 'play');
const pauseSpy = sinon.spy(video, 'pause');
const endedSpy = sinon.spy();
- const intersectionObserverAddsSource = () => video.querySelector('source');
- await waitFor(intersectionObserverAddsSource);
-
video.addEventListener('ended', endedSpy);
+
video.scrollIntoView();
await nextFrame();
await new Promise((resolve) => {
@@ -161,16 +167,13 @@ describe('video uploaded using franklin bot', () => {
});
assert.isTrue(playSpy.calledOnce);
- // push the video out of the viewport
- const div = document.createElement('div');
- div.style.height = '2000px';
- video.parentNode.insertBefore(div, video);
-
+ document.body.scrollIntoView();
await nextFrame();
await new Promise((resolve) => {
setTimeout(resolve, 100);
});
assert.isTrue(pauseSpy.calledOnce);
+
video.dispatchEvent(new Event('ended'));
await nextFrame();
await new Promise((resolve) => {
@@ -190,6 +193,7 @@ describe('video uploaded using franklin bot', () => {
it('decorate video with viewportplay only with autoplay1', async () => {
const block = document.querySelector('.video.autoplay1.viewportplay');
const a = block.querySelector('a');
+ a.textContent = 'no-lazy';
block.append(a);
init(a);
@@ -200,6 +204,7 @@ describe('video uploaded using franklin bot', () => {
it('decorate video with no viewportplay with autoplay1 hoverplay', async () => {
const block = document.querySelector('.video.autoplay1.hoverplay.no-viewportplay');
const a = block.querySelector('a');
+ a.textContent = 'no-lazy';
block.append(a);
init(a);
@@ -210,6 +215,7 @@ describe('video uploaded using franklin bot', () => {
it('decorate video with no viewportplay with hoverplay', async () => {
const block = document.querySelector('.video.hoverplay.no-viewportplay');
const a = block.querySelector('a');
+ a.textContent = 'no-lazy';
block.append(a);
init(a);
@@ -220,6 +226,7 @@ describe('video uploaded using franklin bot', () => {
it('decorate video with no viewportplay no autoplay', async () => {
const block = document.querySelector('.video.no-autoplay.no-viewportplay');
const a = block.querySelector('a');
+ a.textContent = 'no-lazy';
block.append(a);
init(a);
@@ -230,6 +237,7 @@ describe('video uploaded using franklin bot', () => {
it('decorate video with no viewportplay no autoplay1', async () => {
const block = document.querySelector('.video.no-autoplay1.no-viewportplay');
const a = block.querySelector('a');
+ a.textContent = 'no-lazy';
block.append(a);
init(a);