Add playwright tests and add to CI (#87)

* Add playwright tests and add to CI

* Install deps

* Replace direct html injection in the example to actually creating dom elements

* Small refactors suggested by ckousik

* Implement Glen's suggestions

* Add version to @libp2p/webrtc

* Update example import to use @libp2p/webrtc

.github/workflows/examples.yml

@@ -0,0 +1,47 @@
+name: CI
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+concurrency:
+  group: ${{ github.head_ref || github.ref_name }}
+  cancel-in-progress: true
+
+jobs:
+  examples:
+    runs-on: ubuntu-latest
+    name: Test example ${{ matrix.project }}
+    strategy:
+      fail-fast: false
+      matrix:
+        project:
+          - browser-to-server
+    defaults:
+      run:
+        working-directory: examples/${{ matrix.project }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+      - uses: actions/setup-go@v3
+        with:
+          go-version: '>=1.19.0'
+      - name: Install dependencies
+        run: npm install
+        working-directory: .
+      - name: Build example
+        run: npm run build
+        working-directory: .
+      - name: Install dependencies
+        run: npm install
+      - name: Install Playwright
+        run: npx -y playwright install --with-deps
+      - name: Run tests
+        run: npm run test
+        env:
+          CI: true

examples/browser-to-server/index.js

@@ -3,13 +3,17 @@ import { noise } from '@chainsafe/libp2p-noise'
 import { multiaddr } from '@multiformats/multiaddr'
 import { pipe } from "it-pipe";
 import { fromString, toString } from "uint8arrays";
-import { webRTC } from 'js-libp2p-webrtc'
+import { webRTC } from '@libp2p/webrtc'
 import { pushable } from 'it-pushable';
 
 let stream;
 const output = document.getElementById('output')
 const sendSection = document.getElementById('send-section')
-const appendOutput = (line) => output.innerText += `${line}\n`
+const appendOutput = (line) => {
+  const div = document.createElement("div")
+  div.appendChild(document.createTextNode(line))
+  output.append(div)
+}
 const clean = (line) => line.replaceAll('\n', '')
 const sender = pushable()
 
@@ -27,7 +31,7 @@ node.connectionManager.addEventListener('peer:connect', (connection) => {
 
 window.connect.onclick = async () => {
   const ma = multiaddr(window.peer.value)
-  appendOutput(`Dialing ${ma}`)
+  appendOutput(`Dialing '${ma}'`)
   stream = await node.dialProtocol(ma, ['/echo/1.0.0'])
   pipe(sender, stream, async (src) => {
     for await(const buf of src) {

examples/browser-to-server/package.json

@@ -5,14 +5,20 @@
   "type": "module",
   "scripts": {
     "start": "vite",
-    "go-libp2p-server": "cd ../go-libp2p-server && go build && ./go-libp2p-server"
+    "build": "vite build",
+    "go-libp2p-server": "cd ../go-libp2p-server && go run ./main.go",
+    "test": "npm run build && playwright test tests"
   },
   "dependencies": {
     "@chainsafe/libp2p-noise": "^11.0.0",
     "@multiformats/multiaddr": "^11.0.5",
-    "js-libp2p-webrtc": "../../",
     "it-pushable": "^3.1.0",
+    "@libp2p/webrtc": "^1.0.3",
     "libp2p": "^0.42.0",
     "vite": "^3.1.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.30.0",
+    "test-util-ipfs-example": "^1.0.2"
   }
 }

examples/browser-to-server/tests/test.js

@@ -0,0 +1,97 @@
+/* eslint-disable no-console */
+import { test, expect } from '@playwright/test'
+import { playwright } from 'test-util-ipfs-example'
+import { spawn, exec } from 'child_process'
+import { existsSync } from 'fs'
+
+// Setup
+const play = test.extend({
+  ...playwright.servers()
+})
+
+async function spawnGoLibp2p() {
+  if (!existsSync('../../examples/go-libp2p-server/go-libp2p-server')) {
+    await new Promise((resolve, reject) => {
+      exec('go build',
+        { cwd: '../../examples/go-libp2p-server' },
+        (error, stdout, stderr) => {
+          if (error) {
+            throw (`exec error: ${error}`)
+          }
+          resolve()
+        })
+    })
+  }
+
+  const server = spawn('./go-libp2p-server', [], { cwd: '../../examples/go-libp2p-server', killSignal: 'SIGINT' })
+  server.stderr.on('data', (data) => {
+    console.log(`stderr: ${data}`, typeof data)
+  })
+  const serverAddr = await (new Promise(resolve => {
+    server.stdout.on('data', (data) => {
+      console.log(`stdout: ${data}`, typeof data)
+      const addr = String(data).match(/p2p addr:  ([^\s]*)/)
+      if (addr !== null && addr.length > 0) {
+        resolve(addr[1])
+      }        
+    })
+  }))
+  return { server, serverAddr }
+}
+
+play.describe('bundle ipfs with parceljs:', () => {
+  // DOM
+  const connectBtn = '#connect'
+  const connectAddr = '#peer'
+  const messageInput = '#message'
+  const sendBtn = '#send'
+  const output = '#output'
+
+  let server
+  let serverAddr
+
+  // eslint-disable-next-line no-empty-pattern
+  play.beforeAll(async ({ }, testInfo) => {
+    testInfo.setTimeout(5 * 60_000)
+    const s = await spawnGoLibp2p()
+    server = s.server
+    serverAddr = s.serverAddr
+    console.log('Server addr:', serverAddr)
+  }, {})
+
+  play.afterAll(() => {
+    server.kill('SIGINT')
+  })
+
+  play.beforeEach(async ({ servers, page }) => {
+    const url = `http://localhost:${servers[0].port}/`
+    console.log(url)
+    await page.goto(url)
+  })
+
+  play('should connect to a go-libp2p node over webtransport', async ({ page }) => {
+    const message = 'hello'
+
+    // add the go libp2p multiaddress to the input field and submit
+    await page.fill(connectAddr, serverAddr)
+    await page.click(connectBtn)
+
+    // send the relay message to the go libp2p server
+    await page.fill(messageInput, message)
+    await page.click(sendBtn)
+
+    await page.waitForSelector('#output:has(div)')
+
+    // Expected output:
+    //
+    // Dialing '${serverAddr}'
+    // Peer connected '${serverAddr}'
+    // Sending message '${message}'
+    // Received message '${message}'
+    const connections = await page.textContent(output)
+    expect(connections).toContain(`Dialing '${serverAddr}'`)
+    expect(connections).toContain(`Peer connected '${serverAddr}'`)
+    expect(connections).toContain(`Sending message '${message}'`)
+    expect(connections).toContain(`Received message '${message}'`)
+  })
+})