chore(boxes): adding frontend test to vanilla-js box

Please read [contributing guidelines](CONTRIBUTING.md) and remove this line.
AztecProtocol · Mar 4, 2024 · cd1ca2e · cd1ca2e
1 parent 86d6749
commit cd1ca2e
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Minimal Noir Contract Webpack</title>
+    <title>Aztec Vanilla JS Box</title>
     <style></style>
   </head>
   <body>

diff --git 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
@@ -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<void>(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
@@ -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
@@ -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<compat/fsevents>":
+  version: 2.3.2
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin<compat/fsevents>::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<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>":
   version: 2.3.3
   resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin<compat/fsevents>::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,24 +10499,24 @@ __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:
     typescript: ">=5.0.4"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/8b29c790181e44c4c95b9ffed1a8c1b6c2396eb949b95697cc390ca8c49d88ef9e2cd56bd4800b90a9bbc93681ae8d63045fc6fa06e00d84f532bef77967e751
+  checksum: 10c0/aa7e8750eca7d02eab1819ec7d85ba2d3669c65b133c919dc34ea0052c236e75220e25d667a604dd76d36f92958d60a52d6772c58cf725435f728ca4c70ee9b7
   languageName: node
   linkType: hard