From bbc6a5e51184b6d43a402c649f1360f62b3b8c7c Mon Sep 17 00:00:00 2001 From: Carlos Serrano Date: Sun, 9 Dec 2018 08:52:38 +0100 Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9C=20properly=20implement=20ad?= =?UTF-8?q?Unit=20resize=20passing?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ... with, height and viewmode --- jest.config.js | 1 + src/adUnit/VastAdUnit.js | 10 ++++---- src/adUnit/VideoAdUnit.js | 17 ++++++++------ src/adUnit/VpaidAdUnit.js | 6 ++--- src/adUnit/__tests__/VastAdUnit.spec.js | 30 ++++++++++++++++++++++++ src/adUnit/__tests__/VideoAdUnit.spec.js | 3 ++- src/adUnit/__tests__/VpaidAdUnit.spec.js | 4 ++-- src/adUnit/helpers/vpaid/callAndWait.js | 6 ++--- 8 files changed, 56 insertions(+), 21 deletions(-) diff --git a/jest.config.js b/jest.config.js index faec69c4..118d09e4 100644 --- a/jest.config.js +++ b/jest.config.js @@ -12,6 +12,7 @@ module.exports = { '!**/src/**/__karma__/**/*' ], coverageDirectory: './coverage/', + coverageReporters: ['json', 'lcov', 'text', 'clover', 'html'], moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], testEnvironment: './GlobalJsDomEnv.js', testPathIgnorePatterns: ['/node_modules/'], diff --git a/src/adUnit/VastAdUnit.js b/src/adUnit/VastAdUnit.js index 8267f2af..08cb8b76 100644 --- a/src/adUnit/VastAdUnit.js +++ b/src/adUnit/VastAdUnit.js @@ -227,13 +227,13 @@ class VastAdUnit extends VideoAdUnit { /** * This method resizes the ad unit to fit the available space in the passed {@link VideoAdContainer} * - * @throws if ad unit is not started. - * @throws if ad unit is finished. - * + * @param width {number} - the new width of the ad container. + * @param height {number} - the new height of the ad container. + * @param viewmode {string} - fullscreen | normal | thumbnail * @returns {Promise} - that resolves once the unit was resized */ - async resize () { - await super.resize(); + async resize (width, height, viewmode) { + await super.resize(width, height, viewmode); if (this.isStarted() && !this.isFinished()) { const inlineAd = this.vastChain[0].ad; diff --git a/src/adUnit/VideoAdUnit.js b/src/adUnit/VideoAdUnit.js index 49e59489..26a4504f 100644 --- a/src/adUnit/VideoAdUnit.js +++ b/src/adUnit/VideoAdUnit.js @@ -9,6 +9,7 @@ import preventManualProgress from './helpers/dom/preventManualProgress'; import Emitter from './helpers/Emitter'; import retrieveIcons from './helpers/icons/retrieveIcons'; import addIcons from './helpers/icons/addIcons'; +import viewmode from './helpers/vpaid/viewmode'; import safeCallback from './helpers/safeCallback'; const { @@ -145,6 +146,7 @@ class VideoAdUnit extends Emitter { this[_protected].size = { height: element.clientHeight, + viewmode: viewmode(element.clientWidth, element.clientHeight), width: element.clientWidth }; const unsubscribe = onElementResize(element, () => { @@ -156,13 +158,8 @@ class VideoAdUnit extends Emitter { const height = element.clientHeight; const width = element.clientWidth; - this[_protected].size = { - height: element.clientHeight, - width: element.clientWidth - }; - if (height !== prevSize.height || width !== prevSize.width) { - this.resize(); + this.resize(width, height, viewmode(width, height)); } }); @@ -312,7 +309,13 @@ class VideoAdUnit extends Emitter { * * @returns {Promise} - that resolves once the unit was resized */ - async resize () { + async resize (width, height, mode) { + this[_protected].size = { + height, + viewmode: mode, + width + }; + if (this.isStarted() && !this.isFinished() && this.icons) { await this[_protected].removeIcons(); await this[_protected].drawIcons(); diff --git a/src/adUnit/VpaidAdUnit.js b/src/adUnit/VpaidAdUnit.js index 223dc35f..f78497ab 100644 --- a/src/adUnit/VpaidAdUnit.js +++ b/src/adUnit/VpaidAdUnit.js @@ -470,10 +470,10 @@ class VpaidAdUnit extends VideoAdUnit { * * @returns {Promise} - that resolves once the unit was resized */ - async resize () { - await super.resize(); + async resize (width, height, viewmode) { + await super.resize(width, height, viewmode); - return callAndWait(this.creativeAd, resizeAd, adSizeChange); + return callAndWait(this.creativeAd, resizeAd, adSizeChange, width, height, viewmode); } } diff --git a/src/adUnit/__tests__/VastAdUnit.spec.js b/src/adUnit/__tests__/VastAdUnit.spec.js index 5aebd6a5..940ce1d6 100644 --- a/src/adUnit/__tests__/VastAdUnit.spec.js +++ b/src/adUnit/__tests__/VastAdUnit.spec.js @@ -19,6 +19,7 @@ import retrieveIcons from '../helpers/icons/retrieveIcons'; const { iconClick, iconView, + skip, error: errorEvt } = linearEvents; const mockStopMetricHandler = jest.fn(); @@ -31,6 +32,7 @@ jest.mock('../helpers/metrics/handlers/index', () => [ videoElement.addEventListener('error', () => callback('error', videoElement.error)); videoElement.addEventListener('progress', ({detail}) => callback('progress', detail)); videoElement.addEventListener('custom', (event) => callback('custom', event.data)); + videoElement.addEventListener('skip', () => callback('skip')); return mockStopMetricHandler; }), @@ -522,6 +524,34 @@ describe('VastAdUnit', () => { }]); }); + test('must cancel on `skip` event', async () => { + canPlay.mockReturnValue(true); + const adUnit = new VastAdUnit(vastChain, videoAdContainer); + + const promise = new Promise((resolve) => { + adUnit.on(skip, (...args) => { + resolve(args); + }); + }); + + await adUnit.start(); + + const data = {}; + const event = new CustomEvent(skip); + + event.data = data; + videoAdContainer.videoElement.dispatchEvent(event); + + const passedArgs = await promise; + + expect(passedArgs).toEqual([{ + adUnit, + type: skip + }]); + + expect(adUnit.isFinished()).toBe(true); + }); + test('cancel must stop the metric handlers ', async () => { canPlay.mockReturnValue(true); const adUnit = new VastAdUnit(vastChain, videoAdContainer); diff --git a/src/adUnit/__tests__/VideoAdUnit.spec.js b/src/adUnit/__tests__/VideoAdUnit.spec.js index 99d47bf0..12d7b511 100644 --- a/src/adUnit/__tests__/VideoAdUnit.spec.js +++ b/src/adUnit/__tests__/VideoAdUnit.spec.js @@ -344,7 +344,7 @@ describe('VideoAdUnit', () => { test('if true must resize the adUnit on ad container resize', () => { const adUnit = new VideoAdUnit(vpaidChain, videoAdContainer, {responsive: true}); - adUnit.resize = jest.fn(); + jest.spyOn(adUnit, 'resize'); adUnit.emit(start); expect(onElementResize).toHaveBeenCalledTimes(1); @@ -362,6 +362,7 @@ describe('VideoAdUnit', () => { simulateResize(); expect(adUnit.resize).toHaveBeenCalledTimes(1); + expect(adUnit.resize).toHaveBeenCalledWith(150, 100, 'thumbnail'); simulateResize(); diff --git a/src/adUnit/__tests__/VpaidAdUnit.spec.js b/src/adUnit/__tests__/VpaidAdUnit.spec.js index 1e9d27de..af3d40eb 100644 --- a/src/adUnit/__tests__/VpaidAdUnit.spec.js +++ b/src/adUnit/__tests__/VpaidAdUnit.spec.js @@ -552,9 +552,9 @@ describe('VpaidAdUnit', () => { describe('resize', () => { test('must call resizeAd', async () => { await adUnit.start(); - await adUnit.resize(); + await adUnit.resize(100, 150, 'normal'); - expect(callAndWait).toHaveBeenCalledWith(mockCreativeAd, resizeAd, adSizeChange); + expect(callAndWait).toHaveBeenCalledWith(mockCreativeAd, resizeAd, adSizeChange, 100, 150, 'normal'); }); }); diff --git a/src/adUnit/helpers/vpaid/callAndWait.js b/src/adUnit/helpers/vpaid/callAndWait.js index 3651b6a5..9efac737 100644 --- a/src/adUnit/helpers/vpaid/callAndWait.js +++ b/src/adUnit/helpers/vpaid/callAndWait.js @@ -1,9 +1,9 @@ import waitFor from './waitFor'; -const callAndWait = (creativeAd, method, event) => { - const waitPromise = waitFor(creativeAd, event, 3000); +const callAndWait = (creativeAd, method, event, ...args) => { + const waitPromise = waitFor(creativeAd, event, 5000); - creativeAd[method](); + creativeAd[method](...args); return waitPromise; };