fix: hh testing guide, docs cleanup (#424)

- fixes the hardhat testing guide
- fixes hardhat migration guide
- replaces some hard-coded code snippets with imports
- replaces dropdown html with panel components
- fixes minor typos

Author: sarahschwartz

content/00.zksync-era/10.guides/30.testing/10.testing-with-hardhat.md

@@ -15,126 +15,65 @@ and we'll use [Mocha](https://mochajs.org/) as our test runner.
 ### Prerequisites
 
 - `zksync-cli` installed from the [zksync-cli section](/build/zksync-cli).
-- `anvil-zksync` installed and running. See [anvil-zksync](/build/test-and-debug/in-memory-node).
+- `anvil-zksync` installed. See [anvil-zksync](/build/test-and-debug/in-memory-node).
 
 ---
 ## Environment setup
 
 1. Create a new project with the required dependencies and boilerplate paymaster implementations:
 
     ```bash
-    zksync-cli create test-greeter
+    zksync-cli create test-greeter --template hardhat_solidity
     ```
 
-    Choose `Hardhat + Solidity` to setup the project repository. The contract for this guide exists under `/contracts/Greeter.sol`.
+    Use the private key below to use a pre-configured rich wallet for deployment and testing:
 
-    Install dependencies:
+    ```bash
+    ? Private key of the wallet responsible for deploying contracts (optional)
+    0x7726827caac94a7f9e1b160f7ea819f172f7b6f9d2a97f992c38edeab82d4110
+    ```
 
-    ::code-group
+    The contract for this guide exists under `/contracts/Greeter.sol`.
 
-    ```bash [yarn]
-    yarn install
-    ```
+1. Install the dependencies:
+
+    ::code-group
 
     ```bash [npm]
     npm install
     ```
 
-    ```bash [bun]
-    bun install
-    ```
-
-    ::
-
-1. Add the following additional dependencies:
-
-    ::code-group
-
     ```bash [yarn]
-    yarn add -D @nomicfoundation/hardhat-chai-matchers @nomiclabs/hardhat-ethers
+    yarn install
     ```
 
-    ```bash [npm]
-    npm add @nomicfoundation/hardhat-chai-matchers @nomiclabs/hardhat-ethers --save-dev
+    ```bash [pnpm]
+    pnpm install
     ```
 
     ```bash [bun]
-    bun add @nomicfoundation/hardhat-chai-matchers @nomiclabs/hardhat-ethers --dev
+    bun install
     ```
 
     ::
 
-1. Import `@nomicfoundation/hardhat-chai-matchers` into the `hardhat.config.ts` file:
-
-    ```typescript [hardhat.config.ts]
-    import "@nomicfoundation/hardhat-chai-matchers";
-    ```
-
-    The `@nomicfoundation/hardhat-chai-matchers` plugin adds Ethereum specific capabilities
-    to the [Chai](https://www.chaijs.com/) assertion library for testing smart contracts.
+1. Compile the contracts:
 
-1. Start `anvil-zksync`:
-
-    ```bash
-    ./target/release/anvil-zksync run
-    ```
+    :display-partial{path="/_partials/commands/_compile"}
 
 ---
 ## Run tests with Hardhat
 
-Under the `/test` directory there is a `main.test.ts` . The initial test checks if our `Greeter` contract returns the set greeting.
-
-```typescript [/test/main.test.ts]
-import { expect } from "chai";
-import { Wallet, Provider, Contract } from "zksync-ethers";
-import * as hre from "hardhat";
-import { Deployer } from "@matterlabs/hardhat-zksync";
-import { zkSyncTestnet } from "../hardhat.config";
-
-const RICH_WALLET_PK = "0x7726827caac94a7f9e1b160f7ea819f172f7b6f9d2a97f992c38edeab82d4110";
-
-async function deployGreeter(deployer: Deployer): Promise<Contract> {
-  const artifact = await deployer.loadArtifact("Greeter");
-  return await deployer.deploy(artifact, ["Hi"]);
-}
-
-describe("Greeter", function () {
-  it("Should return the new greeting once it's changed", async function () {
-    const provider = new Provider(zkSyncTestnet.url);
+Under the `/test` directory there is a `greeter.test.ts` file. The initial test checks if our `Greeter` contract returns the set greeting.
 
-    const wallet = new Wallet(RICH_WALLET_PK, provider);
-    const deployer = new Deployer(hre, wallet);
-
-    const greeter = await deployGreeter(deployer);
-
-    expect(await greeter.greet()).to.eq("Hi");
-
-    const setGreetingTx = await greeter.setGreeting("Hola, mundo!");
-    // wait until the transaction is mined
-    await setGreetingTx.wait();
-
-    expect(await greeter.greet()).to.equal("Hola, mundo!");
-  });
-});
+```typescript [/test/greeter.test.ts]
+:code-import{filePath="hardhat-sol-template/test/greeter.test.ts"}
 ```
 
 To run this test:
 
-::code-group
-
-```bash [yarn]
-yarn test
-```
+:display-partial{path="/_partials/commands/_test-greeter"}
 
-```bash [npm]
-npm test
-```
-
-```bash [bun]
-bun run test
-```
-
-::
 You should see the following output:
 
 ```sh
@@ -153,7 +92,6 @@ Our aim is comprehensive coverage. Here are the test scenarios we will cover:
 1. **Testing greet() function**: Check the returned greeting.
 2. **Testing setGreeting() function**: Verify the ability to update greetings.
 3. **Testing Insufficient Funds**: Ensure transactions fail without enough funds.
-4. **Event Emission**: Ensure an event is emitted when changing the greeting.
 
 Each of these test cases will rely on a common setup,
 which involves creating a provider connected to the %%zk_testnet_name%%, initializing a wallet with a known private key,
@@ -162,102 +100,16 @@ and deploying the `Greeter` contract.
 Let's refactor our test file with the provided script:
 
 ::drop-panel
-  ::panel{label="test/main.test.ts"}
-    ```typescript [main.test.ts]
-    import { expect } from "chai";
-    import { Wallet, Provider, Contract } from "zksync-ethers";
-    import * as hre from "hardhat";
-    import { Deployer } from "@matterlabs/hardhat-zksync";
-    import { zkSyncTestnet } from "../hardhat.config";
-
-    const RICH_WALLET_PK = "0x7726827caac94a7f9e1b160f7ea819f172f7b6f9d2a97f992c38edeab82d4110";
-
-    // Deploy the Greeter contract
-    async function deployGreeter(deployer: Deployer): Promise<Contract> {
-      // Load the Greeter contract artifact
-      const artifact = await deployer.loadArtifact("Greeter");
-      // Deploy the contract with an initial greeting
-      return await deployer.deploy(artifact, ["Hi"]);
-    }
-
-    describe("Greeter", function () {
-      let greeter;
-      let wallet;
-      let deployer;
-
-      // Initialize commonly used variables before running the tests
-      before(async function () {
-        // Create a provider connected to the ZKsync testnet
-        const provider = new Provider(zkSyncTestnet.url);
-
-        // Create a wallet instance using the rich wallet's private key
-        wallet = new Wallet(RICH_WALLET_PK, provider);
-        // Create a deployer instance for contract deployments
-        deployer = new Deployer(hre, wallet);
-        // Deploy the Greeter contract
-        greeter = await deployGreeter(deployer);
-      });
-
-      // Test the greet() function
-      it("Should return the new greeting once it's changed", async function () {
-        // Ensure the greet function returns the initial greeting after deployment
-        expect(await greeter.greet()).to.eq("Hi");
-      });
-
-      // Test the setGreeting() function
-      it("Should set a new greeting and return it", async function () {
-        // Set a new greeting
-        const setGreetingTx = await greeter.setGreeting("Hola, mundo!");
-        // Wait for the transaction to be confirmed
-        await setGreetingTx.wait();
-
-        // Ensure the greet function returns the newly set greeting
-        expect(await greeter.greet()).to.equal("Hola, mundo!");
-      });
-
-      // Test for lack of funds (or other tx failures)
-      it("Should fail when insufficient funds", async function () {
-        // Create an empty wallet with no funds
-        const userWallet = Wallet.createRandom();
-        // Connect the empty wallet to the greeter contract and attempt to set a new greeting
-        try {
-          await greeter.connect(userWallet).setGreeting("fail");
-          // The following line should not be reached if the transaction fails
-          expect(true).to.equal(false);
-        } catch (e) {
-          // Expect an error to be thrown for the transaction
-          expect(e).to.exist;
-        }
-      });
-
-      // Test event emission
-      it("Should emit an event when the greeting is changed", async function () {
-        const newGreeting = "Bonjour, monde!";
-        // Use the provided .emit method to test event emissions
-        await expect(greeter.setGreeting(newGreeting)).to.emit(greeter, "GreetingChanged").withArgs(newGreeting);
-      });
-    });
+  ::panel{label="test/greeter.test.ts"}
+    ```typescript [greeter.test.ts]
+    :code-import{filePath="hardhat-sol-template/test/greeter-expanded.test.ts"}
     ```
   ::
 ::
 
 To run this test:
 
-::code-group
-
-```bash [yarn]
-yarn test
-```
-
-```bash [npm]
-npm test
-```
-
-```bash [bun]
-bun run test
-```
-
-::
+:display-partial{path="/_partials/commands/_test-greeter"}
 
 You should see the following output:
 
@@ -266,37 +118,23 @@ You should see the following output:
     ✔ Should return the new greeting once it's changed (211ms)
     ✔ Should set a new greeting and return it (2682ms)
     ✔ Should fail when insufficient funds (299ms)
-    ✔ Should emit an event when the greeting is changed (2939ms)
 
-  4 passing (6s)
+  3 passing (6s)
 ```
 
 ## Understanding the test file
 
-Have a look at the `test/main.test.ts` file's imports:
+Have a look at the `test/greeter.test.ts` file's imports:
 
-```typescript [test/main.test.ts]
-import { expect } from "chai";
-import { Wallet, Provider, Contract } from "zksync-ethers";
-import * as hre from "hardhat";
-import { Deployer } from "@matterlabs/hardhat-zksync";
-import { zkSyncTestnet } from "../hardhat.config";
+```typescript [test/greeter.test.ts]
+:code-import{filePath="hardhat-sol-template/test/greeter-expanded.test.ts:imports"}
 ```
 
 This section imports all necessary utilities and configurations needed to run our tests.
 
 - `expect` from Chai provides assertion functionalities for our tests.
-- `Wallet`, `Provider`, and `Contract` from `zksync-ethers` help us with ZKsync functionalities like creating wallets and interacting with contracts.
-- `hre` and `Deployer` give us hardhat specific functionalities for deploying and interacting with our contract.
-- `zkSyncTestnet` from our hardhat configuration provides network details of our running `anvil-zksync.`
-
-#### Contract Deployment Utility
-
-```javascript
-async function deployGreeter(deployer: Deployer): Promise<Contract> { ... }
-```
-
-This utility function simplifies deploying the Greeter contract for our tests.
+- `Wallet`, and the `Contract` type from `ethers` help us creating a wallet and defining a contract's type.
+- `hre` gives us hardhat specific functionalities for deploying and interacting with our contract.
 
 #### Main Test Suite
 
@@ -337,11 +175,3 @@ Each test or nested suite inside provides specific scenarios or functionalities
     ```javascript
     it("Should fail when insufficient funds", async function () { ... });
     ```
-
-5. **Test event emission**
-
-    We test the emission of an event when the greeting changes in the contract making use of the `hardhat-chai-matchers`.
-
-    ```javascript
-    it("Should emit an event when the greeting is changed", async function () { ... });
-    ```

content/00.zksync-era/40.tooling/10.local-setup/10.anvil-zksync-node.md

@@ -20,7 +20,7 @@ The Foundry-ZKsync suite installs `anvil-zksync` alongside `forge`, and `cast`.
 
 If you want to install it separately, follow the instructions for your preferred method below:
 
-Install `anvil-zksync` with  from the below options:
+Install `anvil-zksync` with one of the below options:
 
 ::drop-panel
 

content/00.zksync-era/40.tooling/20.hardhat/10.installation.md

@@ -100,17 +100,7 @@ zksync-cli create <project-name> --template hardhat_vyper
 
 Ensure your smart contracts are located in the `contracts` folder of your project. To compile them, use:
 
-::code-group
-
-```bash [yarn]
-yarn hardhat compile
-```
-
-```bash [npx]
-npx hardhat compile
-```
-
-::
+:display-partial{path="/_partials/commands/_compile"}
 
 This will compile your contracts and generate the necessary artifacts in the `artifacts-zk` and `cache-zk` folders.
 

content/00.zksync-era/40.tooling/20.hardhat/20.guides/10.getting-started.md

@@ -84,7 +84,8 @@ The default network is set to `ZKsyncEraSepolia`, but mainnet and local test nod
 ```
 
 ::callout{icon="i-heroicons-information-circle" color="blue"}
-For local ZKsync testing, modify the default network name.
+For local ZKsync testing, modify the default network name, and
+add `import dotenv from "dotenv"; dotenv.config();` to use a `.env` file.
 ::
 
 ::callout{icon="i-heroicons-information-circle" color="blue"}