Skip to content

Commit

Permalink
[Mobile] - Adds useEditorWrapperStyles hook (#49616) (#50164)
Browse files Browse the repository at this point in the history 
* Mobile - Adds initial useEditorWrapperStyles hook

* Mobile - Update useEditorWrapperStyles hook to take into account custom marginHorizontal values

* Mobile - useEditorWrapperStyles hook - Remove helper tests and exports

* Mobile - useEditorWrapperStyles - Move max width values from the SCSS styles to the JavaScript side and update tests

* Mobile - useEditorWrapperStyles - Update helpers to use an options object param instead of first level params

* Mobile - useEditorWrapperStyles - Update wrapperStyles logic to unify canvasStyles logic
  • Loading branch information
Gerardo Pacheco authored May 3, 2023
1 parent 847f69a commit bf0a21f
Show file tree
Hide file tree
Showing 3 changed files with 543 additions and 0 deletions.
282 changes: 282 additions & 0 deletions packages/block-editor/src/hooks/test/use-editor-wrapper-styles.native.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,282 @@
/**
* External dependencies
*/
import { renderHook } from '@testing-library/react-native';

/**
* WordPress dependencies
*/
import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
import { registerCoreBlocks } from '@wordpress/block-library';

/**
* Internal dependencies
*/
import { useEditorWrapperStyles } from '../use-editor-wrapper-styles';

jest.mock( '../use-editor-wrapper-styles.scss', () => ( {
'use-editor-wrapper-styles': {
width: '100%',
maxWidth: 580,
alignSelf: 'center',
},
'use-editor-wrapper-styles--reversed': {
flexDirection: 'column-reverse',
width: '100%',
maxWidth: 580,
},
} ) );

const defaultCanvasStyles = {
width: '100%',
maxWidth: 580,
alignSelf: 'center',
};

describe( 'useEditorWrapperStyles', () => {
beforeAll( () => {
// Register all core blocks
registerCoreBlocks();
} );

afterAll( () => {
// Clean up registered blocks
getBlockTypes().forEach( ( block ) => {
unregisterBlockType( block.name );
} );
} );

it( 'should return the default wrapper styles when no props are set', () => {
// Arrange
jest.spyOn(
require( 'react-native' ),
'useWindowDimensions'
).mockReturnValue( { width: 900, height: 600 } );

// Act
const { result } = renderHook( () => useEditorWrapperStyles() );

// Assert
expect( result.current[ 0 ] ).toEqual( [
expect.objectContaining( defaultCanvasStyles ),
{},
] );
} );

it( 'should return the correct wrapper styles and margin for wide (medium) alignment', () => {
// Arrange
jest.spyOn(
require( 'react-native' ),
'useWindowDimensions'
).mockReturnValue( { width: 900, height: 600 } );

// Act
const { result } = renderHook( () =>
useEditorWrapperStyles( {
align: 'wide',
blockName: 'core/group',
blockWidth: 800,
marginHorizontal: 16,
} )
);

// Assert
expect( result.current[ 0 ] ).toEqual( [
expect.objectContaining( defaultCanvasStyles ),
expect.objectContaining( {
maxWidth: 770,
} ),
] );
expect( result.current[ 1 ] ).toEqual( 16 );
} );

it( 'should return the correct wrapper styles and margin for wide (landscape) alignment', () => {
// Arrange
jest.spyOn(
require( 'react-native' ),
'useWindowDimensions'
).mockReturnValue( { width: 800, height: 600 } );

// Act
const { result } = renderHook( () =>
useEditorWrapperStyles( {
align: 'wide',
blockName: 'core/group',
blockWidth: 700,
marginHorizontal: 16,
} )
);

// Assert
expect( result.current[ 0 ] ).toEqual( [
expect.objectContaining( defaultCanvasStyles ),
expect.objectContaining( {
maxWidth: 662,
} ),
] );
expect( result.current[ 1 ] ).toEqual( 16 );
} );

it( 'should return the correct wrapper styles and margin for wide alignment', () => {
// Arrange
jest.spyOn(
require( 'react-native' ),
'useWindowDimensions'
).mockReturnValue( { width: 1194, height: 834 } );

// Act
const { result } = renderHook( () =>
useEditorWrapperStyles( {
align: 'wide',
blockName: 'core/group',
blockWidth: 800,
marginHorizontal: 16,
} )
);

// Assert
expect( result.current[ 0 ] ).toEqual( [
expect.objectContaining( defaultCanvasStyles ),
expect.objectContaining( {
maxWidth: 1054,
} ),
] );
expect( result.current[ 1 ] ).toEqual( 16 );
} );

it( 'should return the correct wrapper styles and margin for full alignment', () => {
// Arrange
jest.spyOn(
require( 'react-native' ),
'useWindowDimensions'
).mockReturnValue( { width: 800, height: 600 } );

// Act
const { result } = renderHook( () =>
useEditorWrapperStyles( {
align: 'full',
blockName: 'core/cover',
blockWidth: 700,
marginHorizontal: 16,
} )
);

// Assert
expect( result.current[ 0 ] ).toEqual( [
expect.objectContaining( defaultCanvasStyles ),
expect.objectContaining( {
maxWidth: '100%',
} ),
] );
expect( result.current[ 1 ] ).toEqual( 0 );
} );

it( 'should return the correct wrapper styles and margin for left alignment', () => {
// Arrange
jest.spyOn(
require( 'react-native' ),
'useWindowDimensions'
).mockReturnValue( { width: 800, height: 600 } );

// Act
const { result } = renderHook( () =>
useEditorWrapperStyles( { align: 'left', marginHorizontal: 16 } )
);

// Assert
expect( result.current[ 0 ] ).toEqual( [
expect.objectContaining( defaultCanvasStyles ),
{},
] );
expect( result.current[ 1 ] ).toEqual( 16 );
} );

it( 'should return the correct wrapper styles and margin for center alignment', () => {
// Arrange
jest.spyOn(
require( 'react-native' ),
'useWindowDimensions'
).mockReturnValue( { width: 640, height: 960 } );

// Act
const { result } = renderHook( () =>
useEditorWrapperStyles( { align: 'center', marginHorizontal: 16 } )
);

// Assert
expect( result.current[ 0 ] ).toEqual( [
expect.objectContaining( defaultCanvasStyles ),
{},
] );
expect( result.current[ 1 ] ).toEqual( 16 );
} );

it( 'should return the correct wrapper styles and margin for right alignment', () => {
// Arrange
jest.spyOn(
require( 'react-native' ),
'useWindowDimensions'
).mockReturnValue( { width: 960, height: 640 } );

// Act
const { result } = renderHook( () =>
useEditorWrapperStyles( { align: 'right', marginHorizontal: 16 } )
);

// Assert
expect( result.current[ 0 ] ).toEqual( [
expect.objectContaining( defaultCanvasStyles ),
{},
] );
expect( result.current[ 1 ] ).toEqual( 16 );
} );

it( 'should return the correct wrapper styles and margin when reversed is true', () => {
// Arrange
jest.spyOn(
require( 'react-native' ),
'useWindowDimensions'
).mockReturnValue( { width: 800, height: 600 } );

// Act
const { result } = renderHook( () =>
useEditorWrapperStyles( { reversed: true, marginHorizontal: 16 } )
);

// Assert
expect( result.current[ 0 ] ).toEqual( [
expect.objectContaining( {
flexDirection: 'column-reverse',
width: '100%',
maxWidth: 580,
} ),
{},
] );
expect( result.current[ 1 ] ).toEqual( 16 );
} );

it( 'should return the correct wrapper styles and margin when contentResizeMode is set', () => {
// Arrange
jest.spyOn(
require( 'react-native' ),
'useWindowDimensions'
).mockReturnValue( { width: 800, height: 600 } );

// Act
const { result } = renderHook( () =>
useEditorWrapperStyles( {
contentResizeMode: 'stretch',
marginHorizontal: 16,
} )
);

// Assert
expect( result.current[ 0 ] ).toEqual( [
expect.objectContaining( {
flex: 1,
} ),
{},
] );
expect( result.current[ 1 ] ).toEqual( 16 );
} );
} );
Loading

0 comments on commit bf0a21f

Please sign in to comment.