feat: add test for hardhat testing tutorial

.github/workflows/playwright.yaml

@@ -0,0 +1,24 @@
+name: Playwright Tests
+
+on:
+  pull_request:
+
+jobs:
+  test-tutorials:
+    timeout-minutes: 20
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        tutorial:
+          - "tests/how-to-test-contracts.spec.ts" 
+
+    steps:
+    - uses: actions/checkout@v4
+    - uses: oven-sh/setup-bun@v1
+    - name: Install Dependencies
+      run: bun install --frozen-lockfile
+    - uses: actions/setup-node@v4
+    - name: Install Playwright Browsers
+      run: bun playwright install chromium --with-deps
+    - name: Run test for ${{ matrix.tutorial }}
+      run: bun test:github ${{ matrix.tutorial }}

.gitignore

@@ -17,6 +17,9 @@ logs
 .DS_Store
 .fleet
 .idea
+tests-output
+test-results
+playwright-report
 
 # Local env files
 .env

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

@@ -12,7 +12,6 @@ To facilitate this process of running tests on the **ZKsync Era Test Node**, you
 
 - Node.js installed (version 14.x or later)
 - Either yarn or npm installed
-- Initialized Hardhat TypeScript project
 
 ## Era-test-node plugin
 
@@ -25,8 +24,20 @@ During the alpha phase, ZKsync Era Test Nodes are currently undergoing developme
 
 ### Installation
 
+First, initialize a new Hardhat TypeScript project:
+
+<span id="initialize-hardhat-project" data-name="runCommand"></span>
+
+```bash
+npx hardhat init
+```
+
+Select the `Create a TypeScript project` option and install the sample project's dependencies `hardhat` and `@nomicfoundation/hardhat-toolbox`.
+
 To install the `hardhat-zksync-node` plugin and additional necessary packages, execute the following command:
 
+<span id="install-hh-zksync" data-name="runCommand" data-command-folder="tests-output/hardhat-project"></span>
+
 ::code-group
 
 ```bash [npm]
@@ -41,6 +52,9 @@ yarn add -D @matterlabs/hardhat-zksync-node
 
 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>
+
 ```ts [hardhat.config.ts]
 import "@matterlabs/hardhat-zksync-node";
 ```
@@ -49,10 +63,12 @@ import "@matterlabs/hardhat-zksync-node";
 
 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>
+
 ::code-group
 
-```bash [npm]
-npm hardhat node-zksync
+```bash [npx]
+npx hardhat node-zksync
 ```
 
 ```bash [yarn]
@@ -61,6 +77,10 @@ yarn hardhat node-zksync
 
 ::
 
+<span id="wait-for-hh-node" data-name="wait" data-timeout="3000"></span>
+
+<span id="test-hh-node" data-name="checkIfBalanceIsZero" data-network-url="http://127.0.0.1:8011" data-address="0xe2b8Cb53a43a56d4d2AB6131C81Bd76B86D3AFe5"></span>
+
 ::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**,
 without further use of this command in the tutorial.
@@ -83,9 +103,17 @@ we can shut it down and continue with the tutorial.
 
 ### Integration with Hardhat
 
-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:
+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>
 
-```json
+```ts
+zksolc: {
+    version: "latest",
+  },
 networks: {
     hardhat: {
       zksync: true,
@@ -100,34 +128,45 @@ 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>
+
 ::code-group
 
 ```bash [npm]
-npm i -D @nomicfoundation/hardhat-chai-matchers [email protected] @nomiclabs/hardhat-ethers
+npm i -D @nomicfoundation/hardhat-chai-matchers [email protected] @matterlabs/hardhat-zksync
 ```
 
 ```bash [yarn]
-yarn add -D  @nomicfoundation/hardhat-chai-matchers [email protected] @nomiclabs/hardhat-ethers
+yarn add -D  @nomicfoundation/hardhat-chai-matchers [email protected] @matterlabs/hardhat-zksync
 ```
 
 ::
 
-After installing it, add the plugin at the top of your `hardhat.config.ts` file:
+After installing it, add the plugins 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>
 
 ```ts [hardhat.config.ts]
-import "@nomicfoundation/hardhat-chai-matchers"
+import "@matterlabs/hardhat-zksync";
+import "@nomicfoundation/hardhat-chai-matchers";
 ```
 
 ## Smart contract example
 
 To set up the environment for using chai matchers and writing tests, you'll need to create some contracts.
-Follow these steps:
 
-1. Navigate to the root of your project.
-1. Create a folder named **contracts**.
-1. Inside the **contracts** folder, create a file named **Greeter.sol**.
+Inside the **contracts** folder, rename the example contract file to **Greeter.sol**.
 
-Now we should add some code to the new **Greeter.sol** file:
+<span id="rename-greeter-file" data-name="runCommand" data-command-folder="tests-output/hardhat-project"></span>
+
+```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>
 
 ```solidity [Greeter.sol]
 // SPDX-License-Identifier: MIT
@@ -158,42 +197,50 @@ contract Greeter {
 
 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>
+
 ```ts [hardhat.config.ts]
 import { HardhatUserConfig } from "hardhat/config";
-
-import "@matterlabs/hardhat-zksync"
+import "@nomicfoundation/hardhat-toolbox";
+import "@matterlabs/hardhat-zksync-node";
+import "@matterlabs/hardhat-zksync";
 import "@nomicfoundation/hardhat-chai-matchers";
 
 const config: HardhatUserConfig = {
+  solidity: "0.8.24",
   zksolc: {
     version: "latest",
   },
-  solidity: "0.8.19",
   networks: {
     hardhat: {
       zksync: true,
     },
   },
 };
+
 export default config;
 ```
 
-Here are the steps to create test cases with the `hardhat-chai-matchers` plugin:
+Now you can create a test with the `hardhat-chai-matchers` plugin:
+
+Inside the `/test` folder, renamefile named `test.ts`.
 
-1. Navigate to your project's root directory.
-1. Create a new folder named `/test`.
-1. Inside the `/test` folder, create a file named `test.ts`.
+<span id="rename-test-file" data-name="runCommand" data-command-folder="tests-output/hardhat-project"></span>
 
-Once you've completed these steps, you'll be ready to write your tests using the `hardhat-chai-matchers` plugin.
+```bash
+mv test/Lock.ts test/test.ts
+```
+
+Replace the old test with this example showcasing the functionalities of the contract:
 
-Here's a brief example showcasing the functionalities of the contract:
+<span id="create-test" data-name="writeToFile" data-filepath="tests-output/hardhat-project/test/test.ts"></span>
 
 ```typescript
 import * as hre from "hardhat";
 import { expect } from "chai";
 import { Wallet, Provider, Contract } from "zksync-ethers";
 import { Deployer } from "@matterlabs/hardhat-zksync";
-import { ZkSyncArtifact } from "@matterlabs/hardhat-zksync/src/types";
+import { ZkSyncArtifact } from "@matterlabs/hardhat-zksync-deploy/src/types";
 
 const RICH_PRIVATE_KEY = "0x7726827caac94a7f9e1b160f7ea819f172f7b6f9d2a97f992c38edeab82d4110";
 
@@ -239,14 +286,16 @@ 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>
+
 ::code-group
 
-```bash [yarn]
-yarn hardhat test
+```bash [npx]
+npx hardhat test
 ```
 
-```bash [npm]
-npm hardhat test
+```bash [yarn]
+yarn hardhat test
 ```
 
 ::

cspell-config/cspell-zksync.txt

@@ -8,6 +8,7 @@ zkcast
 ZKEVM
 zkevm
 zkforge
+zknode
 zkout
 zksolc
 zkstack

package.json

@@ -12,6 +12,8 @@
     "lint:eslint": "eslint .",
     "lint:prettier": "prettier --check .",
     "fix:prettier": "prettier --write .",
+    "test:github": "playwright test",
+    "test:local": "playwright test --headed",
     "prepare": "node .husky/install.mjs",
     "postinstall": "nuxt prepare",
     "ci:check": "bun run lint:eslint && bun run lint:prettier && bun run lint:spelling && bun run lint:markdown",
@@ -27,24 +29,29 @@
     "@nuxt/ui-pro": "^1.1.0",
     "@nuxtjs/seo": "^2.0.0-rc.10",
     "dayjs": "^1.11.10",
+    "ethers": "^6.0.0",
     "nuxt": "^3.11.2",
     "nuxt-gtag": "^2.0.6",
     "nuxt-headlessui": "^1.2.0",
     "nuxt-og-image": "^3.0.0-rc.53",
     "rehype-katex": "^7.0.0",
     "remark-math": "^6.0.0",
-    "vue-tsc": "^2.0.16"
+    "vue-tsc": "^2.0.16",
+    "zksync-ethers": "^6.10.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "@playwright/test": "^1.45.2",
     "@vue/test-utils": "^2.4.5",
     "cspell": "^8.7.0",
     "eslint": "^8.57.0",
+    "hardhat": "^2.22.6",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.4",
     "markdownlint": "^0.34.0",
     "markdownlint-cli2": "^0.13.0",
+    "pm2": "^5.4.2",
     "prettier": "^3.2.5",
     "prettier-eslint": "^16.3.0",
     "prettier-plugin-tailwindcss": "^0.5.14"

playwright.config.ts

@@ -0,0 +1,80 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 1 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+  timeout: 10 * 60 * 1000,
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'bun run dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+  },
+});