Cleanup, updated test names, updated screenshots

sample-apps/react/egress-composite/src/components/UIDispatcher.tsx

@@ -16,7 +16,6 @@ export const UIDispatcher = () => {
   const hasScreenShare = useHasOngoingScreenShare();
 
   const DefaultView = layoutMap[layout]?.[0] ?? Spotlight;
-
   const ScreenShareView = layoutMap[screenshare_layout]?.[1] ?? Spotlight;
 
   return hasScreenShare ? <ScreenShareView /> : <DefaultView />;

sample-apps/react/egress-composite/tests/baseTests.ts

@@ -0,0 +1,43 @@
+import { test as base } from '@playwright/test';
+import { customAlphabet } from 'nanoid';
+import axios from 'axios';
+
+const nanoid = customAlphabet('1234567890abcdefghijklmnop', 10);
+
+export const testWithCallId = base.extend<{ callId: string }>({
+  callId: async ({ page }, use) => {
+    const callId = nanoid();
+
+    await page.goto('/', { waitUntil: 'domcontentloaded' });
+
+    // run tests
+    await use(callId);
+  },
+});
+
+// TODO: find better name
+export const testWithBuddy = base.extend<{ callId: string }>({
+  callId: async ({ page }, use) => {
+    const callId = nanoid();
+
+    // TODO: have proper abstractions with typing like StreamVideoBuddy.join(...) -> id and StreamVideoBuddy.teardown(id)
+    await axios.post('http://localhost:4567/stream-video-buddy?async=true', {
+      duration: 60,
+      'call-id': callId,
+      'user-count': 4,
+    });
+
+    // TODO: have proper ?asyncJoin=true
+    // which waits only for successfull call creation
+    // but asyncs user joins
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    await page.goto('/', { waitUntil: 'domcontentloaded' });
+
+    // run tests
+    await use(callId);
+
+    // teardown
+    // TODO: await StreamVideoBuddy.teardown()...
+  },
+});

sample-apps/react/egress-composite/tests/layouts.spec.ts

@@ -1,111 +1,66 @@
-import { test as base, expect } from '@playwright/test';
-import { customAlphabet } from 'nanoid';
-import axios from 'axios';
-import { StreamVideoParticipant } from '@stream-io/video-react-sdk';
-import { ConfigurationValue } from '../src/ConfigurationContext';
+import { expect } from '@playwright/test';
 
-const nanoid = customAlphabet('1234567890abcdefghijklmnop', 10);
+import { testWithCallId as test } from './baseTests';
+import {
+  generateScriptTagContent,
+  participants,
+  participantsWithScreenShare,
+} from './mocks';
 
-// TODO: move to some shared folder
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const buddyTest = base.extend<{ callId: string }>({
-  callId: async ({ page }, use) => {
-    const callId = nanoid();
-
-    // TODO: have proper abstractions with typing like StreamVideoBuddy.join(...) -> id and StreamVideoBuddy.teardown(id)
-    await axios.post('http://localhost:4567/stream-video-buddy?async=true', {
-      duration: 60,
-      'call-id': callId,
-      'user-count': 4,
-    });
-
-    // TODO: have proper ?asyncJoin=true
-    // which waits only for successfull call creation
-    // but asyncs user joins
-    await new Promise((resolve) => setTimeout(resolve, 2000));
-
-    await page.goto('/', { waitUntil: 'domcontentloaded' });
-
-    // run tests
-    await use(callId);
-
-    // teardown
-    // TODO: await StreamVideoBuddy.teardown()...
-  },
-});
-
-const test = base.extend<{ callId: string }>({
-  callId: async ({ page }, use) => {
-    const callId = nanoid();
-
-    await page.goto('/', { waitUntil: 'domcontentloaded' });
-
-    // run tests
-    await use(callId);
-  },
-});
-
-const participants: Partial<StreamVideoParticipant>[] = [
-  {
-    userId: 'john',
-    sessionId: '1',
-    publishedTracks: [],
-    isSpeaking: false,
-  },
-  {
-    userId: 'jane',
-    name: 'Jane Strong',
-    sessionId: '2',
-    publishedTracks: [],
-    isSpeaking: false,
-  },
-  {
-    userId: 'mark',
-    sessionId: '3',
-    publishedTracks: [],
-    isSpeaking: false,
-  },
-  {
-    userId: 'martin',
-    sessionId: '4',
-    publishedTracks: [],
-    isSpeaking: false,
-  },
-  {
-    userId: 'anne',
-    sessionId: '5',
-    publishedTracks: [],
-    isSpeaking: false,
-  },
-];
+const DEFAULT_LAYOUT = 'spotlight';
 
 test.describe('Layouts', () => {
-  [
-    { name: 'grid', participantCountPerWindow: 5 },
-    { name: 'single_participant', participantCountPerWindow: 1 },
-    { name: 'spotlight', participantCountPerWindow: 5 },
-  ].forEach((layout) => {
-    test(`${layout.name}`, async ({ page, callId }) => {
+  (
+    [
+      { name: undefined, participantCountPerWindow: 5 }, // default
+      { name: 'grid', participantCountPerWindow: 5 },
+      { name: 'single_participant', participantCountPerWindow: 1 },
+      { name: 'spotlight', participantCountPerWindow: 5 },
+    ] as const
+  ).forEach((layout) => {
+    test(`Should render layout - ${layout.name ?? 'default'}`, async ({
+      page,
+      callId,
+    }) => {
       await page.addScriptTag({
-        content: `
-        window.setupLayout({
-          call_id: "${callId}",
-          layout: "${layout.name}",
-          test_environment: ${JSON.stringify({
+        content: generateScriptTagContent({
+          call_id: callId,
+          layout: layout.name,
+          test_environment: {
             participants,
-          } satisfies ConfigurationValue['test_environment'])}
-        });
-      `,
+          },
+        }),
       });
 
       await expect(page.getByTestId('participant-view')).toHaveCount(
         layout.participantCountPerWindow,
       );
-      await expect(page.getByTestId(layout.name)).toBeVisible();
+
+      await expect(
+        page.getByTestId(layout.name ?? DEFAULT_LAYOUT),
+      ).toBeVisible();
+
       await expect(page).toHaveScreenshot({
         mask: [page.getByTestId('participant-view')],
         maskColor: 'lime',
       });
     });
   });
+
+  test('Should render default screenshare layout', async ({ page, callId }) => {
+    await page.addScriptTag({
+      content: generateScriptTagContent({
+        call_id: callId,
+        test_environment: {
+          participants: participantsWithScreenShare,
+        },
+      }),
+    });
+
+    await expect(page.getByTestId('participant-view')).toHaveCount(6);
+
+    await expect(page.getByTestId(DEFAULT_LAYOUT)).toBeVisible();
+
+    await expect(page).toHaveScreenshot();
+  });
 });

sample-apps/react/egress-composite/tests/mocks.ts

@@ -0,0 +1,27 @@
+import { StreamVideoParticipant } from '@stream-io/video-react-sdk';
+import { ConfigurationValue } from '../src/ConfigurationContext';
+
+const users = ['john', 'jane', 'mark', 'martin', 'anne'];
+
+export const generateScriptTagContent = (data: Partial<ConfigurationValue>) => {
+  return `window.setupLayout(${JSON.stringify(data)});`;
+};
+
+export const participants = users.map<Partial<StreamVideoParticipant>>(
+  (user, index) => ({
+    userId: user,
+    sessionId: `${user}_${index}`,
+    publishedTracks: [],
+    isSpeaking: false,
+  }),
+);
+
+export const participantsWithScreenShare = users.map<
+  Partial<StreamVideoParticipant>
+>((user, index) => ({
+  userId: user,
+  sessionId: `${user}_${index}`,
+  // FIXME: figure out why SfuModels cannot be imported
+  publishedTracks: !index ? [] : [3],
+  isSpeaking: false,
+}));