docs: update http client examples (#3172)

Moves http client examples to the examples folder and adds tests to prevent regressions.

Author: achingbrain

examples/browser-mfs/package.json

@@ -17,7 +17,7 @@
     "http-server": "^0.11.1",
     "terser-webpack-plugin": "^1.2.1",
     "test-ipfs-example": "^2.0.3",
-    "webpack": "^4.28.4",
+    "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"
   },
   "dependencies": {

examples/browser-readablestream/package.json

@@ -17,7 +17,7 @@
     "http-server": "^0.11.1",
     "terser-webpack-plugin": "^1.2.1",
     "test-ipfs-example": "^2.0.3",
-    "webpack": "^4.28.4"
+    "webpack": "^4.43.0"
   },
   "dependencies": {
     "ipfs": "^0.47.0",

examples/browser-webpack/package.json

@@ -19,11 +19,11 @@
     "copy-webpack-plugin": "^5.0.4",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-hot-loader": "^4.8.8",
+    "react-hot-loader": "^4.12.21",
     "test-ipfs-example": "^2.0.3",
-    "webpack": "^4.28.4",
+    "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.1.14"
+    "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
     "ipfs": "^0.47.0"

examples/custom-libp2p/package.json

@@ -16,7 +16,7 @@
     "libp2p-kad-dht": "^0.19.9",
     "libp2p-mdns": "^0.14.1",
     "libp2p-mplex": "^0.9.5",
-    "libp2p-secio": "^0.12.4",
+    "libp2p-secio": "^0.12.6",
     "libp2p-tcp": "^0.14.5"
   },
   "devDependencies": {

packages/ipfs-http-client/examples/browser-pubsub/README.md renamed to examples/http-client-browser-pubsub/README.md

@@ -28,12 +28,10 @@ This example is a demo web application that allows you to connect to an IPFS nod
 
 With Node.js and git installed, clone the repo and install the project dependencies:
 
-```sh
-git clone https://github.com/ipfs/js-ipfs-http-client.git
-cd js-ipfs-http-client
-npm install # Installs ipfs-http-client dependencies
-cd examples/browser-pubsub
-npm install # Installs browser-pubsub app dependencies
+```console
+$ git clone https://github.com/ipfs/js-ipfs.git
+$ cd js-ipfs/examples/http-client-browser-pubsub
+$ npm install
 ```
 
 Start the example application:

packages/ipfs-http-client/examples/browser-pubsub/index.html renamed to examples/http-client-browser-pubsub/index.html

@@ -54,8 +54,8 @@ async function main () {
     await sleep()
     const peers = await ipfs.swarm.peers()
     peers.forEach(peer => {
-      const fullAddr = `${peer.addr}/ipfs/${peer.peer.toB58String()}`
-      log(`<span class="${addr.endsWith(peer.peer.toB58String()) ? 'teal' : ''}">${fullAddr}</span>`)
+      const fullAddr = `${peer.addr}/ipfs/${peer.peer.toString()}`
+      log(`<span class="${addr.endsWith(peer.peer.toString()) ? 'teal' : ''}">${fullAddr}</span>`)
     })
     log(`(${peers.length} peers total)`)
   }
@@ -84,18 +84,6 @@ async function main () {
       } catch (_) {
         log(msg.data.toString('hex'))
       }
-    }, {
-      onError: (err, fatal) => {
-        if (fatal) {
-          console.error(err)
-          log(`<span class="red">${err.message}</span>`)
-          topic = null
-          log('Resubscribing in 5s...')
-          setTimeout(catchAndLog(() => subscribe(nextTopic), log), 5000)
-        } else {
-          console.warn(err)
-        }
-      }
     })
 
     topic = nextTopic

packages/ipfs-http-client/examples/browser-pubsub/index.js renamed to examples/http-client-browser-pubsub/index.js

@@ -0,0 +1,28 @@
+{
+  "name": "example-http-client-browser-pubsub-example",
+  "version": "0.0.0",
+  "description": "An example demonstrating pubsub in the browser",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "build": "parcel build index.html --public-url ./",
+    "start": "parcel index.html -p 8888",
+    "test": "test-ipfs-example"
+  },
+  "author": "Alan Shaw",
+  "license": "MIT",
+  "dependencies": {
+    "ipfs-http-client": "^44.3.0"
+  },
+  "browserslist": [
+    "last 2 versions and not dead and > 2%"
+  ],
+  "devDependencies": {
+    "execa": "^4.0.0",
+    "go-ipfs": "^0.6.0",
+    "ipfs": "^0.47.0",
+    "ipfsd-ctl": "^4.1.1",
+    "parcel-bundler": "^1.12.4",
+    "test-ipfs-example": "^2.0.3"
+  }
+}

examples/http-client-browser-pubsub/package.json

@@ -0,0 +1,144 @@
+'use strict'
+
+const path = require('path')
+const execa = require('execa')
+const { createFactory } = require('ipfsd-ctl')
+const df = createFactory({
+  ipfsHttpModule: require('ipfs-http-client'),
+}, {
+  js: {
+    ipfsBin: require.resolve('ipfs/src/cli/bin.js')
+  },
+  go: {
+    ipfsBin: require('go-ipfs').path(),
+    args: ['--enable-pubsub-experiment']
+  }
+})
+const {
+  startServer
+} = require('test-ipfs-example/utils')
+const pkg = require('./package.json')
+
+async function testUI (url, id, apiAddr, peerAddr, topic) {
+  const proc = execa(require.resolve('test-ipfs-example/node_modules/.bin/nightwatch'), ['--config', require.resolve('test-ipfs-example/nightwatch.conf.js'), path.join(__dirname, 'test.js')], {
+    cwd: path.resolve(__dirname, '../'),
+    env: {
+      ...process.env,
+      CI: true,
+      IPFS_EXAMPLE_TEST_URL: url,
+      IPFS_API_ADDRESS: apiAddr,
+      IPFS_ID: id,
+      IPFS_PEER_ADDRESS: peerAddr,
+      IPFS_TOPIC: topic
+    },
+    all: true
+  })
+  proc.all.on('data', (data) => {
+    process.stdout.write(data)
+  })
+
+  await proc
+}
+
+async function runTest () {
+  const app1 = await startServer(__dirname)
+  const app2 = await startServer(__dirname)
+  const js = await df.spawn({
+    type: 'js',
+    test: true,
+    ipfsOptions: {
+      config: {
+        Addresses: {
+          API: '/ip4/127.0.0.1/tcp/0'
+        },
+        API: {
+          HTTPHeaders: {
+            'Access-Control-Allow-Origin': [
+              app1.url
+            ]
+          }
+        }
+      }
+    }
+  })
+  const go = await df.spawn({
+    type: 'go',
+    test: true,
+    ipfsOptions: {
+      config: {
+        Addresses: {
+          API: '/ip4/127.0.0.1/tcp/0'
+        },
+        API: {
+          HTTPHeaders: {
+            'Access-Control-Allow-Origin': [
+              app2.url
+            ]
+          }
+        }
+      }
+    }
+  })
+
+  const topic = `topic-${Math.random()}`
+
+  try {
+    await Promise.all([
+      testUI(app1.url, js.api.peerId.id, js.apiAddr, go.api.peerId.addresses[0].toString(), topic),
+      testUI(app2.url, go.api.peerId.id, go.apiAddr, js.api.peerId.addresses[0].toString(), topic)
+    ])
+  } finally {
+    await js.stop()
+    await go.stop()
+    await app1.stop()
+    await app2.stop()
+  }
+}
+
+module.exports = runTest
+
+module.exports[pkg.name] = function (browser) {
+  browser
+    .url(process.env.IPFS_EXAMPLE_TEST_URL)
+    .waitForElementVisible('#api-url')
+    .clearValue('#api-url')
+    .setValue('#api-url', process.env.IPFS_API_ADDRESS)
+    .pause(1000)
+    .click('#node-connect')
+
+  browser.expect.element('#console').text.to.contain(`Connecting to ${process.env.IPFS_API_ADDRESS}\nSuccess!`)
+
+  // connect to peer
+  browser
+    .waitForElementVisible('#peer-addr')
+    .clearValue('#peer-addr')
+    .setValue('#peer-addr', process.env.IPFS_PEER_ADDRESS)
+    .pause(1000)
+    .click('#peer-connect')
+
+  browser.expect.element('#console').text.to.contain(`Connecting to peer ${process.env.IPFS_PEER_ADDRESS}\nSuccess!`)
+
+  // subscribe to topic
+  browser
+    .waitForElementVisible('#topic')
+    .clearValue('#topic')
+    .setValue('#topic', process.env.IPFS_TOPIC)
+    .pause(1000)
+    .click('#subscribe')
+
+  browser.expect.element('#console').text.to.contain(`Subscribing to ${process.env.IPFS_TOPIC}...\nSuccess!`)
+
+  // send a message
+  browser
+    .waitForElementVisible('#message')
+    .clearValue('#message')
+    .setValue('#message', 'hello')
+    .pause(1000)
+    .click('#send')
+
+  const remotePeerId = process.env.IPFS_PEER_ADDRESS.split('/').pop()
+
+  browser.expect.element('#console').text.to.contain(`from ${remotePeerId}:\n"hello"`)
+
+  browser.end()
+}