chore: add test to verified fetch example

.github/workflows/ci.yml

@@ -21,6 +21,7 @@ jobs:
       matrix:
         project:
           - helia-101
+          - helia-browser-verified-fetch
           - helia-cjs
           - helia-electron
           - helia-esbuild
@@ -86,6 +87,7 @@ jobs:
         project:
           - helia-101
           - helia-cjs
+          - helia-browser-verified-fetch
           - helia-electron
           - helia-esbuild
           - helia-jest

examples/helia-browser-verified-fetch/package.json

@@ -8,7 +8,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "test": "npm run build && test-browser-example test"
+    "test": "vite build -c ./test/vite.config.js && test-browser-example test"
   },
   "dependencies": {
     "@helia/verified-fetch": "next",

examples/helia-browser-verified-fetch/test/blockstore.js

@@ -0,0 +1,52 @@
+import { CodeError } from '@libp2p/interface'
+import { base32 } from 'multiformats/bases/base32'
+import { CID } from 'multiformats/cid'
+import * as raw from 'multiformats/codecs/raw'
+import * as Digest from 'multiformats/hashes/digest'
+import fixtures from './fixtures.js'
+
+export class MemoryBlockstore {
+  data
+
+  constructor () {
+    this.data = new Map()
+
+    // prefill blockstore with test fixtures
+    Object.values(fixtures).forEach((fixture) => {
+      this.put(fixture.cid, fixture.data)
+    })
+  }
+
+  put (key, val) { // eslint-disable-line require-await
+    this.data.set(base32.encode(key.multihash.bytes), val)
+
+    return key
+  }
+
+  get (key) {
+    const buf = this.data.get(base32.encode(key.multihash.bytes))
+
+    if (buf == null) {
+      throw new CodeError('Not found', 'ERR_NOT_FOUND')
+    }
+
+    return buf
+  }
+
+  has (key) {
+    return this.data.has(base32.encode(key.multihash.bytes))
+  }
+
+  async delete (key) {
+    this.data.delete(base32.encode(key.multihash.bytes))
+  }
+
+  async * getAll () {
+    for (const [key, value] of this.data.entries()) {
+      yield {
+        cid: CID.createV1(raw.code, Digest.decode(base32.decode(key))),
+        block: value
+      }
+    }
+  }
+}

examples/helia-browser-verified-fetch/test/fixtures.js

@@ -0,0 +1,16 @@
+import { CID } from 'multiformats/cid'
+
+export default {
+  json: {
+    cid: CID.parse('bagaaierasords4njcts6vs7qvdjfcvgnume4hqohf65zsfguprqphs3icwea'),
+    data: Uint8Array.from([123, 34, 104, 101, 108, 108, 111, 34, 58, 34, 119, 111, 114, 108, 100, 34, 125])
+  },
+  dagJson: {
+    cid: CID.parse('baguqeerasords4njcts6vs7qvdjfcvgnume4hqohf65zsfguprqphs3icwea'),
+    data: Uint8Array.from([123, 34, 104, 101, 108, 108, 111, 34, 58, 34, 119, 111, 114, 108, 100, 34, 125])
+  },
+  dagCbor: {
+    cid: CID.parse('bafyreidykglsfhoixmivffc5uwhcgshx4j465xwqntbmu43nb2dzqwfvae'),
+    data: Uint8Array.from([161, 101, 104, 101, 108, 108, 111, 101, 119, 111, 114, 108, 100])
+  }
+}

examples/helia-browser-verified-fetch/test/index.spec.js

@@ -1,27 +1,65 @@
 import { setup, expect } from 'test-ipfs-example/browser'
+import fixtures from './fixtures.js'
 
 // Setup
 const test = setup()
 
-const testCidPath = 'ipfs://bagaaieracglt4ey6qsxtvzqsgwnsw3b6p2tb7nmx5wdgxur2zia7q6nnzh7q'
-
 test.describe('Use @helia/verified-fetch With react and vite', () => {
   // DOM
   const ipfsPathInput = '#ipfs-path'
-  // const fetchOutput = '#output'
-  // const fetchAutoBtn = '#button-fetch-auto'
+  const fetchOutput = '#output'
+  const fetchAutoBtn = '#button-fetch-auto'
 
   test.beforeEach(async ({ servers, page }) => {
     await page.goto(servers[0].url)
   })
 
-  test('should properly render ui with the ipfs path input', async ({ page }) => {
+  test('should properly render ui with the ipfs path input and display JSON', async ({ page }) => {
+    // wait for helia node to be online
+    const ipfsPath = await page.locator(ipfsPathInput)
+    await expect(ipfsPath).toHaveClass(/bg-gray-50/)
+
+    await page.fill(ipfsPathInput, `ipfs://${fixtures.json.cid.toString()}`)
+    await page.click(fetchAutoBtn)
+    await page.locator(fetchOutput).waitFor('visible')
+
+    const output = await page.locator(fetchOutput)
+    await expect(output).toContainText(
+      '{ "hello": "world" }',
+      { timeout: 2000 }
+    )
+  })
+
+  test('should properly render ui with the ipfs path input and display DAG-JSON', async ({ page }) => {
     // wait for helia node to be online
     const ipfsPath = await page.locator(ipfsPathInput)
     await expect(ipfsPath).toHaveClass(/bg-gray-50/)
 
-    await page.fill(ipfsPathInput, testCidPath)
-    // await page.click(fetchAutoBtn)
-    // await page.locator(fetchOutput).waitFor('visible')
+    await page.fill(ipfsPathInput, `ipfs://${fixtures.dagJson.cid.toString()}`)
+    await page.click(fetchAutoBtn)
+    await page.locator(fetchOutput).waitFor('visible')
+
+    const output = await page.locator(fetchOutput)
+    await expect(output).toContainText(
+      '{ "hello": "world" }',
+      { timeout: 2000 }
+    )
+  })
+
+  // TODO: DAG-CBOR is broken - https://github.com/ipfs/helia/pull/426
+  test.skip('should properly render ui with the ipfs path input and display DAG-CBOR', async ({ page }) => {
+    // wait for helia node to be online
+    const ipfsPath = await page.locator(ipfsPathInput)
+    await expect(ipfsPath).toHaveClass(/bg-gray-50/)
+
+    await page.fill(ipfsPathInput, `ipfs://${fixtures.dagCbor.cid.toString()}`)
+    await page.click(fetchAutoBtn)
+    await page.locator(fetchOutput).waitFor('visible')
+
+    const output = await page.locator(fetchOutput)
+    await expect(output).toContainText(
+      '{ "hello": "world" }',
+      { timeout: 2000 }
+    )
   })
 })

examples/helia-browser-verified-fetch/test/vite.config.js

@@ -0,0 +1,11 @@
+import { resolve } from 'path'
+import defaultConfig from '../vite.config.js'
+
+// override resolution of `blockstore-core` module so we can pre-fill a memory
+// blockstore with test data
+defaultConfig.resolve ??= {}
+defaultConfig.resolve.alias ??= {}
+defaultConfig.resolve.alias['blockstore-core'] = resolve(process.cwd(), 'test/blockstore.js')
+
+// https://vitejs.dev/config/
+export default defaultConfig