From 6000541c32a74fffcddf9d0c20d4fa2e3d6ab96a Mon Sep 17 00:00:00 2001 From: Thomas Nordquist Date: Sun, 3 Mar 2019 15:52:34 +0100 Subject: [PATCH] Visualize diff function in video --- app/src/components/CodeDiff.tsx | 11 +++- .../components/Sidebar/Publish/Publish.tsx | 2 +- app/src/components/Sidebar/Sidebar.tsx | 6 +- src/spec/mock-mqtt.ts | 5 +- src/spec/scenarios/compareJsonSideBySide.ts | 14 ----- src/spec/scenarios/showJsonFormatting.ts | 17 ++++++ src/spec/scenarios/showOffDiffCapability.ts | 21 +++++++ src/spec/webdriverio.ts | 56 +++++++++++-------- 8 files changed, 85 insertions(+), 47 deletions(-) delete mode 100644 src/spec/scenarios/compareJsonSideBySide.ts create mode 100644 src/spec/scenarios/showJsonFormatting.ts create mode 100644 src/spec/scenarios/showOffDiffCapability.ts diff --git a/app/src/components/CodeDiff.tsx b/app/src/components/CodeDiff.tsx index b4d8a05..3138424 100644 --- a/app/src/components/CodeDiff.tsx +++ b/app/src/components/CodeDiff.tsx @@ -35,8 +35,7 @@ class CodeDiff extends React.Component { return
{lines}
} - return change.value - .slice(0, -1) // Remove trailing newline + return this.trimNewlineRight(change.value) .split('\n') .map((line, idx) => { return
{line}
@@ -50,6 +49,14 @@ class CodeDiff extends React.Component { ) } + 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 diff --git a/app/src/components/Sidebar/Publish/Publish.tsx b/app/src/components/Sidebar/Publish/Publish.tsx index 4817341..c333672 100644 --- a/app/src/components/Sidebar/Publish/Publish.tsx +++ b/app/src/components/Sidebar/Publish/Publish.tsx @@ -169,7 +169,7 @@ class Publish extends React.Component { return ( - + diff --git a/app/src/components/Sidebar/Sidebar.tsx b/app/src/components/Sidebar/Sidebar.tsx index 96f4e3d..e538f83 100644 --- a/app/src/components/Sidebar/Sidebar.tsx +++ b/app/src/components/Sidebar/Sidebar.tsx @@ -147,13 +147,13 @@ class Sidebar extends React.Component { } return ( - - + + - + diff --git a/src/spec/mock-mqtt.ts b/src/spec/mock-mqtt.ts index 026089f..782b32c 100644 --- a/src/spec/mock-mqtt.ts +++ b/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, ''), diff --git a/src/spec/scenarios/compareJsonSideBySide.ts b/src/spec/scenarios/compareJsonSideBySide.ts deleted file mode 100644 index 3ebcd36..0000000 --- a/src/spec/scenarios/compareJsonSideBySide.ts +++ /dev/null @@ -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) { - 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) -} diff --git a/src/spec/scenarios/showJsonFormatting.ts b/src/spec/scenarios/showJsonFormatting.ts new file mode 100644 index 0000000..f0465c6 --- /dev/null +++ b/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) { + 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) + } +} diff --git a/src/spec/scenarios/showOffDiffCapability.ts b/src/spec/scenarios/showOffDiffCapability.ts new file mode 100644 index 0000000..2961a7a --- /dev/null +++ b/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) { + 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) +} diff --git a/src/spec/webdriverio.ts b/src/spec/webdriverio.ts index e52cb51..50ae443 100644 --- a/src/spec/webdriverio.ts +++ b/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')