From af6e953ad06603509753f47773593c12f9e803a7 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 17 Dec 2024 17:28:26 +0100
Subject: [PATCH] fix e2e

---
 .../src/commands/selectAccount.ts             |  3 +-
 .../src/commands/switchEnvironment.ts         | 58 +++++++++----------
 .../src/lib/components/custom-dropdown.tsx    |  2 +-
 .../run-tab/src/lib/components/account.tsx    |  3 +-
 4 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/apps/remix-ide-e2e/src/commands/selectAccount.ts b/apps/remix-ide-e2e/src/commands/selectAccount.ts
index 6d529ba57ea..1674bd0afe7 100644
--- a/apps/remix-ide-e2e/src/commands/selectAccount.ts
+++ b/apps/remix-ide-e2e/src/commands/selectAccount.ts
@@ -5,7 +5,8 @@ class SelectAccount extends EventEmitter {
   command (this: NightwatchBrowser, account?: string): NightwatchBrowser {
     if (account) {
       this.api
-        .click(`*[data-id="runTabSelectAccount"] a:contains("${account}")`)
+        .click(`*[data-id="runTabSelectAccount"]`)
+        .click(`*[data-id="runTabSelectAccount"]`) // close dropdown
         .perform(() => {
           this.emit('complete')
         })
diff --git a/apps/remix-ide-e2e/src/commands/switchEnvironment.ts b/apps/remix-ide-e2e/src/commands/switchEnvironment.ts
index bd58e3121c0..3c748f24638 100644
--- a/apps/remix-ide-e2e/src/commands/switchEnvironment.ts
+++ b/apps/remix-ide-e2e/src/commands/switchEnvironment.ts
@@ -4,35 +4,35 @@ import EventEmitter from 'events'
 class switchEnvironment extends EventEmitter {
   command (this: NightwatchBrowser, provider: string): NightwatchBrowser {
     this.api.useCss().waitForElementVisible('[data-id="settingsSelectEnvOptions"]')
-    .perform((done) => {
-      this.api.isPresent({ selector: `[data-id="selected-provider-${provider}"]`, suppressNotFoundErrors: true, timeout: 5000}, (result) => {
-        if (result.value) {
-          done()
-        } else {
-          browser.perform(() => {
-            this.api
-              .click('[data-id="settingsSelectEnvOptions"] button') // open dropdown
-              .isPresent({ selector: `[data-id="dropdown-item-${provider}"]`, suppressNotFoundErrors: true, timeout: 5000}, (result) => {
-                console.log(result)
-                this.api.click('[data-id="settingsSelectEnvOptions"] button') // close dropdown
-                if (!result.value) {
-                  this.api.pinGrid(provider, true)
-                    .click('[data-id="settingsSelectEnvOptions"] button')
-                    .waitForElementVisible(`[data-id="dropdown-item-${provider}"]`)
-                    .click(`[data-id="dropdown-item-${provider}"]`)
-                    .perform(() => done())
-                } else {
-                  browser.click('[data-id="settingsSelectEnvOptions"] button')
-                    .waitForElementVisible(`[data-id="dropdown-item-${provider}"]`)
-                    .click(`[data-id="dropdown-item-${provider}"]`)
-                    .perform(() => done())
-                }
-              })
-            })     
-        }
-      })
-    }).perform(() => this.emit('complete'))      
-    
+      .perform((done) => {
+        this.api.isPresent({ selector: `[data-id="selected-provider-${provider}"]`, suppressNotFoundErrors: true, timeout: 5000 }, (result) => {
+          if (result.value) {
+            done()
+          } else {
+            browser.perform(() => {
+              this.api
+                .click('[data-id="settingsSelectEnvOptions"] button') // open dropdown
+                .isPresent({ selector: `[data-id="dropdown-item-${provider}"]`, suppressNotFoundErrors: true, timeout: 5000 }, (result) => {
+                  console.log(result)
+                  this.api.click('[data-id="settingsSelectEnvOptions"] button') // close dropdown
+                  if (!result.value) {
+                    this.api.pinGrid(provider, true)
+                      .click('[data-id="settingsSelectEnvOptions"] button')
+                      .waitForElementVisible(`[data-id="dropdown-item-${provider}"]`)
+                      .click(`[data-id="dropdown-item-${provider}"]`)
+                      .perform(() => done())
+                  } else {
+                    browser.click('[data-id="settingsSelectEnvOptions"] button')
+                      .waitForElementVisible(`[data-id="dropdown-item-${provider}"]`)
+                      .click(`[data-id="dropdown-item-${provider}"]`)
+                      .perform(() => done())
+                  }
+                })
+            })
+          }
+        })
+      }).perform(() => this.emit('complete'))
+
     return this
   }
 }
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 14c7838a891..52793a2ad5c 100644
--- a/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx
+++ b/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx
@@ -29,7 +29,7 @@ export const CustomToggle = React.forwardRef(
       className={className.replace('dropdown-toggle', '')}
     >
       <div className="d-flex">
-        <div className="mr-auto text-nowrap text-truncate overflow-hidden">{children}</div>
+        <div className="mr-auto text-nowrap text-truncate overflow-hidden" data-id={`dropdown-content`}>{children}</div>
         {icon && (
           <div className="pr-1">
             <i className={`${icon} pr-1`}></i>
diff --git a/libs/remix-ui/run-tab/src/lib/components/account.tsx b/libs/remix-ui/run-tab/src/lib/components/account.tsx
index 76280db0560..df90f4c0a75 100644
--- a/libs/remix-ui/run-tab/src/lib/components/account.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/account.tsx
@@ -236,7 +236,7 @@ export function AccountUI(props: AccountProps) {
         {props.accounts.isRequesting && <i className="fa fa-spinner fa-pulse ml-2" aria-hidden="true"></i>}
       </label>
       <div className="udapp_account">
-        <Dropdown className="udapp_selectExEnvOptions">
+        <Dropdown className="udapp_selectExEnvOptions" data-id="runTabSelectAccount">
           <Dropdown.Toggle as={CustomToggle} icon={null} id="txorigin" data-id="runTabSelectAccount" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control">
             {selectedAccount ? loadedAccounts[selectedAccount] : ''}
           </Dropdown.Toggle>
@@ -248,6 +248,7 @@ export function AccountUI(props: AccountProps) {
                 onSelect={(e) => {
                   props.setAccount(value)
                 }}
+                data-id="txOriginSelectAccountItem"
               >
                 <span className="">
                   {loadedAccounts[value]}