Add UI test for custom composite call control options (#2324)

Author: JamesBurnside

packages/react-composites/tests/app/call/BaseApp.tsx

@@ -46,7 +46,9 @@ export function BaseApp(props: { queryArgs: QueryArgs; callAdapter?: CallAdapter
                 queryArgs.injectParticipantMenuItems ? onFetchParticipantMenuItems : undefined
               }
               options={
-                queryArgs.injectCustomButtons
+                queryArgs.customCallCompositeOptions
+                  ? queryArgs.customCallCompositeOptions
+                  : queryArgs.injectCustomButtons
                   ? {
                       callControls: {
                         onFetchCustomButtonProps,

packages/react-composites/tests/app/call/QueryArgs.ts

@@ -2,6 +2,7 @@
 // Licensed under the MIT license.
 
 import { Role } from '@internal/react-components';
+import { CallCompositeOptions } from '../../../src';
 import { MockCallAdapterState } from '../../common';
 
 export interface QueryArgs {
@@ -12,6 +13,7 @@ export interface QueryArgs {
   injectParticipantMenuItems: boolean;
   injectCustomButtons: boolean;
   role?: Role;
+  customCallCompositeOptions?: CallCompositeOptions;
 
   // These are only set for live tests.
   // TODO: Separate the args out better.
@@ -34,6 +36,9 @@ export function parseQueryArgs(): QueryArgs {
     groupId: params.groupId ?? '',
     token: params.token ?? '',
     displayName: params.displayName ?? '',
-    role: (params.role as Role) ?? undefined
+    role: (params.role as Role) ?? undefined,
+    customCallCompositeOptions: params.customCallCompositeOptions
+      ? JSON.parse(params.customCallCompositeOptions)
+      : undefined
   };
 }

packages/react-composites/tests/app/callwithchat/BaseApp.tsx

@@ -23,6 +23,7 @@ export function BaseApp(props: { queryArgs: CommonQueryArgs; adapter?: CallWithC
           adapter={adapter}
           formFactor={isMobile() ? 'mobile' : 'desktop'}
           joinInvitationURL={window.location.href}
+          options={props.queryArgs.customCompositeOptions}
         />
       </_IdentifierProvider>
     </div>

packages/react-composites/tests/app/callwithchat/QueryArgs.ts

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
+import type { CallWithChatCompositeOptions } from '../../../src';
 import type { FakeChatAdapterArgs, MockCallAdapterState } from '../../common';
 
 /**
@@ -28,20 +29,20 @@ export interface HermeticQueryArgs {
 }
 
 /**
- * Common arguments (e.g. to control composite behavior).
- *
- * Unknown for now.
+ * Common arguments (e.g. to control composite behavior) for both live and hermetic tests.
  *
  * @private
  */
-export type CommonQueryArgs = unknown;
+export interface CommonQueryArgs {
+  customCompositeOptions?: CallWithChatCompositeOptions;
+}
 
 /**
  * All query arguments accepted by the test app.
  *
  * @private
  */
-export type QueryArgs = Partial<LiveQueryArgs> & Partial<HermeticQueryArgs> & CommonQueryArgs;
+export type QueryArgs = Partial<LiveQueryArgs> & Partial<HermeticQueryArgs> & Partial<CommonQueryArgs>;
 
 export function parseQueryArgs(): QueryArgs {
   const urlSearchParams = new URLSearchParams(window.location.search);
@@ -55,6 +56,8 @@ export function parseQueryArgs(): QueryArgs {
     userId: params.userId ?? '',
 
     fakeChatAdapterArgs: params.fakeChatAdapterArgs ? JSON.parse(params.fakeChatAdapterArgs) : undefined,
-    mockCallAdapterState: params.mockCallAdapterState ? JSON.parse(params.mockCallAdapterState) : undefined
+    mockCallAdapterState: params.mockCallAdapterState ? JSON.parse(params.mockCallAdapterState) : undefined,
+
+    customCompositeOptions: params.customCompositeOptions ? JSON.parse(params.customCompositeOptions) : undefined
   };
 }

packages/react-composites/tests/browser/call/hermetic/CallControls.test.ts

@@ -5,6 +5,7 @@ import { buildUrlWithMockAdapter, defaultMockCallAdapterState, defaultMockRemote
 import { expect } from '@playwright/test';
 import { dataUiId, stableScreenshot, waitForSelector } from '../../common/utils';
 import { IDS } from '../../common/constants';
+import type { CallCompositeOptions } from '../../../../src';
 
 test.describe('CallControls tests', async () => {
   test('CallControls when number of mics drops to zero', async ({ page, serverUrl }) => {
@@ -31,3 +32,29 @@ test.describe('Call composite custom button injection tests', () => {
     expect(await stableScreenshot(page)).toMatchSnapshot(`custom-buttons.png`);
   });
 });
+
+test.describe('Call composite custom call control options tests', () => {
+  test('Control bar buttons correctly show as compact with camera disabled and end call button hidden', async ({
+    page,
+    serverUrl
+  }) => {
+    const initialState = defaultMockCallAdapterState([defaultMockRemoteParticipant('Paul Bridges')]);
+    const testOptions: CallCompositeOptions = {
+      callControls: {
+        displayType: 'compact',
+        cameraButton: {
+          disabled: true
+        },
+        microphoneButton: true,
+        endCallButton: false,
+        devicesButton: undefined
+      }
+    };
+    await page.goto(
+      buildUrlWithMockAdapter(serverUrl, initialState, {
+        customCallCompositeOptions: JSON.stringify(testOptions)
+      })
+    );
+    expect(await stableScreenshot(page)).toMatchSnapshot(`user-set-control-bar-button-options.png`);
+  });
+});

packages/react-composites/tests/browser/callwithchat/hermetic/CallControls.test.ts

@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { loadCallPage, test } from './fixture';
+import { expect } from '@playwright/test';
+import { stableScreenshot } from '../../common/utils';
+import type { CallWithChatCompositeOptions } from '../../../../src';
+import { defaultMockCallAdapterState, defaultMockRemoteParticipant } from '../../call/hermetic/fixture';
+
+test.describe('Custom call control options tests', () => {
+  test('Control bar buttons correctly show as compact with camera disabled and end call button hidden', async ({
+    page,
+    serverUrl
+  }) => {
+    const paul = defaultMockRemoteParticipant('Paul Bridges');
+    const testOptions: CallWithChatCompositeOptions = {
+      callControls: {
+        displayType: 'compact',
+        cameraButton: {
+          disabled: true
+        },
+        endCallButton: false,
+        microphoneButton: true,
+        moreButton: undefined
+      }
+    };
+    const callState = defaultMockCallAdapterState([paul]);
+    await loadCallPage(page, serverUrl, callState, {
+      customCompositeOptions: JSON.stringify(testOptions)
+    });
+
+    expect(await stableScreenshot(page)).toMatchSnapshot(`user-set-control-bar-button-options.png`);
+  });
+});

packages/react-composites/tests/browser/callwithchat/hermetic/fixture.ts

@@ -71,9 +71,14 @@ export const test = base.extend<TestFixture>({
  *   - load the hermetic CallWithChat test app on the page.
  *   - wait for the page to have completely loaded.
  */
-export async function loadCallPage(page: Page, serverUrl: string, callState: MockCallAdapterState): Promise<void> {
+export async function loadCallPage(
+  page: Page,
+  serverUrl: string,
+  callState: MockCallAdapterState,
+  qArgs?: { [key: string]: string } // TODO: more strongly type this with a type like: `Partial<Record<keyof QueryArgs, string>>`
+): Promise<void> {
   const chatArgs = fakeChatAdapterArgsForCallAdapterState(callState);
-  await page.goto(buildUrlForApp(serverUrl, callState, chatArgs));
+  await page.goto(buildUrlForApp(serverUrl, callState, chatArgs, qArgs));
   await waitForPageFontsLoaded(page);
   await waitForSelector(page, dataUiId('call-composite-hangup-button'));
 }