From 39f8d5fdb20e56173df31037316ec59965d6ca02 Mon Sep 17 00:00:00 2001 From: Jeremy Press Date: Fri, 6 Apr 2018 12:43:24 -0700 Subject: [PATCH 1/2] Fix: Remove use of manifest loaded event --- codecept.conf.js | 1 - functional-tests/constants.js | 2 + functional-tests/media-controls.html | 4 +- functional-tests/media_controls_test.js | 90 ++++++++++++++++++- src/lib/viewers/media/DashViewer.js | 18 +--- .../media/__tests__/DashViewer-test.js | 28 ++---- 6 files changed, 103 insertions(+), 40 deletions(-) diff --git a/codecept.conf.js b/codecept.conf.js index d4ba41520..5e434a563 100644 --- a/codecept.conf.js +++ b/codecept.conf.js @@ -16,7 +16,6 @@ const MOBILE_PLATFORMS = ['iOS', 'Android']; const commonConfigObj = { browser: BROWSER_NAME, url: 'http://localhost:8000', - smartWait: DEFAULT_WAIT_TIME, restart: true, waitForTimeout: DEFAULT_WAIT_TIME }; diff --git a/functional-tests/constants.js b/functional-tests/constants.js index e9c7e0138..9ac873250 100644 --- a/functional-tests/constants.js +++ b/functional-tests/constants.js @@ -9,6 +9,8 @@ exports.CLASS_BOX_PREVIEW_LOADING_WRAPPER = '.bp-loading-wrapper'; exports.SELECTOR_DOC_CURRENT_PAGE = '.bp-current-page'; exports.SELECTOR_MEDIA_TIMESTAMP = '.bp-media-controls-timecode'; exports.SELECTOR_MEDIA_DURATION = '.bp-media-controls-duration'; +exports.SELECTOR_MEDIA_CONTROLS_GEAR = '.bp-media-gear-icon'; +exports.SELECTOR_MEDIA_CONTROLS_QUALITY_ITEM = '.bp-media-settings-item-quality'; exports.SELECTOR_BOX_PREVIEW = '.bp'; exports.SELECTOR_BOX_PREVIEW_DOC = '.bp-doc'; exports.SELECTOR_BOX_PREVIEW_MP3 = '.bp-media-mp3'; diff --git a/functional-tests/media-controls.html b/functional-tests/media-controls.html index 111035b7b..52afcad6b 100644 --- a/functional-tests/media-controls.html +++ b/functional-tests/media-controls.html @@ -22,13 +22,15 @@ var ACCESS_TOKEN = 'edRiUpeLD9A1nLyWqc1gZOt2OnSNNYp9'; var FILE_ID_VIDEO = '286114565199'; + var FILE_ID_VIDEO_SUBTITLES_TRACKS = '286840567797'; var FILE_ID_MP3 = '286509191779'; + var FILE_ID_VIDEO_SMALL = '286114192023'; var preview = new Box.Preview(); preview.show(FILE_ID_VIDEO, ACCESS_TOKEN, { container: '.preview-container', showDownload: false, - collection: [FILE_ID_VIDEO, FILE_ID_MP3], + collection: [FILE_ID_VIDEO, FILE_ID_VIDEO_SUBTITLES_TRACKS, FILE_ID_MP3, FILE_ID_VIDEO_SMALL], }); function disableDash() { diff --git a/functional-tests/media_controls_test.js b/functional-tests/media_controls_test.js index b470a519e..1af1ef220 100644 --- a/functional-tests/media_controls_test.js +++ b/functional-tests/media_controls_test.js @@ -5,7 +5,9 @@ const { CLASS_BOX_PREVIEW_LOADING_WRAPPER, SELECTOR_BOX_PREVIEW_MP3, SELECTOR_BOX_PREVIEW_DASH, - SELECTOR_BOX_PREVIEW_MP4 + SELECTOR_BOX_PREVIEW_MP4, + SELECTOR_MEDIA_CONTROLS_GEAR, + SELECTOR_MEDIA_CONTROLS_QUALITY_ITEM } = require('./constants'); const { navigateToNextItem, makeNavAppear, waitForLoad } = require('./helpers'); @@ -13,6 +15,7 @@ const { navigateToNextItem, makeNavAppear, waitForLoad } = require('./helpers'); const { CI } = process.env; const DEFAULT_START = '0:00'; const VIDEO_DURATION = '3:52'; +const VIDEO_WITH_SUBTITLES_TRACKS_DURATION = '0:46'; const AUDIO_DURATION = '7:47'; const SELECTOR_VIDEO = 'video'; @@ -39,6 +42,15 @@ Scenario( I.seeTextEquals(VIDEO_DURATION, SELECTOR_MEDIA_DURATION); navigateToNextItem(I); + // video (tracks and subtitles) + waitForLoad(I); + I.waitForElement(SELECTOR_BOX_PREVIEW_DASH); + makeNavAppear(I, SELECTOR_VIDEO); + I.waitForVisible(SELECTOR_MEDIA_TIMESTAMP); + I.seeTextEquals(DEFAULT_START, SELECTOR_MEDIA_TIMESTAMP); + I.seeTextEquals(VIDEO_WITH_SUBTITLES_TRACKS_DURATION, SELECTOR_MEDIA_DURATION); + navigateToNextItem(I); + // mp3 waitForLoad(I); I.waitForElement(SELECTOR_BOX_PREVIEW_MP3); @@ -63,3 +75,79 @@ Scenario( I.seeTextEquals(VIDEO_DURATION, SELECTOR_MEDIA_DURATION); } ); + +// Exclude IE as it can't handle media files with saucelabs +// Exclude iOS because it doesn't HD/subtitles/audiotracks etc. +Scenario( + 'Check that the media controls show the correct settings items @ci @chrome @firefox @edge @safari, @android', + { retries: 3 }, + (I) => { + // Video (dash) + waitForLoad(I); + I.waitForElement(SELECTOR_BOX_PREVIEW_DASH); + makeNavAppear(I, SELECTOR_VIDEO); + I.waitForVisible(SELECTOR_MEDIA_CONTROLS_GEAR); + // Click on the Gear + I.click(SELECTOR_MEDIA_CONTROLS_GEAR); + I.waitForVisible(SELECTOR_MEDIA_CONTROLS_QUALITY_ITEM); + // Click on the quality item + I.click(SELECTOR_MEDIA_CONTROLS_QUALITY_ITEM); + // Find the 1080 text + I.waitForText('1080p'); + // Click the 1080 text + I.click('//div[@data-value="hd"]'); + // Check that the HD icon is there + I.waitForVisible('.bp-media-controls-hd'); + + navigateToNextItem(I); + + // Video with tracks + waitForLoad(I); + I.waitForElement(SELECTOR_BOX_PREVIEW_DASH); + makeNavAppear(I, SELECTOR_VIDEO); + // Wait for the CC button to be visisble + I.waitForVisible('.bp-media-controls-cc-icon-text'); + + // Look for this class bp-media-settings-subtitles-on + I.seeElement('.bp-media-settings-subtitles-on'); + + // Click the CC button + I.click('.bp-media-cc-icon'); + + // Look for this class bp-media-settings-subtitles-on + I.dontSeeElement('.bp-media-settings-subtitles-on'); + + // Click on the Gear + I.click(SELECTOR_MEDIA_CONTROLS_GEAR); + // Wait for audio tracks and for subtitles items to be visisble + I.waitForVisible('//div[@data-type="subtitles"]'); + I.waitForVisible('//div[@data-type="audiotracks"]'); + + navigateToNextItem(I); + + // mp3 + waitForLoad(I); + I.waitForElement(SELECTOR_BOX_PREVIEW_MP3); + // Click on the Gear + I.click(SELECTOR_MEDIA_CONTROLS_GEAR); + // Look for autoplay and speed + I.waitForVisible('//div[@data-type="autoplay"]'); + I.waitForVisible('//div[@data-type="speed"]'); + + navigateToNextItem(I); + + // video (no HD) + I.waitForElement(CLASS_BOX_PREVIEW_LOADING_WRAPPER); + /* eslint-enable prefer-arrow-callback */ + waitForLoad(I); + I.waitForElement('.bp-media-container'); + + makeNavAppear(I, SELECTOR_VIDEO); + // Click on the Gear + I.click(SELECTOR_MEDIA_CONTROLS_GEAR); + // Look for autoplay and speed + I.waitForVisible('//div[@data-type="autoplay"]'); + I.waitForVisible('//div[@data-type="speed"]'); + I.waitForNotVisible('.bp-media-settings-menu-quality'); + } +); diff --git a/src/lib/viewers/media/DashViewer.js b/src/lib/viewers/media/DashViewer.js index 8b62899ec..90de4230c 100644 --- a/src/lib/viewers/media/DashViewer.js +++ b/src/lib/viewers/media/DashViewer.js @@ -29,7 +29,6 @@ class DashViewer extends VideoBaseViewer { this.loadeddataHandler = this.loadeddataHandler.bind(this); this.adaptationHandler = this.adaptationHandler.bind(this); this.shakaErrorHandler = this.shakaErrorHandler.bind(this); - this.shakaManifestLoadedHandler = this.shakaManifestLoadedHandler.bind(this); this.requestFilter = this.requestFilter.bind(this); this.handleQuality = this.handleQuality.bind(this); this.handleSubtitle = this.handleSubtitle.bind(this); @@ -153,7 +152,6 @@ class DashViewer extends VideoBaseViewer { this.adapting = true; this.player = new shaka.Player(this.mediaEl); this.player.addEventListener('adaptation', this.adaptationHandler); - this.player.addEventListener('streaming', this.shakaManifestLoadedHandler); this.player.addEventListener('error', this.shakaErrorHandler); this.player.configure({ abr: { @@ -408,19 +406,6 @@ class DashViewer extends VideoBaseViewer { } } - /** - * Handles streaming event which is the first time the manifest is available. See https://shaka-player-demo.appspot.com/docs/api/shaka.Player.html#event:StreamingEvent - * - * @private - * @param {Object} shakaError - Error to handle - * @return {void} - */ - shakaManifestLoadedHandler() { - this.calculateVideoDimensions(); - this.loadSubtitles(); - this.loadAlternateAudio(); - } - /** * Adds event listeners to the media controls. * Makes changes to the media element. @@ -497,11 +482,14 @@ class DashViewer extends VideoBaseViewer { this.autoplay(); } + this.calculateVideoDimensions(); this.loadUI(); this.loadFilmStrip(); this.resize(); this.handleVolume(); this.startBandwidthTracking(); + this.loadSubtitles(); + this.loadAlternateAudio(); this.showPlayButton(); this.loaded = true; diff --git a/src/lib/viewers/media/__tests__/DashViewer-test.js b/src/lib/viewers/media/__tests__/DashViewer-test.js index fea0fa26f..603daf241 100644 --- a/src/lib/viewers/media/__tests__/DashViewer-test.js +++ b/src/lib/viewers/media/__tests__/DashViewer-test.js @@ -216,7 +216,6 @@ describe('lib/viewers/media/DashViewer', () => { dash.mediaUrl = 'url'; sandbox.stub(shaka, 'Player').returns(dash.player); stubs.mockPlayer.expects('addEventListener').withArgs('adaptation', sinon.match.func); - stubs.mockPlayer.expects('addEventListener').withArgs('streaming', sinon.match.func); stubs.mockPlayer.expects('addEventListener').withArgs('error', sinon.match.func); stubs.mockPlayer.expects('configure'); stubs.mockPlayer @@ -589,27 +588,6 @@ describe('lib/viewers/media/DashViewer', () => { }); }); - describe('shakaManifestLoadedHandler()', () => { - beforeEach(() => { - sandbox.stub(dash, 'calculateVideoDimensions'); - sandbox.stub(dash, 'loadSubtitles'); - sandbox.stub(dash, 'loadAlternateAudio'); - }); - - it('should calculate video dimensions and load UI', () => { - dash.shakaManifestLoadedHandler(); - - expect(dash.calculateVideoDimensions).to.be.called; - }); - - it('should load subtitles and additional audio tracks', () => { - dash.shakaManifestLoadedHandler(); - - expect(dash.loadSubtitles).to.be.called; - expect(dash.loadAlternateAudio).to.be.called; - }); - }); - describe('addEventListenersForMediaControls()', () => { const listenerFunc = DashViewer.prototype.addEventListenersForMediaControls; @@ -650,12 +628,18 @@ describe('lib/viewers/media/DashViewer', () => { sandbox.stub(dash, 'startBandwidthTracking'); sandbox.stub(dash, 'handleQuality'); sandbox.stub(dash, 'showPlayButton'); + sandbox.stub(dash, 'calculateVideoDimensions'); + sandbox.stub(dash, 'loadSubtitles'); + sandbox.stub(dash, 'loadAlternateAudio'); dash.loadeddataHandler(); expect(dash.autoplay).to.be.called; expect(dash.loadUI).to.be.called; expect(dash.showMedia).to.be.called; expect(dash.showPlayButton).to.be.called; + expect(dash.calculateVideoDimensions).to.be.called; + expect(dash.loadSubtitles).to.be.called; + expect(dash.loadAlternateAudio).to.be.called; expect(dash.emit).to.be.calledWith(VIEWER_EVENT.load); expect(dash.loaded).to.be.true; expect(document.activeElement).to.equal(dash.mediaContainerEl); From cd62ce7e7c15832098a0246dc03d67cf304678c8 Mon Sep 17 00:00:00 2001 From: Jeremy Press Date: Fri, 6 Apr 2018 15:58:44 -0700 Subject: [PATCH 2/2] Chore: Update functional tests --- functional-tests/constants.js | 18 ++++++++- functional-tests/media_controls_test.js | 52 ++++++++++++++++--------- 2 files changed, 49 insertions(+), 21 deletions(-) diff --git a/functional-tests/constants.js b/functional-tests/constants.js index 9ac873250..96b22d961 100644 --- a/functional-tests/constants.js +++ b/functional-tests/constants.js @@ -5,12 +5,22 @@ exports.SELECTOR_NAVIGATION_LEFT = '.bp-navigate-left'; exports.SELECTOR_NAVIGATION_RIGHT = '.bp-navigate-right'; exports.SELECTOR_BOX_PREVIEW_LOADED = '.bp-loaded'; exports.SELECTOR_BOX_PREVIEW_LOGO = '.bp-default-logo'; -exports.CLASS_BOX_PREVIEW_LOADING_WRAPPER = '.bp-loading-wrapper'; exports.SELECTOR_DOC_CURRENT_PAGE = '.bp-current-page'; +exports.SELECTOR_MEDIA_CONTAINER = '.bp-media-container'; exports.SELECTOR_MEDIA_TIMESTAMP = '.bp-media-controls-timecode'; exports.SELECTOR_MEDIA_DURATION = '.bp-media-controls-duration'; exports.SELECTOR_MEDIA_CONTROLS_GEAR = '.bp-media-gear-icon'; -exports.SELECTOR_MEDIA_CONTROLS_QUALITY_ITEM = '.bp-media-settings-item-quality'; +exports.SELECTOR_MEDIA_SETTINGS_MENU_QUALITY = '.bp-media-settings-menu-quality'; +exports.SELECTOR_MEDIA_SETTINGS_QUALITY_ITEM = '.bp-media-settings-item-quality'; +exports.SELECTOR_MEDIA_SETTINGS_LABEL = '.bp-media-settings-label'; +exports.SELECTOR_HD_SETTINGS_VALUE = '[data-value="hd"] > .bp-media-settings-value'; +exports.SELECTOR_MEDIA_CONTROLS_HD = '.bp-media-controls-hd'; +exports.SELECTOR_MEDIA_CONTROLS_CC_ICON = '.bp-media-cc-icon'; +exports.SELECTOR_MEDIA_SETTINGS_SUBTITLES_ON = '.bp-media-settings-subtitles-on'; +exports.SELECTOR_MEDIA_SETTINGS_SUBTITLES_ITEM = '//div[@data-type="subtitles"]'; +exports.SELECTOR_MEDIA_SETTINGS_AUDIOTRACKS_ITEM = '//div[@data-type="audiotracks"]'; +exports.SELECTOR_MEDIA_SETTINGS_AUTOPLAY_ITEM = '//div[@data-type="autoplay"]'; +exports.SELECTOR_MEDIA_SETTINGS_SPEED_ITEM = '//div[@data-type="speed"]'; exports.SELECTOR_BOX_PREVIEW = '.bp'; exports.SELECTOR_BOX_PREVIEW_DOC = '.bp-doc'; exports.SELECTOR_BOX_PREVIEW_MP3 = '.bp-media-mp3'; @@ -27,3 +37,7 @@ exports.SELECTOR_BOX_PREVIEW_EXIT_FULLSCREEN_ICON = '.bp-exit-fullscreen-icon'; exports.SELECTOR_BOX_PREVIEW_PAGE_NUM_WRAPPER = '.bp-page-num-wrapper'; exports.SELECTOR_BOX_PREVIEW_ERROR = '.bp-error'; exports.SELECTOR_BOX_PREVIEW_NAV_VISIBLE = '.bp-is-navigation-visible'; + +exports.CLASS_BOX_PREVIEW_LOADING_WRAPPER = '.bp-loading-wrapper'; + +exports.TEXT_1080P = '1080p'; diff --git a/functional-tests/media_controls_test.js b/functional-tests/media_controls_test.js index 1af1ef220..c9f11bce7 100644 --- a/functional-tests/media_controls_test.js +++ b/functional-tests/media_controls_test.js @@ -6,8 +6,20 @@ const { SELECTOR_BOX_PREVIEW_MP3, SELECTOR_BOX_PREVIEW_DASH, SELECTOR_BOX_PREVIEW_MP4, + SELECTOR_MEDIA_CONTAINER, SELECTOR_MEDIA_CONTROLS_GEAR, - SELECTOR_MEDIA_CONTROLS_QUALITY_ITEM + SELECTOR_MEDIA_SETTINGS_QUALITY_ITEM, + SELECTOR_MEDIA_SETTINGS_MENU_QUALITY, + SELECTOR_MEDIA_SETTINGS_LABEL, + SELECTOR_MEDIA_CONTROLS_HD, + SELECTOR_HD_SETTINGS_VALUE, + SELECTOR_MEDIA_CONTROLS_CC_ICON, + SELECTOR_MEDIA_SETTINGS_SUBTITLES_ON, + SELECTOR_MEDIA_SETTINGS_SUBTITLES_ITEM, + SELECTOR_MEDIA_SETTINGS_AUDIOTRACKS_ITEM, + SELECTOR_MEDIA_SETTINGS_AUTOPLAY_ITEM, + SELECTOR_MEDIA_SETTINGS_SPEED_ITEM, + TEXT_1080P } = require('./constants'); const { navigateToNextItem, makeNavAppear, waitForLoad } = require('./helpers'); @@ -79,7 +91,7 @@ Scenario( // Exclude IE as it can't handle media files with saucelabs // Exclude iOS because it doesn't HD/subtitles/audiotracks etc. Scenario( - 'Check that the media controls show the correct settings items @ci @chrome @firefox @edge @safari, @android', + 'Check that the media controls show the correct settings items @ci @chrome @firefox @edge @safari', { retries: 3 }, (I) => { // Video (dash) @@ -89,15 +101,15 @@ Scenario( I.waitForVisible(SELECTOR_MEDIA_CONTROLS_GEAR); // Click on the Gear I.click(SELECTOR_MEDIA_CONTROLS_GEAR); - I.waitForVisible(SELECTOR_MEDIA_CONTROLS_QUALITY_ITEM); + I.waitForVisible(SELECTOR_MEDIA_SETTINGS_QUALITY_ITEM); // Click on the quality item - I.click(SELECTOR_MEDIA_CONTROLS_QUALITY_ITEM); + I.click(`${SELECTOR_MEDIA_SETTINGS_QUALITY_ITEM} ${SELECTOR_MEDIA_SETTINGS_LABEL}`); // Find the 1080 text - I.waitForText('1080p'); + I.waitForText(TEXT_1080P); // Click the 1080 text - I.click('//div[@data-value="hd"]'); + I.click(SELECTOR_HD_SETTINGS_VALUE); // Check that the HD icon is there - I.waitForVisible('.bp-media-controls-hd'); + I.waitForVisible(SELECTOR_MEDIA_CONTROLS_HD); navigateToNextItem(I); @@ -106,22 +118,23 @@ Scenario( I.waitForElement(SELECTOR_BOX_PREVIEW_DASH); makeNavAppear(I, SELECTOR_VIDEO); // Wait for the CC button to be visisble - I.waitForVisible('.bp-media-controls-cc-icon-text'); + I.waitForVisible(SELECTOR_MEDIA_CONTROLS_CC_ICON); // Look for this class bp-media-settings-subtitles-on - I.seeElement('.bp-media-settings-subtitles-on'); + I.seeElement(SELECTOR_MEDIA_SETTINGS_SUBTITLES_ON); // Click the CC button - I.click('.bp-media-cc-icon'); + I.click(SELECTOR_MEDIA_CONTROLS_CC_ICON); // Look for this class bp-media-settings-subtitles-on - I.dontSeeElement('.bp-media-settings-subtitles-on'); + I.dontSeeElement(SELECTOR_MEDIA_SETTINGS_SUBTITLES_ON); // Click on the Gear + I.waitForVisible(SELECTOR_MEDIA_CONTROLS_GEAR); I.click(SELECTOR_MEDIA_CONTROLS_GEAR); // Wait for audio tracks and for subtitles items to be visisble - I.waitForVisible('//div[@data-type="subtitles"]'); - I.waitForVisible('//div[@data-type="audiotracks"]'); + I.waitForVisible(SELECTOR_MEDIA_SETTINGS_SUBTITLES_ITEM); + I.waitForVisible(SELECTOR_MEDIA_SETTINGS_AUDIOTRACKS_ITEM); navigateToNextItem(I); @@ -131,8 +144,8 @@ Scenario( // Click on the Gear I.click(SELECTOR_MEDIA_CONTROLS_GEAR); // Look for autoplay and speed - I.waitForVisible('//div[@data-type="autoplay"]'); - I.waitForVisible('//div[@data-type="speed"]'); + I.waitForVisible(SELECTOR_MEDIA_SETTINGS_AUTOPLAY_ITEM); + I.waitForVisible(SELECTOR_MEDIA_SETTINGS_SPEED_ITEM); navigateToNextItem(I); @@ -140,14 +153,15 @@ Scenario( I.waitForElement(CLASS_BOX_PREVIEW_LOADING_WRAPPER); /* eslint-enable prefer-arrow-callback */ waitForLoad(I); - I.waitForElement('.bp-media-container'); + I.waitForElement(SELECTOR_MEDIA_CONTAINER); makeNavAppear(I, SELECTOR_VIDEO); // Click on the Gear + I.waitForVisible(SELECTOR_MEDIA_CONTROLS_GEAR); I.click(SELECTOR_MEDIA_CONTROLS_GEAR); // Look for autoplay and speed - I.waitForVisible('//div[@data-type="autoplay"]'); - I.waitForVisible('//div[@data-type="speed"]'); - I.waitForNotVisible('.bp-media-settings-menu-quality'); + I.waitForVisible(SELECTOR_MEDIA_SETTINGS_AUTOPLAY_ITEM); + I.waitForVisible(SELECTOR_MEDIA_SETTINGS_SPEED_ITEM); + I.dontSeeElement(SELECTOR_MEDIA_SETTINGS_MENU_QUALITY); } );