Update: Use escape key press instead of mouse movement to show block …

…toolbar (#14247) This PR updates our end to end tests to use escape key press instead of mouse movement to show the block toolbar. The PR follows a suggestion by @aduth in #14191 (comment) ## How has this been tested? We only need to make sure end 2 end tests pass
WordPress · Mar 20, 2019 · be56d20 · be56d20
1 parent 9ca6026
commit be56d20
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 32 deletions.
diff --git a/packages/e2e-tests/specs/blocks/list.test.js b/packages/e2e-tests/specs/blocks/list.test.js
@@ -126,8 +126,8 @@ describe( 'List', () => {
  await page.keyboard.press( 'Enter' );
  // Pointer device is needed. Shift+Tab won't focus the toolbar.
  // To do: fix so Shift+Tab works.
- await page.mouse.move( 200, 300, { steps: 10 } );
- await page.mouse.move( 250, 350, { steps: 10 } );
+ // Press escape to show the block toolbar
+ await page.keyboard.press( 'Escape' );
  await page.click( 'button[aria-label="Indent list item"]' );
  await page.keyboard.type( 'two' );
  await transformBlockTo( 'Paragraph' );
@@ -200,8 +200,8 @@ describe( 'List', () => {
  await page.keyboard.press( 'Enter' );
  // Pointer device is needed. Shift+Tab won't focus the toolbar.
  // To do: fix so Shift+Tab works.
- await page.mouse.move( 200, 300, { steps: 10 } );
- await page.mouse.move( 250, 350, { steps: 10 } );
+ // Press escape to show the block toolbar
+ await page.keyboard.press( 'Escape' );
  await page.click( 'button[aria-label="Indent list item"]' );
  await page.keyboard.type( 'two' );
  await page.keyboard.press( 'Enter' );
@@ -235,8 +235,8 @@ describe( 'List', () => {
 
  // Pointer device is needed. Shift+Tab won't focus the toolbar.
  // To do: fix so Shift+Tab works.
- await page.mouse.move( 200, 300, { steps: 10 } );
- await page.mouse.move( 250, 350, { steps: 10 } );
+ // Press escape to show the block toolbar
+ await page.keyboard.press( 'Escape' );
 
  await page.click( 'button[aria-label="Convert to ordered list"]' );
 

diff --git a/packages/e2e-tests/specs/invalid-block.test.js b/packages/e2e-tests/specs/invalid-block.test.js
@@ -16,8 +16,9 @@ describe( 'invalid blocks', () => {
  await clickBlockAppender();
  await page.keyboard.type( 'hello' );
 
+ // Press escape to show the block toolbar
+ await page.keyboard.press( 'Escape' );
  // Click the 'more options'
- await page.mouse.move( 200, 300, { steps: 10 } );
  await page.click( 'button[aria-label="More options"]' );
 
  // Change to HTML mode and close the options

diff --git a/packages/e2e-tests/specs/links.test.js b/packages/e2e-tests/specs/links.test.js
@@ -24,11 +24,6 @@ describe( 'Links', () => {
  await page.waitForFunction( () => !! document.activeElement.closest( '.editor-url-input' ) );
  };
 
- const moveMouse = async () => {
- await page.mouse.move( 200, 300, { steps: 10 } );
- await page.mouse.move( 250, 350, { steps: 10 } );
- };
-
  it( 'can be created by selecting text and clicking Link', async () => {
  // Create a block with some text
  await clickBlockAppender();
@@ -82,8 +77,8 @@ describe( 'Links', () => {
  await clickBlockAppender();
  await page.keyboard.type( 'This is Gutenberg: ' );
 
- // Trigger isTyping = false
- await moveMouse();
+ // Press escape to show the block toolbar
+ await page.keyboard.press( 'Escape' );
 
  // Press Cmd+K to insert a link
  await pressKeyWithModifier( 'primary', 'K' );
@@ -224,8 +219,8 @@ describe( 'Links', () => {
  await clickBlockAppender();
  await page.keyboard.type( 'Text' );
 
- // we need to trigger isTyping = false
- await moveMouse();
+ // Press escape to show the block toolbar
+ await page.keyboard.press( 'Escape' );
  await page.waitForSelector( 'button[aria-label="Link"]' );
  await page.click( 'button[aria-label="Link"]' );
 
@@ -245,7 +240,8 @@ describe( 'Links', () => {
  // Make a collapsed selection inside the link
  await page.keyboard.press( 'ArrowLeft' );
  await page.keyboard.press( 'ArrowRight' );
- await moveMouse();
+ // Press escape to show the block toolbar
+ await page.keyboard.press( 'Escape' );
  await page.click( 'button[aria-label="Edit"]' );
  await waitForAutoFocus();
  await page.keyboard.type( '/handbook' );

diff --git a/packages/e2e-tests/specs/plugins/format-api.test.js b/packages/e2e-tests/specs/plugins/format-api.test.js
@@ -26,7 +26,8 @@ describe( 'Using Format API', () => {
  it( 'Format toolbar is present in a paragraph block', async () => {
  await clickBlockAppender();
  await page.keyboard.type( 'First paragraph' );
- await page.mouse.move( 200, 300, { steps: 10 } );
+ // Press escape to show the block toolbar
+ await page.keyboard.press( 'Escape' );
  expect( await page.$( '[aria-label="Custom Link"]' ) ).not.toBeNull();
  } );
 
@@ -35,7 +36,8 @@ describe( 'Using Format API', () => {
  await page.keyboard.type( 'First paragraph' );
  await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
  await pressKeyWithModifier( 'primary', 'A' );
- await page.mouse.move( 200, 300, { steps: 10 } );
+ // Press escape to show the block toolbar
+ await page.keyboard.press( 'Escape' );
  await page.click( '[aria-label="Custom Link"]' );
  expect( await getEditedPostContent() ).toMatchSnapshot();
  } );

diff --git a/packages/e2e-tests/specs/reusable-blocks.test.js b/packages/e2e-tests/specs/reusable-blocks.test.js
@@ -34,9 +34,8 @@ describe( 'Reusable Blocks', () => {
  await insertBlock( 'Paragraph' );
  await page.keyboard.type( 'Hello there!' );
 
- // Trigger isTyping = false
- await page.mouse.move( 200, 300, { steps: 10 } );
- await page.mouse.move( 250, 350, { steps: 10 } );
+ // Press escape to show the block toolbar
+ await page.keyboard.press( 'Escape' );
 
  // Convert block to a reusable block
  await page.waitForSelector( 'button[aria-label="More options"]' );
@@ -81,9 +80,8 @@ describe( 'Reusable Blocks', () => {
  await insertBlock( 'Paragraph' );
  await page.keyboard.type( 'Hello there!' );
 
- // Trigger isTyping = false
- await page.mouse.move( 200, 300, { steps: 10 } );
- await page.mouse.move( 250, 350, { steps: 10 } );
+ // Press escape to show the block toolbar
+ await page.keyboard.press( 'Escape' );
 
  // Convert block to a reusable block
  await page.waitForSelector( 'button[aria-label="More options"]' );
@@ -222,10 +220,6 @@ describe( 'Reusable Blocks', () => {
  await pressKeyWithModifier( 'primary', 'a' );
  await pressKeyWithModifier( 'primary', 'a' );
 
- // Trigger isTyping = false
- await page.mouse.move( 200, 300, { steps: 10 } );
- await page.mouse.move( 250, 350, { steps: 10 } );
-
  // Convert block to a reusable block
  await page.waitForSelector( 'button[aria-label="More options"]' );
  await page.click( 'button[aria-label="More options"]' );

diff --git a/packages/e2e-tests/specs/style-variation.test.js b/packages/e2e-tests/specs/style-variation.test.js
@@ -13,9 +13,8 @@ describe( 'adding blocks', () => {
  await insertBlock( 'Quote' );
  await page.keyboard.type( 'Quote content' );
 
- // we need to trigger isTyping = false
- await page.mouse.move( 200, 300, { steps: 10 } );
- await page.mouse.move( 250, 350, { steps: 10 } );
+ // Press escape to show the block toolbar
+ await page.keyboard.press( 'Escape' );
 
  // Use a different style variation
  await page.waitForSelector( 'button[aria-label="Change block type"]' );