Integration tests for all JS-related projects (#97)

quickstart/3-browser-to-service/src/App.tsx

@@ -56,7 +56,11 @@ function App() {
               <tbody>
                 <tr>
                   <td className="bold">Peer id:</td>
-                  <td className="mono">{Fluence.getStatus().peerId!}</td>
+                  <td className="mono">
+                    <span id="peerId">
+                      {Fluence.getStatus().peerId!}
+                    </span>
+                  </td>
                   <td>
                     <button
                       className="btn-clipboard"
@@ -68,7 +72,11 @@ function App() {
                 </tr>
                 <tr>
                   <td className="bold">Relay peer id:</td>
-                  <td className="mono">{Fluence.getStatus().relayPeerId!}</td>
+                  <td className="mono">
+                    <span id="relayId">
+                      {Fluence.getStatus().relayPeerId!}
+                    </span>
+                  </td>
                   <td>
                     <button
                       className="btn-clipboard"
@@ -90,6 +98,7 @@ function App() {
               <div className="row">
                 <label className="label bold">Target peer id</label>
                 <input
+                  id="targetPeerId"
                   className="input"
                   type="text"
                   onChange={(e) => setPeerIdInput(e.target.value)}
@@ -99,6 +108,7 @@ function App() {
               <div className="row">
                 <label className="label bold">Target relay</label>
                 <input
+                  id="targetRelayId"
                   className="input"
                   type="text"
                   onChange={(e) => setRelayPeerIdInput(e.target.value)}
@@ -132,7 +142,7 @@ function App() {
         {helloMessage && (
           <>
             <h2>Message</h2>
-            <div> {helloMessage} </div>
+            <div id="message"> {helloMessage} </div>
           </>
         )}
       </div>

quickstart/3-browser-to-service/src/__test__/test.spec.ts

@@ -0,0 +1,103 @@
+import { Page } from 'puppeteer';
+import handler from 'serve-handler';
+import http from 'http';
+import path from 'path';
+
+const port = 3000;
+const uri = `http://localhost:${port}/`;
+const publicPath = path.join(__dirname, '../../build/');
+
+console.log(publicPath);
+
+const server = http.createServer((request, response) => {
+    return handler(request, response, {
+        public: publicPath,
+    });
+});
+
+const startServer = async () => {
+    return new Promise((resolve: any) => {
+        server.listen(port, resolve);
+    });
+};
+
+const stopServer = async () => {
+    return new Promise((resolve: any) => {
+        server.close(resolve);
+    });
+};
+const peerIdLength = '12D3KooWM2CYSHefG6KPKbYFAgsbPh8p6b8HYHc6VNkge2rPtYv5'.length;
+
+const loadApp = async (page: Page) => {
+    console.log('opening page...');
+    await page.goto('http://localhost:3000/');
+
+    console.log('clicking connect button...');
+    await page.click('.btn');
+
+    console.log('waiting for fluence to connect...');
+    await page.waitForTimeout(1000);
+
+    console.log('waiting for "say hello" button to appear...');
+    await page.waitForSelector('.btn-hello');
+
+    console.log('getting self peer id and relay...');
+    const peerId = await page.$eval('#peerId', (x) => x.textContent);
+    const relayId = await page.$eval('#relayId', (x) => x.textContent);
+
+    expect(peerId?.length).toBe(peerIdLength);
+    expect(relayId?.length).toBe(peerIdLength);
+
+    return {
+        peerId,
+        relayId,
+    };
+};
+
+const waitForSelectorAndGetText = async (page: Page, selector: string) => {
+    const page1Message = await page.waitForSelector('#message');
+    return await page1Message?.evaluate((x) => x.textContent?.trim().replace('\n', ''));
+};
+
+describe('smoke test', () => {
+    beforeAll(startServer);
+
+    afterAll(stopServer);
+
+    it('should work', async () => {
+        const page1 = await browser.newPage();
+        const page2 = await browser.newPage();
+
+        console.log('=== browser 1 ===');
+        const peerRelay1 = await loadApp(page1);
+
+        console.log('=== browser 2 ===');
+        const peerRelay2 = await loadApp(page2);
+
+        console.log('=== browser 1 ===');
+
+        console.log('filling form...');
+        await page1.focus('#targetPeerId');
+        await page1.keyboard.type(peerRelay2.peerId!);
+
+        await page1.focus('#targetRelayId');
+        await page1.keyboard.type(peerRelay2.relayId!);
+
+        console.log('clicking "say hello"...');
+        await page1.click('.btn-hello');
+
+        console.log('waiting for particle to execute...');
+        await page1.waitForTimeout(1000);
+
+        console.log('=== finale ===');
+
+        console.log('getting message from page1...');
+        const page1Message = await waitForSelectorAndGetText(page1, '#message');
+
+        console.log('getting message from page2...');
+        const page2Message = await waitForSelectorAndGetText(page2, '#message');
+
+        expect(page1Message).toBe('Hello back to you, ' + peerRelay1.peerId);
+        expect(page2Message).toBe('Hello from: ' + peerRelay1.peerId);
+    }, 15000);
+});