chore: add browser example test

Author: vasco-santos

.github/workflows/main.yml

@@ -65,3 +65,10 @@ jobs:
       - uses: actions/checkout@v2
       - run: yarn
       - run: cd examples && yarn && npm run test -- auto-relay
+  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

.gitignore

@@ -40,6 +40,7 @@ dist
 test/test-data/go-ipfs-repo/LOCK
 test/test-data/go-ipfs-repo/LOG
 test/test-data/go-ipfs-repo/LOG.old
+tests_output/
 
 # while testing npm5
 package-lock.json

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

@@ -28,6 +28,7 @@
     "babel-plugin-syntax-async-functions": "^6.13.0",
     "babel-plugin-transform-regenerator": "^6.26.0",
     "babel-polyfill": "^6.26.0",
+    "p-retry": "^4.2.0",
     "parcel-bundler": "^1.12.4"
   }
 }

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

@@ -0,0 +1,21 @@
+'use strict'
+
+const pkg = require('./package.json')
+
+module.exports = {
+  [pkg.name]: function (browser) {
+    browser
+      .url(process.env.LIBP2P_EXAMPLE_TEST_URL)
+      .waitForElementVisible('#status')
+      .waitForElementVisible('#output')
+      .pause(5000)
+
+    browser.expect.element('#status').text.to.contain('libp2p started!')
+    browser.expect.element('#output').text.to.contain('libp2p id is')
+
+    browser.expect.element('#output').text.to.contain('Found peer')
+    browser.expect.element('#output').text.to.contain('Connected to')
+
+    browser.end()
+  }
+}

examples/nightwatch.conf.js

@@ -0,0 +1,35 @@
+'use strict'
+
+const { ephemeralPort } = require('./utils')
+
+const WEBRIVER_PORT = ephemeralPort()
+
+// config used to test examples
+module.exports = {
+  src_folders: ['tests'],
+
+  webdriver: {
+    start_process: true,
+    server_path: 'node_modules/.bin/chromedriver',
+    port: WEBRIVER_PORT,
+    cli_args: [
+      `--port=${WEBRIVER_PORT}`
+    ]
+  },
+
+  test_settings: {
+    default: {
+      desiredCapabilities: {
+        browserName: 'chrome',
+        chromeOptions: {
+          args: ['headless']
+        }
+      }
+    }
+  },
+
+  globals: {
+    asyncHookTimeout: 120000,
+    waitForConditionTimeout: 60000
+  }
+}

examples/package.json

@@ -8,9 +8,12 @@
   },
   "license": "MIT",
   "dependencies": {
+    "chromedriver": "^87.0.0",
     "execa": "^2.1.0",
     "fs-extra": "^8.1.0",
     "p-defer": "^3.0.0",
+    "http-server": "~0.11.1",
+    "nightwatch": "^1.2.4",
     "which": "^2.0.1"
   }
 }

examples/test.js

@@ -7,6 +7,7 @@ const fs = require('fs-extra')
 const path = require('path')
 const execa = require('execa')
 const dir = path.join(__dirname, process.argv[2])
+const { startServer } = require('./utils')
 
 testExample(dir)
   .then(() => {}, (err) => {
@@ -21,8 +22,12 @@ testExample(dir)
 async function testExample (dir) {
   await installDeps(dir)
   await build(dir)
-  await runTest(dir)
-  // TODO: add browser test setup
+
+  if (dir.includes('browser')) {
+    await runBrowserTest(dir)
+  } else {
+    await runNodeTest(dir)
+  }
 }
 
 async function installDeps (dir) {
@@ -80,7 +85,7 @@ async function build (dir) {
   await proc
 }
 
-async function runTest (dir) {
+async function runNodeTest (dir) {
   console.info('Running node tests in', dir)
   const testFile = path.join(dir, 'test.js')
 
@@ -92,4 +97,30 @@ async function runTest (dir) {
   const runTest = require(testFile)
 
   await runTest()
-}
+}
+
+async function runBrowserTest (dir) {
+  console.info('Running browser tests in', dir)
+
+  const server = await startServer(dir)
+
+  console.info('Running tests at', server.url)
+
+  const proc = execa('nightwatch', [ path.join(dir, 'test.js') ], {
+    cwd: __dirname,
+    env: {
+      ...process.env,
+      LIBP2P_EXAMPLE_TEST_URL: server.url
+    }
+  })
+
+  proc.all.on('data', (data) => {
+    process.stdout.write(data)
+  })
+
+  try {
+    await proc
+  } finally {
+    server.stop()
+  }
+}

examples/utils.js

@@ -3,6 +3,96 @@
 const execa = require('execa')
 const fs = require('fs-extra')
 const which = require('which')
+const path = require('path')
+
+async function startServer (dir) {
+  async function serveFrom (path) {
+    return new Promise((resolve, reject) => {
+      let output = ''
+
+      const proc = execa.command(`http-server ${path} -a 127.0.0.1`, {
+        cwd: __dirname
+      })
+      proc.all.on('data', (data) => {
+        process.stdout.write(data)
+
+        const line = data.toString('utf8')
+        output += line
+
+        if (output.includes('Hit CTRL-C to stop the server')) {
+          // find the port
+          const port = output.match(/http:\/\/127.0.0.1:(\d+)/)[1]
+
+          if (!port) {
+            throw new Error(`Could not find port in ${output}`)
+          }
+
+          resolve({
+            stop: () => {
+              console.info('Stopping server')
+              proc.kill('SIGINT', {
+                forceKillAfterTimeout: 2000
+              })
+            },
+            url: `http://127.0.0.1:${port}`
+          })
+        }
+      })
+
+      proc.then(() => {}, (err) => reject(err))
+    })
+  }
+
+  const serverPaths = [
+    path.join(dir, 'build'),
+    path.join(dir, 'dist'),
+    path.join(dir, 'public')
+  ]
+
+  for (const p of serverPaths) {
+    if (fs.existsSync(p)) {
+      return serveFrom(p)
+    }
+  }
+
+  // running a bare index.html file
+  const files = [
+    path.join(dir, 'index.html')
+  ]
+
+  for (const f of files) {
+    if (fs.existsSync(f)) {
+      console.info('Found bare file', f)
+
+      if (!fs.existsSync(path.resolve(dir, '../../dist'))) {
+        console.info('Building IPFS')
+        const proc = execa.command('npm run build', {
+          cwd: path.resolve(dir, '../../'),
+          env: {
+            ...process.env,
+            CI: true // needed for some "clever" build tools
+          }
+        })
+        proc.all.on('data', (data) => {
+          process.stdout.write(data)
+        })
+
+        await proc
+      }
+
+      return Promise.resolve({
+        url: `file://${f}`,
+        stop: () => { }
+      })
+    }
+  }
+
+  throw new Error('Browser examples must contain a `public`, `dist` or `build` folder or an `index.html` file')
+}
+
+function ephemeralPort (min = 49152, max = 65535) {
+  return Math.floor(Math.random() * (max - min + 1) + min)
+}
 
 async function isExecutable (command) {
   try {
@@ -57,5 +147,7 @@ async function waitForOutput (expectedOutput, command, args = [], opts = {}) {
 }
 
 module.exports = {
+  startServer,
+  ephemeralPort,
   waitForOutput
 }