Merge pull request #2659 from ethereum/editor-e2e-tests

Browser Editor Tests

package.json

@@ -183,6 +183,7 @@
     "nightwatch_local_generalSettings": "nightwatch ./test-browser/tests/generalSettings.js --config nightwatch.js --env chrome ",
     "nightwatch_local_fileExplorer": "nightwatch ./test-browser/tests/fileExplorer.js --config nightwatch.js --env chrome ",
     "nightwatch_local_debugger": "nightwatch ./test-browser/tests/debugger.js --config nightwatch.js --env chrome ",
+    "nightwatch_local_editor": "nightwatch ./test-browser/tests/editor.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/panels/tab-proxy.js

@@ -180,8 +180,8 @@ export class TabProxy {
 
     const zoomBtns = yo`
       <div class="d-flex flex-row justify-content-center align-items-center">
-        <span class="btn btn-sm px-1 fas fa-search-minus text-dark" onclick=${() => this.onZoomOut()}></span>
-        <span class="btn btn-sm px-1 fas fa-search-plus text-dark" onclick=${() => this.onZoomIn()}></span>
+        <span data-id="tabProxyZoomOut" class="btn btn-sm px-1 fas fa-search-minus text-dark" onclick=${() => this.onZoomOut()}></span>
+        <span data-id="tabProxyZoomIn" class="btn btn-sm px-1 fas fa-search-plus text-dark" onclick=${() => this.onZoomIn()}></span>
       </div>
     `
 

src/app/tabs/compileTab/compilerContainer.js

@@ -189,7 +189,7 @@ class CompilerContainer {
 
     this._view.warnCompilationSlow = yo`<i title="Compilation Slow" style="visibility:hidden" class="${css.warnCompilationSlow} fas fa-exclamation-triangle" aria-hidden="true"></i>`
     this._view.compileIcon = yo`<i class="fas fa-sync ${css.icon}" aria-hidden="true"></i>`
-    this._view.autoCompile = yo`<input class="${css.autocompile}" onchange=${this.updateAutoCompile.bind(this)} id="autoCompile" type="checkbox" title="Auto compile">`
+    this._view.autoCompile = yo`<input class="${css.autocompile}" onchange=${this.updateAutoCompile.bind(this)} id="autoCompile" data-id="compilerContainerAutoCompile" type="checkbox" title="Auto compile">`
     this._view.hideWarningsBox = yo`<input class="${css.autocompile}" onchange=${this.hideWarnings.bind(this)} id="hideWarningsBox" type="checkbox" title="Hide warnings">`
     if (this.data.autoCompile) this._view.autoCompile.setAttribute('checked', '')
     if (this.data.hideWarnings) this._view.hideWarningsBox.setAttribute('checked', '')

src/app/ui/renderer.js

@@ -90,7 +90,7 @@ Renderer.prototype.error = function (message, container, opt) {
   var $pre = $(opt.useSpan ? yo`<span></span>` : yo`<pre></pre>`).html(message)
 
   let classList = opt.type === 'error' ? 'alert alert-danger' : 'alert alert-warning'
-  var $error = $(yo`<div class="sol ${opt.type} ${classList}"><div class="close"><i class="fas fa-times"></i></div></div>`).prepend($pre)
+  var $error = $(yo`<div class="sol ${opt.type} ${classList}"><div class="close" data-id="renderer"><i class="fas fa-times"></i></div></div>`).prepend($pre)
   $(container).append($error)
 
   $error.click((ev) => {

test-browser/tests/editor.js

@@ -0,0 +1,92 @@
+'use strict'
+const init = require('../helpers/init')
+const sauce = require('./sauce')
+
+module.exports = {
+
+  before: function (browser, done) {
+    init(browser, done)
+  },
+
+  'Should zoom in editor': function (browser) {
+    browser.waitForElementVisible('div[data-id="mainPanelPluginsContainer"]')
+    .switchFile('browser/1_Storage.sol')
+    .waitForElementVisible('*[data-id="editorInput"]')
+    .checkElementStyle('*[data-id="editorInput"]', 'font-size', '12px')
+    .click('*[data-id="tabProxyZoomIn"]')
+    .click('*[data-id="tabProxyZoomIn"]')
+    .checkElementStyle('*[data-id="editorInput"]', 'font-size', '14px')
+  },
+
+  'Should zoom out editor': function (browser) {
+    browser.waitForElementVisible('*[data-id="editorInput"]')
+    .checkElementStyle('*[data-id="editorInput"]', 'font-size', '14px')
+    .click('*[data-id="tabProxyZoomOut"]')
+    .click('*[data-id="tabProxyZoomOut"]')
+    .checkElementStyle('*[data-id="editorInput"]', 'font-size', '12px')
+  },
+
+  'Should display compile error in editor': function (browser) {
+    browser.waitForElementVisible('*[data-id="editorInput"]')
+    .waitForElementVisible('*[class="ace_content"]')
+    .click('*[class="ace_content"]')
+    .keys('error')
+    .pause(2000)
+    .waitForElementVisible('.ace_error')
+  },
+
+  'Should minimize and maximize codeblock in editor': function (browser) {
+    browser.waitForElementVisible('*[data-id="editorInput"]')
+    .waitForElementVisible('.ace_open')
+    .click('.ace_start:nth-of-type(1)')
+    .waitForElementVisible('.ace_closed')
+    .click('.ace_start:nth-of-type(1)')
+    .waitForElementVisible('.ace_open')
+  },
+
+  'Should add breakpoint to editor': function (browser) {
+    browser.waitForElementVisible('*[data-id="editorInput"]')
+    .waitForElementNotPresent('.ace_breakpoint')
+    .click('.ace_gutter-cell:nth-of-type(1)')
+    .waitForElementVisible('.ace_breakpoint')
+  },
+
+  'Should load syntax highlighter for ace light theme': function (browser) {
+    browser.waitForElementVisible('*[data-id="editorInput"]')
+    .checkElementStyle('.ace_keyword', 'color', aceThemes.light.keyword)
+    .checkElementStyle('.ace_comment.ace_doc', 'color', aceThemes.light.comment)
+    .checkElementStyle('.ace_function', 'color', aceThemes.light.function)
+    .checkElementStyle('.ace_variable', 'color', aceThemes.light.variable)
+  },
+
+  'Should load syntax highlighter for ace dark theme': function (browser) {
+    browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
+    .click('*[data-id="verticalIconsKindsettings"]')
+    .waitForElementVisible('*[data-id="settingsTabThemeDark"]')
+    .click('*[data-id="settingsTabThemeDark"]')
+    .pause(2000)
+    .waitForElementVisible('*[data-id="editorInput"]')
+    .checkElementStyle('.ace_keyword', 'color', aceThemes.dark.keyword)
+    .checkElementStyle('.ace_comment.ace_doc', 'color', aceThemes.dark.comment)
+    .checkElementStyle('.ace_function', 'color', aceThemes.dark.function)
+    .checkElementStyle('.ace_variable', 'color', aceThemes.dark.variable)
+    .end()
+  },
+
+  tearDown: sauce
+}
+
+var aceThemes = {
+  light: {
+    keyword: 'rgb(147, 15, 128)',
+    comment: 'rgb(35, 110, 36)',
+    function: 'rgb(0, 0, 162)',
+    variable: 'rgb(253, 151, 31)'
+  },
+  dark: {
+    keyword: 'rgb(0, 105, 143)',
+    comment: 'rgb(85, 85, 85)',
+    function: 'rgb(0, 174, 239)',
+    variable: 'rgb(153, 119, 68)'
+  }
+}