@wordpress/e2e-tests 7.16.0 → 7.18.0

package/specs/editor/plugins/annotations.test.js

@@ -1,189 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	clickBlockToolbarButton,
-	clickMenuItem,
-	clickOnMoreMenuItem,
-	createNewPost,
-	deactivatePlugin,
-	canvas,
-} from '@wordpress/e2e-test-utils';
-
-const clickOnBlockSettingsMenuItem = async ( buttonLabel ) => {
-	await clickBlockToolbarButton( 'Options' );
-	await clickMenuItem( buttonLabel );
-};
-
-const ANNOTATIONS_SELECTOR = '.annotation-text-e2e-tests';
-
-describe( 'Annotations', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-plugin-plugins-api' );
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-plugin-plugins-api' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	/**
-	 * Annotates the text in the first block from start to end.
-	 *
-	 * @param {number} start Position to start the annotation.
-	 * @param {number} end   Position to end the annotation.
-	 *
-	 * @return {void}
-	 */
-	async function annotateFirstBlock( start, end ) {
-		await page.focus( '#annotations-tests-range-start' );
-		await page.keyboard.press( 'Backspace' );
-		await page.keyboard.type( start + '' );
-		await page.focus( '#annotations-tests-range-end' );
-		await page.keyboard.press( 'Backspace' );
-		await page.keyboard.type( end + '' );
-
-		// Click add annotation button.
-		const addAnnotationButton = (
-			await page.$x( "//button[contains(text(), 'Add annotation')]" )
-		)[ 0 ];
-		await addAnnotationButton.click();
-		await canvas().evaluate( () =>
-			document.querySelector( '.wp-block-paragraph' ).focus()
-		);
-	}
-
-	/**
-	 * Presses the button that removes all annotations.
-	 *
-	 * @return {void}
-	 */
-	async function removeAnnotations() {
-		// Click remove annotations button.
-		const addAnnotationButton = (
-			await page.$x( "//button[contains(text(), 'Remove annotations')]" )
-		)[ 0 ];
-		await addAnnotationButton.click();
-		await canvas().evaluate( () =>
-			document.querySelector( '[contenteditable]' ).focus()
-		);
-	}
-
-	/**
-	 * Returns the inner text of the first text annotation on the page.
-	 *
-	 * @return {Promise<string>} The annotated text.
-	 */
-	async function getAnnotatedText() {
-		const annotations = await canvas().$$( ANNOTATIONS_SELECTOR );
-
-		const annotation = annotations[ 0 ];
-
-		return await canvas().evaluate( ( el ) => el.innerText, annotation );
-	}
-
-	/**
-	 * Returns the inner HTML of the first RichText in the page.
-	 *
-	 * @return {Promise<string>} Inner HTML.
-	 */
-	async function getRichTextInnerHTML() {
-		const htmlContent = await canvas().$$( '.wp-block-paragraph' );
-		return await canvas().evaluate( ( el ) => {
-			return el.innerHTML;
-		}, htmlContent[ 0 ] );
-	}
-
-	it( 'allows a block to be annotated', async () => {
-		await page.keyboard.type( 'Title' + '\n' + 'Paragraph to annotate' );
-
-		await clickOnMoreMenuItem( 'Annotations' );
-
-		let annotations = await canvas().$$( ANNOTATIONS_SELECTOR );
-		expect( annotations ).toHaveLength( 0 );
-
-		await annotateFirstBlock( 9, 13 );
-
-		annotations = await canvas().$$( ANNOTATIONS_SELECTOR );
-		expect( annotations ).toHaveLength( 1 );
-
-		const text = await getAnnotatedText();
-		expect( text ).toBe( ' to ' );
-
-		await clickOnBlockSettingsMenuItem( 'Edit as HTML' );
-
-		const htmlContent = await canvas().$$(
-			'.block-editor-block-list__block-html-textarea'
-		);
-		const html = await canvas().evaluate( ( el ) => {
-			return el.innerHTML;
-		}, htmlContent[ 0 ] );
-
-		// There should be no <mark> tags in the raw content.
-		expect( html ).toBe( '&lt;p&gt;Paragraph to annotate&lt;/p&gt;' );
-	} );
-
-	it( 'keeps the cursor in the same location when applying annotation', async () => {
-		await page.keyboard.type( 'Title' + '\n' + 'ABC' );
-		await clickOnMoreMenuItem( 'Annotations' );
-
-		await annotateFirstBlock( 1, 2 );
-
-		// The selection should still be at the end, so test that by typing:
-		await page.keyboard.type( 'D' );
-
-		await removeAnnotations();
-		const htmlContent = await canvas().$$( '.wp-block-paragraph' );
-		const html = await canvas().evaluate( ( el ) => {
-			return el.innerHTML;
-		}, htmlContent[ 0 ] );
-
-		expect( html ).toBe( 'ABCD' );
-	} );
-
-	it( 'moves when typing before it', async () => {
-		await page.keyboard.type( 'Title' + '\n' + 'ABC' );
-		await clickOnMoreMenuItem( 'Annotations' );
-
-		await annotateFirstBlock( 1, 2 );
-
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-
-		// Put an 1 after the A, it should not be annotated.
-		await page.keyboard.type( '1' );
-
-		const annotatedText = await getAnnotatedText();
-		expect( annotatedText ).toBe( 'B' );
-
-		await removeAnnotations();
-		const blockText = await getRichTextInnerHTML();
-		expect( blockText ).toBe( 'A1BC' );
-	} );
-
-	it( 'grows when typing inside it', async () => {
-		await page.keyboard.type( 'Title' + '\n' + 'ABC' );
-		await clickOnMoreMenuItem( 'Annotations' );
-
-		await annotateFirstBlock( 1, 2 );
-
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-
-		// Put an 1 after the A, it should not be annotated.
-		await page.keyboard.type( '2' );
-
-		const annotatedText = await getAnnotatedText();
-		expect( annotatedText ).toBe( 'B2' );
-
-		await removeAnnotations();
-		const blockText = await getRichTextInnerHTML();
-		expect( blockText ).toBe( 'AB2C' );
-	} );
-} );

package/specs/editor/plugins/block-directory-add.test.js

@@ -1,205 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	searchForBlock,
-	insertBlockDirectoryBlock,
-	setUpResponseMocking,
-	getEditedPostContent,
-	createJSONResponse,
-} from '@wordpress/e2e-test-utils';
-
-const BLOCK1_NAME = 'block-directory-test-block/main-block';
-
-// Urls to mock.
-const SEARCH_URLS = [
-	'/wp/v2/block-directory/search',
-	`rest_route=${ encodeURIComponent( '/wp/v2/block-directory/search' ) }`,
-];
-
-const BLOCK_TYPE_URLS = [
-	`/wp/v2/block-types/${ BLOCK1_NAME }`,
-	`rest_route=${ encodeURIComponent(
-		`/wp/v2/block-types/${ BLOCK1_NAME }`
-	) }`,
-];
-
-const INSTALL_URLS = [
-	'/wp/v2/plugins',
-	`rest_route=${ encodeURIComponent( '/wp/v2/plugins' ) }`,
-];
-
-// Example Blocks.
-const MOCK_BLOCK1 = {
-	name: BLOCK1_NAME,
-	title: 'Block Directory Test Block',
-	description: 'This plugin is useful for the block.',
-	id: 'block-directory-test-block',
-	rating: 0,
-	rating_count: 0,
-	active_installs: 0,
-	author_block_rating: 0,
-	author_block_count: 1,
-	author: 'No Author',
-	icon: 'block-default',
-	assets: [
-		'https://fake_url.com/block.js', // We will mock this.
-	],
-	humanized_updated: '5 months ago',
-	links: {},
-};
-
-const MOCK_INSTALLED_BLOCK_PLUGIN_DETAILS = {
-	plugin: 'block-directory-test-block',
-	status: 'active',
-	name: 'Block Directory',
-	plugin_uri: '',
-	author: 'No Author',
-	author_uri: '',
-	description: {
-		raw: 'This plugin is useful for the block.',
-		rendered: 'This plugin is useful for the block.',
-	},
-	version: '1.0',
-	network_only: false,
-	requires_wp: '',
-	requires_php: '',
-	text_domain: 'block-directory-test-block',
-	_links: {
-		self: [
-			{
-				href: '',
-			},
-		],
-	},
-};
-
-const MOCK_BLOCK2 = {
-	...MOCK_BLOCK1,
-	name: 'block-directory-test-block/secondary-block',
-	title: 'Block Directory Test Block - Pt Deux',
-	id: 'block-directory-test-secondary-block',
-};
-
-// Block that will be registered.
-const block = `( function() {
-	var registerBlockType = wp.blocks.registerBlockType;
-	var el = wp.element.createElement;
-
-	registerBlockType( '${ MOCK_BLOCK1.name }', {
-		title: 'Test Block for Block Directory',
-		icon: 'hammer',
-		category: 'text',
-		attributes: {},
-		edit: function( props ) {
-			return el( 'p', null, 'Test Copy' );
-		},
-		save: function() {
-			return null;
-		},
-	} );
-} )();`;
-
-const MOCK_EMPTY_RESPONSES = [
-	{
-		match: ( request ) =>
-			matchUrl( request.url(), SEARCH_URLS ) &&
-			request.method() === 'GET',
-		onRequestMatch: createJSONResponse( [] ),
-	},
-];
-
-const MOCK_BLOCKS_RESPONSES = [
-	{
-		// Mock response for search with the block.
-		match: ( request ) =>
-			matchUrl( request.url(), SEARCH_URLS ) &&
-			request.method() === 'GET',
-		onRequestMatch: createJSONResponse( [ MOCK_BLOCK1, MOCK_BLOCK2 ] ),
-	},
-	{
-		// Mock response for block type.
-		match: ( request ) => matchUrl( request.url(), BLOCK_TYPE_URLS ),
-		onRequestMatch: createJSONResponse( {} ),
-	},
-	{
-		// Mock response for install.
-		match: ( request ) => matchUrl( request.url(), INSTALL_URLS ),
-		onRequestMatch: createJSONResponse(
-			MOCK_INSTALLED_BLOCK_PLUGIN_DETAILS
-		),
-	},
-	{
-		// Mock the response for the js asset once it gets injected.
-		match: ( request ) => request.url().includes( MOCK_BLOCK1.assets[ 0 ] ),
-		onRequestMatch: createResponse(
-			Buffer.from( block, 'utf8' ),
-			'application/javascript; charset=utf-8'
-		),
-	},
-	{
-		// Mock the post-new page as requested via apiFetch for determining new CSS/JS assets.
-		match: ( request ) => request.url().includes( '/post-new.php' ),
-		onRequestMatch: createResponse(
-			`<html><head><script id="mock-block-js" src="${ MOCK_BLOCK1.assets[ 0 ] }"></script></head><body/></html>`,
-			'text/html; charset=UTF-8'
-		),
-	},
-];
-
-function getResponseObject( obj, contentType ) {
-	return {
-		status: 200,
-		contentType,
-		body: obj,
-	};
-}
-
-function createResponse( mockResponse, contentType ) {
-	return async ( request ) =>
-		request.respond( getResponseObject( mockResponse, contentType ) );
-}
-
-const matchUrl = ( reqUrl, urls ) => {
-	return urls.some( ( el ) => reqUrl.indexOf( el ) >= 0 );
-};
-
-describe( 'adding blocks from block directory', () => {
-	beforeAll( async () => {
-		await createNewPost();
-	} );
-
-	it( 'Should show an empty state when no plugin is found.', async () => {
-		// Be super weird so there won't be a matching block installed.
-		const impossibleBlockName = '@#$@@Dsdsdfw2#$@';
-
-		// Return an empty list of plugins.
-		await setUpResponseMocking( MOCK_EMPTY_RESPONSES );
-
-		// Search for the block via the inserter.
-		await searchForBlock( impossibleBlockName );
-
-		const selectorContent = await page.evaluate(
-			() =>
-				document.querySelector( '.block-editor-inserter__main-area' )
-					.innerHTML
-		);
-		expect( selectorContent ).toContain(
-			'block-editor-inserter__no-results'
-		);
-	} );
-
-	it( 'Should be able to add (the first) block.', async () => {
-		// Setup our mocks.
-		await setUpResponseMocking( MOCK_BLOCKS_RESPONSES );
-
-		// Search for the block via the inserter.
-		await insertBlockDirectoryBlock( MOCK_BLOCK1.title );
-
-		await page.waitForSelector( `div[data-type="${ MOCK_BLOCK1.name }"]` );
-
-		// The block will auto select and get added, make sure we see it in the content.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );

package/specs/editor/plugins/block-icons.test.js

@@ -1,170 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	insertBlock,
-	pressKeyWithModifier,
-	searchForBlock,
-	openDocumentSettingsSidebar,
-} from '@wordpress/e2e-test-utils';
-
-const INSERTER_BUTTON_SELECTOR =
-	'.block-editor-inserter__main-area .block-editor-block-types-list__item';
-const INSERTER_ICON_WRAPPER_SELECTOR = `${ INSERTER_BUTTON_SELECTOR } .block-editor-block-types-list__item-icon`;
-const INSERTER_ICON_SELECTOR = `${ INSERTER_BUTTON_SELECTOR } .block-editor-block-icon`;
-const INSPECTOR_ICON_SELECTOR = '.edit-post-sidebar .block-editor-block-icon';
-
-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 );
-}
-
-async function selectFirstBlock() {
-	await pressKeyWithModifier( 'access', 'o' );
-	const navButtons = await page.$$(
-		'.block-editor-list-view-block-select-button'
-	);
-	await navButtons[ 0 ].click();
-}
-
-describe( 'Correctly Renders Block Icons on Inserter and Inspector', () => {
-	const dashIconRegex = /<span.*?class=".*?dashicons-cart.*?">.*?<\/span>/;
-	const circleString =
-		'<circle cx="10" cy="10" r="10" fill="red" stroke="blue" stroke-width="10"></circle>';
-	const svgIcon = new RegExp(
-		`<svg.*?viewBox="0 0 20 20".*?>${ circleString }</svg>`
-	);
-
-	const validateSvgIcon = ( iconHtml ) => {
-		expect( iconHtml ).toMatch( svgIcon );
-	};
-
-	const validateDashIcon = ( iconHtml ) => {
-		expect( iconHtml ).toMatch( dashIconRegex );
-	};
-
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-block-icons' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	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"]`
-				)
-			).toEqual( blockTitle );
-		} );
-
-		it( 'Renders correctly the icon on the inspector', async () => {
-			await insertBlock( blockTitle );
-			await openDocumentSettingsSidebar();
-			await selectFirstBlock();
-			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 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_WRAPPER_SELECTOR )
-			).toEqual( 'rgb(1, 0, 0)' );
-			expect( await getColor( INSERTER_ICON_WRAPPER_SELECTOR ) ).toEqual(
-				'rgb(254, 0, 0)'
-			);
-		} );
-
-		it( 'Renders the icon in the inspector with the correct colors', async () => {
-			await insertBlock( blockTitle );
-			await openDocumentSettingsSidebar();
-			await selectFirstBlock();
-			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 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_WRAPPER_SELECTOR )
-			).toEqual( 'rgb(1, 0, 0)' );
-			expect( await getColor( INSERTER_ICON_WRAPPER_SELECTOR ) ).toEqual(
-				'rgb(248, 249, 249)'
-			);
-		} );
-
-		it( 'Renders correctly the icon on the inspector', async () => {
-			await insertBlock( blockTitle );
-			await openDocumentSettingsSidebar();
-			await selectFirstBlock();
-			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)'
-			);
-		} );
-	} );
-} );

package/specs/editor/plugins/child-blocks.test.js

@@ -1,66 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	closeGlobalBlockInserter,
-	createNewPost,
-	deactivatePlugin,
-	getAllBlockInserterItemTitles,
-	insertBlock,
-	openGlobalBlockInserter,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Child Blocks', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-child-blocks' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-child-blocks' );
-	} );
-
-	it( 'are hidden from the global block inserter', async () => {
-		await openGlobalBlockInserter();
-		await expect( await getAllBlockInserterItemTitles() ).not.toContain(
-			'Child Blocks Child'
-		);
-	} );
-
-	it( 'shows up in a parent block', async () => {
-		await insertBlock( 'Child Blocks Unrestricted Parent' );
-		await closeGlobalBlockInserter();
-		await page.waitForSelector(
-			'[data-type="test/child-blocks-unrestricted-parent"] .block-editor-default-block-appender'
-		);
-		await page.click(
-			'[data-type="test/child-blocks-unrestricted-parent"] .block-editor-default-block-appender'
-		);
-		await openGlobalBlockInserter();
-		const inserterItemTitles = await getAllBlockInserterItemTitles();
-		expect( inserterItemTitles ).toContain( 'Child Blocks Child' );
-		expect( inserterItemTitles.length ).toBeGreaterThan( 20 );
-	} );
-
-	it( 'display in a parent block with allowedItems', async () => {
-		await insertBlock( 'Child Blocks Restricted Parent' );
-		await closeGlobalBlockInserter();
-		await page.waitForSelector(
-			'[data-type="test/child-blocks-restricted-parent"] .block-editor-default-block-appender'
-		);
-		await page.click(
-			'[data-type="test/child-blocks-restricted-parent"] .block-editor-default-block-appender'
-		);
-		await openGlobalBlockInserter();
-		const allowedBlocks = await getAllBlockInserterItemTitles();
-		expect( allowedBlocks.sort() ).toEqual( [
-			'Child Blocks Child',
-			'Image',
-			'Paragraph',
-		] );
-	} );
-} );