Merge pull request #2657 from ethereum/file-explorer-e2e-tests

File Explorer Tests

package.json

@@ -181,6 +181,7 @@
     "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 ",
+    "nightwatch_local_fileExplorer": "nightwatch ./test-browser/tests/fileExplorer.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/ui/TreeView.js

@@ -74,21 +74,21 @@ class TreeView {
     var children = Object.keys(json).map((innerkey) => {
       return this.renderObject(json[innerkey], json, innerkey, expand, innerkey)
     })
-    return yo`<ul key=${key} class="${css.ul_tv}">${children}</ul>`
+    return yo`<ul key=${key} data-id="treeViewUl${key}" class="${css.ul_tv}">${children}</ul>`
   }
 
   formatData (key, data, children, expand, keyPath) {
     var self = this
-    var li = yo`<li key=${keyPath} class=${css.li_tv}></li>`
+    var li = yo`<li key=${keyPath} data-id="treeViewLi${keyPath}" class=${css.li_tv}></li>`
     var caret = yo`<div class="fas fa-caret-right caret ${css.caret_tv}"></div>`
     var label = yo`
-      <div key=${keyPath} class=${css.label_tv}>
+      <div key=${keyPath} data-id="treeViewDiv${keyPath}" class=${css.label_tv}>
         ${caret}
         <span>${self.formatSelf(key, data, li)}</span>
       </div>`
     li.appendChild(label)
     if (data.children) {
-      var list = yo`<ul key=${keyPath} class=${css.ul_tv}>${children}</ul>`
+      var list = yo`<ul key=${keyPath} data-id="treeViewUlList${keyPath}" class=${css.ul_tv}>${children}</ul>`
       list.style.display = 'none'
       caret.className = list.style.display === 'none' ? `fas fa-caret-right caret ${css.caret_tv}` : `fas fa-caret-down caret ${css.caret_tv}`
       caret.setAttribute('data-id', `treeViewToggle${keyPath}`)

test-browser/commands/switchBrowserWindow.js

@@ -0,0 +1,25 @@
+const EventEmitter = require('events')
+
+class SwitchBrowserWindow extends EventEmitter {
+  command (url, windowName) {
+    this.api.perform((done) => {
+      switchWindow(this.api, url, windowName, () => {
+        done()
+        this.emit('complete')
+      })
+    })
+    return this
+  }
+}
+
+function switchWindow (browser, url, windowName, callback) {
+  browser.execute(function (url, windowName) {
+    window.open(url, windowName, 'width=2560, height=1440')
+  }, [url, windowName], function () {
+    browser.switchWindow(windowName)
+    .assert.urlContains(url)
+    callback()
+  })
+}
+
+module.exports = SwitchBrowserWindow

test-browser/tests/fileExplorer.js

@@ -0,0 +1,94 @@
+'use strict'
+const init = require('../helpers/init')
+const sauce = require('./sauce')
+
+module.exports = {
+
+  before: function (browser, done) {
+    init(browser, done)
+  },
+
+  'Should create a new file `5_New_contract.sol` in file explorer': function (browser) {
+    browser.waitForElementVisible('div[data-id="remixIdeSidePanel"]')
+    .clickLaunchIcon('fileExplorers')
+    .assert.containsText('h6[data-id="sidePanelSwapitTitle"]', 'FILE EXPLORERS')
+    .click('*[data-id="fileExplorerNewFilecreateNewFile"]')
+    .waitForElementVisible('*[data-id="modalDialogContainer"]')
+    .setValue('*[data-id="modalDialogCustomPromptText"]', '5_New_contract.sol')
+    .modalFooterOKClick()
+    .pause(2000)
+    .waitForElementVisible('*[data-id="treeViewLibrowser/5_New_contract.sol"]')
+  },
+
+  'Should rename `5_New_contract.sol` to 5_Renamed_Contract.sol': function (browser) {
+    browser
+    .waitForElementVisible('*[data-id="treeViewLibrowser/5_New_contract.sol"]')
+    .moveToElement('*[data-id="treeViewLibrowser/5_New_contract.sol"]', 5, 5)
+    .mouseButtonClick('right')
+    .click('*[id="menuitemrename"]')
+    .keys('5_Renamed_Contract.sol')
+    .keys(browser.Keys.ENTER)
+    .waitForElementVisible('*[data-id="treeViewLibrowser/5_Renamed_Contract.sol"]')
+  },
+
+  'Should delete file `5_Renamed_Contract.sol` from file explorer': function (browser) {
+    browser
+    .moveToElement('*[data-id="treeViewLibrowser/5_Renamed_Contract.sol"]', 5, 5)
+    .mouseButtonClick('right')
+    .click('*[id="menuitemdelete"]')
+    .waitForElementVisible('*[data-id="modalDialogContainer"]')
+    .modalFooterOKClick()
+    .waitForElementNotPresent('*[data-id="treeViewLibrowser/5_Renamed_Contract.sol"')
+  },
+
+  'Should create a new folder': function (browser) {
+    browser
+    .waitForElementVisible('*[data-id="treeViewLibrowser/1_Storage.sol"]')
+    .moveToElement('*[data-id="treeViewLibrowser/1_Storage.sol"]', 5, 5)
+    .mouseButtonClick('right')
+    .click('*[id="menuitemcreate folder"]')
+    .waitForElementVisible('*[data-id="modalDialogContainer"]')
+    .setValue('*[data-id="modalDialogCustomPromptText"]', 'Browser_Tests')
+    .modalFooterOKClick()
+    .waitForElementVisible('*[data-id="treeViewLibrowser/Browser_Tests"]')
+  },
+
+  'Should rename Browser_Tests folder to Browser_E2E_Tests': function (browser) {
+    browser
+    .waitForElementVisible('*[data-id="treeViewLibrowser/Browser_Tests"]')
+    .moveToElement('*[data-id="treeViewLibrowser/Browser_Tests"]', 5, 5)
+    .mouseButtonClick('right')
+    .click('*[id="menuitemrename"]')
+    .keys('Browser_E2E_Tests')
+    .keys(browser.Keys.ENTER)
+    .waitForElementVisible('*[data-id="treeViewLibrowser/Browser_E2E_Tests"]')
+  },
+
+  'Should delete Browser_E2E_Tests folder': function (browser) {
+    browser
+    .waitForElementVisible('*[data-id="treeViewLibrowser/Browser_E2E_Tests"]')
+    .moveToElement('*[data-id="treeViewLibrowser/Browser_E2E_Tests"]', 5, 5)
+    .mouseButtonClick('right')
+    .click('*[id="menuitemdelete"]')
+    .waitForElementVisible('*[data-id="modalDialogContainer"]')
+    .modalFooterOKClick()
+    .waitForElementNotPresent('*[data-id="treeViewLibrowser/Browser_E2E_Tests"]')
+  },
+
+  'Should publish all explorer files to github gist': function (browser) {
+    browser
+    .waitForElementVisible('*[data-id="fileExplorerNewFilepublishToGist"]')
+    .click('*[data-id="fileExplorerNewFilepublishToGist"]')
+    .waitForElementVisible('*[data-id="modalDialogContainer"]')
+    .modalFooterOKClick()
+    .pause(10000)
+    .waitForElementVisible('*[data-id="modalDialogContainer"]')
+    .modalFooterOKClick()
+    .pause(2000)
+    .switchBrowserTab(1)
+    .assert.urlContains('https://gist.github.com')
+    .end()
+  },
+
+  tearDown: sauce
+}