Merge pull request ethereum#2635 from ethereum/general-settings-e2e-test

General Settings Browser Tests

package.json

@@ -180,6 +180,7 @@
     "nightwatch_local_defaultLayout": "nightwatch ./test-browser/tests/defaultLayout.js --config nightwatch.js --env chrome ",
     "nightwatch_local_pluginManager": "nightwatch ./test-browser/tests/pluginManager.js --config nightwatch.js --env chrome ",
     "nightwatch_local_publishContract": "nightwatch ./test-browser/tests/publishContract.js --config nightwatch.js --env chrome ",
+    "nightwatch_local_generalSettings": "nightwatch ./test-browser/tests/generalSettings.js --config nightwatch.js --env chrome ",
     "onchange": "onchange build/app.js -- npm-run-all lint",
     "prepublish": "mkdirp build; npm-run-all -ls downloadsolc_root build",
     "remixd": "remixd -s ./contracts --remix-ide http://127.0.0.1:8080",

src/app.js

@@ -187,7 +187,7 @@ class App {
     self._components.resizeFeature = new PanelsResize(self._view.sidepanel)
 
     self._view.el = yo`
-      <div style="visibility:hidden" class=${css.remixIDE}>
+      <div style="visibility:hidden" class=${css.remixIDE} data-id="remixIDE">
         ${self._view.iconpanel}
         ${self._view.sidepanel}
         ${self._components.resizeFeature.render()}

src/app/components/vertical-icons.js

@@ -72,7 +72,8 @@ export class VerticalIcons extends Plugin {
         class="${css.icon}"
         onclick="${() => { this.toggle(name) }}"
         plugin="${name}"
-        title="${title}">
+        title="${title}"
+        data-id="verticalIconsKind${name}">
         <img class="image" src="${icon}" alt="${name}" />
       </div>`
     this.iconKind[kind || 'none'].appendChild(this.icons[name])

src/app/tabs/compileTab/compilerContainer.js

@@ -115,7 +115,7 @@ class CompilerContainer {
     const displayed = name || '<no file selected>'
     const disabled = name ? '' : 'disabled'
     const compileBtn = yo`
-      <button id="compileBtn" class="btn btn-primary btn-block ${disabled}" title="Compile" onclick="${this.compile.bind(this)}">
+      <button id="compileBtn" data-id="compilerContainerCompileBtn" class="btn btn-primary btn-block ${disabled}" title="Compile" onclick="${this.compile.bind(this)}">
         <span>${this._view.compileIcon} Compile ${displayed}</span>
       </button>
     `

src/app/tabs/runTab/settings.js

@@ -60,7 +60,7 @@ class SettingsUI {
           Environment
         </label>
         <div class="${css.environment}">
-          <select id="selectExEnvOptions" onchange=${() => { this.updateNetwork() }} class="form-control ${css.select} custom-select">
+          <select id="selectExEnvOptions" data-id="settingsSelectEnvOptions" onchange=${() => { this.updateNetwork() }} class="form-control ${css.select} custom-select">
             <option id="vm-mode"
               title="Execution environment does not connect to any node, everything is local and in memory only."
               value="vm" name="executionContext"> JavaScript VM
@@ -83,7 +83,7 @@ class SettingsUI {
     <div class="${css.crow}">
         <div class="${css.settingsLabel}">
         </div>
-        <div class="${css.environment}">
+        <div class="${css.environment}" data-id="settingsNetworkEnv">
           ${this.netUI}
         </div>
       </div>

src/app/tabs/settings-tab.js

@@ -53,7 +53,7 @@ module.exports = class SettingsTab extends ViewPlugin {
       return yo`<div class="card-text themes-container">
         ${themes.map((aTheme) => {
           let el = yo`<div class="${css.frow} form-check ${css.crow}">
-          <input type="radio" onchange=${event => { onswitchTheme(event, aTheme.name) }} class="align-middle form-check-input" name="theme" id="${aTheme.name}"   >
+          <input type="radio" onchange=${event => { onswitchTheme(event, aTheme.name) }} class="align-middle form-check-input" name="theme" id="${aTheme.name}" data-id="settingsTabTheme${aTheme.name}"  >
           <label class="form-check-label" for="${aTheme.name}">${aTheme.name} (${aTheme.quality})</label>
         </div>`
           if (this._deps.themeModule.active === aTheme.name) el.querySelector('input').setAttribute('checked', 'checked')
@@ -68,18 +68,18 @@ module.exports = class SettingsTab extends ViewPlugin {
     if (self._view.el) return self._view.el
 
     // Gist settings
-    var gistAccessToken = yo`<input id="gistaccesstoken" type="password" class="border form-control mb-2 ${css.inline}" placeholder="Token">`
+    var gistAccessToken = yo`<input id="gistaccesstoken" data-id="settingsTabGistAccessToken" type="password" class="border form-control mb-2 ${css.inline}" placeholder="Token">`
     var token = this.config.get('settings/gist-access-token')
     if (token) gistAccessToken.value = token
-    var gistAddToken = yo`<input class="${css.savegisttoken} btn btn-sm btn-primary" id="savegisttoken" onclick=${() => { this.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }} value="Save" type="button">`
-    var gistRemoveToken = yo`<input class="btn btn-sm btn-primary" id="removegisttoken" onclick=${() => { gistAccessToken.value = ''; this.config.set('settings/gist-access-token', ''); tooltip('Access token removed') }} value="Remove" type="button">`
+    var gistAddToken = yo`<input class="${css.savegisttoken} btn btn-sm btn-primary" id="savegisttoken" data-id="settingsTabSaveGistToken" onclick=${() => { this.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }} value="Save" type="button">`
+    var gistRemoveToken = yo`<input class="btn btn-sm btn-primary" id="removegisttoken" data-id="settingsTabRemoveGistToken" onclick=${() => { gistAccessToken.value = ''; this.config.set('settings/gist-access-token', ''); tooltip('Access token removed') }} value="Remove" type="button">`
     this._view.gistToken = yo`<div class="${css.checkboxText}">${gistAccessToken}${copyToClipboard(() => this.config.get('settings/gist-access-token'))}${gistAddToken}${gistRemoveToken}</div>`
-    this._view.optionVM = yo`<input onchange=${onchangeOption} class="align-middle form-check-input" id="alwaysUseVM" type="checkbox">`
+    this._view.optionVM = yo`<input onchange=${onchangeOption} class="align-middle form-check-input" id="alwaysUseVM" data-id="settingsTabAlwaysUseVM" type="checkbox">`
     if (this.config.get('settings/always-use-vm') === undefined) this.config.set('settings/always-use-vm', true)
     if (this.config.get('settings/always-use-vm')) this._view.optionVM.setAttribute('checked', '')
     this._view.personal = yo`<input onchange=${onchangePersonal} id="personal" type="checkbox" class="align-middle form-check-input">`
     if (this.config.get('settings/personal-mode')) this._view.personal.setAttribute('checked', '')
-    this._view.generateContractMetadata = yo`<input onchange=${onchangeGenerateContractMetadata} id="generatecontractmetadata" type="checkbox" class="form-check-input">`
+    this._view.generateContractMetadata = yo`<input onchange=${onchangeGenerateContractMetadata} id="generatecontractmetadata" data-id="settingsTabGenerateContractMetadata" type="checkbox" class="form-check-input">`
 
     if (this.config.get('settings/generate-contract-metadata')) this._view.generateContractMetadata.setAttribute('checked', '')
 
@@ -92,7 +92,7 @@ module.exports = class SettingsTab extends ViewPlugin {
     <div class="${css.info} card">
       <div class="card-body">
       <h6 class="${css.title} card-title">Have a question?</h6>
-      <button class="btn btn-primary sm-1" onclick="${() => { window.open('https://gitter.im/ethereum/remix') }}">Gitter Channel</button>
+      <button class="btn btn-primary sm-1" data-id="settingsTabGitterChannelButton" onclick="${() => { window.open('https://gitter.im/ethereum/remix') }}">Gitter Channel</button>
       </div>
     </div>`
 
@@ -143,7 +143,7 @@ module.exports = class SettingsTab extends ViewPlugin {
         </div>
       </div>`
     this._view.el = yo`
-      <div class="${css.settingsTabView}" id="settingsView">
+      <div class="${css.settingsTabView}" id="settingsView" data-id="settingsTabSettingsView">
         ${this._view.config.homePage}
         ${this._view.config.general}
         ${this._view.gistToken}

src/app/ui/copy-to-clipboard.js

@@ -13,7 +13,7 @@ var css = csjs`
 `
 
 module.exports = function copyToClipboard (getContent, tip = 'Copy value to clipboard', icon = 'fa-copy') {
-  var copyIcon = yo`<i title="${tip}" class="${css.copyIcon} far ${icon}" aria-hidden="true"></i>`
+  var copyIcon = yo`<i title="${tip}" class="${css.copyIcon} far ${icon}" data-id="copyToClipboardCopyIcon" aria-hidden="true"></i>`
   copyIcon.onclick = (event) => {
     event.stopPropagation()
     var copiableContent

src/app/ui/landing-page/landing-page.js

@@ -190,7 +190,7 @@ export class LandingPage extends ViewPlugin {
           <div class="mb-5">
             <h4>Environments</h4>
             <div class="${css.enviroments} pt-2">
-              <button class="btn btn-lg btn-secondary mr-3" onclick=${() => startSolidity()}>Solidity</button>
+              <button class="btn btn-lg btn-secondary mr-3" data-id="landingPageStartSolidity" onclick=${() => startSolidity()}>Solidity</button>
               <button class="btn btn-lg btn-secondary mr-3" onclick=${() => startVyper()}>Vyper</button>
             </div>
           </div>

src/app/ui/tooltip.js

@@ -69,14 +69,14 @@ class Toaster {
       ` : ``
 
       this.tooltip = yo`
-        <div data-id="tooltipPopup" class="${css.tooltip} alert alert-info p-2"  onmouseenter=${() => { over() }} onmouseleave=${() => { out() }}>
+        <div data-shared="tooltipPopup" class="${css.tooltip} alert alert-info p-2"  onmouseenter=${() => { over() }} onmouseleave=${() => { out() }}>
           <span class="px-2">
             ${shortTooltipText}
             ${button}
             ${actionElement}
           </span>
           <span style="align-self: baseline;">
-            <button class="fas fa-times btn-info mx-1 p-0" onclick=${() => closeTheToaster(this)}></button>
+            <button data-id="tooltipCloseButton" class="fas fa-times btn-info mx-1 p-0" onclick=${() => closeTheToaster(this)}></button>
           </span>
         </div>`
       let timeOut = () => {

test-browser/commands/checkElementStyle.js

@@ -16,7 +16,9 @@ function checkStyle (browser, cssSelector, styleProperty, expectedResult, callba
   browser.execute(function (cssSelector, styleProperty) {
     return window.getComputedStyle(document.querySelector(cssSelector)).getPropertyValue(styleProperty)
   }, [cssSelector, styleProperty], function (result) {
-    browser.assert.equal(result.value, expectedResult)
+    const value = result.value
+
+    browser.assert.equal(value.trim(), expectedResult)
     callback()
   })
 }

test-browser/commands/switchBrowserTab.js

@@ -0,0 +1,20 @@
+const EventEmitter = require('events')
+
+/*
+  Switches between browser tabs
+*/
+
+class SwitchBrowserTab extends EventEmitter {
+  command (index) {
+    this.api.perform((browser, done) => {
+      browser.window_handles((result) => {
+        browser.switchWindow(result.value[index])
+        done()
+      })
+      this.emit('complete')
+    })
+    return this
+  }
+}
+
+module.exports = SwitchBrowserTab