HorizontalGallery UI tests using MockCallingAdapter

change/@internal-react-components-c719cfda-ce9d-4a95-87a3-47326ceb56d2.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Identifiers added for HorizontalGallery left and right navigation buttons.",
+  "packageName": "@internal/react-components",
+  "email": "miguelgamis@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/communication-react/review/communication-react.api.md

@@ -1291,6 +1291,8 @@ export interface _IdentifierProviderProps {
 
 // @internal
 export interface _Identifiers {
+    horizontalGalleryLeftNavButton: string;
+    horizontalGalleryRightNavButton: string;
     messageContent: string;
     messageTimestamp: string;
     participantButtonPeopleMenuItem: string;

packages/communication-react/stable-review/communication-react.api.md

@@ -1251,6 +1251,8 @@ export interface _IdentifierProviderProps {
 
 // @internal
 export interface _Identifiers {
+    horizontalGalleryLeftNavButton: string;
+    horizontalGalleryRightNavButton: string;
     messageContent: string;
     messageTimestamp: string;
     participantButtonPeopleMenuItem: string;

packages/react-components/review/react-components.api.md

@@ -427,6 +427,8 @@ export interface _IdentifierProviderProps {
 
 // @internal
 export interface _Identifiers {
+    horizontalGalleryLeftNavButton: string;
+    horizontalGalleryRightNavButton: string;
     messageContent: string;
     messageTimestamp: string;
     participantButtonPeopleMenuItem: string;

packages/react-components/src/components/HorizontalGallery.tsx

@@ -6,6 +6,7 @@ import React, { useMemo, useState } from 'react';
 import { useTheme } from '../theming';
 import { BaseCustomStyles } from '../types';
 import { rootStyle, childrenContainerStyle, leftRightButtonStyles } from './styles/HorizontalGallery.styles';
+import { useIdentifiers } from '../identifiers';
 
 /**
  * {@link HorizontalGallery} default children per page
@@ -49,6 +50,8 @@ export interface HorizontalGalleryProps {
 export const HorizontalGallery = (props: HorizontalGalleryProps): JSX.Element => {
   const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles } = props;
 
+  const ids = useIdentifiers();
+
   const [page, setPage] = useState(0);
 
   const numberOfChildren = React.Children.count(children);
@@ -80,6 +83,7 @@ export const HorizontalGallery = (props: HorizontalGalleryProps): JSX.Element =>
           styles={styles?.previousButton}
           onClick={() => setPage(Math.max(0, Math.min(lastPage, page - 1)))}
           disabled={disablePreviousButton}
+          identifier={ids.horizontalGalleryLeftNavButton}
         />
       )}
       <Stack horizontal className={mergeStyles(childrenContainerStyle, { '> *': props.styles?.children })}>
@@ -92,6 +96,7 @@ export const HorizontalGallery = (props: HorizontalGalleryProps): JSX.Element =>
           styles={styles?.nextButton}
           onClick={() => setPage(Math.min(lastPage, page + 1))}
           disabled={disableNextButton}
+          identifier={ids.horizontalGalleryRightNavButton}
         />
       )}
     </Stack>
@@ -103,13 +108,15 @@ const HorizontalGalleryNavigationButton = (props: {
   styles: IStyle;
   onClick?: () => void;
   disabled?: boolean;
+  identifier?: string;
 }): JSX.Element => {
   const theme = useTheme();
   return (
     <DefaultButton
       className={mergeStyles(leftRightButtonStyles(theme), props.styles)}
       onClick={props.onClick}
       disabled={props.disabled}
+      data-ui-id={props.identifier}
     >
       {props.icon}
     </DefaultButton>

packages/react-components/src/identifiers/IdentifierProvider.tsx

@@ -39,6 +39,10 @@ export interface _Identifiers {
   videoGallery: string;
   /** `data-ui-id` value for `VideoTile` Component */
   videoTile: string;
+  /** `data-ui-id` value for `HorizontalGallery` Component's left navigation button */
+  horizontalGalleryLeftNavButton: string;
+  /** `data-ui-id` value for `HorizontalGallery` Component's right navigation button */
+  horizontalGalleryRightNavButton: string;
 }
 
 const defaultIdentifiers: _Identifiers = {
@@ -52,7 +56,9 @@ const defaultIdentifiers: _Identifiers = {
   messageTimestamp: 'message-timestamp',
   typingIndicator: 'typing-indicator',
   videoGallery: 'video-gallery',
-  videoTile: 'video-tile'
+  videoTile: 'video-tile',
+  horizontalGalleryLeftNavButton: 'horizontal-gallery-left-nav-button',
+  horizontalGalleryRightNavButton: 'horizontal-gallery-right-nav-button'
 };
 
 /**

packages/react-components/stable-review/react-components.api.md

@@ -427,6 +427,8 @@ export interface _IdentifierProviderProps {
 
 // @internal
 export interface _Identifiers {
+    horizontalGalleryLeftNavButton: string;
+    horizontalGalleryRightNavButton: string;
     messageContent: string;
     messageTimestamp: string;
     participantButtonPeopleMenuItem: string;

packages/react-composites/tests/browser/call/HorizontalGallery.test.ts

@@ -0,0 +1,95 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { test } from './fixture';
+import { expect } from '@playwright/test';
+import { buildUrlWithMockAdapter } from './utils';
+import { dataUiId, pageClick, clickOutsideOfPage, waitForPageFontsLoaded, waitForSelector } from '../common/utils';
+import { IDS } from '../common/constants';
+
+test.describe('HorizontalGallery tests', async () => {
+  test('HorizontalGallery should have 1 audio participant', async ({ pages, serverUrl }) => {
+    const page = pages[0];
+    const testRemoteParticipants = [
+      {
+        displayName: 'Paul Bridges',
+        isSpeaking: true,
+        isVideoStreamAvailable: true
+      },
+      {
+        displayName: 'Eryka Klein'
+      },
+      {
+        displayName: 'Fiona Harper',
+        isVideoStreamAvailable: true
+      }
+    ];
+    await page.goto(
+      buildUrlWithMockAdapter(serverUrl, {
+        remoteParticipants: testRemoteParticipants
+      })
+    );
+    // Click off page to turn away initial aria label
+    await clickOutsideOfPage(page);
+    await waitForSelector(page, dataUiId(IDS.videoGallery));
+    await waitForPageFontsLoaded(page);
+    expect(await page.screenshot()).toMatchSnapshot('horizontal-gallery-with-1-audio-participant.png');
+  });
+
+  test('HorizontalGallery should have multiple audio participants spanning multiple pages. Navigation buttons should work.', async ({
+    pages,
+    serverUrl
+  }) => {
+    const page = pages[0];
+    const testRemoteParticipants = [
+      {
+        displayName: 'Paul Bridges',
+        isSpeaking: true,
+        isVideoStreamAvailable: true
+      },
+      {
+        displayName: 'Eryka Klein'
+      },
+      {
+        displayName: 'Fiona Harper',
+        isVideoStreamAvailable: true
+      },
+      {
+        displayName: 'Pardeep Singh'
+      },
+      {
+        displayName: 'Reina Takizawa',
+        isSpeaking: true
+      },
+      {
+        displayName: 'Vasily Podkolzin',
+        isMuted: true
+      },
+      {
+        displayName: 'Luciana Rodriguez'
+      },
+      {
+        displayName: 'Antonie van Leeuwenhoek'
+      },
+      {
+        displayName: 'Gerald Ho'
+      }
+    ];
+    await page.goto(
+      buildUrlWithMockAdapter(serverUrl, {
+        remoteParticipants: testRemoteParticipants
+      })
+    );
+    // Click off page to turn away initial aria label
+    await clickOutsideOfPage(page);
+    await waitForSelector(page, dataUiId(IDS.videoGallery));
+    await waitForPageFontsLoaded(page);
+    expect(await page.screenshot()).toMatchSnapshot('horizontal-gallery-with-many-audio-participants-on-page-1.png');
+    await waitForSelector(page, dataUiId(IDS.horizontalGalleryRightNavButton));
+    await pageClick(page, dataUiId(IDS.horizontalGalleryRightNavButton));
+    expect(await page.screenshot()).toMatchSnapshot('horizontal-gallery-with-many-audio-participants-on-page-2.png');
+    await waitForSelector(page, dataUiId(IDS.horizontalGalleryLeftNavButton));
+    await pageClick(page, dataUiId(IDS.horizontalGalleryLeftNavButton));
+    expect(await page.screenshot()).toMatchSnapshot('horizontal-gallery-with-many-audio-participants-on-page-1.png');
+  });
+});

packages/react-composites/tests/browser/call/TestCallingState.ts

@@ -0,0 +1,19 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+/**
+ * Calling state passed as as a query argument to set up MockCallingAdapter in playwright test
+ */
+export type TestCallingState = {
+  remoteParticipants?: TestRemoteParticipant[];
+};
+
+/**
+ * Remote participant state used in {@link TestCallingState}
+ */
+export type TestRemoteParticipant = {
+  displayName: string;
+  isMuted?: boolean;
+  isSpeaking?: boolean;
+  isVideoStreamAvailable?: boolean;
+};

packages/react-composites/tests/browser/call/app/index.tsx

@@ -20,19 +20,15 @@ import {
 import { IDS } from '../../common/constants';
 import { isMobile, verifyParamExists } from '../../common/testAppUtils';
 import memoizeOne from 'memoize-one';
-import { FontIcon, Icon, IContextualMenuItem, mergeStyles } from '@fluentui/react';
+import { Icon, IContextualMenuItem, mergeStyles } from '@fluentui/react';
 import { fromFlatCommunicationIdentifier } from '@internal/acs-ui-common';
+import { MockCallAdapter } from './mocks/MockCallAdapter';
+import { TestCallingState } from '../TestCallingState';
 
 const urlSearchParams = new URLSearchParams(window.location.search);
 const params = Object.fromEntries(urlSearchParams.entries());
 
-// Required params
-const displayName = verifyParamExists(params.displayName, 'displayName');
-const token = verifyParamExists(params.token, 'token');
-const groupId = verifyParamExists(params.groupId, 'groupId');
-const userId = verifyParamExists(params.userId, 'userId');
-
-// Optional params
+const mockCallState = JSON.parse(params.mockCallState) as TestCallingState;
 const useFrLocale = Boolean(params.useFrLocale);
 const showCallDescription = Boolean(params.showCallDescription);
 const injectParticipantMenuItems = Boolean(params.injectParticipantMenuItems);
@@ -43,13 +39,11 @@ function App(): JSX.Element {
 
   useEffect(() => {
     const initialize = async (): Promise<void> => {
-      const newAdapter = await createAzureCommunicationCallAdapter({
-        userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,
-        displayName,
-        credential: new AzureCommunicationTokenCredential(token),
-        locator: { groupId: groupId }
-      });
-      setCallAdapter(wrapAdapterForTests(newAdapter));
+      if (mockCallState) {
+        setCallAdapter(wrapAdapterForTests(new MockCallAdapter(mockCallState)));
+      } else {
+        setCallAdapter(wrapAdapterForTests(await createCallAdapterWithCredentials()));
+      }
     };
 
     initialize();
@@ -154,6 +148,22 @@ const unsetSpeakingWhileMicrophoneIsMuted = (state: CallAdapterState): CallAdapt
  */
 const memoizedUnsetSpeakingWhileMicrophoneIsMuted = memoizeOne(unsetSpeakingWhileMicrophoneIsMuted);
 
+// Function to create call adapter using createAzureCommunicationCallAdapter
+const createCallAdapterWithCredentials = async (): Promise<CallAdapter> => {
+  const displayName = verifyParamExists(params.displayName, 'displayName');
+  const token = verifyParamExists(params.token, 'token');
+  const groupId = verifyParamExists(params.groupId, 'groupId');
+  const userId = verifyParamExists(params.userId, 'userId');
+
+  const callAdapter = await createAzureCommunicationCallAdapter({
+    userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,
+    displayName,
+    credential: new AzureCommunicationTokenCredential(token),
+    locator: { groupId: groupId }
+  });
+  return callAdapter;
+};
+
 function onFetchParticipantMenuItems(): IContextualMenuItem[] {
   return [
     {