@elementor/editor-editing-panel 0.5.1 → 0.6.0

package/src/components/controls/control-types/__tests__/select-control.test.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { ControlContext } from '../../../../contexts/control-context';
-import { SelectControl } from '../select-control';
-
-describe( 'SelectControl', () => {
-	it( 'should pass the updated payload when select value changes', () => {
-		// Arrange.
-		const setValue = jest.fn();
-		const options = [
-			{ label: 'Option 1', value: 'value1' },
-			{ label: 'Option 2', value: 'value2' },
-		];
-
-		// Act.
-		render(
-			<ControlContext.Provider value={ { setValue, value: 'value1', bind: 'select' } }>
-				<SelectControl options={ options } />
-			</ControlContext.Provider>
-		);
-
-		const select = screen.getByRole( 'combobox' );
-
-		// Assert.
-		expect( screen.getByText( 'Option 1' ) ).toBeInTheDocument();
-		expect( screen.queryByText( 'Option 2' ) ).not.toBeInTheDocument();
-
-		// Act.
-		fireEvent.mouseDown( select );
-
-		const option2 = screen.getByText( 'Option 2' );
-
-		fireEvent.click( option2 );
-
-		// Assert.
-		expect( setValue ).toHaveBeenCalledWith( 'value2' );
-	} );
-
-	it( 'should disable the select options', () => {
-		// Arrange.
-		const setValue = jest.fn();
-		const options = [
-			{ label: 'Option 1', value: 'value1' },
-			{ label: 'Option 2', value: 'value2', disabled: true },
-			{ label: 'Option 3', value: 'value3', disabled: false },
-		];
-
-		// Act.
-		render(
-			<ControlContext.Provider value={ { setValue, value: '', bind: 'select' } }>
-				<SelectControl options={ options } />
-			</ControlContext.Provider>
-		);
-
-		const select = screen.getByRole( 'combobox' );
-
-		// Act.
-		fireEvent.mouseDown( select );
-
-		const option2 = screen.getByText( 'Option 2' );
-		const option3 = screen.getByText( 'Option 3' );
-
-		// Assert.
-		expect( option2 ).toHaveAttribute( 'aria-disabled', 'true' );
-		expect( option3 ).not.toHaveAttribute( 'aria-disabled', 'true' );
-	} );
-} );

package/src/components/controls/control-types/__tests__/text-area-control.test.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { TextAreaControl } from '../text-area-control';
-import { ControlContext } from '../../../../contexts/control-context';
-
-describe( 'TextAreaControl', () => {
-	it( 'should pass the updated payload when input value changes', () => {
-		// Arrange.
-		const setValue = jest.fn();
-
-		// Act.
-		render(
-			<ControlContext.Provider value={ { setValue, value: 'Hi', bind: 'text' } }>
-				<TextAreaControl placeholder="type text here" />
-			</ControlContext.Provider>
-		);
-
-		const input = screen.getByRole( 'textbox' );
-
-		// Assert.
-		expect( input ).toHaveValue( 'Hi' );
-
-		// Act.
-		fireEvent.input( input, { target: { value: 'Cool Heading!' } } );
-
-		// Assert.
-		expect( setValue ).toHaveBeenCalledWith( 'Cool Heading!' );
-	} );
-} );

package/src/components/editing-panel.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import useSelectedElements from '../hooks/use-selected-elements';
-import useElementType from '../hooks/use-element-type';
-import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
-import { SelectControl } from './controls/control-types/select-control';
-import { TextAreaControl } from './controls/control-types/text-area-control';
-import { SettingsControl } from '../components/controls/settings-control';
-import { Stack } from '@elementor/ui';
-import { ElementContext } from '../contexts/element-context';
-
-const controlTypes = {
-	select: SelectControl,
-	textarea: TextAreaControl,
-};
-
-export const EditingPanel = () => {
-	const elements = useSelectedElements();
-
-	const [ selectedElement ] = elements;
-
-	const elementType = useElementType( selectedElement?.type );
-
-	if ( elements.length !== 1 || ! elementType ) {
-		return null;
-	}
-
-	/* translators: %s: Element type title. */
-	const panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', elementType.title );
-
-	return (
-		<Panel>
-			<PanelHeader>
-				<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>
-			</PanelHeader>
-			<PanelBody>
-				<ElementContext element={ selectedElement }>
-					<Stack spacing={ 2 }>
-						{ elementType.controls.map( ( control ) => {
-							if ( control.type === 'control' ) {
-								const ControlComponent =
-									controlTypes[ control.value.type as keyof typeof controlTypes ];
-
-								if ( ! ControlComponent ) {
-									return null;
-								}
-
-								return (
-									<SettingsControl key={ control.value.bind } bind={ control.value.bind }>
-										<SettingsControl.Label>{ control.value.label }</SettingsControl.Label>
-										<ControlComponent
-											/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-											{ ...( control.value.props as any ) }
-										/>
-									</SettingsControl>
-								);
-							}
-
-							return null;
-						} ) }
-					</Stack>
-				</ElementContext>
-			</PanelBody>
-		</Panel>
-	);
-};

package/src/contexts/__tests__/control-context.test.tsx

@@ -1,14 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { useControl } from '../control-context';
-
-describe( 'ControlContext', () => {
-	it( 'should throw error if used outside of ControlContext', () => {
-		// Act & Assert.
-		expect( () => {
-			renderHook( () => useControl( '' ) );
-		} ).toThrow( 'useControl must be used within a ControlContext' );
-
-		// Suppress console.error from React.
-		expect( console ).toHaveErrored();
-	} );
-} );

package/src/hooks/__tests__/use-widget-settings.test.ts

@@ -1,128 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { useWidgetSettings } from '../use-widget-settings';
-import { ExtendedWindow } from '../../sync/types';
-import { mockV1Element } from '../../__tests__/utils';
-import { dispatchCommandAfter } from 'test-utils';
-import getContainer from '../../sync/get-container';
-
-jest.mock( '../../sync/get-container' );
-
-describe( 'useWidgetSettings', () => {
-	beforeEach( () => {
-		const extendedWindow = window as unknown as ExtendedWindow;
-
-		extendedWindow.elementor = {
-			widgetsCache: {
-				'v1-heading': {
-					controls: [],
-					title: 'Heading',
-				},
-				'v2-heading': {
-					controls: [],
-					atomic_controls: [],
-					title: 'Heading',
-				},
-				'v2-container': {
-					controls: [],
-					atomic_controls: [],
-					title: 'Container',
-				},
-			},
-		};
-	} );
-
-	it( 'should return the value of the setting', () => {
-		// Arrange.
-		const bind = 'title';
-		const element = { id: 'element-id' };
-		jest.mocked( getContainer ).mockReturnValue( mockV1Element( { settings: { [ bind ]: 'Hello, World!' } } ) );
-
-		// Act.
-		const result = renderHook( () => useWidgetSettings( { id: element.id, bind } ) ).result.current;
-
-		// Assert.
-		expect( result ).toEqual( 'Hello, World!' );
-	} );
-
-	it( 'should return null if the setting is not found', () => {
-		// Arrange.
-		const bind = 'title';
-		const element = { id: 'element-id' };
-		jest.mocked( getContainer ).mockReturnValue( mockV1Element( { settings: {} } ) );
-
-		// Act.
-		const result = renderHook( () => useWidgetSettings( { id: element.id, bind } ) ).result.current;
-
-		// Assert.
-		expect( result ).toEqual( null );
-	} );
-
-	it( 'should update the state value on settings change', () => {
-		// Arrange.
-		const bind = 'title';
-		const element = { id: 'element-id' };
-		jest.mocked( getContainer ).mockReturnValue( mockV1Element( { settings: { [ bind ]: 'Hello, World!' } } ) );
-
-		// Act.
-		const { result } = renderHook( () => useWidgetSettings( { id: element.id, bind } ) );
-
-		// Assert.
-		expect( result.current ).toEqual( 'Hello, World!' );
-
-		// Act.
-		act( () => {
-			jest.mocked( getContainer ).mockReturnValue(
-				mockV1Element( { settings: { [ bind ]: 'Goodbye, World!' } } )
-			);
-			dispatchCommandAfter( 'document/elements/settings' );
-		} );
-
-		// Assert.
-		expect( result.current ).toEqual( 'Goodbye, World!' );
-	} );
-
-	it( 'should get new snapshot for different elements', () => {
-		// Arrange.
-		jest.mocked( getContainer ).mockImplementation(
-			( id: string ) =>
-				( {
-					'element-id-1': mockV1Element( { settings: { prop: 'value' } } ),
-					'element-id-2': mockV1Element( { settings: { prop: 'value-2' } } ),
-				} )[ id ] || null
-		);
-
-		// Act.
-		const { result, rerender } = renderHook( ( props ) => useWidgetSettings( props ), {
-			initialProps: { bind: 'prop', id: 'element-id-1' },
-		} );
-
-		// Assert.
-		expect( result.current ).toEqual( 'value' );
-
-		// Act.
-		rerender( { bind: 'prop', id: 'element-id-2' } );
-
-		// Assert.
-		expect( result.current ).toEqual( 'value-2' );
-	} );
-
-	it( 'should get new snapshot for different binds', () => {
-		// Arrange.
-		jest.mocked( getContainer ).mockReturnValue(
-			mockV1Element( { settings: { prop: 'value', 'prop-2': 'value-2' } } )
-		);
-
-		// Act.
-		const { rerender, result } = renderHook( ( props ) => useWidgetSettings( props ), {
-			initialProps: { bind: 'prop', id: 'element-id' },
-		} );
-
-		expect( result.current ).toEqual( 'value' );
-
-		// Act.
-		rerender( { bind: 'prop-2', id: 'element-id' } );
-
-		// Assert.
-		expect( result.current ).toEqual( 'value-2' );
-	} );
-} );

package/src/sync/__tests__/get-container.test.ts

@@ -1,40 +0,0 @@
-import getContainer from '../get-container';
-import { ExtendedWindow } from '../types';
-
-describe( 'getContainer', () => {
-	const mockGetContainer = jest.fn();
-
-	beforeEach( () => {
-		const extendedWindow = window as unknown as ExtendedWindow;
-
-		extendedWindow.elementor = {
-			getContainer: mockGetContainer,
-		};
-	} );
-
-	it( 'should return the container', () => {
-		// Arrange.
-		const elementID = '1-heading';
-		const container = { id: elementID };
-		mockGetContainer.mockReturnValue( container );
-
-		// Act.
-		const result = getContainer( elementID );
-
-		// Assert.
-		expect( result ).toBe( container );
-	} );
-
-	it( 'should return null if the container is not found', () => {
-		// Arrange.
-		const elementID = '1-heading';
-		const container = undefined;
-		mockGetContainer.mockReturnValue( container );
-
-		// Act.
-		const result = getContainer( elementID );
-
-		// Assert.
-		expect( result ).toBe( null );
-	} );
-} );

package/src/sync/__tests__/should-use-v2-panel.test.ts

@@ -1,95 +0,0 @@
-import { ExtendedWindow } from '../types';
-import { shouldUseV2Panel } from '../should-use-v2-panel';
-import { mockV1Element } from '../../__tests__/utils';
-
-describe( 'shouldUseV2Panel', () => {
-	const getElements = jest.fn();
-
-	beforeEach( () => {
-		const extendedWindow = window as unknown as ExtendedWindow;
-
-		extendedWindow.elementor = {
-			selection: {
-				getElements,
-			},
-			widgetsCache: {
-				'v1-heading': {
-					controls: {},
-					title: 'V1 Heading',
-				},
-				'v2-heading': {
-					controls: {},
-					atomic_controls: [],
-					title: 'V2 Heading',
-				},
-				'v2-container': {
-					controls: {},
-					atomic_controls: [],
-					title: 'V2 Container',
-				},
-			},
-		};
-	} );
-
-	it( 'should return false if there are no selectedElements', () => {
-		// Arrange.
-		getElements.mockReturnValue( [] );
-
-		// Assert.
-		expect( shouldUseV2Panel() ).toBe( false );
-	} );
-
-	it( 'should return true for v2 element', () => {
-		// Arrange.
-		getElements.mockReturnValue( [ mockV1Element( { model: { widgetType: 'v2-heading' } } ) ] );
-
-		// Assert.
-		expect( shouldUseV2Panel() ).toBe( true );
-	} );
-
-	it( 'should return true for v2 element', () => {
-		// Arrange.
-		getElements.mockReturnValue( [ mockV1Element( { model: { elType: 'v2-container' } } ) ] );
-
-		// Assert.
-		expect( shouldUseV2Panel() ).toBe( true );
-	} );
-
-	it( 'should return false for v1 element', () => {
-		// Arrange.
-		getElements.mockReturnValue( [ mockV1Element( { model: { widgetType: 'v1-heading' } } ) ] );
-
-		// Assert.
-		expect( shouldUseV2Panel() ).toBe( false );
-	} );
-
-	it( 'should return false for non-existing element', () => {
-		// Arrange.
-		getElements.mockReturnValue( [ mockV1Element( { model: { widgetType: 'non-existing' } } ) ] );
-
-		// Assert.
-		expect( shouldUseV2Panel() ).toBe( false );
-	} );
-
-	it( 'should return false if there is more than 1 selected element with mixed versions', () => {
-		// Arrange.
-		getElements.mockReturnValue( [
-			mockV1Element( { model: { widgetType: 'v2-heading' } } ),
-			mockV1Element( { model: { widgetType: 'v1-heading' } } ),
-		] );
-
-		// Assert.
-		expect( shouldUseV2Panel() ).toBe( false );
-	} );
-
-	it( 'should return false if there is more than 1 selected element with same version', () => {
-		// Arrange.
-		getElements.mockReturnValue( [
-			mockV1Element( { model: { widgetType: 'v2-heading' } } ),
-			mockV1Element( { model: { widgetType: 'v2-container' } } ),
-		] );
-
-		// Assert.
-		expect( shouldUseV2Panel() ).toBe( false );
-	} );
-} );