fix: change CI to install browsers for tests

oliveriosousa · oliveriosousa · commit 810ee58daf16 · 2021-08-17T19:21:18.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
@@ -9,14 +9,18 @@
     <link rel="icon" href="favicon.ico" />
 
     <script
-      defer
+      crossorigin
       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
+      crossorigin
+      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/src/index.js b/examples/browser-video-streaming/src/index.js
@@ -2,7 +2,7 @@
 
 import Ipfs from 'ipfs'
 
-/* global Hls Ipfs HlsjsIpfsLoader */
+/* global Hls HlsjsIpfsLoader */
 /* eslint-env browser */
 document.addEventListener('DOMContentLoaded', async () => {
   const testHash = 'QmdpAidwAsBGptFB3b6A9Pyi5coEbgjHrL3K2Qrsutmj9K'
@@ -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')`)
   });
 });
