test(e2e): Add more media settings tests for dash (#1399)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
box · Jun 7, 2021 · 6be9662 · 6be9662
1 parent 8eb0597
commit 6be9662
Show file tree

Hide file tree

Showing 8 changed files with 179 additions and 23 deletions.
diff --git a/src/lib/viewers/controls/media/HDBadge.tsx b/src/lib/viewers/controls/media/HDBadge.tsx
@@ -2,5 +2,9 @@ import React from 'react';
 import './HDBadge.scss';
 
 export default function HDBadge(): JSX.Element {
-    return <div className="bp-HDBadge">HD</div>;
+    return (
+        <div className="bp-HDBadge" data-testid="bp-media-controls-hd">
+            HD
+        </div>
+    );
 }
diff --git a/src/lib/viewers/media/MediaControls.html b/src/lib/viewers/media/MediaControls.html
@@ -3,12 +3,12 @@
     <div class="bp-media-controls-container">
         <button class="bp-media-controls-btn bp-media-playpause-icon" type="button">
             <svg class="bp-media-play-icon" fill="#fff" height="24" viewBox="0 0 24 24" width="24" focusable="false">
-                <path d="M8 5v14l11-7z"/>
-                <path d="M0 0h24v24H0z" fill="none"/>
+                <path d="M8 5v14l11-7z" />
+                <path d="M0 0h24v24H0z" fill="none" />
             </svg>
             <svg class="bp-media-pause-icon" fill="#fff" height="24" viewBox="0 0 24 24" width="24" focusable="false">
-                <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
-                <path d="M0 0h24v24H0z" fill="none"/>
+                <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
+                <path d="M0 0h24v24H0z" fill="none" />
             </svg>
         </button>
         <button class="bp-media-controls-btn bp-media-volume-icon bp-media-volume-icon-is-high" type="button">
@@ -25,7 +25,10 @@
                 <path fill="none" d="M-3 5h24v24H-3V5z" />
             </svg>
             <svg class="bp-media-volume-icon-high" viewBox="-3 5 24 24" width="24" height="24" focusable="false">
-                <path fill="#FFF" d="M13.5 17c0-1.8-1-3.3-2.5-4v8c1.5-.7 2.5-2.2 2.5-4zM11 8.2v2.1c2.9.9 5 3.5 5 6.7s-2.1 5.9-5 6.7v2.1c4-.9 7-4.5 7-8.8s-3-7.9-7-8.8z" />
+                <path
+                    fill="#FFF"
+                    d="M13.5 17c0-1.8-1-3.3-2.5-4v8c1.5-.7 2.5-2.2 2.5-4zM11 8.2v2.1c2.9.9 5 3.5 5 6.7s-2.1 5.9-5 6.7v2.1c4-.9 7-4.5 7-8.8s-3-7.9-7-8.8z"
+                />
                 <path fill="none" d="M-3 5h24v24H-3V5z" />
             </svg>
         </button>
@@ -40,21 +43,30 @@
         </button>
         <button class="bp-media-controls-btn bp-media-gear-icon" aria-haspopup="true" type="button">
             <svg width="24" height="24" viewBox="0 0 24 24" focusable="false">
-                <path fill="#fff" d="M19.4 13c0-.3.1-.6.1-1s0-.7-.1-1l2.1-1.6c.2-.1.2-.4.1-.6l-2-3.5c-.1-.2-.4-.3-.6-.2l-2.5 1c-.5-.4-1.1-.7-1.7-1l-.4-2.7c.1-.2-.2-.4-.4-.4h-4c-.2 0-.5.2-.5.4l-.4 2.7c-.6.2-1.1.6-1.7 1l-2.5-1c-.2-.1-.4 0-.6.2l-2 3.5c-.1.1 0 .4.2.6L4.6 11c0 .3-.1.6-.1 1s0 .7.1 1l-2.1 1.6c-.2.1-.2.4-.1.6l2 3.5c.1.2.3.3.6.2l2.5-1c.5.4 1.1.7 1.7 1l.4 2.6c0 .2.2.4.5.4h4c.2 0 .5-.2.5-.4l.4-2.6c.6-.2 1.2-.6 1.7-1l2.5 1c.2.1.5 0 .6-.2l2-3.5c.1-.2.1-.5-.1-.6L19.4 13zM12 15.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z"/>
+                <path
+                    fill="#fff"
+                    d="M19.4 13c0-.3.1-.6.1-1s0-.7-.1-1l2.1-1.6c.2-.1.2-.4.1-.6l-2-3.5c-.1-.2-.4-.3-.6-.2l-2.5 1c-.5-.4-1.1-.7-1.7-1l-.4-2.7c.1-.2-.2-.4-.4-.4h-4c-.2 0-.5.2-.5.4l-.4 2.7c-.6.2-1.1.6-1.7 1l-2.5-1c-.2-.1-.4 0-.6.2l-2 3.5c-.1.1 0 .4.2.6L4.6 11c0 .3-.1.6-.1 1s0 .7.1 1l-2.1 1.6c-.2.1-.2.4-.1.6l2 3.5c.1.2.3.3.6.2l2.5-1c.5.4 1.1.7 1.7 1l.4 2.6c0 .2.2.4.5.4h4c.2 0 .5-.2.5-.4l.4-2.6c.6-.2 1.2-.6 1.7-1l2.5 1c.2.1.5 0 .6-.2l2-3.5c.1-.2.1-.5-.1-.6L19.4 13zM12 15.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z"
+                />
             </svg>
-            <span class="bp-media-controls-hd">HD</span>
+            <span class="bp-media-controls-hd" data-testid="bp-media-controls-hd">HD</span>
         </button>
         <button class="bp-media-controls-btn bp-media-fullscreen-icon" type="button">
             <svg class="bp-enter-fullscreen-icon" width="24" height="24" viewBox="0 0 24 24" focusable="false">
                 <g fill="none" fill-rule="evenodd">
-                    <path d="M15 3l2.3 2.3-2.89 2.87 1.42 1.42L18.7 6.7 21 9V3h-6zM3 3v6l2.3-2.3 2.87 2.89 1.42-1.42L6.7 5.3 9 3H3zm11.41 12.83l2.89 2.87L15 21h6v-6l-2.3 2.3-2.87-2.89-1.42 1.42zM5.3 17.3L3 15v6h6l-2.3-2.3 2.89-2.87-1.42-1.42L5.3 17.3z" fill="#fff" />
+                    <path
+                        d="M15 3l2.3 2.3-2.89 2.87 1.42 1.42L18.7 6.7 21 9V3h-6zM3 3v6l2.3-2.3 2.87 2.89 1.42-1.42L6.7 5.3 9 3H3zm11.41 12.83l2.89 2.87L15 21h6v-6l-2.3 2.3-2.87-2.89-1.42 1.42zM5.3 17.3L3 15v6h6l-2.3-2.3 2.89-2.87-1.42-1.42L5.3 17.3z"
+                        fill="#fff"
+                    />
                     <path d="M0 0h24v24H0z" />
                 </g>
             </svg>
             <svg class="bp-exit-fullscreen-icon" width="24" height="24" viewBox="0 0 24 24" focusable="false">
                 <g fill="none" fill-rule="evenodd">
                     <path d="M0 0h24v24H0z" />
-                    <path d="M19.58 3l-2.87 2.89-2.3-2.3v6h6l-2.3-2.3L21 4.42 19.58 3zM4.42 3L3 4.42l2.89 2.87-2.3 2.3h6v-6l-2.3 2.3L4.42 3zm9.99 11.41v6l2.3-2.3L19.58 21 21 19.58l-2.89-2.87 2.3-2.3h-6zm-10.82 0l2.3 2.3L3 19.58 4.42 21l2.87-2.89 2.3 2.3v-6h-6z" fill="#fff" />
+                    <path
+                        d="M19.58 3l-2.87 2.89-2.3-2.3v6h6l-2.3-2.3L21 4.42 19.58 3zM4.42 3L3 4.42l2.89 2.87-2.3 2.3h6v-6l-2.3 2.3L4.42 3zm9.99 11.41v6l2.3-2.3L19.58 21 21 19.58l-2.89-2.87 2.3-2.3h-6zm-10.82 0l2.3 2.3L3 19.58 4.42 21l2.87-2.89 2.3 2.3v-6h-6z"
+                        fill="#fff"
+                    />
                 </g>
             </svg>
         </button>

diff --git a/src/lib/viewers/media/Settings.js b/src/lib/viewers/media/Settings.js
@@ -43,7 +43,7 @@ const SETTINGS_TEMPLATE = `<div class="bp-media-settings" data-testid="bp-settin
             <div class="bp-media-settings-value">${__('media_quality_auto')}</div>
             <div class="bp-media-settings-arrow">${ICON_ARROW_RIGHT}</div>
         </div>
-        <div class="bp-media-settings-item bp-media-settings-item-subtitles data-testid="bp-media-settings-subtitles" bp-media-settings-is-hidden" data-type="subtitles" tabindex="0" role="menuitem" aria-haspopup="true">
+        <div class="bp-media-settings-item bp-media-settings-item-subtitles bp-media-settings-is-hidden" data-testid="bp-media-settings-subtitles" data-type="subtitles" tabindex="0" role="menuitem" aria-haspopup="true">
             <div class="bp-media-settings-label" aria-label="${__('subtitles')}/CC">${__('subtitles')}/CC</div>
             <div class="bp-media-settings-value">${__('off')}</div>
             <div class="bp-media-settings-arrow">${ICON_ARROW_RIGHT}</div>

diff --git a/test/integration/media/DashViewer.e2e.test.js b/test/integration/media/DashViewer.e2e.test.js
@@ -1,8 +1,13 @@
-import { runBaseMediaSettingsTests } from '../../support/mediaSettingsTests';
+import {
+    runAudioTracksTests,
+    runBaseMediaSettingsTests,
+    runQualityMenuTests,
+    runSubtitlesTests,
+} from '../../support/mediaSettingsTests';
 
 describe('Dash Viewer', () => {
     const token = Cypress.env('ACCESS_TOKEN');
-    const fileIdVideo = Cypress.env('FILE_ID_VIDEO');
+    const fileIdVideo = Cypress.env('FILE_ID_VIDEO_SUBTITLES_TRACKS');
 
     describe('Media Settings Controls', () => {
         describe('Without react controls', () => {
@@ -11,9 +16,20 @@ describe('Dash Viewer', () => {
                 cy.showPreview(token, fileIdVideo, {
                     viewers: { Dash: { useReactControls: false } },
                 });
+
+                cy.showMediaControls();
+
+                // Open the menu
+                cy.getByTitle('Settings').click({ force: true });
             });
 
             runBaseMediaSettingsTests();
+
+            runQualityMenuTests();
+
+            runAudioTracksTests();
+
+            runSubtitlesTests();
         });
 
         describe('With react controls', () => {
@@ -22,9 +38,18 @@ describe('Dash Viewer', () => {
                 cy.showPreview(token, fileIdVideo, {
                     viewers: { Dash: { useReactControls: true } },
                 });
+
+                cy.showMediaControls();
+
+                // Open the menu
+                cy.getByTitle('Settings').click({ force: true });
             });
 
             runBaseMediaSettingsTests();
+
+            runQualityMenuTests();
+
+            runAudioTracksTests();
         });
     });
 });
diff --git a/test/integration/media/MP3Viewer.e2e.test.js b/test/integration/media/MP3Viewer.e2e.test.js
@@ -11,6 +11,11 @@ describe('MP3 Viewer', () => {
                 cy.showPreview(token, fileIdMP3, {
                     viewers: { MP3: { useReactControls: false } },
                 });
+
+                cy.showMediaControls();
+
+                // Open the menu
+                cy.getByTitle('Settings').click({ force: true });
             });
 
             runBaseMediaSettingsTests();
@@ -22,6 +27,11 @@ describe('MP3 Viewer', () => {
                 cy.showPreview(token, fileIdMP3, {
                     viewers: { MP3: { useReactControls: true } },
                 });
+
+                cy.showMediaControls();
+
+                // Open the menu
+                cy.getByTitle('Settings').click({ force: true });
             });
 
             runBaseMediaSettingsTests();

diff --git a/test/integration/media/MP4Viewer.e2e.test.js b/test/integration/media/MP4Viewer.e2e.test.js
@@ -11,6 +11,11 @@ describe('MP4 Viewer', () => {
                 cy.showPreview(token, fileIdVideo, {
                     viewers: { Dash: { disabled: true }, MP4: { useReactControls: false } },
                 });
+
+                cy.showMediaControls();
+
+                // Open the menu
+                cy.getByTitle('Settings').click({ force: true });
             });
 
             runBaseMediaSettingsTests();
@@ -22,6 +27,11 @@ describe('MP4 Viewer', () => {
                 cy.showPreview(token, fileIdVideo, {
                     viewers: { Dash: { disabled: true }, MP4: { useReactControls: true } },
                 });
+
+                cy.showMediaControls();
+
+                // Open the menu
+                cy.getByTitle('Settings').click({ force: true });
             });
 
             runBaseMediaSettingsTests();

diff --git a/test/integration/media/Video360Viewer.e2e.test.js b/test/integration/media/Video360Viewer.e2e.test.js
@@ -1,4 +1,4 @@
-import { runBaseMediaSettingsTests } from '../../support/mediaSettingsTests';
+import { runBaseMediaSettingsTests, runQualityMenuTests } from '../../support/mediaSettingsTests';
 
 describe('Video360 Viewer', () => {
     const token = Cypress.env('ACCESS_TOKEN');
@@ -11,9 +11,16 @@ describe('Video360 Viewer', () => {
                 cy.showPreview(token, fileIdVideo360, {
                     viewers: { Video360: { useReactControls: false } },
                 });
+
+                cy.showMediaControls();
+
+                // Open the menu
+                cy.getByTitle('Settings').click({ force: true });
             });
 
             runBaseMediaSettingsTests();
+
+            runQualityMenuTests();
         });
     });
 });
diff --git a/test/support/mediaSettingsTests.js b/test/support/mediaSettingsTests.js
@@ -1,13 +1,5 @@
-// eslint-disable-next-line import/prefer-default-export
 export function runBaseMediaSettingsTests() {
-    beforeEach(() => {
-        cy.showMediaControls();
-
-        // Open the menu
-        cy.getByTitle('Settings').click({ force: true });
-    });
-
-    describe('Base Media Settings', () => {
+    describe('Toggle Settings', () => {
         it('Should be able to toggle media settings menu', () => {
             cy.getByTestId('bp-settings-flyout').should('be.visible');
             cy.getByTestId('bp-media-settings-autoplay').contains('Disabled');
@@ -27,7 +19,9 @@ export function runBaseMediaSettingsTests() {
             cy.getByTestId('bp').click();
             cy.getByTestId('bp-settings-flyout').should('not.be.visible');
         });
+    });
 
+    describe('Autoplay Menu', () => {
         it('Should be able to change the Autoplay setting', () => {
             cy.getByTestId('bp-media-settings-autoplay')
                 .contains('Disabled')
@@ -41,7 +35,9 @@ export function runBaseMediaSettingsTests() {
 
             cy.getByTestId('bp-media-settings-autoplay').contains('Enabled');
         });
+    });
 
+    describe('Speed Menu', () => {
         it('Should be able to change the Speed setting', () => {
             cy.getByTestId('bp-media-settings-speed')
                 .contains('Normal')
@@ -57,3 +53,95 @@ export function runBaseMediaSettingsTests() {
         });
     });
 }
+
+export function runQualityMenuTests() {
+    describe('Quality Menu', () => {
+        it('Should be able to change the Quality setting', () => {
+            cy.getByTestId('bp-media-settings-quality')
+                .contains('Auto')
+                .click();
+
+            cy.getByTestId('bp-media-controls-hd').should('be.visible');
+
+            cy.get('[role="menuitem"]').contains('Quality');
+
+            cy.getByTestId('bp-settings-flyout')
+                .contains('480p')
+                .click();
+
+            cy.getByTestId('bp-media-settings-quality').contains('480p');
+
+            cy.getByTestId('bp-media-controls-hd').should('not.be.visible');
+        });
+    });
+}
+
+export function runAudioTracksTests() {
+    describe('Audiotracks Menu', () => {
+        it('Should be able to change the Audiotrack setting', () => {
+            cy.getByTestId('bp-media-settings-audiotracks')
+                .contains('Track 1')
+                .click();
+
+            cy.get('[role="menuitem"]').contains('Audio');
+
+            cy.getByTestId('bp-settings-flyout')
+                .contains('Track 2')
+                .click();
+
+            cy.getByTestId('bp-media-settings-audiotracks').contains('Track 2');
+        });
+    });
+}
+
+export function runSubtitlesTests() {
+    describe('Subtitles', () => {
+        it('Should be able to change the Subtitle setting', () => {
+            cy.getByTestId('bp-media-settings-subtitles')
+                .contains('English')
+                .click();
+
+            cy.get('[role="menuitem"]').contains('Subtitles/CC');
+
+            cy.getByTestId('bp-settings-flyout')
+                .contains('Spanish')
+                .click();
+
+            cy.getByTestId('bp-media-settings-subtitles').contains('Spanish');
+        });
+
+        it('Should be able to turn off subtitles via the button', () => {
+            cy.getByTitle('Subtitles/Closed Captions')
+                .as('subtitlesBtn')
+                .should('be.visible')
+                .should('have.attr', 'aria-pressed', 'true');
+
+            cy.getByTestId('bp-media-settings-subtitles').contains('English');
+
+            cy.get('@subtitlesBtn')
+                .click()
+                .should('have.attr', 'aria-pressed', 'false');
+
+            cy.getByTestId('bp-media-settings-subtitles').contains('Off');
+        });
+
+        it('Should be able to turn off subtitles via the menu', () => {
+            cy.getByTitle('Subtitles/Closed Captions')
+                .as('subtitlesBtn')
+                .should('be.visible')
+                .should('have.attr', 'aria-pressed', 'true');
+
+            cy.getByTestId('bp-media-settings-subtitles')
+                .contains('English')
+                .click();
+
+            cy.getByTestId('bp-settings-flyout')
+                .contains('Off')
+                .click();
+
+            cy.get('@subtitlesBtn').should('have.attr', 'aria-pressed', 'false');
+
+            cy.getByTestId('bp-media-settings-subtitles').contains('Off');
+        });
+    });
+}