Visualize diff function in video

app/src/components/CodeDiff.tsx

@@ -35,8 +35,7 @@ class CodeDiff extends React.Component<Props, {}> {
         return <div key={key}>{lines}</div>
       }
 
-      return change.value
-        .slice(0, -1) // Remove trailing newline
+      return this.trimNewlineRight(change.value)
         .split('\n')
         .map((line, idx) => {
           return <div key={`${key}-${idx}`} className={this.props.classes.line}><span className={this.cssClassForChange(change)}>{line}</span></div>
@@ -50,6 +49,14 @@ class CodeDiff extends React.Component<Props, {}> {
     )
   }
 
+  private trimNewlineRight(str: string) {
+    if (str.slice(-1) === '\n') {
+      return str.slice(0, -1)
+    }
+
+    return str
+  }
+
   private cssClassForChange(change: diff.Change) {
     if (change.added === true) {
       return this.props.classes.addition

app/src/components/Sidebar/Publish/Publish.tsx

@@ -169,7 +169,7 @@ class Publish extends React.Component<Props, State> {
 
     return (
       <Tooltip title="Format JSON">
-        <Fab style={{ width: '32px', height: '32px', marginLeft: '8px' }} onClick={this.formatJson}>
+        <Fab style={{ width: '32px', height: '32px', marginLeft: '8px' }} onClick={this.formatJson} id="sidebar-publish-format-json">
           <FormatAlignLeft style={{ fontSize: '20px' }} />
         </Fab>
       </Tooltip>

app/src/components/Sidebar/Sidebar.tsx

@@ -147,13 +147,13 @@ class Sidebar extends React.Component<Props, State> {
     }
 
     return (
-      <ToggleButtonGroup value={this.props.valueRendererDisplayMode} exclusive={true} onChange={handleValue}>
-        <ToggleButton value="diff">
+      <ToggleButtonGroup id="valueRendererDisplayMode" value={this.props.valueRendererDisplayMode} exclusive={true} onChange={handleValue}>
+        <ToggleButton value="diff" id="valueRendererDisplayMode-diff">
           <Tooltip title="Show difference between the current and the last message">
             <Code />
           </Tooltip>
         </ToggleButton>
-        <ToggleButton value="raw">
+        <ToggleButton value="raw" id="valueRendererDisplayMode-raw">
           <Tooltip title="Raw value">
             <Reorder />
           </Tooltip>

src/spec/mock-mqtt.ts

@@ -87,14 +87,13 @@ function generateData(client: mqtt.MqttClient) {
   let state = true
   intervals.push(setInterval(() => {
     state = !state
-    const enitityId = Math.round(Math.random() * 3000)
     client.publish(
       'actuality/showcase', `{
         "tags":{
-          "entityId":${enitityId},
+          "entityId": 33512,
           "entityType":"person",
           "host":"d44ad81e10f9",
-          "server":"${state ? 'http://localhost/dataActuality' : 'http://localhost/dataStorage' }",
+          "server":" 'http://localhost/dataActuality',
           "status":"${state ? 'live' : 'inactive'}"},
         "timestamp":${Date.now()}
       }`.replace(/\s/g, ''),

src/spec/scenarios/compareJsonSideBySide.ts

@@ -1,14 +0,0 @@
-import { clickOn, sleep, writeText, expandTopic, hideText } from '../util'
-import { Browser } from 'webdriverio'
-
-// Expects a topic with at least two messages to be selected
-export async function compareJsonSideBySide(browser: Browser<void>) {
-  const firstEntry = await browser.$('//span[contains(text(), "History")]/../../div/div[1]/div')
-  const secondEntry = await browser.$('//span[contains(text(), "History")]/../../div/div[2]/div')
-  await clickOn(secondEntry, browser)
-  await sleep(2000)
-  await clickOn(firstEntry, browser)
-  await sleep(2000)
-  await clickOn(firstEntry, browser)
-  await sleep(1000)
-}

src/spec/scenarios/showJsonFormatting.ts

@@ -0,0 +1,17 @@
+import { clickOn, sleep, writeText, delteTextWithBackspaces, expandTopic, moveToCenterOfElement, showText } from '../util'
+import { Browser } from 'webdriverio'
+
+export async function showJsonFormatting(browser: Browser<void>) {
+  const payloadInput = await browser.$('//*[contains(@class, "ace_text-input")]')
+  await clickOn(payloadInput, browser)
+  await payloadInput.clearValue()
+  await writeTextPayload(payloadInput, '{"action": "setState", "state": "on" }')
+}
+
+async function writeTextPayload(payloadInput: any, text: string) {
+  const chars = text.split('')
+  for (const char of chars) {
+    await payloadInput.setValue(char)
+    await sleep(200)
+  }
+}

src/spec/scenarios/showOffDiffCapability.ts

@@ -0,0 +1,21 @@
+import { clickOn, sleep, showText } from '../util'
+import { Browser } from 'webdriverio'
+
+// Expects a topic with at least two messages to be selected
+export async function showOffDiffCapability(browser: Browser<void>) {
+  await showText('Compare messages', 2000, browser, 'top')
+
+  await showText('Show raw message', 2000, browser, 'bottom')
+  const rawMessage = await browser.$('#valueRendererDisplayMode-raw')
+  await clickOn(rawMessage, browser)
+  await sleep(1000)
+
+  await showText('Compare with others', 2000, browser, 'bottom')
+  const diffMessages = await browser.$('#valueRendererDisplayMode-diff')
+  await clickOn(diffMessages, browser)
+
+  // const firstEntry = await browser.$('//span[contains(text(), "History")]/../../div/div[1]/div')
+  const secondEntry = await browser.$('//span[contains(text(), "History")]/../../div/div[2]/div')
+  await clickOn(secondEntry, browser)
+  await sleep(2000)
+}

src/spec/webdriverio.ts

@@ -1,35 +1,41 @@
+import * as os from 'os'
+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'
+import { disconnect } from './scenarios/disconnect'
+import { publishTopic } from './scenarios/publishTopic'
+import { showJsonFormatting } from './scenarios/showJsonFormatting'
+import { showJsonPreview } from './scenarios/showJsonPreview'
+import { showMenu } from './scenarios/showMenu'
+import { showNumericPlot } from './scenarios/showNumericPlot'
+import { showOffDiffCapability } from './scenarios/showOffDiffCapability'
+
 process.on('unhandledRejection', (error: Error) => {
   console.error('unhandledRejection', error.message, error.stack)
   process.exit(1)
 })
 
-import * as webdriverio from 'webdriverio'
-import * as os from 'os'
-import mockMqtt, { stop } from './mock-mqtt'
-import { connectTo } from './scenarios/connect'
-import { disconnect } from './scenarios/disconnect'
-import { showNumericPlot } from './scenarios/showNumericPlot'
-import { showJsonPreview } from './scenarios/showJsonPreview'
-import { compareJsonSideBySide } from './scenarios/compareJsonSideBySide'
-import { searchTree, clearSearch } from './scenarios/searchTree'
-import { copyTopicToClipboard } from './scenarios/copyTopicToClipboard'
-import { copyValueToClipboard } from './scenarios/copyValueToClipboard'
-import { publishTopic } from './scenarios/publishTopic'
-import { clearOldTopics } from './scenarios/clearOldTopics'
-import { showMenu } from './scenarios/showMenu'
-
-import { createFakeMousePointer, sleep, showText, hideText, clickOnHistory } from './util'
-
-const binary = os.platform() === 'darwin' ? 'Electron.app/Contents/MacOS/Electron' : 'electron'
 const runningUiTestOnCi = os.platform() === 'darwin' ? [] : ['--runningUiTestOnCi']
 
+console.log(`${__dirname}/../../../node_modules/.bin/electron`)
 const options = {
-  host: 'localhost', // Use localhost as chrome driver server
+  host: '127.0.0.1', // Use localhost as chrome driver server
   port: 9515, // "9515" is the port opened by chrome driver.
   capabilities: {
     browserName: 'electron',
     chromeOptions: {
-      binary: `${__dirname}/../../../node_modules/electron/dist/${binary}`,
+      binary: `${__dirname}/../../../node_modules/.bin/electron`,
       args: [`--app=${__dirname}/../../..`, '--force-device-scale-factor=1', '--no-sandbox', '--disable-dev-shm-usage', '--disable-extensions'].concat(runningUiTestOnCi),
     },
     windowTypes: ['app', 'webview'],
@@ -37,7 +43,10 @@ const options = {
 }
 
 async function doStuff() {
+  console.log('mock mqtt')
   await mockMqtt()
+  console.log('start webdriver')
+
   const browser = await webdriverio.remote(options)
   await createFakeMousePointer(browser)
 
@@ -54,12 +63,11 @@ async function doStuff() {
   await showNumericPlot(browser)
   await sleep(2000)
 
-  await showText('Formatted messages', 2000, browser, 'top')
   await showJsonPreview(browser)
-  await sleep(2000)
+  await showText('Formatted messages', 1500, browser, 'top')
+  await sleep(1500)
 
-  await showText('Compare messages', 2000, browser, 'top')
-  await compareJsonSideBySide(browser)
+  await showOffDiffCapability(browser)
   await hideText(browser)
 
   await showText('Publish topics', 2000, browser, 'top')