Add end 2 end test to block switcher with removed blocks (#12323)

This commit adds tests that make sure the block switcher works correctly even when some blocks are removed.
This test changes should catch the bug fixed in #12192.

test/e2e/specs/block-switcher.test.js

@@ -0,0 +1,78 @@
+/**
+ * Internal dependencies
+ */
+import {
+	hasBlockSwitcher,
+	getAvailableBlockTransforms,
+	newPost,
+	insertBlock,
+	pressWithModifier,
+} from '../support/utils';
+
+describe( 'adding blocks', () => {
+	beforeEach( async () => {
+		await newPost();
+	} );
+
+	it( 'Should show the expected block transforms on the list block when the blocks are removed', async () => {
+		// Insert a list block.
+		await insertBlock( 'List' );
+		await page.keyboard.type( 'List content' );
+		await pressWithModifier( 'alt', 'F10' );
+
+		// Verify the block switcher exists.
+		expect( await hasBlockSwitcher() ).toBeTruthy();
+
+		// Verify the correct block transforms appear.
+		expect(
+			await getAvailableBlockTransforms()
+		).toEqual( [
+			'Paragraph',
+			'Quote',
+		] );
+	} );
+
+	it( 'Should show the expected block transforms on the list block when the quote block is removed', async () => {
+		// Remove the quote block from the list of registered blocks.
+		await page.evaluate( () => {
+			wp.blocks.unregisterBlockType( 'core/quote' );
+		} );
+
+		// Insert a list block.
+		await insertBlock( 'List' );
+		await page.keyboard.type( 'List content' );
+		await pressWithModifier( 'alt', 'F10' );
+
+		// Verify the block switcher exists.
+		expect( await hasBlockSwitcher() ).toBeTruthy();
+
+		// Verify the correct block transforms appear.
+		expect(
+			await getAvailableBlockTransforms()
+		).toEqual( [
+			'Paragraph',
+		] );
+	} );
+
+	it( 'Should not show the block switcher if all the blocks the list block transforms into are removed', async () => {
+		// Remove the paragraph and quote block from the list of registered blocks.
+		await page.evaluate( () => {
+			( [
+				'core/quote',
+				'core/paragraph',
+			] ).map( ( block ) => wp.blocks.unregisterBlockType( block ) );
+		} );
+
+		// Insert a list block.
+		await insertBlock( 'List' );
+		await page.keyboard.type( 'List content' );
+		await pressWithModifier( 'alt', 'F10' );
+
+		// Verify the block switcher exists.
+		expect( await hasBlockSwitcher() ).toBeFalsy();
+		// Verify the correct block transforms appear.
+		expect(
+			await getAvailableBlockTransforms()
+		).toHaveLength( 0 );
+	} );
+} );

test/e2e/support/utils/get-available-block-transforms.js

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import { hasBlockSwitcher } from './has-block-switcher';
+
+/**
+ * Returns an array of strings with all block titles,
+ * that the current selected block can be transformed into.
+ *
+ * @return {Promise} Promise resolving with an array containing all possible block transforms
+ */
+export const getAvailableBlockTransforms = async () => {
+	if ( ! await hasBlockSwitcher() ) {
+		return [];
+	}
+	await page.click( '.editor-block-toolbar .editor-block-switcher' );
+	return page.evaluate( ( buttonSelector ) => {
+		return Array.from(
+			document.querySelectorAll(
+				buttonSelector
+			)
+		).map(
+			( button ) => {
+				return button.getAttribute( 'aria-label' );
+			}
+		);
+	}, '.editor-block-types-list .editor-block-types-list__list-item button' );
+};

test/e2e/support/utils/has-block-switcher.js

@@ -0,0 +1,10 @@
+/**
+ * Returns a boolean indicating if the current selected block has a block switcher or not.
+ *
+ * @return {Promise} Promise resolving with a boolean.
+ */
+export const hasBlockSwitcher = async () => {
+	return page.evaluate( ( blockSwitcherSelector ) => {
+		return !! document.querySelector( blockSwitcherSelector );
+	}, '.editor-block-toolbar .editor-block-switcher' );
+};

test/e2e/support/utils/index.js

@@ -11,8 +11,10 @@ export { enablePrePublishChecks } from './enable-pre-publish-checks';
 export { ensureSidebarOpened } from './ensure-sidebar-opened';
 export { findSidebarPanelWithTitle } from './find-sidebar-panel-with-title';
 export { getAllBlocks } from './get-all-blocks';
+export { getAvailableBlockTransforms } from './get-available-block-transforms';
 export { getEditedPostContent } from './get-edited-post-content';
 export { getUrl } from './get-url';
+export { hasBlockSwitcher } from './has-block-switcher';
 export { insertBlock } from './insert-block';
 export { isEmbedding } from './is-embedding';
 export { JSONResponse } from './json-response';