Rework demo video

src/spec/KeyCode.ts

@@ -0,0 +1,3 @@
+export const Control = '\uE009'
+export const Unknown = '\uE000'
+export const Plus = '\uE025'

src/spec/mock-mqtt.ts

@@ -87,16 +87,19 @@ function generateData(client: mqtt.MqttClient) {
   let state = true
   intervals.push(setInterval(() => {
     state = !state
+    const js = {
+      tags:{
+        entityId: 33512,
+        entityType: 'person',
+        host: 'd44ad81e10f9',
+        server: 'http://localhost/dataActuality',
+        status: state ? 'live' : 'inactive',
+      },
+      timestamp: Date.now(),
+    }
     client.publish(
-      'actuality/showcase', `{
-        "tags":{
-          "entityId": 33512,
-          "entityType":"person",
-          "host":"d44ad81e10f9",
-          "server":" 'http://localhost/dataActuality',
-          "status":"${state ? 'live' : 'inactive'}"},
-        "timestamp":${Date.now()}
-      }`.replace(/\s/g, ''),
+      'actuality/showcase',
+      JSON.stringify(js),
       { retain: true, qos: 0 },
     )
   }, 2102))

src/spec/scenarios/connect.ts

@@ -1,4 +1,4 @@
-import { clickOn, sleep, writeText } from '../util'
+import { clickOn, writeTextToInput } from '../util'
 import { Browser } from 'webdriverio'
 
 export async function connectTo(host: string, browser: Browser<void>) {
@@ -9,12 +9,3 @@ export async function connectTo(host: string, browser: Browser<void>) {
   const connectButton = await browser.$('//button/span[contains(text(),"Connect")]')
   clickOn(connectButton, browser)
 }
-
-async function writeTextToInput(name: string, text: string, browser: Browser<void>, wait: boolean = true) {
-  const input = await browser.$(`//label[contains(text(), "${name}")]/..//input`)
-  await clickOn(input, browser, 1)
-  wait && await sleep(500)
-  input.clearValue()
-  wait && await sleep(300)
-  await writeText(text, browser)
-}

src/spec/scenarios/copyTopicToClipboard.ts

@@ -1,4 +1,4 @@
-import { clickOn, sleep, writeText, expandTopic } from '../util'
+import { clickOn } from '../util'
 import { Browser } from 'webdriverio'
 
 export async function copyTopicToClipboard(browser: Browser<void>) {

src/spec/scenarios/showAdvancedConnectionSettings.ts

@@ -0,0 +1,29 @@
+import { clickOn, writeTextToInput, sleep } from '../util'
+import { Browser } from 'webdriverio'
+
+export async function showAdvancedConnectionSettings(browser: Browser<void>) {
+  const advancedSettingsButton = await browser.$('//button/span[contains(text(),"Advanced")]')
+  const addButton = await browser.$('//button/span[contains(text(),"Add")]')
+
+  await clickOn(advancedSettingsButton, browser)
+  await writeTextToInput('Subscription', 'garden/#', browser, false)
+  await clickOn(addButton, browser)
+
+  await writeTextToInput('Subscription', 'livingroom/#', browser, false)
+  await clickOn(addButton, browser)
+
+  await deleteFirstSubscribedTopic(browser)
+  await deleteFirstSubscribedTopic(browser)
+  await sleep(1000)
+
+  const backButton = await browser.$('//button/span[contains(text(),"Back")]')
+  await clickOn(backButton, browser)
+
+  const connectButton = await browser.$('//button/span[contains(text(),"Connect")]')
+  await clickOn(connectButton, browser)
+}
+
+async function deleteFirstSubscribedTopic(browser: Browser<void>) {
+  const deleteButton = await browser.$('//*[contains(@class,"topicList")]//button')
+  await clickOn(deleteButton, browser)
+}

src/spec/scenarios/showJsonFormatting.ts

@@ -17,6 +17,9 @@ export async function showJsonFormatting(browser: Browser<void>) {
   await sleep(300)
   await clickOn(formatJsonButton, browser)
   await sleep(1200)
+
+  const sidebarDrawer = await browser.$('//*[contains(@class, "Sidebar")]')
+  await sidebarDrawer.scrollIntoView()
 }
 
 async function writeTextPayload(payloadInput: any, text: string) {

src/spec/scenarios/showJsonPreview.ts

@@ -1,5 +1,5 @@
-import { clickOn, sleep, writeText, expandTopic } from '../util'
 import { Browser } from 'webdriverio'
+import { expandTopic, sleep } from '../util'
 
 export async function showJsonPreview(browser: Browser<void>) {
   await expandTopic('actuality/showcase', browser)

src/spec/scenarios/showZoomLevel.ts

@@ -0,0 +1,11 @@
+import { sleep, showKeys, showText } from '../util'
+import { Browser } from 'webdriverio'
+
+export async function showZoomLevel(browser: Browser<void>) {
+  await showKeys('Zoom in', 2000, browser, 'top', ['Ctrl', '+'])
+  await sleep(2000)
+  await showKeys('Zoom out', 2000, browser, 'middle', ['Ctrl', '-'])
+  await sleep(2000)
+  await showKeys('Reset zoom level', 2000, browser, 'bottom', ['Ctrl', 'Zero'])
+  await sleep(2000)
+}

src/spec/util/index.ts

@@ -1,4 +1,4 @@
-import { Element, Browser } from 'webdriverio'
+import { Browser, Element } from 'webdriverio'
 export { expandTopic } from './expandTopic'
 
 export function sleep(ms: number, required = false) {
@@ -26,47 +26,28 @@ export async function delteTextWithBackspaces(element: Element<void>, browser: B
   }
 }
 
+export async function writeTextToInput(name: string, text: string, browser: Browser<void>, wait: boolean = true) {
+  const input = await browser.$(`//label[contains(text(), "${name}")]/..//input`)
+  await clickOn(input, browser, 1)
+  wait && await sleep(500)
+  input.clearValue()
+  wait && await sleep(300)
+  await writeText(text, browser)
+}
+
 export async function moveToCenterOfElement(element: Element<void>, browser: Browser<void>) {
   const { x, y } = await element.getLocation()
   const { width, height } = await element.getSize()
 
-  const js = `{
-    const targetX = ${x + width / 2}
-    const targetY = ${y + height / 2}
-    const duration = 500
+  const targetX = x + width / 2
+  const targetY = y + height / 2
 
-    const maxStepSize = 10
-    const e = document.getElementById("bier")
-    const top = parseFloat(e.style.top)
-    const left = parseFloat(e.style.left)
-    const deltaY = targetY - top
-    const deltaX = targetX - left
+  const duration = 500
 
-    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
-    const steps = Math.ceil(distance / maxStepSize)
-
-    const stepX = deltaX / steps
-    const stepY = deltaY / steps
-    let currentStep = 0
-    function getCloser() {
-      e.style.left = String(left + (stepX * currentStep)) + 'px'
-      e.style.top = String(top + (stepY * currentStep)) + 'px'
-      if (currentStep < steps) {
-        setTimeout(() => {
-          currentStep += 1
-          if (currentStep === steps) {
-            e.style.left = String(targetX + 5) + 'px'
-            e.style.top = String(targetY + 1) + 'px'
-          } else {
-            getCloser()
-          }
-        }, duration/steps)
-      }
-    }
-	  getCloser()
-  }`
+  const js = `window.demo.moveMouse(${targetX}, ${targetY}, ${duration});`
   await browser.execute(js)
-  await sleep(550, true)
+  await sleep(duration + 500, true)
+
   await element.moveTo()
 }
 
@@ -84,47 +65,25 @@ export async function clickOn(element: Element<void>, browser: Browser<void>, cl
 }
 
 export async function createFakeMousePointer(browser: Browser<void>) {
-  const addCursorImage = 'const i=document.createElement("img");'
-  + 'i.src="../cursor.png";'
-  + 'i.width="32";'
-  + 'i.height="32";'
-  + 'i.id="bier";'
-  + 'i.style="position: fixed; z-index:10000000; filter: invert(100%);left: 0px; top: 0px;";'
-  + 'document.body.appendChild(i)'
+  const js = 'window.demo.enableMouse();'
 
-  await browser.execute(addCursorImage)
+  await browser.execute(js)
 }
 
-export async function showText(text: string, duration: number = 0, browser: Browser<void>, location: 'top' | 'bottom' | 'middle' = 'bottom') {
-  const positions = {
-    top: 0,
-    bottom: -65,
-    middle: -32,
-  }
-  const js = `
-    const postition = "${positions[location]}vh"
-    let previousDiv = document.getElementById('tests-text-overlay')
-    previousDiv && previousDiv.remove()
-    let div = document.createElement('div')
-    div.id = "tests-text-overlay"
-    div.style = "background-color: rgba(0, 0, 0, 0.8);position: fixed;left: 5vw;z-index: 1000000;margin: 30vw auto 50vw;border-radius: 16px;right: 5vw;bottom: "+ postition +";"
-    let div2 = document.createElement('div')
-    div2.style = "text-align: center;font-size: 4em;color: white;"
-    div2.innerHTML = \`${text}\`
-    div.appendChild(div2)
-    document.body.appendChild(div)
-    if (${duration} > 0) {
-      setTimeout(() => div.remove(), ${duration})
-    }
-  `
+export async function showText(text: string, duration: number = 0, browser: Browser<void>, location: 'top' | 'bottom' | 'middle' = 'bottom', keys = []) {
+  const js = `window.demo.showMessage('${text}', '${location}', ${duration});`
+
+  browser.execute(js)
+}
+
+export async function showKeys(text: string, duration: number = 0, browser: Browser<void>, location: 'top' | 'bottom' | 'middle' = 'bottom', keys: string[] = []) {
+  const js = `window.demo.showMessage('${text}', '${location}', ${duration}, ${JSON.stringify(keys)});`
+
   browser.execute(js)
 }
 
 export async function hideText(browser: Browser<void>) {
-  const js = `
-    let previousDiv = document.getElementById('tests-text-overlay')
-    previousDiv && previousDiv.remove()
-  `
+  const js = 'window.demo.hideMessage();'
   browser.execute(js)
   await sleep(600)
 }

src/spec/webdriverio.ts

@@ -3,13 +3,6 @@ import * as webdriverio from 'webdriverio'
 import mockMqtt, { stop } from './mock-mqtt'
 import { clearOldTopics } from './scenarios/clearOldTopics'
 import { clearSearch, searchTree } from './scenarios/searchTree'
-import {
-  clickOnHistory,
-  createFakeMousePointer,
-  hideText,
-  showText,
-  sleep,
-} from './util'
 import { connectTo } from './scenarios/connect'
 import { copyTopicToClipboard } from './scenarios/copyTopicToClipboard'
 import { copyValueToClipboard } from './scenarios/copyValueToClipboard'
@@ -20,6 +13,15 @@ import { showJsonPreview } from './scenarios/showJsonPreview'
 import { showMenu } from './scenarios/showMenu'
 import { showNumericPlot } from './scenarios/showNumericPlot'
 import { showOffDiffCapability } from './scenarios/showOffDiffCapability'
+import { showZoomLevel } from './scenarios/showZoomLevel'
+import { showAdvancedConnectionSettings } from './scenarios/showAdvancedConnectionSettings'
+import {
+  clickOnHistory,
+  createFakeMousePointer,
+  hideText,
+  showText,
+  sleep,
+} from './util'
 
 process.on('unhandledRejection', (error: Error) => {
   console.error('unhandledRejection', error.message, error.stack)
@@ -51,6 +53,7 @@ async function doStuff() {
   await createFakeMousePointer(browser)
 
   await connectTo('127.0.0.1', browser)
+
   await sleep(1000)
 
   await sleep(1000)
@@ -103,10 +106,18 @@ async function doStuff() {
 
   await sleep(2000)
   await disconnect(browser)
+
+  await showText('Customize Subscriptions', 3000, browser, 'top')
+  await showAdvancedConnectionSettings(browser)
+
+  await showText('Keyboard shortcuts', 1750, browser, 'middle')
+  await sleep(1750)
+  await showZoomLevel(browser)
+
+  await showText('The End', 3000, browser, 'middle')
   await sleep(3000)
 
   browser.closeWindow()
-
   stop()
 }