Skip to content

Commit

Permalink
test: Add Writing Flow tests (#49352)
Browse files Browse the repository at this point in the history 
* test: Multi-line Quote should render expected markup

* test: Multi-line Pullquote should render expected markup

* test: Multi-line Verse should render expected markup

* test: Multi-line Preformatted should render expected markup

* test: Rename Preformatted block tests

The "Preformatted" description feels more appropriate and mirrors other
block tests. I am uncertain as to why this was named differently
originally.

* test: Add note to expand multi-line test coverage

Our helpers do not support typing multiple lines of text into Rich Text
inputs. Ideally, we could add this feature to improve our test coverage.

* test: Paragraph should left/center/right align text

* test: Paragraph should bold/italicize/strikethrough text

* test: Paragraph should preserve alignment when split

* test: Paragraph should link text with selection

* test: Paragraph should link text without selection

* test: Paragraph should link text with clipboard contents

* test: Await bottom sheet navigation events to avoid act warnings

* test: Paragraph should not remove whitespace when formatting

* test: Expand native test matcher to include top-level test directory

This allows placing integration tests that target high-level features
that span across multiple areas of the product, e.g. editor undo/redo
history.

* test: Editor History should remove and add blocks

* test: Editor History should remove and add text

* test: Editor History should remove and add text formatting

* test: Separate top-level and nested test directory matcher

The previous matcher caused fixture files to be run as tests. Also,
splitting the regex likely improves the comprehensibility of the
expression.

* refactor: Use existing getBlock test helper

* test: Avoid stale comment reference
  • Loading branch information
@dcalhoun
dcalhoun authored Mar 30, 2023
1 parent 6ad856d commit 96b9006
Show file tree
Hide file tree
Showing 8 changed files with 776 additions and 5 deletions.
357 changes: 356 additions & 1 deletion packages/block-library/src/paragraph/test/edit.native.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,33 @@
/**
* External dependencies
*/
import { render } from 'test/helpers';
import {
act,
addBlock,
getBlock,
changeTextOfRichText,
changeAndSelectTextOfRichText,
fireEvent,
getEditorHtml,
initializeEditor,
render,
setupCoreBlocks,
within,
} from 'test/helpers';
import Clipboard from '@react-native-clipboard/clipboard';

/**
* WordPress dependencies
*/
import { ENTER } from '@wordpress/keycodes';

/**
* Internal dependencies
*/
import Paragraph from '../edit';

setupCoreBlocks();

const getTestComponentWithContent = ( content ) => {
return render(
<Paragraph
Expand All @@ -24,4 +44,339 @@ describe( 'Paragraph block', () => {
const screen = getTestComponentWithContent( '' );
expect( screen.container ).toBeTruthy();
} );

it( 'should bold text', async () => {
// Arrange
const screen = await initializeEditor();
await addBlock( screen, 'Paragraph' );

// Act
const paragraphBlock = getBlock( screen, 'Paragraph' );
fireEvent.press( paragraphBlock );
const paragraphTextInput =
within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
changeAndSelectTextOfRichText(
paragraphTextInput,
'A quick brown fox jumps over the lazy dog.',
{ selectionStart: 2, selectionEnd: 7 }
);
fireEvent.press( screen.getByLabelText( 'Bold' ) );

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph -->
<p>A <strong>quick</strong> brown fox jumps over the lazy dog.</p>
<!-- /wp:paragraph -->"
` );
} );

it( 'should italicize text', async () => {
// Arrange
const screen = await initializeEditor();
await addBlock( screen, 'Paragraph' );

// Act
const paragraphBlock = getBlock( screen, 'Paragraph' );
fireEvent.press( paragraphBlock );
const paragraphTextInput =
within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
changeAndSelectTextOfRichText(
paragraphTextInput,
'A quick brown fox jumps over the lazy dog.',
{ selectionStart: 2, selectionEnd: 7 }
);
fireEvent.press( screen.getByLabelText( 'Italic' ) );

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph -->
<p>A <em>quick</em> brown fox jumps over the lazy dog.</p>
<!-- /wp:paragraph -->"
` );
} );

it( 'should strikethrough text', async () => {
// Arrange
const screen = await initializeEditor();
await addBlock( screen, 'Paragraph' );

// Act
const paragraphBlock = getBlock( screen, 'Paragraph' );
fireEvent.press( paragraphBlock );
const paragraphTextInput =
within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
changeAndSelectTextOfRichText(
paragraphTextInput,
'A quick brown fox jumps over the lazy dog.',
{ selectionStart: 2, selectionEnd: 7 }
);
fireEvent.press( screen.getByLabelText( 'Strikethrough' ) );

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph -->
<p>A <s>quick</s> brown fox jumps over the lazy dog.</p>
<!-- /wp:paragraph -->"
` );
} );

it( 'should left align text', async () => {
// Arrange
const screen = await initializeEditor();
await addBlock( screen, 'Paragraph' );

// Act
const paragraphBlock = getBlock( screen, 'Paragraph' );
fireEvent.press( paragraphBlock );
const paragraphTextInput =
within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
changeTextOfRichText(
paragraphTextInput,
'A quick brown fox jumps over the lazy dog.'
);
fireEvent.press( screen.getByLabelText( 'Align text' ) );
fireEvent.press( screen.getByLabelText( 'Align text left' ) );

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left">A quick brown fox jumps over the lazy dog.</p>
<!-- /wp:paragraph -->"
` );
} );

it( 'should center align text', async () => {
// Arrange
const screen = await initializeEditor();
await addBlock( screen, 'Paragraph' );

// Act
const paragraphBlock = getBlock( screen, 'Paragraph' );
fireEvent.press( paragraphBlock );
const paragraphTextInput =
within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
changeTextOfRichText(
paragraphTextInput,
'A quick brown fox jumps over the lazy dog.'
);
fireEvent.press( screen.getByLabelText( 'Align text' ) );
fireEvent.press( screen.getByLabelText( 'Align text center' ) );

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">A quick brown fox jumps over the lazy dog.</p>
<!-- /wp:paragraph -->"
` );
} );

it( 'should right align text', async () => {
// Arrange
const screen = await initializeEditor();
await addBlock( screen, 'Paragraph' );

// Act
const paragraphBlock = getBlock( screen, 'Paragraph' );
fireEvent.press( paragraphBlock );
const paragraphTextInput =
within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
changeTextOfRichText(
paragraphTextInput,
'A quick brown fox jumps over the lazy dog.'
);
fireEvent.press( screen.getByLabelText( 'Align text' ) );
fireEvent.press( screen.getByLabelText( 'Align text right' ) );

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right">A quick brown fox jumps over the lazy dog.</p>
<!-- /wp:paragraph -->"
` );
} );

it( 'should preserve alignment when split', async () => {
// Arrange
const screen = await initializeEditor();
await addBlock( screen, 'Paragraph' );

// Act
const paragraphBlock = getBlock( screen, 'Paragraph' );
fireEvent.press( paragraphBlock );
fireEvent.press( screen.getByLabelText( 'Align text' ) );
fireEvent.press( screen.getByLabelText( 'Align text center' ) );
const paragraphTextInput =
within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
const string = 'A quick brown fox jumps over the lazy dog.';
changeAndSelectTextOfRichText( paragraphTextInput, string, {
selectionStart: string.length / 2,
selectionEnd: string.length / 2,
} );
fireEvent( paragraphTextInput, 'onKeyDown', {
nativeEvent: {},
preventDefault() {},
keyCode: ENTER,
} );

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">A quick brown fox jum</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">ps over the lazy dog.</p>
<!-- /wp:paragraph -->"
` );
} );

it( 'should link text without selection', async () => {
// Arrange
const screen = await initializeEditor();
await addBlock( screen, 'Paragraph' );

// Act
const paragraphBlock = getBlock( screen, 'Paragraph' );
fireEvent.press( paragraphBlock );
// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
await act( () => fireEvent.press( screen.getByLabelText( 'Link' ) ) );
// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
await act( () =>
fireEvent.press(
screen.getByLabelText( 'Link to, Search or type URL' )
)
);
fireEvent.changeText(
screen.getByPlaceholderText( 'Search or type URL' ),
'wordpress.org'
);
fireEvent.changeText(
screen.getByPlaceholderText( 'Add link text' ),
'WordPress'
);
jest.useFakeTimers();
fireEvent.press( screen.getByLabelText( 'Apply' ) );
// Await link picker navigation delay
act( () => jest.runOnlyPendingTimers() );

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph -->
<p><a href="http://wordpress.org">WordPress</a></p>
<!-- /wp:paragraph -->"
` );

jest.useRealTimers();
} );

it( 'should link text with selection', async () => {
// Arrange
const screen = await initializeEditor();
await addBlock( screen, 'Paragraph' );

// Act
const paragraphBlock = getBlock( screen, 'Paragraph' );
fireEvent.press( paragraphBlock );
const paragraphTextInput =
within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
changeAndSelectTextOfRichText(
paragraphTextInput,
'A quick brown fox jumps over the lazy dog.',
{
selectionStart: 2,
selectionEnd: 7,
}
);
// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
await act( () => fireEvent.press( screen.getByLabelText( 'Link' ) ) );
// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
await act( () =>
fireEvent.press(
screen.getByLabelText( 'Link to, Search or type URL' )
)
);
fireEvent.changeText(
screen.getByPlaceholderText( 'Search or type URL' ),
'wordpress.org'
);
jest.useFakeTimers();
fireEvent.press( screen.getByLabelText( 'Apply' ) );
// Await link picker navigation delay
act( () => jest.runOnlyPendingTimers() );

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph -->
<p>A <a href="http://wordpress.org">quick</a> brown fox jumps over the lazy dog.</p>
<!-- /wp:paragraph -->"
` );

jest.useRealTimers();
} );

it( 'should link text with clipboard contents', async () => {
// Arrange
Clipboard.getString.mockResolvedValue( 'https://wordpress.org' );
const screen = await initializeEditor();
await addBlock( screen, 'Paragraph' );

// Act
const paragraphBlock = getBlock( screen, 'Paragraph' );
fireEvent.press( paragraphBlock );
const paragraphTextInput =
within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
changeAndSelectTextOfRichText(
paragraphTextInput,
'A quick brown fox jumps over the lazy dog.',
{
selectionStart: 2,
selectionEnd: 7,
}
);
// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
await act( () => fireEvent.press( screen.getByLabelText( 'Link' ) ) );
// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
await act( () =>
fireEvent.press(
screen.getByLabelText( 'Link to, Search or type URL' )
)
);

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph -->
<p>A <a href="https://wordpress.org">quick</a> brown fox jumps over the lazy dog.</p>
<!-- /wp:paragraph -->"
` );

Clipboard.getString.mockReset();
} );

it( 'should not remove leading or trailing whitespace when formatting', async () => {
// Arrange
const screen = await initializeEditor();
await addBlock( screen, 'Paragraph' );

// Act
const paragraphBlock = getBlock( screen, 'Paragraph' );
fireEvent.press( paragraphBlock );
const paragraphTextInput =
within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
changeAndSelectTextOfRichText(
paragraphTextInput,
' some text ',
{
selectionStart: 5,
selectionEnd: 14,
}
);
fireEvent.press( screen.getByLabelText( 'Italic' ) );

// Assert
expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph -->
<p> <em>some text</em> </p>
<!-- /wp:paragraph -->"
` );
} );
} );
4 changes: 2 additions & 2 deletions packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`core/more/edit/native should match snapshot when content is empty 1`] = `
exports[`Preformatted should match snapshot when content is empty 1`] = `
<View
style={
[
Expand Down Expand Up @@ -46,7 +46,7 @@ exports[`core/more/edit/native should match snapshot when content is empty 1`] =
</View>
`;

exports[`core/more/edit/native should match snapshot when content is not empty 1`] = `
exports[`Preformatted should match snapshot when content is not empty 1`] = `
<View
style={
[
Expand Down
Loading

0 comments on commit 96b9006

Please sign in to comment.