From d52af6c0e2c5ed268747237e65603368645c9966 Mon Sep 17 00:00:00 2001
From: spypsy <spypsy@users.noreply.github.com>
Date: Thu, 7 Sep 2023 16:32:10 +0100
Subject: [PATCH] fix: browser test in canary flow (#2102)

Fixing browser test in canary flow by installing chromium and copying js
artifact exported by aztec.js
Fixes #2086
---
 yarn-project/aztec.js/src/index.ts            |  3 +-
 yarn-project/canary/Dockerfile                |  8 +++--
 .../canary/src/aztec_js_browser.test.ts       | 29 +++++++++----------
 yarn-project/canary/src/web/index.html        | 10 +++++++
 4 files changed, 31 insertions(+), 19 deletions(-)
 create mode 100644 yarn-project/canary/src/web/index.html

diff --git a/yarn-project/aztec.js/src/index.ts b/yarn-project/aztec.js/src/index.ts
index fdc2102017b..9e70c21fb89 100644
--- a/yarn-project/aztec.js/src/index.ts
+++ b/yarn-project/aztec.js/src/index.ts
@@ -27,5 +27,6 @@ export {
   emptyFunctionCall,
 } from '@aztec/types';
 
-export { createDebugLogger } from '@aztec/foundation/log';
+export { createDebugLogger, DebugLogger } from '@aztec/foundation/log';
+export { fileURLToPath } from '@aztec/foundation/url';
 export { sleep } from '@aztec/foundation/sleep';
diff --git a/yarn-project/canary/Dockerfile b/yarn-project/canary/Dockerfile
index 5d5467d0d2c..eace3990aab 100644
--- a/yarn-project/canary/Dockerfile
+++ b/yarn-project/canary/Dockerfile
@@ -1,7 +1,8 @@
 FROM node:18-alpine
-RUN apk update && apk add --no-cache jq bash
+RUN apk update && apk add --no-cache udev ttf-freefont chromium curl jq bash
+ENV CHROME_BIN="/usr/bin/chromium-browser" PUPPETEER_SKIP_CHROMIUM_DOWNLOAD="true"
 
-ARG COMMIT_TAG=""
+ARG COMMIT_TAG="v0.1.0-alpha62"
 
 #Build canary
 WORKDIR /usr/src/
@@ -9,4 +10,7 @@ COPY ./canary .
 RUN ./scripts/update_packages.sh $COMMIT_TAG
 RUN yarn && yarn build
 
+RUN cp node_modules/@aztec/aztec.js/dest/main.js src/web/
+RUN cp node_modules/@aztec/circuits.js/resources/aztec3-circuits.wasm src/web/
+
 ENTRYPOINT ["yarn", "test"]
\ No newline at end of file
diff --git a/yarn-project/canary/src/aztec_js_browser.test.ts b/yarn-project/canary/src/aztec_js_browser.test.ts
index 525b9ca217d..89614830021 100644
--- a/yarn-project/canary/src/aztec_js_browser.test.ts
+++ b/yarn-project/canary/src/aztec_js_browser.test.ts
@@ -1,8 +1,5 @@
 /* eslint-disable no-console */
 import * as AztecJs from '@aztec/aztec.js';
-import { AztecAddress, GrumpkinScalar } from '@aztec/circuits.js';
-import { DebugLogger, createDebugLogger } from '@aztec/foundation/log';
-import { fileURLToPath } from '@aztec/foundation/url';
 import { PrivateTokenContractAbi } from '@aztec/noir-contracts/artifacts';
 
 import { Server } from 'http';
@@ -17,15 +14,15 @@ declare global {
   }
 }
 
-const __filename = fileURLToPath(import.meta.url);
+const __filename = AztecJs.fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-const PORT = 3000;
+const PORT = 3033;
 
 const { SANDBOX_URL } = process.env;
 
 const conditionalDescribe = () => (SANDBOX_URL ? describe : describe.skip);
-const privKey = GrumpkinScalar.random();
+const privKey = AztecJs.GrumpkinScalar.random();
 
 /**
  * This test is a bit of a special case as it's relying on sandbox and web browser and not only on anvil and node.js.
@@ -45,10 +42,10 @@ conditionalDescribe()('e2e_aztec.js_browser', () => {
   const initialBalance = 33n;
   const transferAmount = 3n;
 
-  let contractAddress: AztecAddress;
+  let contractAddress: AztecJs.AztecAddress;
 
-  let logger: DebugLogger;
-  let pageLogger: DebugLogger;
+  let logger: AztecJs.DebugLogger;
+  let pageLogger: AztecJs.DebugLogger;
   let app: Koa;
   let testClient: AztecJs.AztecRPC;
   let server: Server;
@@ -59,15 +56,15 @@ conditionalDescribe()('e2e_aztec.js_browser', () => {
   beforeAll(async () => {
     testClient = AztecJs.createAztecRpcClient(SANDBOX_URL!, AztecJs.makeFetch([1, 2, 3], true));
     await AztecJs.waitForSandbox(testClient);
-
+    const pathRes = path.resolve(__dirname, './web');
     app = new Koa();
-    app.use(serve(path.resolve(__dirname, './web')));
+    app.use(serve(pathRes));
     server = app.listen(PORT, () => {
       logger(`Server started at http://localhost:${PORT}`);
     });
 
-    logger = createDebugLogger('aztec:aztec.js:web');
-    pageLogger = createDebugLogger('aztec:aztec.js:web:page');
+    logger = AztecJs.createDebugLogger('aztec:aztec.js:web');
+    pageLogger = AztecJs.createDebugLogger('aztec:aztec.js:web:page');
 
     browser = await launch({
       executablePath: process.env.CHROME_BIN,
@@ -86,12 +83,12 @@ conditionalDescribe()('e2e_aztec.js_browser', () => {
     });
     page = await browser.newPage();
     page.on('console', msg => {
-      pageLogger(msg.text());
+      pageLogger('PAGE MSG', msg.text());
     });
     page.on('pageerror', err => {
-      pageLogger.error(err.toString());
+      pageLogger.error('PAGE ERROR', err.toString());
     });
-    await page.goto(`http://localhost:${PORT}/index.html`);
+    await page.goto(`http://localhost:${PORT}`);
   }, 120_000);
 
   afterAll(async () => {
diff --git a/yarn-project/canary/src/web/index.html b/yarn-project/canary/src/web/index.html
new file mode 100644
index 00000000000..97e7d022731
--- /dev/null
+++ b/yarn-project/canary/src/web/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <script type="module">
+      import * as AztecJs from './main.js';
+
+      window.AztecJs = AztecJs;
+    </script>
+  </body>
+</html>