Travis ui tests (#57)

* Prepare travis is tests

* Fix ffmpeg travis source

* Trying xenial

* Move shell scripts

* Upload video assets

* Upload video assets

* Change text input method

* Add ui test docker support

* Fix travis docker build

* Fix asset uploader

* Fix dockerfile

* Update dockerfile

* Change writeText behavior

* Fix type error

* Fix exit codes

* Fix types

* fix upload

* Fix writeText

* Fix argument name

* Add test scenarios

* Enable vnc and change mqtt host

scripts/package-with-docker.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+docker run --rm -ti \
+ --env-file <(env | grep -iE 'DEBUG|NODE_|ELECTRON_|YARN_|NPM_|CI|CIRCLE|TRAVIS|APPVEYOR_|CSC_|_TOKEN|_KEY|AWS_|STRIP|BUILD_') \
+ --env ELECTRON_CACHE="/root/.cache/electron" \
+ --env ELECTRON_BUILDER_CACHE="/root/.cache/electron-builder" \
+ -v ${PWD}:/project \
+ -v ~/.cache/electron:/root/.cache/electron \
+ -v ~/.cache/electron-builder:/root/.cache/electron-builder \
+ electronuserland/builder:wine node_modules/.bin/ts-node package.ts $@

scripts/prepare-release.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+set -e
+
+ORIGINAL_DIR=`pwd`
+DIR=build/clean
+
+rm -rf "$DIR" || echo "Directory did not exist"
+mkdir -p "$DIR"
+
+git clone .git "$DIR"
+cd $DIR
+
+# App
+cd app
+  yarn
+cd ..
+
+# Build
+yarn
+yarn build
+rm -rf node_modules
+yarn install --production
+
+rm -rf app/node_modules
+
+cd "$ORIGINAL_DIR"

scripts/prepareVideo.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+cp app.mp4 original.mp4
+# The video starts with a few blank frames, we want to know when the stop
+ffprobe -f lavfi -i "movie=app.mp4,blackdetect[out0]" -show_entries tags=lavfi.black_start,lavfi.black_end -of default=nw=1 -v quiet > ffmpeg_info
+END_OF_BLACK=`cat ffmpeg_info | grep end | head -n1 | cut -d'=' -f2`
+
+# Trim black frames at start
+ffmpeg -ss $END_OF_BLACK -i app.mp4 app2.mp4
+mv app2.mp4 app.mp4
+
+# Generate gif palette
+ffmpeg -y -i app.mp4 -vf fps=10,scale=720:-1:flags=lanczos,palettegen palette.png
+
+# Create gif
+ffmpeg -i app.mp4 -i palette.png -filter_complex "fps=10,scale=720:-1:flags=lanczos[x];[x][1:v]paletteuse" app.gif
+
+# Clean up
+rm ffmpeg_info palette.png
+
+mv app.mp4 ui-test.mp4
+mv app.gif ui-test.gif

scripts/uiTests.sh

@@ -0,0 +1,51 @@
+#!/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
+}
+
+trap finish EXIT
+
+DIMENSIONS="1024x700"
+SCR=99
+# Start new window manager
+Xvfb :$SCR -screen 0 "$DIMENSIONS"x24 -ac &
+export PID_XVFB=$!
+sleep 2
+
+# Debug with VNC
+while [ "$TEST_EXIT_CODE" = "" ]; do x11vnc -passwd "bierbier" -display :$SCR; done &
+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
+
+# 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
+
+# Start tests
+node dist/src/spec/webdriverio.js
+TEST_EXIT_CODE=$?
+echo "Webriver exitet with $TEST_EXIT_CODE"
+
+# Stop recording
+tmux send-keys -t record q
+
+# Ensure video is written
+sleep 5
+
+# Process the video
+./scripts/prepareVideo.sh
+
+exit $TEST_EXIT_CODE

scripts/uploadVideoAsset.ts

@@ -0,0 +1,86 @@
+#!node_modules/.bin/ts-node
+import axios from 'axios'
+import * as fs from 'fs'
+import * as path from 'path'
+import * as mime from 'mime'
+
+const githubToken = process.env.GH_TOKEN
+
+async function tagUrl(tag: string): Promise<string | undefined> {
+  const response = await axios.get(`https://api.github.com/repos/thomasnordquist/mqtt-explorer/releases?access_token=${githubToken}`)
+  const tagRelease = response.data.find((release: any) => release.tag_name === tag)
+
+  return tagRelease ? cleanUploadUrl(tagRelease.upload_url) : undefined
+}
+
+async function createDraft(tag: string) {
+  console.log('create draft')
+
+  const response = await axios({
+    method: 'post',
+    url: `https://api.github.com/repos/thomasnordquist/mqtt-explorer/releases?access_token=${githubToken}`,
+    data: {
+      tag_name: tag,
+      name: tag.slice(1),
+      draft: true,
+    },
+  })
+
+  return cleanUploadUrl(response.data.upload_url)
+}
+
+function cleanUploadUrl(url: string) {
+  return url.match(/(.*){/)![1]
+}
+
+async function uploadAsset() {
+  const tag: string | undefined = process.env.GIT_TAG
+  const files = process.argv.slice(2)
+
+  if (!tag || files.length === 0) {
+    console.log('Nothing to do')
+    return
+  }
+
+  let uploadUrl: string | undefined
+  try {
+    uploadUrl = await tagUrl(tag)
+    if (!uploadUrl) {
+      console.log('tag does not exist')
+      try {
+        uploadUrl = await createDraft(tag)
+      } catch (error) {
+        console.error('failed to create draft', error.stack)
+        process.exit(1)
+      }
+    }
+  } catch (error) {
+    console.error('failed to find tag release', error.stack)
+    process.exit(1)
+  }
+
+  if (uploadUrl) {
+    console.log(uploadUrl)
+    for (const file of files) {
+      console.log('uploading file', file)
+      await uploadFile(uploadUrl, file)
+      console.log('upload completed')
+    }
+  }
+}
+
+async function uploadFile(uploadUrl: string, file: string) {
+  const data = fs.readFileSync(file)
+  const mimeType = mime.getType(path.extname(file))
+
+  return await axios({
+    data,
+    method: 'post',
+    url: `${uploadUrl}?name=${path.basename(file)}&access_token=${githubToken}`,
+    headers: {
+      'Content-Type': mimeType,
+    },
+  })
+}
+
+uploadAsset()