chore: add browser example test (#846)

.github/workflows/main.yml

@@ -71,4 +71,11 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - run: yarn
-      - run: cd examples && yarn && npm run test -- chat
+      - run: cd examples && yarn && npm run test -- chat
+  test-libp2p-in-the-browser-example:
+    needs: check
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: yarn
+      - run: cd examples && yarn && npm run test -- libp2p-in-the-browser

examples/libp2p-in-the-browser/package.json

@@ -8,6 +8,7 @@
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "parcel build index.html",
     "start": "parcel index.html"
   },
   "keywords": [],

examples/libp2p-in-the-browser/test.js

@@ -0,0 +1,52 @@
+'use strict'
+
+const execa = require('execa')
+const { chromium } = require('playwright');
+
+async function run() {
+  let url = ''
+  const proc = execa('parcel', ['./index.html'], {
+    preferLocal: true,
+    localDir: __dirname,
+    cwd: __dirname,
+    all: true
+  })
+
+  proc.all.on('data', async (chunk) => {
+    /**@type {string} */
+    const out = chunk.toString()
+
+    if (out.includes('Server running at')) {
+      url = out.replace('Server running at ', '')
+    }
+
+    if (out.includes('✨  Built in ')) {
+      try {
+        const browser = await chromium.launch();
+        const page = await browser.newPage();
+        await page.goto(url);
+        await page.waitForFunction(selector => document.querySelector(selector).innerText === 'libp2p started!', '#status')
+        await page.waitForFunction(
+          selector => {
+            const text = document.querySelector(selector).innerText
+            return text.includes('libp2p id is') &&
+              text.includes('Found peer') &&
+              text.includes('Connected to')
+          },
+          '#output',
+          { timeout: 5000 }
+        )
+        await browser.close();
+
+      } catch (err) {
+        console.error(err)
+        process.exit(1)
+      } finally {
+        proc.cancel()
+      }
+    }
+  })
+
+}
+
+module.exports = run

examples/package.json

@@ -12,5 +12,8 @@
     "fs-extra": "^8.1.0",
     "p-defer": "^3.0.0",
     "which": "^2.0.1"
+  },
+  "devDependencies": {
+    "playwright": "^1.7.1"
   }
 }

examples/test.js

@@ -22,7 +22,6 @@ async function testExample (dir) {
   await installDeps(dir)
   await build(dir)
   await runTest(dir)
-  // TODO: add browser test setup
 }
 
 async function installDeps (dir) {
@@ -89,7 +88,7 @@ async function runTest (dir) {
     return
   }
 
-  const runTest = require(testFile)
+  const test = require(testFile)
 
-  await runTest()
-}
+  await test()
+}