From 7f90579c04383ca883083548f40782352605d778 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 7 Aug 2020 10:25:07 +0200 Subject: Add playlist embed E2E test --- client/e2e/src/po/player.po.ts | 54 +++++++++++++++++++++ client/e2e/src/po/video-watch.po.ts | 55 +++++----------------- client/e2e/src/videos.e2e-spec.ts | 47 ++++++++++++++---- client/src/assets/player/playlist/playlist-menu.ts | 5 +- 4 files changed, 109 insertions(+), 52 deletions(-) create mode 100644 client/e2e/src/po/player.po.ts (limited to 'client') diff --git a/client/e2e/src/po/player.po.ts b/client/e2e/src/po/player.po.ts new file mode 100644 index 000000000..c03f20c68 --- /dev/null +++ b/client/e2e/src/po/player.po.ts @@ -0,0 +1,54 @@ +import { browser, by, element, ExpectedConditions } from 'protractor' +import { browserSleep, isIOS, isMobileDevice } from '../utils' + +export class PlayerPage { + + getWatchVideoPlayerCurrentTime () { + return element(by.css('.video-js .vjs-current-time-display')) + .getText() + .then((t: string) => t.split(':')[1]) + .then(seconds => parseInt(seconds, 10)) + } + + waitUntilPlaylistInfo (text: string) { + const elem = element(by.css('.video-js .vjs-playlist-info')) + + return browser.wait(browser.ExpectedConditions.textToBePresentInElement(elem, text)) + } + + async playAndPauseVideo (isAutoplay: boolean) { + // Autoplay is disabled on iOS + if (isAutoplay === false || await isIOS()) { + await this.clickOnPlayButton() + } + + await browserSleep(2000) + await browser.wait(browser.ExpectedConditions.invisibilityOf(element(by.css('.vjs-loading-spinner')))) + + const videojsEl = element(by.css('div.video-js')) + await browser.wait(browser.ExpectedConditions.elementToBeClickable(videojsEl)) + + // On Android, we need to click twice on "play" (BrowserStack particularity) + if (await isMobileDevice()) { + await browserSleep(5000) + + await videojsEl.click() + } + + browser.ignoreSynchronization = false + await browserSleep(7000) + browser.ignoreSynchronization = true + + await videojsEl.click() + } + + async playVideo () { + return this.clickOnPlayButton() + } + + private async clickOnPlayButton () { + const playButton = element(by.css('.vjs-big-play-button')) + await browser.wait(browser.ExpectedConditions.elementToBeClickable(playButton)) + await playButton.click() + } +} diff --git a/client/e2e/src/po/video-watch.po.ts b/client/e2e/src/po/video-watch.po.ts index 35ec773af..fb9c3a000 100644 --- a/client/e2e/src/po/video-watch.po.ts +++ b/client/e2e/src/po/video-watch.po.ts @@ -1,5 +1,5 @@ import { browser, by, element, ElementFinder, ExpectedConditions } from 'protractor' -import { browserSleep, isIOS, isMobileDevice } from '../utils' +import { browserSleep, isMobileDevice } from '../utils' export class VideoWatchPage { async goOnVideosList (isMobileDevice: boolean, isSafari: boolean) { @@ -37,43 +37,24 @@ export class VideoWatchPage { return browser.wait(browser.ExpectedConditions.textToBePresentInElement(elem, videoName)) } - getWatchVideoPlayerCurrentTime () { - return element(by.css('.video-js .vjs-current-time-display')) - .getText() - .then((t: string) => t.split(':')[1]) - .then(seconds => parseInt(seconds, 10)) - } - getVideoName () { return this.getVideoNameElement().getText() } - async playAndPauseVideo (isAutoplay: boolean) { - // Autoplay is disabled on iOS - if (isAutoplay === false || await isIOS()) { - const playButton = element(by.css('.vjs-big-play-button')) - await browser.wait(browser.ExpectedConditions.elementToBeClickable(playButton)) - await playButton.click() - } - - await browserSleep(2000) - await browser.wait(browser.ExpectedConditions.invisibilityOf(element(by.css('.vjs-loading-spinner')))) - - const videojsEl = element(by.css('div.video-js')) - await browser.wait(browser.ExpectedConditions.elementToBeClickable(videojsEl)) - - // On Android, we need to click twice on "play" (BrowserStack particularity) - if (await isMobileDevice()) { - await browserSleep(5000) + async goOnAssociatedEmbed () { + let url = await browser.getCurrentUrl() + url = url.replace('/watch/', '/embed/') + url = url.replace(':3333', ':9001') - await videojsEl.click() - } + return browser.get(url) + } - browser.ignoreSynchronization = false - await browserSleep(7000) - browser.ignoreSynchronization = true + async goOnP2PMediaLoaderEmbed () { + return browser.get('https://peertube2.cpy.re/videos/embed/969bf103-7818-43b5-94a0-de159e13de50') + } - await videojsEl.click() + async goOnP2PMediaLoaderPlaylistEmbed () { + return browser.get('https://peertube2.cpy.re/video-playlists/embed/73804a40-da9a-40c2-b1eb-2c6d9eec8f0a') } async clickOnVideo (videoName: string) { @@ -101,18 +82,6 @@ export class VideoWatchPage { return textToReturn } - async goOnAssociatedEmbed () { - let url = await browser.getCurrentUrl() - url = url.replace('/watch/', '/embed/') - url = url.replace(':3333', ':9001') - - return browser.get(url) - } - - async goOnP2PMediaLoaderEmbed () { - return browser.get('https://peertube2.cpy.re/videos/embed/969bf103-7818-43b5-94a0-de159e13de50') - } - async clickOnUpdate () { const dropdown = element(by.css('my-video-actions-dropdown .action-button')) await dropdown.click() diff --git a/client/e2e/src/videos.e2e-spec.ts b/client/e2e/src/videos.e2e-spec.ts index 75fa89e28..97d1b827c 100644 --- a/client/e2e/src/videos.e2e-spec.ts +++ b/client/e2e/src/videos.e2e-spec.ts @@ -2,6 +2,7 @@ import { browser } from 'protractor' import { AppPage } from './po/app.po' import { LoginPage } from './po/login.po' import { MyAccountPage } from './po/my-account' +import { PlayerPage } from './po/player.po' import { VideoUpdatePage } from './po/video-update.po' import { VideoUploadPage } from './po/video-upload.po' import { VideoWatchPage } from './po/video-watch.po' @@ -23,6 +24,7 @@ describe('Videos workflow', () => { let myAccountPage: MyAccountPage let loginPage: LoginPage let appPage: AppPage + let playerPage: PlayerPage let videoName = new Date().getTime() + ' video' const video2Name = new Date().getTime() + ' second video' @@ -36,6 +38,7 @@ describe('Videos workflow', () => { myAccountPage = new MyAccountPage() loginPage = new LoginPage() appPage = new AppPage() + playerPage = new PlayerPage() if (await isIOS()) { // iOS does not seem to work with protractor @@ -99,8 +102,8 @@ describe('Videos workflow', () => { it('Should play the video', async () => { videoWatchUrl = await browser.getCurrentUrl() - await videoWatchPage.playAndPauseVideo(true) - expect(videoWatchPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2) + await playerPage.playAndPauseVideo(true) + expect(playerPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2) }) it('Should watch the associated embed video', async () => { @@ -108,8 +111,8 @@ describe('Videos workflow', () => { await videoWatchPage.goOnAssociatedEmbed() - await videoWatchPage.playAndPauseVideo(false) - expect(videoWatchPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2) + await playerPage.playAndPauseVideo(false) + expect(playerPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2) await browser.waitForAngularEnabled(true) }) @@ -119,8 +122,8 @@ describe('Videos workflow', () => { await videoWatchPage.goOnP2PMediaLoaderEmbed() - await videoWatchPage.playAndPauseVideo(false) - expect(videoWatchPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2) + await playerPage.playAndPauseVideo(false) + expect(playerPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2) await browser.waitForAngularEnabled(true) }) @@ -178,19 +181,44 @@ describe('Videos workflow', () => { await myAccountPage.playPlaylist() + await browser.waitForAngularEnabled(false) + await videoWatchPage.waitUntilVideoName(video2Name, 20000 * 1000) + + await browser.waitForAngularEnabled(true) }) it('Should watch the webtorrent playlist in the embed', async () => { if (await skipIfUploadNotSupported()) return + const accessToken = await browser.executeScript(`return window.localStorage.getItem('access_token');`) + const refreshToken = await browser.executeScript(`return window.localStorage.getItem('refresh_token');`) + await browser.waitForAngularEnabled(false) await myAccountPage.goOnAssociatedPlaylistEmbed() - await videoWatchPage.playAndPauseVideo(false) + await browser.executeScript(`window.localStorage.setItem('access_token', '${accessToken}');`) + await browser.executeScript(`window.localStorage.setItem('refresh_token', '${refreshToken}');`) + await browser.executeScript(`window.localStorage.setItem('token_type', 'Bearer');`) - await videoWatchPage.waitUntilVideoName(video2Name, 20000 * 1000) + await browser.refresh() + + await playerPage.playVideo() + + await playerPage.waitUntilPlaylistInfo('2/2') + + await browser.waitForAngularEnabled(true) + }) + + it('Should watch the HLS playlist in the embed', async () => { + await browser.waitForAngularEnabled(false) + + await videoWatchPage.goOnP2PMediaLoaderPlaylistEmbed() + + await playerPage.playVideo() + + await playerPage.waitUntilPlaylistInfo('2/2') await browser.waitForAngularEnabled(true) }) @@ -198,6 +226,9 @@ describe('Videos workflow', () => { it('Should delete the video 2', async () => { if (await skipIfUploadNotSupported()) return + // Go to the dev website + await browser.get(videoWatchUrl) + await myAccountPage.navigateToMyVideos() await myAccountPage.removeVideo(video2Name) diff --git a/client/src/assets/player/playlist/playlist-menu.ts b/client/src/assets/player/playlist/playlist-menu.ts index 37284fb44..a2583047b 100644 --- a/client/src/assets/player/playlist/playlist-menu.ts +++ b/client/src/assets/player/playlist/playlist-menu.ts @@ -65,8 +65,11 @@ class PlaylistMenu extends Component { className: 'title' }) + const playlistChannel = options.playlist.videoChannel const leftSubtitle = super.createEl('div', { - innerHTML: this.player().localize('By {1}', [ options.playlist.videoChannel.displayName ]), + innerHTML: playlistChannel + ? this.player().localize('By {1}', [ playlistChannel.displayName ]) + : '', className: 'channel' }) -- cgit v1.2.3