Merge pull request #773 from thomasnordquist/chore/replace-spectron-with-playwright

Chore/replace spectron with playwright

Author: bj00rn

.travis.yml

@@ -25,7 +25,7 @@ services:
   - docker
 
 install:
-  - yarn install
+  - yarn install --frozen-lockfile
   - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get update && sudo apt-get -y install snap squashfs-tools && sudo snap install snapcraft --classic; fi;
 
 script:

app/src/components/Tree/TreeNode/TreeNodeTitle.tsx

@@ -19,7 +19,7 @@ class TreeNodeTitle extends React.PureComponent<TreeNodeProps, {}> {
     const name = this.props.name || (this.props.treeNode.sourceEdge && this.props.treeNode.sourceEdge.name)
 
     return (
-      <span key="edge" className={this.props.classes.sourceEdge}>
+      <span key="edge" className={this.props.classes.sourceEdge} data-test-topic={name}>
         {name}
       </span>
     )

app/webpack.config.js

@@ -1,6 +1,6 @@
 // const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const webpack = require('webpack')
 
 module.exports = {
   entry: {
@@ -63,13 +63,8 @@ module.exports = {
         use: ['style-loader', 'css-loader'],
       },
       {
-        test: /\.(png|jpg|gif)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {},
-          },
-        ],
+        test: /\.(png|jpg|gif)$/i,
+        type: 'asset/resource',
       },
       // {
       //   test: /\.node$/,
@@ -101,4 +96,4 @@ module.exports = {
     // "react": "React",
     // "react-dom": "ReactDOM"
   },
-};
+}

appveyor.yml

@@ -10,7 +10,7 @@ install:
   - ps: Install-Product node 19
 
 build_script:
-  - yarn
+  - yarn install --frozen-lockfile
   - yarn build
   - yarn prepare-release
   - yarn package appx

docker/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:11-stretch
+FROM node:19.8.1-bullseye-slim
 
 RUN DEBIAN_FRONTEND="noninteractive" apt-get update \
   && apt-get install -y --no-install-recommends nano ffmpeg xvfb git-core tmux locales mosquitto x11vnc

docker/cloneBuildAndTest.sh

@@ -5,7 +5,7 @@ git clone https://github.com/thomasnordquist/MQTT-Explorer.git /app
 cd /app
 git checkout travis-ui-tests
 
-yarn
+yarn install --frozen-lockfile
 yarn build
 
 yarn ui-test

package.json

@@ -16,9 +16,11 @@
     "dev:app": "cd app && npm run dev",
     "dev:electron": "tsc && electron . --development",
     "lint": "npm-run-all --parallel lint:prettier lint:tslint",
+    "lint:fix": "npm-run-all lint:tslint:fix lint:prettier:fix",
     "lint:prettier": "prettier --check \"**/*.ts{x,}\"",
     "lint:prettier:fix": "prettier --write \"**/*.ts{x,}\"",
     "lint:tslint": "tslint -p ./",
+    "lint:tslint:fix": "tslint -p ./ --fix",
     "lint:spellcheck": "cspell -e ./build -e \"node_modules\" \"**/*.ts{x,}\"",
     "build": "tsc && cd app && yarn run build && cd ..",
     "prepare-release": "ts-node scripts/prepare-release.ts",
@@ -88,23 +90,22 @@
     "builder-util-runtime": "^9",
     "chai": "^4.2.0",
     "cspell": "^4.0.28",
-    "electron": "29.1.1",
+    "electron": "29.2.0",
     "electron-builder": "^24.13.3",
     "mocha": "^10.4.0",
     "mustache": "4",
     "npm-run-all": "^4.1.5",
     "nyc": "15",
+    "playwright": "^1.43.0",
     "prettier": "^3.2.5",
     "redux-thunk": "^2.3.0",
     "source-map-support": "^0.5.9",
-    "spectron": "19",
     "ts-node": "^10.9.2",
     "tslint": "^6.1.3",
     "tslint-config-airbnb": "^5.11.2",
     "tslint-react": "^5.0.0",
     "tslint-react-recommended": "^1.0.15",
-    "typescript": "^4.5.5",
-    "webdriverio": "7.16"
+    "typescript": "^4.5.5"
   },
   "dependencies": {
     "about-window": "^1.12.1",

scripts/prepare-release.ts

@@ -17,18 +17,18 @@ async function prepareRelease() {
 
   // Install app dependencies
   chdir('app')
-  await exec('yarn')
+  await exec('yarn', ['install', '--frozen-lockfile'])
   chdir('..')
 
   // Install electron dependencies
-  await exec('yarn')
+  await exec('yarn', ['install', '--frozen-lockfile'])
 
   // Build App and Electron backend
   await exec('yarn', ['build'])
 
   // Clean up
   await fs.remove('node_modules')
-  await exec('yarn', ['install', '--production']) // Do not clean up, electron version detection will fail otherwise
+  await exec('yarn', ['install', '--production', '--frozen-lockfile']) // Do not clean up, electron version detection will fail otherwise
   await fs.remove(path.join('app', 'node_modules'))
 
   chdir(originalDir)

scripts/uiTests.sh

@@ -1,10 +1,25 @@
 #!/bin/bash
-
 function finish {
-  echo "Exiting, cleaning up"
-  tmux send-keys -t record q || echo "No tmux was running"
-  #echo kill $PID_XVFB $PID_CHROMEDRIVER $PID_MOSQUITTO
-  #kill $PID_XVFB $PID_CHROMEDRIVER $PID_MOSQUITTO
+  set +e
+  echo "Exiting, cleaning up.."
+
+  echo "Stopping TMUX session (record).."
+  tmux kill-session -t record || echo "Already stopped"
+
+  if [[ ! -z "$PID_MOSQUITTO" ]]; then
+    echo "Stopping mosquitto ($PID_MOSQUITTO).."
+    kill "$PID_MOSQUITTO" || echo "Already stopped"
+  fi
+
+  if [[ ! -z "$PID_VNC" ]]; then
+    echo "Stopping VNC ($PID_VNC).."
+    kill "$PID_VNC" || echo "Already stopped"
+  fi
+
+  if [[ ! -z "$PID_XVFB" ]]; then
+    echo "Stopping XVFB ($PID_XVFB).."
+    kill "$PID_XVFB" || echo "Already stopped"
+  fi
 }
 
 trap finish EXIT
@@ -18,28 +33,25 @@ export PID_XVFB=$!
 sleep 2
 
 # Debug with VNC
-while [ "$TEST_EXIT_CODE" = "" ]; do x11vnc -localhost -passwd "bierbier" -display :$SCR; done &
+x11vnc -localhost -rfbport 5900 -passwd "bierbier" -display :$SCR & 
 export PID_VNC=$!
 
 # Start mqtt broker
 mosquitto &
 export PID_MOSQUITTO=$!
 
-DISPLAY=:$SCR ./node_modules/.bin/chromedriver --url-base=wd/hub --port=9515 &
-export PID_CHROMEDRIVER=$!
-sleep 2
-
 # Delete old video
-rm ./app.mp4 || echo no need to delete ./app.mp4
+rm -f ./app*.mp4
+rm -f ./qrawvideorgb24.yuv
 
 # Start recoring in tmux
-#tmux new-session -d -s record ffmpeg -f x11grab -draw_mouse 0 -video_size $DIMENSIONS -i :$SCR -codec:v libx264 -r 20 ./app.mp4
+# tmux new-session -d -s record ffmpeg -f x11grab -draw_mouse 0 -video_size $DIMENSIONS -i :$SCR -codec:v libx264 -r 20 ./app.mp4
 tmux new-session -d -s record ffmpeg -f x11grab -draw_mouse 0 -video_size $DIMENSIONS -i :$SCR -r 20 -vcodec rawvideo -pix_fmt yuv420p qrawvideorgb24.yuv
 
 # Start tests
-node dist/src/spec/demoVideo.js
+DISPLAY=:$SCR node dist/src/spec/demoVideo.js
 TEST_EXIT_CODE=$?
-echo "Webriver exitet with $TEST_EXIT_CODE"
+echo "Test script exited with $TEST_EXIT_CODE"
 
 # Stop recording
 tmux send-keys -t record q