fix: change CI to install browsers for tests

oliveriosousa · oliveriosousa · commit 0052e51b7767 · 2021-08-17T20:02:09.000+01:00
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -18,5 +18,7 @@ jobs:
           cache: "yarn"
       - name: Install dependencies
         run: yarn install
+      - name: Install dependencies for browsers
+        run: npx playwright install-deps
       - name: Run test:examples
         run: yarn run test:examples
diff --git a/examples/browser-video-streaming/index.html b/examples/browser-video-streaming/index.html
@@ -8,15 +8,10 @@
     <title>IPFS with HLS-JS</title>
     <link rel="icon" href="favicon.ico" />
 
-    <script
-      defer
-      src="https://cdn.jsdelivr.net/npm/hlsjs-ipfs-loader@0.3.0/dist/index.js"
-    ></script>
-    <script defer src="https://cdn.jsdelivr.net/npm/hls.js@0.14.17"></script>
-
     <script type="module" defer src="./src/index.js"></script>
   </head>
   <body>
     <video id="video" controls autoplay></video>
+    <div id="status"></div>
   </body>
 </html>
diff --git a/examples/browser-video-streaming/package.json b/examples/browser-video-streaming/package.json
@@ -10,10 +10,12 @@
     "build": "parcel build index.html --no-scope-hoist",
     "serve": "parcel serve index.html --open -p 8888",
     "start": "npm run serve",
-    "test:example": "npm run build && playwright test tests --browser=webkit --retries=3"
+    "test:example": "npm run build && playwright test tests --browser=firefox --retries=3"
   },
   "browserslist": "last 1 Chrome version",
   "dependencies": {
+    "hls.js": "^0.14.17",
+    "hlsjs-ipfs-loader": "^0.3.0",
     "ipfs": "^0.58.0"
   },
   "devDependencies": {
diff --git a/examples/browser-video-streaming/src/index.js b/examples/browser-video-streaming/src/index.js
@@ -1,9 +1,9 @@
 'use strict'
 
 import Ipfs from 'ipfs'
+import Hls from 'hls.js'
+import HlsjsIpfsLoader from 'hlsjs-ipfs-loader'
 
-/* global Hls Ipfs HlsjsIpfsLoader */
-/* eslint-env browser */
 document.addEventListener('DOMContentLoaded', async () => {
   const testHash = 'QmdpAidwAsBGptFB3b6A9Pyi5coEbgjHrL3K2Qrsutmj9K'
   const repoPath = 'ipfs-' + Math.random()
@@ -13,11 +13,17 @@ document.addEventListener('DOMContentLoaded', async () => {
   Hls.DefaultConfig.debug = false
   if (Hls.isSupported()) {
     const video = document.getElementById('video')
+    const status = document.getElementById('status')
     const hls = new Hls()
     hls.config.ipfs = node
     hls.config.ipfsHash = testHash
     hls.loadSource('master.m3u8')
     hls.attachMedia(video)
-    hls.on(Hls.Events.MANIFEST_PARSED, () => video.play())
+    hls.on(Hls.Events.MANIFEST_PARSED, () => {
+      const node = document.createTextNode("Video ready...");
+      status.appendChild(node);
+
+      video.play()
+    })
   }
 })
diff --git a/examples/browser-video-streaming/tests/test.js b/examples/browser-video-streaming/tests/test.js
@@ -12,13 +12,13 @@ const play = test.extend({
 
 play.describe('browser videostream:', () => {
   // DOM
-  const video = "#video"
+  const status = "#status"
 
   play.beforeEach(async ({servers, page}) => {
     await page.goto(`http://localhost:${servers[0].port}/`);
   })
 
   play('should properly initialized a IPFS node and stream a video', async ({ page }) => {
-    await page.waitForFunction((el) => document.querySelector(el).readyState >= 2, video);
+    await page.waitForSelector(`${status}:has-text('Video ready')`)
   });
 });
