From c5102786105723c0cd3b6b706216363ab6b90d29 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Wed, 29 May 2024 13:05:52 +0100
Subject: [PATCH] Added e2e

---
 apps/remix-ide-e2e/src/tests/layout.test.ts   | 79 +++++++++++++++++++
 .../panel/src/lib/plugins/panel-header.tsx    |  6 +-
 2 files changed, 82 insertions(+), 3 deletions(-)
 create mode 100644 apps/remix-ide-e2e/src/tests/layout.test.ts

diff --git a/apps/remix-ide-e2e/src/tests/layout.test.ts b/apps/remix-ide-e2e/src/tests/layout.test.ts
new file mode 100644
index 0000000000..23398171d8
--- /dev/null
+++ b/apps/remix-ide-e2e/src/tests/layout.test.ts
@@ -0,0 +1,79 @@
+'use strict'
+import { NightwatchBrowser } from 'nightwatch'
+import init from '../helpers/init'
+
+module.exports = {
+  before: function (browser: NightwatchBrowser, done: VoidFunction) {
+    init(browser, done)
+  },
+
+  '@sources': function () {
+    return sources
+  },
+
+  'Should pin solidity compiler plugin to the right and switch focus for left side panel to the file-explorer': function (browser: NightwatchBrowser) {
+    browser.waitForElementVisible('[data-id="movePluginToRight"]')
+      .click('[data-id="movePluginToRight"]')
+      .waitForElementVisible('[data-id="movePluginToLeft"]')
+      .waitForElementVisible('.pinned-panel h6[data-id="sidePanelSwapitTitle"]')
+      .assert.containsText('.sidepanel h6[data-id="sidePanelSwapitTitle"]', 'FILE EXPLORER')
+      .assert.containsText('.pinned-panel h6[data-id="sidePanelSwapitTitle"]', 'SOLIDITY COMPILER')
+  },
+  'Should unpin and focus on solidity compiler in the left side panel': function (browser: NightwatchBrowser) {
+    browser.waitForElementVisible('[data-id="movePluginToLeft"]')
+      .click('[data-id="movePluginToLeft"]')
+      .waitForElementVisible('[data-id="movePluginToRight"]')
+      .assert.containsText('.sidepanel h6[data-id="sidePanelSwapitTitle"]', 'SOLIDITY COMPILER')
+      .waitForElementNotVisible('.pinned-panel h6[data-id="sidePanelSwapitTitle"]')
+  },
+  'Should pin a plugin while a another plugin is already pinned': function (browser: NightwatchBrowser) {
+    browser.waitForElementVisible('[data-id="movePluginToRight"]')
+      .click('[data-id="movePluginToRight"]')
+      .waitForElementVisible('[data-id="movePluginToLeft"]')
+      .waitForElementVisible('.pinned-panel h6[data-id="sidePanelSwapitTitle"]')
+      .assert.containsText('.pinned-panel h6[data-id="sidePanelSwapitTitle"]', 'SOLIDITY COMPILER')
+      .clickLaunchIcon('udapp')
+      .click('[data-id="movePluginToRight"]')
+      .waitForElementVisible('[data-id="movePluginToLeft"]')
+      .assert.containsText('.pinned-panel h6[data-id="sidePanelSwapitTitle"]', 'DEPLOY & RUN TRANSACTIONS')
+      .assert.containsText('.sidepanel h6[data-id="sidePanelSwapitTitle"]', 'SOLIDITY COMPILER')
+  },
+  'Should pin a pinned plugin to the right after reloading the page': function (browser: NightwatchBrowser) {
+    browser.refreshPage()
+      .waitForElementVisible('.pinned-panel h6[data-id="sidePanelSwapitTitle"]')
+      .assert.containsText('.pinned-panel h6[data-id="sidePanelSwapitTitle"]', 'DEPLOY & RUN TRANSACTIONS')
+  },
+  'Should maintain logged state of udapp plugin after pinning and unpinning': function (browser: NightwatchBrowser) {
+    browser.waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts"]')
+      .click('*[data-id="treeViewLitreeViewItemcontracts"]')
+      .openFile('contracts/1_Storage.sol')
+      .pause(5000)
+      .waitForElementPresent('*[data-id="Deploy - transact (not payable)"]')
+      .click('*[data-id="Deploy - transact (not payable)"]')
+      .waitForElementPresent('#instance0xd9145CCE52D386f254917e481eB44e9943F39138')
+      .clickInstance(0)
+      .clickFunction('store - transact (not payable)', { types: 'uint256 num', values: '10' })
+      .clickFunction('retrieve - call')
+      .click('[data-id="movePluginToLeft"]')
+      .waitForElementVisible('[data-id="movePluginToRight"]')
+      .clickInstance(0)
+      .waitForElementContainsText('[data-id="treeViewLi0"]', 'uint256: 10')
+  },
+  'Should maintain logged state of search plugin after pinning and unpinning': function (browser: NightwatchBrowser) {
+    browser.clickLaunchIcon('search')
+      .waitForElementVisible('*[id="search_input"]')
+      .waitForElementVisible('*[id="search_include"]')
+      .setValue('*[id="search_include"]', ', *.*').pause(2000)
+      .setValue('*[id="search_input"]', 'read').sendKeys('*[id="search_input"]', browser.Keys.ENTER)
+      .pause(1000)
+      .waitForElementContainsText('*[data-id="search_results"]', '3_BALLOT.SOL', 60000)
+      .waitForElementContainsText('*[data-id="search_results"]', 'contracts', 60000)
+      .waitForElementContainsText('*[data-id="search_results"]', 'README.TXT', 60000)
+      .click('[data-id="movePluginToRight"]')
+      .waitForElementContainsText('*[data-id="search_results"]', '3_BALLOT.SOL')
+      .waitForElementContainsText('*[data-id="search_results"]', 'contracts')
+      .waitForElementContainsText('*[data-id="search_results"]', 'README.TXT')
+  }
+}
+
+const sources = []
diff --git a/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx b/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
index 438d1bf87a..b2d87297e2 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
+++ b/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
@@ -48,9 +48,9 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
             plugin && plugin.profile.name !== 'filePanel' && (
               <RenderIfNot condition={plugin.profile.name === 'filePanel'}>
                 <RenderIf condition={plugin.pinned}>
-                  <div className='d-flex' onClick={unPinPlugin}>
+                  <div className='d-flex' data-id="movePluginToLeft" onClick={unPinPlugin}>
                     <CustomTooltip placement="auto-end" tooltipId="unPinnedMsg" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="panel.unPinnedMsg" />}>
-                      <i aria-hidden="true" className="mt-1 px-1 pl-2 fas fa-solid fa-square-left"></i>
+                      <i aria-hidden="true" className="mt-1 px-2 fas fa-solid fa-square-left"></i>
                     </CustomTooltip>
                   </div>
                 </RenderIf>
@@ -76,7 +76,7 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
             plugin && plugin.profile.name !== 'filePanel' && (
               <RenderIfNot condition={plugin.profile.name === 'filePanel'}>
                 <RenderIfNot condition={plugin.pinned}>
-                  <div className='d-flex' onClick={pinPlugin}>
+                  <div className='d-flex' data-id="movePluginToRight" onClick={pinPlugin}>
                     <CustomTooltip placement="auto-end" tooltipId="pinnedMsg" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="panel.pinnedMsg" />}>
                       <i aria-hidden="true" className="mt-1 px-1 pl-2 fas fa-solid fa-square-right"></i>
                     </CustomTooltip>