@wordpress/edit-site 5.18.0 → 5.19.0

package/src/components/global-styles/font-library-modal/utils/test/getIntersectingFontFaces.spec.js

@@ -0,0 +1,240 @@
+/**
+ * Internal dependencies
+ */
+import getIntersectingFontFaces from '../get-intersecting-font-faces';
+
+describe( 'getIntersectingFontFaces', () => {
+	it( 'returns matching font faces for matching font family', () => {
+		const intendedFontsFamilies = [
+			{
+				slug: 'lobster',
+				fontFace: [
+					{
+						fontWeight: '400',
+						fontStyle: 'normal',
+					},
+				],
+			},
+		];
+
+		const existingFontFamilies = [
+			{
+				slug: 'lobster',
+				fontFace: [
+					{
+						fontWeight: '400',
+						fontStyle: 'normal',
+					},
+				],
+			},
+		];
+
+		const result = getIntersectingFontFaces(
+			intendedFontsFamilies,
+			existingFontFamilies
+		);
+
+		expect( result ).toEqual( intendedFontsFamilies );
+	} );
+
+	it( 'returns empty array when there is no match', () => {
+		const intendedFontsFamilies = [
+			{
+				slug: 'lobster',
+				fontFace: [
+					{
+						fontWeight: '400',
+						fontStyle: 'normal',
+					},
+				],
+			},
+		];
+
+		const existingFontFamilies = [
+			{
+				slug: 'montserrat',
+				fontFace: [
+					{
+						fontWeight: '400',
+						fontStyle: 'normal',
+					},
+				],
+			},
+		];
+
+		const result = getIntersectingFontFaces(
+			intendedFontsFamilies,
+			existingFontFamilies
+		);
+
+		expect( result ).toEqual( [] );
+	} );
+
+	it( 'returns matching font faces', () => {
+		const intendedFontsFamilies = [
+			{
+				slug: 'lobster',
+				fontFace: [
+					{
+						fontWeight: '400',
+						fontStyle: 'normal',
+					},
+					{
+						fontWeight: '700',
+						fontStyle: 'italic',
+					},
+				],
+			},
+			{
+				slug: 'times',
+				fontFace: [
+					{
+						fontWeight: '400',
+						fontStyle: 'normal',
+					},
+				],
+			},
+		];
+
+		const existingFontFamilies = [
+			{
+				slug: 'lobster',
+				fontFace: [
+					{
+						fontWeight: '400',
+						fontStyle: 'normal',
+					},
+					{
+						fontWeight: '800',
+						fontStyle: 'italic',
+					},
+					{
+						fontWeight: '900',
+						fontStyle: 'italic',
+					},
+				],
+			},
+		];
+
+		const expectedOutput = [
+			{
+				slug: 'lobster',
+				fontFace: [
+					{
+						fontWeight: '400',
+						fontStyle: 'normal',
+					},
+				],
+			},
+		];
+
+		const result = getIntersectingFontFaces(
+			intendedFontsFamilies,
+			existingFontFamilies
+		);
+
+		expect( result ).toEqual( expectedOutput );
+	} );
+
+	it( 'returns empty array when the first list is empty', () => {
+		const intendedFontsFamilies = [];
+
+		const existingFontFamilies = [
+			{
+				slug: 'lobster',
+				fontFace: [
+					{
+						fontWeight: '400',
+						fontStyle: 'normal',
+					},
+				],
+			},
+		];
+
+		const result = getIntersectingFontFaces(
+			intendedFontsFamilies,
+			existingFontFamilies
+		);
+
+		expect( result ).toEqual( [] );
+	} );
+
+	it( 'returns empty array when the second list is empty', () => {
+		const intendedFontsFamilies = [
+			{
+				slug: 'lobster',
+				fontFace: [
+					{
+						fontWeight: '400',
+						fontStyle: 'normal',
+					},
+				],
+			},
+		];
+
+		const existingFontFamilies = [];
+
+		const result = getIntersectingFontFaces(
+			intendedFontsFamilies,
+			existingFontFamilies
+		);
+
+		expect( result ).toEqual( [] );
+	} );
+
+	it( 'returns intersecting font family when there are no fonfaces', () => {
+		const intendedFontsFamilies = [
+			{
+				slug: 'piazzolla',
+				fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ],
+			},
+			{
+				slug: 'lobster',
+			},
+		];
+
+		const existingFontFamilies = [
+			{
+				slug: 'lobster',
+			},
+		];
+
+		const result = getIntersectingFontFaces(
+			intendedFontsFamilies,
+			existingFontFamilies
+		);
+
+		expect( result ).toEqual( existingFontFamilies );
+	} );
+
+	it( 'returns intersecting if there is an intended font face and is not present in the returning it should not be returned', () => {
+		const intendedFontsFamilies = [
+			{
+				slug: 'piazzolla',
+				fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ],
+			},
+			{
+				slug: 'lobster',
+				fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ],
+			},
+		];
+
+		const existingFontFamilies = [
+			{
+				slug: 'lobster',
+			},
+		];
+
+		const result = getIntersectingFontFaces(
+			intendedFontsFamilies,
+			existingFontFamilies
+		);
+		const expected = [
+			{
+				slug: 'lobster',
+				fontFace: [],
+			},
+		];
+		expect( result ).toEqual( expected );
+	} );
+} );

package/src/components/global-styles/font-library-modal/utils/test/getPreviewStyle.spec.js

@@ -0,0 +1,121 @@
+/**
+ * Internal dependencies
+ */
+import { getPreviewStyle } from '../index';
+
+describe( 'getPreviewStyle', () => {
+	it( 'should return default fontStyle and fontWeight if fontFace is not provided', () => {
+		const family = { fontFamily: 'Rosario' };
+		const result = getPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontWeight: '400',
+			fontStyle: 'normal',
+		};
+		expect( result ).toEqual( expected );
+	} );
+
+	it( 'should return fontStyle as "normal" if fontFace contains "normal" style', () => {
+		const family = {
+			fontFamily: 'Rosario',
+			fontFace: [
+				{ fontStyle: 'italic', fontWeight: '500' },
+				{ fontStyle: 'normal', fontWeight: '600' },
+			],
+		};
+		const result = getPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontStyle: 'normal',
+			fontWeight: '600',
+		};
+		expect( result ).toEqual( expected );
+	} );
+
+	it( 'should return fontStyle as "itaic" if fontFace does not contain "normal" style', () => {
+		const family = {
+			fontFamily: 'Rosario',
+			fontFace: [
+				{ fontStyle: 'italic', fontWeight: '500' },
+				{ fontStyle: 'italic', fontWeight: '600' },
+			],
+		};
+		const result = getPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontStyle: 'italic',
+			fontWeight: '500',
+		};
+		expect( result ).toEqual( expected );
+	} );
+
+	it( 'should return fontWeight as string', () => {
+		const family = {
+			fontFamily: 'Rosario',
+			fontFace: [
+				{ fontStyle: 'italic', fontWeight: '500' },
+				{ fontStyle: 'normal', fontWeight: '700' },
+			],
+		};
+		const result = getPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontStyle: 'normal',
+			fontWeight: '700',
+		};
+		expect( result ).toEqual( expected );
+	} );
+
+	it( 'should return fontWeight as "400" if fontFace contains "normal" style with "400" weight', () => {
+		const family = {
+			fontFamily: 'Rosario',
+			fontFace: [
+				{ fontStyle: 'italic', fontWeight: '500' },
+				{ fontStyle: 'normal', fontWeight: '400' },
+			],
+		};
+		const result = getPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontStyle: 'normal',
+			fontWeight: '400',
+		};
+		expect( result ).toEqual( expected );
+	} );
+
+	it( 'should return the fontWeight of the nearest "normal" style if no "400" weight is found', () => {
+		const family = {
+			fontFamily: 'Rosario',
+			fontFace: [
+				{ fontStyle: 'normal', fontWeight: '800' },
+				{ fontStyle: 'italic', fontWeight: '500' },
+				{ fontStyle: 'normal', fontWeight: '600' },
+			],
+		};
+		const result = getPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontStyle: 'normal',
+			fontWeight: '600',
+		};
+		expect( result ).toEqual( expected );
+	} );
+
+	it( 'should return 400 or the the nearest "normal" style if it using a variable weight font', () => {
+		const family = {
+			fontFamily: 'Rosario',
+			fontFace: [
+				{ fontStyle: 'normal', fontWeight: '100' },
+				{ fontStyle: 'normal', fontWeight: '200 900' },
+				{ fontStyle: 'italic', fontWeight: '200 900' },
+			],
+		};
+		const result = getPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontStyle: 'normal',
+			fontWeight: '400',
+		};
+		expect( result ).toEqual( expected );
+	} );
+} );

package/src/components/global-styles/font-library-modal/utils/test/isUrlEncoded.spec.js

@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import { isUrlEncoded } from '../index';
+
+describe( 'isUrlEncoded', () => {
+	// Test when input is not a string
+	it( 'should return false if the input is not a string', () => {
+		expect( isUrlEncoded( 123 ) ).toBe( false );
+		expect( isUrlEncoded( null ) ).toBe( false );
+		expect( isUrlEncoded( undefined ) ).toBe( false );
+		expect( isUrlEncoded( {} ) ).toBe( false );
+		expect( isUrlEncoded( [] ) ).toBe( false );
+	} );
+
+	// Test when URL is not encoded
+	it( 'should return false for non-encoded URLs', () => {
+		expect( isUrlEncoded( 'http://example.com' ) ).toBe( false );
+		expect( isUrlEncoded( 'https://www.google.com' ) ).toBe( false );
+		expect( isUrlEncoded( '/path/to/resource' ) ).toBe( false );
+		expect( isUrlEncoded( '' ) ).toBe( false );
+	} );
+
+	// Test when URL is encoded
+	it( 'should return true for encoded URLs', () => {
+		expect( isUrlEncoded( 'http%3A%2F%2Fexample.com' ) ).toBe( true );
+		expect( isUrlEncoded( 'https%3A%2F%2Fwww.google.com' ) ).toBe( true );
+		expect( isUrlEncoded( '%2Fpath%2Fto%2Fresource' ) ).toBe( true );
+		expect( isUrlEncoded( '%20' ) ).toBe( true );
+	} );
+} );

package/src/components/global-styles/font-library-modal/utils/test/makeFamiliesFromFaces.spec.js

@@ -0,0 +1,57 @@
+/**
+ * Internal dependencies
+ */
+import makeFamiliesFromFaces from '../make-families-from-faces';
+
+describe( 'makeFamiliesFromFaces', () => {
+	it( 'handles empty fontFaces list', () => {
+		const result = makeFamiliesFromFaces( [] );
+		expect( result ).toEqual( [] );
+	} );
+
+	it( 'groups fontFaces by fontFamily', () => {
+		const fontFaces = [
+			{ fontFamily: 'Lobster' },
+			{
+				fontFamily: 'Piazzolla',
+				file: { name: 'piazzolla.ttf' },
+			},
+			{ fontFamily: 'Lobster', 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 );
+	} );
+
+	it( 'generates correct name for fontFamily names', () => {
+		const fontFaces = [
+			{
+				fontFamily: 'Piazzolla',
+				file: { name: 'piazzolla.ttf' },
+			},
+		];
+
+		const result = makeFamiliesFromFaces( fontFaces );
+		expect( result[ 0 ].name ).toBe( 'Piazzolla' );
+	} );
+
+	it( 'generates correct slug for fontFamily names', () => {
+		const fontFaces = [
+			{
+				fontFamily: 'Times New Roman',
+				file: { name: 'times.ttf' },
+			},
+		];
+
+		const result = makeFamiliesFromFaces( fontFaces );
+
+		expect( result[ 0 ].slug ).toBe( 'times-new-roman' );
+	} );
+} );

package/src/components/global-styles/font-library-modal/utils/test/makeFormDataFromFontFamilies.spec.js

@@ -0,0 +1,62 @@
+/**
+ * Internal dependencies
+ */
+import { makeFormDataFromFontFamilies } from '../index';
+
+/* global File */
+
+describe( 'makeFormDataFromFontFamilies', () => {
+	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 formData = makeFormDataFromFontFamilies( mockFontFamilies );
+
+		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' );
+
+		// Check if 'fontFamilies' key in FormData is correct
+		const expectedFontFamilies = [
+			{
+				fontFace: [
+					{
+						fontWeight: '500',
+						fontStyle: 'normal',
+						uploadedFile: 'file-0-0',
+					},
+					{
+						fontWeight: '400',
+						fontStyle: 'normal',
+						uploadedFile: 'file-0-1',
+					},
+				],
+				slug: 'bebas',
+				name: 'Bebas',
+				fontFamily: 'Bebas',
+			},
+		];
+		expect( JSON.parse( formData.get( 'fontFamilies' ) ) ).toEqual(
+			expectedFontFamilies
+		);
+	} );
+} );

package/src/components/global-styles/font-library-modal/utils/test/mergeFontFaces.spec.js

@@ -0,0 +1,56 @@
+/**
+ * Internal dependencies
+ */
+import { mergeFontFaces } from '../index';
+
+describe( 'mergeFontFaces', () => {
+	it( 'should return an empty array when both existing and incoming arrays are empty', () => {
+		expect( mergeFontFaces() ).toEqual( [] );
+	} );
+
+	it( 'should return the existing array when the incoming array is empty', () => {
+		const existing = [ { fontWeight: 'normal', fontStyle: 'italic' } ];
+		expect( mergeFontFaces( existing, [] ) ).toEqual( existing );
+	} );
+
+	it( 'should return the incoming array when the existing array is empty', () => {
+		const incoming = [ { fontWeight: 'bold', fontStyle: 'normal' } ];
+		expect( mergeFontFaces( [], incoming ) ).toEqual( incoming );
+	} );
+
+	it( 'should merge non-overlapping existing and incoming arrays', () => {
+		const existing = [ { fontWeight: 'normal', fontStyle: 'italic' } ];
+		const incoming = [ { fontWeight: 'bold', fontStyle: 'normal' } ];
+		expect( mergeFontFaces( existing, incoming ) ).toEqual( [
+			...existing,
+			...incoming,
+		] );
+	} );
+
+	it( 'should overwrite duplicates with the incoming array', () => {
+		const existing = [
+			{ fontWeight: 'normal', fontStyle: 'italic', src: 'old-src' },
+		];
+		const incoming = [
+			{ fontWeight: 'normal', fontStyle: 'italic', src: 'new-src' },
+		];
+		expect( mergeFontFaces( existing, incoming ) ).toEqual( incoming );
+	} );
+
+	it( 'should handle multiple elements in both existing and incoming arrays', () => {
+		const existing = [
+			{ fontWeight: 'normal', fontStyle: 'italic', src: 'old-1' },
+			{ fontWeight: 'bold', fontStyle: 'normal', src: 'old-2' },
+		];
+		const incoming = [
+			{ fontWeight: 'normal', fontStyle: 'italic', src: 'new-1' },
+			{ fontWeight: 'bold', fontStyle: 'oblique', src: 'new-2' },
+		];
+		const expected = [
+			{ fontWeight: 'normal', fontStyle: 'italic', src: 'new-1' },
+			{ fontWeight: 'bold', fontStyle: 'normal', src: 'old-2' },
+			{ fontWeight: 'bold', fontStyle: 'oblique', src: 'new-2' },
+		];
+		expect( mergeFontFaces( existing, incoming ) ).toEqual( expected );
+	} );
+} );

package/src/components/global-styles/font-library-modal/utils/test/mergeFontFamilies.spec.js

@@ -0,0 +1,108 @@
+/**
+ * Internal dependencies
+ */
+import { mergeFontFamilies } from '../index';
+
+describe( 'mergeFontFamilies', () => {
+	it( 'should return an empty array when both inputs are empty', () => {
+		const result = mergeFontFamilies( [], [] );
+		expect( result ).toEqual( [] );
+	} );
+
+	it( 'should return the existing array when incoming array is empty', () => {
+		const existing = [
+			{ slug: 'lobster', name: 'Lobster', fontFamily: 'Lobster' },
+		];
+		const result = mergeFontFamilies( existing, [] );
+		expect( result ).toEqual( existing );
+	} );
+
+	it( 'should concar non-conflicting arrays', () => {
+		const existing = [
+			{ slug: 'lobster', name: 'Lobster', fontFamily: 'Lobster' },
+		];
+		const incoming = [
+			{ slug: 'piazzola', name: 'Piazzolla', fontFamily: 'Piazzolla' },
+		];
+		const result = mergeFontFamilies( existing, incoming );
+		expect( result ).toEqual( [ ...existing, ...incoming ] );
+	} );
+
+	it( 'should merge non-conflicting arrays', () => {
+		const existing = [
+			{ slug: 'lobster', name: 'Lobster', fontFamily: 'Lobster' },
+			{ slug: 'piazzola', name: 'Piazzolla', fontFamily: 'Piazzolla' },
+		];
+		const incoming = [
+			{ slug: 'piazzola', name: 'Piazzolla', fontFamily: 'Piazzolla' },
+		];
+		const result = mergeFontFamilies( existing, incoming );
+		expect( result ).toHaveLength( 2 );
+	} );
+
+	it( 'should overwrite existing font family data with incoming data', () => {
+		const existing = [
+			{ slug: 'lobster', name: 'Lobster', fontFamily: 'Lobster' },
+			{ slug: 'piazzola', name: 'Piazzolla', fontFamily: 'Piazzolla' },
+		];
+		const incoming = [
+			{
+				slug: 'piazzola',
+				name: 'Piazzolla',
+				fontFamily: 'Piazzolla, serif',
+			},
+		];
+		const result = mergeFontFamilies( existing, incoming );
+		expect( result[ 1 ].fontFamily ).toBe( 'Piazzolla, serif' );
+	} );
+
+	it( 'should merge fontFaces from incoming array', () => {
+		const existing = [
+			{
+				slug: 'lobster',
+				name: 'Lobster',
+				fontFamily: 'Lobster',
+			},
+			{
+				slug: 'piazzola',
+				name: 'Piazzolla',
+				fontFamily: 'Piazzolla',
+				fontFace: [
+					{ fontWeight: 400, fontStyle: 'normal', src: 'url' },
+					{ fontWeight: 500, fontStyle: 'normal', src: 'url' },
+				],
+			},
+		];
+		const incoming = [
+			{
+				slug: 'piazzola',
+				name: 'Piazzolla',
+				fontFamily: 'Piazzolla, serif',
+				fontFace: [
+					{ fontWeight: 800, fontStyle: 'normal', src: 'url' },
+					{ fontWeight: 400, fontStyle: 'normal', src: 'url' },
+				],
+			},
+		];
+		const expected = [
+			{
+				slug: 'lobster',
+				name: 'Lobster',
+				fontFamily: 'Lobster',
+			},
+			{
+				slug: 'piazzola',
+				name: 'Piazzolla',
+				fontFamily: 'Piazzolla, serif',
+				fontFace: [
+					{ fontWeight: 400, fontStyle: 'normal', src: 'url' },
+					{ fontWeight: 500, fontStyle: 'normal', src: 'url' },
+					{ fontWeight: 800, fontStyle: 'normal', src: 'url' },
+				],
+			},
+		];
+
+		const result = mergeFontFamilies( existing, incoming );
+		expect( result ).toEqual( expected );
+	} );
+} );