@wordpress/e2e-tests 7.17.0 → 7.18.0

package/plugins/interactive-blocks/store-afterload/render.php

@@ -1,41 +0,0 @@
-<?php
-/**
- * HTML for testing `afterLoad` callbacks added to the store.
- *
- * @package gutenberg-test-interactive-blocks
- */
-
-?>
-<div data-wp-interactive>
-	<h3>Store statuses</h3>
-	<p data-store-status data-wp-text="state.status1">waiting</p>
-	<p data-store-status data-wp-text="state.status2">waiting</p>
-	<p data-store-status data-wp-text="state.status3">waiting</p>
-	<p data-store-status data-wp-text="state.status4">waiting</p>
-
-	<h3><code>afterLoad</code> executions</h3>
-	<p>All stores ready:&#20;
-		<span
-			data-testid="all-stores-ready"
-			data-wp-text="state.allStoresReady">
-		>waiting</span>
-	</p>
-	<p>vDOM ready:&#20;
-		<span
-			data-testid="vdom-ready"
-			data-wp-text="state.vdomReady">
-		>waiting</span>
-	</p>
-	<p><code>afterLoad</code> exec times:&#20;
-		<span
-			data-testid="after-load-exec-times"
-			data-wp-text="state.execTimes.afterLoad">
-		>0</span>
-	</p>
-	<p><code>sharedAfterLoad</code> exec times:&#20;
-		<span
-			data-testid="shared-after-load-exec-times"
-			data-wp-text="state.execTimes.sharedAfterLoad">
-		>0</span>
-	</p>
-</div>

package/plugins/interactive-blocks/store-afterload/view.js

@@ -1,60 +0,0 @@
-( ( { wp } ) => {
-	/**
-	 * WordPress dependencies
-	 */
-	const { store } = wp.interactivity;
-
-	const afterLoad = ({ state }) => {
-		// Check the state is correctly initialized.
-		const { status1, status2, status3, status4 } = state;
-		state.allStoresReady =
-			[ status1, status2, status3, status4 ]
-				.every( ( t ) => t === 'ready' )
-				.toString();
-
-		// Check the HTML has been processed as well.
-		const selector = '[data-store-status]';
-		state.vdomReady =
-			document.querySelector( selector ) &&
-				Array.from(
-					document.querySelectorAll( selector )
-				).every( ( el ) => el.textContent === 'ready' ).toString();
-
-		// Increment exec times everytime this function runs.
-		state.execTimes.afterLoad += 1;
-	}
-
-	const sharedAfterLoad = ({ state }) => {
-		// Increment exec times everytime this function runs.
-		state.execTimes.sharedAfterLoad += 1;
-	}
-
-	// Case 1: without afterload callback
-	store( {
-		state: { status1: 'ready' },
-	} );
-
-	// Case 2: non-shared afterload callback
-	store( {
-		state: {
-			status2: 'ready',
-			allStoresReady: false,
-			vdomReady: false,
-			execTimes: { afterLoad: 0 },
-		},
-	}, { afterLoad } );
-
-	// Case 3: shared afterload callback
-	store( {
-		state: {
-			status3: 'ready',
-			execTimes: { sharedAfterLoad: 0 },
-		},
-	}, { afterLoad: sharedAfterLoad }  );
-	store( {
-		state: {
-			status4: 'ready',
-			execTimes: { sharedAfterLoad: 0 },
-		},
-	}, { afterLoad: sharedAfterLoad }  );
-} )( window );

package/specs/editor/plugins/__snapshots__/align-hook.test.js.snap

@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Align Hook Works As Expected Block with align array Correctly applies the selected alignment and correctly removes the alignment 1`] = `
-"<!-- wp:test/test-align-array {"align":"center"} -->
-<div style="outline:1px solid gray;padding:5px" class="wp-block-test-test-align-array aligncenter">Test Align Hook</div>
-<!-- /wp:test/test-align-array -->"
-`;
-
-exports[`Align Hook Works As Expected Block with align array Correctly applies the selected alignment and correctly removes the alignment 2`] = `
-"<!-- wp:test/test-align-array -->
-<div style="outline:1px solid gray;padding:5px" class="wp-block-test-test-align-array">Test Align Hook</div>
-<!-- /wp:test/test-align-array -->"
-`;
-
-exports[`Align Hook Works As Expected Block with align true Correctly applies the selected alignment and correctly removes the alignment 1`] = `
-"<!-- wp:test/test-align-true {"align":"right"} -->
-<div style="outline:1px solid gray;padding:5px" class="wp-block-test-test-align-true alignright">Test Align Hook</div>
-<!-- /wp:test/test-align-true -->"
-`;
-
-exports[`Align Hook Works As Expected Block with align true Correctly applies the selected alignment and correctly removes the alignment 2`] = `
-"<!-- wp:test/test-align-true -->
-<div style="outline:1px solid gray;padding:5px" class="wp-block-test-test-align-true">Test Align Hook</div>
-<!-- /wp:test/test-align-true -->"
-`;
-
-exports[`Align Hook Works As Expected Block with default align Correctly applies the selected alignment and correctly removes the alignment 1`] = `
-"<!-- wp:test/test-default-align {"align":"center"} -->
-<div style="outline:1px solid gray;padding:5px" class="wp-block-test-test-default-align aligncenter">Test Align Hook</div>
-<!-- /wp:test/test-default-align -->"
-`;
-
-exports[`Align Hook Works As Expected Block with default align Correctly applies the selected alignment and correctly removes the alignment 2`] = `
-"<!-- wp:test/test-default-align {"align":""} -->
-<div style="outline:1px solid gray;padding:5px" class="wp-block-test-test-default-align">Test Align Hook</div>
-<!-- /wp:test/test-default-align -->"
-`;
-
-exports[`Align Hook Works As Expected Block with no alignment set Does not save any alignment related attribute or class 1`] = `
-"<!-- wp:test/test-no-alignment-set -->
-<div style="outline:1px solid gray;padding:5px" class="wp-block-test-test-no-alignment-set">Test Align Hook</div>
-<!-- /wp:test/test-no-alignment-set -->"
-`;

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

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`adding blocks from block directory Should be able to add (the first) block. 1`] = `"<!-- wp:block-directory-test-block/main-block /-->"`;

package/specs/editor/plugins/align-hook.test.js

@@ -1,234 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	getAllBlocks,
-	getEditedPostContent,
-	insertBlock,
-	selectBlockByClientId,
-	setPostContent,
-	clickBlockToolbarButton,
-} from '@wordpress/e2e-test-utils';
-
-const alignLabels = {
-	none: 'None',
-	left: 'Align left',
-	center: 'Align center',
-	right: 'Align right',
-	wide: 'Wide width',
-	full: 'Full width',
-};
-
-/**
- * Helper function to get the `labels` of align control. It actually evaluates the
- * basic label of the button without the `info` text node if exists.
- *
- * @param {Object}  options                               Options for the util function
- * @param {boolean} [options.getActiveButtonLabels=false] Flag for returning the active buttons labels only.
- * @return {string[]} The matched labels.
- */
-const getAlignmentToolbarLabels = async ( {
-	getActiveButtonLabels = false,
-} = {} ) => {
-	const selector = `.components-dropdown-menu__menu button${
-		getActiveButtonLabels ? '.is-active' : ''
-	} .components-menu-item__item`;
-	return page.evaluate( ( _selector ) => {
-		return (
-			Array.from( document.querySelectorAll( _selector ) )
-				/**
-				 * We neede this for now because conditionally there could be two nodes
-				 * with the same class(). This should be removed when the following
-				 * issue is resolved.
-				 *
-				 * @see https://github.com/WordPress/gutenberg/issues/34838
-				 */
-				.filter( ( contentNode ) => ! contentNode.childElementCount )
-				.map( ( contentNode ) => {
-					return contentNode.innerText;
-				} )
-		);
-	}, selector );
-};
-
-const expectActiveButtonLabelToBe = async ( expected ) => {
-	await clickBlockToolbarButton( 'Align' );
-	const activeButtonLabels = await getAlignmentToolbarLabels( {
-		getActiveButtonLabels: true,
-	} );
-	expect( activeButtonLabels ).toHaveLength( 1 );
-	expect( activeButtonLabels[ 0 ] ).toEqual( expected );
-};
-
-const createShowsTheExpectedButtonsTest = ( blockName, buttonLabels ) => {
-	it( 'Shows the expected buttons on the alignment toolbar', async () => {
-		await insertBlock( blockName );
-		await clickBlockToolbarButton( 'Align' );
-		expect( await getAlignmentToolbarLabels() ).toEqual(
-			expect.arrayContaining( buttonLabels )
-		);
-	} );
-};
-
-const createAppliesNoneAlignmentByDefaultTest = ( blockName ) => {
-	it( 'applies none alignment by default', async () => {
-		await insertBlock( blockName );
-		await expectActiveButtonLabelToBe( alignLabels.none );
-	} );
-};
-
-const verifyMarkupIsValid = async ( htmlMarkup ) => {
-	await setPostContent( htmlMarkup );
-	const blocks = await getAllBlocks();
-	expect( blocks ).toHaveLength( 1 );
-	expect( blocks[ 0 ].isValid ).toBeTruthy();
-};
-
-const createCorrectlyAppliesAndRemovesAlignmentTest = (
-	blockName,
-	alignment
-) => {
-	it( 'Correctly applies the selected alignment and correctly removes the alignment', async () => {
-		const BUTTON_XPATH = `//button[contains(@class,'components-dropdown-menu__menu-item')]//span[contains(text(), '${ alignLabels[ alignment ] }')]`;
-
-		// Set the specified alignment.
-		await insertBlock( blockName );
-		await clickBlockToolbarButton( 'Align' );
-		await ( await page.$x( BUTTON_XPATH ) )[ 0 ].click();
-
-		// Verify the button of the specified alignment is pressed.
-		await expectActiveButtonLabelToBe( alignLabels[ alignment ] );
-
-		let htmlMarkup = await getEditedPostContent();
-
-		// Verify the markup of the selected alignment was generated.
-		expect( htmlMarkup ).toMatchSnapshot();
-
-		// Verify the markup can be correctly parsed.
-		await verifyMarkupIsValid( htmlMarkup );
-
-		await selectBlockByClientId( ( await getAllBlocks() )[ 0 ].clientId );
-
-		// Remove the alignment.
-		await clickBlockToolbarButton( 'Align' );
-		await ( await page.$x( BUTTON_XPATH ) )[ 0 ].click();
-
-		// Verify 'none' alignment button is in pressed state.
-		await expectActiveButtonLabelToBe( alignLabels.none );
-
-		// Verify alignment markup was removed from the block.
-		htmlMarkup = await getEditedPostContent();
-		expect( htmlMarkup ).toMatchSnapshot();
-
-		// verify the markup when no alignment is set is valid
-		await verifyMarkupIsValid( htmlMarkup );
-
-		await selectBlockByClientId( ( await getAllBlocks() )[ 0 ].clientId );
-
-		// Verify alignment `none` button is in pressed state after parsing the block.
-		await expectActiveButtonLabelToBe( alignLabels.none );
-	} );
-};
-
-describe( 'Align Hook Works As Expected', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-align-hook' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-align-hook' );
-	} );
-
-	describe( 'Block with no alignment set', () => {
-		const BLOCK_NAME = 'Test No Alignment Set';
-		it( 'Shows no alignment buttons on the alignment toolbar', async () => {
-			await insertBlock( BLOCK_NAME );
-			const CHANGE_ALIGNMENT_BUTTON_SELECTOR =
-				'.block-editor-block-toolbar .components-dropdown-menu__toggle[aria-label="Align"]';
-			const changeAlignmentButton = await page.$(
-				CHANGE_ALIGNMENT_BUTTON_SELECTOR
-			);
-			expect( changeAlignmentButton ).toBe( null );
-		} );
-
-		it( 'Does not save any alignment related attribute or class', async () => {
-			await insertBlock( BLOCK_NAME );
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-	} );
-
-	describe( 'Block with align true', () => {
-		const BLOCK_NAME = 'Test Align True';
-
-		createShowsTheExpectedButtonsTest(
-			BLOCK_NAME,
-			Object.values( alignLabels )
-		);
-
-		createAppliesNoneAlignmentByDefaultTest( BLOCK_NAME );
-
-		createCorrectlyAppliesAndRemovesAlignmentTest( BLOCK_NAME, 'right' );
-	} );
-
-	describe( 'Block with align array', () => {
-		const BLOCK_NAME = 'Test Align Array';
-
-		createShowsTheExpectedButtonsTest( BLOCK_NAME, [
-			alignLabels.none,
-			alignLabels.left,
-			alignLabels.center,
-		] );
-
-		createAppliesNoneAlignmentByDefaultTest( BLOCK_NAME );
-
-		createCorrectlyAppliesAndRemovesAlignmentTest( BLOCK_NAME, 'center' );
-	} );
-
-	describe( 'Block with default align', () => {
-		const BLOCK_NAME = 'Test Default Align';
-		const SELECTED_ALIGNMENT_CONTROL_SELECTOR =
-			'//div[contains(@class, "components-dropdown-menu__menu")]//button[contains(@class, "is-active")]/span[text()="Align right"]';
-		createShowsTheExpectedButtonsTest(
-			BLOCK_NAME,
-			Object.values( alignLabels )
-		);
-
-		it( 'Applies the selected alignment by default', async () => {
-			await insertBlock( BLOCK_NAME );
-			// Verify the correct alignment button is pressed.
-			await clickBlockToolbarButton( 'Align' );
-			const selectedAlignmentControls = await page.$x(
-				SELECTED_ALIGNMENT_CONTROL_SELECTOR
-			);
-			expect( selectedAlignmentControls ).toHaveLength( 1 );
-		} );
-
-		it( 'The default markup does not contain the alignment attribute but contains the alignment class', async () => {
-			await insertBlock( BLOCK_NAME );
-			const markup = await getEditedPostContent();
-			expect( markup ).not.toContain( '"align":"right"' );
-			expect( markup ).toContain( 'alignright' );
-		} );
-
-		it( 'Can remove the default alignment and the align attribute equals none but alignnone class is not applied', async () => {
-			await insertBlock( BLOCK_NAME );
-			// Remove the alignment.
-			await clickBlockToolbarButton( 'Align' );
-			const [ selectedAlignmentControl ] = await page.$x(
-				SELECTED_ALIGNMENT_CONTROL_SELECTOR
-			);
-			await selectedAlignmentControl.click();
-			const markup = await getEditedPostContent();
-			expect( markup ).toContain( '"align":""' );
-		} );
-
-		createCorrectlyAppliesAndRemovesAlignmentTest( BLOCK_NAME, 'center' );
-	} );
-} );

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();
-	} );
-} );