test: restore prototype modifications and fix flaky tests (#5964)

package.json

@@ -49,8 +49,9 @@
     "watch": "npm-run-all -p watch:*",
     "watch:lang": "chokidar --initial 'lang/**/*.json' -c 'npm run build:lang'",
     "watch:rollup": "rollup -c -w --no-progress",
-    "watch:css-default": "npm run build:css:default -- --watch 'src/**/**/*.scss'",
-    "watch:css-cdn": "npm run build:css:cdn -- --watch 'src/**/**/*.scss'",
+    "watch:css": "npm-run-all -p build:css:default build:css:cdn watch:css:*",
+    "watch:css:default": "npm run build:css:default -- --watch 'src/**/**/*.scss'",
+    "watch:css:cdn": "npm run build:css:cdn -- --watch 'src/**/**/*.scss'",
     "assets": "node build/assets.js",
     "lint": "vjsstandard",
     "lint-errors": "vjsstandard --errors",

test/unit/component.test.js

@@ -14,23 +14,32 @@ class TestComponent1 extends Component {}
 class TestComponent2 extends Component {}
 class TestComponent3 extends Component {}
 class TestComponent4 extends Component {}
+
 TestComponent1.prototype.options_ = {
   children: [
     'testComponent2',
     'testComponent3'
   ]
 };
-Component.registerComponent('TestComponent1', TestComponent1);
-Component.registerComponent('TestComponent2', TestComponent2);
-Component.registerComponent('TestComponent3', TestComponent3);
-Component.registerComponent('TestComponent4', TestComponent4);
 
 QUnit.module('Component', {
+  before() {
+    Component.registerComponent('TestComponent1', TestComponent1);
+    Component.registerComponent('TestComponent2', TestComponent2);
+    Component.registerComponent('TestComponent3', TestComponent3);
+    Component.registerComponent('TestComponent4', TestComponent4);
+  },
   beforeEach() {
     this.clock = sinon.useFakeTimers();
   },
   afterEach() {
     this.clock.restore();
+  },
+  after() {
+    delete Component.components_.TestComponent1;
+    delete Component.components_.TestComponent2;
+    delete Component.components_.TestComponent3;
+    delete Component.components_.TestComponent4;
   }
 });
 
@@ -221,6 +230,8 @@ QUnit.test('should init child components from children array of objects', functi
 
 QUnit.test('should do a deep merge of child options', function(assert) {
   // Create a default option for component
+  const oldOptions = Component.prototype.options_;
+
   Component.prototype.options_ = {
     example: {
       childOne: { foo: 'bar', asdf: 'fdsa' },
@@ -253,8 +264,8 @@ QUnit.test('should do a deep merge of child options', function(assert) {
     'prototype options were not overridden'
   );
 
-  // Reset default component options to none
-  Component.prototype.options_ = null;
+  // Reset default component options
+  Component.prototype.options_ = oldOptions;
   comp.dispose();
 });
 
@@ -739,17 +750,17 @@ QUnit.test('should get the computed dimensions', function(assert) {
 });
 
 QUnit.test('should use a defined content el for appending children', function(assert) {
-  class CompWithContent extends Component {}
+  class CompWithContent extends Component {
+    createEl() {
+      // Create the main component element
+      const el = Dom.createEl('div');
 
-  CompWithContent.prototype.createEl = function() {
-    // Create the main component element
-    const el = Dom.createEl('div');
-
-    // Create the element where children will be appended
-    this.contentEl_ = Dom.createEl('div', { id: 'contentEl' });
-    el.appendChild(this.contentEl_);
-    return el;
-  };
+      // Create the element where children will be appended
+      this.contentEl_ = Dom.createEl('div', { id: 'contentEl' });
+      el.appendChild(this.contentEl_);
+      return el;
+    }
+  }
 
   const comp = new CompWithContent(getFakePlayer());
   const child = comp.addChild('component');

test/unit/menu.test.js

@@ -89,6 +89,8 @@ QUnit.test('should keep all the added menu items', function(assert) {
   const menuItem1 = new MenuItem(player, { label: 'menu-item1' });
   const menuItem2 = new MenuItem(player, { label: 'menu-item2' });
 
+  const oldCreateItems = MenuButton.prototype.createItems;
+
   MenuButton.prototype.createItems = function() {
     return menuItems;
   };
@@ -115,6 +117,8 @@ QUnit.test('should keep all the added menu items', function(assert) {
   menuItem1.dispose();
   menuItem2.dispose();
   player.dispose();
+
+  MenuButton.prototype.createItems = oldCreateItems;
 });
 
 QUnit.test('should remove old event listeners when the menu item adds to the new menu', function(assert) {

test/unit/modal-dialog.test.js

@@ -22,56 +22,31 @@ QUnit.module('ModalDialog', {
   }
 });
 
-const mockFocusableEls = function(Modal, focuscallback) {
-  Modal.prototype.oldFocusableEls = Modal.prototype.focusableEls_;
-
-  const focus = function() {
-    return focuscallback(this.i);
-  };
-  const els = [ {
-    i: 0,
-    focus
-  }, {
-    i: 1,
-    focus
-  }, {
-    i: 2,
-    focus
-  }, {
-    i: 3,
-    focus
-  }];
-
-  Modal.prototype.focusableEls_ = () => els;
-};
-
-const restoreFocusableEls = function(Modal) {
-  Modal.prototype.focusableEls_ = Modal.prototype.oldFocusableEls;
-};
-
-const mockActiveEl = function(modal, index) {
-  modal.oldEl = modal.el_;
-  modal.el_ = {
-    querySelector() {
-      const focusableEls = modal.focusableEls_();
-
-      return focusableEls[index];
-    }
-  };
-};
-
-const restoreActiveEl = function(modal) {
-  modal.el_ = modal.oldEl;
-};
-
 const tabTestHelper = function(assert, player) {
-  return function(from, to, shift = false) {
-    mockFocusableEls(ModalDialog, (focusIndex) => {
-      assert.equal(focusIndex, to, `we should focus back on the ${to} element, we got ${focusIndex}.`);
-    });
-    const modal = new ModalDialog(player, {});
+  return function(fromIndex, toIndex, shift = false) {
+    const oldFocusableEls = ModalDialog.prototype.focusableEls_;
+    const focus = function() {
+      assert.equal(this.i, toIndex, `we should focus back on the ${toIndex} element, we got ${this.i}.`);
+    };
+    const els = [
+      {i: 0, focus},
+      {i: 1, focus},
+      {i: 2, focus},
+      {i: 3, focus}
+    ];
 
-    mockActiveEl(modal, from);
+    ModalDialog.prototype.focusableEls_ = () => els;
+
+    const modal = new ModalDialog(player, {});
+    const oldEl = modal.el_;
+
+    modal.el_ = {
+      querySelector() {
+        const focusableEls = modal.focusableEls_();
+
+        return focusableEls[fromIndex];
+      }
+    };
 
     let prevented = false;
 
@@ -84,7 +59,7 @@ const tabTestHelper = function(assert, player) {
     });
 
     if (!prevented) {
-      const newIndex = shift ? from - 1 : from + 1;
+      const newIndex = shift ? fromIndex - 1 : fromIndex + 1;
       const newEl = modal.focusableEls_()[newIndex];
 
       if (newEl) {
@@ -92,9 +67,9 @@ const tabTestHelper = function(assert, player) {
       }
     }
 
-    restoreActiveEl(modal);
+    modal.el_ = oldEl;
     modal.dispose();
-    restoreFocusableEls(ModalDialog);
+    ModalDialog.prototype.focusableEls_ = oldFocusableEls;
   };
 };
 

test/unit/plugin-advanced.test.js

@@ -171,8 +171,11 @@ QUnit.test('arbitrary events', function(assert) {
 QUnit.test('handleStateChanged() method is automatically bound to the "statechanged" event', function(assert) {
   const spy = sinon.spy();
 
-  class TestHandler extends Plugin {}
-  TestHandler.prototype.handleStateChanged = spy;
+  class TestHandler extends Plugin {
+    handleStateChanged(...args) {
+      spy.apply(this, args);
+    }
+  }
   Plugin.registerPlugin('testHandler', TestHandler);
 
   const instance = this.player.testHandler();

test/unit/tech/tech.test.js

@@ -37,7 +37,7 @@ QUnit.module('Media Tech', {
   },
   afterEach(assert) {
     this.clock.restore();
-    Tech.prototype.featuresProgessEvents = this.featuresProgessEvents;
+    Tech.prototype.featuresProgressEvents = this.featuresProgessEvents;
   }
 });
 
@@ -338,11 +338,12 @@ QUnit.test('should add the source handler interface to a tech', function(assert)
   // and provde a dispose method for the handler.
   // This is optional for source handlers
   let disposeCalled = false;
-  const HandlerInternalState = function() {};
 
-  HandlerInternalState.prototype.dispose = function() {
-    disposeCalled = true;
-  };
+  class HandlerInternalState {
+    dispose() {
+      disposeCalled = true;
+    }
+  }
 
   // Create source handlers
   const handlerOne = {

test/unit/tracks/text-tracks.test.js

@@ -155,10 +155,10 @@ QUnit.test('update texttrack buttons on removetrack or addtrack', function(asser
     oldSubsCapsUpdate.call(this);
   };
 
-  Tech.prototype.featuresNativeTextTracks = true;
-
+  const oldFeaturesNativeTextTracks = Tech.prototype.featuresNativeTextTracks;
   const oldTextTracks = Tech.prototype.textTracks;
 
+  Tech.prototype.featuresNativeTextTracks = true;
   Tech.prototype.textTracks = function() {
     return {
       length: 0,
@@ -213,11 +213,12 @@ QUnit.test('update texttrack buttons on removetrack or addtrack', function(asser
   assert.equal(update, 15, 'update was called on the five buttons for remove track');
 
   Tech.prototype.textTracks = oldTextTracks;
-  Tech.prototype.featuresNativeTextTracks = false;
+  Tech.prototype.featuresNativeTextTracks = oldFeaturesNativeTextTracks;
   CaptionsButton.prototype.update = oldCaptionsUpdate;
   SubtitlesButton.prototype.update = oldSubsUpdate;
   ChaptersButton.prototype.update = oldChaptersUpdate;
   SubsCapsButton.prototype.update = oldSubsCapsUpdate;
+  DescriptionsButton.prototype.update = oldDescriptionsUpdate;
 
   player.dispose();
 });