Merge pull request #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 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" onclick=${() => { gistAccessToken.value = ''; this.config.set('settings/gist-access-token', ''); tooltip('Access token removed') }} value="Remove" 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

test-browser/tests/generalSettings.js

@@ -0,0 +1,358 @@
+'use strict'
+const init = require('../helpers/init')
+const sauce = require('./sauce')
+
+module.exports = {
+  before: function (browser, done) {
+    init(browser, done, 'http://127.0.0.1:8080', false)
+  },
+
+  'Should display settings menu': function (browser) {
+    browser.waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
+    .click('*[data-id="landingPageStartSolidity"]')
+    .waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
+    .click('*[data-id="verticalIconsKindsettings"]')
+    .waitForElementVisible('*[data-id="settingsTabSettingsView"]')
+    .assert.containsText('h6[data-id="sidePanelSwapitTitle"]', 'SETTINGS')
+  },
+
+  'Should open gitter channel in a new tab when `Gitter Channel Button` is clicked': function (browser) {
+    const runtimeBrowser = browser.capabilities.browserName
+
+    browser.waitForElementVisible('*[data-id="remixIdeSidePanel"]')
+    .waitForElementVisible('*[data-id="settingsTabGitterChannelButton"]')
+    .click('*[data-id="settingsTabGitterChannelButton"]')
+    .pause(2000)
+    .switchBrowserTab(1)
+    if (runtimeBrowser === 'chrome') browser.assert.urlContains('https://gitter.im/ethereum/remix')
+  },
+
+  'Should activate `generate contract metadata`': function (browser) {
+    browser.switchBrowserTab(0)
+    .waitForElementVisible('*[data-id="remixIdeSidePanel"]')
+    .waitForElementVisible('*[data-id="settingsTabGenerateContractMetadata"]')
+    .click('*[data-id="settingsTabGenerateContractMetadata"]')
+    .click('*[data-id="verticalIconsFileExplorerIcons"]')
+    .switchFile('browser/3_Ballot.sol')
+    .click('*[data-id="verticalIconsKindsolidity"]')
+    .pause(2000)
+    .click('*[data-id="compilerContainerCompileBtn"]')
+    .pause(3000)
+    .click('*[data-id="verticalIconsKindfileExplorers"]')
+    .switchFile('browser/artifacts')
+    .switchFile('browser/artifacts/Ballot.json')
+  },
+
+  'Should add new github access token': function (browser) {
+    browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
+    .click('*[data-id="verticalIconsKindsettings"]')
+    .setValue('*[data-id="settingsTabGistAccessToken"]', '**********')
+    .click('*[data-id="settingsTabSaveGistToken"]')
+    .waitForElementVisible('*[data-shared="tooltipPopup"]:nth-last-of-type(1)')
+    .assert.containsText('*[data-shared="tooltipPopup"]:nth-last-of-type(1)', 'Access token saved')
+    .click('*[data-id="tooltipCloseButton"]')
+  },
+
+  'Should copy github access token to clipboard': function (browser) {
+    browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
+    .click('*[data-id="copyToClipboardCopyIcon"]')
+    .waitForElementVisible('*[data-shared="tooltipPopup"]:nth-last-of-type(1)')
+    .assert.containsText('*[data-shared="tooltipPopup"]:nth-last-of-type(1)', 'Copy value to clipboard')
+    .click('*[data-id="tooltipCloseButton"]')
+  },
+
+  'Should remove github access token': function (browser) {
+    browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
+    .click('*[data-id="settingsTabRemoveGistToken"]')
+    .waitForElementVisible('*[data-shared="tooltipPopup"]:nth-last-of-type(1)')
+    .assert.containsText('*[data-shared="tooltipPopup"]:nth-last-of-type(1)', 'Access token removed')
+    .assert.containsText('*[data-id="settingsTabGistAccessToken"]', '')
+    .click('*[data-id="tooltipCloseButton"]')
+  },
+
+  'Should load dark theme': function (browser) {
+    browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
+    .click('*[data-id="settingsTabThemeDark"]')
+    .pause(2000)
+    .checkElementStyle(':root', '--primary', remixIdeThemes.dark.primary)
+    .checkElementStyle(':root', '--secondary', remixIdeThemes.dark.secondary)
+    .checkElementStyle(':root', '--success', remixIdeThemes.dark.success)
+    .checkElementStyle(':root', '--info', remixIdeThemes.dark.info)
+    .checkElementStyle(':root', '--warning', remixIdeThemes.dark.warning)
+    .checkElementStyle(':root', '--danger', remixIdeThemes.dark.danger)
+  },
+
+  'Should load light theme': function (browser) {
+    browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
+    .click('*[data-id="settingsTabThemeLight"]')
+    .pause(2000)
+    .checkElementStyle(':root', '--primary', remixIdeThemes.light.primary)
+    .checkElementStyle(':root', '--secondary', remixIdeThemes.light.secondary)
+    .checkElementStyle(':root', '--success', remixIdeThemes.light.success)
+    .checkElementStyle(':root', '--info', remixIdeThemes.light.info)
+    .checkElementStyle(':root', '--warning', remixIdeThemes.light.warning)
+    .checkElementStyle(':root', '--danger', remixIdeThemes.light.danger)
+  },
+
+  'Should load Cerulean theme': function (browser) {
+    browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
+    .click('*[data-id="settingsTabThemeCerulean"]')
+    .pause(2000)
+    .checkElementStyle(':root', '--primary', remixIdeThemes.curelean.primary)
+    .checkElementStyle(':root', '--secondary', remixIdeThemes.curelean.secondary)
+    .checkElementStyle(':root', '--success', remixIdeThemes.curelean.success)
+    .checkElementStyle(':root', '--info', remixIdeThemes.curelean.info)
+    .checkElementStyle(':root', '--warning', remixIdeThemes.curelean.warning)
+    .checkElementStyle(':root', '--danger', remixIdeThemes.curelean.danger)
+  },
+
+  'Should load Flatly theme': function (browser) {
+    browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
+    .click('*[data-id="settingsTabThemeFlatly"]')
+    .pause(2000)
+    .checkElementStyle(':root', '--primary', remixIdeThemes.flatly.primary)
+    .checkElementStyle(':root', '--secondary', remixIdeThemes.flatly.secondary)
+    .checkElementStyle(':root', '--success', remixIdeThemes.flatly.success)
+    .checkElementStyle(':root', '--info', remixIdeThemes.flatly.info)
+    .checkElementStyle(':root', '--warning', remixIdeThemes.flatly.warning)
+    .checkElementStyle(':root', '--danger', remixIdeThemes.flatly.danger)
+  },
+
+  'Should load Lumen theme': function (browser) {
+    browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
+    .click('*[data-id="settingsTabThemeLumen"]')
+    .pause(2000)
+    .checkElementStyle(':root', '--primary', remixIdeThemes.lumen.primary)
+    .checkElementStyle(':root', '--secondary', remixIdeThemes.lumen.secondary)
+    .checkElementStyle(':root', '--success', remixIdeThemes.lumen.success)
+    .checkElementStyle(':root', '--info', remixIdeThemes.lumen.info)
+    .checkElementStyle(':root', '--warning', remixIdeThemes.lumen.warning)
+    .checkElementStyle(':root', '--danger', remixIdeThemes.lumen.danger)
+  },
+
+  'Should load Minty theme': function (browser) {
+    browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
+    .click('*[data-id="settingsTabThemeMinty"]')
+    .pause(2000)
+    .checkElementStyle(':root', '--primary', remixIdeThemes.minty.primary)
+    .checkElementStyle(':root', '--secondary', remixIdeThemes.minty.secondary)
+    .checkElementStyle(':root', '--success', remixIdeThemes.minty.success)
+    .checkElementStyle(':root', '--info', remixIdeThemes.minty.info)
+    .checkElementStyle(':root', '--warning', remixIdeThemes.minty.warning)
+    .checkElementStyle(':root', '--danger', remixIdeThemes.minty.danger)
+  },
+
+  'Should load Pulse theme': function (browser) {
+    browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
+    .click('*[data-id="settingsTabThemePulse"]')
+    .pause(2000)
+    .checkElementStyle(':root', '--primary', remixIdeThemes.pulse.primary)
+    .checkElementStyle(':root', '--secondary', remixIdeThemes.pulse.secondary)
+    .checkElementStyle(':root', '--success', remixIdeThemes.pulse.success)
+    .checkElementStyle(':root', '--info', remixIdeThemes.pulse.info)
+    .checkElementStyle(':root', '--warning', remixIdeThemes.pulse.warning)
+    .checkElementStyle(':root', '--danger', remixIdeThemes.pulse.danger)
+  },
+
+  'Should load Sandstone theme': function (browser) {
+    browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
+    .click('*[data-id="settingsTabThemeSandstone"]')
+    .pause(2000)
+    .checkElementStyle(':root', '--primary', remixIdeThemes.sandstone.primary)
+    .checkElementStyle(':root', '--secondary', remixIdeThemes.sandstone.secondary)
+    .checkElementStyle(':root', '--success', remixIdeThemes.sandstone.success)
+    .checkElementStyle(':root', '--info', remixIdeThemes.sandstone.info)
+    .checkElementStyle(':root', '--warning', remixIdeThemes.sandstone.warning)
+    .checkElementStyle(':root', '--danger', remixIdeThemes.sandstone.danger)
+  },
+
+  'Should load Spacelab theme': function (browser) {
+    browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
+    .click('*[data-id="settingsTabThemeSpacelab"]')
+    .pause(2000)
+    .checkElementStyle(':root', '--primary', remixIdeThemes.spacelab.primary)
+    .checkElementStyle(':root', '--secondary', remixIdeThemes.spacelab.secondary)
+    .checkElementStyle(':root', '--success', remixIdeThemes.spacelab.success)
+    .checkElementStyle(':root', '--info', remixIdeThemes.spacelab.info)
+    .checkElementStyle(':root', '--warning', remixIdeThemes.spacelab.warning)
+    .checkElementStyle(':root', '--danger', remixIdeThemes.spacelab.danger)
+  },
+
+  'Should load Yeti theme': function (browser) {
+    browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
+    .click('*[data-id="settingsTabThemeYeti"]')
+    .pause(2000)
+    .checkElementStyle(':root', '--primary', remixIdeThemes.yeti.primary)
+    .checkElementStyle(':root', '--secondary', remixIdeThemes.yeti.secondary)
+    .checkElementStyle(':root', '--success', remixIdeThemes.yeti.success)
+    .checkElementStyle(':root', '--info', remixIdeThemes.yeti.info)
+    .checkElementStyle(':root', '--warning', remixIdeThemes.yeti.warning)
+    .checkElementStyle(':root', '--danger', remixIdeThemes.yeti.danger)
+  },
+
+  'Should load Cyborg theme': function (browser) {
+    browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
+    .click('*[data-id="settingsTabThemeCyborg"]')
+    .pause(2000)
+    .checkElementStyle(':root', '--primary', remixIdeThemes.cyborg.primary)
+    .checkElementStyle(':root', '--secondary', remixIdeThemes.cyborg.secondary)
+    .checkElementStyle(':root', '--success', remixIdeThemes.cyborg.success)
+    .checkElementStyle(':root', '--info', remixIdeThemes.cyborg.info)
+    .checkElementStyle(':root', '--warning', remixIdeThemes.cyborg.warning)
+    .checkElementStyle(':root', '--danger', remixIdeThemes.cyborg.danger)
+  },
+
+  'Should load Darkly theme': function (browser) {
+    browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
+    .click('*[data-id="settingsTabThemeDarkly"]')
+    .pause(2000)
+    .checkElementStyle(':root', '--primary', remixIdeThemes.darkly.primary)
+    .checkElementStyle(':root', '--secondary', remixIdeThemes.darkly.secondary)
+    .checkElementStyle(':root', '--success', remixIdeThemes.darkly.success)
+    .checkElementStyle(':root', '--info', remixIdeThemes.darkly.info)
+    .checkElementStyle(':root', '--warning', remixIdeThemes.darkly.warning)
+    .checkElementStyle(':root', '--danger', remixIdeThemes.darkly.danger)
+  },
+
+  'Should load Slate theme': function (browser) {
+    browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
+    .click('*[data-id="settingsTabThemeSlate"]')
+    .pause(2000)
+    .checkElementStyle(':root', '--primary', remixIdeThemes.slate.primary)
+    .checkElementStyle(':root', '--secondary', remixIdeThemes.slate.secondary)
+    .checkElementStyle(':root', '--success', remixIdeThemes.slate.success)
+    .checkElementStyle(':root', '--info', remixIdeThemes.slate.info)
+    .checkElementStyle(':root', '--warning', remixIdeThemes.slate.warning)
+    .checkElementStyle(':root', '--danger', remixIdeThemes.slate.danger)
+  },
+
+  'Should load Superhero theme': function (browser) {
+    browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
+    .click('*[data-id="settingsTabThemeSuperhero"]')
+    .pause(2000)
+    .checkElementStyle(':root', '--primary', remixIdeThemes.superhero.primary)
+    .checkElementStyle(':root', '--secondary', remixIdeThemes.superhero.secondary)
+    .checkElementStyle(':root', '--success', remixIdeThemes.superhero.success)
+    .checkElementStyle(':root', '--info', remixIdeThemes.superhero.info)
+    .checkElementStyle(':root', '--warning', remixIdeThemes.superhero.warning)
+    .checkElementStyle(':root', '--danger', remixIdeThemes.superhero.danger)
+    .end()
+  },
+
+  tearDown: sauce
+}
+
+var remixIdeThemes = {
+  dark: {
+    primary: '#007aa6',
+    secondary: '#595c76',
+    success: '#32ba89',
+    info: '#086CB5',
+    warning: '#c97539',
+    danger: '#b84040'
+  },
+  light: {
+    primary: '#007aa6',
+    secondary: '#a8b3bc',
+    success: '#32ba89',
+    info: '#007aa6',
+    warning: '#c97539',
+    danger: '#b84040'
+  },
+  curelean: {
+    primary: '#2FA4E7',
+    secondary: '#e9ecef',
+    success: '#73A839',
+    info: '#033C73',
+    warning: '#DD5600',
+    danger: '#C71C22'
+  },
+  flatly: {
+    primary: '#2C3E50',
+    secondary: '#95a5a6',
+    success: '#18BC9C',
+    info: '#3498DB',
+    warning: '#F39C12',
+    danger: '#E74C3C'
+  },
+  lumen: {
+    primary: '#158CBA',
+    secondary: '#f0f0f0',
+    success: '#28B62C',
+    info: '#75CAEB',
+    warning: '#FF851B',
+    danger: '#FF4136'
+  },
+  minty: {
+    primary: '#78C2AD',
+    secondary: '#F3969A',
+    success: '#56CC9D',
+    info: '#6CC3D5',
+    warning: '#FFCE67',
+    danger: '#FF7851'
+  },
+  pulse: {
+    primary: '#593196',
+    secondary: '#A991D4',
+    success: '#13B955',
+    info: '#009CDC',
+    warning: '#EFA31D',
+    danger: '#FC3939'
+  },
+  sandstone: {
+    primary: '#325D88',
+    secondary: '#8E8C84',
+    success: '#93C54B',
+    info: '#29ABE0',
+    warning: '#F47C3C',
+    danger: '#d9534f'
+  },
+  spacelab: {
+    primary: '#446E9B',
+    secondary: '#999',
+    success: '#3CB521',
+    info: '#3399F3',
+    warning: '#D47500',
+    danger: '#CD0200'
+  },
+  yeti: {
+    primary: '#008cba',
+    secondary: '#eee',
+    success: '#43ac6a',
+    info: '#5bc0de',
+    warning: '#E99002',
+    danger: '#F04124'
+  },
+  cyborg: {
+    primary: '#2A9FD6',
+    secondary: '#555',
+    success: '#77B300',
+    info: '#9933CC',
+    warning: '#FF8800',
+    danger: '#CC0000'
+  },
+  darkly: {
+    primary: '#375a7f',
+    secondary: '#444',
+    success: '#00bc8c',
+    info: '#3498DB',
+    warning: '#F39C12',
+    danger: '#E74C3C'
+  },
+  slate: {
+    primary: '#3A3F44',
+    secondary: '#7A8288',
+    success: '#62c462',
+    info: '#5bc0de',
+    warning: '#f89406',
+    danger: '#ee5f5b'
+  },
+  superhero: {
+    primary: '#DF691A',
+    secondary: '#4E5D6C',
+    success: '#5cb85c',
+    info: '#5bc0de',
+    warning: '#f0ad4e',
+    danger: '#d9534f'
+  }
+}

test-browser/tests/pluginManager.js

@@ -123,8 +123,8 @@ module.exports = {
     .click('*[data-id="localPluginRadioButtonsidePanel"]')
     .click('*[data-id="modalDialogModalFooter"]')
     .modalFooterOKClick()
-    .waitForElementVisible('*[data-id="tooltipPopup"]')
+    .waitForElementVisible('*[data-shared="tooltipPopup"]:nth-last-of-type(1)')
-    .assert.containsText('*[data-id="tooltipPopup"]', 'Cannot create Plugin : This name has already been used')
+    .assert.containsText('*[data-shared="tooltipPopup"]:nth-last-of-type(1)', 'Cannot create Plugin : This name has already been used')
     .end()
   },
   tearDown: sauce