e2e tests

packages/block-editor/src/components/use-block-display-information/index.js

@@ -32,7 +32,6 @@ import { store as blocksStore } from '@wordpress/blocks';
  *
  */
 
-// TODO write tests
 export default function useBlockDisplayInformation( clientId ) {
 	return useSelect(
 		( select ) => {

packages/e2e-tests/plugins/block-variations/index.js

@@ -40,6 +40,8 @@
 		},
 		icon: 'yes-alt',
 		scope: [ 'inserter' ],
+		isActive: ( { backgroundColor }, variationAttributes ) =>
+			backgroundColor === variationAttributes.backgroundColor,
 	} );
 
 	registerBlockVariation( 'core/paragraph', {
@@ -52,6 +54,8 @@
 		},
 		icon: 'warning',
 		scope: [ 'inserter' ],
+		isActive: ( { backgroundColor }, variationAttributes ) =>
+			backgroundColor === variationAttributes.backgroundColor,
 	} );
 
 	registerBlockVariation( 'core/columns', {

packages/e2e-tests/specs/editor/plugins/block-variations.js

@@ -7,6 +7,8 @@ import {
 	deactivatePlugin,
 	insertBlock,
 	searchForBlock,
+	pressKeyWithModifier,
+	openDocumentSettingsSidebar,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Block variations', () => {
@@ -103,4 +105,75 @@ describe( 'Block variations', () => {
 			)
 		).toHaveLength( 4 );
 	} );
+	// @see @wordpres/block-editor/src/components/use-block-display-information (`useBlockDisplayInformation` hook).
+	describe( 'testing block display information with matching variations', () => {
+		const getActiveBreadcrumb = async () =>
+			page.evaluate(
+				() =>
+					document.querySelector(
+						'.block-editor-block-breadcrumb__current'
+					).textContent
+			);
+		const getFirstNavigationItem = async () => {
+			await pressKeyWithModifier( 'access', 'o' );
+			// This also returns the visually hidden text `(selected block)`.
+			// For example `Paragraph(selected block)`. In order to hide this
+			// implementation detail and search for childNodes, we choose to
+			// test with `String.prototype.startsWith()`.
+			return page.evaluate(
+				() =>
+					document.querySelector(
+						'.block-editor-block-navigation-block-select-button'
+					).textContent
+			);
+		};
+		const getBlockCardDescription = async () => {
+			await openDocumentSettingsSidebar();
+			return page.evaluate(
+				() =>
+					document.querySelector(
+						'.block-editor-block-card__description'
+					).textContent
+			);
+		};
+
+		it( 'should show block information when no matching variation is found', async () => {
+			await insertBlock( 'Large Quote' );
+			const breadcrumb = await getActiveBreadcrumb();
+			expect( breadcrumb ).toEqual( 'Quote' );
+			const navigationItem = await getFirstNavigationItem();
+			expect( navigationItem.startsWith( 'Quote' ) ).toBeTruthy();
+			const description = await getBlockCardDescription();
+			expect( description ).toEqual(
+				'Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Julio Cortázar'
+			);
+		} );
+		it( 'should display variations info if all declared', async () => {
+			await insertBlock( 'Success Message' );
+			const breadcrumb = await getActiveBreadcrumb();
+			expect( breadcrumb ).toEqual( 'Success Message' );
+			const navigationItem = await getFirstNavigationItem();
+			expect(
+				navigationItem.startsWith( 'Success Message' )
+			).toBeTruthy();
+			const description = await getBlockCardDescription();
+			expect( description ).toEqual(
+				'This block displays a success message. This description overrides the default one provided for the Paragraph block.'
+			);
+		} );
+		it( 'should display mixed block and variation match information', async () => {
+			// Warning Message variation is missing the `description`.
+			await insertBlock( 'Warning Message' );
+			const breadcrumb = await getActiveBreadcrumb();
+			expect( breadcrumb ).toEqual( 'Warning Message' );
+			const navigationItem = await getFirstNavigationItem();
+			expect(
+				navigationItem.startsWith( 'Warning Message' )
+			).toBeTruthy();
+			const description = await getBlockCardDescription();
+			expect( description ).toEqual(
+				'Start with the building block of all narrative.'
+			);
+		} );
+	} );
 } );