Mobile - Text color formatting - Adds integration tests

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"
 		>
 			<BottomSheet.NavigationContainer animate main>
 				<BottomSheet.NavigationScreen name="text-color">

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`] = `
+"<!-- wp:paragraph -->
+<p><mark style=\\"background-color:rgba(0, 0, 0, 0);color:#f78da7\\" class=\\"has-inline-color has-pale-pink-color\\">Hello this is a test</mark></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Text color allows toggling the highlight color feature to type new text 1`] = `
+"<!-- wp:paragraph -->
+<p><mark style=\\"background-color:rgba(0, 0, 0, 0);color:#f78da7\\" class=\\"has-inline-color has-pale-pink-color\\"></mark></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Text color creates a paragraph block with the text color format 1`] = `
+"<!-- wp:paragraph -->
+<p>Hello <mark style=\\"background-color:rgba(0,0,0,0);color:#cf2e2e\\" class=\\"has-inline-color has-vivid-red-color\\">this is a test</mark></p>
+<!-- /wp:paragraph -->"
+`;

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 = `<!-- wp:paragraph -->
+<p>Hello <mark style="background-color:rgba(0,0,0,0);color:#cf2e2e" class="has-inline-color has-vivid-red-color">this is a test</mark></p>
+<!-- /wp:paragraph -->`;
+
+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();
+	} );
+} );