Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate remaining 'block switcher' e2e tests to Playwright #57381

Merged
merged 3 commits into from
Dec 27, 2023
Merged

Migrate remaining 'block switcher' e2e tests to Playwright #57381

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
987d0a7
Migrate remaining 'block switcher' e2e tests to Playwright
Mamaduka Dec 26, 2023
74a0fb3
Remove old test file
Mamaduka Dec 26, 2023
d30bd08
Feedback
Mamaduka Dec 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 0 additions & 130 deletions packages/e2e-tests/specs/editor/various/block-switcher.test.js
View file
Open in desktop

This file was deleted.

178 changes: 177 additions & 1 deletion test/e2e/specs/editor/various/block-switcher.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,183 @@ test.describe( 'Block Switcher', () => {
await admin.createNewPost();
} );

test( 'Block variation transforms', async ( { editor, page } ) => {
test( 'Should show the expected block transforms on the list block when the blocks are removed', async ( {
editor,
page,
pageUtils,
} ) => {
await editor.canvas
.getByRole( 'button', { name: 'Add default block' } )
.click();
await page.keyboard.type( '- List content' );
await page.keyboard.press( 'ArrowUp' );
await pageUtils.pressKeys( 'alt+F10' );

const blockSwitcher = page
.getByRole( 'toolbar', { name: 'Block tools' } )
.getByRole( 'button', { name: 'List' } );

// Verify the block switcher exists.
await expect( blockSwitcher ).toHaveAttribute(
'aria-haspopup',
'true'
);

// Verify the correct block transforms appear.
await blockSwitcher.click();
await expect(
page.getByRole( 'menu', { name: 'List' } ).getByRole( 'menuitem' )
).toHaveText( [ 'Paragraph', 'Heading', 'Quote', 'Columns', 'Group' ] );
} );

test( 'Should show the expected block transforms on the list block when the quote block is removed', async ( {
editor,
page,
pageUtils,
} ) => {
// Remove the quote block from the list of registered blocks.
await page.waitForFunction( () => {
try {
window.wp.blocks.unregisterBlockType( 'core/quote' );
return true;
} catch {
return false;
}
} );

// Insert a list block.
await editor.canvas
.getByRole( 'button', { name: 'Add default block' } )
.click();
await page.keyboard.type( '- List content' );
await page.keyboard.press( 'ArrowUp' );
await pageUtils.pressKeys( 'alt+F10' );

const blockSwitcher = page
.getByRole( 'toolbar', { name: 'Block tools' } )
.getByRole( 'button', { name: 'List' } );

// Verify the block switcher exists.
await expect( blockSwitcher ).toHaveAttribute(
'aria-haspopup',
'true'
);

// Verify the correct block transforms appear.
await blockSwitcher.click();
await expect(
page.getByRole( 'menu', { name: 'List' } ).getByRole( 'menuitem' )
).toHaveText( [ 'Paragraph', 'Heading', 'Columns', 'Group' ] );
} );

test( 'Should not show the block switcher if all the blocks the list block transforms into are removed', async ( {
editor,
page,
pageUtils,
} ) => {
// Insert a list block.
await editor.canvas
.getByRole( 'button', { name: 'Add default block' } )
.click();
await page.keyboard.type( '- List content' );

// Remove blocks.
await page.waitForFunction( () => {
try {
window.wp.data
.dispatch( 'core/blocks' )
.removeBlockTypes( [
'core/quote',
'core/pullquote',
'core/paragraph',
'core/group',
'core/heading',
'core/columns',
] );
return true;
} catch {
return false;
}
} );

await page.keyboard.press( 'ArrowUp' );
await pageUtils.pressKeys( 'alt+F10' );

// Verify the block switcher isn't enabled.
await expect(
page
.getByRole( 'toolbar', { name: 'Block tools' } )
.getByRole( 'button', { name: 'List' } )
).toBeDisabled();
} );

test( 'Should show Columns block only if selected blocks are between limits (1-6)', async ( {
editor,
page,
} ) => {
await editor.canvas
.getByRole( 'button', { name: 'Add default block' } )
.click();
await page.keyboard.type( '- List content' );
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '## I am a header' );
await page.keyboard.down( 'Shift' );
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.up( 'Shift' );
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note for future me: If this fails again, ensure the block toolbar is displayed by adding await pageUtils.pressKeys( 'alt+F10' );.

Currently, I can reproduce the scenario with Playwright, but I can do it manually sometimes.


await page
.getByRole( 'toolbar', { name: 'Block tools' } )
.getByRole( 'button', { name: 'Multiple blocks selected' } )
.click();

await expect(
page
.getByRole( 'menu', { name: 'Multiple blocks selected' } )
.getByRole( 'menuitem', { name: 'Columns' } )
).toBeVisible();
} );

test( 'Should NOT show Columns transform only if selected blocks are more than max limit(6)', async ( {
editor,
page,
pageUtils,
} ) => {
await editor.canvas
.getByRole( 'button', { name: 'Add default block' } )
.click();
await page.keyboard.type( '- List content' );
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '## I am a header' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'First paragraph' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'Second paragraph' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'Third paragraph' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'Fourth paragraph' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'Fifth paragraph' );
await pageUtils.pressKeys( 'primary+a', { times: 2 } );

await page
.getByRole( 'toolbar', { name: 'Block tools' } )
.getByRole( 'button', { name: 'Multiple blocks selected' } )
.click();

await expect(
page
.getByRole( 'menu', { name: 'Multiple blocks selected' } )
.getByRole( 'menuitem', { name: 'Columns' } )
).toBeHidden();
} );

test( 'should be able to transform to block variations', async ( {
editor,
page,
} ) => {
// This is the `stack` Group variation.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// This is the `stack` Group variation.
// This is the `flex` Group variation.

This looks like a typo.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think so; the variation name is stack. The flex is just implementation details.

await editor.insertBlock( {
name: 'core/group',
Expand Down
Loading