diff --git a/packages/block-editor/src/components/inserter/test/__snapshots__/index.native.js.snap b/packages/block-editor/src/components/inserter/test/__snapshots__/index.native.js.snap index feac0d1434d35a..c63f71e81f8c36 100644 --- a/packages/block-editor/src/components/inserter/test/__snapshots__/index.native.js.snap +++ b/packages/block-editor/src/components/inserter/test/__snapshots__/index.native.js.snap @@ -1,5 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Inserter can add blocks adds new block at the end of post 1`] = ` +" +
+ + + + +" +`; + exports[`Inserter can add blocks after another block 1`] = ` " @@ -28,6 +38,48 @@ exports[`Inserter can add blocks before another block 1`] = ` " `; +exports[`Inserter can add blocks creates a new Paragraph block tapping on the empty area below the last block 1`] = ` +" + + + + + + + + + +" +`; + +exports[`Inserter can add blocks inserts between 2 existing blocks 1`] = ` +" + + + + + + + + + +" +`; + +exports[`Inserter can add blocks inserts block at the end of post when no block is selected 1`] = ` +" + + + + + + + + + +" +`; + exports[`Inserter can add blocks to the beginning 1`] = ` " diff --git a/packages/block-editor/src/components/inserter/test/index.native.js b/packages/block-editor/src/components/inserter/test/index.native.js index 30b5a603964c85..c86fb4c2d91ff4 100644 --- a/packages/block-editor/src/components/inserter/test/index.native.js +++ b/packages/block-editor/src/components/inserter/test/index.native.js @@ -180,5 +180,98 @@ describe( 'Inserter', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); + + it( 'adds new block at the end of post', async () => { + const screen = await initializeEditor(); + + // Add Spacer block + await addBlock( screen, 'Spacer' ); + + // Add Heading block + await addBlock( screen, 'Heading' ); + + // Get Heading block + const headingBlock = await getBlock( screen, 'Heading', { + rowIndex: 2, + } ); + expect( headingBlock ).toBeVisible(); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); + + it( 'inserts between 2 existing blocks', async () => { + const screen = await initializeEditor(); + + // Add Spacer block + await addBlock( screen, 'Spacer' ); + + // Add Heading block + await addBlock( screen, 'Heading' ); + + // Get Spacer block + const spacerBlock = await getBlock( screen, 'Spacer' ); + fireEvent.press( spacerBlock ); + + // Add More block + await addBlock( screen, 'More' ); + + // Get More block + const moreBlock = await getBlock( screen, 'More', { rowIndex: 2 } ); + expect( moreBlock ).toBeVisible(); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); + + it( 'inserts block at the end of post when no block is selected', async () => { + const screen = await initializeEditor(); + const { getAllByLabelText } = screen; + + // Add Spacer block + await addBlock( screen, 'Spacer' ); + + // Add Heading block + await addBlock( screen, 'Heading' ); + + // Select the title + const titleInputElement = await getAllByLabelText( + 'Post title. test' + )[ 0 ]; + expect( titleInputElement ).toBeVisible(); + fireEvent.press( titleInputElement ); + + // Add More block + await addBlock( screen, 'More' ); + + // Get More block + const moreBlock = await getBlock( screen, 'More', { rowIndex: 3 } ); + expect( moreBlock ).toBeVisible(); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); + + it( 'creates a new Paragraph block tapping on the empty area below the last block', async () => { + const screen = await initializeEditor(); + const { getByLabelText } = screen; + + // Add Spacer block + await addBlock( screen, 'Spacer' ); + + // Add Heading block + await addBlock( screen, 'Heading' ); + + // Get the empty paragraph placeholder + const paragraphPlaceholder = await getByLabelText( + 'Add paragraph block' + ); + fireEvent.press( paragraphPlaceholder ); + + // Get Paragraph block + const paragraphBlock = await getBlock( screen, 'Paragraph', { + rowIndex: 3, + } ); + expect( paragraphBlock ).toBeVisible(); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); } ); } ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js deleted file mode 100644 index 2c2e234d6944cd..00000000000000 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js +++ /dev/null @@ -1,98 +0,0 @@ -/** - * Internal dependencies - */ -import { blockNames } from './pages/editor-page'; -import { - headerBlockEmpty, - listBlockEmpty, - moreBlockEmpty, - paragraphBlockEmpty, - separatorBlockEmpty, -} from './helpers/test-data'; - -describe( 'Gutenberg Editor tests for Block insertion 2', () => { - it( 'adds new block at the end of post', async () => { - await editorPage.addNewBlock( blockNames.heading ); - - const headingBlock = await editorPage.getBlockAtPosition( - blockNames.heading - ); - expect( headingBlock ).toBeTruthy(); - - await editorPage.addNewBlock( blockNames.list ); - - const listItemBlock = await editorPage.getBlockAtPosition( - blockNames.listItem - ); - expect( listItemBlock ).toBeTruthy(); - - const expectedHtml = [ headerBlockEmpty, listBlockEmpty ].join( - '\n\n' - ); - const html = await editorPage.getHtmlContent(); - expect( html.toLowerCase() ).toBe( expectedHtml ); - } ); - - it( 'inserts between 2 existing blocks', async () => { - const firstBlock = await editorPage.getFirstBlockVisible(); - await firstBlock.click(); - - await editorPage.addNewBlock( blockNames.separator ); - - const separatorBlock = await editorPage.getBlockAtPosition( - blockNames.separator, - 2 - ); - expect( separatorBlock ).toBeTruthy(); - - const expectedHtml = [ - headerBlockEmpty, - separatorBlockEmpty, - listBlockEmpty, - ].join( '\n\n' ); - - const html = await editorPage.getHtmlContent(); - expect( html.toLowerCase() ).toBe( expectedHtml ); - } ); - - it( 'inserts block at the end of post when no block is selected', async () => { - await editorPage.addNewBlock( blockNames.more ); - - const moreBlock = await editorPage.getBlockAtPosition( - blockNames.more, - 4 - ); - expect( moreBlock ).toBeTruthy(); - - const expectedHtml = [ - headerBlockEmpty, - separatorBlockEmpty, - listBlockEmpty, - moreBlockEmpty, - ].join( '\n\n' ); - - const html = await editorPage.getHtmlContent(); - expect( html.toLowerCase() ).toBe( expectedHtml ); - } ); - - it( 'creates a new Paragraph block tapping on the empty area below the last block', async () => { - await editorPage.addParagraphBlockByTappingEmptyAreaBelowLastBlock(); - - const paragraphBlock = await editorPage.getBlockAtPosition( - blockNames.paragraph, - 5 - ); - expect( paragraphBlock ).toBeTruthy(); - - const expectedHtml = [ - headerBlockEmpty, - separatorBlockEmpty, - listBlockEmpty, - moreBlockEmpty, - paragraphBlockEmpty, - ].join( '\n\n' ); - - const html = await editorPage.getHtmlContent(); - expect( html.toLowerCase() ).toBe( expectedHtml ); - } ); -} );