add unit tests for avatarDeepComparisonCheck (#1836)

* Add participant editing to the media gallery

* Change files

* Updated displayName changes to use useEffect hook.

* Fixed initial state bug

* rework async protection

* Update mapping logic

* move function out of gallery

* move to hook function

* move data provider in avatarPersona

* listify

* memoize useDataProvider

* remove stale imports

* fixed default behavior and deep comparison

* add sorting and flatten deep comparison

* remove stale imports

* fix media gallery comments

* fix AvatarPersona nits

* move custom hook to utils file

* fix imports

* fix comments

* James made me do it

* moved to customDataModelUtils for all composites

* Saint James found a bug because he's too stubborn

* fix nits

* add unit tests for deep compare

* Change files

* add tests for should update

change/@internal-react-composites-71e4d4f5-b5c9-47a2-9af0-56813ce9a34c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Introduce tests to support new custom data model behaviors.",
+  "packageName": "@internal/react-composites",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/common/CustomDataModelUtils.test.ts

@@ -0,0 +1,100 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { AvatarPersonaData } from './AvatarPersona';
+import { avatarDeepDifferenceCheck, shouldUpdate } from './CustomDataModelUtils';
+
+const testAvatar3: AvatarPersonaData = {
+  text: undefined,
+  imageUrl: undefined,
+  imageInitials: undefined,
+  initialsColor: undefined,
+  initialsTextColor: undefined
+};
+
+const testAvatarset1: AvatarPersonaData[] = [
+  {
+    text: 'apples',
+    imageUrl: 'test1',
+    imageInitials: 'aa',
+    initialsColor: 'white',
+    initialsTextColor: 'blue'
+  },
+  {
+    text: 'Saint James',
+    imageUrl: 'test3',
+    imageInitials: 'aa',
+    initialsColor: 'black',
+    initialsTextColor: 'blue'
+  }
+];
+
+const testAvatarset2: AvatarPersonaData[] = [
+  {
+    text: 'apples',
+    imageUrl: 'test1',
+    imageInitials: 'aa',
+    initialsColor: 'white',
+    initialsTextColor: 'blue'
+  },
+  {
+    text: 'Saint James',
+    imageUrl: 'test3',
+    imageInitials: 'aa',
+    initialsColor: 'green',
+    initialsTextColor: 'blue'
+  }
+];
+
+const testAvatarset3: AvatarPersonaData[] = [
+  {
+    text: 'apples',
+    imageUrl: 'test1',
+    imageInitials: 'aa',
+    initialsColor: 'white',
+    initialsTextColor: 'blue'
+  },
+  {
+    text: 'Saint James',
+    imageUrl: 'test3',
+    imageInitials: 'aa',
+    initialsColor: 'black',
+    initialsTextColor: 'blue'
+  },
+  {
+    text: 'apples',
+    imageUrl: 'test1',
+    imageInitials: 'aa',
+    initialsColor: 'white',
+    initialsTextColor: 'blue'
+  }
+];
+
+describe('Custom data model utils tests', () => {
+  describe('avatarDeepDifferenceCheck tests', () => {
+    test('avatarDeepDifferenceCheck should return false for same avatar', () => {
+      expect(avatarDeepDifferenceCheck(testAvatarset1[1], testAvatarset1[1])).toBe(false);
+    });
+    test('avatarDeepDifferenceCheck should return true for different avatars', () => {
+      expect(avatarDeepDifferenceCheck(testAvatarset1[1], testAvatarset1[2])).toBe(true);
+    });
+    test('avatarDeepDifferenceCheck should return true for avatar with data and avatar with undefined data', () => {
+      expect(avatarDeepDifferenceCheck(testAvatarset1[1], testAvatar3)).toBe(true);
+    });
+    test('avatarDeepDifferenceCheck should return true for two undefined avatars', () => {
+      expect(avatarDeepDifferenceCheck(testAvatar3, testAvatar3)).toBe(false);
+    });
+  });
+
+  describe('shouldUpdate tests', () => {
+    test('shouldUpdate should return true with two different avatar sets', () => {
+      expect(shouldUpdate(testAvatarset1, testAvatarset2)).toBe(true);
+    });
+    test('shouldUpdate should return false with two of the same sets of AvatarPersonaData', () => {
+      expect(shouldUpdate(testAvatarset1, testAvatarset1)).toBe(false);
+    });
+    test('shouldUpdate should return true with two avatar sets of different lengths', () => {
+      expect(shouldUpdate(testAvatarset1, testAvatarset3)).toBe(true);
+    });
+  });
+});

packages/react-composites/src/composites/common/CustomDataModelUtils.tsx

@@ -40,7 +40,7 @@ export const useCustomAvatarPersonaData = (
  * @returns Boolean whether there is new avatar persona data present.
  * @private
  */
-const shouldUpdate = (
+export const shouldUpdate = (
   currentData: (AvatarPersonaData | undefined)[],
   newData: (AvatarPersonaData | undefined)[]
 ): boolean => {
@@ -53,7 +53,7 @@ const shouldUpdate = (
 /**
  * @private
  */
-const avatarDeepDifferenceCheck = (currentData?: AvatarPersonaData, newData?: AvatarPersonaData): boolean => {
+export const avatarDeepDifferenceCheck = (currentData?: AvatarPersonaData, newData?: AvatarPersonaData): boolean => {
   return (
     currentData?.text !== newData?.text ||
     currentData?.imageUrl !== newData?.imageUrl ||