E2E tests: Block variations (#20286)

* E2E tests: Block variations

* E2E tests: Implement test for block variations

packages/e2e-tests/plugins/block-variations.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Block Variations
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-block-variations
+ */
+
+/**
+ * Registers a custom script for the plugin.
+ */
+function enqueue_block_variations_plugin_script() {
+	wp_enqueue_script(
+		'gutenberg-test-block-variations',
+		plugins_url( 'block-variations/index.js', __FILE__ ),
+		array(
+			'wp-blocks',
+			'wp-element',
+			'wp-i18n',
+			'wp-primitives',
+		),
+		filemtime( plugin_dir_path( __FILE__ ) . 'block-variations/index.js' ),
+		true
+	);
+}
+
+add_action( 'init', 'enqueue_block_variations_plugin_script' );

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

@@ -0,0 +1,69 @@
+( function() {
+	var el = wp.element.createElement;
+	var registerBlockVariation = wp.blocks.registerBlockVariation;
+	var __ = wp.i18n.__;
+	var Circle = wp.primitives.Circle;
+	var SVG = wp.primitives.SVG;
+
+	var redCircle = el( Circle, {
+		cx: 24,
+		cy: 24,
+		r: 15,
+		fill: 'red',
+		stroke: 'blue',
+		strokeWidth: '10',
+	} );
+	var redCircleIcon = el(
+		SVG,
+		{ width: 48, height: 48, viewBox: '0 0 48 48' },
+		redCircle
+	);
+
+	registerBlockVariation( 'core/quote', {
+		name: 'large',
+		title: 'Large Quote',
+		isDefault: true,
+		attributes: { className: 'is-style-large' },
+		icon: 'format-quote',
+		scope: [ 'inserter' ],
+	} );
+
+	registerBlockVariation( 'core/paragraph', {
+		name: 'success',
+		title: __( 'Success Message' ),
+		description:
+			'This block displays a success message. This description overrides the default one provided for the Paragraph block.',
+		attributes: {
+			content: 'This is a success message!',
+			backgroundColor: 'vivid-green-cyan',
+			dropCap: false,
+		},
+		icon: 'yes-alt',
+		scope: [ 'inserter' ],
+	} );
+
+	registerBlockVariation( 'core/paragraph', {
+		name: 'warning',
+		title: __( 'Warning Message' ),
+		attributes: {
+			content: 'This is a warning message!',
+			backgroundColor: 'luminous-vivid-amber',
+			dropCap: false,
+		},
+		icon: 'warning',
+		scope: [ 'inserter' ],
+	} );
+
+	registerBlockVariation( 'core/columns', {
+		name: 'four-columns',
+		title: 'Four columns',
+		innerBlocks: [
+			[ 'core/column' ],
+			[ 'core/column' ],
+			[ 'core/column' ],
+			[ 'core/column' ],
+		],
+		icon: redCircleIcon,
+		scope: [ 'block' ],
+	} );
+} )();

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

@@ -0,0 +1,96 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	activatePlugin,
+	createNewPost,
+	deactivatePlugin,
+	insertBlock,
+	searchForBlock,
+} from '@wordpress/e2e-test-utils';
+
+describe( 'Block variations', () => {
+	beforeAll( async () => {
+		await activatePlugin( 'gutenberg-test-block-variations' );
+	} );
+
+	beforeEach( async () => {
+		await createNewPost();
+	} );
+
+	afterAll( async () => {
+		await deactivatePlugin( 'gutenberg-test-block-variations' );
+	} );
+
+	const expectInserterItem = async (
+		blockName,
+		blockTitle,
+		variationName = null
+	) => {
+		const inserterItemSelector = [
+			'.editor-block-list-item',
+			blockName.replace( 'core/', '' ),
+			variationName,
+		]
+			.filter( Boolean )
+			.join( '-' );
+		const inserterItem = await page.$( inserterItemSelector );
+		expect( inserterItem ).toBeDefined();
+		expect(
+			await inserterItem.$x( `//span[text()="${ blockTitle }"]` )
+		).toHaveLength( 1 );
+	};
+
+	test( 'Search for the overriden default Quote block', async () => {
+		await searchForBlock( 'Quote' );
+
+		expect( await page.$( '.editor-block-list-item-quote' ) ).toBeNull();
+		expectInserterItem( 'quote', 'Large Quote', 'large' );
+	} );
+
+	test( 'Insert the overriden default Quote block variation', async () => {
+		await insertBlock( 'Large Quote' );
+
+		expect(
+			await page.$(
+				'.wp-block[data-type="core/quote"] blockquote.is-style-large'
+			)
+		).toBeDefined();
+	} );
+
+	test( 'Search for the Paragraph block with 2 additioanl variations', async () => {
+		await searchForBlock( 'Paragraph' );
+
+		expectInserterItem( 'core/paragraph', 'Paragraph' );
+		expectInserterItem( 'core/paragraph', 'Success Message', 'success' );
+		expectInserterItem( 'core/paragraph', 'Warning Message', 'warning' );
+	} );
+
+	test( 'Insert the Success Message block variation', async () => {
+		await insertBlock( 'Success Message' );
+
+		const successMessageBlock = await page.$(
+			'.wp-block[data-type="core/paragraph"]'
+		);
+		expect( successMessageBlock ).toBeDefined();
+		expect(
+			await successMessageBlock.$eval(
+				'p.has-vivid-green-cyan-background-color',
+				( node ) => node.innerText
+			)
+		).toBe( 'This is a success message!' );
+	} );
+	test( 'Pick the additional variation in the inserted Columns block', async () => {
+		await insertBlock( 'Columns' );
+
+		const fourColumnsVariation = await page.waitForSelector(
+			'.wp-block[data-type="core/columns"] .block-editor-block-variation-picker__variation[aria-label="Four columns"]'
+		);
+		await fourColumnsVariation.click();
+		expect(
+			await page.$$(
+				'.wp-block[data-type="core/columns"] .wp-block[data-type="core/column"]'
+			)
+		).toHaveLength( 4 );
+	} );
+} );