@elementor/editor-canvas 0.3.0 → 0.5.0

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

@@ -1,132 +1,705 @@
-import { transformers } from '../index';
-import createStyles from '../render';
+/* eslint-disable testing-library/render-result-naming-convention */
+import { createMockStyleDefinition } from 'test-utils';
 import {
-	breakpointsStyleMock,
-	mockBreakpoints,
-	multiVariantsStyleMock,
-	singleVariantStyleMock,
-	statesStyleMock,
-	transformableStyleMock,
-} from './__mocks__/style-definitions';
+	backgroundColorOverlayPropTypeUtil,
+	backgroundOverlayPropTypeUtil,
+	backgroundPropTypeUtil,
+	borderRadiusPropTypeUtil,
+	borderWidthPropTypeUtil,
+	boxShadowPropTypeUtil,
+	colorPropTypeUtil,
+	gapPropTypeUtil,
+	linkedDimensionsPropTypeUtil,
+	shadowPropTypeUtil,
+	sizePropTypeUtil,
+	strokePropTypeUtil,
+} from '@elementor/editor-props';
+import type { BreakpointsMap } from '@elementor/editor-responsive';
+import { type StyleDefinition } from '@elementor/editor-styles';
 
-describe( 'style renderer', () => {
-	it( 'should return a string wrapped with style tag or without', () => {
+import { getStylesSchema } from '../get-styles-schema';
+import render from '../render';
+import transformers from '../transformers';
+import backgroundTransformer from '../transformers/background-transformer';
+import { stylesSchemaMock } from './__mocks__/styles-schema';
+
+jest.mock( '../get-styles-schema' );
+
+describe( 'styles-renderer', () => {
+	beforeEach( () => {
+		jest.mocked( getStylesSchema ).mockReturnValue( stylesSchemaMock );
+	} );
+
+	/**
+	 * Prop Types
+	 */
+
+	it( 'should transform stroke (including also size, number, string & color)', () => {
+		const styleDef = createMockStyleDefinition( {
+			id: 'test',
+			props: {
+				'text-stroke': strokePropTypeUtil.create( {
+					width: sizePropTypeUtil.create( {
+						size: 1,
+						unit: 'px',
+					} ),
+					color: colorPropTypeUtil.create( '#000000' ),
+				} ),
+			},
+		} );
+
+		const cssString = 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)', () => {
 		// Arrange.
-		const styleRule = `.${ singleVariantStyleMock.id }{font-size:24px;font-weight:bold}`;
+		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 = createStyles( {
-			styles: [ singleVariantStyleMock ],
-			transformers: {},
+		const cssString = render( {
+			styles: [ styleDef ],
+			transformers,
 			breakpoints: mockBreakpoints,
 		} );
 
 		// Assert.
-		expect( cssString ).toEqual( `<style data-style-id="${ singleVariantStyleMock.id }">${ styleRule }</style>` );
+		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 support breakpoints using media queries', () => {
+	it( 'should transform linked-dimensions (including also size, number & string)', () => {
 		// Arrange.
-		const className = `.${ breakpointsStyleMock.id }`;
-		const defaultStyleRule = `${ className }{padding:24px}`;
-		const smStyleRule = `@media(max-width:768px){${ className }{padding:4px}}`;
-		const mdStyleRule = `@media(max-width:992px){${ className }{padding:16px}}`;
+		const styleDef = createMockStyleDefinition( {
+			id: 'test',
+			props: {
+				padding: linkedDimensionsPropTypeUtil.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 = 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)', () => {
+		// 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 = createStyles( {
-			styles: [ breakpointsStyleMock ],
-			transformers: {},
+		const cssString = render( {
+			styles: [ styleDef ],
+			transformers,
 			breakpoints: mockBreakpoints,
 		} );
 
 		// Assert.
-		expect( cssString ).toEqual(
-			`<style data-style-id="${ breakpointsStyleMock.id }">${ [ defaultStyleRule, smStyleRule, mdStyleRule ].join(
-				''
-			) }</style>`
+		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 support states using pseudo selectors', () => {
+	it( 'should transform border-radius (including also union, size, number & string)', () => {
 		// Arrange.
-		const className = `.${ statesStyleMock.id }`;
-		const defaultStyleRule = `${ className }{font-weight:normal}`;
-		const hoverStyleRule = `${ className }:hover{font-weight:bold}`;
-		const focusStyleRule = `${ className }:focus{color:red}`;
+		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 = createStyles( {
-			styles: [ statesStyleMock ],
-			transformers: {},
+		const cssString = render( {
+			styles: [ styleDef ],
+			transformers,
 			breakpoints: mockBreakpoints,
 		} );
 
 		// Assert.
-		expect( cssString ).toEqual(
-			`<style data-style-id="${ breakpointsStyleMock.id }">${ [
-				defaultStyleRule,
-				hoverStyleRule,
-				focusStyleRule,
-			].join( '' ) }</style>`
+		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 suppress non supported transformable values', () => {
+	it( 'should transform gap (including also size, number & string)', () => {
+		// Arrange.
+		const styleDef = createMockStyleDefinition( {
+			id: 'test',
+			props: {
+				gap: gapPropTypeUtil.create( {
+					isLinked: true,
+					row: sizePropTypeUtil.create( {
+						size: 10,
+						unit: 'px',
+					} ),
+					column: sizePropTypeUtil.create( {
+						size: 20,
+						unit: 'px',
+					} ),
+				} ),
+			},
+		} );
+
+		// Act.
+		const cssString = 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', () => {
 		// Arrange.
-		const defaultStyleRule = `.${ transformableStyleMock.id }{font-size:unset}`;
+		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 = createStyles( {
-			styles: [ transformableStyleMock ],
-			transformers: {},
+		const cssString = render( {
+			styles: [ styleDef ],
+			transformers,
 			breakpoints: mockBreakpoints,
 		} );
 
 		// Assert.
-		expect( console ).toHaveErrored();
-		expect( cssString ).toEqual(
-			`<style data-style-id="${ transformableStyleMock.id }">${ defaultStyleRule }</style>`
+		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 support known transformable values', () => {
+	it( 'should render pseudo classes', () => {
 		// Arrange.
-		const defaultStyleRule = `.${ transformableStyleMock.id }{font-size:24px}`;
+		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 = createStyles( {
-			styles: [ transformableStyleMock ],
-			transformers: { size: transformers.size },
+		const cssString = render( {
+			styles: [ styleDef ],
+			transformers,
 			breakpoints: mockBreakpoints,
 		} );
 
 		// Assert.
-		expect( cssString ).toEqual(
-			`<style data-style-id="${ transformableStyleMock.id }">${ defaultStyleRule }</style>`
+		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 support multi variants of mixed variation types', () => {
+	it( 'should skip disabled props', () => {
+		// 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 = 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', () => {
+		// 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 = 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', () => {
+		// 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 = 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", () => {
 		// Arrange.
-		const className = `.${ multiVariantsStyleMock.id }`;
-		const defaultStyleRule = `${ className }{font-size:24px;font-weight:normal}`;
-		const smStyleRule = `@media(max-width:768px){${ className }{font-size:20px}}`;
-		const hoverStyleRule = `${ className }:hover{font-weight:bold}`;
+		const styleDef = createMockStyleDefinition( {
+			id: 'test',
+			props: {
+				'font-size': sizePropTypeUtil.create( {
+					size: 24,
+					unit: 'px',
+				} ),
+				padding: {
+					$$type: 'invalid',
+					value: 'invalid',
+				},
+			},
+		} );
 
 		// Act.
-		const cssString = createStyles( {
-			styles: [ multiVariantsStyleMock ],
-			transformers: { size: transformers.size },
+		const cssString = render( {
+			styles: [ styleDef ],
+			transformers,
 			breakpoints: mockBreakpoints,
 		} );
 
 		// Assert.
-		expect( cssString ).toEqual(
-			`<style data-style-id="${ multiVariantsStyleMock.id }">${ [
-				defaultStyleRule,
-				smStyleRule,
-				hoverStyleRule,
-			].join( '' ) }</style>`
+		expect( cssString ).toBe( `<style data-style-id="test">.test{font-size:24px;}</style>` );
+	} );
+
+	it( 'should skip props when their transformer throws an error', () => {
+		// Arrange.
+		const styleDef = createMockStyleDefinition( {
+			id: 'test',
+			props: {
+				'font-size': '24px',
+				padding: sizePropTypeUtil.create( {
+					size: 24,
+					unit: 'px',
+				} ),
+			},
+		} );
+
+		// Act.
+		const cssString = 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', () => {
+		// Arrange.
+		const styleDef = createMockStyleDefinition( {
+			id: 'test',
+			props: {
+				'font-size': sizePropTypeUtil.create( {
+					size: 0,
+					unit: 'px',
+				} ),
+			},
+		} );
+
+		// Act.
+		const cssString = render( {
+			styles: [ styleDef ],
+			transformers,
+			breakpoints: mockBreakpoints,
+		} );
+
+		// Assert.
+		expect( cssString ).toBe( `<style data-style-id="test">.test{font-size:0px;}</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', () => {
+		// Arrange.
+		const styleDef = createMockStyleDefinition( {
+			id: 'bg-color',
+			props: {
+				background: backgroundPropTypeUtil.create( {
+					color: colorPropTypeUtil.create( '#ee00ff' ),
+				} ),
+			},
+		} );
+
+		// Act.
+		const cssString = render( {
+			styles: [ styleDef ],
+			transformers,
+			breakpoints: mockBreakpoints,
+		} );
+
+		// Assert.
+		expect( cssString ).toBe( backgroundExpectationWrapper( 'bg-color', '#ee00ff' ) );
+	} );
+
+	it( 'should transform background overlay (repeater)', () => {
+		// Arrange.
+		const styleDef = createMockStyleDefinition( {
+			id: 'test',
+			props: {
+				background: backgroundPropTypeUtil.create( {
+					'background-overlay': backgroundOverlayPropTypeUtil.create( [
+						backgroundColorOverlayPropTypeUtil.create( 'blue' ),
+						backgroundColorOverlayPropTypeUtil.create( 'yellow' ),
+					] ),
+				} ),
+			},
+		} );
+
+		// Act.
+		const cssString = render( {
+			styles: [ styleDef ],
+			transformers,
+			breakpoints: mockBreakpoints,
+		} );
+
+		// Assert.
+		expect( cssString ).toBe(
+			backgroundExpectationWrapper( 'test', 'linear-gradient(blue, blue),linear-gradient(yellow, yellow)' )
+		);
+	} );
+
+	it( 'should transform background (including also background-overlay & color)', () => {
+		// Arrange.
+		const styleDef = createMockStyleDefinition( {
+			id: 'test',
+			props: {
+				background: backgroundPropTypeUtil.create( {
+					color: colorPropTypeUtil.create( '#000' ),
+					'background-overlay': backgroundOverlayPropTypeUtil.create( [
+						backgroundColorOverlayPropTypeUtil.create( '#FFFFFF' ),
+						backgroundColorOverlayPropTypeUtil.create( '#FF2222' ),
+					] ),
+				} ),
+			},
+		} );
+
+		// Act.
+		const cssString = render( {
+			styles: [ styleDef ],
+			transformers,
+			breakpoints: mockBreakpoints,
+		} );
+
+		// Assert.
+		expect( cssString ).toBe(
+			backgroundExpectationWrapper(
+				'test',
+				'linear-gradient(#FFFFFF, #FFFFFF),linear-gradient(#FF2222, #FF2222) #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, '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, '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, '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;