Merge pull request #118 from MailOnline/next-release

Next release

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: ['<rootDir>/node_modules/'],

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;

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();

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);
   }
 }
 

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);

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();
 

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');
       });
     });
 

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;
 };