feat: add erc20 paymaster test and refactor testing (#38)

* test: add erc20 paymaster test and refactor testing

* fix: try waiting for hh setup

* fix: interactive cli

* chore: replace span with component

.github/workflows/playwright.yaml

@@ -10,7 +10,8 @@ jobs:
     strategy:
       matrix:
         tutorial:
-          - "tests/how-to-test-contracts.spec.ts" 
+          - "tests/erc20-paymaster.spec.ts" 
+          - "tests/how-to-test-contracts.spec.ts"
 
     steps:
     - uses: actions/checkout@v4
@@ -21,4 +22,9 @@ jobs:
     - name: Install Playwright Browsers
       run: bun playwright install chromium --with-deps
     - name: Run test for ${{ matrix.tutorial }}
-      run: bun test:github ${{ matrix.tutorial }}
+      run: |
+        export TERM=xterm-256color
+        export COLUMNS=80
+        export LINES=24
+        script -q -c "bun test:github ${{ matrix.tutorial }}"
+      

components/TestAction.vue

@@ -0,0 +1,12 @@
+<template>
+  <span
+    :id="actionId"
+    data-test-action
+  />
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  actionId: string;
+}>();
+</script>

content/tutorials/erc20-paymaster/10.index.md

@@ -40,19 +40,26 @@ Atlas is a smart contract IDE that lets you write, deploy, and interact with con
 
 ## Setup the Project
 
-1. Initiate a new project by running the command:
+First, initialize a new project by running the command:
 
-    ```sh
-    npx zksync-cli create custom-paymaster-tutorial --template hardhat_solidity
-    ```
+:test-action{actionId="initialize-hardhat-project"}
 
-    This creates a new ZKsync Era project called `custom-paymaster-tutorial` with a basic `Greeter` contract.
+```sh
+npx zksync-cli create custom-paymaster-tutorial --template hardhat_solidity
+```
 
-1. Navigate into the project directory:
+This creates a new ZKsync Era project called `custom-paymaster-tutorial` with a basic `Greeter` contract.
 
-    ```sh
-    cd custom-paymaster-tutorial
-    ```
+Next, navigate into the project directory and install the dependencies:
+
+:test-action{actionId="wait-for-init"}
+:test-action{actionId="npm-install"}
+
+```sh
+cd custom-paymaster-tutorial && npm install --force
+```
+
+:test-action{actionId="wait-for-install"}
 
 ::callout{icon="i-heroicons-exclamation-circle"}
 The template project includes multiple example contracts. Feel free to delete them.
@@ -213,7 +220,17 @@ _first_ check that the user provided enough allowance before calling `transferFr
 
 ## Paymaster Contract Full Code
 
-Create the `contracts/MyPaymaster.sol` file and copy/paste the following:
+Create the `contracts/MyPaymaster.sol` file with
+
+:test-action{actionId="create-contract-file"}
+
+```sh
+touch contracts/MyPaymaster.sol
+```
+
+and copy/paste the following:
+
+:test-action{actionId="add-paymaster-contract"}
 
 ```solidity
 // SPDX-License-Identifier: MIT
@@ -338,10 +355,18 @@ contract MyPaymaster is IPaymaster {
 
 ## Create ERC20 Contract
 
-For the sake of simplicity we will use a modified OpenZeppelin ERC20 implementation:
+For the sake of simplicity we will use a modified OpenZeppelin ERC20 implementation.
+
+:test-action{actionId="create-erc20-contract-file"}
+
+```sh
+touch contracts/MyERC20.sol
+```
 
 Create the `contracts/MyERC20.sol` file and copy/paste the following:
 
+:test-action{actionId="add-erc20-contract"}
+
 ```solidity [contracts/MyERC20.sol]
 // SPDX-License-Identifier: UNLICENSED
 
@@ -378,7 +403,17 @@ It also mints some `MyERC20` tokens into the account we use to deploy the contra
 In addition, the script sends `0.06ETH` to the paymaster contract so it can pay the transaction fees we send later on.
 
 1. In the `deploy` folder, create the file `deploy-paymaster.ts` and copy/paste the following.
-  Make sure the private key of the account used to deploy the contracts is configured in the `.env` file of the project.:
+
+    :test-action{actionId="create-deploy-file"}
+
+    ```sh
+    touch deploy/deploy-paymaster.ts
+    ```
+
+    Make sure the private key of the account used to deploy the contracts is configured in the `.env` file of the project.
+
+    :test-action{actionId="add-testing-private-key"}
+    :test-action{actionId="add-deploy-script"}
 
     ```ts [deploy-paymaster.ts]
     import { deployContract, getWallet, getProvider } from "./utils";
@@ -416,16 +451,41 @@ In addition, the script sends `0.06ETH` to the paymaster contract so it can pay
 
 1. Compile and the contracts from the project root:
 
-    ```sh
+    :test-action{actionId="create-ts-config"}
+    :test-action{actionId="compile-contracts"}
+
+    ::code-group
+
+    ```bash [npx]
+    npx hardhat compile
+    ```
+
+    ```bash [yarn]
     yarn hardhat compile
     ```
 
+    ::
+
 1. Execute the deployment script:
 
-    ```sh
+    :test-action{actionId="use-local-network"}
+    :test-action{actionId="start-local-network"}
+    :test-action{actionId="wait-for-hh-node"}
+    :test-action{actionId="temp-fix-import"}
+    :test-action{actionId="deploy-contracts"}
+
+    ::code-group
+
+    ```bash [npx]
+    npx hardhat deploy-zksync --script deploy-paymaster.ts
+    ```
+
+    ```bash [yarn]
     yarn hardhat deploy-zksync --script deploy-paymaster.ts
     ```
 
+    ::
+
     The output should be roughly the following:
 
     ```sh
@@ -461,10 +521,18 @@ Make sure you delete the `artifacts-zk` and `cache-zk` folders before recompilin
 
 1. Create the `use-paymaster.ts` script in the `deploy` folder, replacing the parameter placeholders with the details from the previous deploy step.
 
+    :test-action{actionId="create-deploy-paymaster-file"}
+
+    ```sh
+    touch deploy/use-paymaster.ts
+    ```
+
     ::callout{icon="i-heroicons-exclamation-triangle"}
     Make sure you use the private key of the wallet created by the previous script as that wallet contains the ERC20 tokens.
     ::
 
+    :test-action{actionId="add-use-paymaster"}
+
     ```ts [deploy/use-paymaster.ts]
     import { utils, Wallet } from "zksync-ethers";
     import { getWallet, getProvider } from "./utils";
@@ -534,12 +602,25 @@ Make sure you delete the `artifacts-zk` and `cache-zk` folders before recompilin
     }
     ```
 
+    :test-action{actionId="paymaster-address"}
+    :test-action{actionId="token-address"}
+
 1. Run the script:
 
-    ```sh
+    :test-action{actionId="run-use-paymaster"}
+
+    ::code-group
+
+    ```bash [npx]
+    npx hardhat deploy-zksync --script use-paymaster.ts
+    ```
+
+    ```bash [yarn]
     yarn hardhat deploy-zksync --script use-paymaster.ts
     ```
 
+    ::
+
     The output should look something like this:
 
     ```txt

content/tutorials/how-to-test-contracts/10.index.md

@@ -26,7 +26,7 @@ During the alpha phase, ZKsync Era Test Nodes are currently undergoing developme
 
 First, initialize a new Hardhat TypeScript project:
 
-<span id="initialize-hardhat-project" data-name="runCommand"></span>
+:test-action{actionId="initialize-hardhat-project"}
 
 ```bash
 npx hardhat init
@@ -36,7 +36,7 @@ Select the `Create a TypeScript project` option and install the sample project's
 
 To install the `hardhat-zksync` plugin, execute the following command:
 
-<span id="install-hh-zksync" data-name="runCommand" data-command-folder="tests-output/hardhat-project"></span>
+:test-action{actionId="install-hh-zksync"}
 
 ::code-group
 
@@ -52,8 +52,7 @@ yarn add -D @matterlabs/hardhat-zksync
 
 Once installed, add the plugin at the top of your `hardhat.config.ts` file.
 
-<span id="import-zksync-config" data-name="modifyFile" data-filepath="tests-output/hardhat-project/hardhat.config.ts"
-data-at-line="3"></span>
+:test-action{actionId="import-zksync-config"}
 
 ```ts [hardhat.config.ts]
 import "@matterlabs/hardhat-zksync";
@@ -63,7 +62,7 @@ import "@matterlabs/hardhat-zksync";
 
 You can now safely run the **ZKsync Era Test Node** with the following command:
 
-<span id="run-hh-node" data-name="runCommand" data-command-folder="tests-output/hardhat-project" data-pre-command="bun pm2 start '<COMMAND>' --name hh-zknode"></span>
+:test-action{actionId="run-hh-node"}
 
 ::code-group
 
@@ -77,9 +76,8 @@ yarn hardhat node-zksync
 
 ::
 
-<span id="wait-for-hh-node" data-name="wait" data-timeout="6000"></span>
-
-<span id="test-hh-node" data-name="checkIfBalanceIsZero" data-network-url="http://127.0.0.1:8011" data-address="0xe2b8Cb53a43a56d4d2AB6131C81Bd76B86D3AFe5"></span>
+:test-action{actionId="wait-for-hh-node"}
+:test-action{actionId="test-hh-node"}
 
 ::callout{icon="i-heroicons-exclamation-circle"}
 We'll want to verify the correctness of our installations and test if we can run a **ZKsync Era Test Node**,
@@ -107,8 +105,7 @@ To enable the usage of ZKsync Era Test Node in Hardhat,
 add the `zksync:true` option to the hardhat network in the `hardhat.config.ts` file
 and the `latest` version of `zksolc`:
 
-<span id="zksync-hh-network" data-name="modifyFile" data-filepath="tests-output/hardhat-project/hardhat.config.ts"
-data-at-line="7"></span>
+:test-action{actionId="zksync-hh-network"}
 
 ```ts
 zksolc: {
@@ -128,7 +125,7 @@ it's necessary to use the `hardhat-chai-matchers` plugin.
 
 In the root directory of your project, execute this command:
 
-<span id="install-chai-ethers" data-name="runCommand" data-command-folder="tests-output/hardhat-project" data-pre-command="<COMMAND>"></span>
+:test-action{actionId="install-chai-ethers"}
 
 ::code-group
 
@@ -144,16 +141,15 @@ yarn add -D  @nomicfoundation/hardhat-chai-matchers chai@4.3.6
 
 After installing it, add the plugin at the top of your `hardhat.config.ts` file:
 
-<span id="import-chai-matchers" data-name="modifyFile" data-filepath="tests-output/hardhat-project/hardhat.config.ts"
-data-at-line="4"></span>
+:test-action{actionId="import-chai-matchers"}
 
 ```ts [hardhat.config.ts]
 import "@nomicfoundation/hardhat-chai-matchers";
 ```
 
 With the previous steps completed, your `hardhat.config.ts` file should now be properly configured to include settings for local testing.
 
-<span id="compare-config" data-name="compareToFile" data-filepath="tests-output/hardhat-project/hardhat.config.ts"></span>
+:test-action{actionId="compare-config"}
 
 ```ts [hardhat.config.ts]
 import { HardhatUserConfig } from "hardhat/config";
@@ -182,15 +178,15 @@ To set up the environment for using chai matchers and writing tests, you'll need
 
 Inside the **contracts** folder, rename the example contract file to **Greeter.sol**.
 
-<span id="rename-greeter-file" data-name="runCommand" data-command-folder="tests-output/hardhat-project"></span>
+:test-action{actionId="rename-greeter-file"}
 
 ```bash
 mv contracts/Lock.sol contracts/Greeter.sol
 ```
 
 Now replace the example contract in **Greeter.sol** with the new `Greeter` contract below:
 
-<span id="create-greeter-contract" data-name="writeToFile" data-filepath="tests-output/hardhat-project/contracts/Greeter.sol"></span>
+:test-action{actionId="create-greeter-contract"}
 
 ```solidity [Greeter.sol]
 // SPDX-License-Identifier: MIT
@@ -223,15 +219,15 @@ Now you can create a test with the `hardhat-chai-matchers` plugin:
 
 Inside the `/test` folder, rename the example test file to `test.ts`.
 
-<span id="rename-test-file" data-name="runCommand" data-command-folder="tests-output/hardhat-project"></span>
+:test-action{actionId="rename-test-file"}
 
 ```bash
 mv test/Lock.ts test/test.ts
 ```
 
 Replace the old test with this example showcasing the functionalities of the contract:
 
-<span id="create-test" data-name="writeToFile" data-filepath="tests-output/hardhat-project/test/test.ts"></span>
+:test-action{actionId="create-test"}
 
 ```typescript
 import * as hre from "hardhat";
@@ -284,7 +280,7 @@ describe("Greeter", function () {
 
 Execute the following command in your terminal to run the tests:
 
-<span id="run-test" data-name="runCommand" data-command-folder="tests-output/hardhat-project"></span>
+:test-action{actionId="run-test"}
 
 ::code-group
 

nuxt.config.ts

@@ -11,6 +11,12 @@ export default defineNuxtConfig({
       app: 'code',
     },
   },
+  components: [
+    {
+      path: '~/components',
+      global: true,
+    },
+  ],
   content: {
     navigation: {
       fields: [

package.json

@@ -50,6 +50,7 @@
     "lint-staged": "^15.2.4",
     "markdownlint": "^0.34.0",
     "markdownlint-cli2": "^0.13.0",
+    "node-pty": "^1.0.0",
     "pm2": "^5.4.2",
     "prettier": "^3.2.5",
     "prettier-eslint": "^16.3.0",

tests/configs/config.ts

@@ -0,0 +1,18 @@
+import { steps as erc20PaymasterSteps } from './erc20-paymaster';
+import { steps as howToTestContractsSteps } from './how-to-test-contracts';
+
+export function getConfig(tutorialName: string) {
+  let steps;
+  switch (tutorialName) {
+    case 'erc20-paymaster':
+      steps = erc20PaymasterSteps;
+      break;
+    case 'how-to-test-contracts':
+      steps = howToTestContractsSteps;
+      break;
+    default:
+      break;
+  }
+
+  return steps;
+}