test: Adding web client testing framework

.github/workflows/test.yml

@@ -29,6 +29,8 @@ jobs:
       - uses: actions/checkout@main
       - name: Install Rust
         run: rustup update --no-self-update
+      - name: Install Node.js
+        uses: actions/setup-node@v3
       - uses: taiki-e/install-action@nextest
       - run: make clean-node
       - run: make node

Makefile

@@ -80,10 +80,15 @@ test-deps: ## Install dependencies for tests
 integration-test: ## Run integration tests
 	cargo nextest run --workspace --exclude miden-client-web --release --test=integration $(FEATURES_CLI) --no-default-features
 
+.PHONY: integration-test-web-client
+integration-test-web-client: ## Run integration tests for the web client
+	cd ./crates/web-client && npm run test:clean
+
 .PHONY: integration-test-full
 integration-test-full: ## Run the integration test binary with ignored tests included
 	cargo nextest run --workspace --exclude miden-client-web --release --test=integration $(FEATURES_CLI)
 	cargo nextest run --workspace --exclude miden-client-web --release --test=integration $(FEATURES_CLI) --run-ignored ignored-only -- test_import_genesis_accounts_can_be_used_for_transactions
+	$(MAKE) integration-test-web-client
 
 .PHONY: kill-node
 kill-node: ## Kill node process

crates/rust-client/src/rpc/tonic_client/generated/responses.rs

@@ -72,12 +72,10 @@ pub struct SyncNoteResponse {
     /// Block header of the block with the first note matching the specified criteria
     #[prost(message, optional, tag = "2")]
     pub block_header: ::core::option::Option<super::block_header::BlockHeader>,
-    /// Proof for block header's MMR with respect to the chain tip.
+    /// Merkle path to verify the block's inclusion in the MMR at the returned `chain_tip`.
     ///
-    /// More specifically, the full proof consists of `forest`, `position` and `path` components. This
-    /// value constitutes the `path`. The other two components can be obtained as follows:
-    ///    - `position` is simply `resopnse.block_header.block_num`
-    ///    - `forest` is the same as `response.chain_tip + 1`
+    /// An MMR proof can be constructed for the leaf of index `block_header.block_num` of
+    /// an MMR of forest `chain_tip` with this path.
     #[prost(message, optional, tag = "3")]
     pub mmr_path: ::core::option::Option<super::merkle::MerklePath>,
     /// List of all notes together with the Merkle paths from `response.block_header.note_root`

crates/rust-client/src/rpc/web_tonic_client/generated/responses.rs

@@ -72,12 +72,10 @@ pub struct SyncNoteResponse {
     /// Block header of the block with the first note matching the specified criteria
     #[prost(message, optional, tag = "2")]
     pub block_header: ::core::option::Option<super::block_header::BlockHeader>,
-    /// Proof for block header's MMR with respect to the chain tip.
+    /// Merkle path to verify the block's inclusion in the MMR at the returned `chain_tip`.
     ///
-    /// More specifically, the full proof consists of `forest`, `position` and `path` components. This
-    /// value constitutes the `path`. The other two components can be obtained as follows:
-    ///    - `position` is simply `resopnse.block_header.block_num`
-    ///    - `forest` is the same as `response.chain_tip + 1`
+    /// An MMR proof can be constructed for the leaf of index `block_header.block_num` of
+    /// an MMR of forest `chain_tip` with this path.
     #[prost(message, optional, tag = "3")]
     pub mmr_path: ::core::option::Option<super::merkle::MerklePath>,
     /// List of all notes together with the Merkle paths from `response.block_header.note_root`

crates/rust-client/src/store/web_store/accounts/mod.rs

@@ -113,14 +113,14 @@ impl WebStore {
     pub(super) async fn get_account_code(
         &self,
         root: Digest,
-    ) -> Result<(Vec<Digest>, ModuleAst), StoreError> {
+    ) -> Result<(Vec<u8>, ModuleAst), StoreError> {
         let root_serialized = root.to_string();
 
         let promise = idxdb_get_account_code(root_serialized);
         let js_value = JsFuture::from(promise).await.unwrap();
         let account_code_idxdb: AccountCodeIdxdbObject = from_value(js_value).unwrap();
 
-        let procedures = serde_json::from_str(&account_code_idxdb.procedures).unwrap();
+        let procedures = account_code_idxdb.procedures;
 
         let module = ModuleAst::from_bytes(&account_code_idxdb.module).unwrap();
 

crates/rust-client/src/store/web_store/accounts/models.rs

@@ -6,7 +6,8 @@ use serde::{de::Error, Deserialize, Deserializer, Serialize};
 #[derive(Serialize, Deserialize)]
 pub struct AccountCodeIdxdbObject {
     pub root: String,
-    pub procedures: String,
+    #[serde(deserialize_with = "base64_to_vec_u8_required", default)]
+    pub procedures: Vec<u8>,
     #[serde(deserialize_with = "base64_to_vec_u8_required", default)]
     pub module: Vec<u8>,
 }

crates/web-client/.mocharc.json

@@ -0,0 +1,6 @@
+{
+  "require": ["ts-node/register", "esm"],
+  "extension": ["ts"],
+  "spec": "test/**/*.test.ts",
+  "timeout": 600000
+}

crates/web-client/js/types/index.d.ts

@@ -1,6 +1,6 @@
 export {
-    WebClient,
-    NewTransactionResult,
-    SerializedAccountStub,
-    NewSwapTransactionResult
+  WebClient,
+  NewTransactionResult,
+  SerializedAccountStub,
+  NewSwapTransactionResult,
 } from "./crates/miden_client";

crates/web-client/package.json

@@ -18,15 +18,27 @@
     "../LICENSE.md"
   ],
   "scripts": {
-    "build": "rimraf dist && rollup -c rollup.config.js && cpr js/types dist && rimraf dist/wasm*"
+    "build": "rimraf dist && rollup -c rollup.config.js && cpr js/types dist && rimraf dist/wasm*",
+    "test": "node --loader ts-node/esm --loader esm ./node_modules/mocha/bin/mocha --file ./test/mocha.global.setup.mjs",
+    "test:clean": "npm install && npm run build && node --loader ts-node/esm --loader esm ./node_modules/mocha/bin/mocha --file ./test/mocha.global.setup.mjs"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@wasm-tool/rollup-plugin-rust": "^2.4.5",
+    "@types/chai": "^4.3.17",
+    "@types/mocha": "^10.0.7",
+    "@types/node": "^22.4.1",
+    "chai": "^5.1.1",
     "cpr": "^3.0.1",
-    "rimraf": "^5.0.1",
-    "rollup": "^3.27.2"
+    "esm": "^3.2.25",
+    "http-server": "^14.1.1",
+    "mocha": "^10.7.3",
+    "puppeteer": "^23.1.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^3.27.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.5.4",
+    "@wasm-tool/rollup-plugin-rust": "wasm-tool/rollup-plugin-rust"
   },
   "dependencies": {
     "dexie": "^4.0.1"

crates/web-client/test/README.md

@@ -0,0 +1,57 @@
+# Testing
+
+The .wasm must be run within the context of a webpage. To this end, we've set up a Mocha
+test suite which hosts the .wasm on a local server and then executes WebClient commands
+within the context of the web page.
+
+## Running tests
+
+1. In crates/web-client run `yarn test` to run all tests
+2. For running an individual test by name run `yarn test -g <test-name>`
+
+## Writing tests
+
+1. The test setup in `mocha.global.setup.mjs` should expose the `create_client` function which can be used inside tests.
+   - Any further setup of wasm code should be done in this file and similarly expose a function for testing here
+2. `webClientTestUtils.js` should contain all interfaces for interacting with the web client. If further methods need to be added, follow existing patterns which use the exposed `testingPage` and pass through any required arguments to the page execution. Example:
+
+```
+/**
+ *
+ * @param {string} arg1
+ * @param {boolean} arg2
+ *
+ * @returns {Promise<string>} The result
+ */
+export const webClientCall = async (arg1, arg2) => {
+  return await testingPage.evaluate(
+    async (_arg1, _arg2) => {
+      if (!window.client) {
+        await window.create_client();
+      }
+
+      /** @type {WebClient} */
+      const client = window.client;
+      const result = client.webClientCall(_arg1, _arg2);
+
+      return result;
+    },
+    arg1,
+    arg2
+  );
+};
+```
+
+- Add JSDocs to methods. This will allow typing in the `*.test.ts` files.
+- We add the `if (!window.client)` to avoid spinning up clients unnecessarily lengthening test time. This unfortunately cannot be pulled out to a helper method as the testingPage scope does not share the scope of the file.
+- Similarly, the boilerplate for passing args through as shown above is necessary due to scoping.
+
+## Debugging
+
+1. When inside of a `page.evaluate` , console logs are being sent to the servers console rather than your IDE's. You can uncomment the line as seen below in the `mocha.global.setup.mjs`:
+
+```
+    page.on("console", (msg) => console.log("PAGE LOG:", msg.text()));
+```
+
+This will forward logs from the server to your terminal logs

crates/web-client/test/account.test.ts

@@ -0,0 +1,20 @@
+import { expect } from "chai";
+import {
+  createNewWallet,
+  getAccount,
+  getAccounts,
+} from "./webClientTestUtils.js";
+
+describe("account tests", () => {
+  it("get accounts", async () => {
+    const accountId = await createNewWallet("OffChain", false);
+    const accounts = await getAccounts();
+    expect(accounts.find((acc) => acc.id === accountId)).to.be.not.null;
+  });
+
+  it("get account", async () => {
+    const accountId = await createNewWallet("OffChain", false);
+    const result = await getAccount(accountId);
+    expect(result).to.be.equal(accountId);
+  });
+});

crates/web-client/test/faucet.test.ts

@@ -0,0 +1,15 @@
+import { createNewFaucet, isValidAddress } from "./webClientTestUtils.js";
+
+describe("faucet tests", () => {
+  it("create a new faucet", async () => {
+    const result = await createNewFaucet(
+      "OffChain",
+      false,
+      "DMX",
+      "10",
+      "1000000"
+    );
+
+    isValidAddress(result);
+  });
+});

crates/web-client/test/global.test.d.ts

@@ -0,0 +1,5 @@
+import { Page } from "puppeteer";
+
+declare module "./mocha.global.setup.mjs" {
+  export const testingPage: Page;
+}

crates/web-client/test/mocha.global.setup.mjs

@@ -0,0 +1,47 @@
+import puppeteer from "puppeteer";
+import { exec } from "child_process";
+
+import { register } from "ts-node";
+
+register({
+  project: "./tsconfig.json",
+});
+
+let serverProcess;
+let browser;
+let testingPage;
+
+const LOCAL_SERVER_PORT = 8080;
+const LOCAL_SERVER = `http://localhost:${LOCAL_SERVER_PORT}`;
+
+before(async function () {
+  console.log("Starting test server...");
+  serverProcess = exec(`http-server ./dist -p ${LOCAL_SERVER_PORT}`);
+  browser = await puppeteer.launch({ headless: true });
+  testingPage = await browser.newPage();
+  await testingPage.goto(LOCAL_SERVER);
+
+  // Uncomment below to enable console logging
+  // testingPage.on("console", (msg) => console.log("PAGE LOG:", msg.text()));
+
+  // Creates the client in the test context and attach to window object
+  await testingPage.exposeFunction("create_client", async () => {
+    await testingPage.evaluate(async () => {
+      const { WebClient } = await import("./index.js");
+      // let rpc_url = "http://18.203.155.106:57291";
+      let rpc_url = "http://localhost:57291";
+      const client = new WebClient();
+      await client.create_client(rpc_url);
+
+      window.client = client;
+    });
+  });
+});
+
+after(async function () {
+  console.log("Stopping test server...");
+  await browser.close();
+  serverProcess.kill();
+});
+
+export { testingPage };

crates/web-client/test/wallet.test.ts

@@ -0,0 +1,9 @@
+import { createNewWallet, isValidAddress } from "./webClientTestUtils.js";
+
+describe("wallet tests", () => {
+  it("create a new wallet", async () => {
+    const result = await createNewWallet("OffChain", false);
+
+    isValidAddress(result);
+  });
+});