Refactored unit tests to pass with code refactor.

packages/edit-site/src/components/global-styles/font-library-modal/utils/make-families-from-faces.js

@@ -1,5 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 export default function makeFamilyFromFaces( fontFaces ) {
-	let fontFamilyObject;
+	let fontFamilyObject = null;
 	fontFaces.forEach( ( fontFace ) => {
 		if ( ! fontFamilyObject ) {
 			fontFamilyObject = {
@@ -10,7 +15,9 @@ export default function makeFamilyFromFaces( fontFaces ) {
 			};
 		} else if ( fontFamilyObject.name !== fontFace.fontFamily ) {
 			throw new Error(
-				'You may only batch upload fonts from the same font family.'
+				__(
+					'You may only batch upload fonts from the same font family.'
+				)
 			);
 		}
 		fontFamilyObject.fontFace.push( fontFace );

packages/edit-site/src/components/global-styles/font-library-modal/utils/test/makeFamiliesFromFaces.spec.js

@@ -3,31 +3,48 @@
  */
 import makeFamiliesFromFaces from '../make-families-from-faces';
 
+const getError = ( call ) => {
+	try {
+		call();
+		throw new Error( 'No error thrown' );
+	} catch ( error ) {
+		return error;
+	}
+};
+
 describe( 'makeFamiliesFromFaces', () => {
 	it( 'handles empty fontFaces list', () => {
 		const result = makeFamiliesFromFaces( [] );
-		expect( result ).toEqual( [] );
+		expect( result ).toEqual( null );
 	} );
 
-	it( 'groups fontFaces by fontFamily', () => {
+	it( 'collects multiple fontFaces for the same fontFamily', () => {
 		const fontFaces = [
-			{ fontFamily: 'Lobster' },
+			{ fontFamily: 'Super Duper' },
 			{
-				fontFamily: 'Piazzolla',
+				fontFamily: 'Super Duper',
 				file: { name: 'piazzolla.ttf' },
 			},
-			{ fontFamily: 'Lobster', file: { name: 'piazzolla.ttf' } },
+			{ fontFamily: 'Super Duper', file: { name: 'piazzolla.ttf' } },
 		];
 
 		const result = makeFamiliesFromFaces( fontFaces );
 
-		expect( result ).toHaveLength( 2 );
-		expect(
-			result.find( ( family ) => family.name === 'Lobster' ).fontFace
-		).toHaveLength( 2 );
-		expect(
-			result.find( ( family ) => family.name === 'Piazzolla' ).fontFace
-		).toHaveLength( 1 );
+		expect( result.name ).toEqual( 'Super Duper' );
+		expect( result.fontFace ).toHaveLength( 3 );
+	} );
+
+	it( 'errors with multiple fontFaces for different fontFamilies', () => {
+		const fontFaces = [
+			{ fontFamily: 'Super Duper' },
+			{ fontFamily: 'Duper Super', file: { name: 'piazzolla.ttf' } },
+		];
+
+		const error = getError( () => makeFamiliesFromFaces( fontFaces ) );
+		expect( error ).toHaveProperty(
+			'message',
+			'You may only batch upload fonts from the same font family.'
+		);
 	} );
 
 	it( 'generates correct name for fontFamily names', () => {
@@ -39,7 +56,7 @@ describe( 'makeFamiliesFromFaces', () => {
 		];
 
 		const result = makeFamiliesFromFaces( fontFaces );
-		expect( result[ 0 ].name ).toBe( 'Piazzolla' );
+		expect( result.name ).toBe( 'Piazzolla' );
 	} );
 
 	it( 'generates correct slug for fontFamily names', () => {
@@ -52,6 +69,19 @@ describe( 'makeFamiliesFromFaces', () => {
 
 		const result = makeFamiliesFromFaces( fontFaces );
 
-		expect( result[ 0 ].slug ).toBe( 'times-new-roman' );
+		expect( result.slug ).toBe( 'times-new-roman' );
+	} );
+
+	it( 'generates correct fontFamily property for fontFamily object', () => {
+		const fontFaces = [
+			{
+				fontFamily: 'Times New Roman',
+				file: { name: 'times.ttf' },
+			},
+		];
+
+		const result = makeFamiliesFromFaces( fontFaces );
+
+		expect( result.fontFamily ).toBe( 'Times New Roman' );
 	} );
 } );

packages/edit-site/src/components/global-styles/font-library-modal/utils/test/makeFormDataFromFontFamilies.spec.js

@@ -1,62 +1,56 @@
 /**
  * Internal dependencies
  */
-import { makeFormDataFromFontFamilies } from '../index';
+import { makeFormDataFromFontFamily } from '../index';
 
 /* global File */
 
-describe( 'makeFormDataFromFontFamilies', () => {
+describe( 'makeFormDataFromFontFamily', () => {
 	it( 'should process fontFamilies and return FormData', () => {
-		const mockFontFamilies = [
-			{
-				slug: 'bebas',
-				name: 'Bebas',
-				fontFamily: 'Bebas',
-				fontFace: [
-					{
-						file: new File( [ 'content' ], 'test-font1.woff2' ),
-						fontWeight: '500',
-						fontStyle: 'normal',
-					},
-					{
-						file: new File( [ 'content' ], 'test-font2.woff2' ),
-						fontWeight: '400',
-						fontStyle: 'normal',
-					},
-				],
-			},
-		];
+		const mockFontFamily = {
+			slug: 'bebas',
+			name: 'Bebas',
+			fontFamily: 'Bebas',
+			fontFace: [
+				{
+					file: new File( [ 'content' ], 'test-font1.woff2' ),
+					fontWeight: '500',
+					fontStyle: 'normal',
+				},
+				{
+					file: new File( [ 'content' ], 'test-font2.woff2' ),
+					fontWeight: '400',
+					fontStyle: 'normal',
+				},
+			],
+		};
 
-		const formData = makeFormDataFromFontFamilies( mockFontFamilies );
+		const formData = makeFormDataFromFontFamily( mockFontFamily );
 
 		expect( formData instanceof FormData ).toBeTruthy();
 
 		// Check if files are added correctly
-		expect( formData.get( 'file-0-0' ).name ).toBe( 'test-font1.woff2' );
-		expect( formData.get( 'file-0-1' ).name ).toBe( 'test-font2.woff2' );
+		expect( formData.get( 'file-0' ).name ).toBe( 'test-font1.woff2' );
+		expect( formData.get( 'file-1' ).name ).toBe( 'test-font2.woff2' );
 
 		// Check if 'fontFamilies' key in FormData is correct
-		const expectedFontFamilies = [
+		const expectedFontFaces = [
+			{
+				fontWeight: '500',
+				fontStyle: 'normal',
+				uploadedFile: 'file-0',
+			},
 			{
-				fontFace: [
-					{
-						fontWeight: '500',
-						fontStyle: 'normal',
-						uploadedFile: 'file-0-0',
-					},
-					{
-						fontWeight: '400',
-						fontStyle: 'normal',
-						uploadedFile: 'file-0-1',
-					},
-				],
-				slug: 'bebas',
-				name: 'Bebas',
-				fontFamily: 'Bebas',
+				fontWeight: '400',
+				fontStyle: 'normal',
+				uploadedFile: 'file-1',
 			},
 		];
-		expect( JSON.parse( formData.get( 'font_families' ) ) ).toEqual(
-			expectedFontFamilies
+		expect( formData.get( 'slug' ) ).toBe( 'bebas' );
+		expect( formData.get( 'name' ) ).toBe( 'Bebas' );
+		expect( formData.get( 'fontFamily' ) ).toBe( 'Bebas' );
+		expect( JSON.parse( formData.get( 'fontFace' ) ) ).toEqual(
+			expectedFontFaces
 		);
 	} );
 } );