Add e2e test for nested block splitting

WordPress · Apr 11, 2018 · ef09336 · ef09336
1 parent 8929b5f
commit ef09336
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 41 deletions.
diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
@@ -654,6 +654,10 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps ) => {
 
 			blocks = blocks.map( ( oldBlock ) => cloneBlock( oldBlock, { layout } ) );
 
+			// If the current block is the last nested empty paragraph block,
+			// and we're about to insert another empty paragraph block, then
+			// move the empty paragraph block behind the wrapping block.
+			// This is a way for the user to escape out of wrapping blocks.
 			if (
 				rootUID && isLast && blocks.length === 1 &&
 				isUnmodifiedDefaultBlock( first( blocks ) ) &&

diff --git a/test/e2e/specs/__snapshots__/splitting-merging.test.js.snap b/test/e2e/specs/__snapshots__/splitting-merging.test.js.snap
@@ -15,3 +15,17 @@ exports[`splitting and merging blocks Should split and merge paragraph blocks us
 <p>FirstSecond</p>
 <!-- /wp:paragraph -->"
 `;
+
+exports[`splitting and merging blocks should split out of quote block using enter 1`] = `
+"<!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\">
+    <!-- wp:paragraph -->
+    <p>test</p>
+    <!-- /wp:paragraph -->
+</blockquote>
+<!-- /wp:quote -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;
diff --git a/test/e2e/specs/adding-blocks.test.js b/test/e2e/specs/adding-blocks.test.js
@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import '../support/bootstrap';
-import { newPost, newDesktopBrowserPage } from '../support/utils';
+import { newPost, newDesktopBrowserPage, getHTMLFromCodeEditor } from '../support/utils';
 
 describe( 'adding blocks', () => {
 	beforeAll( async () => {
@@ -85,14 +85,6 @@ describe( 'adding blocks', () => {
 		await clickAtRightish( inserter );
 		await page.keyboard.type( 'Second paragraph' );
 
-		// Switch to Text Mode to check HTML Output
-		await page.click( '.edit-post-more-menu [aria-label="More"]' );
-		const codeEditorButton = ( await page.$x( '//button[contains(text(), \'Code Editor\')]' ) )[ 0 ];
-		await codeEditorButton.click( 'button' );
-
-		// Assertions
-		const textEditorContent = await page.$eval( '.editor-post-text-editor', ( element ) => element.value );
-
-		expect( textEditorContent ).toMatchSnapshot();
+		expect( await getHTMLFromCodeEditor() ).toMatchSnapshot();
 	} );
 } );
diff --git a/test/e2e/specs/splitting-merging.test.js b/test/e2e/specs/splitting-merging.test.js
@@ -2,10 +2,10 @@
  * Internal dependencies
  */
 import '../support/bootstrap';
-import { newPost, newDesktopBrowserPage } from '../support/utils';
+import { newPost, newDesktopBrowserPage, getHTMLFromCodeEditor } from '../support/utils';
 
 describe( 'splitting and merging blocks', () => {
-	beforeAll( async () => {
+	beforeEach( async () => {
 		await newDesktopBrowserPage();
 		await newPost();
 	} );
@@ -24,32 +24,22 @@ describe( 'splitting and merging blocks', () => {
 		}
 		await page.keyboard.press( 'Enter' );
 
-		//Switch to Code Editor to check HTML output
-		await page.click( '.edit-post-more-menu [aria-label="More"]' );
-		let codeEditorButton = ( await page.$x( '//button[contains(text(), \'Code Editor\')]' ) )[ 0 ];
-		await codeEditorButton.click( 'button' );
-
-		//Assert that there are now two paragraph blocks with correct content
-		let textEditorContent = await page.$eval( '.editor-post-text-editor', ( element ) => element.value );
-		expect( textEditorContent ).toMatchSnapshot();
-
-		//Switch to Visual Editor to continue testing
-		await page.click( '.edit-post-more-menu [aria-label="More"]' );
-		const visualEditorButton = ( await page.$x( '//button[contains(text(), \'Visual Editor\')]' ) )[ 0 ];
-		await visualEditorButton.click( 'button' );
+		expect( await getHTMLFromCodeEditor() ).toMatchSnapshot();
 
 		//Press Backspace to merge paragraph blocks
 		await page.click( '.is-selected' );
 		await page.keyboard.press( 'Home' );
 		await page.keyboard.press( 'Backspace' );
 
-		//Switch to Code Editor to check HTML output
-		await page.click( '.edit-post-more-menu [aria-label="More"]' );
-		codeEditorButton = ( await page.$x( '//button[contains(text(), \'Code Editor\')]' ) )[ 0 ];
-		await codeEditorButton.click( 'button' );
+		expect( await getHTMLFromCodeEditor() ).toMatchSnapshot();
+	} );
+
+	it( 'should split out of quote block using enter', async () => {
+		await page.click( '.editor-default-block-appender' );
+		await page.keyboard.type( '> test' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
 
-		//Assert that there is now one paragraph with correct content
-		textEditorContent = await page.$eval( '.editor-post-text-editor', ( element ) => element.value );
-		expect( textEditorContent ).toMatchSnapshot();
+		expect( await getHTMLFromCodeEditor() ).toMatchSnapshot();
 	} );
 } );
diff --git a/test/e2e/specs/templates.test.js b/test/e2e/specs/templates.test.js
@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import '../support/bootstrap';
-import { newPost, newDesktopBrowserPage } from '../support/utils';
+import { newPost, newDesktopBrowserPage, getHTMLFromCodeEditor } from '../support/utils';
 import { activatePlugin, deactivatePlugin } from '../support/plugins';
 
 describe( 'Using a CPT with a predefined template', () => {
@@ -18,13 +18,6 @@ describe( 'Using a CPT with a predefined template', () => {
 	} );
 
 	it( 'Should add a custom post types with a predefined template', async () => {
-		//Switch to Code Editor to check HTML output
-		await page.click( '.edit-post-more-menu [aria-label="More"]' );
-		const codeEditorButton = ( await page.$x( '//button[contains(text(), \'Code Editor\')]' ) )[ 0 ];
-		await codeEditorButton.click( 'button' );
-
-		// Assert that the post already contains the template defined blocks
-		const textEditorContent = await page.$eval( '.editor-post-text-editor', ( element ) => element.value );
-		expect( textEditorContent ).toMatchSnapshot();
+		expect( await getHTMLFromCodeEditor() ).toMatchSnapshot();
 	} );
 } );
diff --git a/test/e2e/support/utils.js b/test/e2e/support/utils.js
@@ -71,3 +71,16 @@ export async function newDesktopBrowserPage() {
 	global.page = await browser.newPage();
 	await page.setViewport( { width: 1000, height: 700 } );
 }
+
+export async function switchToEditor( mode ) {
+	await page.click( '.edit-post-more-menu [aria-label="More"]' );
+	const [ button ] = await page.$x( `//button[contains(text(), \'${ mode } Editor\')]` );
+	await button.click( 'button' );
+}
+
+export async function getHTMLFromCodeEditor() {
+	await switchToEditor( 'Code' );
+	const textEditorContent = await page.$eval( '.editor-post-text-editor', ( element ) => element.value );
+	await switchToEditor( 'Visual' );
+	return textEditorContent;
+}