React tests & deterministic deploy cleanup (#2969)

Co-authored-by: Jonas Daniels <jonas.daniels@outlook.com>

Author: gregfromstl

.changeset/violet-queens-train.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fixes deterministic deploys of contracts with no constructor

packages/thirdweb/package.json

@@ -212,7 +212,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/ui": "1.5.0",
     "cross-spawn": "7.0.3",
-    "jsdom": "^24.0.0",
+    "happy-dom": "^14.10.1",
     "vitest": "1.5.0"
   }
 }

packages/thirdweb/src/contract/deployment/deploy-deterministic.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import {
+  ANVIL_CHAIN,
   FORKED_ETHEREUM_CHAIN,
   FORKED_OPTIMISM_CHAIN,
 } from "../../../test/src/chains.js";
@@ -14,13 +15,13 @@ import { prepareDeterministicDeployTransaction } from "./deploy-deterministic.js
 describe.runIf(process.env.TW_SECRET_KEY)("deployFromMetadata", () => {
   it("should deploy contracts at the same address", async () => {
     const tx1 = prepareDeterministicDeployTransaction({
-      chain: FORKED_ETHEREUM_CHAIN,
+      chain: ANVIL_CHAIN,
       client: TEST_CLIENT,
       contractId: "AccountFactory",
       constructorParams: [TEST_ACCOUNT_A.address, ENTRYPOINT_ADDRESS_v0_6],
     });
     const tx2 = prepareDeterministicDeployTransaction({
-      chain: FORKED_OPTIMISM_CHAIN,
+      chain: ANVIL_CHAIN,
       client: TEST_CLIENT,
       contractId: "AccountFactory",
       constructorParams: [TEST_ACCOUNT_A.address, ENTRYPOINT_ADDRESS_v0_6],
@@ -52,4 +53,17 @@ describe.runIf(process.env.TW_SECRET_KEY)("deployFromMetadata", () => {
     ]);
     expect(tx1Result !== tx2Result).toBe(true);
   });
+  // TODO: Replace these tests' live contracts with mocks
+  it("should deploy a published contract with no constructor", async () => {
+    const tx = prepareDeterministicDeployTransaction({
+      client: TEST_CLIENT,
+      chain: ANVIL_CHAIN,
+      contractId: "Counter",
+      publisher: "0x4a706de5CE9bfe2f9C37BA945805e396d1810824",
+      constructorParams: [],
+    });
+
+    const txResult = await simulateTransaction({ transaction: tx });
+    expect(txResult).toBeDefined();
+  });
 });

packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.test.tsx

@@ -1,11 +1,53 @@
-import { describe, expect, it } from "vitest";
+import {
+  afterAll,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from "vitest";
 import { render, screen } from "../../../../../test/src/react-render.js";
 import { TEST_CLIENT } from "../../../../../test/src/test-clients.js";
 import { ConnectButton } from "./ConnectButton.js";
 
 describe("ConnectButton", () => {
-  it("renders", () => {
-    render(<ConnectButton client={TEST_CLIENT} />);
-    expect(screen.getByRole("button")).toBeInTheDocument();
+  beforeAll(() => {
+    vi.mock("./locale/getConnectLocale.js", () => ({
+      useConnectLocale: vi.fn().mockReturnValue({
+        data: {
+          defaultButtonTitle: "Connect Wallet",
+        },
+        isLoading: false,
+      }),
+    }));
+  });
+
+  afterAll(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("defaults", () => {
+    beforeEach(() => {
+      render(<ConnectButton client={TEST_CLIENT} />);
+    });
+
+    it("should render", () => {
+      expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+
+    it("should display 'Connect Wallet' on initial render", () => {
+      expect(screen.getByText("Connect Wallet")).toBeInTheDocument();
+    });
+  });
+
+  it("should override default text", () => {
+    render(
+      <ConnectButton
+        client={TEST_CLIENT}
+        connectButton={{ label: "Sign In" }}
+      />,
+    );
+    expect(screen.getByText("Sign In")).toBeInTheDocument();
   });
 });

packages/thirdweb/src/react/web/ui/TransactionButton/TransactionButton.test.tsx

@@ -0,0 +1,95 @@
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from "vitest";
+import { ANVIL_CHAIN } from "../../../../../test/src/chains.js";
+import { render, screen } from "../../../../../test/src/react-render.js";
+import { TEST_CLIENT } from "../../../../../test/src/test-clients.js";
+import { TEST_ACCOUNT_A } from "../../../../../test/src/test-wallets.js";
+import { prepareTransaction, toWei } from "../../../../exports/thirdweb.js";
+import { TransactionButton } from "./index.js";
+
+vi.mock("../../../../transaction/actions/send-transaction.js", () => ({
+  sendTransaction: vi.fn(),
+}));
+
+const TRANSFER_TX = prepareTransaction({
+  client: TEST_CLIENT,
+  chain: ANVIL_CHAIN,
+  to: TEST_ACCOUNT_A.address,
+  value: BigInt(toWei("100")),
+});
+
+const mocks = vi.hoisted(() => {
+  return {
+    activeAccount: vi.fn(),
+    activeWallet: vi.fn(),
+    switchActiveWalletChain: vi.fn(),
+    transaction: vi.fn(),
+  };
+});
+
+describe.sequential("TransactionButton", () => {
+  beforeAll(() => {
+    vi.mock("../../../core/hooks/wallets/wallet-hooks.js", () => ({
+      useActiveAccount: mocks.activeAccount,
+      useActiveWallet: mocks.activeWallet,
+      useSwitchActiveWalletChain: mocks.switchActiveWalletChain,
+    }));
+  });
+
+  afterAll(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  beforeEach(() => {
+    mocks.transaction.mockReturnValue(TRANSFER_TX);
+    render(
+      <TransactionButton transaction={mocks.transaction}>
+        Send ETH
+      </TransactionButton>,
+    );
+  });
+
+  describe("defaults", () => {
+    it("should render", () => {
+      expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+
+    it("should display text on initial render", () => {
+      expect(screen.getByText("Send ETH")).toBeInTheDocument();
+    });
+  });
+
+  describe("with account", () => {
+    beforeAll(() => {
+      mocks.activeAccount.mockReturnValue(TEST_ACCOUNT_A);
+    });
+
+    it("should be enabled", () => {
+      const button = screen.getByRole("button", { name: "Send ETH" });
+      expect(button).not.toBeDisabled();
+    });
+  });
+
+  describe("without account", () => {
+    beforeAll(() => {
+      mocks.activeAccount.mockReturnValue(undefined);
+    });
+
+    it("should be disabled", () => {
+      const button = screen.getByRole("button", { name: "Send ETH" });
+      expect(button).toBeDisabled();
+    });
+  });
+});

packages/thirdweb/src/utils/any-evm/compute-published-contract-deploy-info.ts

@@ -56,7 +56,7 @@ export async function computeDeploymentInfoFromMetadata(args: {
       (abi) => abi.type === "constructor",
     ) as AbiConstructor) || [];
   const encodedArgs = encodeAbiParameters(
-    constructorAbi.inputs,
+    constructorAbi.inputs ?? [],
     constructorParams,
   );
   const initBytecodeWithsalt = getInitBytecodeWithSalt({

packages/thirdweb/test/vitest.config.ts

@@ -33,7 +33,7 @@ export default defineConfig({
       include: ["src/**"],
     },
     environmentMatchGlobs: [
-      ["src/react/**/*.test.tsx", "jsdom"],
+      ["src/react/**/*.test.tsx", "happy-dom"],
       ["src/**/*.test.ts", "node"],
       ["src/**/*", "node"], // all other files use node
     ],