Add CI job for checking if our WASM compilation succeeds

.github/workflows/ci-slow.yml

@@ -0,0 +1,46 @@
+name: CI (Slow Test Suite)
+
+on:
+  push:
+    branches: ["main"]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref || github.run_id }}
+  cancel-in-progress: true
+
+env:
+  CARGO_TERM_COLOR: always
+
+jobs:
+  check-runner:
+    uses: ./.github/workflows/check-runner.yml
+    secrets: inherit
+
+  wasm-playwright-test:
+    needs: check-runner
+    runs-on: ${{ needs.check-runner.outputs.runner-label }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install CI deps
+        uses: ./.github/actions/ci-deps
+        with:
+          local-cache: ${{ needs.check-runner.outputs.runner-label == 'self-hosted' }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Install dependencies and build the test suite
+        run: cd wasm-demo && npm ci
+
+      - name: Install Playwright Browsers
+        run: cd wasm-demo && npx playwright install --with-deps
+
+      - name: Run slow test suite (nicely)
+        run: cd wasm-demo && nice npm run test-slow
+
+      - name: Upload Playwright Report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: wasm-demo/playwright-report/
+          retention-days: 30

.github/workflows/ci.yml

@@ -128,3 +128,21 @@ jobs:
 
       - name: taplo fmt
         run: taplo fmt --check
+
+  wasm-wasmtime-test:
+    needs: check-runner
+    runs-on: ${{ needs.check-runner.outputs.runner-label }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install CI deps
+        uses: ./.github/actions/ci-deps
+        with:
+          local-cache: ${{ needs.check-runner.outputs.runner-label == 'self-hosted' }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Install dependencies and build the test suite
+        run: cd wasm-demo && npm ci
+
+      - name: Run test suite
+        run: cd wasm-demo && npm test

rust-toolchain.toml

@@ -2,3 +2,4 @@
 channel = "nightly-2024-01-23"
 components = ["rustfmt", "rust-src", "rust-analyzer", "clippy"]
 profile = "minimal"
+targets = ["wasm32-unknown-unknown", "wasm32-wasi"]

wasm-demo/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

wasm-demo/README.md

@@ -1,13 +1,93 @@
+# WASM DEMO
+
 This demo tries to run Mozak-VM and its proof system on WASM. For now it just tries to execute single instruction of ADD.
-The execution works :sparkles: but proving fails as described below.
+The execution and proving works :sparkles:.
+
+## Installing dependencies
+
+This test suite depnds on
+
+- `node` (`v20.11.0`),
+- `rust`, (version in `../rust-toolchain.toml`),
+- `wasmtime`,
+- `playwright`.
+
+In order to run tests you need to install `playwright` browsers by running
+
+```bash
+npx playwright install --with-deps
+```
+
+which will install playwright and all its associated runners needed to run the browsers.
+
+## First build
+
+If you checked out the project for the first time run
+
+```bash
+npm ci
+```
+
+which will
+
+- install all the dependencies,
+- run `wasm-pack` to build `wasm32-unknown-unknown` target,
+- run `cargo` to build `wasm32-wasi` target, and
+- compile all the TypeScript files and bundle them in their respective JavaScript files.
+
+All final build artifacts will be placed in `./dist` directory.
+
+## Automated Testing
+
+You can run the Wasmtime test suite by using
+
+```bash
+npm test
+```
+
+which will
+- test `wasm32-wasi` in `wasmtime`.
+
+And you can run the Playwright test suite by using
+
+```bash
+npm run test-slow
+```
+
+which will
+
+- test `wasm32-unknown-unknown` in 3 major browsers, and
+- test `wasm32-wasi` in 3 major browsers.
+
+Note that upon failure playwright will open the report.  You can manually reopen the report by running
+
+```bash
+npx playwright show-report
+```
+
+## Rebuild
+
+You can rebuild everything using
+
+```bash
+npm run prepare
+```
+
+which will call
+
+- `wasm-pack build --target web`,
+- `cargo build --target wasm32-wasi`, and
+- `webpack`.
 
-To Compile:
+## Opening in browser
 
-`wasm-pack build --target web`
+You can start a local server with all caches disabled on `localhost:3000` by using
 
-Then run webserver from wasm-demo dir with following command
+```bash
+npm start
+```
 
-`python3 -m http.server`
+There are two test cases
 
-Open local server's URL in browser and you should see two prompts, first after execution and second after proving.
-More details about how to compile [Rust_to_Wasm](https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_Wasm)
+- [`http://localhost:3000/wasm32-unknown-unknown.html`](http://localhost:3000/wasm32-unknown-unknown.html) for testing `wasm32-unkown-unknown` build, and
+- [`http://localhost:3000/wasm32-wasi.html`](http://localhost:3000/wasm32-wasi.html) for testing `wasm32-wasi` build.

wasm-demo/index.html

@@ -1,15 +1,21 @@
 <!doctype html>
 <html lang="en-US">
-  <head>
-    <meta charset="utf-8" />
-    <title>WASM DEMO</title>
-  </head>
-  <body>
-    <script type="module">
-      import init, { wasm_demo } from "./pkg/wasm_demo.js";
-      init().then(() => {
-        wasm_demo(99, 99);
-      });
-    </script>
-  </body>
+    <head>
+        <meta charset="utf-8" />
+        <title>WASM Testsuite</title>
+    </head>
+    <body>
+        <p>
+            Here are some tests for checking if our WASM compilation is not
+            broken
+        </p>
+        <ul>
+            <li>
+                <a href="./wasm32-unknown-unknown.html">
+                    wasm32-unknown-unknown demo
+                </a>
+            </li>
+            <li><a href="./wasm32-wasi.html">wasm32-wasi demo</a></li>
+        </ul>
+    </body>
 </html>