Base cypress tests for cli

.github/workflows/cypress.yml

@@ -0,0 +1,75 @@
+name: Cypress Tests on Multiple Configurations
+
+on:
+  push:
+    branches:
+      - cli
+  pull_request:
+    branches:
+      - cli-solidity-frameworks
+      # TODO change to cli
+      # - cli
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        config: [hardhat, foundry, no_solidity_framework]
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+
+      - name: Install Dependencies
+        run: yarn
+
+      - name: Start dev
+        run: yarn dev &
+
+      - name: Install application (Hardhat configuration)
+        if: matrix.config == 'hardhat'
+        run: yarn cli new_project --install -f hardhat
+
+      - name: Install Foundry
+        if: matrix.config == 'foundry'
+        uses: foundry-rs/foundry-toolchain@v1
+
+      - name: Add Foundry to PATH
+        if: matrix.config == 'foundry'
+        run: echo "$HOME/.foundry/bin" >> $GITHUB_PATH
+
+      - name: Install application (Foundry configuration)
+        if: matrix.config == 'foundry'
+        run: yarn cli new_project --install -f foundry
+
+      - name: Install application (No solidity framework configuration)
+        if: matrix.config == 'no_solidity_framework'
+        run: yarn cli new_project --install -f none
+
+      - name: Run chain and deploy
+        working-directory: new_project
+        if: matrix.config == 'hardhat' || matrix.config == 'foundry'
+        run: yarn install & yarn chain & yarn deploy
+
+      - name: Run Cypress tests for apps with solidity frameworks
+        uses: cypress-io/github-action@v6
+        if: matrix.config == 'hardhat' || matrix.config == 'foundry'
+        with:
+          start: yarn start
+          wait-on: "http://localhost:3000"
+          working-directory: new_project/packages/nextjs
+          browser: chrome
+
+      - name: Run Cypress tests for apps without solidity frameworks
+        uses: cypress-io/github-action@v6
+        if: matrix.config == 'no_solidity_framework'
+        with:
+          start: yarn start
+          wait-on: "http://localhost:3000"
+          working-directory: new_project/packages/nextjs
+          spec: cypress/e2e/base/base.cy.ts
+          browser: chrome

.yarnrc.yml

@@ -1,5 +1,6 @@
 enableColors: true
+enableImmutableInstalls: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.5.0.cjs
+yarnPath: .yarn/releases/yarn-3.2.3.cjs

package.json

@@ -50,5 +50,5 @@
     "ncp": "2.0.0",
     "pkg-install": "1.0.0"
   },
-  "packageManager": "yarn@3.5.0"
+  "packageManager": "yarn@3.2.3"
 }

templates/base/packages/nextjs/components/Header.tsx

@@ -93,7 +93,9 @@ export const Header = () => {
             <Image alt="SE2 logo" className="cursor-pointer" fill src="/logo.svg" />
           </div>
           <div className="flex flex-col">
-            <span className="font-bold leading-tight">Scaffold-ETH</span>
+            <span className="font-bold leading-tight" data-test="logo-text-main">
+              Scaffold-ETH
+            </span>
             <span className="text-xs">Ethereum dev stack</span>
           </div>
         </Link>

templates/base/packages/nextjs/components/scaffold-eth/Balance.tsx

@@ -57,7 +57,7 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
           </>
         ) : (
           <>
-            <span>{balance?.toFixed(4)}</span>
+            <span data-test="formatted-balance">{balance?.toFixed(4)}</span>
             <span className="text-[0.8em] font-bold ml-1">{targetNetwork.nativeCurrency.symbol}</span>
           </>
         )}

templates/base/packages/nextjs/components/scaffold-eth/FaucetButton.tsx

@@ -59,7 +59,12 @@ export const FaucetButton = () => {
       }
       data-tip="Grab funds from faucet"
     >
-      <button className="btn btn-secondary btn-sm px-2 rounded-full" onClick={sendETH} disabled={loading}>
+      <button
+        className="btn btn-secondary btn-sm px-2 rounded-full"
+        onClick={sendETH}
+        disabled={loading}
+        data-test="faucet-button"
+      >
         {!loading ? (
           <BanknotesIcon className="h-4 w-4" />
         ) : (

templates/base/packages/nextjs/cypress.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

templates/base/packages/nextjs/cypress/e2e/base/base.cy.ts

@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+
+describe("example app", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:3000/");
+  });
+
+  it("displays Scaffoold-ETH logo text", () => {
+    cy.viewport(1920, 1080);
+    cy.get("[data-test=logo-text-main]").should("have.text", "Scaffold-ETH");
+  });
+});

templates/base/packages/nextjs/cypress/e2e/base/with-solidity-frameworks.cy.ts

@@ -0,0 +1,33 @@
+/// <reference types="cypress" />
+
+// Welcome to Cypress!
+//
+// This spec file contains a variety of sample tests
+// for a todo list app that are designed to demonstrate
+// the power of writing tests in Cypress.
+//
+// To learn more about how Cypress works and
+// what makes it such an awesome testing tool,
+// please read our getting started guide:
+// https://on.cypress.io/introduction-to-cypress
+
+describe("example app", () => {
+  beforeEach(() => {
+    // Cypress starts out with a blank slate for each test
+    // so we must tell it to visit our website with the `cy.visit()` command.
+    // Since we want to visit the same URL at the start of all our tests,
+    // we include it in our beforeEach function so that it runs before each test
+    cy.visit("http://localhost:3000/");
+  });
+
+  it("should get eth from faucet", () => {
+    // We use the `cy.get()` command to get all elements that match the selector.
+    // Then, we use `should` to assert that there are two matched items,
+    // which are the two default items.
+    cy.get("[data-test=faucet-button]").should("have.length", 1);
+    cy.get("[data-test=faucet-button]").first().click();
+
+    cy.get("[data-test=formatted-balance]").should("exist");
+    cy.get("[data-test=formatted-balance]").first().should("have.text", "1.0000");
+  });
+});

templates/base/packages/nextjs/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <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>
+//     }
+//   }
+// }

templates/base/packages/nextjs/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// 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')

templates/base/packages/nextjs/package.json

@@ -43,6 +43,7 @@
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@typescript-eslint/eslint-plugin": "~5.40.0",
     "autoprefixer": "~10.4.12",
+    "cypress": "^13.7.2",
     "eslint": "~8.24.0",
     "eslint-config-next": "~14.0.4",
     "eslint-config-prettier": "~8.5.0",

templates/extensions/foundry/packages/foundry/script/generateTsAbis.js

@@ -36,15 +36,19 @@ function getArtifactOfContract(contractName) {
 
 function getInheritedFromContracts(artifact) {
   let inheritedFromContracts = [];
-  for (const astNode of artifact.ast.nodes) {
-    if (astNode.nodeType == "ContractDefinition") {
-      if (astNode.baseContracts.length > 0) {
-        inheritedFromContracts = astNode.baseContracts.map(
-          ({ baseName }) => baseName.name
-        );
+
+  if (artifact?.ast?.nodes) {
+    for (const astNode of artifact.ast.nodes) {
+      if (astNode.nodeType == "ContractDefinition") {
+        if (astNode.baseContracts.length > 0) {
+          inheritedFromContracts = astNode.baseContracts.map(
+            ({ baseName }) => baseName.name
+          );
+        }
       }
     }
   }
+
   return inheritedFromContracts;
 }
 

yarn.lock

@@ -1729,7 +1729,7 @@ __metadata:
 
 "fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
   version: 2.3.2
-  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=df0bf1"
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=18f3a7"
   dependencies:
     node-gyp: latest
   conditions: os=darwin
@@ -3624,7 +3624,7 @@ __metadata:
 
 "resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.1#~builtin<compat/resolve>":
   version: 1.22.2
-  resolution: "resolve@patch:resolve@npm%3A1.22.2#~builtin<compat/resolve>::version=1.22.2&hash=c3c19d"
+  resolution: "resolve@patch:resolve@npm%3A1.22.2#~builtin<compat/resolve>::version=1.22.2&hash=07638b"
   dependencies:
     is-core-module: ^2.11.0
     path-parse: ^1.0.7
@@ -4410,11 +4410,11 @@ __metadata:
 
 "typescript@patch:typescript@5.0.4#~builtin<compat/typescript>":
   version: 5.0.4
-  resolution: "typescript@patch:typescript@npm%3A5.0.4#~builtin<compat/typescript>::version=5.0.4&hash=85af82"
+  resolution: "typescript@patch:typescript@npm%3A5.0.4#~builtin<compat/typescript>::version=5.0.4&hash=a1c5e5"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: bb309d320c59a26565fb3793dba550576ab861018ff3fd1b7fccabbe46ae4a35546bc45f342c0a0b6f265c801ccdf64ffd68f548f117ceb7f0eac4b805cd52a9
+  checksum: 6a1fe9a77bb9c5176ead919cc4a1499ee63e46b4e05bf667079f11bf3a8f7887f135aa72460a4c3b016e6e6bb65a822cb8689a6d86cbfe92d22cc9f501f09213
   languageName: node
   linkType: hard