Improve ui-test video

src/spec/demoVideo.ts

@@ -12,7 +12,6 @@ import { disconnect } from './scenarios/disconnect'
 import { publishTopic } from './scenarios/publishTopic'
 import { SceneBuilder } from './SceneBuilder'
 import { showAdvancedConnectionSettings } from './scenarios/showAdvancedConnectionSettings'
-import { showJsonFormatting } from './scenarios/showJsonFormatting'
 import { showJsonPreview } from './scenarios/showJsonPreview'
 import { showMenu } from './scenarios/showMenu'
 import { showNumericPlot } from './scenarios/showNumericPlot'
@@ -59,11 +58,11 @@ async function doStuff() {
   const scenes = new SceneBuilder()
   await scenes.record('connect', async () => {
     await connectTo('127.0.0.1', browser)
-    await sleep(2000)
+    await sleep(1000)
   })
 
   await scenes.record('numeric_plots', async () => {
-    await showText('Plot topic history', 2000, browser)
+    await showText('Plot topic history', 1500, browser)
     await showNumericPlot(browser)
     await sleep(2000)
   })
@@ -80,20 +79,14 @@ async function doStuff() {
   })
 
   await scenes.record('publish_topic', async () => {
-    await showText('Publish topics', 2000, browser, 'top')
+    await showText('Publish topics', 1500, browser, 'top')
     await clickOnHistory(browser)
     await publishTopic(browser)
     await sleep(1000)
   })
 
-  await scenes.record('json_formatting_publish', async () => {
-    await showText('Write JSON with ease', 2000, browser, 'top')
-    await showJsonFormatting(browser)
-    await sleep(1000)
-  })
-
   await scenes.record('clipboard', async () => {
-    await showText('Copy to Clipboard', 2000, browser)
+    await showText('Copy to Clipboard', 1500, browser)
     await copyTopicToClipboard(browser)
     await hideText(browser)
     await copyValueToClipboard(browser)
@@ -112,25 +105,25 @@ async function doStuff() {
 
   await scenes.record('delete_retained_topics', async () => {
     await hideText(browser)
-    await showText('Delete retained topics', 0, browser)
+    await showText('Delete retained topics', 5000, browser)
     await clearOldTopics(browser)
     await hideText(browser)
   })
 
   await scenes.record('settings', async () => {
-    await showText('Display Options', 2000, browser)
+    await showText('Settings', 1500, browser)
     await showMenu(browser)
   })
 
   await scenes.record('customize_subscriptions', async () => {
     await sleep(2000)
     await disconnect(browser)
-    await showText('Customize Subscriptions', 1000, browser, 'top')
+    await showText('Customize Subscriptions', 1500, browser, 'top')
     await showAdvancedConnectionSettings(browser)
   })
 
   await scenes.record('keyboard_shortcuts', async () => {
-    await showText('Keyboard shortcuts', 1750, browser, 'middle')
+    await showText('Keyboard shortcuts', 1500, browser, 'middle')
     await sleep(1750)
     await showZoomLevel(browser)
   })

src/spec/mock-mqtt.ts

@@ -52,7 +52,9 @@ function generateData(client: mqtt.MqttClient) {
     retain: true,
     qos: 0,
   })
-  intervals.push(setInterval(() => client.publish('livingroom/temperature', temperature()), 1000))
+  intervals.push(
+    setInterval(() => client.publish('livingroom/temperature', temperature(), { retain: true, qos: 0 }), 1000)
+  )
   intervals.push(setInterval(() => client.publish('livingroom/humidity', temperature(60, -2, 0)), 1000))
 
   client.publish('livingroom/lamp-1/state', 'on', { retain: true, qos: 0 })
@@ -72,7 +74,7 @@ function generateData(client: mqtt.MqttClient) {
     if (topic === 'kitchen/lamp/set') {
       setTimeout(
         () =>
-          client.publish('kitchen/lamp/state', payload, {
+          client.publish('kitchen/lamp/state', JSON.parse(payload.toString()).state, {
             retain: true,
             qos: 0,
           }),
@@ -96,8 +98,12 @@ function generateData(client: mqtt.MqttClient) {
     }, 1500)
   )
 
-  intervals.push(setInterval(() => client.publish('kitchen/temperature', temperature()), 1500))
-  intervals.push(setInterval(() => client.publish('kitchen/humidity', temperature(60, -5, 0)), 1800))
+  intervals.push(
+    setInterval(() => client.publish('kitchen/temperature', temperature(), { retain: true, qos: 0 }), 1500)
+  )
+  intervals.push(
+    setInterval(() => client.publish('kitchen/humidity', temperature(60, -5, 0), { retain: true, qos: 0 }), 1800)
+  )
 
   client.publish('garden/pump/state', 'off', { retain: true, qos: 0 })
   client.publish('garden/water/level', '70%', { retain: true, qos: 0 })

src/spec/scenarios/publishTopic.ts

@@ -17,15 +17,27 @@ export async function publishTopic(browser: Browser) {
   await writeText('set', browser, 300)
 
   const payloadInput = await browser.$('//*[contains(@class, "ace_text-input")]')
-  await payloadInput.setValue('o')
-  await sleep(300)
-  await payloadInput.setValue('n')
-  await sleep(700)
+  await writeTextPayload(payloadInput, '{"action": "setState", "state": "on" }')
+
+  await sleep(500)
+  const formatJsonButton = await browser.$('#sidebar-publish-format-json')
+  await clickOn(formatJsonButton, browser)
 
   const publishButton = await browser.$('#publish-button')
   await moveToCenterOfElement(publishButton, browser)
   await showText('Lamp turns on', 1000, browser, 'top')
   await sleep(500)
 
   await clickOn(publishButton, browser)
+
+  const sidebarDrawer = await browser.$('#Sidebar')
+  await sidebarDrawer.scrollIntoView()
+}
+
+async function writeTextPayload(payloadInput: any, text: string) {
+  const chars = text.split('')
+  for (const char of chars) {
+    await payloadInput.setValue(char)
+    await sleep(10)
+  }
 }