From b30dd97bd2c3e1767d258e8854bd0176810e6f4a Mon Sep 17 00:00:00 2001 From: iseulde Date: Thu, 29 Nov 2018 12:57:31 +0100 Subject: [PATCH 1/4] Classic Block: set correct focus back after blur --- packages/block-library/src/classic/edit.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-library/src/classic/edit.js b/packages/block-library/src/classic/edit.js index 2502c0f7e0eb5f..cf876b5dcb5830 100644 --- a/packages/block-library/src/classic/edit.js +++ b/packages/block-library/src/classic/edit.js @@ -86,9 +86,14 @@ export default class ClassicEdit extends Component { } editor.on( 'blur', () => { + const bookmark = editor.selection.getBookmark( 2, true ); + setAttributes( { content: editor.getContent(), } ); + + editor.once( 'focus', () => editor.selection.moveToBookmark( bookmark ) ); + return false; } ); From 7718015d7021c8e7a02c39466843905c3902add4 Mon Sep 17 00:00:00 2001 From: iseulde Date: Thu, 29 Nov 2018 14:25:44 +0100 Subject: [PATCH 2/4] Add e2e test --- .../blocks/__snapshots__/classic.test.js.snap | 5 ++ test/e2e/specs/blocks/classic.test.js | 71 +++++++++++++++++++ 2 files changed, 76 insertions(+) create mode 100644 test/e2e/specs/blocks/__snapshots__/classic.test.js.snap create mode 100644 test/e2e/specs/blocks/classic.test.js diff --git a/test/e2e/specs/blocks/__snapshots__/classic.test.js.snap b/test/e2e/specs/blocks/__snapshots__/classic.test.js.snap new file mode 100644 index 00000000000000..a97ecfbbcaf9cc --- /dev/null +++ b/test/e2e/specs/blocks/__snapshots__/classic.test.js.snap @@ -0,0 +1,5 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Classic should be inserted 1`] = `"test"`; + +exports[`Classic should insert media 1`] = `"test\\"\\""`; diff --git a/test/e2e/specs/blocks/classic.test.js b/test/e2e/specs/blocks/classic.test.js new file mode 100644 index 00000000000000..4bd2ed7a82d774 --- /dev/null +++ b/test/e2e/specs/blocks/classic.test.js @@ -0,0 +1,71 @@ +/** + * External dependencies + */ +import path from 'path'; +import fs from 'fs'; +import os from 'os'; +import uuid from 'uuid/v4'; + +/** + * Internal dependencies + */ +import { + getEditedPostContent, + newPost, + insertBlock, + pressWithModifier, +} from '../../support/utils'; + +describe( 'Classic', () => { + beforeEach( async () => { + await newPost(); + } ); + + it( 'should be inserted', async () => { + await insertBlock( 'Classic' ); + // Wait for TinyMCE to initialise. + await page.waitForSelector( '.mce-content-body' ); + // Ensure there is focus. + await page.focus( '.mce-content-body' ); + await page.keyboard.type( 'test' ); + // Move focus away. + await pressWithModifier( 'shift', 'Tab' ); + + expect( await getEditedPostContent() ).toMatchSnapshot(); + } ); + + it( 'should insert media', async () => { + await insertBlock( 'Classic' ); + // Wait for TinyMCE to initialise. + await page.waitForSelector( '.mce-content-body' ); + // Ensure there is focus. + await page.focus( '.mce-content-body' ); + await page.keyboard.type( 'test' ); + + // Click the image button. + await page.click( 'div[aria-label="Insert Media"]' ); + + // Wait for media modal to appear and upload image. + await page.waitForSelector( '.media-modal input[type=file]' ); + const inputElement = await page.$( '.media-modal input[type=file]' ); + const testImagePath = path.join( __dirname, '..', '..', 'assets', '10x10_e2e_test_image_z9T8jK.png' ); + const filename = uuid(); + const tmpFileName = path.join( os.tmpdir(), filename + '.png' ); + fs.copyFileSync( testImagePath, tmpFileName ); + await inputElement.uploadFile( tmpFileName ); + + // Wait for upload. + await page.waitForSelector( `.media-modal li[aria-label="${ filename }"]` ); + + // Insert the uploaded image. + await page.click( '.media-modal button.media-button-insert' ); + + // Wait for image to be inserted. + await page.waitForSelector( '.mce-content-body img' ); + + // Move focus away. + await pressWithModifier( 'shift', 'Tab' ); + + expect( await getEditedPostContent() ).toMatchSnapshot(); + } ); +} ); From dfd7b5136743fb747b92a50516fe29823213ad4f Mon Sep 17 00:00:00 2001 From: iseulde Date: Wed, 5 Dec 2018 12:28:40 +0100 Subject: [PATCH 3/4] reset bookmark on mousedown and touchstart --- packages/block-library/src/classic/edit.js | 13 +++++++++++-- .../specs/blocks/__snapshots__/classic.test.js.snap | 2 -- test/e2e/specs/blocks/classic.test.js | 3 ++- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/classic/edit.js b/packages/block-library/src/classic/edit.js index cf876b5dcb5830..f0eb37ff30ca9b 100644 --- a/packages/block-library/src/classic/edit.js +++ b/packages/block-library/src/classic/edit.js @@ -78,6 +78,7 @@ export default class ClassicEdit extends Component { onSetup( editor ) { const { attributes: { content }, setAttributes } = this.props; const { ref } = this; + let bookmark; this.editor = editor; @@ -86,17 +87,25 @@ export default class ClassicEdit extends Component { } editor.on( 'blur', () => { - const bookmark = editor.selection.getBookmark( 2, true ); + bookmark = editor.selection.getBookmark( 2, true ); setAttributes( { content: editor.getContent(), } ); - editor.once( 'focus', () => editor.selection.moveToBookmark( bookmark ) ); + editor.once( 'focus', () => { + if ( bookmark ) { + editor.selection.moveToBookmark( bookmark ); + } + } ); return false; } ); + editor.on( 'mousedown touchstart', () => { + bookmark = null; + } ); + editor.on( 'keydown', ( event ) => { if ( ( event.keyCode === BACKSPACE || event.keyCode === DELETE ) && isTmceEmpty( editor ) ) { // delete the block diff --git a/test/e2e/specs/blocks/__snapshots__/classic.test.js.snap b/test/e2e/specs/blocks/__snapshots__/classic.test.js.snap index a97ecfbbcaf9cc..a4461344bb4384 100644 --- a/test/e2e/specs/blocks/__snapshots__/classic.test.js.snap +++ b/test/e2e/specs/blocks/__snapshots__/classic.test.js.snap @@ -1,5 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Classic should be inserted 1`] = `"test"`; - -exports[`Classic should insert media 1`] = `"test\\"\\""`; diff --git a/test/e2e/specs/blocks/classic.test.js b/test/e2e/specs/blocks/classic.test.js index 4bd2ed7a82d774..7fdda25971f831 100644 --- a/test/e2e/specs/blocks/classic.test.js +++ b/test/e2e/specs/blocks/classic.test.js @@ -66,6 +66,7 @@ describe( 'Classic', () => { // Move focus away. await pressWithModifier( 'shift', 'Tab' ); - expect( await getEditedPostContent() ).toMatchSnapshot(); + const regExp = new RegExp( `test` ); + expect( await getEditedPostContent() ).toMatch( regExp ); } ); } ); From 66d39143319cf15a6b8d152a26bb8660f80b9ff4 Mon Sep 17 00:00:00 2001 From: Miguel Fonseca Date: Sun, 9 Dec 2018 13:27:25 -0600 Subject: [PATCH 4/4] e2e: Look for aria-label="Add Media" rather than "Insert Media" --- test/e2e/specs/blocks/classic.test.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/e2e/specs/blocks/classic.test.js b/test/e2e/specs/blocks/classic.test.js index 7fdda25971f831..f0b733b4a9947d 100644 --- a/test/e2e/specs/blocks/classic.test.js +++ b/test/e2e/specs/blocks/classic.test.js @@ -43,7 +43,8 @@ describe( 'Classic', () => { await page.keyboard.type( 'test' ); // Click the image button. - await page.click( 'div[aria-label="Insert Media"]' ); + await page.waitForSelector( 'div[aria-label="Add Media"]' ); + await page.click( 'div[aria-label="Add Media"]' ); // Wait for media modal to appear and upload image. await page.waitForSelector( '.media-modal input[type=file]' );