Web tests using Vitest and Playwright (#4704)

## Motivation

Currently all our testing for the Web client is manual. We'd like to
know when PRs break our example apps.

## Proposal

This PR sets up conventions for our Web tests that enable us to test in
a variety of different environments. Going forward we can add more and
more in-depth tests to cover more scenarios, and if we backport this PR
we can also use these tests as an automated healthcheck for the deployed
Web apps.

We unify the Web tests using [Vitest](https://vitest.dev/) with a
[Playwright](https://playwright.dev/) backend to run tests in real
browsers (currently just Chromium, but we should also test at least on
WebKit and Firefox once
#4235 is fixed).

Add a couple of basic tests for `@linera/client`: getting a wallet from
the faucet and initializing the client.

## Test Plan

This is the test plan :)

## Release Plan

- These changes should be backported to the latest `testnet` branch,
then
    - be released in a new SDK.

## Links

- [reviewer
checklist](https://github.com/linera-io/linera-protocol/blob/main/CONTRIBUTING.md#reviewer-checklist)

Author: Twey

.github/workflows/rust.yml

@@ -72,10 +72,7 @@ jobs:
       run: |
         cargo run --release -p linera-storage-service -- memory --endpoint $LINERA_STORAGE_SERVICE &
     - name: Wait for storage service to be ready
-      run: |
-        STORAGE_HOST=$(echo "$LINERA_STORAGE_SERVICE" | cut -d: -f1)
-        STORAGE_PORT=$(echo "$LINERA_STORAGE_SERVICE" | cut -d: -f2)
-        until nc -z "$STORAGE_HOST" "$STORAGE_PORT"; do sleep 1; done
+      run: until nc -z ${LINERA_STORAGE_SERVICE/:/ }; do sleep 1; done
     - name: Build binaries
       run: |
         cargo build --features storage-service --bin linera-server --bin linera-proxy --bin linera

.github/workflows/web.yml

@@ -59,9 +59,10 @@ jobs:
     needs: changed-files
     if: needs.changed-files.outputs.should-run == 'true'
     runs-on: ubuntu-latest
-    timeout-minutes: 20
+    timeout-minutes: 30
 
     steps:
+      # Install dependencies
     - uses: actions/checkout@v4
     - name: Switch to nightly Rust toolchain
       run: |
@@ -80,12 +81,37 @@ jobs:
     - name: Install pnpm
       uses: pnpm/action-setup@v4
       with:
-        version: 10
+        version: 10.17
 
+    # Setup fixtures
+    - name: Run the storage-service instance
+      run: |
+        cargo run --release -p linera-storage-service -- memory --endpoint $LINERA_STORAGE_SERVICE &
+    - name: Wait for storage service to be ready
+      run: until nc -z ${LINERA_STORAGE_SERVICE/:/ }; do sleep 1; done
+    - name: Build binaries
+      run: |
+        cargo build --features storage-service --bin linera-server --bin linera-proxy --bin linera
+    - name: Run the validators and faucet, wait for faucet to be ready
+      run: |
+        FAUCET_PORT=$(echo "$LINERA_FAUCET_URL" | cut -d: -f3)
+        LOG_FILE="/tmp/linera-net-up.log"
+        mkdir /tmp/local-linera-net
+        cargo run --features storage-service --bin linera -- net up --storage service:tcp:$LINERA_STORAGE_SERVICE:table --policy-config testnet --path /tmp/local-linera-net --validators 2 --shards 2 --with-faucet --faucet-port $FAUCET_PORT --faucet-amount 1000 > "$LOG_FILE" 2>&1 &
+        FAUCET_PID=$!
+        bash scripts/wait-for-kubernetes-service.sh "$LINERA_FAUCET_URL" "$FAUCET_PID" "$LOG_FILE"
+        # Create two epochs
+        # See https://github.com/linera-io/linera-protocol/pull/2835 for details.
+        LINERA_STORAGE=rocksdb:/tmp/local-linera-net/client_1.db cargo run --bin linera -- storage initialize --genesis /tmp/local-linera-net/genesis.json
+        LINERA_STORAGE=rocksdb:/tmp/local-linera-net/client_1.db cargo run --bin linera -- resource-control-policy --http-request-timeout-ms 1000
+        LINERA_STORAGE=rocksdb:/tmp/local-linera-net/client_1.db cargo run --bin linera -- resource-control-policy --http-request-timeout-ms 500
+
+    # Run tests
     - name: Test the npm packages
       run: |
         cd web
         pnpm install --frozen-lockfile
+        (cd @linera/client && pnpm exec playwright install)
         pnpm -r run ci
     - name: Test `linera-views` on the Web
       run: |

default.nix

@@ -1,4 +1,4 @@
-{ crane, pkgs, rust-toolchain, libclang, rocksdb, git, system, nix-gitignore }:
+{ crane, pkgs, rust-toolchain, libclang, rocksdb, git, system, nix-gitignore, playwright-driver }:
 ((crane.mkLib pkgs).overrideToolchain rust-toolchain).buildPackage {
   pname = "linera";
   src = nix-gitignore.gitignoreSource [] (builtins.path {
@@ -38,4 +38,5 @@
   RUST_SRC_PATH = rust-toolchain.availableComponents.rust-src;
   LIBCLANG_PATH = "${libclang.lib}/lib";
   ROCKSDB_LIB_DIR = "${rocksdb}/lib";
+  PLAYWRIGHT_BROWSERS_PATH = "${playwright-driver.browsers}";
 }

examples/counter/index.html

@@ -64,8 +64,7 @@ <h2>Chain history for <code id="chain-id" class="hex">requesting chain…</code>
          console.log(linera);
           await linera.initialize();
           const faucet = await new linera.Faucet(import.meta.env.LINERA_FAUCET_URL);
-          const mnemonic = ethers.Wallet.createRandom().mnemonic.phrase;
-          const signer = linera.PrivateKeySigner.fromMnemonic(mnemonic);
+          const signer = linera.PrivateKeySigner.createRandom();
           const wallet = await faucet.createWallet();
           const owner = await signer.address();
           document.getElementById('owner').innerText = owner;

flake.lock

@@ -62,6 +62,7 @@
             export RUST_SRC_PATH="${linera.RUST_SRC_PATH}"
             export LIBCLANG_PATH="${linera.LIBCLANG_PATH}"
             export ROCKSDB_LIB_DIR="${linera.ROCKSDB_LIB_DIR}"
+            export PLAYWRIGHT_BROWSERS_PATH="${linera.PLAYWRIGHT_BROWSERS_PATH}"
           '';
           nativeBuildInputs = [ pkgs.rust-analyzer ];
         };