From 10b6c0eda4420057b881473846c3ae3a4efb2243 Mon Sep 17 00:00:00 2001
From: aniket-engg <aniketengg.225@gmail.com>
Date: Tue, 29 Oct 2024 15:20:34 +0530
Subject: [PATCH 1/2] Add contract verification e2e

---
 .../src/app/components/NavMenu.tsx            |  1 +
 .../src/app/layouts/Default.tsx               |  2 +-
 .../src/app/views/ReceiptsView.tsx            |  2 +-
 .../src/tests/contract_verification.test.ts   | 38 +++++++++++++++++++
 4 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 apps/remix-ide-e2e/src/tests/contract_verification.test.ts

diff --git a/apps/contract-verification/src/app/components/NavMenu.tsx b/apps/contract-verification/src/app/components/NavMenu.tsx
index a949b4da16..d835e1a193 100644
--- a/apps/contract-verification/src/app/components/NavMenu.tsx
+++ b/apps/contract-verification/src/app/components/NavMenu.tsx
@@ -10,6 +10,7 @@ interface NavItemProps {
 const NavItem: React.FC<NavItemProps> = ({ to, icon, title }) => {
   return (
     <NavLink
+      data-id={`${title}Tab`}
       to={to}
       className={({ isActive }) => 'text-decoration-none d-flex px-1 py-1 flex-column justify-content-center small ' + (isActive ? "bg-light border-top border-left border-right" : "border-0 bg-transparent")}
     >
diff --git a/apps/contract-verification/src/app/layouts/Default.tsx b/apps/contract-verification/src/app/layouts/Default.tsx
index 4052b9a76b..b02a4a77e3 100644
--- a/apps/contract-verification/src/app/layouts/Default.tsx
+++ b/apps/contract-verification/src/app/layouts/Default.tsx
@@ -13,7 +13,7 @@ export const DefaultLayout = ({ children, title, description }: PropsWithChildre
     <div className="d-flex flex-column h-100">
       <NavMenu />
       <div className="py-4 px-3 flex-grow-1 bg-light" style={{ overflowY: 'auto' }}>
-        <div>
+        <div data-id={`${title}Description`}>
           <p className="text-center" style={{ fontSize: '0.8rem' }}>
             {description}
           </p>
diff --git a/apps/contract-verification/src/app/views/ReceiptsView.tsx b/apps/contract-verification/src/app/views/ReceiptsView.tsx
index 5c7eb7b1fa..c24b63ca6b 100644
--- a/apps/contract-verification/src/app/views/ReceiptsView.tsx
+++ b/apps/contract-verification/src/app/views/ReceiptsView.tsx
@@ -10,7 +10,7 @@ export const ReceiptsView = () => {
     <div>
       {contracts.length > 0 ? contracts.map((contract, index) => (
         <AccordionReceipt contract={contract} index={index} />
-      )) : <div className="text-center mt-5">No contracts submitted for verification</div>}
+      )) : <div className="text-center mt-5" data-id="noContractsSubmitted">No contracts submitted for verification</div>}
     </div>
   )
 }
diff --git a/apps/remix-ide-e2e/src/tests/contract_verification.test.ts b/apps/remix-ide-e2e/src/tests/contract_verification.test.ts
new file mode 100644
index 0000000000..42bae1fb0e
--- /dev/null
+++ b/apps/remix-ide-e2e/src/tests/contract_verification.test.ts
@@ -0,0 +1,38 @@
+'use strict'
+import { NightwatchBrowser } from 'nightwatch'
+import init from '../helpers/init'
+
+declare global {
+  interface Window { testplugin: { name: string, url: string }; }
+}
+
+const tests = {
+  '@disabled': true,
+  before: function (browser: NightwatchBrowser, done: VoidFunction) {
+    init(browser, done, null)
+  },
+
+  'Should load contract verification plugin #group1': function (browser: NightwatchBrowser) {
+    browser
+      .clickLaunchIcon('pluginManager')
+      .scrollAndClick('[data-id="pluginManagerComponentActivateButtoncontract-verification"]')
+      .clickLaunchIcon('contract-verification')
+      .pause(5000)
+      .frame(0)
+      .waitForElementVisible('*[data-id="VerifyDescription"]')
+  },
+
+  'Should select a chain by searching #group1': function (browser: NightwatchBrowser) {
+    browser
+      .click('[data-id="chainDropdownbox"]')
+      .sendKeys('[data-id="chainDropdownbox"]', 's')
+      .sendKeys('[data-id="chainDropdownbox"]', 'c')
+      .sendKeys('[data-id="chainDropdownbox"]', 'r')
+      .click('[data-id="534351"]')
+      .assert.attributeContains('[data-id="chainDropdownbox"]', 'value', "Scroll Sepolia Testnet (534351)")
+  }
+}
+
+module.exports = {
+  ...tests
+};

From 51e699816dabbfeae940cdf21a96dfbb09039102 Mon Sep 17 00:00:00 2001
From: aniket-engg <aniketengg.225@gmail.com>
Date: Tue, 29 Oct 2024 19:16:11 +0530
Subject: [PATCH 2/2] add missed ids

---
 .../src/app/components/SearchableChainDropdown.tsx            | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx b/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
index eec16f8845..281c763023 100644
--- a/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
+++ b/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
@@ -90,10 +90,10 @@ export const SearchableChainDropdown: React.FC<DropdownProps> = ({ label, id, se
       {' '}
       {/* Add ref here */}
       <label htmlFor={id}>{label}</label>
-      <input type="text" value={searchTerm} onChange={handleInputChange} onClick={openDropdown} placeholder="Select a chain" className="form-control" />
+      <input type="text" value={searchTerm} onChange={handleInputChange} onClick={openDropdown} data-id="chainDropdownbox" placeholder="Select a chain" className="form-control" />
       <ul className="dropdown-menu show w-100 bg-light" style={{ maxHeight: '400px', overflowY: 'auto', display: isOpen ? 'initial' : 'none' }}>
         {filteredOptions.map((chain) => (
-          <li key={chain.chainId} onClick={() => handleOptionClick(chain)} className={`dropdown-item text-dark ${selectedChain?.chainId === chain.chainId ? 'active' : ''}`} style={{ cursor: 'pointer', whiteSpace: 'normal' }}>
+          <li key={chain.chainId} onClick={() => handleOptionClick(chain)} data-id={chain.chainId} className={`dropdown-item text-dark ${selectedChain?.chainId === chain.chainId ? 'active' : ''}`} style={{ cursor: 'pointer', whiteSpace: 'normal' }}>
             {getChainDescriptor(chain)}
           </li>
         ))}