Add e2e tests

WordPress · Oct 31, 2018 · bfc721d · bfc721d
1 parent d23367f
commit bfc721d
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 14 deletions.
diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js
@@ -22,7 +22,7 @@ import {
 	getScrollContainer,
 } from '@wordpress/dom';
 import { createBlobURL } from '@wordpress/blob';
-import { BACKSPACE, DELETE, ENTER, LEFT, RIGHT, rawShortcut } from '@wordpress/keycodes';
+import { BACKSPACE, DELETE, ENTER, LEFT, RIGHT, UP, DOWN, rawShortcut } from '@wordpress/keycodes';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { rawHandler, children, getBlockTransforms, findTransform } from '@wordpress/blocks';
 import { withInstanceId, withSafeTimeout, compose } from '@wordpress/compose';
@@ -132,13 +132,13 @@ export class RichText extends Component {
 
 	componentDidMount() {
 		document.addEventListener( 'selectionchange', this.onSelectionChange );
-		window.addEventListener( 'mousedown', this.onCreateUndoLevel );
+		window.addEventListener( 'mousemove', this.onCreateUndoLevel );
 		window.addEventListener( 'touchstart', this.onCreateUndoLevel );
 	}
 
 	componentWillUnmount() {
 		document.removeEventListener( 'selectionchange', this.onSelectionChange );
-		window.removeEventListener( 'mousedown', this.onCreateUndoLevel );
+		window.removeEventListener( 'mousemove', this.onCreateUndoLevel );
 		window.removeEventListener( 'touchstart', this.onCreateUndoLevel );
 	}
 
@@ -433,8 +433,6 @@ export class RichText extends Component {
 		const record = this.createRecord();
 		const transformed = this.patterns.reduce( ( accumlator, transform ) => transform( accumlator ), record );
 
-		this.nonInputKeyEvent = false;
-
 		this.onChange( transformed, {
 			withoutHistory: true,
 			// Don't apply changes if there's no transform. Content will be up
@@ -608,8 +606,6 @@ export class RichText extends Component {
 	onKeyDown( event ) {
 		const { keyCode } = event;
 
-		this.nonInputKeyEvent = true;
-
 		const isHorizontalNavigation = keyCode === LEFT || keyCode === RIGHT;
 		if ( isHorizontalNavigation ) {
 			this.onHorizontalNavigationKeyDown( event );
@@ -705,6 +701,10 @@ export class RichText extends Component {
 				this.splitContent();
 			}
 		}
+
+		if ( [ LEFT, RIGHT, UP, DOWN ].indexOf( keyCode ) >= 0 ) {
+			this.onCreateUndoLevel();
+		}
 	}
 
 	/**
@@ -719,12 +719,6 @@ export class RichText extends Component {
 			this.onChange( this.createRecord(), true );
 		}
 
-		// If the user uses a key that doesn't produce any input (e.g. arrow
-		// keys), then create an undo level for the previously input if any.
-		if ( this.nonInputKeyEvent ) {
-			this.onCreateUndoLevel();
-		}
-
 		// `scrollToRect` is called on `nodechange`, whereas calling it on
 		// `keyup` *when* moving to a new RichText element results in incorrect
 		// scrolling. Though the following allows false positives, it results

diff --git a/test/e2e/specs/__snapshots__/undo.test.js.snap b/test/e2e/specs/__snapshots__/undo.test.js.snap
@@ -13,3 +13,39 @@ exports[`undo Should undo to expected level intervals 1`] = `
 <p>test</p>
 <!-- /wp:paragraph -->"
 `;
+
+exports[`undo should undo typing after arrow navigation 1`] = `
+"<!-- wp:paragraph -->
+<p>before keyboar after keyboardd</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`undo should undo typing after arrow navigation 2`] = `
+"<!-- wp:paragraph -->
+<p>before keyboard</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`undo should undo typing after mouse move 1`] = `
+"<!-- wp:paragraph -->
+<p>before move after move</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`undo should undo typing after mouse move 2`] = `
+"<!-- wp:paragraph -->
+<p>before move</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`undo should undo typing after non input change 1`] = `
+"<!-- wp:paragraph -->
+<p>before keyboard <strong>after keyboard</strong></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`undo should undo typing after non input change 2`] = `
+"<!-- wp:paragraph -->
+<p>before keyboard </p>
+<!-- /wp:paragraph -->"
+`;
diff --git a/test/e2e/specs/undo.test.js b/test/e2e/specs/undo.test.js
@@ -10,10 +10,52 @@ import {
 } from '../support/utils';
 
 describe( 'undo', () => {
-	beforeAll( async () => {
+	beforeEach( async () => {
 		await newPost();
 	} );
 
+	it( 'should undo typing after mouse move', async () => {
+		await clickBlockAppender();
+
+		await page.keyboard.type( 'before move' );
+		await page.mouse.move( 200, 300, { steps: 10 } );
+		await page.keyboard.type( ' after move' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await pressWithModifier( META_KEY, 'z' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'should undo typing after non input change', async () => {
+		await clickBlockAppender();
+
+		await page.keyboard.type( 'before keyboard ' );
+		await pressWithModifier( META_KEY, 'b' );
+		await page.keyboard.type( 'after keyboard' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await pressWithModifier( META_KEY, 'z' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'should undo typing after arrow navigation', async () => {
+		await clickBlockAppender();
+
+		await page.keyboard.type( 'before keyboard' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.type( ' after keyboard' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await pressWithModifier( META_KEY, 'z' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
 	it( 'Should undo to expected level intervals', async () => {
 		await clickBlockAppender();