Add Cypress E2E tests for core functionality across multiple networks (#140)

Author: portdeveloper

.github/workflows/test-app.yaml

@@ -0,0 +1,28 @@
+name: E2E on Chrome
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: packages/nextjs
+          browser: chrome
+          start: yarn dev
+          wait-on: "http://localhost:3000"
+        env:
+          NEXT_PUBLIC_HEIMDALL_URL: "${{ secrets.HEIMDALL_URL }}"
+          CYPRESS_HEIMDALL_URL: "${{ secrets.HEIMDALL_URL }}"
+

README.md

@@ -42,6 +42,63 @@ yarn start
 
 Visit your local instance of ABI Ninja at: `http://localhost:3000`.
 
+# 🧪 Testing
+
+ABI Ninja uses Cypress for end-to-end testing. Our test suite covers user flows and ensures the application works correctly across different networks and contract types. The test suite will automatically run on pull requests.
+
+## Setting Up Cypress Environment
+
+Before running the tests, you need to set up your Cypress environment:
+
+1. Copy the example environment file:
+  
+```
+cp cypress.env.example.json cypress.env.json
+```
+
+2. Edit `cypress.env.json` and fill in heimdall_url
+
+
+## Running Tests
+
+To run the Cypress tests:
+
+1. Ensure your development server is running:
+
+```
+yarn start
+```
+
+2. In a new terminal window, run the Cypress tests:
+
+```
+yarn cypress:open
+```
+
+This will open the Cypress Test Runner, where you can run individual tests or the entire suite.
+
+3. For headless testing, use:
+
+```
+yarn cypress:run
+```
+
+## Test Coverage
+
+Our tests cover the following key areas:
+
+- Loading and interacting with verified contracts on various networks
+- Handling unverified contracts and manual ABI input
+- Detecting and interacting with proxy contracts
+- Network switching and custom network addition
+
+## Writing New Tests
+
+When adding new features or modifying existing ones, please update or add corresponding tests. Test files are located in the `cypress/e2e` directory.
+
+For more information on writing Cypress tests, refer to the Cypress Documentation.
+
+
 ## Contributing to ABI Ninja
 
 We welcome contributions to ABI Ninja!

package.json

@@ -15,7 +15,9 @@
     "postinstall": "husky install",
     "precommit": "lint-staged",
     "vercel": "yarn workspace @se-2/nextjs vercel",
-    "vercel:yolo": "yarn workspace @se-2/nextjs vercel:yolo"
+    "vercel:yolo": "yarn workspace @se-2/nextjs vercel:yolo",
+    "cypress:open": "yarn workspace @se-2/nextjs cypress:open",
+    "cypress:run": "yarn workspace @se-2/nextjs cypress:run"
   },
   "packageManager": "yarn@3.2.3",
   "devDependencies": {

packages/nextjs/.gitignore

@@ -34,5 +34,9 @@ yarn-error.log*
 # vercel
 .vercel
 
+# Cypress
+cypress/downloads/
+cypress.env.json
+
 # typescript
 *.tsbuildinfo

packages/nextjs/cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

packages/nextjs/cypress.env.example.json

@@ -0,0 +1,3 @@
+{
+    "HEIMDALL_URL": ""
+}

packages/nextjs/cypress/e2e/contract_interaction.cy.ts

@@ -0,0 +1,63 @@
+describe("Contract Interaction", () => {
+  it("should load DAI contract and interact with its balanceOf method", () => {
+    cy.visit("http://localhost:3000");
+    cy.loadContract("0x6B175474E89094C44Da98b954EedeAC495271d0F");
+    cy.url().should("include", "/0x6B175474E89094C44Da98b954EedeAC495271d0F/1");
+    cy.interactWithMethod("balanceOf", "0x6B175474E89094C44Da98b954EedeAC495271d0F");
+  });
+
+  it("should load proxy contract on Base and interact with its balanceOf method", () => {
+    cy.visit("http://localhost:3000");
+    cy.selectNetwork("Base");
+    cy.loadContract("0xca808b3eada02d53073e129b25f74b31d8647ae0");
+    cy.url().should("include", "/0xca808b3eada02d53073e129b25f74b31d8647ae0/8453");
+    cy.contains("Implementation Address").should("be.visible");
+    cy.wait(1000); // wait for: the method card to re-render
+    cy.interactWithMethod("balanceOf", "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045");
+  });
+
+  it("should load unverified contract on Sepolia and ADD changeOwner write method to the UI", () => {
+    cy.wakeUpHeimdall();
+    cy.visit("http://localhost:3000");
+    cy.selectNetwork("Sepolia");
+    cy.get('input[placeholder="Contract address"]').type("0x759c0e9d7858566df8ab751026bedce462ff42df");
+    cy.get("button:visible").contains("Decompile (beta)", { timeout: 10000 }).click({ force: true });
+    cy.wait(2000);
+    cy.url().should("include", "/0x759c0e9d7858566df8ab751026bedce462ff42df/11155111");
+    cy.contains("changeOwner").click();
+  });
+
+  it("should load a contract on BNB Smart Chain and interact with its balanceOf method", () => {
+    cy.visit("http://localhost:3000");
+    cy.selectNetwork("Other chains");
+    cy.get("#see-other-chains-modal").should("be.visible");
+    cy.contains("BNB Smart Chain").click();
+    cy.get(".modal-content").should("not.exist");
+    cy.get("#react-select-container").should("contain", "BNB Smart Chain");
+    cy.loadContract("0x2170ed0880ac9a755fd29b2688956bd959f933f8");
+    cy.url().should("include", "/0x2170ed0880ac9a755fd29b2688956bd959f933f8/56");
+    cy.get(".loading-spinner", { timeout: 10000 }).should("not.exist");
+    cy.interactWithMethod("balanceOf", "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045");
+  });
+
+  it("should add Parex as a custom chain and interact with a contract by submitting an ABI manually", () => {
+    cy.visit("http://localhost:3000");
+    cy.addCustomChain({
+      id: "322202",
+      name: "Parex",
+      nativeCurrencyName: "PAREX",
+      nativeCurrencySymbol: "PAREX",
+      nativeCurrencyDecimals: "18",
+      rpcUrl: "https://mainnet-rpc.parex.network",
+      blockExplorer: "https://scan.parex.network/",
+    });
+    cy.get("#react-select-container").should("contain", "Parex");
+    cy.get('input[placeholder="Contract address"]').type("0x6058518142C6AD506530F5A62dCc58050bf6fC28");
+    cy.fixture("parex_abi").then(parexContractABI => {
+      cy.importABI(JSON.stringify(parexContractABI));
+    });
+    cy.url().should("include", "/0x6058518142C6AD506530F5A62dCc58050bf6fC28/322202");
+    cy.get(".loading-spinner", { timeout: 10000 }).should("not.exist");
+    cy.interactWithMethod("getUserBalance", "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045");
+  });
+});