chore(boxes): adding react frontend tests

This PR adds a frontend test for the react box

boxes/react/.gitignore

@@ -6,3 +6,7 @@ dist
 artifacts
 src/contracts/target
 src/contracts/log
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

boxes/react/package.json

@@ -11,10 +11,12 @@
     "prep": "yarn clean && yarn compile && yarn codegen",
     "dev": "yarn prep && webpack serve --mode development",
     "build": "yarn prep && webpack",
-    "serve": "serve -p 3000 ./dist",
+    "serve": "webpack serve --no-open --mode development",
     "formatting": "prettier --check ./src && eslint ./src",
     "formatting:fix": "prettier -w ./src",
-    "test": "NODE_NO_WARNINGS=1 node --experimental-vm-modules $(yarn bin jest) --runInBand"
+    "test": "yarn test:node && yarn test:browser",
+    "test:node": "NODE_NO_WARNINGS=1 node --experimental-vm-modules $(yarn bin jest) --runInBand",
+    "test:browser": "npx playwright test"
   },
   "jest": {
     "preset": "ts-jest/presets/default-esm",
@@ -45,6 +47,7 @@
     "yup": "^1.2.0"
   },
   "devDependencies": {
+    "@playwright/test": "1.42.0",
     "@types/jest": "^29.5.0",
     "@types/node": "^20.5.9",
     "@types/react": "^18.2.15",

boxes/react/playwright.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+  testMatch: '**.spec.ts',
+  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: 90000,
+  },
+  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,
+  },
+});

boxes/react/tests/browser.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  test.slow();
+  await page.goto('/');
+
+  // Deploy contract
+  await page.getByRole('button', { name: 'Deploy dummy contract' }).click();
+  await expect(page.getByText('Deploying contract...')).toBeVisible();
+  await expect(page.getByText('Address:')).toBeVisible();
+
+  // Read number
+  await page.getByRole('button', { name: 'Read' }).click();
+  await expect(page.getByText('Number is:')).toBeVisible();
+
+  // Set number
+  await page.locator('#numberToSet').fill('1');
+  await page.getByRole('button', { name: 'Write' }).click();
+  await expect(page.getByText('Setting number...')).toBeVisible();
+  await expect(page.getByText('Number set to: 1')).toBeVisible();
+
+  // Read number
+  await page.getByRole('button', { name: 'Read' }).click();
+  await expect(page.getByText('Number is: 1')).toBeVisible();
+});

boxes/react/webpack.config.js

@@ -1,53 +1,54 @@
-import { createRequire } from "module";
-import webpack from "webpack";
-import HtmlWebpackPlugin from "html-webpack-plugin";
+import { createRequire } from 'module';
+import webpack from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
 const require = createRequire(import.meta.url);
 
 export default (_, argv) => ({
-  target: "web",
-  mode: "production",
-  devtool: "source-map",
+  target: 'web',
+  mode: 'production',
+  devtool: 'source-map',
   entry: {
-    main: "./src/index.tsx",
+    main: './src/index.tsx',
   },
   module: {
     rules: [
       {
         test: /\.tsx?$/,
-        use: "ts-loader",
+        use: 'ts-loader',
       },
       {
         test: /\.css$/i,
-        use: ["style-loader", "css-loader", "postcss-loader"],
+        use: ['style-loader', 'css-loader', 'postcss-loader'],
       },
     ],
   },
   plugins: [
     new HtmlWebpackPlugin({
-      template: "./index.html",
+      template: './index.html',
     }),
     new webpack.DefinePlugin({
-      "process.env": {
-        NODE_ENV: JSON.stringify(argv.mode || "production"),
+      '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"] }),
+    new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] }),
   ],
   resolve: {
-    extensions: [".tsx", ".ts", ".js"],
+    extensions: ['.tsx', '.ts', '.js'],
     fallback: {
       crypto: false,
       os: false,
       fs: false,
       path: false,
       url: false,
       worker_threads: false,
-      events: require.resolve("events/"),
-      buffer: require.resolve("buffer/"),
-      util: require.resolve("util/"),
-      stream: require.resolve("stream-browserify"),
-      string_decoder: require.resolve("string_decoder/"),
-      tty: require.resolve("tty-browserify"),
+      events: require.resolve('events/'),
+      buffer: require.resolve('buffer/'),
+      util: require.resolve('util/'),
+      stream: require.resolve('stream-browserify'),
+      string_decoder: require.resolve('string_decoder/'),
+      tty: require.resolve('tty-browserify'),
     },
   },
   devServer: {

boxes/vanilla-js/src/index.ts

@@ -1,20 +1,14 @@
-import {
-  GrumpkinScalar,
-  createPXEClient,
-  AccountManager,
-  ContractDeployer,
-  Fr,
-  AccountWalletWithPrivateKey,
-} from '@aztec/aztec.js';
+import { GrumpkinScalar, createPXEClient, AccountManager, ContractDeployer, Fr, Wallet } from '@aztec/aztec.js';
 
 import { SingleKeyAccountContract } from '@aztec/accounts/single_key';
 import { VanillaContract } from '../artifacts/Vanilla';
 
 const privateKey: GrumpkinScalar = GrumpkinScalar.random();
 const pxe = createPXEClient(process.env.PXE_URL || 'http://localhost:8080');
+
 const account = new AccountManager(pxe, privateKey, new SingleKeyAccountContract(privateKey));
 let contract: any = null;
-let wallet: AccountWalletWithPrivateKey | null = null;
+let wallet: Wallet | null = null;
 
 const setWait = (state: boolean): void =>
   document.querySelectorAll('*').forEach((e: HTMLElement & HTMLButtonElement) => {
@@ -47,9 +41,9 @@ document.querySelector('#set').addEventListener('submit', async (e: Event) => {
   const { value } = document.querySelector('#number') as HTMLInputElement;
   const owner = wallet.getCompleteAddress().address;
   await contract.methods.setNumber(parseInt(value), owner).send().wait();
-  alert('Number set!');
 
   setWait(false);
+  alert('Number set!');
 });
 
 document.querySelector('#get').addEventListener('click', async () => {