@elementor/editor-canvas 0.7.0 → 0.8.0

package/src/styles-renderer/__tests__/index.test.ts

@@ -1,777 +0,0 @@
-/* eslint-disable testing-library/render-result-naming-convention */
-import { createMockStyleDefinition } from 'test-utils';
-import {
-	backgroundColorOverlayPropTypeUtil,
-	backgroundImageOverlayPropTypeUtil,
-	backgroundOverlayPropTypeUtil,
-	backgroundPropTypeUtil,
-	borderRadiusPropTypeUtil,
-	borderWidthPropTypeUtil,
-	boxShadowPropTypeUtil,
-	colorPropTypeUtil,
-	dimensionsPropTypeUtil,
-	imageAttachmentIdPropType,
-	imageSrcPropTypeUtil,
-	layoutDirectionPropTypeUtil,
-	shadowPropTypeUtil,
-	sizePropTypeUtil,
-	strokePropTypeUtil,
-} from '@elementor/editor-props';
-import type { BreakpointsMap } from '@elementor/editor-responsive';
-import { getStylesSchema, type StyleDefinition } from '@elementor/editor-styles';
-import { getMediaAttachment } from '@elementor/wp-media';
-
-import render from '../render';
-import transformers from '../transformers';
-import backgroundTransformer from '../transformers/background-transformer';
-import { stylesSchemaMock } from './__mocks__/styles-schema';
-
-jest.mock( '@elementor/editor-styles' );
-jest.mock( '@elementor/wp-media' );
-
-describe( 'styles-renderer', () => {
-	beforeEach( () => {
-		jest.mocked( getStylesSchema ).mockReturnValue( stylesSchemaMock );
-	} );
-
-	/**
-	 * Prop Types
-	 */
-
-	it( 'should transform stroke (including also size, number, string & color)', async () => {
-		const styleDef = createMockStyleDefinition( {
-			id: 'test',
-			props: {
-				'text-stroke': strokePropTypeUtil.create( {
-					width: sizePropTypeUtil.create( {
-						size: 1,
-						unit: 'px',
-					} ),
-					color: colorPropTypeUtil.create( '#000000' ),
-				} ),
-			},
-		} );
-
-		const cssString = await render( {
-			styles: [ styleDef ],
-			transformers,
-			breakpoints: mockBreakpoints,
-		} );
-
-		expect( cssString ).toBe( `<style data-style-id="test">.test{text-stroke:1px #000000;}</style>` );
-	} );
-
-	it( 'should transform box-shadow (including also shadow)', async () => {
-		// Arrange.
-		const shadow = 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' ),
-		} );
-
-		const shadowInset = shadowPropTypeUtil.create(
-			( prev ) => ( {
-				...prev,
-				position: 'inset',
-			} ),
-			{ base: shadow }
-		);
-
-		const styleDef = createMockStyleDefinition( {
-			id: 'test',
-			props: {
-				'box-shadow': boxShadowPropTypeUtil.create( [ shadow, shadowInset ] ),
-			},
-		} );
-
-		// Act.
-		const cssString = await render( {
-			styles: [ styleDef ],
-			transformers,
-			breakpoints: mockBreakpoints,
-		} );
-
-		// Assert.
-		expect( cssString ).toBe(
-			`<style data-style-id="test">.test{box-shadow:1px 1px 1px 1px #000000,1px 1px 1px 1px #000000 inset;}</style>`
-		);
-	} );
-
-	it( 'should transform linked-dimensions (including also size, number & string)', async () => {
-		// Arrange.
-		const styleDef = createMockStyleDefinition( {
-			id: 'test',
-			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',
-					} ),
-				} ),
-			},
-		} );
-
-		// Act.
-		const cssString = await render( {
-			styles: [ styleDef ],
-			transformers,
-			breakpoints: mockBreakpoints,
-		} );
-
-		// Assert.
-		expect( cssString ).toBe(
-			`<style data-style-id="test">.test{padding-top:10px;padding-right:20px;padding-bottom:30px;padding-left:40px;}</style>`
-		);
-	} );
-
-	it( 'should transform border-width (including also size, number & string)', async () => {
-		// Arrange.
-		const styleDef = createMockStyleDefinition( {
-			id: 'test',
-			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',
-					} ),
-				} ),
-			},
-		} );
-		// Act.
-		const cssString = await render( {
-			styles: [ styleDef ],
-			transformers,
-			breakpoints: mockBreakpoints,
-		} );
-
-		// Assert.
-		expect( cssString ).toBe(
-			`<style data-style-id="test">.test{border-top-width:10px;border-right-width:20px;border-bottom-width:30px;border-left-width:40px;}</style>`
-		);
-	} );
-
-	it( 'should transform border-radius (including also union, size, number & string)', async () => {
-		// Arrange.
-		const styleDef = createMockStyleDefinition( {
-			id: 'test',
-			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',
-					} ),
-				} ),
-			},
-		} );
-
-		// Act.
-		const cssString = await render( {
-			styles: [ styleDef ],
-			transformers,
-			breakpoints: mockBreakpoints,
-		} );
-
-		// Assert.
-		expect( cssString ).toBe(
-			`<style data-style-id="test">.test{border-top-left-radius:10px;border-top-right-radius:20px;border-bottom-right-radius:30px;border-bottom-left-radius:40px;}</style>`
-		);
-	} );
-
-	it( 'should transform layout direction', async () => {
-		// Arrange.
-		const styleDef = createMockStyleDefinition( {
-			id: 'test',
-			props: {
-				gap: layoutDirectionPropTypeUtil.create( {
-					row: sizePropTypeUtil.create( {
-						size: 10,
-						unit: 'px',
-					} ),
-					column: sizePropTypeUtil.create( {
-						size: 20,
-						unit: 'px',
-					} ),
-				} ),
-			},
-		} );
-
-		// Act.
-		const cssString = await render( {
-			styles: [ styleDef ],
-			transformers,
-			breakpoints: mockBreakpoints,
-		} );
-
-		// Assert.
-		expect( cssString ).toBe( `<style data-style-id="test">.test{column-gap:20px;row-gap:10px;}</style>` );
-	} );
-	/**
-	 * Features
-	 */
-
-	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': sizePropTypeUtil.create( {
-							size: 24,
-							unit: 'px',
-						} ),
-					},
-				},
-
-				{
-					meta: {
-						breakpoint: 'tablet',
-						state: null,
-					},
-					props: {
-						'font-size': sizePropTypeUtil.create( {
-							size: 18,
-							unit: 'px',
-						} ),
-					},
-				},
-
-				{
-					meta: {
-						breakpoint: 'mobile',
-						state: null,
-					},
-					props: {
-						'font-size': sizePropTypeUtil.create( {
-							size: 12,
-							unit: 'px',
-						} ),
-					},
-				},
-			],
-		};
-
-		// Act.
-		const cssString = await render( {
-			styles: [ styleDef ],
-			transformers,
-			breakpoints: mockBreakpoints,
-		} );
-
-		// Assert.
-		const defaultStyle = '.test{font-size:24px;}';
-		const tabletStyle = '@media(max-width:992px){.test{font-size:18px;}}';
-		const mobileStyle = '@media(max-width:768px){.test{font-size:12px;}}';
-
-		expect( cssString ).toBe(
-			`<style data-style-id="test">${ defaultStyle }${ tabletStyle }${ mobileStyle }</style>`
-		);
-	} );
-
-	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': sizePropTypeUtil.create( {
-							size: 24,
-							unit: 'px',
-						} ),
-					},
-				},
-
-				{
-					meta: {
-						breakpoint: null,
-						state: 'hover',
-					},
-					props: {
-						'font-size': sizePropTypeUtil.create( {
-							size: 18,
-							unit: 'px',
-						} ),
-					},
-				},
-
-				{
-					meta: {
-						breakpoint: 'mobile',
-						state: 'focus',
-					},
-					props: {
-						'font-size': sizePropTypeUtil.create( {
-							size: 12,
-							unit: 'px',
-						} ),
-					},
-				},
-			],
-		};
-
-		// Act.
-		const cssString = await render( {
-			styles: [ styleDef ],
-			transformers,
-			breakpoints: mockBreakpoints,
-		} );
-
-		// 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 skip disabled props', async () => {
-		// Arrange.
-		const styleDef = createMockStyleDefinition( {
-			id: 'test',
-			props: {
-				'font-size': sizePropTypeUtil.create( {
-					size: 24,
-					unit: 'px',
-				} ),
-				padding: sizePropTypeUtil.create(
-					{
-						size: 24,
-						unit: 'px',
-					},
-					{ disabled: true }
-				),
-			},
-		} );
-
-		// Act.
-		const cssString = await render( {
-			styles: [ styleDef ],
-			transformers,
-			breakpoints: mockBreakpoints,
-		} );
-
-		// Assert.
-		expect( cssString ).toBe( `<style data-style-id="test">.test{font-size:24px;}</style>` );
-	} );
-
-	it( 'should fallback to default value when there is no value', async () => {
-		// Arrange.
-		const styleDef = createMockStyleDefinition( {
-			id: 'test',
-			props: {},
-		} );
-
-		jest.mocked( getStylesSchema ).mockReturnValue( {
-			overflow: {
-				kind: 'plain',
-				key: 'string',
-				default: {
-					$$type: 'string',
-					value: 'hidden',
-				},
-				settings: {},
-				meta: {},
-			},
-		} );
-
-		// Act.
-		const cssString = await render( {
-			styles: [ styleDef ],
-			transformers,
-			breakpoints: mockBreakpoints,
-		} );
-
-		// Assert.
-		expect( cssString ).toBe( `<style data-style-id="test">.test{overflow:hidden;}</style>` );
-	} );
-
-	it( 'should skip props that are not in the schema', async () => {
-		// Arrange.
-		const styleDef = createMockStyleDefinition( {
-			id: 'test',
-			props: {
-				'font-size': sizePropTypeUtil.create( {
-					size: 24,
-					unit: 'px',
-				} ),
-				'not-a-css-prop': sizePropTypeUtil.create( {
-					size: 24,
-					unit: 'px',
-				} ),
-			},
-		} );
-
-		// Act.
-		const cssString = await render( {
-			styles: [ styleDef ],
-			transformers,
-			breakpoints: mockBreakpoints,
-		} );
-
-		// Assert.
-		expect( cssString ).toBe( `<style data-style-id="test">.test{font-size:24px;}</style>` );
-	} );
-
-	it( "should skip props that don't have a transformer", async () => {
-		// Arrange.
-		const styleDef = createMockStyleDefinition( {
-			id: 'test',
-			props: {
-				'font-size': sizePropTypeUtil.create( {
-					size: 24,
-					unit: 'px',
-				} ),
-				padding: {
-					$$type: 'invalid',
-					value: 'invalid',
-				},
-			},
-		} );
-
-		// Act.
-		const cssString = await render( {
-			styles: [ styleDef ],
-			transformers,
-			breakpoints: mockBreakpoints,
-		} );
-
-		// Assert.
-		expect( cssString ).toBe( `<style data-style-id="test">.test{font-size:24px;}</style>` );
-	} );
-
-	it( 'should skip props when their transformer throws an error', async () => {
-		// Arrange.
-		const styleDef = createMockStyleDefinition( {
-			id: 'test',
-			props: {
-				'font-size': '24px',
-				padding: sizePropTypeUtil.create( {
-					size: 24,
-					unit: 'px',
-				} ),
-			},
-		} );
-
-		// Act.
-		const cssString = await render( {
-			styles: [ styleDef ],
-			transformers: {
-				size: () => {
-					throw new Error( 'Test error' );
-				},
-			},
-			breakpoints: mockBreakpoints,
-		} );
-
-		// Assert.
-		expect( cssString ).toBe( `<style data-style-id="test">.test{font-size:24px;}</style>` );
-	} );
-
-	it( 'should consider 0 as valid value', async () => {
-		// Arrange.
-		const styleDef = createMockStyleDefinition( {
-			id: 'test',
-			props: {
-				'font-size': sizePropTypeUtil.create( {
-					size: 0,
-					unit: 'px',
-				} ),
-			},
-		} );
-
-		// Act.
-		const cssString = await render( {
-			styles: [ styleDef ],
-			transformers,
-			breakpoints: mockBreakpoints,
-		} );
-
-		// Assert.
-		expect( cssString ).toBe( `<style data-style-id="test">.test{font-size:0px;}</style>` );
-	} );
-
-	it( 'should add selector prefix to the output', async () => {
-		// Arrange.
-		const styleDef = createMockStyleDefinition( {
-			id: 'test',
-			props: {
-				'font-size': sizePropTypeUtil.create( {
-					size: 24,
-					unit: 'px',
-				} ),
-			},
-		} );
-
-		// Act.
-		const cssString = await render( {
-			styles: [ styleDef ],
-			transformers,
-			selectorPrefix: '.elementor-prefix',
-			breakpoints: mockBreakpoints,
-		} );
-
-		// Assert.
-		expect( cssString ).toBe( `<style data-style-id="test">.elementor-prefix .test{font-size:24px;}</style>` );
-	} );
-} );
-
-const backgroundExpectationWrapper = ( id: string, bgShorthand: string ) => {
-	return `<style data-style-id="${ id }">.${ id }{background:${ bgShorthand };}</style>`;
-};
-
-describe( 'background-transformer', () => {
-	beforeEach( () => {
-		jest.mocked( getStylesSchema ).mockReturnValue( stylesSchemaMock );
-	} );
-
-	it( 'should transform background color', async () => {
-		// Arrange.
-		const styleDef = createMockStyleDefinition( {
-			id: 'bg-color',
-			props: {
-				background: backgroundPropTypeUtil.create( {
-					color: colorPropTypeUtil.create( '#ee00ff' ),
-				} ),
-			},
-		} );
-
-		// Act.
-		const cssString = await render( {
-			styles: [ styleDef ],
-			transformers,
-			breakpoints: mockBreakpoints,
-		} );
-
-		// Assert.
-		expect( cssString ).toBe( backgroundExpectationWrapper( 'bg-color', '#ee00ff' ) );
-	} );
-
-	it( 'should transform background overlay (repeater)', async () => {
-		// Arrange.
-		jest.mocked( getMediaAttachment ).mockImplementation( ( args ) => {
-			return Promise.resolve( { url: `image-url-${ args.id }` } ) as never;
-		} );
-
-		const styleDef = createMockStyleDefinition( {
-			id: 'test',
-			props: {
-				background: backgroundPropTypeUtil.create( {
-					'background-overlay': backgroundOverlayPropTypeUtil.create( [
-						backgroundColorOverlayPropTypeUtil.create( 'blue' ),
-						backgroundColorOverlayPropTypeUtil.create( 'yellow' ),
-						backgroundImageOverlayPropTypeUtil.create( {
-							'image-src': imageSrcPropTypeUtil.create( {
-								id: imageAttachmentIdPropType.create( 123 ),
-								url: null,
-							} ),
-							size: 'contain',
-						} ),
-						backgroundImageOverlayPropTypeUtil.create( {
-							'image-src': imageSrcPropTypeUtil.create( {
-								id: imageAttachmentIdPropType.create( 123 ),
-								url: null,
-							} ),
-							size: 'auto',
-							position: 'center right',
-							repeat: 'repeat-x',
-							attachment: 'fixed',
-						} ),
-					] ),
-				} ),
-			},
-		} );
-
-		// Act.
-		const cssString = await render( {
-			styles: [ styleDef ],
-			transformers,
-			breakpoints: mockBreakpoints,
-		} );
-
-		// Assert.
-		expect( cssString ).toBe(
-			backgroundExpectationWrapper(
-				'test',
-				'linear-gradient(blue, blue),linear-gradient(yellow, yellow),url(image-url-123) 0% 0% / contain,url(image-url-123) repeat-x fixed center right / auto'
-			)
-		);
-	} );
-
-	it( 'should transform background (including also background-overlay & color)', async () => {
-		// Arrange.
-		jest.mocked( getMediaAttachment ).mockImplementation( ( args ) => {
-			return Promise.resolve( { url: `image-url-${ args.id }` } ) as never;
-		} );
-
-		const styleDef = createMockStyleDefinition( {
-			id: 'test',
-			props: {
-				background: backgroundPropTypeUtil.create( {
-					color: colorPropTypeUtil.create( '#000' ),
-					'background-overlay': backgroundOverlayPropTypeUtil.create( [
-						backgroundColorOverlayPropTypeUtil.create( '#FFFFFF' ),
-						backgroundColorOverlayPropTypeUtil.create( '#FF2222' ),
-						backgroundImageOverlayPropTypeUtil.create( {
-							'image-src': imageSrcPropTypeUtil.create( {
-								id: imageAttachmentIdPropType.create( 123 ),
-								url: null,
-							} ),
-							size: 'contain',
-						} ),
-						backgroundImageOverlayPropTypeUtil.create( {
-							'image-src': imageSrcPropTypeUtil.create( {
-								id: imageAttachmentIdPropType.create( 123 ),
-								url: null,
-							} ),
-							size: 'auto',
-							position: 'center right',
-							repeat: 'repeat-y',
-							attachment: 'fixed',
-						} ),
-					] ),
-				} ),
-			},
-		} );
-
-		// Act.
-		const cssString = await render( {
-			styles: [ styleDef ],
-			transformers,
-			breakpoints: mockBreakpoints,
-		} );
-
-		// Assert.
-		expect( cssString ).toBe(
-			backgroundExpectationWrapper(
-				'test',
-				'linear-gradient(#FFFFFF, #FFFFFF),linear-gradient(#FF2222, #FF2222),url(image-url-123) 0% 0% / contain,url(image-url-123) repeat-y fixed center right / auto #000'
-			)
-		);
-	} );
-} );
-
-describe( 'background-overlay-transformer', () => {
-	it( 'should return empty if background-overlay is invalid', () => {
-		// Arrange.
-		const initialData = {
-			'background-overlay': null,
-		};
-
-		// Act.
-		const result = backgroundTransformer( initialData, { key: 'background-overlay' } );
-
-		// Assert.
-		expect( result ).toBe( '' );
-	} );
-
-	it( 'should transform only valid background color', () => {
-		// Arrange.
-		const backgroundColor = 'rgba(255, 0, 255, 0.9)';
-
-		const initialData = {
-			color: backgroundColor,
-		};
-
-		// Act.
-		const result = backgroundTransformer( initialData, { key: 'background-overlay' } );
-
-		// Assert.
-		expect( result ).toBe( backgroundColor );
-	} );
-
-	it( 'should transform only background overlay color', () => {
-		// Arrange.
-		const backgroundOverlayColor = 'rgba(0, 0, 0, 0.5)';
-		const expected = `linear-gradient(${ backgroundOverlayColor }, ${ backgroundOverlayColor })`;
-
-		const initialData = {
-			'background-overlay': `linear-gradient(${ backgroundOverlayColor }, ${ backgroundOverlayColor })`,
-		};
-
-		// Act.
-		const result = backgroundTransformer( initialData, { key: 'background-overlay' } );
-
-		// Assert.
-		expect( result ).toBe( expected );
-	} );
-} );
-
-const mockBreakpoints = {
-	tablet: {
-		id: 'tablet',
-		width: 992,
-		label: 'Tablet Portrait',
-		type: 'max-width',
-	},
-	mobile: {
-		id: 'mobile',
-		width: 768,
-		label: 'Mobile Portrait',
-		type: 'max-width',
-	},
-} as BreakpointsMap;