test: Test examples (#2528)

* test: adds automated tests to browser examples

* chore: upgrade chrome

* chore: throw on unhandled rejection

* fix: fail if FAILED is in output

* chore: exit with same exit code as nightwatch

* chore: fix element id

* test: add assertion

* chore: add video streaming test

* chore: change dist url

* chore: build IPFS for basic browser demos

* test: add some node tests

* test: adds some more tests. ethereum one is a little wobbly

* chore: accept bundle as build script

* test: add final few tests

* test: control assertion timeouts with global

* test: wait for other peer to join workspace before sending file

* chore: tidy up deps

.gitignore

@@ -8,6 +8,7 @@ logs
 *.log
 # npm pack
 *.tgz
+**/tests_output
 
 coverage
 

.travis.yml

@@ -34,6 +34,10 @@ addons:
       # Fixes error while loading shared libraries: libgconf-2.so.4: cannot open shared object file: No such file or directory
       # https://github.com/electron/electron/issues/1518
       - libgconf-2-4
+      # Ensure chrome is the latest version
+      # https://stackoverflow.com/questions/57903415/travis-ci-chrome-62-instead-of-77
+      - dpkg
+  chrome: stable
 
 script: npx nyc -s npx aegir test -t node --timeout 10000 --bail
 after_success:
@@ -74,61 +78,205 @@ jobs:
         - npx aegir test -t electron-renderer --bail --timeout 10000
 
     - stage: test
-      name: interop node
+      name: interop - node
       script:
         - cd node_modules/ipfs-interop
         - IPFS_JS_EXEC=./../../src/cli/bin.js IPFS_REUSEPORT=false npx aegir test -t node --bail
 
     - stage: test
-      name: interop browser
+      name: interop - browser
       script:
         - cd node_modules/ipfs-interop
         - IPFS_JS_EXEC=./../../src/cli/bin.js IPFS_REUSEPORT=false npx aegir test -t browser --bail
 
     - stage: test
-      name: interop electron-main
+      name: interop - electron-main
       os: osx
       script:
         - cd node_modules/ipfs-interop
         - IPFS_JS_EXEC=./../../src/cli/bin.js IPFS_REUSEPORT=false npx aegir test -t electron-main -f ./test/node.js --bail --timeout 10000
 
     - stage: test
-      name: interop electron-renderer
+      name: interop - electron-renderer
       os: osx
       script:
         - cd node_modules/ipfs-interop
         - IPFS_JS_EXEC=./../../src/cli/bin.js IPFS_REUSEPORT=false npx aegir test -t electron-renderer -f ./test/browser.js --bail --timeout 10000
 
     - stage: test
       if: branch =~ /^release\/.*$/
-      name: ipfs-companion
+      name: external - ipfs-companion
       script:
         - npm run test:external -- ipfs-companion https://github.com/ipfs-shipyard/ipfs-companion.git
 
     - stage: test
       if: branch =~ /^release\/.*$/
-      name: npm-on-ipfs
+      name: external - npm-on-ipfs
       script:
         - npm run test:external -- npm-on-ipfs https://github.com/ipfs-shipyard/npm-on-ipfs.git
 
     - stage: test
       if: branch =~ /^release\/.*$/
-      name: ipfs-pubsub-room
+      name: external - ipfs-pubsub-room
       script:
         - npm run test:external -- ipfs-pubsub-room https://github.com/ipfs-shipyard/ipfs-pubsub-room.git
 
     - stage: test
       if: branch =~ /^release\/.*$/
-      name: peer-base
+      name: external - peer-base
       script:
         - npm run test:external -- peer-base https://github.com/peer-base/peer-base.git
 
     - stage: test
       if: branch =~ /^release\/.*$/
-      name: service-worker-gateway
+      name: external - service-worker-gateway
       script:
         - npm run test:external -- service-worker-gateway https://github.com/ipfs-shipyard/service-worker-gateway.git
 
+    - stage: test
+      if: branch =~ /^release\/.*$/
+      name: example - browser-add-readable-stream
+      script:
+        - cd examples
+        - npm install
+        - npm run test -- browser-add-readable-stream
+
+    - stage: test
+      if: branch =~ /^release\/.*$/
+      name: example - browser-browserify
+      script:
+        - cd examples
+        - npm install
+        - npm run test -- browser-browserify
+
+    - stage: test
+      if: branch =~ /^release\/.*$/
+      name: example - browser-create-react-app
+      script:
+        - cd examples
+        - npm install
+        - npm run test -- browser-create-react-app
+
+    - stage: test
+      if: branch =~ /^release\/.*$/
+      name: example - browser-mfs
+      script:
+        - cd examples
+        - npm install
+        - npm run test -- browser-mfs
+
+    - stage: test
+      if: branch =~ /^release\/.*$/
+      name: example - browser-parceljs
+      script:
+        - cd examples
+        - npm install
+        - npm run test -- browser-parceljs
+
+    - stage: test
+      if: branch =~ /^release\/.*$/
+      name: example - browser-readablestream
+      script:
+        - cd examples
+        - npm install
+        - npm run test -- browser-readablestream
+
+    - stage: test
+      if: branch =~ /^release\/.*$/
+      name: example - browser-script-tag
+      script:
+        - cd examples
+        - npm install
+        - npm run test -- browser-script-tag
+
+    - stage: test
+      if: branch =~ /^release\/.*$/
+      name: example - browser-video-streaming
+      script:
+        - cd examples
+        - npm install
+        - npm run test -- browser-video-streaming
+
+    - stage: test
+      if: branch =~ /^release\/.*$/
+      name: example - browser-vue
+      script:
+        - cd examples
+        - npm install
+        - npm run test -- browser-vue
+
+    - stage: test
+      if: branch =~ /^release\/.*$/
+      name: example - browser-webpack
+      script:
+        - cd examples
+        - npm install
+        - npm run test -- browser-webpack
+
+    - stage: test
+      if: branch =~ /^release\/.*$/
+      name: example - circuit-relaying
+      script:
+        - cd examples
+        - npm install
+        - npm run test -- circuit-relaying
+
+    - stage: test
+      if: branch =~ /^release\/.*$/
+      name: example - custom-ipfs-repo
+      script:
+        - cd examples
+        - npm install
+        - npm run test -- custom-ipfs-repo
+
+    - stage: test
+      if: branch =~ /^release\/.*$/
+      name: example - custom-libp2p
+      script:
+        - cd examples
+        - npm install
+        - npm run test -- custom-libp2p
+
+    - stage: test
+      if: branch =~ /^release\/.*$/
+      name: example - exchange-files-in-browser
+      script:
+        - cd examples
+        - npm install
+        - npm run test -- exchange-files-in-browser
+
+    - stage: test
+      if: branch =~ /^release\/.*$/
+      name: example - explore-ethereum-blockchain
+      script:
+        - cd examples
+        - npm install
+        - npm run test -- explore-ethereum-blockchain
+
+    - stage: test
+      if: branch =~ /^release\/.*$/
+      name: example - ipfs-101
+      script:
+        - cd examples
+        - npm install
+        - npm run test -- ipfs-101
+
+    - stage: test
+      if: branch =~ /^release\/.*$/
+      name: example - running-multiple-nodes
+      script:
+        - cd examples
+        - npm install
+        - npm run test -- running-multiple-nodes
+
+    - stage: test
+      if: branch =~ /^release\/.*$/
+      name: example - traverse-ipld-graphs
+      script:
+        - cd examples
+        - npm install
+        - npm run test -- traverse-ipld-graphs
+
     - stage: tag
       # only run on changes to master
       if: branch = master AND type = push AND fork = false

examples/README.md

@@ -49,3 +49,27 @@ In this section, you will find explanations to different pieces of IPFS Architec
 - Storing and Retrieving blocks (soon™)
 - IPLD (InterPlanetary Linked-Data) (soon™)
 - IPFS Networking - Managing your swarm, libp2p and more (soon™)
+
+## Adding new examples
+
+All examples should include a `test.js` file.  The implementation will differ depending on if your example is intended to run under node or the browser.
+
+### Browser `test.js`
+
+All browser examples should either be a whole webapp or a simple demo (e.g. just `index.html` and `index.js` files).
+
+#### Webapp
+
+Webapps must have a `package.json` that contains either a `build` or a `bundle` script.  This script should place all assets in a folder named `dist`, `build` or `public` including an `index.html` file.  During testing this will have a web server run over it using `http-server`.
+
+#### Simple demo
+
+Simple demos must have an `index.html` file in the root of the demo folder.  This file will be loaded in a browser and tested via a `file://` URL.
+
+#### Browser `test.js`
+
+Your `test.js` file should contain a [Nightwatch](https://www.npmjs.com/package/nightwatch) scenario that will be executed.  The URL to example will be present in the `IPFS_EXAMPLE_TEST_URL` environmental variable when the test is run.
+
+### Node
+
+Your `test.js` file should export an async function that sets up your test, runs any assertions, tears down anything set up and throws an error if the test fails.

examples/browser-add-readable-stream/index.html

@@ -1,7 +1,11 @@
+<!doctype html>
 <html>
+  <head>
+    <title>Add readable stream</title>
+  </head>
   <body>
     <pre id="output"></pre>
-    <script src="https://unpkg.com/ipfs/dist/index.js"></script>
+    <script src="../../dist/index.js"></script>
     <script src="index.js"></script>
   </body>
 </html>

examples/browser-add-readable-stream/test.js

@@ -0,0 +1,13 @@
+'use strict'
+
+module.exports = {
+  'Add readable stream example': function (browser) {
+    browser
+      .url(process.env.IPFS_EXAMPLE_TEST_URL)
+      .waitForElementVisible('#output')
+
+    browser.expect.element('#output').text.to.contain('directory/ QmVgJePRxp1vhRxDcJWdmuFGfUB5S5RYTtG1NR3bQM4BBn')
+
+    browser.end()
+  }
+}

examples/browser-browserify/package.json

@@ -11,10 +11,13 @@
   "keywords": [],
   "license": "MIT",
   "devDependencies": {
-    "ipfs": "file:../../",
     "browserify": "^16.2.3",
     "concat-stream": "^2.0.0",
-    "http-server": "~0.11.1"
+    "http-server": "~0.11.1",
+    "ipfs": "file:../../"
   },
-  "dependencies": {}
+  "dependencies": {},
+  "browser": {
+    "ipfs": "ipfs/dist"
+  }
 }

examples/browser-browserify/public/index.html

@@ -14,9 +14,9 @@
   </head>
   <body>
     <h1>JS IPFS - Add data to IPFS from the browser</h1>
-    <textarea id="source"></textarea>
-    <button id="store">add to ipfs</button>
-    <div>
+    <textarea id="source" placeholder="Enter some text here"></textarea>
+    <button id="store">Add text to ipfs</button>
+    <div id="output" style="display: none">
       <div>found in ipfs:</div>
       <div class="content" id="hash">[ipfs hash]</div>
       <div class="content" id="content">[ipfs content]</div>

examples/browser-browserify/src/index.js

@@ -9,22 +9,23 @@ document.addEventListener('DOMContentLoaded', async () => {
 
   async function store () {
     const toStore = document.getElementById('source').value
+    const result = await node.add(toStore)
 
-    const res = await node.add(toStore)
-
-    res.forEach((file) => {
+    for (const file of result) {
       if (file && file.hash) {
         console.log('successfully stored', file.hash)
-        display(file.hash)
+
+        await display(file.hash)
       }
-    })
+    }
   }
 
   async function display (hash) {
-    // buffer: true results in the returned result being a buffer rather than a stream
     const data = await node.cat(hash)
+
     document.getElementById('hash').innerText = hash
     document.getElementById('content').innerText = data
+    document.getElementById('output').setAttribute('style', 'display: block')
   }
 
   document.getElementById('store').onclick = store

examples/browser-browserify/test.js

@@ -0,0 +1,21 @@
+'use strict'
+
+const pkg = require('./package.json')
+
+module.exports = {
+  [pkg.name]: function (browser) {
+    browser
+      .url(process.env.IPFS_EXAMPLE_TEST_URL)
+      .waitForElementVisible('#source')
+      .setValue('#source', 'hello')
+      .waitForElementVisible('#store')
+      .pause(1000)
+      .click('#store')
+      .waitForElementVisible('#output')
+
+    browser.expect.element('#hash').text.to.contain('QmWfVY9y3xjsixTgbd9AorQxH7VtMpzfx2HaWtsoUYecaX')
+    browser.expect.element('#content').text.to.contain('hello')
+
+    browser.end()
+  }
+}

examples/browser-create-react-app/package.json

@@ -8,7 +8,7 @@
     "ipfs-css": "^0.13.1",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-scripts": "3.1.1",
+    "react-scripts": "^3.2.0",
     "tachyons": "^4.11.1"
   },
   "scripts": {

examples/browser-create-react-app/src/App.js

@@ -36,12 +36,12 @@ const IpfsId = (props) => {
   if (!props) return null
   return (
     <section className='bg-snow mw7 center mt5'>
-      <h1 className='f3 fw4 ma0 pv3 aqua montserrat tc'>Connected to IPFS</h1>
+      <h1 className='f3 fw4 ma0 pv3 aqua montserrat tc' data-test='title'>Connected to IPFS</h1>
       <div className='pa4'>
         {['id', 'agentVersion'].map((key) => (
           <div className='mb4' key={key}>
             <Title>{key}</Title>
-            <div className='bg-white pa2 br2 truncate monospace'>{props[key]}</div>
+            <div className='bg-white pa2 br2 truncate monospace' data-test={key}>{props[key]}</div>
           </div>
         ))}
       </div>