Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Jun 7, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bb1c9be
test(e2e): Add more media settings tests for dash
Jun 7, 2021
6f1ee7c
Merge branch 'master' into e2e-tests-dash
mergify[bot] Jun 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/lib/viewers/controls/media/HDBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
30 changes: 21 additions & 9 deletions src/lib/viewers/media/MediaControls.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/viewers/media/Settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
29 changes: 27 additions & 2 deletions test/integration/media/DashViewer.e2e.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand All @@ -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', () => {
Expand All @@ -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();
});
});
});
10 changes: 10 additions & 0 deletions test/integration/media/MP3Viewer.e2e.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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();
Expand Down
10 changes: 10 additions & 0 deletions test/integration/media/MP4Viewer.e2e.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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();
Expand Down
9 changes: 8 additions & 1 deletion test/integration/media/Video360Viewer.e2e.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { runBaseMediaSettingsTests } from '../../support/mediaSettingsTests';
import { runBaseMediaSettingsTests, runQualityMenuTests } from '../../support/mediaSettingsTests';

describe('Video360 Viewer', () => {
const token = Cypress.env('ACCESS_TOKEN');
Expand All @@ -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();
});
});
});
106 changes: 97 additions & 9 deletions test/support/mediaSettingsTests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
Expand All @@ -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')
Expand All @@ -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')
Expand All @@ -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');
});
});
}