Skip to content

Commit

Permalink
test: Expand mobile editor tests (#52446)
Browse files Browse the repository at this point in the history 
* test: Test multiple text entry editor history

Expand editor history tests to cover entering text over multiple history
entries.

* test: List split and merge

Expand tests to cover splitting lists and merging with paragraphs.

* test: Highlight text with selection

* test: Update inline comments

The to-do note is not possible for formatted strings that result in
inner HTML tags within the text input. This is because the
`typeInRichText` helper does not support parsing inner HTML tags, only
outer tags. This results in inaccurate cursor placement as the tags
occupy indexes within the string, so the target index is off given it is
based upon the visual position, i.e. the position in the rendered
version of the parsed HTML, rather than the literal position in the
string, i.e. taking into account what positions are occupied by HTML
tags.

If we want to test typing after applying formats, we should likely use
e2e tests.

* test: Remove redundant selectRangeInRichText argument

The helper defaults to passing the second parameter (`start`) as the third parameter (`end`).

Co-authored-by: Carlos Garcia <fluiddot@gmail.com>

* test: Fix editor history test compatibility with new UI

The undo and redo buttons relocated out of the editor and into the host
app in c428fd4.

* test: Wrap undo and redo actions in act to avoid warnings

The undo and redo actions result in state changes for the editor, which
lead to `act` warnings in the tests. This wraps the actions in `act` so
that warnings are suppressed.

These new undo and redo actions were introduced in
c428fd4.

---------

Co-authored-by: Carlos Garcia <fluiddot@gmail.com>
  • Loading branch information
@dcalhoun @fluiddot
dcalhoun and fluiddot authored Jul 11, 2023
1 parent 34c805d commit d233bc2
Show file tree
Hide file tree
Showing 3 changed files with 191 additions and 44 deletions.
162 changes: 129 additions & 33 deletions packages/block-library/src/list/test/edit.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
*/
import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
import { registerCoreBlocks } from '@wordpress/block-library';
import { BACKSPACE } from '@wordpress/keycodes';
import { BACKSPACE, ENTER } from '@wordpress/keycodes';

describe( 'List block', () => {
beforeAll( () => {
Expand Down Expand Up @@ -338,52 +338,148 @@ describe( 'List block', () => {
expect( getEditorHtml() ).toMatchSnapshot();
} );

it( 'merges with other lists', async () => {
it( 'splits empty list items into paragraphs', async () => {
// Arrange
const initialHtml = `<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>One</li><!-- /wp:list-item --></ul>
<!-- /wp:list --><!-- wp:list -->
<ul><!-- wp:list-item -->
<li>One</li><!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Two</li><!-- /wp:list-item --></ul>
<!-- /wp:list -->`;
const screen = await initializeEditor( { initialHtml } );

const screen = await initializeEditor( {
initialHtml,
} );

// Select List block
const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 2/ );
// Act
const listBlock = screen.getByLabelText( /List Block\. Row 1/ );
fireEvent.press( listBlock );
await triggerBlockListLayout( listBlock );
const listItemField = screen.getByLabelText( /Text input. .*One.*/ );
selectRangeInRichText( listItemField, 3 );
fireEvent( listItemField, 'onKeyDown', {
nativeEvent: {},
preventDefault() {},
keyCode: ENTER,
} );
const listItemField2 = screen.getByLabelText( /Text input. Empty/ );
fireEvent( listItemField2, 'onKeyDown', {
nativeEvent: {},
preventDefault() {},
keyCode: ENTER,
} );

// Select List Item block
const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
/List item Block\. Row 1/
);
fireEvent.press( listItemBlock );
// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>One</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
// With cursor positioned at the beginning of the first List Item, press
// backward delete
const listItemField =
within( listItemBlock ).getByLabelText( /Text input. .*Two.*/ );
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Two</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->"
` );
} );

it( 'merges paragraphs into list items', async () => {
const initialHtml = `<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>One</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- wp:paragraph -->
<p>Two</p>
<!-- /wp:paragraph -->
<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Three</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->`;
const screen = await initializeEditor( { initialHtml } );

// Act
const paragraphField = screen.getByLabelText( /Text input. .*Two.*/ );
selectRangeInRichText( paragraphField, 0 );
fireEvent( paragraphField, 'onKeyDown', {
nativeEvent: {},
preventDefault() {},
keyCode: BACKSPACE,
} );

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>One</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Two</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Three</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->"
` );
} );

it( 'merges lists into lists', async () => {
// Arrange
const initialHtml = `<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>One</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Two</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Three</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->`;
const screen = await initializeEditor( { initialHtml } );

// Act
const listBlock = screen.getByLabelText( /List Block\. Row 2/ );
fireEvent.press( listBlock );
await triggerBlockListLayout( listBlock );
const listItemField = screen.getByLabelText( /Text input\..*Three/ );
selectRangeInRichText( listItemField, 0 );
fireEvent( listItemField, 'onKeyDown', {
nativeEvent: {},
preventDefault() {},
keyCode: BACKSPACE,
} );

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>One</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Two</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->"
` );
"<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>One</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Two</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Three</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->"
` );
} );

it( 'unwraps first item when attempting to merge with non-list block', async () => {
Expand Down Expand Up @@ -486,16 +582,16 @@ describe( 'List block', () => {
"<!-- wp:paragraph -->
<p>A quick brown fox.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>One</p>
<!-- /wp:paragraph -->
<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Two</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Three</li>
<!-- /wp:list-item --></ul>
Expand Down
26 changes: 26 additions & 0 deletions packages/block-library/src/paragraph/test/edit.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -639,4 +639,30 @@ describe( 'Paragraph block', () => {
);
expect( contrastCheckElement ).toBeDefined();
} );

it( 'should highlight text with selection', async () => {
// Arrange
const screen = await initializeEditor( { withGlobalStyles: true } );
await addBlock( screen, 'Paragraph' );

// Act
const paragraphBlock = getBlock( screen, 'Paragraph' );
fireEvent.press( paragraphBlock );
const paragraphTextInput =
within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
typeInRichText(
paragraphTextInput,
'A quick brown fox jumps over the lazy dog.',
{ finalSelectionStart: 2, finalSelectionEnd: 7 }
);
fireEvent.press( screen.getByLabelText( 'Text color' ) );
fireEvent.press( await screen.findByLabelText( 'Tertiary' ) );

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph -->
<p>A <mark style="background-color:rgba(0, 0, 0, 0);color:#2411a4" class="has-inline-color has-tertiary-color">quick</mark> brown fox jumps over the lazy dog.</p>
<!-- /wp:paragraph -->"
` );
} );
} );
47 changes: 36 additions & 11 deletions test/native/integration/editor-history.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* External dependencies
*/
import {
act,
addBlock,
dismissModal,
getBlock,
Expand Down Expand Up @@ -30,10 +31,18 @@ describe( 'Editor History', () => {

beforeAll( () => {
subscribeOnUndoPressed.mockImplementation( ( callback ) => {
toggleUndo = callback;
toggleUndo = () => {
act( () => {
callback();
} );
};
} );
subscribeOnRedoPressed.mockImplementation( ( callback ) => {
toggleRedo = callback;
toggleRedo = () => {
act( () => {
callback();
} );
};
} );
} );

Expand Down Expand Up @@ -100,12 +109,10 @@ describe( 'Editor History', () => {
fireEvent.press( paragraphBlock );
const paragraphTextInput =
within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
typeInRichText(
paragraphTextInput,
'A quick brown fox jumps over the lazy dog.'
);

// TODO: Determine a way to type multiple times within a given block.
typeInRichText( paragraphTextInput, 'A quick brown fox' );
// Artifical delay to create two history entries for typing
await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );
typeInRichText( paragraphTextInput, ' jumps over the lazy dog.' );

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
Expand All @@ -117,6 +124,16 @@ describe( 'Editor History', () => {
// Act
toggleUndo();

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph -->
<p>A quick brown fox</p>
<!-- /wp:paragraph -->"
` );

// Act
toggleUndo();

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph -->
Expand All @@ -127,6 +144,16 @@ describe( 'Editor History', () => {
// Act
toggleRedo();

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph -->
<p>A quick brown fox</p>
<!-- /wp:paragraph -->"
` );

// Act
toggleRedo();

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph -->
Expand All @@ -150,13 +177,11 @@ describe( 'Editor History', () => {
'A quick brown fox jumps over the lazy dog.',
{ finalSelectionStart: 2, finalSelectionEnd: 7 }
);
// Artifical delay to create two history entries for typing and bolding.
// Artifical delay to create two history entries for typing and formatting.
await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );
fireEvent.press( screen.getByLabelText( 'Bold' ) );
fireEvent.press( screen.getByLabelText( 'Italic' ) );

// TODO: Determine a way to type multiple times within a given block.

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph -->
Expand Down

1 comment on commit d233bc2

@github-actions
Copy link

@github-actions github-actions bot commented on d233bc2 Jul 11, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in d233bc2.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5524343283
📝 Reported issues:

Please sign in to comment.