refactor(e2e): e2e-report

.depcheckrc.yaml

@@ -1,15 +1,17 @@
 ignores: [
     # These are dependencies for vite and vite plugins that depcheck doesn't recognize as being used
-    "postcss-scss",
-    "stylelint-order",
-    "stylelint-config-recommended-scss",
-    "stylelint-declaration-strict-value",
-    "stylelint-scss",
+    'postcss-scss',
+    'stylelint-order',
+    'stylelint-config-recommended-scss',
+    'stylelint-declaration-strict-value',
+    'stylelint-scss',
     # This is used by commitlint in .commitlintrc.js
-    " @commitlint/config-conventional",
+    ' @commitlint/config-conventional',
     # These are vite aliases / tsconfig paths that point to specific local directories
     # Note the \\ is apparently necessary to escape the # or the ignore doesn't work
     "\\#src",
     "\\#test",
-    "\\#types"
-]
+    "\\#types",
+    # To support e2e-reports
+    'allure-commandline',
+  ]

.github/workflows/codeceptjs.yml

@@ -4,13 +4,12 @@ on: [pull_request]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
       fail-fast: false
       matrix:
-        node-version: [14.x]
+        node-version: [16.x]
         config: [desktop, mobile]
 
     steps:
@@ -27,5 +26,10 @@ jobs:
         run: yarn start &
       - name: Run tests
         run: wait-on -v -t 30000 -c ./scripts/waitOnConfig.js http-get://localhost:8080 && yarn codecept:${{ matrix.config }}
-        env:
-          CI: true
+      - name: Uploading artifact
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: allure-report-${{ matrix.config }}
+          path: ./test-e2e/output/${{ matrix.config }}
+          retention-days: 7

.github/workflows/lhci.yml

@@ -9,7 +9,7 @@ jobs:
       - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 16.x
       - name: yarn install, build
         run: |
           yarn install

.github/workflows/main.yml

@@ -4,12 +4,11 @@ on: [pull_request]
 
 jobs:
   build:
-
     runs-on: macos-latest
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v1

docs/features/e2e.md

@@ -0,0 +1,59 @@
+# e2e tests
+
+## Instruments used
+
+We use several libraries for e2e-tests:
+
+- CodeceptJS as a test launcher
+- Playwright as a cross-browser e2e engine
+- Allure to build reports
+
+[Read more.](https://codecept.io/playwright/#setup)
+
+## Folder structure
+
+We store e2e logic in `test-e2e` folder. Tests suites are located in `tests` folder, where each subfolder represents the component / page being tested.
+
+There are two config files for desktop and mobile testing. By default each test suite works for both mobile and desktop pack. In order to limit test suite as one suitable only for one platform, it is possible to write `(@mobile-only)` in the Scenario description.
+
+In the `data` folder we store ott-app configs necessary for testing purposes. To load config in the test suite it is possible to use `I.useConfig(__CONFIG_NAME__);` function.
+
+`output` folder consists of allure test report and screenshot of failed tests (with `mobile` and `desktop` subfolders to separate test results).
+
+`utils` folder can be used to store common utils / asserts necessary for test suits.
+
+## Test suite
+
+Each test suite is a separate file located in one of the `tests` subfolders. It is necessary to label the suite with the following feature code: `Feature('account').retry(3);` . In order to reduce the chance of unintended failures it is also better to define retry count. This way a test will be relaunched several times in case it failed.
+
+**TODO:** use `allure.createStep` to have readable steps in allure report. [Read more.](https://codecept.io/plugins/#allure)
+
+## Tests launching
+
+We use several workers to launch tests for each platform. That increases the speed and guaranties the autonomy of each Scenario.
+
+**(!)** In order to support allure reports it is necessary to install Java 8.
+
+Basic commands:
+
+`yarn codecept:mobile` -  to run tests for mobile device
+`yarn codecept:desktop`: - to run tests for desktop
+`yarn serve-report:mobile` - to serve allure report from "./output/mobile" folder
+`yarn serve-report:desktop` - to serve allure report from "./output/desktop" folder
+`yarn codecept-serve:mobile` - to run desktop tests and serve the report
+`yarn codecept-serve:desktop` - to run mobile tests and serve the report
+
+## GitHub Actions
+
+We have two actions: one for desktop and one for mobile device. Each one runs independently. After the action run it is possible to download an artifact with an allure report and build a nice report locally. 
+
+To do it on Mac: `allure serve ~/Downloads/allure-report-desktop`
+
+To serve allure reports locally `allure-commandline` package should be installed globally.
+
+## Simple steps to run tests locally for desktop
+
+1. Install Java 8 (for Mac homebrew with `adoptopenjdk8` package can be used package)
+2. `yarn install`
+3. Install `allure-commandline` globally (can help in the future to serve downloaded artifacts)
+4. Run `yarn codecept-serve:desktop` 

package.json

@@ -5,6 +5,9 @@
   "repository": "https://github.com/jwplayer/ott-web-app.git",
   "author": "Robin van Zanten",
   "private": true,
+  "engines": {
+    "node": ">=16.0.0"
+  },
   "scripts": {
     "prepare": "husky install",
     "start": "vite",
@@ -18,11 +21,16 @@
     "lint:styles": "stylelint \"src/**/*.scss\"",
     "commit-msg": "commitlint --edit $1",
     "pre-commit": "depcheck && lint-staged && TZ=UTC yarn test --coverage",
-    "codecept:mobile": "cd test-e2e && codeceptjs -c codecept.mobile.js run --steps",
-    "codecept:desktop": "cd test-e2e && codeceptjs -c codecept.desktop.js run --steps",
+    "codecept:mobile": "cd test-e2e && rm -rf \"./output/mobile\" && codeceptjs --config ./codecept.mobile.js run-workers --suites 2 ",
+    "codecept:desktop": "cd test-e2e && rm -rf \"./output/desktop\" && codeceptjs --config ./codecept.desktop.js run-workers --suites 2 ",
+    "serve-report:mobile": "cd test-e2e && allure serve \"./output/mobile\"",
+    "serve-report:desktop": "cd test-e2e && allure serve \"./output/desktop\"",
+    "codecept-serve:mobile": "yarn codecept:mobile ; yarn serve-report:mobile",
+    "codecept-serve:desktop": "yarn codecept:desktop ; yarn serve-report:desktop",
     "deploy:github": "node ./scripts/deploy-github.js"
   },
   "dependencies": {
+    "allure-commandline": "^2.17.2",
     "classnames": "^2.3.1",
     "history": "^4.10.1",
     "i18next": "^20.3.1",
@@ -59,7 +67,7 @@
     "@typescript-eslint/parser": "^5.17.0",
     "@vitejs/plugin-react": "^1.0.7",
     "c8": "^7.11.2",
-    "codeceptjs": "^3.2.3",
+    "codeceptjs": "3.3.0",
     "confusing-browser-globals": "^1.0.10",
     "depcheck": "^1.4.3",
     "eslint": "^7.31.0",
@@ -117,4 +125,4 @@
     "glob-parent": "^5.1.2",
     "codeceptjs/**/ansi-regex": "^4.1.1"
   }
-}
+}

src/i18n/locales/en_US/video.json

@@ -6,7 +6,6 @@
   "continue_watching": "Continue watching",
   "copied_url": "Copied url",
   "current_episode": "Current episode",
-  "currently_playing": "Current video",
   "episode_not_found": "Episode not found",
   "episodes": "Episodes",
   "favorite": "Favorite",

src/i18n/locales/nl_NL/video.json

@@ -6,7 +6,6 @@
   "continue_watching": "",
   "copied_url": "",
   "current_episode": "",
-  "currently_playing": "",
   "episode_not_found": "",
   "episodes": "",
   "favorite": "",

src/screens/Movie/Movie.tsx

@@ -158,8 +158,6 @@ const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.
               playlist={playlist.playlist}
               onCardClick={onCardClick}
               isLoading={isLoading}
-              currentCardItem={item}
-              currentCardLabel={t('currently_playing')}
               enableCardTitles={styling.shelfTitles}
               accessModel={accessModel}
               isLoggedIn={!!user}

test-e2e/codecept.desktop.js

@@ -8,35 +8,40 @@ setHeadlessWhen(process.env.HEADLESS);
 
 exports.config = {
   grep: '(?=.*)^(?!.*@mobile-only)',
-  tests    : [
-    './tests/*.js',
-    './tests/*.ts'
-  ],
-  output   : './output/desktop',
-  helpers  : {
+  tests: ['./tests/**/*.js', './tests/**/*.ts'],
+  output: './output/desktop',
+  timeout: 60,
+  helpers: {
     Playwright: {
-      url    : 'http://localhost:8080',
-      show   : false,
-      channel: 'chrome'
-    }
+      url: 'http://localhost:8080',
+      show: false,
+      channel: 'chrome',
+    },
   },
-  include  : {
-    I: './utils/steps_file.ts'
+  include: {
+    I: './utils/steps_file.ts',
   },
   bootstrap: null,
-  mocha    : {},
-  name     : 'desktop',
-  plugins  : {
-    pauseOnFail     : {},
-    retryFailedStep : {
+  mocha: {},
+  name: 'desktop',
+  plugins: {
+    pauseOnFail: {},
+    retryFailedStep: {
+      minTimeout: 3000,
+      enabled: true,
+      retries: 3,
+    },
+    autoDelay: {
       enabled: true,
-      retries: 2,
     },
-    tryTo           : {
-      enabled: true
+    tryTo: {
+      enabled: true,
     },
     screenshotOnFail: {
-      enabled: !process.env.CI
-    }
-  }
+      enabled: !process.env.CI,
+    },
+    allure: {
+      enabled: true,
+    },
+  },
 };

test-e2e/codecept.mobile.js

@@ -9,36 +9,41 @@ setHeadlessWhen(process.env.HEADLESS);
 
 exports.config = {
   grep: '(?=.*)^(?!.*@desktop-only)',
-  tests    : [
-    './tests/*.js',
-    './tests/*.ts'
-  ],
-  output   : './output/mobile',
-  helpers  : {
+  tests: ['./tests/**/*.js', './tests/**/*.ts'],
+  output: './output/mobile',
+  timeout: 60,
+  helpers: {
     Playwright: {
-      url    : 'http://localhost:8080',
-      show   : false,
+      url: 'http://localhost:8080',
+      show: false,
       channel: 'chrome',
       emulate: devices['Pixel 5'],
-    }
+    },
   },
-  include  : {
-    I: './utils/steps_file.ts'
+  include: {
+    I: './utils/steps_file.ts',
   },
   bootstrap: null,
-  mocha    : {},
-  name     : 'mobile',
-  plugins  : {
-    pauseOnFail     : {},
-    retryFailedStep : {
+  mocha: {},
+  name: 'mobile',
+  plugins: {
+    pauseOnFail: {},
+    retryFailedStep: {
+      minTimeout: 3000,
+      enabled: true,
+      retries: 3,
+    },
+    autoDelay: {
       enabled: true,
-      retries: 2,
     },
-    tryTo           : {
-      enabled: true
+    tryTo: {
+      enabled: true,
     },
     screenshotOnFail: {
-      enabled: !process.env.CI
-    }
-  }
+      enabled: !process.env.CI,
+    },
+    allure: {
+      enabled: true,
+    },
+  },
 };