Merge branch 'develop' into bug/make-logout-into-function

.commitlintrc.js

@@ -2,7 +2,9 @@ module.exports = {
   extends: ['@commitlint/config-conventional'],
   rules: {
     'scope-enum': [
-      2, 'always', [
+      2,
+      'always',
+      [
         'project',
         'home',
         'playlist',
@@ -19,6 +21,7 @@ module.exports = {
         'auth',
         'menu',
         'payment',
+        'e2e',
       ],
     ],
   },

docs/developer-guidelines.md

@@ -69,6 +69,7 @@ The allowed scopes are:
 - auth
 - menu
 - payment
+- e2e
 
 ### Subject
 

src/components/UserMenu/UserMenu.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 
@@ -19,14 +20,16 @@ type Props = {
 
 const UserMenu = ({ showPaymentsItem, inPopover = false, onClick }: Props) => {
   const { t } = useTranslation('user');
+  const history = useHistory();
 
   const onLogout = useCallback(() => {
     if (onClick) {
       onClick();
     }
 
     logout();
-  }, [onClick]);
+    history.replace('/');
+  }, [onClick, history]);
 
   const menuItems = (
     <ul className={styles.menuItems}>

src/screens/User/User.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Redirect, Route, Switch, useHistory, useLocation } from 'react-router-dom';
+import { Redirect, Route, Switch, useHistory } from 'react-router-dom';
 import type { PlaylistItem } from 'types/playlist';
 import { useTranslation } from 'react-i18next';
 
@@ -39,7 +39,10 @@ const User = (): JSX.Element => {
 
   const onCardClick = (playlistItem: PlaylistItem) => history.push(cardUrl(playlistItem));
   const onCardHover = (playlistItem: PlaylistItem) => updateBlurImage(playlistItem.image);
-  const onLogout = useCallback(() => logout(), []);
+  const onLogout = useCallback(() => {
+    // Empty customer on a user page leads to history.replace (code bellow), so we don't repeat it here
+    logout();
+  }, []);
 
   useEffect(() => updateBlurImage(''), [updateBlurImage]);
 

src/stores/AccountStore.ts

@@ -193,8 +193,6 @@ export const logout = async () => {
 
   await restoreFavorites();
   await restoreWatchHistory();
-
-  window.location.href = '/';
 };
 
 export const register = async (email: string, password: string) => {

test-e2e/tests/watch_history_test.ts

@@ -1,18 +1,18 @@
 import * as assert from 'assert';
 
-import constants from "../utils/constants";
+import constants from '../utils/constants';
 
 import LocatorOrString = CodeceptJS.LocatorOrString;
 
 const videoLength = 231;
 
 Feature('watch_history - local');
 
-Before(({I}) => {
+Before(({ I }) => {
   I.useConfig('test--no-cleeng');
 });
 
-Scenario('I can get my watch progress stored (locally)',  async ({ I }) => {
+Scenario('I can get my watch progress stored (locally)', async ({ I }) => {
   I.amOnPage(constants.agent327DetailUrl);
   I.dontSee('Continue watching');
 
@@ -30,7 +30,7 @@ Scenario('I can continue watching', async ({ I }) => {
   await checkElapsed(I, 1, 40);
 });
 
-Scenario('I can see my watch history on the Home screen', async({ I })=> {
+Scenario('I can see my watch history on the Home screen', async ({ I }) => {
   I.seeCurrentUrlEquals(constants.baseUrl);
   I.dontSee('Continue watching');
 
@@ -45,7 +45,7 @@ Scenario('I can see my watch history on the Home screen', async({ I })=> {
   });
 
   const xpath = '//*[@data-mediaid="continue-watching"]//*[@aria-label="Play Agent 327"]';
-  await checkProgress(I, xpath, 200/videoLength * 100);
+  await checkProgress(I, xpath, (200 / videoLength) * 100);
 
   I.click(xpath);
   await I.waitForPlayerPlaying('Agent 327');
@@ -77,11 +77,11 @@ Scenario('Video removed from continue watching when finished', async ({ I }) =>
 
 Feature('watch_history - logged in');
 
-Before(({I}) => {
+Before(({ I }) => {
   I.useConfig('test--accounts');
 });
 
-Scenario('I can get my watch history when logged in', async({ I })=> {
+Scenario('I can get my watch history when logged in', async ({ I }) => {
   I.login();
   await playVideo(I, 0);
   I.see('Start watching');
@@ -91,10 +91,10 @@ Scenario('I can get my watch history when logged in', async({ I })=> {
 
   I.see('Continue watching');
   I.dontSee('Start watching');
-  await checkProgress(I, '//button[contains(., "Continue watching")]', 80 / videoLength * 100, 5, '_progressRail_', '_progress_');
+  await checkProgress(I, '//button[contains(., "Continue watching")]', (80 / videoLength) * 100, 5, '_progressRail_', '_progress_');
 });
 
-Scenario('I can get my watch history stored to my account after login', async({ I })=> {
+Scenario('I can get my watch history stored to my account after login', async ({ I }) => {
   I.amOnPage(constants.agent327DetailUrl);
   I.dontSee('Continue watching');
   I.see('Sign up to start watching');
@@ -103,39 +103,39 @@ Scenario('I can get my watch history stored to my account after login', async({
   I.amOnPage(constants.agent327DetailUrl);
   I.dontSee('Start watching');
   I.see('Continue watching');
-  await checkProgress(I, '//button[contains(., "Continue watching")]', 80 / videoLength * 100, 5, '_progressRail_', '_progress_');
+  await checkProgress(I, '//button[contains(., "Continue watching")]', (80 / videoLength) * 100, 5, '_progressRail_', '_progress_');
 
   I.click('Continue watching');
   await I.waitForPlayerPlaying('Agent 327');
   I.click('video');
   await checkElapsed(I, 1, 20);
 });
 
-Scenario('I can see my watch history on the Home screen when logged in', async({ I })=> {
+Scenario('I can see my watch history on the Home screen when logged in', async ({ I }) => {
+  const xpath = '//*[@data-mediaid="continue-watching"]//*[@aria-label="Play Agent 327"]';
+
   I.seeCurrentUrlEquals(constants.baseUrl);
   I.dontSee('Continue watching');
 
   I.login();
-
   I.see('Continue watching');
 
   await within('div[data-mediaid="continue-watching"]', async () => {
     I.see('Agent 327');
     I.see('4 min');
   });
 
-  const xpath = '//*[@data-mediaid="continue-watching"]//*[@aria-label="Play Agent 327"]';
-  await checkProgress(I, xpath, 80/videoLength * 100);
+  await checkProgress(I, xpath, (80 / videoLength) * 100);
 
+  // Automatic scroll leads to click problems for some reasons
+  I.scrollTo(xpath);
   I.click(xpath);
   await I.waitForPlayerPlaying('Agent 327');
-  I.click('video');
 
   await checkElapsed(I, 1, 20);
   I.seeInCurrentUrl('play=1');
 });
 
-
 async function playVideo(I: CodeceptJS.I, seekTo: number) {
   I.amOnPage(constants.agent327DetailUrl + '&play=1');
   await I.waitForPlayerPlaying('Agent 327');
@@ -146,18 +146,18 @@ async function playVideo(I: CodeceptJS.I, seekTo: number) {
 }
 
 async function checkProgress(
-    I: CodeceptJS.I,
-    context: LocatorOrString,
-    expectedPercent: number,
-    tolerance: number = 5,
-    containerClass: string = '_progressContainer',
-    barClass: string = '_progressBar'
+  I: CodeceptJS.I,
+  context: LocatorOrString,
+  expectedPercent: number,
+  tolerance: number = 5,
+  containerClass: string = '_progressContainer',
+  barClass: string = '_progressBar',
 ) {
-  await within(context, async () => {
+  return within(context, async () => {
     const containerWidth = await I.grabCssPropertyFrom(`div[class*=${containerClass}]`, 'width');
     const progressWidth = await I.grabCssPropertyFrom(`div[class*=${barClass}]`, 'width');
 
-    const percentage = Math.round(100 * pixelsToNumber(progressWidth) / pixelsToNumber(containerWidth));
+    const percentage = Math.round((100 * pixelsToNumber(progressWidth)) / pixelsToNumber(containerWidth));
 
     await I.say(`Checking that percentage ${percentage} is between ${expectedPercent - tolerance} and ${expectedPercent + tolerance}`);
 
@@ -177,13 +177,12 @@ function pixelsToNumber(value: string) {
 
 async function checkElapsed(I: CodeceptJS.I, expectedMinutes: number, expectedSeconds: number, bufferSeconds: number = 5) {
   const elapsed = await I.grabTextFrom('[class*=jw-text-elapsed]');
-  const [minutes, seconds] = elapsed.split(':').map(item => Number.parseInt(item));
+  const [minutes, seconds] = elapsed.split(':').map((item) => Number.parseInt(item));
   assert.strictEqual(minutes, expectedMinutes);
 
   if (seconds < expectedSeconds || seconds > expectedSeconds + bufferSeconds) {
-    assert.fail(`Elapsed time of ${minutes}m ${seconds}s is not within ${bufferSeconds} seconds of ${expectedMinutes}m ${expectedSeconds}s`)
+    assert.fail(`Elapsed time of ${minutes}m ${seconds}s is not within ${bufferSeconds} seconds of ${expectedMinutes}m ${expectedSeconds}s`);
   } else {
     assert.ok(expectedSeconds);
   }
-
-}
+}

test-e2e/utils/steps_file.ts

@@ -175,6 +175,7 @@ module.exports = function () {
       }, args);
     },
     waitForPlayerPlaying: async function (title, tries = 10) {
+      this.seeElement('div[class*="jwplayer"]');
       this.see(title);
       await this.waitForPlayerState('playing', ['buffering', 'idle', ''], tries);
     },
@@ -183,9 +184,7 @@ module.exports = function () {
       // so we have to manually retry (this is because the video can take time to load and the state will be buffering)
       for (let i = 0; i < tries; i++) {
         // In theory this expression can be simplified, but without the typeof's codecept throws an error when the value is undefined.
-        const state = await this.executeScript(() =>
-          typeof jwplayer === 'undefined' || typeof jwplayer().getState === 'undefined' ? '' : jwplayer().getState(),
-        );
+        const state = await this.executeScript(() => jwplayer?.()?.getState());
 
         await this.say(`Waiting for Player state. Expected: "${expectedState}", Current: "${state}"`);