Added tests for connect to local plugin to pluginManager tests

package.json

@@ -176,7 +176,7 @@
     "nightwatch_local_gist": "nightwatch ./test-browser/tests/gist.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_plugin": "nightwatch ./test-browser/tests/plugin.js --config nightwatch.js --env chrome ",
+    "nightwatch_local_pluginManager": "nightwatch ./test-browser/tests/pluginManager.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/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

@@ -196,7 +196,7 @@ class PluginManagerComponent extends ViewPlugin {
       <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">
+          <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>

src/app/ui/modaldialog.js

@@ -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/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

@@ -1,6 +1,11 @@
 '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) {
@@ -53,7 +58,7 @@ module.exports = {
     .waitForElementVisible('*[data-id="pluginManagerComponentActivateButtonudapp"]')
   },
 
-  'Grant plugin permission (ZOKRATES)': function (browser) {
+  'Should grant plugin permission (ZOKRATES)': function (browser) {
     browser.waitForElementVisible('*[data-id="pluginManagerComponentPluginManager"]')
     .click('*[data-id="pluginManagerSettingsButton"]')
     .waitForElementVisible('*[data-id="pluginManagerSettingsPermissionForm"]')
@@ -74,7 +79,7 @@ module.exports = {
     .modalFooterOKClick()
   },
 
-  'Revert plugin permission (ZOKRATES)': function (browser) {
+  'Should revert plugin permission (ZOKRATES)': function (browser) {
     browser.waitForElementVisible('*[data-id="verticalIconsSettingsIcons"]')
     .click('*[data-id="verticalIconsSettingsIcons"]')
     .waitForElementVisible('*[data-id="pluginManagerSettingsButton"]')
@@ -86,6 +91,37 @@ module.exports = {
     .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()
   },