@elementor/editor-canvas 0.7.1 → 0.8.0

package/src/renderers/__tests__/create-props-resolver.test.ts

@@ -0,0 +1,175 @@
+import { createMockPropType } from 'test-utils';
+
+import { createPropsResolver } from '../create-props-resolver';
+
+describe( 'createPropsResolver', () => {
+	it( 'should resolve simple props', async () => {
+		// Arrange.
+		const resolve = createPropsResolver( { int: ( value ) => value + 1 } );
+
+		// Act.
+		const result = await resolve( {
+			props: {
+				int: { $$type: 'int', value: 0 },
+			},
+			schema: {
+				int: createMockPropType( { kind: 'plain', key: 'int' } ),
+			},
+		} );
+
+		// Assert.
+		expect( result ).toEqual( { int: 1 } );
+	} );
+
+	it( 'should skip disabled props', async () => {
+		// Arrange.
+		const resolve = createPropsResolver( { int: ( value ) => value + 1 } );
+
+		// Act.
+		const result = await resolve( {
+			props: {
+				int: {
+					$$type: 'int',
+					value: 1,
+					disabled: true,
+				},
+			},
+			schema: {
+				int: createMockPropType( { kind: 'plain', key: 'int' } ),
+			},
+		} );
+
+		// Assert.
+		expect( result ).toEqual( {} );
+	} );
+
+	it( 'should fallback to default value when there is no value', async () => {
+		// Arrange.
+		const resolve = createPropsResolver( { int: ( value ) => value + 1 } );
+
+		// Act.
+		const result = await resolve( {
+			props: {},
+			schema: {
+				int: createMockPropType( {
+					kind: 'plain',
+					key: 'int',
+					default: { $$type: 'int', value: 3 },
+				} ),
+			},
+		} );
+
+		// Assert.
+		expect( result ).toEqual( { int: 4 } );
+	} );
+
+	it( 'should skip props that are not in the schema', async () => {
+		// Arrange.
+		const resolve = createPropsResolver( { int: ( value ) => value + 1 } );
+
+		// Act.
+		const result = await resolve( {
+			props: {
+				int: {
+					$$type: 'int',
+					value: 1,
+				},
+				'not-in-schema': {
+					$$type: 'int',
+					value: 1,
+				},
+			},
+			schema: {
+				int: createMockPropType( { kind: 'plain', key: 'int' } ),
+			},
+		} );
+
+		// Assert.
+		expect( result ).toEqual( { int: 2 } );
+	} );
+
+	it( "should skip props that don't have a transformer", async () => {
+		// Arrange.
+		const resolve = createPropsResolver( { int: ( value ) => value + 1 } );
+
+		// Act.
+		const result = await resolve( {
+			props: {
+				int: {
+					$$type: 'int',
+					value: 1,
+				},
+				invalid: {
+					$$type: 'invalid',
+					value: 1,
+				},
+			},
+			schema: {
+				int: createMockPropType( { kind: 'plain', key: 'int' } ),
+				invalid: createMockPropType( { kind: 'plain', key: 'invalid' } ),
+			},
+		} );
+
+		// Assert.
+		expect( result ).toEqual( { int: 2 } );
+	} );
+
+	it( 'should skip props when their transformer throws an error', async () => {
+		const resolve = createPropsResolver( {
+			int: ( value ) => value + 1,
+			throws: () => {
+				throw new Error( 'Not Working!' );
+			},
+		} );
+
+		// Act.
+		const result = await resolve( {
+			props: {
+				int: {
+					$$type: 'int',
+					value: 1,
+				},
+				throws: {
+					$$type: 'throws',
+					value: 1,
+				},
+			},
+			schema: {
+				int: createMockPropType( { kind: 'plain', key: 'int' } ),
+				invalid: createMockPropType( { kind: 'plain', key: 'throws' } ),
+			},
+		} );
+
+		// Assert.
+		expect( result ).toEqual( { int: 2 } );
+	} );
+
+	it( 'should trigger onResolve when resolving a prop', async () => {
+		const onResolve = jest.fn();
+
+		const resolve = createPropsResolver( { int: ( value ) => value + 1 }, { onPropResolve: onResolve } );
+
+		// Act.
+		await resolve( {
+			props: {
+				int: {
+					$$type: 'int',
+					value: 1,
+				},
+				int2: {
+					$$type: 'int',
+					value: 3,
+				},
+			},
+			schema: {
+				int: createMockPropType( { kind: 'plain', key: 'int' } ),
+				int2: createMockPropType( { kind: 'plain', key: 'int' } ),
+			},
+		} );
+
+		// Assert.
+		expect( onResolve ).toHaveBeenCalledTimes( 2 );
+		expect( onResolve ).toHaveBeenNthCalledWith( 1, { key: 'int', value: 2 } );
+		expect( onResolve ).toHaveBeenNthCalledWith( 2, { key: 'int2', value: 4 } );
+	} );
+} );

package/src/renderers/__tests__/create-props-resolver.transformers.test.ts

@@ -0,0 +1,323 @@
+import {
+	backgroundColorOverlayPropTypeUtil,
+	backgroundImageOverlayPropTypeUtil,
+	backgroundImagePositionOffsetPropTypeUtil,
+	backgroundImageSizeScalePropTypeUtil,
+	backgroundOverlayPropTypeUtil,
+	backgroundPropTypeUtil,
+	borderRadiusPropTypeUtil,
+	borderWidthPropTypeUtil,
+	boxShadowPropTypeUtil,
+	colorPropTypeUtil,
+	dimensionsPropTypeUtil,
+	imageAttachmentIdPropType,
+	imagePropTypeUtil,
+	imageSrcPropTypeUtil,
+	layoutDirectionPropTypeUtil,
+	type Props,
+	type PropsSchema,
+	shadowPropTypeUtil,
+	sizePropTypeUtil,
+	strokePropTypeUtil,
+} from '@elementor/editor-props';
+import { getMediaAttachment } from '@elementor/wp-media';
+
+import { createPropsResolver } from '../create-props-resolver';
+import { styleTransformers } from '../style-transformers';
+import { stylesSchemaMock } from './__mocks__/styles-schema';
+
+jest.mock( '@elementor/wp-media' );
+
+type Payload = {
+	name: string;
+	prepare?: () => void;
+	props: Props;
+	schema: PropsSchema;
+	expected: Record< string, unknown >;
+};
+
+describe( 'createPropsResolver - transformers', () => {
+	it.each< Payload >( [
+		{
+			name: 'text-stroke',
+			props: {
+				'text-stroke': strokePropTypeUtil.create( {
+					width: sizePropTypeUtil.create( {
+						size: 1,
+						unit: 'px',
+					} ),
+					color: colorPropTypeUtil.create( '#000000' ),
+				} ),
+			},
+			schema: stylesSchemaMock,
+			expected: {
+				'text-stroke': '1px #000000',
+			},
+		},
+		{
+			name: 'box-shadow',
+			props: {
+				'box-shadow': boxShadowPropTypeUtil.create( [
+					shadowPropTypeUtil.create( {
+						hOffset: sizePropTypeUtil.create( { size: 1, unit: 'px' } ),
+						vOffset: sizePropTypeUtil.create( { size: 1, unit: 'px' } ),
+						blur: sizePropTypeUtil.create( { size: 1, unit: 'px' } ),
+						spread: sizePropTypeUtil.create( { size: 1, unit: 'px' } ),
+						color: colorPropTypeUtil.create( '#000000' ),
+					} ),
+					shadowPropTypeUtil.create( {
+						hOffset: sizePropTypeUtil.create( { size: 1, unit: 'px' } ),
+						vOffset: sizePropTypeUtil.create( { size: 1, unit: 'px' } ),
+						blur: sizePropTypeUtil.create( { size: 1, unit: 'px' } ),
+						spread: sizePropTypeUtil.create( { size: 1, unit: 'px' } ),
+						color: colorPropTypeUtil.create( '#000000' ),
+						position: 'inset',
+					} ),
+				] ),
+			},
+			schema: stylesSchemaMock,
+			expected: {
+				'box-shadow': '1px 1px 1px 1px #000000,1px 1px 1px 1px #000000 inset',
+			},
+		},
+		{
+			name: 'linked-dimensional',
+			props: {
+				padding: dimensionsPropTypeUtil.create( {
+					top: sizePropTypeUtil.create( {
+						size: 10,
+						unit: 'px',
+					} ),
+					right: sizePropTypeUtil.create( {
+						size: 20,
+						unit: 'px',
+					} ),
+					bottom: sizePropTypeUtil.create( {
+						size: 30,
+						unit: 'px',
+					} ),
+					left: sizePropTypeUtil.create( {
+						size: 40,
+						unit: 'px',
+					} ),
+				} ),
+			},
+			schema: stylesSchemaMock,
+			expected: {
+				'padding-top': '10px',
+				'padding-right': '20px',
+				'padding-bottom': '30px',
+				'padding-left': '40px',
+			},
+		},
+		{
+			name: 'border-width',
+			props: {
+				'border-width': borderWidthPropTypeUtil.create( {
+					top: sizePropTypeUtil.create( { size: 10, unit: 'px' } ),
+					right: sizePropTypeUtil.create( { size: 20, unit: 'px' } ),
+					bottom: sizePropTypeUtil.create( { size: 30, unit: 'px' } ),
+					left: sizePropTypeUtil.create( { size: 40, unit: 'px' } ),
+				} ),
+			},
+			schema: stylesSchemaMock,
+			expected: {
+				'border-top-width': '10px',
+				'border-right-width': '20px',
+				'border-bottom-width': '30px',
+				'border-left-width': '40px',
+			},
+		},
+		{
+			name: 'border-radius',
+			props: {
+				'border-radius': borderRadiusPropTypeUtil.create( {
+					'top-left': sizePropTypeUtil.create( { size: 10, unit: 'px' } ),
+					'top-right': sizePropTypeUtil.create( { size: 20, unit: 'px' } ),
+					'bottom-right': sizePropTypeUtil.create( { size: 30, unit: 'px' } ),
+					'bottom-left': sizePropTypeUtil.create( { size: 40, unit: 'px' } ),
+				} ),
+			},
+			schema: stylesSchemaMock,
+			expected: {
+				'border-top-left-radius': '10px',
+				'border-top-right-radius': '20px',
+				'border-bottom-right-radius': '30px',
+				'border-bottom-left-radius': '40px',
+			},
+		},
+		{
+			name: 'gap',
+			props: {
+				gap: layoutDirectionPropTypeUtil.create( {
+					row: sizePropTypeUtil.create( { size: 10, unit: 'px' } ),
+					column: sizePropTypeUtil.create( { size: 20, unit: 'px' } ),
+				} ),
+			},
+			schema: stylesSchemaMock,
+			expected: {
+				'column-gap': '20px',
+				'row-gap': '10px',
+			},
+		},
+		{
+			name: 'background (only color)',
+			props: {
+				background: backgroundPropTypeUtil.create( {
+					color: colorPropTypeUtil.create( '#ee00ff' ),
+				} ),
+			},
+			schema: stylesSchemaMock,
+			expected: {
+				background: '#ee00ff',
+			},
+		},
+		{
+			name: 'background (only image url)',
+			props: {
+				background: backgroundPropTypeUtil.create( {
+					'background-overlay': backgroundOverlayPropTypeUtil.create( [
+						backgroundImageOverlayPropTypeUtil.create( {
+							image: imagePropTypeUtil.create( {
+								src: imageSrcPropTypeUtil.create( {
+									id: null,
+									url: 'https://localhost.test/test-image.png',
+								} ),
+								size: null,
+							} ),
+						} ),
+					] ),
+				} ),
+			},
+			schema: stylesSchemaMock,
+			expected: {
+				background: 'url(https://localhost.test/test-image.png)',
+			},
+		},
+		{
+			name: 'background (full)',
+			prepare: () => {
+				jest.mocked( getMediaAttachment ).mockImplementation(
+					( args ) => Promise.resolve( mockAttachmentData( args.id ) ) as never
+				);
+			},
+			props: {
+				background: backgroundPropTypeUtil.create( {
+					color: colorPropTypeUtil.create( '#000' ),
+					'background-overlay': backgroundOverlayPropTypeUtil.create( [
+						backgroundColorOverlayPropTypeUtil.create( 'blue' ),
+						backgroundColorOverlayPropTypeUtil.create( 'yellow' ),
+						backgroundImageOverlayPropTypeUtil.create( {
+							image: imagePropTypeUtil.create( {
+								src: imageSrcPropTypeUtil.create( {
+									id: imageAttachmentIdPropType.create( 123 ),
+									url: null,
+								} ),
+								size: 'thumbnail',
+							} ),
+							size: backgroundImageSizeScalePropTypeUtil.create( {
+								width: sizePropTypeUtil.create( {
+									size: 1400,
+									unit: 'px',
+								} ),
+							} ),
+						} ),
+						backgroundImageOverlayPropTypeUtil.create( {
+							image: imagePropTypeUtil.create( {
+								src: imageSrcPropTypeUtil.create( {
+									id: imageAttachmentIdPropType.create( 123 ),
+									url: null,
+								} ),
+								size: 'medium_large',
+							} ),
+							size: 'auto',
+							position: backgroundImagePositionOffsetPropTypeUtil.create( {
+								x: sizePropTypeUtil.create( {
+									size: 200,
+									unit: 'px',
+								} ),
+								y: sizePropTypeUtil.create( {
+									size: 30,
+									unit: 'px',
+								} ),
+							} ),
+							repeat: 'repeat-x',
+							attachment: 'fixed',
+						} ),
+					] ),
+				} ),
+			},
+			schema: stylesSchemaMock,
+			expected: {
+				background:
+					'linear-gradient(blue, blue),linear-gradient(yellow, yellow),' +
+					'url(thumbnail-image-url-123) 0% 0% / 1400px auto,' +
+					'url(medium_large-image-url-123) repeat-x fixed 200px 30px / auto' +
+					' #000',
+			},
+		},
+		{
+			name: 'background (url only repeat and attachment)',
+			prepare: () => {
+				jest.mocked( getMediaAttachment ).mockImplementation(
+					( args ) => Promise.resolve( mockAttachmentData( args.id ) ) as never
+				);
+			},
+			props: {
+				background: backgroundPropTypeUtil.create( {
+					'background-overlay': backgroundOverlayPropTypeUtil.create( [
+						backgroundImageOverlayPropTypeUtil.create( {
+							image: imagePropTypeUtil.create( {
+								src: imageSrcPropTypeUtil.create( {
+									id: imageAttachmentIdPropType.create( 123 ),
+									url: null,
+								} ),
+								size: 'medium_large',
+							} ),
+							repeat: 'repeat-x',
+						} ),
+						backgroundImageOverlayPropTypeUtil.create( {
+							image: imagePropTypeUtil.create( {
+								src: imageSrcPropTypeUtil.create( {
+									id: imageAttachmentIdPropType.create( 123 ),
+									url: null,
+								} ),
+								size: 'thumbnail',
+							} ),
+							attachment: 'fixed',
+						} ),
+					] ),
+				} ),
+			},
+			schema: stylesSchemaMock,
+			expected: {
+				background: 'url(medium_large-image-url-123) repeat-x,url(thumbnail-image-url-123) fixed',
+			},
+		},
+	] )( 'it should resolve props for `$name`', async ( { prepare, props, schema, expected } ) => {
+		// Arrange.
+		prepare?.();
+
+		const resolve = createPropsResolver( styleTransformers );
+
+		// Act.
+		const result = await resolve( { props, schema } );
+
+		// Assert.
+		expect( result ).toStrictEqual( expected );
+	} );
+} );
+
+const mockAttachmentData = ( id: number | null ) => {
+	const originalUrl = `original-image-url-${ id }`;
+
+	return {
+		url: originalUrl,
+		sizes: {
+			thumbnail: { url: `thumbnail-image-url-${ id }` },
+			medium_large: { url: `medium_large-image-url-${ id }` },
+			large: { url: `large-image-url-${ id }` },
+			full: { url: originalUrl },
+		},
+	};
+};

package/src/renderers/__tests__/render-styles.test.ts

@@ -0,0 +1,126 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+import { createMockPropType } from 'test-utils';
+import type { BreakpointsMap } from '@elementor/editor-responsive';
+import { getStylesSchema, type StyleDefinition } from '@elementor/editor-styles';
+
+import renderStyles from '../render-styles';
+import { stylesSchemaMock } from './__mocks__/styles-schema';
+
+jest.mock( '@elementor/editor-styles' );
+
+describe( 'renderStyles', () => {
+	beforeEach( () => {
+		jest.mocked( getStylesSchema ).mockReturnValue( stylesSchemaMock );
+	} );
+
+	it( 'should render media queries', async () => {
+		// Arrange.
+		const styleDef: StyleDefinition = {
+			id: 'test',
+			type: 'class',
+			label: 'Test',
+			variants: [
+				{
+					meta: { breakpoint: null, state: null },
+					props: { 'font-size': '24px' },
+				},
+				{
+					meta: { breakpoint: 'tablet', state: null },
+					props: { 'font-size': '18px' },
+				},
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+		const schema = { 'font-size': createMockPropType( { kind: 'plain', key: 'string' } ) };
+
+		// Act.
+		const cssString = await renderStyles( {
+			styles: [ styleDef ],
+			resolve,
+			breakpoints: { tablet: { width: 992, type: 'max-width' } } as BreakpointsMap,
+			schema,
+		} );
+
+		// Assert.
+		const defaultStyle = '.test{font-size:24px;}';
+		const tabletStyle = '@media(max-width:992px){.test{font-size:18px;}}';
+
+		expect( cssString ).toBe( `<style data-style-id="test">${ defaultStyle }${ tabletStyle }</style>` );
+
+		expect( resolve ).toHaveBeenCalledTimes( 2 );
+		expect( resolve ).toHaveBeenNthCalledWith( 1, { props: { 'font-size': '24px' }, schema } );
+		expect( resolve ).toHaveBeenNthCalledWith( 2, { props: { 'font-size': '18px' }, schema } );
+	} );
+
+	it( 'should render pseudo classes', async () => {
+		// Arrange.
+		const styleDef: StyleDefinition = {
+			id: 'test',
+			type: 'class',
+			label: 'Test',
+			variants: [
+				{
+					meta: { breakpoint: null, state: null },
+					props: { 'font-size': '24px' },
+				},
+				{
+					meta: { breakpoint: null, state: 'hover' },
+					props: { 'font-size': '18px' },
+				},
+				{
+					meta: { breakpoint: 'mobile', state: 'focus' },
+					props: { 'font-size': '12px' },
+				},
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+
+		// Act.
+		const cssString = await renderStyles( {
+			styles: [ styleDef ],
+			resolve,
+			breakpoints: { mobile: { width: 768, type: 'max-width' } } as BreakpointsMap,
+			schema: { 'font-size': createMockPropType( { kind: 'plain', key: 'string' } ) },
+		} );
+
+		// Assert.
+		const defaultStyle = '.test{font-size:24px;}';
+		const hoverStyle = '.test:hover{font-size:18px;}';
+		const focusStyle = '@media(max-width:768px){.test:focus{font-size:12px;}}';
+
+		expect( cssString ).toBe(
+			`<style data-style-id="test">${ defaultStyle }${ hoverStyle }${ focusStyle }</style>`
+		);
+	} );
+
+	it( 'should add selector prefix to the output', async () => {
+		// Arrange.
+		const styleDef: StyleDefinition = {
+			id: 'test',
+			type: 'class',
+			label: 'Test',
+			variants: [
+				{
+					meta: { breakpoint: null, state: null },
+					props: { 'font-size': '24px' },
+				},
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+
+		// Act.
+		const result = await renderStyles( {
+			styles: [ styleDef ],
+			resolve,
+			schema: getStylesSchema(),
+			selectorPrefix: '.elementor-prefix',
+			breakpoints: {} as BreakpointsMap,
+		} );
+
+		// Assert.
+		expect( result ).toBe( `<style data-style-id="test">.elementor-prefix .test{font-size:24px;}</style>` );
+	} );
+} );