Merge pull request #2617 from ethereum/gist-e2e-tests

package.json

@@ -174,7 +174,6 @@
     "nightwatch_local_remixd": "nightwatch ./test-browser/tests/remixd.js --config nightwatch.js --env chrome ",
     "nightwatch_local_terminal": "nightwatch ./test-browser/tests/terminal.js --config nightwatch.js --env chrome ",
     "nightwatch_local_gist": "nightwatch ./test-browser/tests/gist.js --config nightwatch.js --env chrome ",
-    "nightwatch_local_importFromGist": "nightwatch ./test-browser/tests/importFromGist.js --config nightwatch.js --env chrome ",
     "nightwatch_local_workspace": "nightwatch ./test-browser/tests/workspace.js --config nightwatch.js --env chrome ",
     "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 ",

src/app/files/file-explorer.js

@@ -643,7 +643,7 @@ fileExplorer.prototype.renderMenuItems = function () {
         `
       } else {
         return yo`
-        <span id=${action} onclick=${(event) => { event.stopPropagation(); this[ action ]() }} class="newFile ${icon} ${css.newFile}" title=${title}></span>
+        <span id=${action} data-id="fileExplorerNewFile${action}" onclick=${(event) => { event.stopPropagation(); this[ action ]() }} class="newFile ${icon} ${css.newFile}" title=${title}></span>
         `
       }
     })

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

@@ -216,7 +216,7 @@ export class LandingPage extends ViewPlugin {
             <p class="mb-1 ${css.text}" onclick=${() => connectToLocalhost()}>Connect to Localhost</p>
             <p class="mb-1">Import From:</p>
             <div class="btn-group">
-              <button class="btn btn-sm btn-secondary" onclick="${() => importFromGist()}">Gist</button>
+              <button class="btn btn-sm btn-secondary" data-id="landingPageImportFromGistButton" onclick="${() => importFromGist()}">Gist</button>
               <button class="btn btn-sm btn-secondary" onclick="${() => load('Github', 'github URL', ['https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol', 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol', 'github:OpenZeppelin/openzeppelin-solidity/contracts/ownership/Ownable.sol#v2.1.2'])}">GitHub</button>
               <button class="btn btn-sm btn-secondary" onclick="${() => load('Swarm', 'bzz-raw URL', ['bzz-raw://<swarm-hash>'])}">Swarm</button>
               <button class="btn btn-sm btn-secondary" onclick="${() => load('Ipfs', 'ipfs URL', ['ipfs://<ipfs-hash>'])}">Ipfs</button>

src/app/ui/modal-dialog-custom.js

@@ -66,7 +66,7 @@ module.exports = {
 function prompt (title, text, hidden, inputValue, ok, cancel, focus) {
   if (!inputValue) inputValue = ''
   var type = hidden ? 'password' : 'text'
-  var input = yo`<input type=${type} name='prompt_text' id='prompt_text' class="${css['prompt_text']} form-control" value='${inputValue}' >`
+  var input = yo`<input type=${type} name='prompt_text' id='prompt_text' class="${css['prompt_text']} form-control" value='${inputValue}' data-id="modalDialogCustomPromptText">`
   modal(title, yo`<div>${text}<div>${input}</div></div>`,
     {
       fn: () => { if (typeof ok === 'function') ok(document.getElementById('prompt_text').value) }

src/app/ui/modaldialog.js

@@ -134,7 +134,7 @@ function html (opts) {
     <div id="modal-background" class="modal-dialog" role="document">
       <div class="modal-content ${css.modalContent} ${opts.class}">
         <div class="modal-header">
-          <h6 class="modal-title"></h6>
+          <h6 class="modal-title" data-id="modalDialogModalTitle"></h6>
           <span class="modal-close">
             <i id="modal-close" title="Close" class="fas fa-times" aria-hidden="true"></i>
           </span>

test-browser/tests/gist.js

 'use strict'
 const init = require('../helpers/init')
 const sauce = require('./sauce')
+const testData = {
+  validGistId: '1859c97c6e1efc91047d725d5225888e',
+  invalidGistId: '6368b389f9302v32902msk2402'
+}
 // 99266d6da54cc12f37f11586e8171546c7700d67
 
 module.exports = {
@@ -16,9 +20,9 @@ module.exports = {
       */
     console.log('token', process.env.gist_token)
     browser
-    .waitForElementVisible('#icon-panel', 10000)
+    .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
     .clickLaunchIcon('fileExplorers')
-    .click('#publishToGist')
+    .click('*[data-id="fileExplorerNewFilepublishToGist"]')
     .modalFooterOKClick()
     .getModalBody((value, done) => {
       const reg = /gist.github.com\/([^.]+)/
@@ -37,6 +41,46 @@ module.exports = {
           .perform(done)
       }
     })
+  },
+
+  'Load Gist Modal': function (browser) {
+    browser.clickLaunchIcon('home')
+    .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
+    .clickLaunchIcon('fileExplorers')
+    .scrollAndClick('*[data-id="landingPageImportFromGistButton"]')
+    .waitForElementVisible('*[data-id="modalDialogModalTitle"]')
+    .assert.containsText('*[data-id="modalDialogModalTitle"]', 'Load a Gist')
+    .waitForElementVisible('*[data-id="modalDialogModalBody"]')
+    .assert.containsText('*[data-id="modalDialogModalBody"]', 'Enter the ID of the Gist or URL you would like to load.')
+    .waitForElementVisible('*[data-id="modalDialogCustomPromptText"]')
+    .modalFooterCancelClick()
+  },
+
+  'Display Error Message For Invalid Gist ID': function (browser) {
+    browser
+    .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
+    .clickLaunchIcon('fileExplorers')
+    .scrollAndClick('*[data-id="landingPageImportFromGistButton"]')
+    .waitForElementVisible('*[data-id="modalDialogCustomPromptText"]')
+    .setValue('*[data-id="modalDialogCustomPromptText"]', testData.invalidGistId)
+    .modalFooterOKClick()
+    .waitForElementVisible('*[data-id="modalDialogModalBody"]')
+    .assert.containsText('*[data-id="modalDialogModalBody"]', 'Gist load error: Not Found')
+    .modalFooterOKClick()
+  },
+
+  'Import From Gist For Valid Gist ID': function (browser) {
+    browser
+    .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
+    .clickLaunchIcon('fileExplorers')
+    .scrollAndClick('*[data-id="landingPageImportFromGistButton"]')
+    .waitForElementVisible('*[data-id="modalDialogCustomPromptText"]')
+    .setValue('*[data-id="modalDialogCustomPromptText"]', testData.validGistId)
+    .modalFooterOKClick()
+    .switchFile(`browser/gists/${testData.validGistId}`)
+    .switchFile(`browser/gists/${testData.validGistId}/ApplicationRegistry`)
+    .waitForElementVisible(`div[title='browser/gists/${testData.validGistId}/ApplicationRegistry']`)
+    .assert.containsText(`div[title='browser/gists/${testData.validGistId}/ApplicationRegistry'] > span`, 'ApplicationRegistry')
     .end()
   },
 

test-browser/tests/importFromGist.js

-'use strict'
-const init = require('../helpers/init')
-const sauce = require('./sauce')
-
-const testData = {
-  validGistId: '1859c97c6e1efc91047d725d5225888e',
-  invalidGistId: '6368b389f9302v32902msk2402'
-}
-
-module.exports = {
-  before: function (browser, done) {
-    init(browser, done)
-  },
-
-  'Load Gist Modal': function (browser) {
-    browser
-    .waitForElementVisible('#icon-panel', 10000)
-    .clickLaunchIcon('fileExplorers')
-    .scrollAndClick('div.file > div.btn-group > button:nth-child(1)')
-    .waitForElementVisible('h6.modal-title')
-    .assert.containsText('h6.modal-title', 'Load a Gist')
-    .waitForElementVisible('div.modal-body > div')
-    .assert.containsText('div.modal-body > div', 'Enter the ID of the Gist or URL you would like to load.')
-    .waitForElementVisible('#prompt_text')
-    .click('#modal-footer-cancel')
-  },
-
-  'Display Error Message For Invalid Gist ID': function (browser) {
-    browser
-    .waitForElementVisible('#icon-panel', 10000)
-    .clickLaunchIcon('fileExplorers')
-    .scrollAndClick('div.file > div.btn-group > button:nth-child(1)')
-    .waitForElementVisible('#prompt_text')
-    .setValue('#prompt_text', testData.invalidGistId)
-    .modalFooterOKClick()
-    .waitForElementVisible('div.modal-body > div')
-    .assert.containsText('div.modal-body > div', 'Gist load error: Not Found')
-    .modalFooterOKClick()
-  },
-
-  'Import From Gist For Valid Gist ID': function (browser) {
-    browser
-    .waitForElementVisible('#icon-panel', 10000)
-    .clickLaunchIcon('fileExplorers')
-    .scrollAndClick('div.file > div.btn-group > button:nth-child(1)')
-    .waitForElementVisible('#prompt_text')
-    .setValue('#prompt_text', testData.validGistId)
-    .modalFooterOKClick()
-    .switchFile(`browser/gists/${testData.validGistId}`)
-    .switchFile(`browser/gists/${testData.validGistId}/ApplicationRegistry`)
-    .waitForElementVisible(`div[title='browser/gists/${testData.validGistId}/ApplicationRegistry']`)
-    .assert.containsText(`div[title='browser/gists/${testData.validGistId}/ApplicationRegistry'] > span`, 'ApplicationRegistry')
-    .end()
-  },
-
-  tearDown: sauce
-}