From baa0bf9205e63fe7e207282d8bdd32334c687ef7 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Mon, 20 Dec 2021 15:24:50 +0100 Subject: [PATCH 1/2] Mobile - Text color formatting - Adds integration tests --- .../src/text-color/inline.native.js | 1 + .../test/__snapshots__/index.native.js.snap | 19 ++ .../src/text-color/test/index.native.js | 170 ++++++++++++++++++ 3 files changed, 190 insertions(+) create mode 100644 packages/format-library/src/text-color/test/__snapshots__/index.native.js.snap create mode 100644 packages/format-library/src/text-color/test/index.native.js diff --git a/packages/format-library/src/text-color/inline.native.js b/packages/format-library/src/text-color/inline.native.js index efbf6db545e5dd..bf5906fdc76297 100644 --- a/packages/format-library/src/text-color/inline.native.js +++ b/packages/format-library/src/text-color/inline.native.js @@ -148,6 +148,7 @@ export default function InlineColorUI( { name, value, onChange, onClose } ) { contentStyle={ { paddingLeft: 0, paddingRight: 0 } } hasNavigation leftButton={ null } + testID="inline-text-color" > diff --git a/packages/format-library/src/text-color/test/__snapshots__/index.native.js.snap b/packages/format-library/src/text-color/test/__snapshots__/index.native.js.snap new file mode 100644 index 00000000000000..f2abb6be0d0118 --- /dev/null +++ b/packages/format-library/src/text-color/test/__snapshots__/index.native.js.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Text color allows toggling the highlight color feature to selected text 1`] = ` +" +

Hello this is a test

+" +`; + +exports[`Text color allows toggling the highlight color feature to type new text 1`] = ` +" +

+" +`; + +exports[`Text color creates a paragraph block with the text color format 1`] = ` +" +

Hello this is a test

+" +`; diff --git a/packages/format-library/src/text-color/test/index.native.js b/packages/format-library/src/text-color/test/index.native.js new file mode 100644 index 00000000000000..8aadb243f911c2 --- /dev/null +++ b/packages/format-library/src/text-color/test/index.native.js @@ -0,0 +1,170 @@ +/** + * External dependencies + */ +import { + getEditorHtml, + initializeEditor, + fireEvent, + waitFor, +} from 'test/helpers'; + +/** + * WordPress dependencies + */ +import { setDefaultBlockName, unregisterBlockType } from '@wordpress/blocks'; +import { registerBlock, coreBlocks } from '@wordpress/block-library'; + +const COLOR_PINK = '#f78da7'; +const paragraph = coreBlocks[ 'core/paragraph' ]; + +const TEXT_WITH_COLOR = ` +

Hello this is a test

+`; + +beforeAll( () => { + registerBlock( paragraph ); + setDefaultBlockName( paragraph.name ); +} ); + +afterAll( () => { + unregisterBlockType( paragraph.name ); +} ); + +describe( 'Text color', () => { + it( 'shows the text color formatting button in the toolbar', async () => { + const { getByA11yLabel } = await initializeEditor(); + + // Wait for the editor placeholder + const paragraphPlaceholder = await waitFor( () => + getByA11yLabel( 'Add paragraph block' ) + ); + expect( paragraphPlaceholder ).toBeDefined(); + fireEvent.press( paragraphPlaceholder ); + + // Wait for the block to be created + const paragraphBlock = await waitFor( () => + getByA11yLabel( /Paragraph Block\. Row 1/ ) + ); + expect( paragraphBlock ).toBeDefined(); + + // Look for the highlight text color button + const textColorButton = await waitFor( () => + getByA11yLabel( 'Text color' ) + ); + expect( textColorButton ).toBeDefined(); + } ); + + it( 'allows toggling the highlight color feature to type new text', async () => { + const { + getByA11yLabel, + getByTestId, + getByA11yHint, + } = await initializeEditor(); + + // Wait for the editor placeholder + const paragraphPlaceholder = await waitFor( () => + getByA11yLabel( 'Add paragraph block' ) + ); + expect( paragraphPlaceholder ).toBeDefined(); + fireEvent.press( paragraphPlaceholder ); + + // Wait for the block to be created + const paragraphBlock = await waitFor( () => + getByA11yLabel( /Paragraph Block\. Row 1/ ) + ); + expect( paragraphBlock ).toBeDefined(); + + // Look for the highlight text color button + const textColorButton = await waitFor( () => + getByA11yLabel( 'Text color' ) + ); + expect( textColorButton ).toBeDefined(); + fireEvent.press( textColorButton ); + + // Wait for Inline color modal to be visible + const inlineTextColorModal = getByTestId( 'inline-text-color' ); + await waitFor( () => inlineTextColorModal.props.isVisible ); + + // Look for the pink color button + const pinkColorButton = await waitFor( () => + getByA11yHint( COLOR_PINK ) + ); + expect( pinkColorButton ).toBeDefined(); + fireEvent.press( pinkColorButton ); + + // Dismiss the inline color modal + fireEvent( inlineTextColorModal, 'backdropPress' ); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); + + it( 'allows toggling the highlight color feature to selected text', async () => { + const { + getByA11yLabel, + getByTestId, + getByPlaceholderText, + getByA11yHint, + } = await initializeEditor(); + const text = 'Hello this is a test'; + + // Wait for the editor placeholder + const paragraphPlaceholder = await waitFor( () => + getByA11yLabel( 'Add paragraph block' ) + ); + expect( paragraphPlaceholder ).toBeDefined(); + fireEvent.press( paragraphPlaceholder ); + + // Wait for the block to be created + const paragraphBlock = await waitFor( () => + getByA11yLabel( /Paragraph Block\. Row 1/ ) + ); + expect( paragraphBlock ).toBeDefined(); + + // Update TextInput value + const paragraphText = getByPlaceholderText( 'Start writing…' ); + fireEvent( paragraphText, 'onSelectionChange', 0, text.length, text, { + nativeEvent: { + eventCount: 1, + target: undefined, + text, + }, + } ); + + // Look for the highlight text color button + const textColorButton = await waitFor( () => + getByA11yLabel( 'Text color' ) + ); + expect( textColorButton ).toBeDefined(); + fireEvent.press( textColorButton ); + + // Wait for Inline color modal to be visible + const inlineTextColorModal = getByTestId( 'inline-text-color' ); + await waitFor( () => inlineTextColorModal.props.isVisible ); + + // Look for the pink color button + const pinkColorButton = await waitFor( () => + getByA11yHint( COLOR_PINK ) + ); + expect( pinkColorButton ).toBeDefined(); + fireEvent.press( pinkColorButton ); + + // Dismiss the inline color modal + fireEvent( inlineTextColorModal, 'backdropPress' ); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); + + it( 'creates a paragraph block with the text color format', async () => { + const { getByA11yLabel } = await initializeEditor( { + initialHtml: TEXT_WITH_COLOR, + } ); + + // Wait for the block to be created + const paragraphBlock = await waitFor( () => + getByA11yLabel( /Paragraph Block\. Row 1/ ) + ); + expect( paragraphBlock ).toBeDefined(); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); +} ); From 5c311e2ce4b21559f2927ad69ac0840f88475c77 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Wed, 5 Jan 2022 10:50:37 +0100 Subject: [PATCH 2/2] Mobile - Test Color - Update test: Improve testID naming for the inline text color modal and remove unnecessary dismissing of the modal. --- .../format-library/src/text-color/inline.native.js | 2 +- .../format-library/src/text-color/test/index.native.js | 10 ++-------- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/format-library/src/text-color/inline.native.js b/packages/format-library/src/text-color/inline.native.js index bf5906fdc76297..b81f13ffd9207f 100644 --- a/packages/format-library/src/text-color/inline.native.js +++ b/packages/format-library/src/text-color/inline.native.js @@ -148,7 +148,7 @@ export default function InlineColorUI( { name, value, onChange, onClose } ) { contentStyle={ { paddingLeft: 0, paddingRight: 0 } } hasNavigation leftButton={ null } - testID="inline-text-color" + testID="inline-text-color-modal" > diff --git a/packages/format-library/src/text-color/test/index.native.js b/packages/format-library/src/text-color/test/index.native.js index 8aadb243f911c2..742fb52822235e 100644 --- a/packages/format-library/src/text-color/test/index.native.js +++ b/packages/format-library/src/text-color/test/index.native.js @@ -82,7 +82,7 @@ describe( 'Text color', () => { fireEvent.press( textColorButton ); // Wait for Inline color modal to be visible - const inlineTextColorModal = getByTestId( 'inline-text-color' ); + const inlineTextColorModal = getByTestId( 'inline-text-color-modal' ); await waitFor( () => inlineTextColorModal.props.isVisible ); // Look for the pink color button @@ -92,9 +92,6 @@ describe( 'Text color', () => { expect( pinkColorButton ).toBeDefined(); fireEvent.press( pinkColorButton ); - // Dismiss the inline color modal - fireEvent( inlineTextColorModal, 'backdropPress' ); - expect( getEditorHtml() ).toMatchSnapshot(); } ); @@ -138,7 +135,7 @@ describe( 'Text color', () => { fireEvent.press( textColorButton ); // Wait for Inline color modal to be visible - const inlineTextColorModal = getByTestId( 'inline-text-color' ); + const inlineTextColorModal = getByTestId( 'inline-text-color-modal' ); await waitFor( () => inlineTextColorModal.props.isVisible ); // Look for the pink color button @@ -148,9 +145,6 @@ describe( 'Text color', () => { expect( pinkColorButton ).toBeDefined(); fireEvent.press( pinkColorButton ); - // Dismiss the inline color modal - fireEvent( inlineTextColorModal, 'backdropPress' ); - expect( getEditorHtml() ).toMatchSnapshot(); } );