Cypress ci (test)

.github/workflows/cypress.yml

@@ -0,0 +1,69 @@
+name: Cypress Tests on Multiple Configurations
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+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: Install Foundry
+        if: matrix.config == 'foundry'
+        uses: foundry-rs/foundry-toolchain@v1
+        with:
+          cache: false
+
+      - name: Start dev
+        run: yarn dev &
+
+      - name: Install application (Hardhat configuration)
+        if: matrix.config == 'hardhat'
+        run: yarn cli new_project_hardhat -s hardhat
+
+      - name: Install application (Foundry configuration)
+        if: matrix.config == 'foundry'
+        run: yarn cli new_project_foundry -s foundry
+
+      - name: Install application (No solidity framework configuration)
+        if: matrix.config == 'no_solidity_framework'
+        run: yarn cli new_project_no_solidity_framework -s none
+
+      - name: Run chain and deploy
+        working-directory: new_project_${{ matrix.config }}
+        if: matrix.config == 'hardhat' || matrix.config == 'foundry'
+        run: yarn install & yarn chain & yarn deploy
+
+      - name: Run linting nextjs package
+        working-directory: new_project_${{ matrix.config }}
+        run: yarn next:lint
+
+      - name: Check types nextjs package
+        working-directory: new_project_${{ matrix.config }}
+        run: yarn next:check-types
+
+      - name: Run Cypress tests
+        uses: cypress-io/github-action@v6
+        with:
+          start: yarn start
+          wait-on: "http://localhost:3000"
+          working-directory: new_project_${{ matrix.config }}/packages/nextjs
+          browser: chrome
+          spec: ${{ matrix.config == 'no_solidity_framework' && 'cypress/e2e/base/base.cy.ts' || '' }}

.husky/pre-commit

@@ -0,0 +1 @@
+yarn lint-staged --verbose --config .lintstagedrc.js

.lintstagedrc.js

@@ -0,0 +1,5 @@
+const lintCommand = filenames => `yarn lint ${filenames.filter(file => !file.includes("/templates/")).join(" ")}`;
+
+export default {
+  "**/*.{js,jsx,ts,tsx}": [lintCommand],
+};

.yarnrc.yml

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

package.json

@@ -18,7 +18,9 @@
     "lint": "eslint .",
     "format": "prettier --write .",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "changeset:release": "yarn build && changeset publish"
+    "changeset:release": "yarn build && changeset publish",
+    "precommit": "lint-staged",
+    "prepare": "husky"
   },
   "keywords": [
     "cli",
@@ -40,7 +42,9 @@
     "eslint": "^9.3.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
+    "husky": "^9.1.5",
     "lefthook": "^1.6.16",
+    "lint-staged": "^15.2.9",
     "prettier": "3.3.2",
     "rollup": "3.21.0",
     "rollup-plugin-auto-external": "2.0.0",

src/tasks/create-first-git-commit.ts

@@ -7,15 +7,23 @@ const foundryLibraries = ["foundry-rs/forge-std", "OpenZeppelin/openzeppelin-con
 
 export async function createFirstGitCommit(targetDir: string, options: Options) {
   try {
-    await execa("git", ["add", "-A"], { cwd: targetDir });
-    await execa("git", ["commit", "-m", "Initial commit with 🏗️ Scaffold-ETH 2", "--no-verify"], { cwd: targetDir });
+    try {
+      await execa("git", ["add", "-A"], { cwd: targetDir });
+      await execa("git", ["commit", "-m", "Initial commit with 🏗️ Scaffold-ETH 2", "--no-verify"], { cwd: targetDir });
+    } catch (error: any) {
+      console.warn("Git operations failed, possibly running in CI environment:", error?.message);
+    }
 
     if (options.solidityFramework === SOLIDITY_FRAMEWORKS.FOUNDRY) {
       const foundryWorkSpacePath = path.resolve(targetDir, "packages", SOLIDITY_FRAMEWORKS.FOUNDRY);
       // forge install foundry libraries
       await execa("forge", ["install", ...foundryLibraries, "--no-commit"], { cwd: foundryWorkSpacePath });
-      await execa("git", ["add", "-A"], { cwd: targetDir });
-      await execa("git", ["commit", "--amend", "--no-edit"], { cwd: targetDir });
+      try {
+        await execa("git", ["add", "-A"], { cwd: targetDir });
+        await execa("git", ["commit", "--amend", "--no-edit"], { cwd: targetDir });
+      } catch (error: any) {
+        console.warn("Inner git operations failed, possibly running in CI environment:", error?.message);
+      }
     }
   } catch (e: any) {
     // cast error as ExecaError to get stderr

src/utils/parse-arguments-into-options.ts

@@ -115,7 +115,7 @@ export async function parseArgumentsIntoOptions(
     }
   }
 
-  // if lengh is 1, we don't give user a choice and set it ourselves.
+  // if length is 1, we don't give user a choice and set it ourselves.
   const solidityFramework =
     solidityFrameworkChoices.length === 1 ? solidityFrameworkChoices[0] : args["--solidity-framework"] ?? null;
 

src/utils/prompt-for-missing-options.ts

@@ -36,11 +36,12 @@ export async function promptForMissingOptions(
 
   const answers = await inquirer.prompt(questions, cliAnswers);
 
+  const solidityFramework = options.solidityFramework ?? answers.solidityFramework;
   const mergedOptions: Options = {
     project: options.project ?? answers.project,
     install: options.install,
     dev: options.dev ?? defaultOptions.dev,
-    solidityFramework: options.solidityFramework ?? answers.solidityFramework,
+    solidityFramework: solidityFramework === "none" ? null : solidityFramework,
     externalExtension: options.externalExtension,
   };
 

src/utils/show-help-message.ts

@@ -2,10 +2,9 @@ import chalk from "chalk";
 
 export const showHelpMessage = () => {
   console.log(` ${chalk.bold.blue("Usage:")}
-    ${chalk.bold.green("npx create-eth<@version>")} ${chalk.gray("[-i | --install | --skip | --skip-install] [-s <solidity-framework> | --solidity-framework <solidity-framework>] [-e <extension> | --extension <extension>] [-h | --help]")}
+    ${chalk.bold.green("npx create-eth<@version>")} ${chalk.gray("[--skip | --skip-install] [-s <solidity-framework> | --solidity-framework <solidity-framework>] [-e <extension> | --extension <extension>] [-h | --help]")}
 `);
   console.log(` ${chalk.bold.blue("Options:")}
-    ${chalk.gray("-i, --install")}                Install packages
     ${chalk.gray("--skip, --skip-install")}       Skip packages installation
     ${chalk.gray("-s, --solidity-framework")}     Choose solidity framework
     ${chalk.gray("-e, --extension")}              Add curated or third-party extension

src/utils/system-validation.ts

@@ -5,6 +5,12 @@ export const validateFoundryUp = async () => {
   try {
     await execa("foundryup", ["-h"]);
   } catch (error) {
+    // Check if we're running in a CI environment
+    if (process.env.CI) {
+      console.warn(chalk.yellow("Running in CI environment. Skipping foundryup check."));
+      return;
+    }
+
     const message = ` ${chalk.bold.yellow("Attention: Foundryup is not installed in your system.")}
  ${chalk.bold.yellow("To use foundry, please install foundryup")}
  ${chalk.bold.yellow("Checkout: https://getfoundry.sh")}

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

@@ -97,7 +97,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

@@ -64,7 +64,7 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
           </>
         ) : (
           <>
-            <span>{formattedBalance.toFixed(4)}</span>
+            <span data-test="formatted-balance">{formattedBalance?.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

@@ -61,7 +61,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,15 @@
+/// <reference types="cypress" />
+
+describe("example app", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:3000/");
+  });
+
+  it("should get eth from faucet", () => {
+    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 @@
+/// <reference types="cypress" />

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

@@ -0,0 +1,16 @@
+// ***********************************************************
+// 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";

templates/base/packages/nextjs/package.json

@@ -45,6 +45,7 @@
     "@typescript-eslint/eslint-plugin": "~5.40.0",
     "abitype": "1.0.5",
     "autoprefixer": "~10.4.12",
+    "cypress": "^13.13.3",
     "eslint": "~8.24.0",
     "eslint-config-next": "~14.0.4",
     "eslint-config-prettier": "~8.5.0",