cypress test example

templates/demo/web3js-react-dapp-demo/.env.example

@@ -0,0 +1,2 @@
+CYPRESS_WALLET_PRIVATE_KEY=
+CYPRESS_INFURA_PROJECT_ID=

templates/demo/web3js-react-dapp-demo/cypress.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from "cypress"
+import dotenv from "dotenv"
+
+dotenv.config()
+
+export default defineConfig({
+  viewportWidth: 1200,
+  viewportHeight: 800,
+  video: false,
+  retries: {
+    runMode: 1,
+    openMode: 0,
+  },
+  chromeWebSecurity: true,
+  env: {
+    infura_api_key: process.env.CYPRESS_INFURA_PROJECT_ID,
+    wallet_private_key: process.env.CYPRESS_WALLET_PRIVATE_KEY,
+  },
+  e2e: {
+    specPattern: "cypress/tests/**/*.cy.{ts,tsx}",
+    baseUrl: "http://localhost:3000",
+    defaultCommandTimeout: 10000,
+    setupNodeEvents(on, config) {
+  },
+  },
+})

templates/demo/web3js-react-dapp-demo/cypress/fixtures/contractsData.ts

@@ -0,0 +1,37 @@
+import networksData from "./networksData.json"
+
+// networks
+export interface INetwork {
+  chainId: number
+  name: string
+  rpcUrl: string
+}
+
+const typedNetworksData: Record<string, INetwork> = networksData
+
+export function getNetwork(chainId?: string): INetwork {
+  const chainToUse = chainId || Cypress.env("network") || "11155111"
+  const network = typedNetworksData[chainToUse]
+
+  if (!network) {
+    throw new Error(`Network ${chainToUse} is not supported`)
+  }
+
+  // Replace environment variables in the RPC URL
+  let rpcUrl = network.rpcUrl
+
+  if (rpcUrl.includes("{INFURA_API_KEY}")) {
+    rpcUrl = rpcUrl.replace("{INFURA_API_KEY}", Cypress.env("infura_api_key") || "")
+  }
+  if (rpcUrl.includes("{ALCHEMY_API_KEY}")) {
+    rpcUrl = rpcUrl.replace("{ALCHEMY_API_KEY}", Cypress.env("alchemy_api_key") || "")
+  }
+  if (rpcUrl.includes("{CHAINSTACK_API_KEY}")) {
+    rpcUrl = rpcUrl.replace("{CHAINSTACK_API_KEY}", Cypress.env("chainstack_api_key") || "")
+  }
+
+  return {
+    ...network,
+    rpcUrl,
+  }
+}

templates/demo/web3js-react-dapp-demo/cypress/fixtures/networksData.json

@@ -0,0 +1,18 @@
+{
+    "11155111": {
+      "chainId": 11155111,
+      "name": "Ethereum Sepolia",
+      "rpcUrl": "wss://ethereum-sepolia-rpc.publicnode.com"
+    },
+    "43113": {
+      "chainId": 43113,
+      "name": "Avalanche Testnet",
+      "rpcUrl": "wss://avalanche-fuji-c-chain-rpc.publicnode.com"
+    },
+    "59140": {
+      "chainId": 59140,
+      "name": "Linea Testnet",
+      "rpcUrl": "wss://rpc.sepolia.linea.build"
+    }
+  }
+

templates/demo/web3js-react-dapp-demo/cypress/support/commands.ts

@@ -0,0 +1,99 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+import { Web3 } from "web3";
+import { CustomBridge } from "./utils/CustomBridge";
+import { INetwork } from "../fixtures/contractsData";
+import {
+  EIP6963ProviderInfo,
+  EIP6963RequestProviderEvent,
+} from "web3/lib/commonjs/web3_eip6963";
+import { Web3Account } from "web3-eth-accounts";
+
+Cypress.Commands.add("loginWithWallet", (network) => {
+  cy.on("window:before:load", (win) => {
+    const web3 = new Web3(network.rpcUrl);
+    const privateKey = Cypress.env("wallet_private_key");
+    let account: Web3Account;
+    if (privateKey != null && privateKey !== "") {
+      account = web3?.eth?.accounts?.privateKeyToAccount("0x" + privateKey);
+    } else {
+      account = web3.eth.accounts.create();
+    }
+
+    // inject ethereum object in the global window
+    const customBridge = new CustomBridge(account, web3);
+    win.ethereum = customBridge;
+
+    function announceProvider() {
+      const info: EIP6963ProviderInfo = {
+        uuid: "350670db-91fa-4704-a166-e52e178b59d2",
+        name: "Metamask",
+        icon: "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjMzIiB2aWV3Qm94PSIwIDAgMzUgMzMiIHdpZHRoPSIzNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iLjI1Ij48cGF0aCBkPSJtMzIuOTU4MiAxLTEzLjEzNDEgOS43MTgzIDIuNDQyNC01LjcyNzMxeiIgZmlsbD0iI2UxNzcyNiIgc3Ryb2tlPSIjZTE3NzI2Ii8+PGcgZmlsbD0iI2UyNzYyNSIgc3Ryb2tlPSIjZTI3NjI1Ij48cGF0aCBkPSJtMi42NjI5NiAxIDEzLjAxNzE0IDkuODA5LTIuMzI1NC01LjgxODAyeiIvPjxwYXRoIGQ9Im0yOC4yMjk1IDIzLjUzMzUtMy40OTQ3IDUuMzM4NiA3LjQ4MjkgMi4wNjAzIDIuMTQzNi03LjI4MjN6Ii8+PHBhdGggZD0ibTEuMjcyODEgMjMuNjUwMSAyLjEzMDU1IDcuMjgyMyA3LjQ2OTk0LTIuMDYwMy0zLjQ4MTY2LTUuMzM4NnoiLz48cGF0aCBkPSJtMTAuNDcwNiAxNC41MTQ5LTIuMDc4NiAzLjEzNTggNy40MDUuMzM2OS0uMjQ2OS03Ljk2OXoiLz48cGF0aCBkPSJtMjUuMTUwNSAxNC41MTQ5LTUuMTU3NS00LjU4NzA0LS4xNjg4IDguMDU5NzQgNy40MDQ5LS4zMzY5eiIvPjxwYXRoIGQ9Im0xMC44NzMzIDI4Ljg3MjEgNC40ODE5LTIuMTYzOS0zLjg1ODMtMy4wMDYyeiIvPjxwYXRoIGQ9Im0yMC4yNjU5IDI2LjcwODIgNC40Njg5IDIuMTYzOS0uNjEwNS01LjE3MDF6Ii8+PC9nPjxwYXRoIGQ9Im0yNC43MzQ4IDI4Ljg3MjEtNC40NjktMi4xNjM5LjM2MzggMi45MDI1LS4wMzkgMS4yMzF6IiBmaWxsPSIjZDViZmIyIiBzdHJva2U9IiNkNWJmYjIiLz48cGF0aCBkPSJtMTAuODczMiAyOC44NzIxIDQuMTU3MiAxLjk2OTYtLjAyNi0xLjIzMS4zNTA4LTIuOTAyNXoiIGZpbGw9IiNkNWJmYjIiIHN0cm9rZT0iI2Q1YmZiMiIvPjxwYXRoIGQ9Im0xNS4xMDg0IDIxLjc4NDItMy43MTU1LTEuMDg4NCAyLjYyNDMtMS4yMDUxeiIgZmlsbD0iIzIzMzQ0NyIgc3Ryb2tlPSIjMjMzNDQ3Ii8+PHBhdGggZD0ibTIwLjUxMjYgMjEuNzg0MiAxLjA5MTMtMi4yOTM1IDIuNjM3MiAxLjIwNTF6IiBmaWxsPSIjMjMzNDQ3IiBzdHJva2U9IiMyMzM0NDciLz48cGF0aCBkPSJtMTAuODczMyAyOC44NzIxLjY0OTUtNS4zMzg2LTQuMTMxMTcuMTE2N3oiIGZpbGw9IiNjYzYyMjgiIHN0cm9rZT0iI2NjNjIyOCIvPjxwYXRoIGQ9Im0yNC4wOTgyIDIzLjUzMzUuNjM2NiA1LjMzODYgMy40OTQ2LTUuMjIxOXoiIGZpbGw9IiNjYzYyMjgiIHN0cm9rZT0iI2NjNjIyOCIvPjxwYXRoIGQ9Im0yNy4yMjkxIDE3LjY1MDctNy40MDUuMzM2OS42ODg1IDMuNzk2NiAxLjA5MTMtMi4yOTM1IDIuNjM3MiAxLjIwNTF6IiBmaWxsPSIjY2M2MjI4IiBzdHJva2U9IiNjYzYyMjgiLz48cGF0aCBkPSJtMTEuMzkyOSAyMC42OTU4IDIuNjI0Mi0xLjIwNTEgMS4wOTEzIDIuMjkzNS42ODg1LTMuNzk2Ni03LjQwNDk1LS4zMzY5eiIgZmlsbD0iI2NjNjIyOCIgc3Ryb2tlPSIjY2M2MjI4Ii8+PHBhdGggZD0ibTguMzkyIDE3LjY1MDcgMy4xMDQ5IDYuMDUxMy0uMTAzOS0zLjAwNjJ6IiBmaWxsPSIjZTI3NTI1IiBzdHJva2U9IiNlMjc1MjUiLz48cGF0aCBkPSJtMjQuMjQxMiAyMC42OTU4LS4xMTY5IDMuMDA2MiAzLjEwNDktNi4wNTEzeiIgZmlsbD0iI2UyNzUyNSIgc3Ryb2tlPSIjZTI3NTI1Ii8+PHBhdGggZD0ibTE1Ljc5NyAxNy45ODc2LS42ODg2IDMuNzk2Ny44NzA0IDQuNDgzMy4xOTQ5LTUuOTA4N3oiIGZpbGw9IiNlMjc1MjUiIHN0cm9rZT0iI2UyNzUyNSIvPjxwYXRoIGQ9Im0xOS44MjQyIDE3Ljk4NzYtLjM2MzggMi4zNTg0LjE4MTkgNS45MjE2Ljg3MDQtNC40ODMzeiIgZmlsbD0iI2UyNzUyNSIgc3Ryb2tlPSIjZTI3NTI1Ii8+PHBhdGggZD0ibTIwLjUxMjcgMjEuNzg0Mi0uODcwNCA0LjQ4MzQuNjIzNi40NDA2IDMuODU4NC0zLjAwNjIuMTE2OS0zLjAwNjJ6IiBmaWxsPSIjZjU4NDFmIiBzdHJva2U9IiNmNTg0MWYiLz48cGF0aCBkPSJtMTEuMzkyOSAyMC42OTU4LjEwNCAzLjAwNjIgMy44NTgzIDMuMDA2Mi42MjM2LS40NDA2LS44NzA0LTQuNDgzNHoiIGZpbGw9IiNmNTg0MWYiIHN0cm9rZT0iI2Y1ODQxZiIvPjxwYXRoIGQ9Im0yMC41OTA2IDMwLjg0MTcuMDM5LTEuMjMxLS4zMzc4LS4yODUxaC00Ljk2MjZsLS4zMjQ4LjI4NTEuMDI2IDEuMjMxLTQuMTU3Mi0xLjk2OTYgMS40NTUxIDEuMTkyMSAyLjk0ODkgMi4wMzQ0aDUuMDUzNmwyLjk2Mi0yLjAzNDQgMS40NDItMS4xOTIxeiIgZmlsbD0iI2MwYWM5ZCIgc3Ryb2tlPSIjYzBhYzlkIi8+PHBhdGggZD0ibTIwLjI2NTkgMjYuNzA4Mi0uNjIzNi0uNDQwNmgtMy42NjM1bC0uNjIzNi40NDA2LS4zNTA4IDIuOTAyNS4zMjQ4LS4yODUxaDQuOTYyNmwuMzM3OC4yODUxeiIgZmlsbD0iIzE2MTYxNiIgc3Ryb2tlPSIjMTYxNjE2Ii8+PHBhdGggZD0ibTMzLjUxNjggMTEuMzUzMiAxLjEwNDMtNS4zNjQ0Ny0xLjY2MjktNC45ODg3My0xMi42OTIzIDkuMzk0NCA0Ljg4NDYgNC4xMjA1IDYuODk4MyAyLjAwODUgMS41Mi0xLjc3NTItLjY2MjYtLjQ3OTUgMS4wNTIzLS45NTg4LS44MDU0LS42MjIgMS4wNTIzLS44MDM0eiIgZmlsbD0iIzc2M2UxYSIgc3Ryb2tlPSIjNzYzZTFhIi8+PHBhdGggZD0ibTEgNS45ODg3MyAxLjExNzI0IDUuMzY0NDctLjcxNDUxLjUzMTMgMS4wNjUyNy44MDM0LS44MDU0NS42MjIgMS4wNTIyOC45NTg4LS42NjI1NS40Nzk1IDEuNTE5OTcgMS43NzUyIDYuODk4MzUtMi4wMDg1IDQuODg0Ni00LjEyMDUtMTIuNjkyMzMtOS4zOTQ0eiIgZmlsbD0iIzc2M2UxYSIgc3Ryb2tlPSIjNzYzZTFhIi8+PHBhdGggZD0ibTMyLjA0ODkgMTYuNTIzNC02Ljg5ODMtMi4wMDg1IDIuMDc4NiAzLjEzNTgtMy4xMDQ5IDYuMDUxMyA0LjEwNTItLjA1MTloNi4xMzE4eiIgZmlsbD0iI2Y1ODQxZiIgc3Ryb2tlPSIjZjU4NDFmIi8+PHBhdGggZD0ibTEwLjQ3MDUgMTQuNTE0OS02Ljg5ODI4IDIuMDA4NS0yLjI5OTQ0IDcuMTI2N2g2LjExODgzbDQuMTA1MTkuMDUxOS0zLjEwNDg3LTYuMDUxM3oiIGZpbGw9IiNmNTg0MWYiIHN0cm9rZT0iI2Y1ODQxZiIvPjxwYXRoIGQ9Im0xOS44MjQxIDE3Ljk4NzYuNDQxNy03LjU5MzIgMi4wMDA3LTUuNDAzNGgtOC45MTE5bDIuMDAwNiA1LjQwMzQuNDQxNyA3LjU5MzIuMTY4OSAyLjM4NDIuMDEzIDUuODk1OGgzLjY2MzVsLjAxMy01Ljg5NTh6IiBmaWxsPSIjZjU4NDFmIiBzdHJva2U9IiNmNTg0MWYiLz48L2c+PC9zdmc+",
+        rdns: "com.example.wallet",
+      };
+      const provider = { info: info, provider: customBridge };
+      win.dispatchEvent(
+        new CustomEvent("eip6963:announceProvider", {
+          detail: Object.freeze(provider),
+        })
+      );
+    }
+
+    win.addEventListener(
+      "eip6963:requestProvider",
+      (event: EIP6963RequestProviderEvent) => {
+        announceProvider();
+      }
+    );
+    announceProvider();
+  });
+
+  cy.visit("");
+});
+
+// eslint-disable @typescript/interface-name
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      loginWithWallet: (network: INetwork) => void;
+    }
+  }
+}
+
+export {};

templates/demo/web3js-react-dapp-demo/cypress/support/e2e.ts

@@ -0,0 +1,25 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+Cypress.on("uncaught:exception", () => {
+    return false
+})
+

templates/demo/web3js-react-dapp-demo/cypress/support/page-objects/accountsSection.ts

@@ -0,0 +1,4 @@
+export const accountsSection = {
+  addressLabel: () => cy.get("[data-cy=label-address]"),
+  balanceLabel: () => cy.get("[data-cy=label-balance]")
+}

templates/demo/web3js-react-dapp-demo/cypress/support/page-objects/connectProviderSection.ts

@@ -0,0 +1,3 @@
+export const connectProviderSection = {
+  connectProviderButton: () => cy.get("[data-cy=button-connect-provider]")
+}

templates/demo/web3js-react-dapp-demo/cypress/support/page-objects/networkSection.ts

@@ -0,0 +1,4 @@
+export const networkSection = {
+  chainIdLabel: () => cy.get("[data-cy=label-chain-id]"),
+  networkIdLabel: () => cy.get("[data-cy=label-network-id]")
+}