Skip to content

Commit

Permalink
feat: add test for hardhat testing tutorial
Browse files Browse the repository at this point in the history
  • Loading branch information
sarahschwartz committed Jul 24, 2024
1 parent c8352df commit 9c71013
Show file tree
Hide file tree
Showing 16 changed files with 508 additions and 29 deletions.
24 changes: 24 additions & 0 deletions .github/workflows/playwright.yaml
Original file line number Diff line number Diff line change
@@ -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 }}
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ logs
.DS_Store
.fleet
.idea
tests-output
test-results
playwright-report

# Local env files
.env
Expand Down
Binary file modified bun.lockb
Binary file not shown.
105 changes: 77 additions & 28 deletions content/tutorials/how-to-test-contracts/10.index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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]
Expand All @@ -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";
```
Expand All @@ -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]
Expand All @@ -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.
Expand All @@ -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,
Expand All @@ -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 chai@4.3.6 @nomiclabs/hardhat-ethers
npm i -D @nomicfoundation/hardhat-chai-matchers chai@4.3.6 @matterlabs/hardhat-zksync
```

```bash [yarn]
yarn add -D @nomicfoundation/hardhat-chai-matchers chai@4.3.6 @nomiclabs/hardhat-ethers
yarn add -D @nomicfoundation/hardhat-chai-matchers chai@4.3.6 @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
Expand Down Expand Up @@ -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";

Expand Down Expand Up @@ -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
```

::
Expand Down
1 change: 1 addition & 0 deletions cspell-config/cspell-zksync.txt
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ zkcast
ZKEVM
zkevm
zkforge
zknode
zkout
zksolc
zkstack
Expand Down
9 changes: 8 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
Expand Down
80 changes: 80 additions & 0 deletions playwright.config.ts
Original file line number Diff line number Diff line change
@@ -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,
},
});
Loading

0 comments on commit 9c71013

Please sign in to comment.