feat(project): initialize CodeceptJS tests

.github/workflows/codeceptjs.yml

@@ -0,0 +1,25 @@
+name: Codeceptjs
+
+on: [push, pull_request]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+        config: [desktop, mobile]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: |
+          yarn
+          yarn codecept:${{ matrix.config }}:ci run --steps
+        env:
+          CI: true

.gitignore

@@ -4,3 +4,4 @@ node_modules
 .idea
 .DS_Store
 /coverage
+/output

codecept.desktop.js

@@ -0,0 +1,37 @@
+const { setHeadlessWhen } = require('@codeceptjs/configure');
+
+// turn on headless mode when running with HEADLESS=true environment variable
+// export HEADLESS=true && npx codeceptjs run
+setHeadlessWhen(process.env.HEADLESS);
+
+exports.config = {
+  grep     : '@desktop',
+  tests    : './test/*_test.js',
+  output   : './output',
+  helpers  : {
+    Playwright: {
+      url    : 'http://localhost:8080',
+      show   : false,
+      browser: 'chromium',
+    }
+  },
+  include  : {
+    I: './steps_file.js'
+  },
+  bootstrap: null,
+  mocha    : {},
+  name     : 'desktop',
+  plugins  : {
+    pauseOnFail     : {},
+    retryFailedStep : {
+      enabled: true,
+      retries: 2,
+    },
+    tryTo           : {
+      enabled: true
+    },
+    screenshotOnFail: {
+      enabled: !process.env.CI
+    }
+  }
+};

codecept.mobile.js

@@ -0,0 +1,39 @@
+const { devices } = require('playwright');
+const { setHeadlessWhen } = require('@codeceptjs/configure');
+
+// turn on headless mode when running with HEADLESS=true environment variable
+// export HEADLESS=true && npx codeceptjs run
+setHeadlessWhen(process.env.HEADLESS);
+
+exports.config = {
+  grep     : '@mobile',
+  tests    : './test/*_test.js',
+  output   : './output',
+  helpers  : {
+    Playwright: {
+      url    : 'http://localhost:8080',
+      show   : false,
+      browser: 'chromium',
+      emulate: devices['iPhone SE'],
+    }
+  },
+  include  : {
+    I: './steps_file.js'
+  },
+  bootstrap: null,
+  mocha    : {},
+  name     : 'mobile',
+  plugins  : {
+    pauseOnFail     : {},
+    retryFailedStep : {
+      enabled: true,
+      retries: 2,
+    },
+    tryTo           : {
+      enabled: true
+    },
+    screenshotOnFail: {
+      enabled: !process.env.CI
+    }
+  }
+};

jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "allowJs": true
+  }
+}

package.json

@@ -17,7 +17,11 @@
     "lint:styles": "stylelint \"src/**/*.scss\"",
     "create-base": "node scripts/blueprint/index.js",
     "commit-msg": "commitlint --edit $1",
-    "pre-commit": "lint-staged && TZ=UTC yarn test --coverage --watchAll=false --ci --bail=1"
+    "pre-commit": "lint-staged && TZ=UTC yarn test --coverage --watchAll=false --ci --bail=1",
+    "codecept:mobile": "codeceptjs -c codecept.mobile.js run --steps",
+    "codecept:mobile:ci": "start-server-and-test 'yarn start' http://localhost:8080 'yarn codecept:mobile'",
+    "codecept:desktop": "codeceptjs -c codecept.desktop.js run --steps",
+    "codecept:desktop:ci": "start-server-and-test 'yarn start' http://localhost:8080 'yarn codecept:desktop'"
   },
   "dependencies": {
     "@types/jwplayer": "^8.2.6",
@@ -58,9 +62,11 @@
     "@types/snowpack-env": "^2.3.3",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
+    "codeceptjs": "^3.0.7",
     "confusing-browser-globals": "^1.0.10",
     "eslint": "^7.24.0",
     "eslint-config-react": "^1.1.7",
+    "eslint-plugin-codeceptjs": "^1.3.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
@@ -70,12 +76,14 @@
     "jest": "^26.6.3",
     "jest-css-modules-transform": "^4.2.1",
     "lint-staged": "^10.5.4",
+    "playwright": "^1.11.1",
     "postcss": "^8.2.10",
     "postcss-cli": "^8.3.1",
     "postcss-import": "^14.0.1",
     "postcss-scss": "^3.0.5",
     "prettier": "^2.2.1",
     "snowpack": "^3.3.4",
+    "start-server-and-test": "^1.12.5",
     "stylelint": "^13.12.0",
     "stylelint-config-recommended-scss": "^4.2.0",
     "stylelint-declaration-strict-value": "^1.7.12",

steps.d.ts

@@ -0,0 +1,11 @@
+/// <reference types='codeceptjs' />
+type steps_file = typeof import('./steps_file.js');
+
+declare namespace CodeceptJS {
+  interface SupportObject { I: I, current: any }
+  interface Methods extends Playwright {}
+  interface I extends ReturnType<steps_file> {}
+  namespace Translation {
+    interface Actions {}
+  }
+}

steps_file.js

@@ -0,0 +1,10 @@
+// in this file you can append custom step methods to 'I' object
+
+module.exports = function() {
+  return actor({
+
+    // Define custom steps here, use 'this' to access default methods of I.
+    // It is recommended to place a general 'login' function here.
+
+  });
+}

test/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["plugin:codeceptjs/recommended"]
+}

test/home_test.js

@@ -0,0 +1,34 @@
+Feature('home');
+
+Scenario('Homepage loads', ({ I }) => {
+  I.amOnPage('http://localhost:8080');
+  I.see('Central Intelligence');
+  I.see('All Movies');
+  I.see('Settings');
+}).tag('@desktop');
+
+Scenario('Homepage loads', ({ I }) => {
+  I.amOnPage('http://localhost:8080');
+  I.see('Central Intelligence');
+  I.see('Drama');
+  I.see('The Spongebob Movie');
+}).tag('@mobile');
+
+Scenario('Header button navigates to playlist screen', ({ I }) => {
+  I.amOnPage('http://localhost:8080');
+  I.see('All Movies');
+  I.click('All Movies');
+  I.amOnPage('http://localhost:8080/p/4fgzPjpv');
+  I.see('Featured Covers');
+}).tag('@desktop');
+
+Scenario('Menu button opens the sidebar', ({ I }) => {
+  I.amOnPage('http://localhost:8080');
+  I.click('[aria-label="open menu"]');
+  I.see('Home');
+  I.see('All Movies');
+  I.see('Settings');
+  I.click('All Movies');
+  I.amOnPage('http://localhost:8080/p/4fgzPjpv');
+  I.see('Featured Covers');
+}).tag('@mobile');