@wordpress/core-data 7.39.1-next.v.202602091733.0 → 7.40.0

package/src/awareness/test/utils.ts

@@ -0,0 +1,305 @@
+/**
+ * Internal dependencies
+ */
+import { areCollaboratorInfosEqual, generateCollaboratorInfo } from '../utils';
+import type { CollaboratorInfo } from '../types';
+import type { User } from '../../entity-types';
+
+// Mock window.navigator.userAgent
+const mockUserAgent = ( userAgent: string ) => {
+	Object.defineProperty( window.navigator, 'userAgent', {
+		value: userAgent,
+		configurable: true,
+	} );
+};
+
+describe( 'Awareness Utils', () => {
+	describe( 'arecollaboratorInfosEqual', () => {
+		// Shared avatar_urls reference for equality checks
+		// (arecollaboratorInfosEqual uses === which compares references for objects)
+		const sharedAvatarUrls = {
+			'24': 'https://example.com/avatar-24.png',
+			'48': 'https://example.com/avatar-48.png',
+			'96': 'https://example.com/avatar-96.png',
+		};
+
+		const createCollaboratorInfo = (
+			overrides: Partial< CollaboratorInfo > = {}
+		): CollaboratorInfo => ( {
+			id: 1,
+			name: 'Test User',
+			slug: 'test-user',
+			avatar_urls: sharedAvatarUrls,
+			browserType: 'Chrome',
+			enteredAt: 1704067200000,
+			...overrides,
+		} );
+
+		test( 'should return true when both collaboratorInfos are undefined', () => {
+			expect( areCollaboratorInfosEqual( undefined, undefined ) ).toBe(
+				true
+			);
+		} );
+
+		test( 'should return false when first collaboratorInfo is undefined', () => {
+			const collaboratorInfo = createCollaboratorInfo();
+			expect(
+				areCollaboratorInfosEqual( undefined, collaboratorInfo )
+			).toBe( false );
+		} );
+
+		test( 'should return false when second collaboratorInfo is undefined', () => {
+			const collaboratorInfo = createCollaboratorInfo();
+			expect(
+				areCollaboratorInfosEqual( collaboratorInfo, undefined )
+			).toBe( false );
+		} );
+
+		test( 'should return true when collaboratorInfos are identical', () => {
+			const collaboratorInfo1 = createCollaboratorInfo();
+			const collaboratorInfo2 = createCollaboratorInfo();
+			expect(
+				areCollaboratorInfosEqual(
+					collaboratorInfo1,
+					collaboratorInfo2
+				)
+			).toBe( true );
+		} );
+
+		test( 'should return false when id differs', () => {
+			const collaboratorInfo1 = createCollaboratorInfo( { id: 1 } );
+			const collaboratorInfo2 = createCollaboratorInfo( { id: 2 } );
+			expect(
+				areCollaboratorInfosEqual(
+					collaboratorInfo1,
+					collaboratorInfo2
+				)
+			).toBe( false );
+		} );
+
+		test( 'should return false when name differs', () => {
+			const collaboratorInfo1 = createCollaboratorInfo( {
+				name: 'User A',
+			} );
+			const collaboratorInfo2 = createCollaboratorInfo( {
+				name: 'User B',
+			} );
+			expect(
+				areCollaboratorInfosEqual(
+					collaboratorInfo1,
+					collaboratorInfo2
+				)
+			).toBe( false );
+		} );
+
+		test( 'should return false when slug differs', () => {
+			const collaboratorInfo1 = createCollaboratorInfo( {
+				slug: 'user-a',
+			} );
+			const collaboratorInfo2 = createCollaboratorInfo( {
+				slug: 'user-b',
+			} );
+			expect(
+				areCollaboratorInfosEqual(
+					collaboratorInfo1,
+					collaboratorInfo2
+				)
+			).toBe( false );
+		} );
+
+		test( 'should return false when browserType differs', () => {
+			const collaboratorInfo1 = createCollaboratorInfo( {
+				browserType: 'Chrome',
+			} );
+			const collaboratorInfo2 = createCollaboratorInfo( {
+				browserType: 'Firefox',
+			} );
+			expect(
+				areCollaboratorInfosEqual(
+					collaboratorInfo1,
+					collaboratorInfo2
+				)
+			).toBe( false );
+		} );
+
+		test( 'should return false when enteredAt differs', () => {
+			const collaboratorInfo1 = createCollaboratorInfo( {
+				enteredAt: 1000,
+			} );
+			const collaboratorInfo2 = createCollaboratorInfo( {
+				enteredAt: 2000,
+			} );
+			expect(
+				areCollaboratorInfosEqual(
+					collaboratorInfo1,
+					collaboratorInfo2
+				)
+			).toBe( false );
+		} );
+
+		test( 'should return false when objects have different number of keys', () => {
+			const collaboratorInfo1 = createCollaboratorInfo();
+			// Create collaboratorInfo2 with an extra key by casting
+			const collaboratorInfo2 = {
+				...createCollaboratorInfo(),
+				extraKey: 'extra',
+			} as unknown as CollaboratorInfo;
+			expect(
+				areCollaboratorInfosEqual(
+					collaboratorInfo1,
+					collaboratorInfo2
+				)
+			).toBe( false );
+		} );
+	} );
+
+	describe( 'generateCollaboratorInfo', () => {
+		const createMockUser = (
+			overrides: Partial< User< 'view' > > = {}
+		): User< 'view' > =>
+			( {
+				id: 1,
+				name: 'Test User',
+				slug: 'test-user',
+				avatar_urls: {
+					'24': 'https://example.com/avatar-24.png',
+					'48': 'https://example.com/avatar-48.png',
+					'96': 'https://example.com/avatar-96.png',
+				},
+				...overrides,
+			} ) as User< 'view' >;
+
+		beforeEach( () => {
+			// Reset to Chrome by default
+			mockUserAgent(
+				'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
+			);
+			jest.spyOn( Date, 'now' ).mockReturnValue( 1704067200000 );
+		} );
+
+		afterEach( () => {
+			jest.restoreAllMocks();
+		} );
+
+		test( 'should generate collaboratorInfo with user properties', () => {
+			const user = createMockUser( { id: 42, name: 'Jane Doe' } );
+			const collaboratorInfo = generateCollaboratorInfo( user );
+
+			expect( collaboratorInfo.id ).toBe( 42 );
+			expect( collaboratorInfo.name ).toBe( 'Jane Doe' );
+			expect( collaboratorInfo.slug ).toBe( 'test-user' );
+		} );
+
+		test( 'should include browser type', () => {
+			const user = createMockUser();
+			const collaboratorInfo = generateCollaboratorInfo( user );
+
+			expect( collaboratorInfo.browserType ).toBe( 'Chrome' );
+		} );
+
+		test( 'should detect Firefox browser', () => {
+			mockUserAgent(
+				'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0'
+			);
+			const user = createMockUser();
+			const collaboratorInfo = generateCollaboratorInfo( user );
+
+			expect( collaboratorInfo.browserType ).toBe( 'Firefox' );
+		} );
+
+		test( 'should detect Microsoft Edge browser', () => {
+			mockUserAgent(
+				'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.59'
+			);
+			const user = createMockUser();
+			const collaboratorInfo = generateCollaboratorInfo( user );
+
+			expect( collaboratorInfo.browserType ).toBe( 'Microsoft Edge' );
+		} );
+
+		test( 'should detect Safari browser', () => {
+			mockUserAgent(
+				'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.1 Safari/605.1.15'
+			);
+			const user = createMockUser();
+			const collaboratorInfo = generateCollaboratorInfo( user );
+
+			expect( collaboratorInfo.browserType ).toBe( 'Safari' );
+		} );
+
+		test( 'should detect Internet Explorer browser (MSIE)', () => {
+			mockUserAgent(
+				'Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; MSIE 10.0; rv:11.0) like Gecko'
+			);
+			const user = createMockUser();
+			const collaboratorInfo = generateCollaboratorInfo( user );
+
+			expect( collaboratorInfo.browserType ).toBe( 'Internet Explorer' );
+		} );
+
+		test( 'should detect Internet Explorer browser (Trident)', () => {
+			mockUserAgent(
+				'Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko'
+			);
+			const user = createMockUser();
+			const collaboratorInfo = generateCollaboratorInfo( user );
+
+			expect( collaboratorInfo.browserType ).toBe( 'Internet Explorer' );
+		} );
+
+		test( 'should detect Opera browser (Opera)', () => {
+			mockUserAgent(
+				'Opera/9.80 (Windows NT 6.1; WOW64) Presto/2.12.388 Version/12.18'
+			);
+			const user = createMockUser();
+			const collaboratorInfo = generateCollaboratorInfo( user );
+
+			expect( collaboratorInfo.browserType ).toBe( 'Opera' );
+		} );
+
+		test( 'should detect Opera browser (OPR)', () => {
+			// Note: Modern Opera (Chromium-based) includes both "Chrome" and "Safari"
+			// in the user agent. The browser detection checks Chrome and Safari before
+			// OPR, so we use a synthetic user agent to test the OPR detection path.
+			mockUserAgent(
+				'Mozilla/5.0 (Windows NT 10.0; Win64; x64) OPR/77.0.4054.203'
+			);
+			const user = createMockUser();
+			const collaboratorInfo = generateCollaboratorInfo( user );
+
+			expect( collaboratorInfo.browserType ).toBe( 'Opera' );
+		} );
+
+		test( 'should return Unknown for unrecognized browser', () => {
+			mockUserAgent( 'Some Unknown Browser/1.0' );
+			const user = createMockUser();
+			const collaboratorInfo = generateCollaboratorInfo( user );
+
+			expect( collaboratorInfo.browserType ).toBe( 'Unknown' );
+		} );
+
+		test( 'should include enteredAt timestamp', () => {
+			const user = createMockUser();
+			const collaboratorInfo = generateCollaboratorInfo( user );
+
+			expect( collaboratorInfo.enteredAt ).toBe( 1704067200000 );
+		} );
+
+		test( 'should include avatar_urls from user', () => {
+			const user = createMockUser( {
+				avatar_urls: {
+					'24': 'https://example.com/small.png',
+					'48': 'https://example.com/medium.png',
+					'96': 'https://example.com/large.png',
+				},
+			} );
+			const collaboratorInfo = generateCollaboratorInfo( user );
+
+			expect( collaboratorInfo.avatar_urls ).toEqual( {
+				'24': 'https://example.com/small.png',
+				'48': 'https://example.com/medium.png',
+				'96': 'https://example.com/large.png',
+			} );
+		} );
+	} );
+} );

package/src/awareness/types.ts

@@ -14,7 +14,6 @@ export type CollaboratorInfo = Pick<
 	'id' | 'name' | 'slug' | 'avatar_urls'
 > & {
 	browserType: string;
-	color: string;
 	enteredAt: number;
 };
 

package/src/awareness/utils.ts

@@ -4,82 +4,6 @@
 import type { User } from '../entity-types';
 import type { CollaboratorInfo } from './types';
 
-/**
- * The color palette for the collaborator highlight.
- */
-const COLOR_PALETTE = [
-	'#3858E9', // blueberry
-	'#B42AED', // purple
-	'#E33184', // pink
-	'#F3661D', // orange
-	'#ECBD3A', // yellow
-	'#97FE17', // green
-	'#00FDD9', // teal
-	'#37C5F0', // cyan
-];
-
-/**
- * Generate a random integer between min and max, inclusive.
- *
- * @param min - The minimum value.
- * @param max - The maximum value.
- * @return A random integer between min and max.
- */
-function generateRandomInt( min: number, max: number ): number {
-	return Math.floor( Math.random() * ( max - min + 1 ) ) + min;
-}
-
-/**
- * Get a unique collaborator color from the palette, or generate a variation if none are available.
- * If the previously used color is available from localStorage, use it.
- *
- * @param existingColors - Colors that are already in use.
- * @return The new collaborator color, in hex format.
- */
-function getNewCollaboratorColor( existingColors: string[] ): string {
-	const availableColors = COLOR_PALETTE.filter(
-		( color ) => ! existingColors.includes( color )
-	);
-
-	let hexColor: string;
-
-	if ( availableColors.length > 0 ) {
-		const randomIndex = generateRandomInt( 0, availableColors.length - 1 );
-		hexColor = availableColors[ randomIndex ];
-	} else {
-		// All colors are used, generate a variation of a random palette color
-		const randomIndex = generateRandomInt( 0, COLOR_PALETTE.length - 1 );
-		const baseColor = COLOR_PALETTE[ randomIndex ];
-		hexColor = generateColorVariation( baseColor );
-	}
-
-	return hexColor;
-}
-
-/**
- * Generate a variation of a hex color by adjusting its lightness.
- *
- * @param hexColor - The base hex color (e.g., '#3858E9').
- * @return A varied hex color.
- */
-function generateColorVariation( hexColor: string ): string {
-	// Parse hex to RGB
-	const r = parseInt( hexColor.slice( 1, 3 ), 16 );
-	const g = parseInt( hexColor.slice( 3, 5 ), 16 );
-	const b = parseInt( hexColor.slice( 5, 7 ), 16 );
-
-	// Apply a random lightness shift (-30 to +30)
-	const shift = generateRandomInt( -30, 30 );
-	const newR = Math.min( 255, Math.max( 0, r + shift ) );
-	const newG = Math.min( 255, Math.max( 0, g + shift ) );
-	const newB = Math.min( 255, Math.max( 0, b + shift ) );
-
-	// Convert back to hex
-	const toHex = ( n: number ) =>
-		n.toString( 16 ).padStart( 2, '0' ).toUpperCase();
-	return `#${ toHex( newR ) }${ toHex( newG ) }${ toHex( newB ) }`;
-}
-
 /**
  * Get the browser name from the user agent.
  * @return The browser name.
@@ -165,21 +89,23 @@ export function areCollaboratorInfosEqual(
 }
 
 /**
- * Generate a collaborator info object from a current collaborator and a list of existing colors.
+ * Generate a collaborator info object from a current collaborator.
  *
  * @param currentCollaborator - The current collaborator.
- * @param existingColors      - The existing colors.
  * @return The collaborator info object.
  */
 export function generateCollaboratorInfo(
-	currentCollaborator: User< 'view' >,
-	existingColors: string[]
+	currentCollaborator: User< 'view' >
 ): CollaboratorInfo {
+	// eslint-disable-next-line camelcase
+	const { avatar_urls, id, name, slug } = currentCollaborator;
 	return {
-		...currentCollaborator,
+		avatar_urls, // eslint-disable-line camelcase
 		browserType: getBrowserName(),
-		color: getNewCollaboratorColor( existingColors ),
 		enteredAt: Date.now(),
+		id,
+		name,
+		slug,
 	};
 }
 

package/src/entities.js

@@ -42,11 +42,17 @@ export const rootEntitiesConfig = [
 		baseURL: '/',
 		baseURLParams: {
 			// Please also change the preload path when changing this.
-			// @see lib/compat/wordpress-6.8/preload.php
+			// @see lib/compat/wordpress-7.0/preload.php
 			_fields: [
 				'description',
 				'gmt_offset',
 				'home',
+				'image_sizes',
+				'image_size_threshold',
+				'image_output_formats',
+				'jpeg_interlaced',
+				'png_interlaced',
+				'gif_interlaced',
 				'name',
 				'site_icon',
 				'site_icon_url',