Add end 2 end test to block icons (#7589)

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

@@ -0,0 +1,148 @@
+/**
+ * Internal dependencies
+ */
+import '../support/bootstrap';
+import {
+	newPost,
+	newDesktopBrowserPage,
+	insertBlock,
+	searchForBlock,
+} from '../support/utils';
+import { activatePlugin, deactivatePlugin } from '../support/plugins';
+
+const INSERTER_BUTTON_SELECTOR = '.components-popover__content .editor-block-types-list__item';
+const INSERTER_ICON_SELECTOR = `${ INSERTER_BUTTON_SELECTOR } .editor-block-types-list__item-icon`;
+const INSPECTOR_ICON_SELECTOR = '.edit-post-sidebar .editor-block-icon__colors';
+
+async function getInnerHTML( selector ) {
+	return await page.$eval( selector, ( element ) => element.innerHTML );
+}
+
+async function getBackgroundColor( selector ) {
+	return await page.$eval( selector, ( element ) => {
+		return window.getComputedStyle( element ).backgroundColor;
+	} );
+}
+
+async function getColor( selector ) {
+	return await page.$eval( selector, ( element ) => {
+		return window.getComputedStyle( element ).color;
+	} );
+}
+
+async function getFirstInserterIcon() {
+	return await getInnerHTML( INSERTER_ICON_SELECTOR );
+}
+
+describe( 'Correctly Renders Block Icons on Inserter and Inspector', () => {
+	const dashIconRegex = /<svg.*class=".*dashicons-cart.*?">.*<\/svg>/;
+	const circleString = '<circle cx="10" cy="10" r="10" fill="red" stroke="blue" stroke-width="10"></circle>';
+	const svgIcon = `<svg width="20" height="20" viewBox="0 0 20 20">${ circleString }</svg>`;
+
+	const validateSvgIcon = ( iconHtml ) => {
+		expect( iconHtml ).toMatch( svgIcon );
+	};
+
+	const validateDashIcon = ( iconHtml ) => {
+		expect( iconHtml ).toMatch( dashIconRegex );
+	};
+
+	beforeAll( async () => {
+		await newDesktopBrowserPage();
+		await activatePlugin( 'gutenberg-test-block-icons' );
+		// accept the prompt if the post is "dirty"
+		await page.on( 'dialog', async ( dialog ) => {
+			if ( dialog ) {
+				await dialog.accept();
+			}
+		} );
+	} );
+
+	beforeEach( async () => {
+		await newPost();
+	} );
+
+	afterAll( async () => {
+		await deactivatePlugin( 'gutenberg-test-block-icons' );
+	} );
+
+	function testIconsOfBlock( blockName, blockTitle, validateIcon ) {
+		it( 'Renders correctly the icon in the inserter', async () => {
+			await searchForBlock( blockTitle );
+			validateIcon( await getFirstInserterIcon() );
+		} );
+
+		it( 'Can insert the block', async () => {
+			await insertBlock( blockTitle );
+			expect(
+				await getInnerHTML( `[data-type="${ blockName }"] [data-type="core/paragraph"] p` )
+			).toEqual( blockTitle );
+		} );
+
+		it( 'Renders correctly the icon on the inspector', async () => {
+			await insertBlock( blockTitle );
+			await page.focus( `[data-type="${ blockName }"]` );
+			validateIcon( await getInnerHTML( INSPECTOR_ICON_SELECTOR ) );
+		} );
+	}
+
+	describe( 'Block with svg icon', () => {
+		const blockName = 'test/test-single-svg-icon';
+		const blockTitle = 'TestSimpleSvgIcon';
+		testIconsOfBlock( blockName, blockTitle, validateSvgIcon );
+	} );
+
+	describe( 'Block with dash icon', () => {
+		const blockName = 'test/test-dash-icon';
+		const blockTitle = 'TestDashIcon';
+		testIconsOfBlock( blockName, blockTitle, validateDashIcon );
+	} );
+
+	describe( 'Block with function icon', () => {
+		const blockName = 'test/test-function-icon';
+		const blockTitle = 'TestFunctionIcon';
+		testIconsOfBlock( blockName, blockTitle, validateSvgIcon );
+	} );
+
+	describe( 'Block with dash icon and background and foreground colors', () => {
+		const blockName = 'test/test-dash-icon-colors';
+		const blockTitle = 'TestDashIconColors';
+		it( 'Renders the icon in the inserter with the correct colors', async () => {
+			await searchForBlock( blockTitle );
+			validateDashIcon( await getFirstInserterIcon() );
+			expect( await getBackgroundColor( INSERTER_ICON_SELECTOR ) ).toEqual( 'rgb(1, 0, 0)' );
+			expect( await getColor( INSERTER_ICON_SELECTOR ) ).toEqual( 'rgb(254, 0, 0)' );
+		} );
+
+		it( 'Renders the icon in the inspector with the correct colors', async () => {
+			await insertBlock( blockTitle );
+			await page.focus( `[data-type="${ blockName }"]` );
+			validateDashIcon(
+				await getInnerHTML( INSPECTOR_ICON_SELECTOR )
+			);
+			expect( await getBackgroundColor( INSPECTOR_ICON_SELECTOR ) ).toEqual( 'rgb(1, 0, 0)' );
+			expect( await getColor( INSPECTOR_ICON_SELECTOR ) ).toEqual( 'rgb(254, 0, 0)' );
+		} );
+	} );
+
+	describe( 'Block with svg icon and background color', () => {
+		const blockName = 'test/test-svg-icon-background';
+		const blockTitle = 'TestSvgIconBackground';
+		it( 'Renders the icon in the inserter with the correct background color and an automatically compute readable foreground color', async () => {
+			await searchForBlock( blockTitle );
+			validateSvgIcon( await getFirstInserterIcon() );
+			expect( await getBackgroundColor( INSERTER_ICON_SELECTOR ) ).toEqual( 'rgb(1, 0, 0)' );
+			expect( await getColor( INSERTER_ICON_SELECTOR ) ).toEqual( 'rgb(248, 249, 249)' );
+		} );
+
+		it( 'Renders correctly the icon on the inspector', async () => {
+			await insertBlock( blockTitle );
+			await page.focus( `[data-type="${ blockName }"]` );
+			validateSvgIcon(
+				await getInnerHTML( INSPECTOR_ICON_SELECTOR )
+			);
+			expect( await getBackgroundColor( INSPECTOR_ICON_SELECTOR ) ).toEqual( 'rgb(1, 0, 0)' );
+			expect( await getColor( INSPECTOR_ICON_SELECTOR ) ).toEqual( 'rgb(248, 249, 249)' );
+		} );
+	} );
+} );

test/e2e/support/utils.js

@@ -174,18 +174,26 @@ export async function ensureSidebarOpened() {
 }
 
 /**
- * Opens the inserter, searches for the given term, then selects the first
- * result that appears.
+ * Search for block in the global inserter
  *
  * @param {string} searchTerm The text to search the inserter for.
  */
-export async function insertBlock( searchTerm ) {
+export async function searchForBlock( searchTerm ) {
 	await page.click( '.edit-post-header [aria-label="Add block"]' );
 	// Waiting here is necessary because sometimes the inserter takes more time to
 	// render than Puppeteer takes to complete the 'click' action
 	await page.waitForSelector( '.editor-inserter__menu' );
-	// Filter and reveal buttons.
 	await page.keyboard.type( searchTerm );
+}
+
+/**
+ * Opens the inserter, searches for the given term, then selects the first
+ * result that appears.
+ *
+ * @param {string} searchTerm The text to search the inserter for.
+ */
+export async function insertBlock( searchTerm ) {
+	await searchForBlock( searchTerm );
 	await page.click( `button[aria-label="${ searchTerm }"]` );
 }
 

test/e2e/test-plugins/block-icons.php

@@ -0,0 +1,22 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Block Icons
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-block-icons
+ */
+wp_enqueue_script(
+	'gutenberg-test-block-icons',
+	plugins_url( 'block-icons/index.js', __FILE__ ),
+	array(
+		'wp-blocks',
+		'wp-components',
+		'wp-element',
+		'wp-editor',
+		'wp-hooks',
+		'wp-i18n'
+	),
+	filemtime( plugin_dir_path( __FILE__ ) . 'block-icons/index.js' ),
+	true
+);

test/e2e/test-plugins/block-icons/index.js

@@ -0,0 +1,156 @@
+( function() {
+	var registerBlockType = wp.blocks.registerBlockType;
+	var el = wp.element.createElement;
+	var InnerBlocks = wp.editor.InnerBlocks;
+    var circle = el( 'circle', { cx: 10, cy: 10, r: 10, fill: 'red', stroke: 'blue', strokeWidth: '10' } );
+    var svg = el( 'svg', { width: 20, height: 20, viewBox: '0 0 20 20' }, circle );
+
+	registerBlockType( 'test/test-single-svg-icon', {
+		title: 'TestSimpleSvgIcon',
+		icon: svg,
+		category: 'common',
+
+		edit: function() {
+			return el( 'div', { className: 'test-single-svg-icon', style: { outline: '1px solid gray', padding: 5 } },
+				el(
+					InnerBlocks,
+					{
+						allowedBlocks: [ 'core/paragraph', 'core/image' ],
+						template: [
+							[ 'core/paragraph', {
+								content: 'TestSimpleSvgIcon',
+							} ],
+						],
+					}
+				)
+			);
+		},
+
+		save: function() {
+			return el( 'div', { className: 'test-single-svg-icon', style: { outline: '1px solid gray', padding: 5 } },
+				el( InnerBlocks.Content, {} )
+			);
+		},
+	} );
+
+	registerBlockType( 'test/test-dash-icon', {
+		title: 'TestDashIcon',
+		icon: 'cart',
+		category: 'common',
+
+		edit: function() {
+			return el( 'div', { className: 'test-dash-icon', style: { outline: '1px solid gray', padding: 5 } },
+				el(
+					InnerBlocks,
+					{
+						allowedBlocks: [ 'core/paragraph', 'core/image' ],
+						template: [
+							[ 'core/paragraph', {
+								content: 'TestDashIcon',
+							} ],
+						],
+					}
+				)
+			);
+		},
+
+		save: function() {
+			return el( 'div', { className: 'test-dash-icon', style: { outline: '1px solid gray', padding: 5 } },
+				el( InnerBlocks.Content, {} )
+			);
+		},
+	} );
+
+	registerBlockType( 'test/test-function-icon', {
+		title: 'TestFunctionIcon',
+		icon: function(){
+			return svg;
+		},
+		category: 'common',
+
+		edit: function() {
+			return el( 'div', { className: 'test-function-icon', style: { outline: '1px solid gray', padding: 5 } },
+				el(
+					InnerBlocks,
+					{
+						allowedBlocks: [ 'core/paragraph', 'core/image' ],
+						template: [
+							[ 'core/paragraph', {
+								content: 'TestFunctionIcon',
+							} ],
+						],
+					}
+				)
+			);
+		},
+
+		save: function() {
+			return el( 'div', { className: 'test-function-icon', style: { outline: '1px solid gray', padding: 5 } },
+				el( InnerBlocks.Content, {} )
+			);
+		},
+	} );
+
+	registerBlockType( 'test/test-dash-icon-colors', {
+		title: 'TestDashIconColors',
+		icon: {
+			background: '#010000',
+			foreground: '#fe0000',
+			src: 'cart',
+		},
+		category: 'common',
+
+		edit: function() {
+			return el( 'div', { className: 'test-dash-icon-colorss', style: { outline: '1px solid gray', padding: 5 } },
+				el(
+					InnerBlocks,
+					{
+						allowedBlocks: [ 'core/paragraph', 'core/image' ],
+						template: [
+							[ 'core/paragraph', {
+								content: 'TestIconColors',
+							} ],
+						],
+					}
+				)
+			);
+		},
+
+		save: function() {
+			return el( 'div', { className: 'test-dash-icon-colors', style: { outline: '1px solid gray', padding: 5 } },
+				el( InnerBlocks.Content, {} )
+			);
+		},
+	} );
+
+	registerBlockType( 'test/test-svg-icon-background', {
+		title: 'TestSvgIconBackground',
+		icon: {
+			background: '#010000',
+			src: svg,
+		},
+		category: 'common',
+
+		edit: function() {
+			return el( 'div', { className: 'test-svg-icon-background', style: { outline: '1px solid gray', padding: 5 } },
+				el(
+					InnerBlocks,
+					{
+						allowedBlocks: [ 'core/paragraph', 'core/image' ],
+						template: [
+							[ 'core/paragraph', {
+								content: 'TestIconColors',
+							} ],
+						],
+					}
+				)
+			);
+		},
+
+		save: function() {
+			return el( 'div', { className: 'test-svg-icon-background', style: { outline: '1px solid gray', padding: 5 } },
+				el( InnerBlocks.Content, {} )
+			);
+		},
+	} );
+} )();