From 0b854a949fd6886a7619662d98040b7b7cc9a7bb Mon Sep 17 00:00:00 2001
From: Vasco Santos <vasco.santos@moxy.studio>
Date: Tue, 19 Jan 2021 09:57:56 +0100
Subject: [PATCH] chore: add browser example test (#846)

---
 .github/workflows/main.yml                  |  9 +++-
 examples/libp2p-in-the-browser/package.json |  1 +
 examples/libp2p-in-the-browser/test.js      | 52 +++++++++++++++++++++
 examples/package.json                       |  3 ++
 examples/test.js                            |  7 ++-
 5 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 examples/libp2p-in-the-browser/test.js

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 6dabc16c..4acb1a87 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -71,4 +71,11 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - run: yarn
-      - run: cd examples && yarn && npm run test -- chat
\ No newline at end of file
+      - 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
diff --git a/examples/libp2p-in-the-browser/package.json b/examples/libp2p-in-the-browser/package.json
index 8d09b86d..b59c8cdb 100644
--- a/examples/libp2p-in-the-browser/package.json
+++ b/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": [],
diff --git a/examples/libp2p-in-the-browser/test.js b/examples/libp2p-in-the-browser/test.js
new file mode 100644
index 00000000..c0e67fe7
--- /dev/null
+++ b/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
diff --git a/examples/package.json b/examples/package.json
index feaf656d..b8c0a46a 100644
--- a/examples/package.json
+++ b/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"
   }
 }
diff --git a/examples/test.js b/examples/test.js
index 3da6eccd..69f2be8b 100644
--- a/examples/test.js
+++ b/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()
-}
\ No newline at end of file
+  await test()
+}