Writing Flow: Add E2E test for inline boundary traversal

Author: aduth

test/e2e/specs/__snapshots__/writing-flow.test.js.snap

@@ -21,3 +21,17 @@ exports[`adding blocks Should navigate inner blocks with arrow keys 1`] = `
 <p>Second paragraph</p>
 <!-- /wp:paragraph -->"
 `;
+
+exports[`adding blocks should navigate around inline boundaries 1`] = `
+"<!-- wp:paragraph -->
+<p>FirstAfter</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Before<strong>InsideSecondInside</strong>After</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>BeforeThird</p>
+<!-- /wp:paragraph -->"
+`;

test/e2e/specs/writing-flow.test.js

@@ -6,14 +6,13 @@ import {
 	newPost,
 	newDesktopBrowserPage,
 	getHTMLFromCodeEditor,
+	pressWithModifier,
+	pressTimes,
 } from '../support/utils';
 
 describe( 'adding blocks', () => {
-	beforeAll( async () => {
-		await newDesktopBrowserPage();
-	} );
-
 	beforeEach( async () => {
+		await newDesktopBrowserPage();
 		await newPost();
 	} );
 
@@ -64,4 +63,60 @@ describe( 'adding blocks', () => {
 
 		expect( await getHTMLFromCodeEditor() ).toMatchSnapshot();
 	} );
+
+	it( 'should navigate around inline boundaries', async () => {
+		// Add demo content
+		await page.click( '.editor-default-block-appender__content' );
+		await page.keyboard.type( 'First' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Second' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Third' );
+
+		// Navigate to second paragraph
+		await pressTimes( 'ArrowLeft', 6 );
+
+		// Bold second paragraph text
+		await page.keyboard.down( 'Shift' );
+		await pressTimes( 'ArrowLeft', 6 );
+		await page.keyboard.up( 'Shift' );
+		await pressWithModifier( 'mod', 'b' );
+
+		// Arrow left from selected bold should traverse into first.
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.type( 'After' );
+
+		// Arrow right from end of first should traverse to second, *BEFORE*
+		// the bolded text. Another press should move within inline boundary.
+		await pressTimes( 'ArrowRight', 2 );
+		await page.keyboard.type( 'Inside' );
+
+		// Arrow left from end of beginning of inline boundary should move to
+		// the outside of the inline boundary.
+		await pressTimes( 'ArrowLeft', 6 );
+		await page.keyboard.press( 'ArrowLeft' ); // Separate for emphasis.
+		await page.keyboard.type( 'Before' );
+
+		// Likewise, test at the end of the inline boundary for same effect.
+		await page.keyboard.press( 'ArrowRight' ); // Move inside
+		await pressTimes( 'ArrowRight', 12 );
+		await page.keyboard.type( 'Inside' );
+		await page.keyboard.press( 'ArrowRight' );
+
+		// Edge case: Verify that workaround to test for ZWSP at beginning of
+		// focus node does not take effect when on the right edge of inline
+		// boundary (thus preventing traversing to the next block by arrow).
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowLeft' );
+
+		// Should be after the inline boundary again.
+		await page.keyboard.type( 'After' );
+
+		// Finally, ensure that ArrowRight from end of unbolded text moves to
+		// the last paragraph
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.type( 'Before' );
+
+		expect( await getHTMLFromCodeEditor() ).toMatchSnapshot();
+	} );
 } );

test/e2e/support/utils.js

@@ -4,6 +4,11 @@
 import { join } from 'path';
 import { URL } from 'url';
 
+/**
+ * External dependencies
+ */
+import { times } from 'lodash';
+
 const {
 	WP_BASE_URL = 'http://localhost:8888',
 	WP_USERNAME = 'admin',
@@ -26,6 +31,21 @@ const MOD_KEY = process.platform === 'darwin' ? 'Meta' : 'Control';
  */
 const REGEXP_ZWSP = /[\u200B\u200C\u200D\uFEFF]/;
 
+/**
+ * Given an array of functions, each returning a promise, performs all
+ * promises in sequence (waterfall) order.
+ *
+ * @param {Function[]} sequence Array of promise creators.
+ *
+ * @return {Promise} Promise resolving once all in the sequence complete.
+ */
+async function promiseSequence( sequence ) {
+	return sequence.reduce(
+		( current, next ) => current.then( next ),
+		Promise.resolve()
+	);
+}
+
 export function getUrl( WPPath, query = '' ) {
 	const url = new URL( WP_BASE_URL );
 
@@ -232,6 +252,18 @@ export async function openDocumentSettingsSidebar() {
 	}
 }
 
+/**
+ * Presses the given keyboard key a number of times in sequence.
+ *
+ * @param {string} key   Key to press.
+ * @param {number} count Number of times to press.
+ *
+ * @return {Promise} Promise resolving when key presses complete.
+ */
+export async function pressTimes( key, count ) {
+	return promiseSequence( times( count, () => () => page.keyboard.press( key ) ) );
+}
+
 export async function clearLocalStorage() {
 	await page.evaluate( () => window.localStorage.clear() );
 }