Skip to content

Commit

Permalink
[Mobile] - RichText - Use parsed font size values when comparing new …
Browse files Browse the repository at this point in the history 
…changes (#37951)

* Mobile - RichText - Use parsed font size values when comparing new changes to avoid not matching values that generate a render loop

* Mobile - E2E - Move typography test to full tests instead of canary

* Mobile - RichText - Avoid using the fontSize value from the props if there's a font size set from the styles

* Mobile - E2E - Remove test and move some test cases into the current integration tests

* Mobile - RichTest - Update tests
  • Loading branch information
Gerardo Pacheco authored Jan 14, 2022
1 parent 4b80bb3 commit e7eb6d8
Show file tree
Hide file tree
Showing 3 changed files with 166 additions and 24 deletions.
42 changes: 33 additions & 9 deletions packages/rich-text/src/component/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -836,8 +836,14 @@ export class RichText extends Component {
this._editor.blur();
}

const currentFontSizeStyle = parseFloat( style?.fontSize );
const prevFontSizeStyle = parseFloat( prevProps?.style?.fontSize );
// For font size values changes from the font size picker
// we compare previous values to refresh the selected font size,
// this is also used when the tag name changes
// e.g Heading block and a level change like h1->h2.
const currentFontSizeStyle = this.getParsedFontSize( style?.fontSize );
const prevFontSizeStyle = this.getParsedFontSize(
prevProps?.style?.fontSize
);
const isDifferentTag = prevProps.tagName !== tagName;
if (
( currentFontSize &&
Expand Down Expand Up @@ -891,37 +897,55 @@ export class RichText extends Component {
};
}

getParsedFontSize( fontSize ) {
const { height, width } = Dimensions.get( 'window' );
const cssUnitOptions = { height, width, fontSize: DEFAULT_FONT_SIZE };

if ( ! fontSize ) {
return fontSize;
}

const selectedPxValue =
getPxFromCssUnit( fontSize, cssUnitOptions ) ?? DEFAULT_FONT_SIZE;

return parseFloat( selectedPxValue );
}

getFontSize( props ) {
const { baseGlobalStyles, tagName, fontSize, style } = props;
const tagNameFontSize =
baseGlobalStyles?.elements?.[ tagName ]?.typography?.fontSize;

let newFontSize = DEFAULT_FONT_SIZE;

// For block-based themes, get the default editor font size.
if ( baseGlobalStyles?.typography?.fontSize ) {
newFontSize = baseGlobalStyles?.typography?.fontSize;
}

// For block-based themes, get the default element font size
// e.g h1, h2.
if ( tagNameFontSize ) {
newFontSize = tagNameFontSize;
}

// For font size values provided from the styles,
// usually from values set from the font size picker.
if ( style?.fontSize ) {
newFontSize = style.fontSize;
}

if ( fontSize && ! tagNameFontSize ) {
// Fall-back to a font size provided from its props (if there's any)
// and there are no other default values to use.
if ( fontSize && ! tagNameFontSize && ! style?.fontSize ) {
newFontSize = fontSize;
}
const { height, width } = Dimensions.get( 'window' );
const cssUnitOptions = { height, width, fontSize: DEFAULT_FONT_SIZE };

// We need to always convert to px units because the selected value
// could be coming from the web where it could be stored as a different unit.
const selectedPxValue =
getPxFromCssUnit( newFontSize, cssUnitOptions ) ??
DEFAULT_FONT_SIZE;
const selectedPxValue = this.getParsedFontSize( newFontSize );

return parseFloat( selectedPxValue );
return selectedPxValue;
}

getLineHeight() {
Expand Down
65 changes: 65 additions & 0 deletions packages/rich-text/src/test/__snapshots__/index.native.js.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<RichText/> Font Size renders component with style and font size 1`] = `
"<!-- wp:paragraph {\\"style\\":{\\"color\\":{\\"text\\":\\"#fcb900\\"},\\"typography\\":{\\"fontSize\\":35.56}}} -->
<p class=\\"has-text-color\\" style=\\"color:#fcb900;font-size:35.56px\\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet ut nibh vitae ornare. Sed auctor nec augue at blandit.</p>
<!-- /wp:paragraph -->"
`;
exports[`<RichText/> Font Size should update the font size when style prop with font size property is provided 1`] = `
<View>
<TextInput
accessibilityLabel="Text input. Empty"
activeFormats={Array []}
blockType={
Object {
"tag": "div",
}
}
disableEditingMenu={false}
fontFamily="serif"
fontSize={12}
isMultiline={false}
maxImagesWidth={200}
onBlur={[Function]}
onChange={[Function]}
onContentSizeChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelectionChange={[Function]}
placeholderTextColor="gray"
triggerKeyCodes={Array []}
value=""
/>
</View>
`;

exports[`<RichText/> Font Size should update the font size with decimals when style prop with font size property is provided 1`] = `
<View>
<TextInput
accessibilityLabel="Text input. Empty"
activeFormats={Array []}
blockType={
Object {
"tag": "div",
}
}
disableEditingMenu={false}
fontFamily="serif"
fontSize={13}
isMultiline={false}
maxImagesWidth={200}
onBlur={[Function]}
onChange={[Function]}
onContentSizeChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelectionChange={[Function]}
placeholderTextColor="gray"
triggerKeyCodes={Array []}
value=""
/>
</View>
`;
83 changes: 68 additions & 15 deletions packages/rich-text/src/test/index.native.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,26 @@
jest.mock( '@wordpress/data/src/components/use-select' );
/**
* External dependencies
*/
import { Dimensions } from 'react-native';
import { render } from 'test/helpers';
import { getEditorHtml, render, initializeEditor } from 'test/helpers';

/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { select } from '@wordpress/data';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { coreBlocks, registerBlock } from '@wordpress/block-library';
import {
getBlockTypes,
setDefaultBlockName,
unregisterBlockType,
} from '@wordpress/blocks';
import '@wordpress/jest-console';

/**
* Internal dependencies
*/
import { store as richTextStore } from '../store';
import RichText from '../component/index.native';

/**
Expand All @@ -25,16 +35,12 @@ const mockGlobalSettings = (
const DEFAULT_GLOBAL_STYLES = {
__experimentalGlobalStylesBaseStyles: { typography: { fontSize } },
};
const selectMock = {
getFormatTypes: jest.fn().mockReturnValue( [] ),
getBlockParents: jest.fn(),
getBlock: jest.fn(),
getSettings: jest.fn().mockReturnValue( DEFAULT_GLOBAL_STYLES ),
};

useSelect.mockImplementation( ( callback ) => {
return callback( () => selectMock );
} );
jest.spyOn( select( blockEditorStore ), 'getSettings' ).mockReturnValue(
DEFAULT_GLOBAL_STYLES
);
jest.spyOn( select( richTextStore ), 'getFormatTypes' ).mockReturnValue(
[]
);
};

describe( '<RichText/>', () => {
Expand All @@ -51,6 +57,13 @@ describe( '<RichText/>', () => {
[ '1.42vh', 19 ],
];

beforeAll( () => {
// Register Paragraph block
const paragraph = coreBlocks[ 'core/paragraph' ];
registerBlock( paragraph );
setDefaultBlockName( paragraph.name );
} );

beforeEach( () => {
mockGlobalSettings( {} );
} );
Expand All @@ -59,6 +72,13 @@ describe( '<RichText/>', () => {
Dimensions.set( { window } );
} );

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

describe( 'Font Size', () => {
it( 'should display rich text at the DEFAULT font size.', () => {
// Arrange
Expand Down Expand Up @@ -133,10 +153,10 @@ describe( '<RichText/>', () => {
}
);

it( `should display rich text at the font size computed from the LOCAL \`fontSize\` CSS with HIGHEST PRIORITY
it( `should display rich text at the font size computed from the LOCAL \`style.fontSize\` CSS with HIGHEST PRIORITY
when CSS is provided ambiguously from ALL possible sources.`, () => {
// Arrange
const expectedFontSize = 2;
const expectedFontSize = 1;
mockGlobalSettings( { fontSize: '0' } );
// Act
const { getByA11yLabel } = render(
Expand Down Expand Up @@ -193,5 +213,38 @@ describe( '<RichText/>', () => {
const actualFontSize = getByA11yLabel( 'editor' ).props.fontSize;
expect( actualFontSize ).toBe( expectedFontSize );
} );

it( 'should update the font size when style prop with font size property is provided', () => {
// Arrange
const fontSize = '10';
const style = { fontSize: '12' };
// Act
const screen = render( <RichText fontSize={ fontSize } /> );
screen.update( <RichText fontSize={ fontSize } style={ style } /> );
// Assert
expect( screen.toJSON() ).toMatchSnapshot();
} );

it( 'renders component with style and font size', async () => {
// Arrange
const initialHtml = `<!-- wp:paragraph {"style":{"color":{"text":"#fcb900"},"typography":{"fontSize":35.56}}} -->
<p class="has-text-color" style="color:#fcb900;font-size:35.56px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet ut nibh vitae ornare. Sed auctor nec augue at blandit.</p>
<!-- /wp:paragraph -->`;
// Act
await initializeEditor( { initialHtml } );
// Assert
expect( getEditorHtml() ).toMatchSnapshot();
} );

it( 'should update the font size with decimals when style prop with font size property is provided', () => {
// Arrange
const fontSize = '10';
const style = { fontSize: '12.56px' };
// Act
const screen = render( <RichText fontSize={ fontSize } /> );
screen.update( <RichText fontSize={ fontSize } style={ style } /> );
// Assert
expect( screen.toJSON() ).toMatchSnapshot();
} );
} );
} );

0 comments on commit e7eb6d8

Please sign in to comment.