From cd1ca2e13c3b475e28f17ad74e09b439a1133de0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Pedro=20Sousa?= Date: Mon, 4 Mar 2024 17:34:17 +0000 Subject: [PATCH] chore(boxes): adding frontend test to vanilla-js box Please read [contributing guidelines](CONTRIBUTING.md) and remove this line. --- boxes/Dockerfile | 1 + boxes/vanilla-js/.gitignore | 5 ++ boxes/vanilla-js/package.json | 4 +- boxes/vanilla-js/playwright.config.ts | 37 +++++++++++++ boxes/vanilla-js/src/index.html | 2 +- boxes/vanilla-js/src/index.ts | 1 - boxes/vanilla-js/tests/browser.spec.ts | 38 +++++++++++++ boxes/vanilla-js/webpack.config.js | 1 + boxes/yarn.lock | 77 ++++++++++++++++++++++---- 9 files changed, 152 insertions(+), 14 deletions(-) create mode 100644 boxes/vanilla-js/playwright.config.ts create mode 100644 boxes/vanilla-js/tests/browser.spec.ts diff --git a/boxes/Dockerfile b/boxes/Dockerfile index 92914c4459d..dc1ca00f1bd 100644 --- a/boxes/Dockerfile +++ b/boxes/Dockerfile @@ -14,4 +14,5 @@ WORKDIR /usr/src/boxes ENV AZTEC_NARGO=/usr/src/noir/noir-repo/target/release/nargo ENV AZTEC_CLI=/usr/src/yarn-project/cli/aztec-cli-dest RUN yarn && yarn build +RUN npx -y playwright@1.42 install --with-deps ENTRYPOINT ["/bin/sh", "-c"] diff --git a/boxes/vanilla-js/.gitignore b/boxes/vanilla-js/.gitignore index 0831fd90a01..5af41cfb33e 100644 --- a/boxes/vanilla-js/.gitignore +++ b/boxes/vanilla-js/.gitignore @@ -5,3 +5,8 @@ node_modules dist artifacts src/contracts/target +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ +codegenCache.json diff --git a/boxes/vanilla-js/package.json b/boxes/vanilla-js/package.json index a57206535e9..199837f5da7 100644 --- a/boxes/vanilla-js/package.json +++ b/boxes/vanilla-js/package.json @@ -10,7 +10,8 @@ "prep": "yarn clean && yarn compile && yarn codegen && tsc -b", "dev": "yarn prep && webpack serve --mode development", "build": "yarn prep && webpack", - "test": "echo \"Frontend test soon!\"", + "serve": "webpack serve --no-open --mode development", + "test": "npx playwright test", "formatting": "prettier --check ./src && eslint ./src", "formatting:fix": "prettier -w ./src" }, @@ -19,6 +20,7 @@ "@aztec/aztec.js": "latest" }, "devDependencies": { + "@playwright/test": "1.42.0", "@types/node": "^20.11.17", "copy-webpack-plugin": "^11.0.0", "html-webpack-plugin": "^5.6.0", diff --git a/boxes/vanilla-js/playwright.config.ts b/boxes/vanilla-js/playwright.config.ts new file mode 100644 index 00000000000..291379512bd --- /dev/null +++ b/boxes/vanilla-js/playwright.config.ts @@ -0,0 +1,37 @@ +import { defineConfig, devices } from '@playwright/test'; + +export default defineConfig({ + testDir: './tests', + fullyParallel: true, + retries: 3, + workers: process.env.CI ? 1 : 3, + reporter: 'list', + use: { + baseURL: 'http://127.0.0.1:5173', + trace: 'on-first-retry', + screenshot: 'only-on-failure', + video: 'on-first-retry', + }, + expect: { + timeout: 30000, + }, + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + }, + + { + name: 'webkit', + use: { ...devices['Desktop Safari'] }, + }, + ], + webServer: { + command: 'yarn serve', + port: 5173, + }, +}); diff --git a/boxes/vanilla-js/src/index.html b/boxes/vanilla-js/src/index.html index 72fc73354d2..fb790198fd1 100644 --- a/boxes/vanilla-js/src/index.html +++ b/boxes/vanilla-js/src/index.html @@ -3,7 +3,7 @@ - Minimal Noir Contract Webpack + Aztec Vanilla JS Box diff --git a/boxes/vanilla-js/src/index.ts b/boxes/vanilla-js/src/index.ts index 53e0f92099f..2ddcd10107a 100644 --- a/boxes/vanilla-js/src/index.ts +++ b/boxes/vanilla-js/src/index.ts @@ -46,7 +46,6 @@ document.querySelector('#set').addEventListener('submit', async (e: Event) => { const { value } = document.querySelector('#number') as HTMLInputElement; const owner = wallet.getCompleteAddress().address; - console.log(owner); await contract.methods.setNumber(parseInt(value), owner).send().wait(); alert('Number set!'); diff --git a/boxes/vanilla-js/tests/browser.spec.ts b/boxes/vanilla-js/tests/browser.spec.ts new file mode 100644 index 00000000000..bd413beac0c --- /dev/null +++ b/boxes/vanilla-js/tests/browser.spec.ts @@ -0,0 +1,38 @@ +import { test, expect } from '@playwright/test'; + +test('Deploying, setting, and getting a number', async ({ page }) => { + test.slow(); + await page.goto('/'); + + const handleDialog = (expectedMessage: string) => { + return new Promise(resolve => { + page.once('dialog', async dialog => { + expect(dialog.message()).toContain(expectedMessage); + await dialog.accept(); + resolve(); + }); + }); + }; + + // Deploy contract + const deployDialogPromise = handleDialog('Contract deployed at'); + await page.getByRole('button', { name: 'Deploy' }).click(); + await deployDialogPromise; + await expect(page.locator('#number')).toHaveValue('0'); + + // Get number + const getNumberDialogPromise = handleDialog('Number is:'); + await page.getByRole('button', { name: 'Get Number' }).click(); + await getNumberDialogPromise; + + // Set number + await page.locator('#number').fill('1'); + const setNumberDialogPromise = handleDialog('Number set!'); + await page.getByRole('button', { name: 'Set Number' }).click(); + await setNumberDialogPromise; + + // Verifying number + const verifyNumberDialogPromise = handleDialog('Number is: 1'); + await page.getByRole('button', { name: 'Get Number' }).click(); + await verifyNumberDialogPromise; +}); diff --git a/boxes/vanilla-js/webpack.config.js b/boxes/vanilla-js/webpack.config.js index c3e1ce298cf..aa9f974b3a2 100644 --- a/boxes/vanilla-js/webpack.config.js +++ b/boxes/vanilla-js/webpack.config.js @@ -25,6 +25,7 @@ export default (_, argv) => ({ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(argv.mode || 'production'), + PXE_URL: JSON.stringify(process.env.PXE_URL || 'http://localhost:8080'), }, }), new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] }), diff --git a/boxes/yarn.lock b/boxes/yarn.lock index 5d4ec9a33ff..f05ae16efc5 100644 --- a/boxes/yarn.lock +++ b/boxes/yarn.lock @@ -128,6 +128,7 @@ __metadata: dependencies: "@aztec/accounts": "npm:latest" "@aztec/aztec.js": "npm:latest" + "@playwright/test": "npm:1.42.0" "@types/node": "npm:^20.11.17" copy-webpack-plugin: "npm:^11.0.0" html-webpack-plugin: "npm:^5.6.0" @@ -190,7 +191,7 @@ __metadata: "@aztec/foundation": "workspace:^" dotenv: "npm:^16.0.3" tslib: "npm:^2.4.0" - viem: "npm:^1.2.5" + viem: "npm:^2.7.15" languageName: node linkType: soft @@ -1271,6 +1272,17 @@ __metadata: languageName: node linkType: hard +"@playwright/test@npm:1.42.0": + version: 1.42.0 + resolution: "@playwright/test@npm:1.42.0" + dependencies: + playwright: "npm:1.42.0" + bin: + playwright: cli.js + checksum: 10c0/1505544fd4962cc9463c2e0d21958507b4b23ecb835ef19d81a97ae01cda9030585dc321263486cce4d1eac53724615b7b3ec41a94b6c1a54a2b7ed01157de60 + languageName: node + linkType: hard + "@scure/base@npm:~1.1.0, @scure/base@npm:~1.1.2": version: 1.1.5 resolution: "@scure/base@npm:1.1.5" @@ -2131,18 +2143,18 @@ __metadata: languageName: node linkType: hard -"abitype@npm:0.9.8": - version: 0.9.8 - resolution: "abitype@npm:0.9.8" +"abitype@npm:1.0.0": + version: 1.0.0 + resolution: "abitype@npm:1.0.0" peerDependencies: typescript: ">=5.0.4" - zod: ^3 >=3.19.1 + zod: ^3 >=3.22.0 peerDependenciesMeta: typescript: optional: true zod: optional: true - checksum: 10c0/ec559461d901d456820faf307e21b2c129583d44f4c68257ed9d0d44eae461114a7049046e715e069bc6fa70c410f644e06bdd2c798ac30d0ada794cd2a6c51e + checksum: 10c0/d685351a725c49f81bdc588e2f3825c28ad96c59048d4f36bf5e4ef30935c31f7e60b5553c70177b77a9e4d8b04290eea43d3d9c1c2562cb130381c88b15d39f languageName: node linkType: hard @@ -4930,6 +4942,16 @@ __metadata: languageName: node linkType: hard +"fsevents@npm:2.3.2": + version: 2.3.2 + resolution: "fsevents@npm:2.3.2" + dependencies: + node-gyp: "npm:latest" + checksum: 10c0/be78a3efa3e181cda3cf7a4637cb527bcebb0bd0ea0440105a3bb45b86f9245b307dc10a2507e8f4498a7d4ec349d1910f4d73e4d4495b16103106e07eee735b + conditions: os=darwin + languageName: node + linkType: hard + "fsevents@npm:^2.3.2, fsevents@npm:~2.3.2": version: 2.3.3 resolution: "fsevents@npm:2.3.3" @@ -4940,6 +4962,15 @@ __metadata: languageName: node linkType: hard +"fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin": + version: 2.3.2 + resolution: "fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin::version=2.3.2&hash=df0bf1" + dependencies: + node-gyp: "npm:latest" + conditions: os=darwin + languageName: node + linkType: hard + "fsevents@patch:fsevents@npm%3A^2.3.2#optional!builtin, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin": version: 2.3.3 resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin::version=2.3.3&hash=df0bf1" @@ -8285,6 +8316,30 @@ __metadata: languageName: node linkType: hard +"playwright-core@npm:1.42.0": + version: 1.42.0 + resolution: "playwright-core@npm:1.42.0" + bin: + playwright-core: cli.js + checksum: 10c0/f08700ec743734247a0e025249ccaf1f58beb95b5c8ef6a4319f636db83ea668222967ae10299114e9f4725318f80185c7c7d97fe051ebd617acec5ae67af31a + languageName: node + linkType: hard + +"playwright@npm:1.42.0": + version: 1.42.0 + resolution: "playwright@npm:1.42.0" + dependencies: + fsevents: "npm:2.3.2" + playwright-core: "npm:1.42.0" + dependenciesMeta: + fsevents: + optional: true + bin: + playwright: cli.js + checksum: 10c0/4960431c89097d7a79a24d3d4e5896cd9e4253dacfdf2891ed8a32f31c6f665a3df9af636baa23a93382733667a4d997afadb6148e6ba71f42202eeafc8968b7 + languageName: node + linkType: hard + "possible-typed-array-names@npm:^1.0.0": version: 1.0.0 resolution: "possible-typed-array-names@npm:1.0.0" @@ -10444,16 +10499,16 @@ __metadata: languageName: node linkType: hard -"viem@npm:^1.2.5": - version: 1.21.4 - resolution: "viem@npm:1.21.4" +"viem@npm:^2.7.15": + version: 2.7.19 + resolution: "viem@npm:2.7.19" dependencies: "@adraffy/ens-normalize": "npm:1.10.0" "@noble/curves": "npm:1.2.0" "@noble/hashes": "npm:1.3.2" "@scure/bip32": "npm:1.3.2" "@scure/bip39": "npm:1.2.1" - abitype: "npm:0.9.8" + abitype: "npm:1.0.0" isows: "npm:1.0.3" ws: "npm:8.13.0" peerDependencies: @@ -10461,7 +10516,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10c0/8b29c790181e44c4c95b9ffed1a8c1b6c2396eb949b95697cc390ca8c49d88ef9e2cd56bd4800b90a9bbc93681ae8d63045fc6fa06e00d84f532bef77967e751 + checksum: 10c0/aa7e8750eca7d02eab1819ec7d85ba2d3669c65b133c919dc34ea0052c236e75220e25d667a604dd76d36f92958d60a52d6772c58cf725435f728ca4c70ee9b7 languageName: node linkType: hard