Skip to main content

WebAssembly Testing Setup for Runway Calculator

This document outlines the setup for WebAssembly integration testing focusing on the HTTP mocking infrastructure and API integration tests.

Overview​

We've implemented a robust testing environment for WebAssembly code that allows:

  1. HTTP request/response mocking for API integration tests
  2. Proper browser-based test execution
  3. Test script automation with both npm scripts and shell scripts

Key Components Implemented​

1. Test Runner Configuration​

  • Updated package.json with proper test scripts:

    • npm test - Runs all WASM tests
    • npm run test:wasm - Runs tests in headless Chrome
    • npm run test:firefox - Runs tests in headless Firefox
    • npm run test:node - Runs tests in Node.js
    • npm run test:debug - Runs tests with Chrome UI
    • npm run test:http-mock - Runs HTTP mock tests
    • npm run test:sync - Runs sync integration tests

  • Created shell scripts for testing:

    • test_wasm.sh - General-purpose test runner with multiple options
    • Updated run_tests.sh and run_http_mock_test.sh to use wasm-pack properly

2. HTTP Mock Implementation​

  • Enhanced the HTTP mock interceptor to properly intercept fetch requests
  • Added support for:
    • Basic response mocking
    • Configurable response status, body, and headers
    • Delayed responses to test loading states
    • Network failure simulation
    • Error response generation
    • Request verification and matching

3. API Integration Tests​

  • Fixed auth_integration_tests.rs with proper imports and method calls
  • Implemented sync_integration_test.rs with all necessary methods:
    • Fixed FinancialScenario creation with proper parameters
    • Implemented LocalScenario structure properly
    • Added necessary sync_offline_changes method to SyncService
    • Added BatchSyncResult and BatchSyncError types

4. Installation Scripts​

  • Added proper wasm-pack installation to package.json
  • Added fallbacks to ensure wasm-pack is installed even if the main installer fails
  • Ensured the wasm32-unknown-unknown target is installed

Running Tests​

Use any of the following commands to run the tests:

# Run all tests
./test_wasm.sh

# Run specific test categories
./test_wasm.sh auth
./test_wasm.sh sync
./test_wasm.sh http

# Run with npm
npm test

# Run specific test suites with npm
npm run test:http-mock
npm run test:sync

Troubleshooting​

If you encounter any issues with the tests:

  1. Ensure wasm-pack is installed: cargo install wasm-pack
  2. Ensure the wasm32-unknown-unknown target is installed: rustup target add wasm32-unknown-unknown
  3. Make sure Chrome or Firefox is installed for browser tests
  4. Check for console errors during test execution

For any "Exec format error" issues, reinstall wasm-pack using:

curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

Further Improvements​

Potential future enhancements:

  1. Add code coverage reporting for WebAssembly tests
  2. Implement Visual Regression Tests for UI components
  3. Set up GitHub Actions for automated testing
  4. Expand HTTP mock capabilities with WebSocket support