Update ui-test video

src/spec/mock-mqtt.ts

@@ -21,8 +21,8 @@ function connectMqtt(): Promise<mqtt.MqttClient> {
   })
 }
 
-function temperature(base = 18, sineCoefficient = 2, offset = 0) {
-  const temp = base + Math.sin(Date.now() / 1000 / 5 + offset) * sineCoefficient + Math.random()
+function temperature(base = 18, sineCoefficient = 2, offset = 0, speed = 1) {
+  const temp = base + Math.sin((Date.now() * speed) / 1000 / 5 + offset) * sineCoefficient + Math.random()
 
   return String(Math.round(temp * 100) / 100)
 }
@@ -81,6 +81,21 @@ function generateData(client: mqtt.MqttClient) {
     }
   })
 
+  const coffeeMaker = {
+    heater: 'on',
+    temperature: 92.5,
+    waterLevel: 0.5,
+    update: new Date(),
+  }
+  intervals.push(
+    setInterval(() => {
+      const newTemp = parseFloat(temperature(90.3, -5, 0, 3))
+      coffeeMaker.heater = newTemp > coffeeMaker.temperature ? 'on' : 'off'
+      coffeeMaker.temperature = newTemp
+      client.publish('kitchen/coffee_maker', JSON.stringify(coffeeMaker), { retain: true, qos: 2 })
+    }, 1500)
+  )
+
   intervals.push(setInterval(() => client.publish('kitchen/temperature', temperature()), 1500))
   intervals.push(setInterval(() => client.publish('kitchen/humidity', temperature(60, -5, 0)), 1800))
 

src/spec/scenarios/connect.ts

@@ -1,10 +1,8 @@
 import { Browser, Element } from 'webdriverio'
-import { clickOn, writeTextToInput } from '../util'
+import { clickOn, setTextInInput } from '../util'
 
 export async function connectTo(host: string, browser: Browser) {
-  await writeTextToInput('Host', host, browser)
-  await writeTextToInput('Username', 'thomas', browser, false)
-  await writeTextToInput('Password', 'bierbier', browser, false)
+  await setTextInInput('Host', host, browser)
 
   await browser.saveScreenshot('screen1.png')
 

src/spec/scenarios/showAdvancedConnectionSettings.ts

@@ -1,15 +1,15 @@
 import { Browser, Element } from 'webdriverio'
-import { clickOn, sleep, writeTextToInput } from '../util'
+import { clickOn, sleep, setTextInInput } from '../util'
 
 export async function showAdvancedConnectionSettings(browser: Browser) {
   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 setTextInInput('Subscription', 'garden/#', browser)
   await clickOn(addButton, browser)
 
-  await writeTextToInput('Subscription', 'livingroom/#', browser, false)
+  await setTextInInput('Subscription', 'livingroom/#', browser)
   await clickOn(addButton, browser)
 
   await deleteFirstSubscribedTopic(browser)

src/spec/scenarios/showJsonFormatting.ts

@@ -12,6 +12,10 @@ export async function showJsonFormatting(browser: Browser) {
   await sleep(200)
   await browser.keys(['\uE003']) // Backspace
   await sleep(200)
+  await browser.keys(['\uE009', 'A']) // Ctrl + A
+  await browser.keys(['\uE000']) // End keyboard modifier
+  await browser.keys(['\uE003']) // Backspace
+  await sleep(200)
   await writeTextPayload(payloadInput, '{"action": "setState", "state": "on" }')
   await sleep(300)
   await clickOn(formatJsonButton, browser)

src/spec/scenarios/showNumericPlot.ts

@@ -1,7 +1,39 @@
 import { Browser, Element } from 'webdriverio'
-import { clickOn, clickOnHistory, expandTopic, sleep, writeText } from '../util'
+import { moveToCenterOfElement, clickOn, clickOnHistory, expandTopic, sleep, writeText } from '../util'
 
 export async function showNumericPlot(browser: Browser) {
+  await expandTopic('kitchen/coffee_maker', browser)
+  let heater = await valuePreviewGuttersShowChartIcon('heater', browser)
+  await moveToCenterOfElement(heater, browser)
+  await sleep(1000)
+  // Refocus
+  heater = await valuePreviewGuttersShowChartIcon('heater', browser)
+  await heater.click()
+
+  let temperature = await valuePreviewGuttersShowChartIcon('temperature', browser)
+  await moveToCenterOfElement(temperature, browser)
+  temperature = await valuePreviewGuttersShowChartIcon('temperature', browser)
+  await temperature.click()
+
+  await sleep(1000)
+  await chartSettings('heater', browser)
+  await clickOnMenuPoint('Curve interpolation', browser)
+  await clickOnMenuPoint('step after', browser)
+  await clickAway('heater', browser)
+
+  await chartSettings('temperature', browser)
+  await clickOnMenuPoint('Curve interpolation', browser)
+  await clickOnMenuPoint('cubic basis spline', browser)
+  await clickAway('temperature', browser)
+  await sleep(2500)
+
+  await browser.saveScreenshot('screen_chart_panel.png')
+
+  await removeChart('heater', browser)
+  await sleep(750)
+  await removeChart('temperature', browser)
+  await sleep(750)
+
   await expandTopic('livingroom/temperature', browser)
 
   await clickOnHistory(browser)
@@ -9,3 +41,36 @@ export async function showNumericPlot(browser: Browser) {
   await sleep(1000)
   await expandTopic('livingroom/humidity', browser)
 }
+
+async function valuePreviewGuttersShowChartIcon(name: string, browser: Browser) {
+  for (let retries = 0; retries < 2; retries += 1) {
+    try {
+      return await browser.$(`//*[contains(@data-test-type, "ShowChart")][contains(@data-test, "${name}")]`)
+    } catch {
+      // ignore
+    }
+  }
+  return await browser.$(`//*[contains(@data-test-type, "ShowChart")][contains(@data-test, "${name}")]`)
+}
+
+async function chartSettings(name: string, browser: Browser) {
+  const settings = await browser.$(`//*[contains(@data-test-type, "ChartSettings")][contains(@data-test, "${name}")]`)
+  return await clickOn(settings, browser)
+}
+
+async function clickAway(name: string, browser: Browser) {
+  const settings = await browser.$(`//*[contains(@data-test-type, "ChartPaper")][contains(@data-test, "${name}")]`)
+  await moveToCenterOfElement(settings, browser)
+  const awayClickElement = await browser.$('//div[contains(@role, "presentation")]')
+  return awayClickElement.click()
+}
+
+async function removeChart(name: string, browser: Browser) {
+  const remove = await browser.$(`//*[contains(@data-test-type, "RemoveChart")][contains(@data-test, "${name}")]`)
+  return await clickOn(remove, browser)
+}
+
+async function clickOnMenuPoint(name: string, browser: Browser) {
+  const item = await browser.$(`//li[contains(text(), "${name}")]`)
+  return clickOn(item, browser)
+}

src/spec/util/index.ts

@@ -37,13 +37,11 @@ export async function deleteTextWithBackspaces(element: Element, browser: Browse
   }
 }
 
-export async function writeTextToInput(name: string, text: string, browser: Browser, wait: boolean = true) {
+export async function setTextInInput(name: string, text: string, browser: Browser) {
   const input = await browser.$(`//label[contains(text(), "${name}")]/..//input`)
   await clickOn(input, browser, 1)
-  wait && (await sleep(500))
-  input.clearValue()
-  wait && (await sleep(500))
-  await writeText(text, browser)
+  await input.clearValue()
+  await browser.keys(text)
 }
 
 export async function moveToCenterOfElement(element: Element, browser: Browser) {