Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

test: Add Writing Flow tests #49352

Merged
merged 21 commits into from
Mar 30, 2023
Merged

test: Add Writing Flow tests #49352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
5734e87
test: Multi-line Quote should render expected markup
dcalhoun Mar 21, 2023
d0a22ac
test: Multi-line Pullquote should render expected markup
dcalhoun Mar 21, 2023
ac4c4da
test: Multi-line Verse should render expected markup
dcalhoun Mar 24, 2023
aaea444
test: Multi-line Preformatted should render expected markup
dcalhoun Mar 24, 2023
4cb8749
test: Rename Preformatted block tests
dcalhoun Mar 24, 2023
173fe30
test: Add note to expand multi-line test coverage
dcalhoun Mar 27, 2023
4329e9f
test: Paragraph should left/center/right align text
dcalhoun Mar 27, 2023
278028a
test: Paragraph should bold/italicize/strikethrough text
dcalhoun Mar 27, 2023
c3958db
test: Paragraph should preserve alignment when split
dcalhoun Mar 27, 2023
2734037
test: Paragraph should link text with selection
dcalhoun Mar 27, 2023
bde6777
test: Paragraph should link text without selection
dcalhoun Mar 27, 2023
da8915a
test: Paragraph should link text with clipboard contents
dcalhoun Mar 27, 2023
919e2d9
test: Await bottom sheet navigation events to avoid act warnings
dcalhoun Mar 27, 2023
5367c31
test: Paragraph should not remove whitespace when formatting
dcalhoun Mar 27, 2023
cff080d
test: Expand native test matcher to include top-level test directory
dcalhoun Mar 28, 2023
17af339
test: Editor History should remove and add blocks
dcalhoun Mar 28, 2023
d96a451
test: Editor History should remove and add text
dcalhoun Mar 28, 2023
26352da
test: Editor History should remove and add text formatting
dcalhoun Mar 28, 2023
204dc58
test: Separate top-level and nested test directory matcher
dcalhoun Mar 28, 2023
e6d890e
refactor: Use existing getBlock test helper
dcalhoun Mar 28, 2023
762d3f3
test: Avoid stale comment reference
dcalhoun Mar 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
357 changes: 356 additions & 1 deletion packages/block-library/src/paragraph/test/edit.native.js
View file
Open in desktop
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
Open in desktop
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