[PLAYER-760] Added unit tests

ooyala · Apr 10, 2017 · b1ead28 · b1ead28
1 parent 5ffd481
commit b1ead28
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 1 deletion.
diff --git a/js/controller.js b/js/controller.js
@@ -1474,6 +1474,13 @@ OO.plugin("Html5Skin", function (OO, _, $, W) {
       this.mb.publish(OO.EVENTS.SAVE_PLAYER_SETTINGS, this.state.persistentSettings);
     },
 
+    /**
+     * Used to enable or disable the CSS workaround that prevents anamorphic videos from
+     * being distorted on Firefox. The fix will only be enabled if ots_stretch_to_output
+     * is set to true in the player attributes.
+     * Note that currently the oo-anamorphic class has effect only on Firefox.
+     * @param {boolen} enabled A value that determines whether to enable or disable the anamorphic videos CSS fix.
+     */
     trySetAnamorphicFixState: function(enabled) {
       if (!this.state || !this.state.mainVideoInnerWrapper) {
         return;

diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     "react-addons-test-utils": "0.14.7",
     "react-tools": "*",
     "reactify": "1.1.1",
+    "sinon": "^2.1.0",
     "underscore": "1.3.3",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.0.0",

diff --git a/tests/controller-test.js b/tests/controller-test.js
@@ -8,6 +8,7 @@ jest.dontMock('underscore');
 jest.dontMock('jquery');
 
 var CONSTANTS = require('../js/constants/constants');
+var sinon = require('sinon');
 
 /**
  * Mock OO
@@ -245,7 +246,6 @@ OO = {
     Html5Skin.onPlayerCreated.call(controllerMock, 'customerUi', elementId, {skin:{config:{}}}, persistentSettings);
     Html5Skin.onSkinMetaDataFetched.call(controllerMock, 'customerUi', {});
     Html5Skin.onAttributesFetched.call(controllerMock, 'customerUi', {"attributes":{"provider":{"ots_stretch_to_output":"true"}}});
-    Html5Skin.trySetAnamorphicFixState.call(controllerMock, true);
     Html5Skin.loadConfigData.call(controllerMock, 'customerUi', {skin:{config:{}}}, {}, {}, {});
     Html5Skin.loadConfigData.call(controllerMock, 'customerUi', {skin:{config:[]}}, {}, {}, {}); //invalid
     Html5Skin.loadConfigData.call(controllerMock, 'customerUi', {skin:{inline:{}}}, {}, {}, {});
@@ -579,6 +579,57 @@ OO = {
       });
     });
 
+    describe('Controller testing Anamorphic videos fix', function() {
+      var addClassSpy = null;
+      var removeClassSpy = null;
+      var attributesParam = null;
+      var attributesState = JSON.parse(JSON.stringify(controllerMock.state.attributes));
+
+      beforeEach(function() {
+        attributesParam = {
+          provider: {
+            'ots_stretch_to_output': true
+          }
+        };
+        addClassSpy = sinon.spy(controllerMock.state.mainVideoInnerWrapper, 'addClass');
+        removeClassSpy = sinon.spy(controllerMock.state.mainVideoInnerWrapper, 'removeClass');
+      });
+
+      afterEach(function() {
+        controllerMock.state.mainVideoInnerWrapper.addClass.restore();
+        controllerMock.state.mainVideoInnerWrapper.removeClass.restore();
+        controllerMock.state.attributes = attributesState;
+      });
+
+      it('should apply anamorphic CSS fix when ots_stretch_to_output is true', function() {
+        Html5Skin.onAttributesFetched.call(controllerMock, 'customerUi', attributesParam);
+        Html5Skin.trySetAnamorphicFixState.call(controllerMock, true);
+        expect(addClassSpy.callCount).toEqual(1);
+        expect(removeClassSpy.callCount).toEqual(0);
+      });
+
+      it('should not apply anamorphic CSS fix when ots_stretch_to_output isn\'t true', function() {
+        attributesParam.provider = {};
+        Html5Skin.onAttributesFetched.call(controllerMock, 'customerUi', attributesParam);
+        Html5Skin.trySetAnamorphicFixState.call(controllerMock, true);
+        attributesParam.provider = { 'ots_stretch_to_output': false };
+        Html5Skin.onAttributesFetched.call(controllerMock, 'customerUi', attributesParam);
+        Html5Skin.trySetAnamorphicFixState.call(controllerMock, true);
+        expect(addClassSpy.callCount).toEqual(0);
+        expect(removeClassSpy.callCount).toEqual(0);
+      });
+
+      it('should disable anamorphic CSS fix when passing false', function() {
+        Html5Skin.onAttributesFetched.call(controllerMock, 'customerUi', attributesParam);
+        Html5Skin.trySetAnamorphicFixState.call(controllerMock, true);
+        expect(addClassSpy.callCount).toEqual(1);
+        Html5Skin.onWillPlayAds.call(controllerMock, 'customerUi');
+        Html5Skin.trySetAnamorphicFixState.call(controllerMock, false);
+        expect(addClassSpy.callCount).toEqual(1);
+        expect(removeClassSpy.callCount).toEqual(1);
+      });
+    });
+
     //test destroy functions last
     Html5Skin.onEmbedCodeChanged.call(controllerMock, 'customerUi', 'RmZW4zcDo6KqkTIhn1LnowEZyUYn5Tb2', {});
     Html5Skin.onAssetChanged.call(controllerMock, 'customerUi', {content: {streams: [{is_live_stream: true}], title: 'Title', posterImages: [{url:'www.ooyala.com'}]}});