Merge pull request #2601 from ethereum/e2e-tests

Plugin Manager Tests

package.json

@@ -177,6 +177,7 @@
     "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 ",
     "nightwatch_local_publishContract": "nightwatch ./test-browser/tests/publishContract.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",

src/app/components/local-plugin.js

@@ -76,11 +76,11 @@ module.exports = class LocalPlugin {
     const radioSelection = (key, label, message) => {
       return this.profile[key] === label
         ? yo`<div class="radio">
-          <input class="form-check-input" type="radio" name="${key}" onclick="${e => this.updateProfile(key, e)}" value="${label}" id="${label}" checked="checked" />
+          <input class="form-check-input" type="radio" name="${key}" onclick="${e => this.updateProfile(key, e)}" value="${label}" id="${label}" data-id="localPluginRadioButton${label}" checked="checked" />
           <label class="form-check-label" for="${label}">${message}</label>
         </div>`
         : yo`<div class="radio">
-          <input class="form-check-input" type="radio" name="${key}" onclick="${e => this.updateProfile(key, e)}" value="${label}" id="${label}" />
+          <input class="form-check-input" type="radio" name="${key}" onclick="${e => this.updateProfile(key, e)}" value="${label}" id="${label}" data-id="localPluginRadioButton${label}" />
           <label class="form-check-label" for="${label}">${message}</label>
         </div>`
     }
@@ -89,15 +89,15 @@ module.exports = class LocalPlugin {
     <form id="local-plugin-form">
       <div class="form-group">
         <label for="plugin-name">Plugin Name <small>(required)</small></label>
-        <input class="form-control" onchange="${e => this.updateName(e)}" value="${name}" id="plugin-name" placeholder="Should be camelCase">
+        <input class="form-control" onchange="${e => this.updateName(e)}" value="${name}" id="plugin-name" data-id="localPluginName" placeholder="Should be camelCase">
       </div>
       <div class="form-group">
         <label for="plugin-displayname">Display Name</label>
-        <input class="form-control" onchange="${e => this.updateDisplayName(e)}" value="${displayName}" id="plugin-displayname" placeholder="Name in the header">
+        <input class="form-control" onchange="${e => this.updateDisplayName(e)}" value="${displayName}" id="plugin-displayname" data-id="localPluginDisplayName" placeholder="Name in the header">
       </div>
       <div class="form-group">
         <label for="plugin-url">Url <small>(required)</small></label>
-        <input class="form-control" onchange="${e => this.updateUrl(e)}" value="${url}" id="plugin-url" placeholder="ex: https://localhost:8000">
+        <input class="form-control" onchange="${e => this.updateUrl(e)}" value="${url}" id="plugin-url" data-id="localPluginUrl" placeholder="ex: https://localhost:8000">
       </div>
       <h6>Type of connection <small>(required)</small></h6>
       <div class="form-check form-group">

src/app/components/plugin-manager-component.js

@@ -106,11 +106,11 @@ class PluginManagerComponent extends ViewPlugin {
 
     const activationButton = isActive
       ? yo`
-      <button onclick="${_ => this.appManager.deactivateOne(name)}" class="btn btn-secondary btn-sm">
+      <button onclick="${_ => this.appManager.deactivateOne(name)}" class="btn btn-secondary btn-sm" data-id="pluginManagerComponentDeactivateButton${name}">
         Deactivate
       </button>`
       : yo`
-      <button onclick="${_ => this.appManager.activateOne(name)}" class="btn btn-success btn-sm">
+      <button onclick="${_ => this.appManager.activateOne(name)}" class="btn btn-success btn-sm" data-id="pluginManagerComponentActivateButton${name}">
         Activate
       </button>`
 
@@ -179,34 +179,34 @@ class PluginManagerComponent extends ViewPlugin {
       ? yo`
       <nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
         <span class="navbar-brand plugins-list-title">Active Modules</span>
-        <span class="badge badge-primary">${actives.length}</span>
+        <span class="badge badge-primary" data-id="pluginManagerComponentActiveTilesCount">${actives.length}</span>
       </nav>`
       : ''
     const inactiveTile = inactives.length !== 0
       ? yo`
       <nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
         <span class="navbar-brand plugins-list-title h6 mb-0 mr-2">Inactive Modules</span>
-        <span class="badge badge-primary" style = "cursor: default;">${inactives.length}</span>
+        <span class="badge badge-primary" style = "cursor: default;" data-id="pluginManagerComponentInactiveTilesCount">${inactives.length}</span>
       </nav>`
       : ''
 
     const settings = new PluginManagerSettings().render()
 
     const rootView = yo`
-      <div id='pluginManager'>
-        <header class="form-group ${css.pluginSearch} plugins-header py-3 px-4 border-bottom">
-          <input onkeyup="${e => this.filterPlugins(e)}" class="${css.pluginSearchInput} form-control" placeholder="Search">
-          <button onclick="${_ => this.openLocalPlugin()}" class="${css.pluginSearchButton} btn bg-transparent text-dark border-0 mt-2 text-underline">
+      <div id='pluginManager' data-id="pluginManagerComponentPluginManager">
+        <header class="form-group ${css.pluginSearch} plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
+          <input onkeyup="${e => this.filterPlugins(e)}" class="${css.pluginSearchInput} form-control" placeholder="Search" data-id="pluginManagerComponentSearchInput">
+          <button onclick="${_ => this.openLocalPlugin()}" class="${css.pluginSearchButton} btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton">
             Connect to a Local Plugin
           </button>
         </header>
-        <section>
+        <section data-id="pluginManagerComponentPluginManagerSection">
           ${activeTile}
-          <div class="list-group list-group-flush plugins-list-group">
+          <div class="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
             ${actives.map(name => this.renderItem(name))}
           </div>
           ${inactiveTile}
-          <div class="list-group list-group-flush plugins-list-group">
+          <div class="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentInactiveTile">
             ${inactives.map(name => this.renderItem(name))}
           </div>
         </section>

src/app/components/plugin-manager-settings.js

@@ -89,9 +89,9 @@ export class PluginManagerSettings {
         <div class="form-group ${css.permissionKey}">
           <div class="${css.checkbox}">
             ${checkbox}
-            <label for="permission-${name}">Allow plugin ${name} to write on ${key}</label>
+            <label for="permission-${name}" data-id="pluginManagerSettingsPermission${name}">Allow plugin ${name} to write on ${key}</label>
           </div>
-          <i onclick="${() => this.clearPersmission(key, name)}" class="fa fa-trash-alt"></i>
+          <i onclick="${() => this.clearPersmission(key, name)}" class="fa fa-trash-alt" data-id="pluginManagerSettingsRemovePermission${name}"></i>
         </div>`
       }
 
@@ -103,7 +103,7 @@ export class PluginManagerSettings {
       <div>
         <div class="${css.permissionKey}">
           <h6>${key} :</h6>
-          <i onclick="${() => this.clearAllPersmission(key)}" class="far fa-trash-alt"></i>
+          <i onclick="${() => this.clearAllPersmission(key)}" class="far fa-trash-alt" data-id="pluginManagerSettingsClearAllPermission"></i>
         </div>
         ${byModule}
       </div>`
@@ -117,7 +117,7 @@ export class PluginManagerSettings {
       ? yo`<h4>No Permission requested yet.</h4>`
       : yo`<h4>Current Permission settings</h4>`
 
-    return yo`<form class="${css.permissionForm}">
+    return yo`<form class="${css.permissionForm}" data-id="pluginManagerSettingsPermissionForm">
       ${title}
       <hr/>
       ${permissions}
@@ -127,7 +127,7 @@ export class PluginManagerSettings {
   render () {
     return yo`
     <footer class="bg-light ${css.permissions} remix-bg-opacity">
-      <button onclick="${() => this.openDialog()}" class="btn btn-primary settings-button">Settings</button>
+      <button onclick="${() => this.openDialog()}" class="btn btn-primary settings-button" data-id="pluginManagerSettingsButton">Settings</button>
     </footer>`
   }
 

src/app/ui/modaldialog.js

@@ -130,7 +130,7 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => {
 
 function html (opts) {
   return yo`
-  <div id="modal-dialog" class="modal" tabindex="-1" role="dialog">
+  <div id="modal-dialog" data-id="modalDialogContainer" class="modal" tabindex="-1" role="dialog">
     <div id="modal-background" class="modal-dialog" role="document">
       <div class="modal-content ${css.modalContent} ${opts.class}">
         <div class="modal-header">
@@ -139,8 +139,8 @@ function html (opts) {
             <i id="modal-close" title="Close" class="fas fa-times" aria-hidden="true"></i>
           </span>
         </div>
-        <div class="modal-body ${css.modalBody}"> - </div>
-        <div class="modal-footer" autofocus>
+        <div class="modal-body ${css.modalBody}" data-id="modalDialogModalBody"> - </div>
+        <div class="modal-footer" data-id="modalDialogModalFooter" autofocus>
           <span id="modal-footer-ok" class="${css['modalFooterOk']} modal-ok btn btn-sm btn-light" tabindex='5'>OK</span>
           <span id="modal-footer-cancel" class="${css['modalFooterCancel']} modal-cancel btn btn-sm btn-light" tabindex='10' data-dismiss="modal">Cancel</span>
         </div>

src/app/ui/persmission-handler.js

@@ -140,8 +140,8 @@ export class PermissionHandler {
         : delete this.permissions[to.name][from.name]
     }
     const rememberSwitch = remember
-      ? yo`<input type="checkbox" onchange="${switchMode}" checkbox class="custom-control-input" id="remember">`
-      : yo`<input type="checkbox" onchange="${switchMode}" class="custom-control-input" id="remember">`
+      ? yo`<input type="checkbox" onchange="${switchMode}" checkbox class="custom-control-input" id="remember" data-id="permissionHandlerRememberChecked">`
+      : yo`<input type="checkbox" onchange="${switchMode}" class="custom-control-input" id="remember" data-id="permissionHandlerRememberUnchecked">`
     const message = remember
       ? `"${fromName}" has changed and would like to access "${toName}"`
       : `"${fromName}" would like to access "${toName}"`
@@ -155,7 +155,7 @@ export class PermissionHandler {
       </article>
       
       <article>
-        <h4>${message} :</h4>
+        <h4 data-id="permissionHandlerMessage">${message} :</h4>
         <h6>${fromName}</h6>
         <p>${from.description || yo`<i>No description Provided</i>`}</p>
         <h6>${toName} :</p>
@@ -165,7 +165,7 @@ export class PermissionHandler {
       <article class="${css.remember}">
         <div class="custom-control custom-checkbox">
           ${rememberSwitch}
-          <label class="custom-control-label" for="remember">Remember this choice</label>
+          <label class="custom-control-label" for="remember" data-id="permissionHandlerRememberChoice">Remember this choice</label>
         </div>
         <button class="btn btn-sm" onclick="${_ => this.clear()}">Reset all Permissions</button>
       </article>

src/app/ui/tooltip.js

@@ -69,7 +69,7 @@ class Toaster {
       ` : ``
 
       this.tooltip = yo`
-        <div class="${css.tooltip} alert alert-info p-2"  onmouseenter=${() => { over() }} onmouseleave=${() => { out() }}>
+        <div data-id="tooltipPopup" class="${css.tooltip} alert alert-info p-2"  onmouseenter=${() => { over() }} onmouseleave=${() => { out() }}>
           <span class="px-2">
             ${shortTooltipText}
             ${button}

test-browser/tests/pluginManager.js

@@ -0,0 +1,129 @@
+'use strict'
+const init = require('../helpers/init')
+const sauce = require('./sauce')
+const testData = {
+  pluginName: 'remixIde',
+  pluginDisplayName: 'Remix IDE',
+  pluginUrl: 'https://remix-project.org/'
+}
+
+module.exports = {
+  before: function (browser, done) {
+    init(browser, done, 'http://127.0.0.1:8080', false)
+  },
+
+  'Should Load Plugin Manager': function (browser) {
+    browser.waitForElementVisible('*[data-id="remixIdeSidePanel"]')
+    .pause(3000)
+    .click('*[plugin="pluginManager"]')
+    .waitForElementVisible('*[data-id="pluginManagerComponentPluginManager"]')
+    .assert.containsText('*[data-id="sidePanelSwapitTitle"]', 'PLUGIN MANAGER')
+  },
+
+  'Should Search for plugins': function (browser) {
+    browser.waitForElementVisible('*[data-id="pluginManagerComponentPluginManager"]')
+     .click('*[data-id="pluginManagerComponentSearchInput"]')
+     .keys('debugger')
+     .waitForElementVisible('*[data-id="pluginManagerComponentActivateButtondebugger"]')
+     .clearValue('*[data-id="pluginManagerComponentSearchInput"]')
+     .click('*[data-id="pluginManagerComponentSearchInput"]')
+     .keys('Deploy & run transactions')
+     .waitForElementVisible('*[data-id="pluginManagerComponentActivateButtonudapp"]')
+     .clearValue('*[data-id="pluginManagerComponentSearchInput"]')
+     .click('*[data-id="pluginManagerComponentSearchInput"]')
+     .keys('ZoKrates')
+     .waitForElementVisible('*[data-id="pluginManagerComponentActivateButtonZoKrates"]')
+     .clearValue('*[data-id="pluginManagerComponentSearchInput"]')
+     .click('*[data-id="pluginManagerComponentSearchInput"]')
+     .keys(browser.Keys.ENTER)
+  },
+
+  'Should activate plugins': function (browser) {
+    browser.waitForElementVisible('*[data-id="pluginManagerComponentPluginManager"]')
+    .click('*[data-id="pluginManagerComponentPluginManager"]')
+    .scrollAndClick('*[data-id="pluginManagerComponentActivateButtondebugger"]')
+    .waitForElementVisible('*[data-id="pluginManagerComponentDeactivateButtondebugger"]')
+    .scrollAndClick('*[data-id="pluginManagerComponentActivateButtonudapp"]')
+    .waitForElementVisible('*[data-id="pluginManagerComponentDeactivateButtonudapp"]')
+    .scrollAndClick('*[data-id="pluginManagerComponentActivateButtonZoKrates"]')
+    .waitForElementVisible('*[data-id="pluginManagerComponentDeactivateButtonZoKrates"]')
+  },
+
+  'Should deactivate plugins': function (browser) {
+    browser.waitForElementVisible('*[data-id="pluginManagerComponentPluginManager"]')
+    .click('*[data-id="pluginManagerComponentPluginManager"]')
+    .scrollAndClick('*[data-id="pluginManagerComponentDeactivateButtondebugger"]')
+    .waitForElementVisible('*[data-id="pluginManagerComponentActivateButtondebugger"]')
+    .scrollAndClick('*[data-id="pluginManagerComponentDeactivateButtonudapp"]')
+    .waitForElementVisible('*[data-id="pluginManagerComponentActivateButtonudapp"]')
+  },
+
+  'Should grant plugin permission (ZOKRATES)': function (browser) {
+    browser.waitForElementVisible('*[data-id="pluginManagerComponentPluginManager"]')
+    .click('*[data-id="pluginManagerSettingsButton"]')
+    .waitForElementVisible('*[data-id="pluginManagerSettingsPermissionForm"]')
+    .assert.containsText('*[data-id="pluginManagerSettingsPermissionForm"]', 'No Permission requested yet')
+    .modalFooterOKClick()
+    .click('*[data-id="verticalIconsFileExplorerIcons"]')
+    .switchFile('browser/3_Ballot.sol')
+    .click('*[plugin="ZoKrates"]')
+    .pause(5000)
+    .frame(0)
+    .useXpath().click("//span[text()='Compile']")
+    .frameParent()
+    .useCss().waitForElementVisible('*[data-id="modalDialogContainer"]')
+    .assert.containsText('*[data-id="permissionHandlerMessage"]', 'ZOKRATES" WOULD LIKE TO ACCESS "FILE MANAGER" :')
+    .pause(2000)
+    .click('*[data-id="permissionHandlerRememberChoice"]')
+    .pause(2000)
+    .modalFooterOKClick()
+  },
+
+  'Should revert plugin permission (ZOKRATES)': function (browser) {
+    browser.waitForElementVisible('*[data-id="verticalIconsSettingsIcons"]')
+    .click('*[data-id="verticalIconsSettingsIcons"]')
+    .waitForElementVisible('*[data-id="pluginManagerSettingsButton"]')
+    .click('*[data-id="pluginManagerSettingsButton"]')
+    .waitForElementVisible('*[data-id="modalDialogContainer"]')
+    .click('*[data-id="pluginManagerSettingsPermissionForm"]')
+    .pause(2000)
+    .click('*[data-id="pluginManagerSettingsClearAllPermission"]')
+    .pause(2000)
+    .assert.containsText('*[data-id="pluginManagerSettingsPermissionForm"]', 'No Permission requested yet')
+    .modalFooterOKClick()
+  },
+
+  'Should connect a local plugin': function (browser) {
+    browser.waitForElementVisible('*[data-id="pluginManagerComponentPluginManager"]')
+    .click('*[data-id="pluginManagerComponentPluginSearchButton"]')
+    .waitForElementVisible('*[data-id="modalDialogContainer"]')
+    .click('*[data-id="modalDialogModalBody"]')
+    .setValue('*[data-id="localPluginName"]', testData.pluginName)
+    .setValue('*[data-id="localPluginDisplayName"]', testData.pluginDisplayName)
+    .setValue('*[data-id="localPluginUrl"]', testData.pluginUrl)
+    .click('*[data-id="localPluginRadioButtoniframe"]')
+    .click('*[data-id="localPluginRadioButtonsidePanel"]')
+    .click('*[data-id="modalDialogModalFooter"]')
+    .modalFooterOKClick()
+    .waitForElementVisible('*[data-id="pluginManagerComponentDeactivateButtonremixIde"]')
+  },
+
+  'Should display error message for creating already existing plugin': function (browser) {
+    browser.waitForElementVisible('*[data-id="pluginManagerComponentPluginManager"]')
+    .click('*[data-id="pluginManagerComponentPluginSearchButton"]')
+    .waitForElementVisible('*[data-id="modalDialogContainer"]')
+    .click('*[data-id="modalDialogModalBody"]')
+    .clearValue('*[data-id="localPluginName"]').setValue('*[data-id="localPluginName"]', testData.pluginName)
+    .clearValue('*[data-id="localPluginDisplayName"]').setValue('*[data-id="localPluginDisplayName"]', testData.pluginDisplayName)
+    .clearValue('*[data-id="localPluginUrl"]').setValue('*[data-id="localPluginUrl"]', testData.pluginUrl)
+    .click('*[data-id="localPluginRadioButtoniframe"]')
+    .click('*[data-id="localPluginRadioButtonsidePanel"]')
+    .click('*[data-id="modalDialogModalFooter"]')
+    .modalFooterOKClick()
+    .waitForElementVisible('*[data-id="tooltipPopup"]')
+    .assert.containsText('*[data-id="tooltipPopup"]', 'Cannot create Plugin : This name has already been used')
+    .end()
+  },
+
+  tearDown: sauce
+}