stabilize snapshots for VideoGallery component tests

Author: mgamis-msft

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

@@ -29,6 +29,7 @@ test.describe('VGL - VideoGallery tests', () => {
         />
       </Stack>
     );
+    await component.waitFor({ state: 'attached' });
     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,6 +41,7 @@ test.describe('VGL - VideoGallery tests', () => {
         />
       </Stack>
     );
+    await component.waitFor({ state: 'attached' });
     await expect(component).toHaveScreenshot('VGL-1-2-videogallery-with-audio-only-after-dominant-speakers.png');
   });
 
@@ -67,6 +69,7 @@ test.describe('VGL - VideoGallery tests', () => {
         />
       </Stack>
     );
+    await component.waitFor({ state: 'attached' });
     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,6 +81,7 @@ test.describe('VGL - VideoGallery tests', () => {
         />
       </Stack>
     );
+    await component.waitFor({ state: 'attached' });
     await expect(component).toHaveScreenshot('VGL-2-2-videogallery--with-some-video-after-dominant-speakers.png');
   });
 
@@ -100,6 +104,7 @@ test.describe('VGL - VideoGallery tests', () => {
         />
       </Stack>
     );
+    await component.waitFor({ state: 'attached' });
     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,6 +116,7 @@ test.describe('VGL - VideoGallery tests', () => {
         />
       </Stack>
     );
+    await component.waitFor({ state: 'attached' });
     await expect(component).toHaveScreenshot('VGL-3-2-videogallery-with-screen-share-after-dominant-speakers.png');
   });
 
@@ -133,6 +139,7 @@ test.describe('VGL - VideoGallery tests', () => {
         />
       </Stack>
     );
+    await component.waitFor({ state: 'attached' });
     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 component.waitFor({ state: 'attached' });
     await expect(component).toHaveScreenshot('VGL-4-2-videogallery-after-spotlight.png');
   });
 });