test: add video e2e tests (#529)

* chore: update package-lock.json

* fix: config UI is up to date with IDB

* chore: apply self suggestions from code review

* chore: fix build and lint

* test: add video e2e tests

* chore: actually commit the video test file

* chore: fix test name and comment

src/lib/get-verified-fetch.ts

@@ -45,7 +45,7 @@ export async function getVerifiedFetch (config: ConfigDb, logger: ComponentLogge
   const blockBrokers: Array<(components: any) => BlockBroker> = []
 
   if (config.enableGatewayProviders) {
-    blockBrokers.push(trustlessGateway())
+    blockBrokers.push(trustlessGateway({ allowLocal: true }))
   }
 
   const hashers = [blake3]

test-e2e/byte-range.test.ts

@@ -30,4 +30,18 @@ test.describe('byte-ranges', () => {
     expect(byteSize).toBe(872)
     expect(bytes).toStrictEqual(tailBytes)
   })
+
+  test('video file first set of bytes match kubo gateway', async ({ page }) => {
+    const { bytes, byteSize, statusCode } = await doRangeRequest({ page, range: 'bytes=0-100', path: '/ipfs/bafybeie4vcqkutumw7s26ob2bwqwqi44m6lrssjmiirlhrzhs2akdqmkw4' })
+
+    // also fetch from KUBO_GATEWAY to compare
+    const response = await fetch(`${process.env.KUBO_GATEWAY}/ipfs/bafybeie4vcqkutumw7s26ob2bwqwqi44m6lrssjmiirlhrzhs2akdqmkw4`, { headers: { range: 'bytes=0-100' } })
+
+    const buffer = await response.arrayBuffer()
+    const kuboByteSize = buffer.byteLength
+    const kuboBytes = Array.from(new Uint8Array(buffer))
+    expect(statusCode).toBe(response.status)
+    expect(byteSize).toBe(kuboByteSize)
+    expect(bytes).toStrictEqual(kuboBytes)
+  })
 })

test-e2e/video.test.ts

@@ -0,0 +1,48 @@
+import { testPathRouting as test, expect } from './fixtures/config-test-fixtures.js'
+import { setConfig } from './fixtures/set-sw-config.js'
+import { waitForServiceWorker } from './fixtures/wait-for-service-worker'
+import type { ConfigDbWithoutPrivateFields } from '../src/lib/config-db.js'
+
+const cid = 'bafybeie4vcqkutumw7s26ob2bwqwqi44m6lrssjmiirlhrzhs2akdqmkw4' // big buck bunny webm trimmed to 15 seconds with `ffmpeg -i bigbuckbunny.webm -ss 00:00 -t 00:15 -c:a copy -c:v copy bigbuckbunny-mini.webm`
+test.describe('video', () => {
+  const testConfig: Partial<ConfigDbWithoutPrivateFields> = {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    gateways: [process.env.KUBO_GATEWAY!],
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    routers: [process.env.KUBO_GATEWAY!],
+    debug: '*,*:trace',
+    enableWss: true,
+    enableWebTransport: false,
+    enableRecursiveGateways: true,
+    enableGatewayProviders: false
+  }
+
+  /**
+   * We want to load the video fixture and ensure it starts playing.
+   */
+  test('starts playing automatically', async ({ page, protocol, rootDomain }) => {
+    await page.goto(`${protocol}//${rootDomain}`)
+    await setConfig({ page, config: testConfig })
+    await waitForServiceWorker(page)
+    const response = await page.goto(`${protocol}//${rootDomain}/ipfs/${cid}`, { waitUntil: 'commit' })
+    const start = performance.now()
+
+    expect(response?.status()).toBe(200)
+
+    // expect a video player
+    await page.waitForSelector('video')
+    const video = await page.$('video')
+    if (video == null) {
+      throw new Error('video element not found')
+    }
+
+    // continuously check if the video is playing
+    await page.waitForFunction((video) => {
+      return video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2
+    }, video)
+    const end = performance.now()
+
+    const timeToPlay = end - start
+    expect(timeToPlay).toBeLessThan(10000)
+  })
+})