From 67c46bfc114c2dc58b63d1badb7e1d569b3ffa36 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Tue, 11 Feb 2020 16:07:29 +0000
Subject: [PATCH] Fixed failing tests

---
 src/app.js                              |  6 ++--
 src/app/components/side-panel.js        |  2 +-
 src/app/components/vertical-icons.js    |  2 +-
 src/app/panels/file-panel.js            |  2 +-
 src/app/panels/terminal.js              | 10 +++---
 src/app/ui/TreeView.js                  |  2 +-
 src/app/ui/landing-page/landing-page.js |  4 +--
 test-browser/tests/homepage.js          | 48 ++++++++++++-------------
 8 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/app.js b/src/app.js
index 6503f7590c..dc61a21b26 100644
--- a/src/app.js
+++ b/src/app.js
@@ -141,21 +141,21 @@ class App {
     if (self._view.el) return self._view.el
     // not resizable
     self._view.iconpanel = yo`
-      <div id="icon-panel" data-id="icon-panel" class="${css.iconpanel} bg-light">
+      <div id="icon-panel" data-id="remixIdeIconPanel" class="${css.iconpanel} bg-light">
       ${''}
       </div>
     `
 
     // center panel, resizable
     self._view.sidepanel = yo`
-      <div id="side-panel" data-id="side-panel" style="min-width: 320px;" class=${css.sidepanel}>
+      <div id="side-panel" data-id="remixIdeSidePanel" style="min-width: 320px;" class=${css.sidepanel}>
         ${''}
       </div>
     `
 
     // handle the editor + terminal
     self._view.mainpanel = yo`
-      <div id="main-panel" data-id="main-panel" class=${css.mainpanel}>
+      <div id="main-panel" data-id="remixIdeMainPanel" class=${css.mainpanel}>
         ${''}
       </div>
     `
diff --git a/src/app/components/side-panel.js b/src/app/components/side-panel.js
index 3a5f91853b..8ab0ca8f7f 100644
--- a/src/app/components/side-panel.js
+++ b/src/app/components/side-panel.js
@@ -132,7 +132,7 @@ export class SidePanel extends AbstractPanel {
 
     return yo`
       <header class="${css.swapitHeader} px-3">
-        <h6 class="${css.swapitTitle}" data-id="swapitTitle">${name}</h6>
+        <h6 class="${css.swapitTitle}" data-id="sidePanelFileExplorerTitle">${name}</h6>
         ${docLink}
         ${versionWarning}
       </header>
diff --git a/src/app/components/vertical-icons.js b/src/app/components/vertical-icons.js
index aa804413f3..4b46cdd51c 100644
--- a/src/app/components/vertical-icons.js
+++ b/src/app/components/vertical-icons.js
@@ -227,7 +227,7 @@ export class VerticalIcons extends Plugin {
         this.appManager.ensureActivated('home')
       }}"
       plugin="home" title="Home"
-      data-id="homeIcon"
+      data-id="iconPanelHomeIcon"
     >
     <svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
       <title>remix_logo1</title>
diff --git a/src/app/panels/file-panel.js b/src/app/panels/file-panel.js
index ed1c98e71e..dcb06c7455 100644
--- a/src/app/panels/file-panel.js
+++ b/src/app/panels/file-panel.js
@@ -64,7 +64,7 @@ module.exports = class Filepanel extends ViewPlugin {
 
     const explorers = yo`
       <div>
-        <div class=${css.treeview} data-id="fileExplorerInit">${fileExplorer.init()}</div>
+        <div class=${css.treeview} data-id="sidePanelFileExplorerTree">${fileExplorer.init()}</div>
         <div class="filesystemexplorer ${css.treeview}">${fileSystemExplorer.init()}</div>
       </div>
     `
diff --git a/src/app/panels/terminal.js b/src/app/panels/terminal.js
index 529e56adc3..efef8416bf 100644
--- a/src/app/panels/terminal.js
+++ b/src/app/panels/terminal.js
@@ -123,14 +123,14 @@ class Terminal extends Plugin {
 
     self._view.input.innerText = '\n'
     self._view.cli = yo`
-      <div id="terminalCli" data-id="terminalCli" class="${css.cli}">
+      <div id="terminalCli" data-id="mainPanelTerminalCli" class="${css.cli}">
         <span class=${css.prompt}>${'>'}</span>
         ${self._view.input}
       </div>
     `
     self._view.icon = yo`
       <i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize}
-      class="btn btn-secondary btn-sm align-items-center ${css.toggleTerminal} fas fa-angle-double-down" data-id="toggleTerminal"></i>`
+      class="btn btn-secondary btn-sm align-items-center ${css.toggleTerminal} fas fa-angle-double-down" data-id="mainPanelToggleTerminal"></i>`
     self._view.dragbar = yo`
       <div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
 
@@ -146,7 +146,7 @@ class Terminal extends Plugin {
     self._view.bar = yo`
       <div class="${css.bar}">
         ${self._view.dragbar}
-        <div class="${css.menu} border-top border-dark bg-light" data-id="toggleTerminalMenu">
+        <div class="${css.menu} border-top border-dark bg-light" data-id="mainPanelToggleTerminalMenu">
           ${self._view.icon}
           <div class=${css.clear} id="clearConsole" onclick=${clear}>
             <i class="fas fa-ban" aria-hidden="true" title="Clear console"
@@ -177,9 +177,9 @@ class Terminal extends Plugin {
       </div>
     `
     self._view.term = yo`
-      <div class="${css.terminal_container}" data-id="terminal_container" onscroll=${throttle(reattach, 10)} onclick=${focusinput}>
+      <div class="${css.terminal_container}" data-id="mainPanelTerminalContainer" onscroll=${throttle(reattach, 10)} onclick=${focusinput}>
         ${self._components.autoCompletePopup.render()}
-        <div class="bg-secondary" data-id="terminalContainerDisplay" style="
+        <div class="bg-secondary" data-id="mainPanelTerminalContainer" style="
           position: absolute;
           height: 100%;
           width: 100%;
diff --git a/src/app/ui/TreeView.js b/src/app/ui/TreeView.js
index 6c16722ae2..be3376f982 100644
--- a/src/app/ui/TreeView.js
+++ b/src/app/ui/TreeView.js
@@ -91,7 +91,7 @@ class TreeView {
       var list = yo`<ul key=${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', `toggle_${keyPath}`)
+      caret.setAttribute('data-id', `sidePanelToggle${keyPath}`)
       label.onclick = function () {
         self.expand(keyPath)
       }
diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js
index f8ec94a839..d5f3fad6ee 100644
--- a/src/app/ui/landing-page/landing-page.js
+++ b/src/app/ui/landing-page/landing-page.js
@@ -177,7 +177,7 @@ export class LandingPage extends ViewPlugin {
       document.location.reload()
     }
     const img = yo`<img src="assets/img/hexagon-remix-greengrey-texture.png"></img>`
-    let container = yo`<div class="${css.homeContainer} bg-light" data-id="homeContainer">
+    let container = yo`<div class="${css.homeContainer} bg-light" data-id="mainPanelHomeContainer">
       <div>
         <div class="alert alert-info clearfix ${css.thisJumboton}">
           <div class="${css.headlineContainer}">
@@ -189,7 +189,7 @@ export class LandingPage extends ViewPlugin {
           </div>
         </div><!-- end of jumbotron -->
       </div><!-- end of jumbotron container -->
-      <div class="row ${css.hpSections}" data-id="hpSections">
+      <div class="row ${css.hpSections}" data-id="mainPanelHpSections">
         <div id="col1" class="col-sm-7">
           <div class="mb-5">
             <h4>Environments</h4>
diff --git a/test-browser/tests/homepage.js b/test-browser/tests/homepage.js
index 83a0ef5316..3a5b252fa8 100644
--- a/test-browser/tests/homepage.js
+++ b/test-browser/tests/homepage.js
@@ -7,65 +7,65 @@ module.exports = {
     init(browser, done, 'http://127.0.0.1:8080', false)
   },
   'Loads Icon\'s Panel': function (browser) {
-    browser.waitForElementVisible('div[data-id="icon-panel"]', 10000)
-    .waitForElementVisible('div[data-id="homeIcon"]')
+    browser.waitForElementVisible('div[data-id="remixIdeIconPanel"]', 10000)
+    .waitForElementVisible('div[data-id="iconPanelHomeIcon"]')
     .waitForElementVisible('div[plugin="fileExplorers"]')
     .waitForElementVisible('div[plugin="pluginManager"]')
     .waitForElementVisible('div[plugin="settings"]')
   },
 
   'Loads Side Panel': function (browser) {
-    browser.waitForElementVisible('div[data-id="side-panel"]')
-    .assert.containsText('h6[data-id="swapitTitle"]', 'FILE EXPLORERS')
-    .waitForElementVisible('div[data-id="fileExplorerInit"]')
+    browser.waitForElementVisible('div[data-id="remixIdeSidePanel"]')
+    .assert.containsText('h6[data-id="sidePanelFileExplorerTitle"]', 'FILE EXPLORERS')
+    .waitForElementVisible('div[data-id="sidePanelFileExplorerTree"]')
     .waitForElementVisible('li[key="browser/4_Ballot_test.sol"]')
   },
 
   'Loads Main View': function (browser) {
     browser.waitForElementVisible('div[data-id="mainPanelPluginsContainer"]')
-    .waitForElementVisible('div[data-id="homeContainer"]')
-    .waitForElementVisible('div[data-id="hpSections"]')
-    .waitForElementVisible('div[data-id="terminalContainerDisplay"]')
+    .waitForElementVisible('div[data-id="mainPanelHomeContainer"]')
+    .waitForElementVisible('div[data-id="mainPanelHpSections"]')
+    .waitForElementVisible('div[data-id="mainPanelTerminalContainer"]')
   },
 
   'Loads terminal': function (browser) {
     browser
-    .waitForElementVisible('div[data-id="terminalCli"]', 10000)
+    .waitForElementVisible('div[data-id="mainPanelTerminalCli"]', 10000)
     .journalLastChildIncludes('Welcome to Remix')
   },
 
   'Toggles Side Panel': function (browser) {
-    browser.waitForElementVisible('div[data-id="side-panel"]')
-    .assert.containsText('h6[data-id="swapitTitle"]', 'FILE EXPLORERS')
+    browser.waitForElementVisible('div[data-id="remixIdeSidePanel"]')
+    .assert.containsText('h6[data-id="sidePanelFileExplorerTitle"]', 'FILE EXPLORERS')
     .clickLaunchIcon('fileExplorers')
-    .assert.hidden('div[data-id="side-panel"]')
+    .assert.hidden('div[data-id="remixIdeSidePanel"]')
     .clickLaunchIcon('fileExplorers')
-    .assert.visible('div[data-id="side-panel"]')
-    .assert.containsText('h6[data-id="swapitTitle"]', 'FILE EXPLORERS')
+    .assert.visible('div[data-id="remixIdeSidePanel"]')
+    .assert.containsText('h6[data-id="sidePanelFileExplorerTitle"]', 'FILE EXPLORERS')
   },
 
   'Toggles Terminal': function (browser) {
-    browser.waitForElementVisible('div[data-id="terminal_container"]')
-    .assert.visible('div[data-id="terminalContainerDisplay"]')
-    .click('i[data-id="toggleTerminal"]')
-    .checkElementStyle('div[data-id="toggleTerminalMenu"]', 'height', '35px')
-    .click('i[data-id="toggleTerminal"]')
-    .assert.visible('div[data-id="terminalContainerDisplay"]')
+    browser.waitForElementVisible('div[data-id="mainPanelTerminalContainer"]')
+    .assert.visible('div[data-id="mainPanelTerminalContainer"]')
+    .click('i[data-id="mainPanelToggleTerminal"]')
+    .checkElementStyle('div[data-id="mainPanelToggleTerminalMenu"]', 'height', '35px')
+    .click('i[data-id="mainPanelToggleTerminal"]')
+    .assert.visible('div[data-id="mainPanelTerminalContainer"]')
   },
 
   'Toggles File Explorer Browser': function (browser) {
     browser
-    .waitForElementVisible('div[data-id="fileExplorerInit"]')
+    .waitForElementVisible('div[data-id="sidePanelFileExplorerTree"]')
     .assert.visible('ul[key="browser"]')
-    .click('div[data-id="toggle_browser"]')
+    .click('div[data-id="sidePanelTogglebrowser"]')
     .assert.hidden('ul[key="browser"]')
-    .click('div[data-id="toggle_browser"]')
+    .click('div[data-id="sidePanelTogglebrowser"]')
     .assert.visible('ul[key="browser"]')
   },
 
   'Switch Tabs using tabs icon': function (browser) {
     browser
-    .waitForElementVisible('div[data-id="fileExplorerInit"]')
+    .waitForElementVisible('div[data-id="sidePanelFileExplorerTree"]')
     .switchFile('browser/3_Ballot.sol')
     .assert.containsText('div[title="browser/3_Ballot.sol"]', '3_Ballot.sol')
     .click('span[class^=dropdownCaret]')