Run Integration Tests in Browser (#1468)

* ci: Adds github actions testing for webpacked integration test
2025-11-05 05:15:48 +00:00 · 2021-08-02 14:29:35 -07:00
parent 25a2bcd3be
commit 76780c8a8e
9 changed files with 3518 additions and 3142 deletions
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@@ -55,3 +55,27 @@ jobs:
      env:
        HOST: localhost
        PORT: ${{ job.services.rippled.ports['6006'] }}
+
+  browser:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x] # This just needs to be compatible w/ puppeteer
+
+    services:
+      rippled:
+        image: natenichols/rippled-standalone:latest
+        ports:
+        - 6006:6006
+        options:
+          --health-cmd="wget localhost:6006 || exit 1" --health-interval=5s --health-retries=10 --health-timeout=2s 
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: yarn install
+    - run: yarn test:browser
--- a/.gitignore
+++ b/.gitignore
@@ -68,3 +68,6 @@ scripts/cache

 # nyc (istanbul)
 .nyc_output
+
+# browser tests
+test-compiled-for-web 
--- a/package.json
+++ b/package.json
@@ -51,9 +51,13 @@
    "json-schema-to-markdown-table": "^0.4.0",
    "mocha": "^9",
    "nyc": "^15",
+    "path-browserify": "1.0.1",
    "prettier": "^2.0.5",
    "process": "^0.11.10",
+    "puppeteer": "5.4.1",
    "stream-browserify": "^3.0.0",
+    "stream-http": "3.1.1",
+    "ts-loader": "^8.0.11",
    "ts-node": "^10.1.0",
    "typescript": "^3.9.9",
    "url": "^0.11.0",
@@ -74,6 +78,7 @@
    "prepublish": "yarn clean && yarn build",
    "test": "TS_NODE_PROJECT=src/tsconfig.json nyc mocha --config=test/.mocharc.json --exit",
    "test:integration": "TS_NODE_PROJECT=src/tsconfig.json nyc mocha ./test/integration/*.ts",
+    "test:browser": "TS_NODE_PROJECT=src/tsconfig.json nyc mocha ./test/browser/*.ts",
    "test:watch": "TS_NODE_PROJECT=src/tsconfig.json mocha --config=test/.mocharc.json --watch --reporter dot",
    "format": "prettier --write '{src,test}/**/*.ts'",
    "lint": "eslint 'src/**/*.ts' 'test/*-test.{ts,js}'",
--- a/test/browser/browser-integration-test.ts
+++ b/test/browser/browser-integration-test.ts
@@ -0,0 +1,30 @@
+import assert from 'assert'
+import puppeteer from 'puppeteer'
+
+describe("Browser Tests", () => {
+    it("Integration Tests", async () => {
+        const browser = await puppeteer.launch({"headless": true});
+        try {
+            const page = await browser.newPage().catch();    
+            await page.goto(`file:///${__dirname}/../localintegrationrunner.html`);    
+
+            await page.waitForFunction('document.querySelector("body").innerText.includes("submit multisigned transaction")');
+
+            const fails = await page.evaluate(() => {
+                return document.querySelector('.failures').textContent
+            })
+            const passes = await page.evaluate(() => {
+                return document.querySelector('.passes').textContent
+            })
+
+            assert.equal(fails, "failures: 0")
+            assert.notEqual(passes, "passes: 0")
+
+        } catch (err) {
+            console.log(err)
+            assert(false)
+        } finally {
+            await browser.close();
+        }
+    }).timeout(40000)
+}) 
--- a/test/integration/integration-test.ts
+++ b/test/integration/integration-test.ts
@@ -12,10 +12,12 @@ import {isValidSecret} from 'ripple-api/common/utils'
 const TIMEOUT = 20000
 const INTERVAL = 1000 // how long to wait between checks for validated ledger

-const HOST = process.env.HOST ?? "127.0.0.1"
+const HOST = process.env.HOST ?? "0.0.0.0"
 const PORT = process.env.PORT ?? "6006"
 const serverUrl = `ws://${HOST}:${PORT}`

+console.log(serverUrl)
+
 function acceptLedger(api) {
  return api.connection.request({command: 'ledger_accept'})
 }
--- a/test/localintegrationrunner.html
+++ b/test/localintegrationrunner.html
@@ -3,13 +3,13 @@
    <meta charset="utf-8">
    <!-- encoding must be set for mocha's special characters to render properly -->
    <link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
-    <script src="./vendor/lodash.min.js"></script>
  </head>
  <body>
    <div id="deb"></div>
    <div id="mocha"></div>
    <script src="../node_modules/mocha/mocha.js"></script>
    <script src="hacks/phantomhacks.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>
    <script src="../build/ripple-latest.js"></script>
    <script>
      if (window.initMochaPhantomJS) {
@@ -18,7 +18,7 @@
      mocha.ui('bdd')
    </script>
 
-    <script src="../test-compiled-for-web/integration/integration-test.js"></script>
+    <script src="../test-compiled-for-web/integration-test.js"></script>

    <script>
      mocha.run()
--- a/test/tsconfig.json
+++ b/test/tsconfig.json
@@ -1,6 +1,3 @@
 {
  "extends": "../tsconfig-base.json",
-  "compilerOptions": {
-    "noEmit": true,
-  }
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,6 +1,7 @@
 'use strict';
 const path = require('path');
 const webpack = require('webpack');
+const assert = require('assert');
 const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');

 function getDefaultConfiguration() {
@@ -40,14 +41,77 @@ function getDefaultConfiguration() {
 };
 }

+function webpackForTest(testFileName) {
+  const match = testFileName.match(/\/?([^\/]*)-test.ts$/);
+  if (!match) {
+    assert(false, 'wrong filename:' + testFileName);
+  }
+
+  const test = {
+    cache: true,
+    externals: [{
+      'lodash': '_',
+      'ripple-api': 'ripple',
+      'net': 'null'
+    }],
+    entry: testFileName,
+    output: {
+      library: match[1].replace(/-/g, '_'),
+      path: path.join(__dirname, './test-compiled-for-web/'),
+      filename: match[1] + '-test.js'
+    },
+    plugins: [
+      new webpack.ProvidePlugin({ process: 'process/browser' }),
+      new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] })
+    ],
+    module: {
+      rules: [{
+        test: /jayson/,
+        use: 'null',
+      }, {
+        test: /\.ts$/,
+        use: [{
+          loader: 'ts-loader',
+          options: {
+            compilerOptions: {
+              composite: false,
+              declaration: false,
+              declarationMap: false
+            }
+          },
+        }],
+      }]
+    },
+    node: {
+      global: true,
+      __filename: false,
+      __dirname: true,
+    },
+    resolve: {
+      extensions: [ '.ts', '.js', '.json' ],
+      fallback: { 
+        "buffer": require.resolve("buffer/"),
+        "assert": require.resolve("assert/"),
+        "url": require.resolve("url/"),
+        "stream": require.resolve("stream-browserify"),
+        "crypto": require.resolve("crypto-browserify"),
+        "path": require.resolve("path-browserify"),
+        "http": require.resolve("stream-http"),
+        "fs": false
+      }
+    }
+  };
+  return Object.assign({}, getDefaultConfiguration(), test);
+}
+
 module.exports = [
-  function(env, argv) {
+  (env, argv) => {
    const config = getDefaultConfiguration();
    config.mode = 'development';
    config.output.filename = `ripple-latest.js`;
    return config;
  },
-  function(env, argv) {
+  (env, argv) => {
    const config = getDefaultConfiguration();
    config.mode = 'production';
    config.output.filename = `ripple-latest-min.js`;
@@ -56,4 +120,5 @@ module.exports = [
    }
    return config;
  },
+  (env, argv) => webpackForTest('./test/integration/integration-test.ts'),
 ];
--- a/yarn.lock
+++ b/yarn.lock