test: add browser-to-browser test for bi-directional communication

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

@@ -1,12 +1,12 @@
 /* eslint-disable no-console */
-import { setup, expect } from 'test-ipfs-example/browser'
-import { createLibp2p } from 'libp2p'
-import { circuitRelayServer } from 'libp2p/circuit-relay'
+import { noise } from '@chainsafe/libp2p-noise'
+import { mplex } from '@libp2p/mplex'
 import { webSockets } from '@libp2p/websockets'
 import * as filters from '@libp2p/websockets/filters'
-import { mplex } from '@libp2p/mplex'
-import { noise } from '@chainsafe/libp2p-noise'
+import { createLibp2p } from 'libp2p'
+import { circuitRelayServer } from 'libp2p/circuit-relay'
 import { identifyService } from 'libp2p/identify'
+import { setup, expect } from 'test-ipfs-example/browser'
 
 // Setup
 const test = setup()
@@ -19,19 +19,18 @@ const sendBtn = '#send'
 const output = '#output'
 const listeningAddresses = '#multiaddrs'
 
-const message = 'hello'
 let url
 
 // we spawn a js libp2p relay
-async function spawnRelay() {
+async function spawnRelay () {
   const relayNode = await createLibp2p({
     addresses: {
       listen: ['/ip4/127.0.0.1/tcp/0/ws']
     },
     transports: [
       webSockets({
         filter: filters.all
-      }),
+      })
     ],
     connectionEncryption: [noise()],
     streamMuxers: [mplex()],
@@ -73,24 +72,31 @@ test.describe('browser to browser example:', () => {
     const relayedAddress = await dialRelay(page, relayNodeAddr)
 
     // load second page and use `peer` as the connectAddr
-    const pageTwo = await context.newPage();
+    const pageTwo = await context.newPage()
     await pageTwo.goto(url)
     await dialPeerOverRelay(pageTwo, relayedAddress)
 
     // stop the relay
     await relayNode.stop()
 
-    // send the message to the peer over webRTC
-    await pageTwo.fill(messageInput, message)
-    await pageTwo.click(sendBtn)
+    await echoMessagePeer(pageTwo, 'hello B')
 
-    // check the message was echoed back
-    const outputLocator = pageTwo.locator(output)
-    await expect(outputLocator).toHaveText(/Sending message/)
-    await expect(outputLocator).toHaveText(/Received message/, { timeout: 60000 })
+    // @todo - this test is currently failing
+    await echoMessagePeer(page, 'hello A')
   })
 })
 
+async function echoMessagePeer (page, message) {
+  // send the message to the peer over webRTC
+  await page.fill(messageInput, message)
+  await page.click(sendBtn)
+
+  // check the message was echoed back
+  const outputLocator = page.locator(output)
+  await expect(outputLocator).toContainText(`Sending message '${message}'`)
+  await expect(outputLocator).toContainText(`Received message '${message}'`, { timeout: 60000 })
+}
+
 async function dialRelay (page, address) {
   // add the go libp2p multiaddress to the input field and submit
   await page.fill(connectAddr, address)