feat(test): Automate smoke tests for JS Client [DXJ-293]

package.json

@@ -1,24 +1,25 @@
 {
-  "name": "common-dev-deps",
-  "version": "0.1.0",
-  "main": "./dist/index.js",
-  "typings": "./dist/index.d.ts",
-  "type": "module",
-  "engines": {
-    "node": ">=10",
-    "pnpm": ">=3"
-  },
-  "scripts": {
-    "simulate-cdn": "http-server -p 8765 ./packages/client/js-client.web.standalone/dist"
-  },
-  "author": "Fluence Labs",
-  "license": "Apache-2.0",
-  "devDependencies": {
-    "http-server": "14.1.1",
-    "@types/node": "18.13.0",
-    "ts-node": "10.9.1",
-    "typescript": "4.7",
-    "@fluencelabs/aqua-lib": "0.6.0",
-    "@fluencelabs/aqua": "0.9.1-374"
-  }
+    "name": "common-dev-deps",
+    "version": "0.1.0",
+    "main": "./dist/index.js",
+    "typings": "./dist/index.d.ts",
+    "type": "module",
+    "engines": {
+        "node": ">=10",
+        "pnpm": ">=3"
+    },
+    "scripts": {
+        "simulate-cdn": "http-server -p 8765 ./packages/client/js-client.web.standalone/dist"
+    },
+    "author": "Fluence Labs",
+    "license": "Apache-2.0",
+    "devDependencies": {
+        "http-server": "14.1.1",
+        "puppeteer": "19.7.2",
+        "@types/node": "18.13.0",
+        "ts-node": "10.9.1",
+        "typescript": "4.7",
+        "@fluencelabs/aqua-lib": "0.6.0",
+        "@fluencelabs/aqua": "0.9.1-374"
+    }
 }

packages/@tests/aqua/src/index.ts

@@ -3,11 +3,13 @@ import { Fluence } from '@fluencelabs/js-client.api';
 import { kras, randomKras } from '@fluencelabs/fluence-network-environment';
 import { registerHelloWorld, smokeTest } from './_aqua/smoke_test.js';
 
+// Relay running on local machine
 // const relay = {
 //     multiaddr: '/ip4/127.0.0.1/tcp/4310/ws/p2p/12D3KooWKEprYXUXqoV5xSBeyqrWLpQLLH4PXfvVkDJtmcqmh5V3',
 //     peerId: '12D3KooWKEprYXUXqoV5xSBeyqrWLpQLLH4PXfvVkDJtmcqmh5V3',
 // };
 
+// Currently the tests executes some calls to registry. And they fail for a single local node setup. So we use kras instead.
 const relay = randomKras();
 
 function generateRandomUint8Array() {
@@ -27,7 +29,9 @@ const optsWithRandomKeyPair = () => {
     } as const;
 };
 
-export const main = async () => {
+export type TestResult = { res: string | null; errors: string[]; hello: string };
+
+export const runTest = async (): Promise<TestResult> => {
     try {
         Fluence.onConnectionStateChange((state) => console.info('connection state changed: ', state));
 
@@ -58,6 +62,8 @@ export const main = async () => {
         } else {
             console.log('aqua finished, result', res);
         }
+
+        return { res, errors, hello };
     } finally {
         console.log('disconnecting from Fluence Network...');
         await Fluence.disconnect();
@@ -66,7 +72,7 @@ export const main = async () => {
 };
 
 export const runMain = () => {
-    main()
+    runTest()
         .then(() => console.log('done!'))
         .catch((err) => console.error('error: ', err));
 };

packages/@tests/smoke_node/package.json → packages/@tests/smoke/node/package.json

@@ -11,7 +11,7 @@
     "type": "module",
     "scripts": {
         "build": "tsc",
-        "_test": "node --loader ts-node/esm ./src/index.ts"
+        "test": "node --loader ts-node/esm ./src/index.ts"
     },
     "repository": "https://github.com/fluencelabs/fluence-js",
     "author": "Fluence Labs",

packages/@tests/smoke/node/src/index.ts

@@ -0,0 +1,4 @@
+import '@fluencelabs/js-client.node';
+import { runTest } from '@test/aqua_for_test';
+
+runTest().then(() => console.log('Smoke tests succeed!'));

packages/@tests/smoke/node/tsconfig.json

@@ -0,0 +1,7 @@
+{
+    "extends": "../../../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./dist"
+    },
+    "exclude": ["node_modules", "dist"]
+}

packages/@tests/frameworks/cra-ts/package.json → packages/@tests/smoke/web-cra-ts/package.json

@@ -2,6 +2,7 @@
     "name": "cra-ts",
     "version": "0.1.0",
     "private": true,
+    "type": "module",
     "dependencies": {
         "@fluencelabs/js-client.api": "workspace:^",
         "@test/aqua_for_test": "workspace:^",
@@ -18,8 +19,11 @@
         "typescript": "4.9.5",
         "web-vitals": "2.1.4"
     },
-    "devDependencies": {},
+    "devDependencies": {
+        "@test/test-utils": "workspace:^"
+    },
     "scripts": {
+        "commented_out_test": "node --loader ts-node/esm ./test/index.ts",
         "start": "react-scripts start",
         "build": "react-scripts build",
         "_test": "react-scripts test",

packages/@tests/frameworks/cra-ts/public/index.html → packages/@tests/smoke/web-cra-ts/public/index.html

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Web site created using create-react-app" />
-    <script src='http://localhost:8765/js-client.min.js' async></script>
+    <script src='http://localhost:8766/js-client.min.js' async></script>
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

packages/@tests/smoke/web-cra-ts/src/App.tsx

@@ -0,0 +1,48 @@
+import { runTest } from '@test/aqua_for_test';
+import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+function App() {
+    const [result, setResult] = React.useState<string | null>(null);
+    const [error, setError] = React.useState<string | null>(null);
+
+    const onButtonClick = () => {
+        runTest()
+            .then((res) => {
+                if (res.errors.length === 0) {
+                    setResult(JSON.stringify(res));
+                    setError(null);
+                } else {
+                    setResult(null);
+                    setError(res.errors.toString());
+                }
+            })
+            .catch((err) => {
+                setResult('');
+                setError(err.toString());
+            });
+    };
+
+    return (
+        <div className="App">
+            <header className="App-header">
+                <img src={logo} className="App-logo" alt="logo" />
+                <p>
+                    Edit <code>src/App.tsx</code> and save to reload.
+                </p>
+                <button id="btn" onClick={onButtonClick}>
+                    Click to run test
+                </button>
+
+                {result && <div id="res">{result}</div>}
+                {error && <div id="error">{error}</div>}
+                <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
+                    Learn React
+                </a>
+            </header>
+        </div>
+    );
+}
+
+export default App;

packages/@tests/frameworks/cra-ts/src/index.tsx → packages/@tests/smoke/web-cra-ts/src/index.tsx

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-import { runMain } from '@test/aqua_for_test';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
@@ -16,5 +15,3 @@ root.render(
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
-
-runMain();

packages/@tests/smoke/web-cra-ts/test/index.ts

@@ -0,0 +1,45 @@
+import puppeteer from 'puppeteer';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+import { startCdn, startContentServer, stopServer } from '@test/test-utils';
+
+const port = 3001;
+const uri = `http://localhost:${port}/`;
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const publicPath = join(__dirname, '../build/');
+
+const test = async () => {
+    const cdn = await startCdn(8766);
+    const localServer = await startContentServer(port, publicPath);
+
+    console.log('starting puppeteer...');
+    const browser = await puppeteer.launch();
+    const page = await browser.newPage();
+
+    // uncomment to debug what's happening inside the browser
+    // page.on('console', (msg) => console.log('// from console: ', msg.text()));
+
+    console.log('going to the page in browser...');
+    await page.goto(uri);
+
+    console.log('clicking button...');
+    await page.click('#btn');
+
+    console.log('waiting for result to appear...');
+    const elem = await page.waitForSelector('#res');
+
+    console.log('getting the content of result div...');
+    const content = await elem?.evaluate((x) => x.textContent);
+    console.log('raw result: ', content);
+
+    await browser.close();
+    await stopServer(cdn);
+    await stopServer(localServer);
+
+    if (!content) {
+        throw new Error('smoke test failed!');
+    }
+};
+
+test().then(() => console.log('smoke tests succeed!'));

packages/@tests/smoke/web-cra-ts/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "noFallthroughCasesInSwitch": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx"
+    },
+    "include": ["src", "test"]
+}

packages/@tests/smoke_web/package.json → packages/@tests/smoke/web/package.json

@@ -8,17 +8,18 @@
         "node": ">=10",
         "pnpm": ">=3"
     },
+    "type": "module",
     "scripts": {
-        "build": "pnpm copy-script",
-        "serve": "http-server public",
-        "copy-script": "cp ../../client/js-client.web.standalone/dist/js-client.min.js ./public"
+        "build": "tsc",
+        "commented_out_test": "node --loader ts-node/esm ./src/index.ts",
+        "serve": "http-server public"
     },
     "repository": "https://github.com/fluencelabs/fluence-js",
     "author": "Fluence Labs",
     "license": "Apache-2.0",
-    "dependencies": {},
-    "devDependencies": {
+    "dependencies": {
         "@fluencelabs/js-client.web.standalone": "workspace:^",
-        "http-server": "14.1.1"
-    }
+        "@test/test-utils": "workspace:^"
+    },
+    "devDependencies": {}
 }

packages/@tests/smoke_web/public/index.html → packages/@tests/smoke/web/public/index.html

@@ -6,14 +6,18 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Smoke test for web</title>
-    <script src="./js-client.min.js"></script>
-    <script src="./index.js"></script>
-
 </head>
 
 <body>
     <main>
         <h1>Open console f12</h1>
+
+        <button id="btn">Click to run test</button>
+
+        <div id="res-placeholder"></div>
+
+        <script src='http://localhost:8765/js-client.min.js'></script>
+        <script src="./index.js"></script>
     </main>
 </body>