Fixed failing e2e tests

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"]')
+      .waitForElementPresent('[data-id="toggleProxyAddressDropdown"]')
-      .click('[data-id="contractGUIProxyAddressLabel"]')
+      .click('[data-id="toggleProxyAddressDropdown"]')
-      .waitForElementPresent('[data-id="lastDeployedERC1967Address"]')
+      .waitForElementVisible('[data-id="proxy-dropdown-items"]')
-      .assert.containsText('[data-id="lastDeployedERC1967Address"]', lastProxyAddress)
+      .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"]')
+      .waitForElementPresent('[data-id="toggleProxyAddressDropdown"]')
-      .click('[data-id="contractGUIProxyAddressLabel"]')
+      .clearValue('[data-id="ERC1967AddressInput"]')
-      .waitForElementPresent('[data-id="ERC1967AddressInput"]')
       .setValue('[data-id="ERC1967AddressInput"]', firstProxyAddress)
       .createContract('')
       .waitForElementContainsText('[data-id="udappNotifyModalDialogModalTitle-react"]', 'Deploy Implementation & Update Proxy')

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>
 ))

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,11 +525,12 @@ export function ContractGUI (props: ContractGUIProps) {
               toggleUpgradeImp ? "d-flex" : "d-none"
             }`}
           >
+            <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' data-id="custom-dropdown-items" style={{ overflow: 'hidden' }}>
+                  <Dropdown.Menu as={ProxyDropdownMenu} className='w-100 custom-dropdown-items' style={{ overflow: 'hidden' }}>
                     {
                       props.proxy.deployments.map((deployment, index) => (
                         <CustomTooltip
@@ -549,6 +544,7 @@ export function ContractGUI (props: ContractGUIProps) {
                               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>
@@ -558,6 +554,7 @@ export function ContractGUI (props: ContractGUIProps) {
                     </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> }