@elementor/editor-responsive 0.10.5 → 0.11.0

package/src/sync/__tests__/sync-store.test.ts

@@ -1,158 +0,0 @@
-import syncStore from '../sync-store';
-import { slice } from '../../store';
-import { BreakpointId, ExtendedWindow } from '../../types';
-import { __createStore, __dispatch, __registerSlice, SliceState, Store } from '@elementor/store';
-import { selectActiveBreakpoint, selectEntities } from '../../store/selectors';
-
-describe( '@elementor/editor-responsive - Sync Store', () => {
-	let store: Store<SliceState<typeof slice>>;
-	let extendedWindow: ExtendedWindow;
-
-	beforeEach( () => {
-		__registerSlice( slice );
-		store = __createStore();
-
-		syncStore();
-
-		extendedWindow = ( window as unknown as ExtendedWindow );
-	} );
-
-	it( 'should initialize the store when V1 is ready', () => {
-		// Arrange.
-		mockV1BreakpointsConfig();
-
-		// Act.
-		dispatchEvent( new CustomEvent( 'elementor/initialized' ) );
-
-		// Assert.
-		expect( selectEntities( store.getState() ) ).toEqual( {
-			desktop: { id: 'desktop', label: 'Desktop' },
-			mobile: { id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
-			tablet: { id: 'tablet', label: 'Tablet Portrait', width: 1024, type: 'max-width' },
-			laptop: { id: 'laptop', label: 'Laptop', width: 1366, type: 'max-width' },
-			widescreen: { id: 'widescreen', label: 'Widescreen', width: 2400, type: 'min-width' },
-			mobile_extra: { id: 'mobile_extra', label: 'Mobile Landscape', width: 880, type: 'max-width' },
-			tablet_extra: { id: 'tablet_extra', label: 'Tablet Landscape', width: 1200, type: 'max-width' },
-		} );
-
-		expect( extendedWindow.elementor.channels.deviceMode.request ).toHaveBeenCalledTimes( 1 );
-		expect( extendedWindow.elementor.channels.deviceMode.request ).toHaveBeenCalledWith( 'currentMode' );
-
-		expect( selectActiveBreakpoint( store.getState() ) ).toEqual( {
-			id: 'mobile',
-			label: 'Mobile Portrait',
-			width: 767,
-			type: 'max-width',
-		} );
-	} );
-
-	it( 'should initialize an empty store when V1 breakpoints config is not available', () => {
-		// Act.
-		dispatchEvent( new CustomEvent( 'elementor/initialized' ) );
-
-		// Assert.
-		expect( selectEntities( store.getState() ) ).toEqual( {} );
-	} );
-
-	it( 'should sync the active breakpoint on change', () => {
-		// Arrange.
-		mockV1BreakpointsConfig();
-
-		__dispatch( slice.actions.init( {
-			entities: [
-				{ id: 'desktop', label: 'Desktop' },
-				{ id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
-			],
-			activeId: 'mobile',
-		} ) );
-
-		// Act - Mock a change.
-		jest.mocked( extendedWindow.elementor.channels.deviceMode.request ).mockReturnValue( 'desktop' );
-		dispatchEvent( new CustomEvent( 'elementor/device-mode/change' ) );
-
-		// Assert.
-		expect( selectActiveBreakpoint( store.getState() ) ).toEqual( { id: 'desktop', label: 'Desktop' } );
-	} );
-
-	it( "should not change the active breakpoint when it's empty", () => {
-		// Arrange.
-		mockV1BreakpointsConfig();
-
-		__dispatch( slice.actions.init( {
-			entities: [
-				{ id: 'desktop', label: 'Desktop' },
-				{ id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
-			],
-			activeId: 'desktop',
-		} ) );
-
-		// Act - Mock a change.
-		jest.mocked( extendedWindow.elementor.channels.deviceMode.request ).mockReturnValue( '' as BreakpointId );
-		dispatchEvent( new CustomEvent( 'elementor/device-mode/change' ) );
-
-		// Assert.
-		expect( selectActiveBreakpoint( store.getState() ) ).toEqual( { id: 'desktop', label: 'Desktop' } );
-	} );
-} );
-
-function mockV1BreakpointsConfig() {
-	( window as unknown as ExtendedWindow ).elementor = {
-		channels: {
-			deviceMode: { request: jest.fn( () => 'mobile' ) },
-		},
-		config: {
-			responsive: {
-				breakpoints: {
-					mobile: {
-						label: 'Mobile Portrait',
-						value: 767,
-						direction: 'max',
-						is_enabled: true,
-					},
-					mobile_extra: {
-						label: 'Mobile Landscape',
-						value: 880,
-						direction: 'max',
-						is_enabled: true,
-					},
-					tablet: {
-						label: 'Tablet Portrait',
-						value: 1024,
-						direction: 'max',
-						is_enabled: true,
-					},
-					tablet_extra: {
-						label: 'Tablet Landscape',
-						value: 1200,
-						direction: 'max',
-						is_enabled: true,
-					},
-					laptop: {
-						label: 'Laptop',
-						value: 1366,
-						direction: 'max',
-						is_enabled: true,
-					},
-					widescreen: {
-						label: 'Widescreen',
-						value: 2400,
-						direction: 'min',
-						is_enabled: true,
-					},
-				} as const,
-			},
-		},
-		editorEvents: {
-			config: {
-				elements: {},
-				locations: {},
-				names: {
-					topBar: {},
-				},
-				secondaryLocations: {},
-				triggers: {},
-			},
-			dispatchEvent: () => null,
-		},
-	};
-}

package/src/sync/sync-store.ts

@@ -1,75 +0,0 @@
-import { slice } from '../store';
-import { __dispatch } from '@elementor/store';
-import { Breakpoint, ExtendedWindow } from '../types';
-import { __privateListenTo as listenTo, v1ReadyEvent, windowEvent } from '@elementor/editor-v1-adapters';
-import { __ } from '@wordpress/i18n';
-
-export default function syncStore() {
-	syncInitialization();
-	syncOnChange();
-}
-
-function syncInitialization() {
-	const { init } = slice.actions;
-
-	listenTo(
-		v1ReadyEvent(),
-		() => {
-			__dispatch( init( {
-				entities: getBreakpoints(),
-				activeId: getActiveBreakpoint(),
-			} ) );
-		}
-	);
-}
-
-function syncOnChange() {
-	const { activateBreakpoint } = slice.actions;
-
-	listenTo(
-		deviceModeChangeEvent(),
-		() => {
-			const activeBreakpoint = getActiveBreakpoint();
-
-			__dispatch( activateBreakpoint( activeBreakpoint ) );
-		},
-	);
-}
-
-function getBreakpoints() {
-	const { breakpoints } = ( window as unknown as ExtendedWindow ).elementor?.config?.responsive || {};
-
-	if ( ! breakpoints ) {
-		return [];
-	}
-
-	const entities = Object
-		.entries( breakpoints )
-		.filter( ( [ , breakpoint ] ) => breakpoint.is_enabled )
-		.map( ( [ id, { value, direction, label } ] ) => {
-			return {
-				id,
-				label,
-				width: value,
-				type: direction === 'min' ? 'min-width' : 'max-width',
-			} as Breakpoint;
-		} );
-
-	// Desktop breakpoint is not included in V1 config.
-	entities.push( {
-		id: 'desktop',
-		label: __( 'Desktop', 'elementor' ),
-	} );
-
-	return entities;
-}
-
-function getActiveBreakpoint() {
-	const extendedWindow = window as unknown as ExtendedWindow;
-
-	return extendedWindow.elementor?.channels?.deviceMode?.request?.( 'currentMode' ) || null;
-}
-
-function deviceModeChangeEvent() {
-	return windowEvent( 'elementor/device-mode/change' );
-}