Skip to content

Commit

Permalink
[Automated Testing]: Add block editor shortcuts e2e tests (#37624)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ntsekouras
ntsekouras committed Dec 24, 2021
1 parent 6c15f2f commit f8b40d6
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 27 deletions.
62 changes: 38 additions & 24 deletions ...e2e-tests/specs/editor/various/__snapshots__/block-editor-keyboard-shortcuts.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,112 +2,126 @@

exports[`block editor keyboard shortcuts move blocks multiple blocks selected should move the blocks down 1`] = `
"<!-- wp:paragraph -->
<p>First paragraph</p>
<p>1st</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Second paragraph</p>
<p>2nd</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Third paragraph</p>
<p>3rd</p>
<!-- /wp:paragraph -->"
`;

exports[`block editor keyboard shortcuts move blocks multiple blocks selected should move the blocks down 2`] = `
"<!-- wp:paragraph -->
<p>Third paragraph</p>
<p>3rd</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>First paragraph</p>
<p>1st</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Second paragraph</p>
<p>2nd</p>
<!-- /wp:paragraph -->"
`;

exports[`block editor keyboard shortcuts move blocks multiple blocks selected should move the blocks up 1`] = `
"<!-- wp:paragraph -->
<p>First paragraph</p>
<p>1st</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Second paragraph</p>
<p>2nd</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Third paragraph</p>
<p>3rd</p>
<!-- /wp:paragraph -->"
`;

exports[`block editor keyboard shortcuts move blocks multiple blocks selected should move the blocks up 2`] = `
"<!-- wp:paragraph -->
<p>Second paragraph</p>
<p>2nd</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Third paragraph</p>
<p>3rd</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>First paragraph</p>
<p>1st</p>
<!-- /wp:paragraph -->"
`;

exports[`block editor keyboard shortcuts move blocks single block selected should move the block down 1`] = `
"<!-- wp:paragraph -->
<p>First paragraph</p>
<p>1st</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Second paragraph</p>
<p>2nd</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Third paragraph</p>
<p>3rd</p>
<!-- /wp:paragraph -->"
`;

exports[`block editor keyboard shortcuts move blocks single block selected should move the block down 2`] = `
"<!-- wp:paragraph -->
<p>First paragraph</p>
<p>1st</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Third paragraph</p>
<p>3rd</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Second paragraph</p>
<p>2nd</p>
<!-- /wp:paragraph -->"
`;

exports[`block editor keyboard shortcuts move blocks single block selected should move the block up 1`] = `
"<!-- wp:paragraph -->
<p>First paragraph</p>
<p>1st</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Second paragraph</p>
<p>2nd</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Third paragraph</p>
<p>3rd</p>
<!-- /wp:paragraph -->"
`;

exports[`block editor keyboard shortcuts move blocks single block selected should move the block up 2`] = `
"<!-- wp:paragraph -->
<p>Third paragraph</p>
<p>3rd</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>First paragraph</p>
<p>1st</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Second paragraph</p>
<p>2nd</p>
<!-- /wp:paragraph -->"
`;

exports[`block editor keyboard shortcuts test shortcuts handling through portals in the same tree should prevent deleting multiple selected blocks from inputs 1`] = `
"<!-- wp:paragraph -->
<p>1st</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>2nd</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>3rd</p>
<!-- /wp:paragraph -->"
`;
46 changes: 43 additions & 3 deletions packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,18 @@ import {
clickBlockAppender,
getEditedPostContent,
pressKeyWithModifier,
clickBlockToolbarButton,
clickMenuItem,
clickOnCloseModalButton,
} from '@wordpress/e2e-test-utils';

const createTestParagraphBlocks = async () => {
await clickBlockAppender();
await page.keyboard.type( 'First paragraph' );
await page.keyboard.type( '1st' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'Second paragraph' );
await page.keyboard.type( '2nd' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'Third paragraph' );
await page.keyboard.type( '3rd' );
};

describe( 'block editor keyboard shortcuts', () => {
Expand Down Expand Up @@ -66,4 +69,41 @@ describe( 'block editor keyboard shortcuts', () => {
} );
} );
} );
describe( 'test shortcuts handling through portals in the same tree', () => {
beforeEach( async () => {
await createTestParagraphBlocks();
// Multiselect via keyboard.
await pressKeyWithModifier( 'primary', 'a' );
await pressKeyWithModifier( 'primary', 'a' );
} );
it( 'should propagate properly and delete selected blocks', async () => {
await clickBlockToolbarButton( 'Options' );
const label = 'Duplicate';
await page.$x(
`//div[@role="menu"]//span[contains(concat(" ", @class, " "), " components-menu-item__item ")][contains(text(), "${ label }")]`
);
await page.keyboard.press( 'Delete' );
expect( await getEditedPostContent() ).toMatchInlineSnapshot(
`""`
);
} );
it( 'should prevent deleting multiple selected blocks from inputs', async () => {
await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Add to Reusable blocks' );
const reusableBlockNameInputSelector =
'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
const nameInput = await page.waitForSelector(
reusableBlockNameInputSelector
);
await nameInput.click();
await page.keyboard.type( 'hi' );
await page.keyboard.press( 'Backspace' );
await page.keyboard.press( 'ArrowLeft' );
await page.keyboard.press( 'Delete' );
await clickOnCloseModalButton(
'.reusable-blocks-menu-items__convert-modal'
);
expect( await getEditedPostContent() ).toMatchSnapshot();
} );
} );
} );

0 comments on commit f8b40d6

Please sign in to comment.