Fix demoVideo

app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx

@@ -44,7 +44,7 @@ const ConnectionSettings = memo(function ConnectionSettings(props: Props) {
         <Grid container={true} spacing={3}>
           <Grid item={true} xs={8} className={classes.gridPadding}>
             <TextField
-              className={classes.fullWidth}
+              className={`${classes.fullWidth} advanced-connection-settings-topic-input`}
               label="Topic"
               placeholder="example/topic"
               margin="normal"

app/src/components/Demo/Mouse.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Theme, withStyles } from '@material-ui/core'
-const cursor = require('./cursor.png')
+import cursor from './cursor.png'
 
 interface State {
   enabled: boolean

app/tsconfig.json

@@ -15,7 +15,7 @@
     "allowSyntheticDefaultImports": true
   },
   "include": ["./src/**/*"],
-  "exclude": ["**/*.d.ts"],
+  "exclude": ["**/*.d.ts", ".src/**/*.png"],
   "awesomeTypescriptLoaderOptions": {
     "useCache": true,
     "transpileModule": true,

src/spec/scenarios/showAdvancedConnectionSettings.ts

@@ -1,15 +1,16 @@
-import { Browser, Element } from 'webdriverio'
-import { clickOn, sleep, setTextInInput } from '../util'
+import { Browser } from 'webdriverio'
+import { clickOn, sleep, setInputText } 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")]')
+  const topicInput = await browser.$('//*[contains(@class, "advanced-connection-settings-topic-input")]//input')
 
   await clickOn(advancedSettingsButton, browser)
-  await setTextInInput('Subscription', 'garden/#', browser)
+  await setInputText(topicInput, 'garden/#', browser)
   await clickOn(addButton, browser)
 
-  await setTextInInput('Subscription', 'livingroom/#', browser)
+  await setInputText(topicInput, 'livingroom/#', browser)
   await clickOn(addButton, browser)
 
   await deleteFirstSubscribedTopic(browser)

src/spec/util/index.ts

@@ -37,6 +37,12 @@ export async function deleteTextWithBackspaces(element: Element, browser: Browse
   }
 }
 
+export async function setInputText(input: Element, text: string, browser: Browser) {
+  await clickOn(input, browser, 1)
+  await deleteTextWithBackspaces(input, browser)
+  await input.setValue(text)
+}
+
 export async function setTextInInput(name: string, text: string, browser: Browser) {
   const input = await browser.$(`//label[contains(text(), "${name}")]/..//input`)
   await clickOn(input, browser, 1)