stabilize snapshots for VideoGallery component tests

Author: mgamis-msft

packages/react-components/tests/browser/VideoGallery.spec.tsx

@@ -12,7 +12,7 @@ test.describe('VGL - VideoGallery tests', () => {
     await page.evaluate(() => document.fonts.ready);
   });
 
-  test('VideoGallery with only audio participants and dominant speakers', async ({ mount }) => {
+  test('VideoGallery with only audio participants and dominant speakers', async ({ page, mount }) => {
     const localParticipant: VideoGalleryLocalParticipant = { userId: 'test' };
     const remoteParticipants: VideoGalleryRemoteParticipant[] = Array.from({ length: 10 }, (_, i) => i + 1).map(
       (i) => ({
@@ -29,6 +29,7 @@ test.describe('VGL - VideoGallery tests', () => {
         />
       </Stack>
     );
+    await page.waitForSelector('[key="next-nav-button"]', { timeout: 1000 });
     await expect(component).toHaveScreenshot('VGL-1-1-videogallery-with-audio-only-before-dominant-speakers.png');
     await component.update(
       <Stack styles={{ root: { width: '90vw', height: '90vh' } }}>
@@ -40,10 +41,11 @@ test.describe('VGL - VideoGallery tests', () => {
         />
       </Stack>
     );
+    await page.waitForSelector('[key="next-nav-button"]', { timeout: 1000 });
     await expect(component).toHaveScreenshot('VGL-1-2-videogallery-with-audio-only-after-dominant-speakers.png');
   });
 
-  test('VideoGallery with video participants and dominant speakers', async ({ mount }) => {
+  test('VideoGallery with video participants and dominant speakers', async ({ page, mount }) => {
     const localParticipant: VideoGalleryLocalParticipant = { userId: 'test' };
     const remoteParticipants: VideoGalleryRemoteParticipant[] = Array.from({ length: 10 }, (_, i) => i + 1).map(
       (i) => ({
@@ -67,6 +69,7 @@ test.describe('VGL - VideoGallery tests', () => {
         />
       </Stack>
     );
+    await page.waitForSelector('[key="next-nav-button"]', { timeout: 1000 });
     await expect(component).toHaveScreenshot('VGL-2-1-videogallery-with-some-video-before-dominant-speakers.png');
     await component.update(
       <Stack styles={{ root: { width: '90vw', height: '90vh' } }}>
@@ -78,10 +81,11 @@ test.describe('VGL - VideoGallery tests', () => {
         />
       </Stack>
     );
+    await page.waitForSelector('[key="next-nav-button"]', { timeout: 1000 });
     await expect(component).toHaveScreenshot('VGL-2-2-videogallery--with-some-video-after-dominant-speakers.png');
   });
 
-  test('VideoGallery with screen share on and dominant speakers', async ({ mount }) => {
+  test('VideoGallery with screen share on and dominant speakers', async ({ page, mount }) => {
     const localParticipant: VideoGalleryLocalParticipant = { userId: 'test' };
     const remoteParticipants: VideoGalleryRemoteParticipant[] = Array.from({ length: 10 }, (_, i) => i + 1).map(
       (i) => ({
@@ -100,6 +104,7 @@ test.describe('VGL - VideoGallery tests', () => {
         />
       </Stack>
     );
+    await page.waitForSelector('[key="next-nav-button"]', { timeout: 1000 });
     await expect(component).toHaveScreenshot('VGL-3-1-videogallery-with-screen-share-before-dominant-speakers.png');
     await component.update(
       <Stack styles={{ root: { width: '90vw', height: '90vw' } }}>
@@ -111,10 +116,11 @@ test.describe('VGL - VideoGallery tests', () => {
         />
       </Stack>
     );
+    await page.waitForSelector('[key="next-nav-button"]', { timeout: 1000 });
     await expect(component).toHaveScreenshot('VGL-3-2-videogallery-with-screen-share-after-dominant-speakers.png');
   });
 
-  test('VideoGallery spotlight participant test', async ({ mount }) => {
+  test('VideoGallery spotlight participant test', async ({ page, mount }) => {
     const localParticipant: VideoGalleryLocalParticipant = { userId: 'test' };
     const remoteParticipants: VideoGalleryRemoteParticipant[] = Array.from({ length: 10 }, (_, i) => i + 1).map(
       (i) => ({ userId: `${i}`, displayName: `${i}` })
@@ -133,6 +139,7 @@ test.describe('VGL - VideoGallery tests', () => {
         />
       </Stack>
     );
+    await page.waitForSelector('[key="next-nav-button"]', { timeout: 1000 });
     await expect(component).toHaveScreenshot('VGL-4-1-videogallery-before-spotlight.png');
     remoteParticipants[7].spotlight = { spotlightedOrderPosition: 1 };
     component.update(
@@ -145,6 +152,7 @@ test.describe('VGL - VideoGallery tests', () => {
         />
       </Stack>
     );
+    await page.waitForSelector('[key="next-nav-button"]', { timeout: 1000 });
     await expect(component).toHaveScreenshot('VGL-4-2-videogallery-after-spotlight.png');
   });
 });