browser example

fluence-js-examples/browser-example/.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+    semi: true,
+    trailingComma: 'all',
+    singleQuote: true,
+    printWidth: 120,
+    tabWidth: 4,
+    useTabs: false,
+};

fluence-js-examples/browser-example/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+    preset: 'jest-puppeteer',
+    testMatch: ['**/?(*.)+(spec|test).[t]s'],
+    testPathIgnorePatterns: ['/node_modules/', 'dist'],
+    transform: {
+        '^.+\\.ts?$': 'ts-jest',
+    },
+};

fluence-js-examples/browser-example/package.json

@@ -3,18 +3,19 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-    "@fluencelabs/fluence": "^0.19.1",
+        "@fluencelabs/fluence": "0.0.1-no-buffer-622.0",
         "@fluencelabs/fluence-network-environment": "^1.0.13",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^11.2.7",
         "@testing-library/user-event": "^12.8.3",
-    "@types/jest": "^26.0.24",
+        "@types/jest": "^27.4.0",
         "@types/node": "^12.20.16",
         "@types/react": "^17.0.14",
         "@types/react-dom": "^17.0.9",
+        "buffer": "^6.0.3",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
+        "react-scripts": "^5.0.0",
         "typescript": "^4.3.5",
         "web-vitals": "^1.1.2"
     },
@@ -23,6 +24,7 @@
         "start": "react-scripts start",
         "build": "react-scripts build",
         "test": "react-scripts test",
+        "test-e2e": "jest --config=jest.config.js",
         "eject": "react-scripts eject",
         "compile-aqua": "aqua -i ./aqua/ -o ./src/_aqua",
         "watch-aqua": "chokidar \"**/*.aqua\" -c \"npm run compile-aqua\""
@@ -48,7 +50,11 @@
     "devDependencies": {
         "@fluencelabs/aqua": "^0.6.0-275",
         "@fluencelabs/aqua-lib": "^0.4.0",
+        "@types/jest-environment-puppeteer": "^4.4.1",
+        "@types/puppeteer": "^5.4.4",
         "chokidar-cli": "^2.1.0",
-    "node-sass": "^6.0.1"
+        "jest-puppeteer": "^6.0.2",
+        "node-sass": "^6.0.1",
+        "ts-jest": "^27.1.3"
     }
 }

fluence-js-examples/browser-example/src/App.tsx

@@ -34,14 +34,14 @@ function App() {
       </header>
 
       <div className="content">
-        <h1>Status: {Fluence.getStatus().isConnected ? "Connected" : "Disconnected"}</h1>
+        <h1>Status: <span id="status">{Fluence.getStatus().isConnected ? "Connected" : "Disconnected"}</span></h1>
-        <button className="btn" onClick={onGetRelayTimeBtnClick}>
+        <button id="btn" className="btn" onClick={onGetRelayTimeBtnClick}>
           Get relay time
         </button>
         {relayTime && (
           <>
             <h2>Relay time:</h2>
-            <div>{relayTime?.toLocaleString() || ""}</div>
+            <div id="relayTime">{relayTime?.toLocaleString() || ""}</div>
           </>
         )}
       </div>

fluence-js-examples/browser-example/src/__test__/test.spec.ts

@@ -0,0 +1,20 @@
+describe('smoke test', () => {
+    it('should work', async () => {
+        console.log('going to the page in browser...');
+        await page.goto('http://localhost:3000/');
+
+        console.log('waiting for fluence to connect...');
+        await page.waitForTimeout(1000);
+
+        console.log('clicking button...');
+        await page.click('#btn');
+
+        console.log('waiting for relay time to appear...');
+        const elem = await page.waitForSelector('#relayTime');
+
+        console.log('getting the content of relay time div...');
+        const content = await elem?.evaluate((x) => x.textContent);
+
+        expect(content?.length).toBeGreaterThan(10);
+    }, 10000);
+});

fluence-js-examples/browser-example/src/_aqua/getting-started.ts

@@ -1,92 +0,0 @@
-/**
- *
- * This file is auto-generated. Do not edit manually: changes may be erased.
- * Generated by Aqua compiler: https://github.com/fluencelabs/aqua/.
- * If you find any bugs, please write an issue on GitHub: https://github.com/fluencelabs/aqua/issues
- * Aqua version: 0.5.2-256
- *
- */
-import { Fluence, FluencePeer } from '@fluencelabs/fluence';
-import {
-    CallParams,
-    callFunction,
-    registerService,
-} from '@fluencelabs/fluence/dist/internal/compilerSupport/v2';
-
-
-// Services
-
-// Functions
- 
-
-export function getRelayTime(
-    relayPeerId: string,
-    config?: {ttl?: number}
-): Promise<number>;
-
-export function getRelayTime(
-    peer: FluencePeer,
-    relayPeerId: string,
-    config?: {ttl?: number}
-): Promise<number>;
-
-export function getRelayTime(...args: any) {
-
-    let script = `
-                    (xor
-                     (seq
-                      (seq
-                       (seq
-                        (seq
-                         (call %init_peer_id% ("getDataSrv" "-relay-") [] -relay-)
-                         (call %init_peer_id% ("getDataSrv" "relayPeerId") [] relayPeerId)
-                        )
-                        (call -relay- ("op" "noop") [])
-                       )
-                       (xor
-                        (seq
-                         (call relayPeerId ("peer" "timestamp_ms") [] ts)
-                         (call -relay- ("op" "noop") [])
-                        )
-                        (seq
-                         (call -relay- ("op" "noop") [])
-                         (call %init_peer_id% ("errorHandlingSrv" "error") [%last_error% 1])
-                        )
-                       )
-                      )
-                      (xor
-                       (call %init_peer_id% ("callbackSrv" "response") [ts])
-                       (call %init_peer_id% ("errorHandlingSrv" "error") [%last_error% 2])
-                      )
-                     )
-                     (call %init_peer_id% ("errorHandlingSrv" "error") [%last_error% 3])
-                    )
-    `
-    return callFunction(
-        args,
-        {
-    "functionName" : "getRelayTime",
-    "returnType" : {
-        "tag" : "primitive"
-    },
-    "argDefs" : [
-        {
-            "name" : "relayPeerId",
-            "argType" : {
-                "tag" : "primitive"
-            }
-        }
-    ],
-    "names" : {
-        "relay" : "-relay-",
-        "getDataSrv" : "getDataSrv",
-        "callbackSrv" : "callbackSrv",
-        "responseSrv" : "callbackSrv",
-        "responseFnName" : "response",
-        "errorHandlingSrv" : "errorHandlingSrv",
-        "errorFnName" : "error"
-    }
-},
-        script
-    )
-}

fluence-js-examples/browser-example/tsconfig.json

@@ -17,9 +17,10 @@
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "isolatedModules": true,
+    "isolatedModules": false,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+
   },
   "include": [
     "src"