Merge pull request #37 from Videodock/feat/codeceptjs

feat(project): initialize CodeceptJS tests and fix checks

.github/workflows/codeceptjs.yml

@@ -0,0 +1,30 @@
+name: CodeceptJS
+
+on: [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 }}
+      - name: Install dependencies
+        run: |
+          yarn
+          npm install wait-on -g
+      - name: Start dev server
+        run: yarn start &
+      - name: Run tests
+        run: wait-on http://localhost:8080 && yarn codecept:${{ matrix.config }}
+        env:
+          CI: true

.github/workflows/lhci.yml

@@ -1,15 +1,15 @@
-name: lhci
-on: [push]
-jobs: 
+name: Lighthouse
+on: [pull_request]
+jobs:
   lhci:
     name: Lighthouse
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 14.x
       - name: yarn install, build
         run: |
           yarn install
@@ -19,4 +19,4 @@ jobs:
           sudo yarn global add @lhci/cli@0.7.x http-server
       - name: run Lighthouse CI
         run: |
-          lhci autorun
+          lhci autorun

.github/workflows/main.yml

@@ -1,16 +1,15 @@
 name: Jest
 
-on: [push]
+on: [pull_request]
 
 jobs:
   build:
 
-    runs-on: ubuntu-latest
+    runs-on: macos-latest
 
     strategy:
       matrix:
-        node-version: [12.x]
-        os: [ubuntu-latest, windows-latest, macOS-latest]
+        node-version: [14.x]
 
     steps:
       - uses: actions/checkout@v1

.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

@@ -9,15 +9,17 @@
     "prepare": "husky install",
     "start": "snowpack dev",
     "build": "snowpack build",
-    "test": "npx jest",
-    "test-watch": "npx jest --watch",
-    "test-coverage": "npx jest --coverage",
+    "test": "jest",
+    "test-watch": "jest --watch",
+    "test-coverage": "jest --coverage",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
     "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:desktop": "codeceptjs -c codecept.desktop.js run --steps"
   },
   "dependencies": {
     "@types/jwplayer": "^8.2.6",
@@ -58,9 +60,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 +74,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');