Fix the stats test

Author: dubeyShivank

packages/millicast-sdk/tests/e2e/FunctionalPublish.steps.js

@@ -24,6 +24,18 @@ const defaultOptions = {
 let browser = null
 const sleep = ms => new Promise(function (resolve) { setTimeout(resolve, ms) })
 
+const waitForCondition = async (page, expression, timeout = 15000) => {
+  const start = Date.now()
+  while (Date.now() - start < timeout) {
+    const result = await page.evaluate(expression)
+    if (result) {
+      return result
+    }
+    await new Promise(resolve => setTimeout(resolve, 500))
+  }
+  return await page.evaluate(expression)
+}
+
 afterEach(async () => {
   if (browser) {
     const pages = await browser.pages()
@@ -76,13 +88,11 @@ defineFeature(feature, test => {
         return startViewer(streamName, accountId)
       }, { streamName, accountId: process.env.ACCOUNT_ID })
 
-      await sleep(3000)
       isActive = await broadcastPage.evaluate('window.publish.isActive()')
       videoFrame1 = await viewerPage.evaluate('getVideoPixelSums()')
-      await sleep(500)
+      await sleep(1000)
       videoFrame2 = await viewerPage.evaluate('getVideoPixelSums()')
     })
-
     then('broadcast is active and Viewer receive video data', async () => {
       expect(isActive).toBeTruthy()
       expect(videoFrame1).not.toBe(0)
@@ -181,26 +191,47 @@ defineFeature(feature, test => {
   test('Simulcast layer generation', ({ given, when, then }) => {
     let broadcastPage
     given(/^a broadcaster with simulcast enabled and codec (.*)$/, async (codec) => {
-      if (!browser) browser = await puppeteer.launch({ headless: true, executablePath: puppeteer.executablePath(), args: ['--no-sandbox', '--use-fake-ui-for-media-stream', '--use-fake-device-for-media-stream', '--allow-file-access-from-files'] })
+      if (!browser) {
+        browser = await puppeteer.launch({
+          headless: true,
+          executablePath: puppeteer.executablePath(),
+          args: [
+            '--no-sandbox',
+            '--use-fake-ui-for-media-stream',
+            '--use-fake-device-for-media-stream',
+            '--allow-file-access-from-files'
+          ]
+        })
+      }
       broadcastPage = await browser.newPage()
       await broadcastPage.goto(pageLocation)
       await broadcastPage.evaluate(({ token, streamName, codec }) => {
-        return startPublisher(token, streamName, { codec, simulcast: true })
+        return startPublisher(token, streamName, {
+          codec,
+          simulcast: true,
+          metadata: true
+        })
       }, { token: process.env.PUBLISH_TOKEN, streamName, codec })
     })
 
     when('the stream is active', async () => {
-      await sleep(6000)
+      await waitForCondition(broadcastPage, 'window.publish.isActive()')
     })
 
     then('the publisher reports multiple active simulcast layers', async () => {
-      const layers = await broadcastPage.evaluate(async () => {
-        const stats = await window.publish.getRTCPeerConnection().getStats()
-        let count = 0
-        stats.forEach(r => { if (r.type === 'outbound-rtp' && r.kind === 'video') count++ })
-        return count
-      })
-      expect(layers).toBeGreaterThan(1)
+      const layersFound = await waitForCondition(broadcastPage, `
+        (async () => {
+          const pc = window.publish?.getRTCPeerConnection();
+          if (!pc) return false;          
+          const stats = await pc.getStats();
+          let count = 0;
+          stats.forEach(r => { 
+            if (r.type === 'outbound-rtp' && r.kind === 'video') count++; 
+          });
+          return count > 1 ? count : false;
+        })()
+      `, 20000)
+      expect(layersFound).toBeGreaterThan(1)
     })
   })
 })

packages/millicast-sdk/tests/e2e/PuppeteerJest.html

@@ -14,7 +14,7 @@
          const tokenGenerator=() => millicast.Director.getPublisher(publishToken, streamName);
          const publish=new millicast.Publish(undefined, tokenGenerator);
 
-         publish.on('stats', () => {window.pubStatsCount++;});
+         publish.webRTCPeer.on('stats', () => {window.pubStatsCount++;});
 
          const mediaStream=await navigator.mediaDevices.getUserMedia({audio: true, video: true});
          document.getElementById('my-video').srcObject=mediaStream;
@@ -27,32 +27,60 @@
       }
 
       const startViewer=(streamName, accountId) => {
-         return new Promise(resolve => {
-            const millicast=window.millicast;
-            const video=document.getElementById('my-video');
-            const tokenGenerator=() => millicast.Director.getSubscriber({
-               streamName: streamName,
-               streamAccountId: accountId
-            });
-            const view=new millicast.View(undefined, tokenGenerator);
+            return new Promise((resolve, reject) => {
+               const millicast=window.millicast;
+               const video=document.getElementById('my-video');
+               const tokenGenerator=() => millicast.Director.getSubscriber(streamName, accountId);
 
-            view.on('stats', () => {window.viewStatsCount++;});
-            view.on('metadata', (data) => {window.lastReceivedMetadata=data;});
+               const view=new millicast.View(streamName, tokenGenerator);
+               window.view=view;
 
-            video.addEventListener('timeupdate', () => {
-               if (video.currentTime>1) resolve();
-            });
-            view.on('track', (event) => {video.srcObject=event.streams[0];});
-            view.connect({
-               metadata: true, metadata: true,
-               peerConfig: {
-                  autoInitStats: true,
-                  statsIntervalMs: 1000,
-               },
+               view.webRTCPeer.on('stats', () => {
+                  window.viewStatsCount++;
+               });
+
+               view.on('metadata', (data) => {
+                  window.lastReceivedMetadata=data;
+               });
+
+               view.on("broadcastEvent", async (event) => {
+                  const {name, data}=event;
+                  if (name==="active") {
+                     const tracksMapping=data.tracks.map(track => ({
+                        ...track,
+                        mediaId: track.media==="video"? "0":"1"
+                     }));
+                     try {
+                        await view.project(data.sourceId, tracksMapping);
+                     } catch (e) {
+                        console.error("Project failed", e);
+                     }
+                  }
+               });
+
+               view.on("track", (event) => {
+                  if (event.track.kind==="video") {
+                     video.srcObject=event.streams[0];
+
+                     video.onplaying=() => {
+                        console.log("Video is playing, resolving promise");
+                        resolve();
+                     };
+                  }
+               });
+
+               // Set a timeout so the test doesn't hang forever if projection fails
+               setTimeout(() => reject(new Error("Viewer connection timeout")), 15000);
+
+               view.connect({
+                  metadata: true,
+                  peerConfig: {
+                     autoInitStats: true,
+                     statsIntervalMs: 1000
+                  }
+               }).catch(reject);
             });
-            window.view=view;
-         })
-      }
+         }
 
       const getVideoPixelSums=() => {
          const canvas=document.createElement('canvas');