From 1404bab6751bf8779ed013ab7b2388f423103dd6 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Tue, 14 Feb 2023 20:08:08 +0100
Subject: [PATCH] Fixed failing e2e tests

---
 apps/remix-ide-e2e/src/tests/proxy.test.ts    | 21 ++++---
 .../src/lib/components/custom-dropdown.tsx    |  7 ++-
 .../src/lib/components/contractGUI.tsx        | 63 +++++++++----------
 3 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/proxy.test.ts b/apps/remix-ide-e2e/src/tests/proxy.test.ts
index d6d51ed57d..6707b60627 100644
--- a/apps/remix-ide-e2e/src/tests/proxy.test.ts
+++ b/apps/remix-ide-e2e/src/tests/proxy.test.ts
@@ -4,6 +4,8 @@ import init from '../helpers/init'
 
 let firstProxyAddress: string
 let lastProxyAddress: string
+let shortenedFirstAddress: string
+let shortenedLastAddress: string
 module.exports = {
   '@disabled': true,
   before: function (browser: NightwatchBrowser, done: VoidFunction) {
@@ -94,6 +96,7 @@ module.exports = {
     browser
       .getAddressAtPosition(1, (address) => {
         firstProxyAddress = address
+        shortenedFirstAddress = address.slice(0, 5) + '...' + address.slice(address.length - 5, address.length)
       })
       .clickInstance(1)
       .perform((done) => {
@@ -143,6 +146,7 @@ module.exports = {
     browser
       .getAddressAtPosition(1, (address) => {
         lastProxyAddress = address
+        shortenedLastAddress = address.slice(0, 5) + '...' + address.slice(address.length - 5, address.length)
       })
       .clickInstance(1)
       .perform((done) => {
@@ -157,7 +161,7 @@ module.exports = {
       })
   },
 
-  'Should upgrade contract using last deployed proxy address (MyTokenV1 to MyTokenV2) #group1': function (browser: NightwatchBrowser) {
+  'Should upgrade contract by selecting a previously deployed proxy address from dropdown (MyTokenV1 to MyTokenV2) #group1': function (browser: NightwatchBrowser) {
     browser
       .waitForElementPresent('[data-id="deployAndRunClearInstances"]')
       .click('[data-id="deployAndRunClearInstances"]')
@@ -171,10 +175,12 @@ module.exports = {
       .click('select.udapp_contractNames option[value=MyTokenV2]')
       .waitForElementPresent('[data-id="contractGUIUpgradeImplementationLabel"]')
       .click('[data-id="contractGUIUpgradeImplementationLabel"]')
-      .waitForElementPresent('[data-id="contractGUIProxyAddressLabel"]')
-      .click('[data-id="contractGUIProxyAddressLabel"]')
-      .waitForElementPresent('[data-id="lastDeployedERC1967Address"]')
-      .assert.containsText('[data-id="lastDeployedERC1967Address"]', lastProxyAddress)
+      .waitForElementPresent('[data-id="toggleProxyAddressDropdown"]')
+      .click('[data-id="toggleProxyAddressDropdown"]')
+      .waitForElementVisible('[data-id="proxy-dropdown-items"]')
+      .assert.textContains('[data-id="proxy-dropdown-items"]', shortenedFirstAddress)
+      .assert.textContains('[data-id="proxy-dropdown-items"]', shortenedLastAddress)
+      .click('[data-id="proxyAddress1"]')
       .createContract('')
       .waitForElementContainsText('[data-id="udappNotifyModalDialogModalTitle-react"]', 'Deploy Implementation & Update Proxy')
       .waitForElementVisible('[data-id="udappNotify-modal-footer-ok-react"]')
@@ -212,9 +218,8 @@ module.exports = {
       .click('select.udapp_contractNames')
       .click('select.udapp_contractNames option[value=MyTokenV2]')
       .waitForElementPresent('[data-id="contractGUIUpgradeImplementationLabel"]')
-      .waitForElementPresent('[data-id="contractGUIProxyAddressLabel"]')
-      .click('[data-id="contractGUIProxyAddressLabel"]')
-      .waitForElementPresent('[data-id="ERC1967AddressInput"]')
+      .waitForElementPresent('[data-id="toggleProxyAddressDropdown"]')
+      .clearValue('[data-id="ERC1967AddressInput"]')
       .setValue('[data-id="ERC1967AddressInput"]', firstProxyAddress)
       .createContract('')
       .waitForElementContainsText('[data-id="udappNotifyModalDialogModalTitle-react"]', 'Deploy Implementation & Update Proxy')
diff --git a/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx b/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx
index fd59a13e27..04d31c4839 100644
--- a/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx
+++ b/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx
@@ -63,16 +63,19 @@ export const ProxyAddressToggle = React.forwardRef(({ address, onClick, classNam
       e.preventDefault()
       onClick(e)
     }}
-  className={'d-flex '+ className.replace('dropdown-toggle', '')}>
+    className={'d-flex '+ className.replace('dropdown-toggle', '')}
+    data-id="toggleProxyAddressDropdown"
+  >
     <input
       onChange={(e) => {
         e.preventDefault()
         onChange(e)
       }}
-      className="udapp_input udapp_ataddressinput form-control"
+      className="udapp_input form-control"
       value={address}
       placeholder="Enter Proxy Address"
       style={{ width: '100%' }}
+      data-id="ERC1967AddressInput"
     />
   </div>
 ))
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
index 89976a57dc..fcfc380f18 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
@@ -37,12 +37,6 @@ export function ContractGUI (props: ContractGUIProps) {
     }
   }, [props.deployOption])
 
-  useEffect(() => {
-    if (!proxyAddress && props.proxy && props.proxy.deployments.length > 0) {
-      setProxyAddress(props.proxy.deployments[0].address)
-    }
-  }, [props.proxy])
-
   useEffect(() => {
     if (props.title) {
       setTitle(props.title)
@@ -531,33 +525,36 @@ export function ContractGUI (props: ContractGUIProps) {
               toggleUpgradeImp ? "d-flex" : "d-none"
             }`}
           >
-            <Dropdown onToggle={toggleDropdown} show={showDropdown}>
-              <Dropdown.Toggle id="dropdown-custom-components" as={ProxyAddressToggle} address={proxyAddress} onChange={handleAddressChange} className="d-inline-block border border-dark bg-dark" />
-
-              { props.proxy.deployments.length > 0 &&
-                <Dropdown.Menu as={ProxyDropdownMenu} className='w-100 custom-dropdown-items' data-id="custom-dropdown-items" style={{ overflow: 'hidden' }}>
-                  {
-                    props.proxy.deployments.map((deployment, index) => (
-                      <CustomTooltip
-                        placement={"right"}
-                        tooltipClasses="text-nowrap"
-                        tooltipId={`proxyAddressTooltip${index}`}
-                        tooltipText={'Deployed ' + shortenDate(deployment.date)}
-                      >
-                          <Dropdown.Item
-                            key={index}
-                            onClick={() => {
-                              switchProxyAddress(deployment.address)
-                            }}
-                          >
-                            <span>{ proxyAddress === deployment.address ? <span>&#10003; { deployment.contractName + ' ' + shortenProxyAddress(deployment.address) } </span> : <span className="pl-3">{ deployment.contractName + ' ' + shortenProxyAddress(deployment.address) }</span> }</span>
-                          </Dropdown.Item>
-                        </CustomTooltip>
-                      ))
-                    }
-                  </Dropdown.Menu>
-                }
-              </Dropdown>
+            <div data-id="proxy-dropdown-items">
+              <Dropdown onToggle={toggleDropdown} show={showDropdown}>
+                <Dropdown.Toggle id="dropdown-custom-components" as={ProxyAddressToggle} address={proxyAddress} onChange={handleAddressChange} className="d-inline-block border border-dark bg-dark" />
+
+                { props.proxy.deployments.length > 0 &&
+                  <Dropdown.Menu as={ProxyDropdownMenu} className='w-100 custom-dropdown-items' style={{ overflow: 'hidden' }}>
+                    {
+                      props.proxy.deployments.map((deployment, index) => (
+                        <CustomTooltip
+                          placement={"right"}
+                          tooltipClasses="text-nowrap"
+                          tooltipId={`proxyAddressTooltip${index}`}
+                          tooltipText={'Deployed ' + shortenDate(deployment.date)}
+                        >
+                            <Dropdown.Item
+                              key={index}
+                              onClick={() => {
+                                switchProxyAddress(deployment.address)
+                              }}
+                              data-id={`proxyAddress${index}`}
+                            >
+                              <span>{ proxyAddress === deployment.address ? <span>&#10003; { deployment.contractName + ' ' + shortenProxyAddress(deployment.address) } </span> : <span className="pl-3">{ deployment.contractName + ' ' + shortenProxyAddress(deployment.address) }</span> }</span>
+                            </Dropdown.Item>
+                          </CustomTooltip>
+                        ))
+                      }
+                    </Dropdown.Menu>
+                  }
+                </Dropdown>
+            </div>
             <div className={`flex-column 'd-flex'}`}>
                 <div className="mb-2">
                   { proxyAddressError && <span className='text-lowercase' data-id="errorMsgProxyAddress" style={{ fontSize: '.8em' }}>{ proxyAddressError }</span> }