@wordpress/e2e-tests 7.17.0 → 7.18.0

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/custom-taxonomies.test.js

@@ -1,61 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	findSidebarPanelWithTitle,
-	openDocumentSettingsSidebar,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Custom Taxonomies labels are used', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-custom-taxonomies' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-custom-taxonomies' );
-	} );
-
-	it( 'Ensures the custom taxonomy labels are respected', async () => {
-		// Open the Setting sidebar.
-		await openDocumentSettingsSidebar();
-
-		const openButton = await findSidebarPanelWithTitle( 'Model' );
-		expect( openButton ).not.toBeFalsy();
-
-		// Get the classes from the panel.
-		const buttonClassName = await (
-			await openButton.getProperty( 'className' )
-		).jsonValue();
-
-		// Open the panel if needed.
-		if ( -1 === buttonClassName.indexOf( 'is-opened' ) ) {
-			await openButton.click();
-		}
-
-		// Check the add new button.
-		const labelNew = await page.$x(
-			"//label[@class='components-form-token-field__label' and contains(text(), 'Add New Model')]"
-		);
-		expect( labelNew ).not.toBeFalsy();
-
-		// Fill with one entry.
-		await page.type(
-			'input.components-form-token-field__input',
-			'Model 1'
-		);
-		await page.keyboard.press( 'Enter' );
-
-		// Check the "Remove Model"
-		const value = await page.$x(
-			"//div[@class='components-form-token-field__input-container']//span//button[@aria-label='Remove Model']"
-		);
-		expect( value ).not.toBeFalsy();
-	} );
-} );

package/specs/editor/various/is-typing.test.js

@@ -1,101 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	createNewPost,
-	showBlockToolbar,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'isTyping', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should hide the toolbar when typing', async () => {
-		const blockToolbarSelector = '.block-editor-block-toolbar';
-
-		await clickBlockAppender();
-
-		// Type in a paragraph.
-		await page.keyboard.type( 'Type' );
-
-		// Toolbar is hidden
-		let blockToolbar = await page.$( blockToolbarSelector );
-		expect( blockToolbar ).toBe( null );
-
-		// Moving the mouse shows the toolbar.
-		await showBlockToolbar();
-
-		// Toolbar is visible.
-		blockToolbar = await page.$( blockToolbarSelector );
-		expect( blockToolbar ).not.toBe( null );
-
-		// Typing again hides the toolbar
-		await page.keyboard.type( ' and continue' );
-
-		// Toolbar is hidden again
-		blockToolbar = await page.$( blockToolbarSelector );
-		expect( blockToolbar ).toBe( null );
-	} );
-
-	it( 'should not close the dropdown when typing in it', async () => {
-		// Adds a Dropdown with an input to all blocks.
-		await page.evaluate( () => {
-			const { Dropdown, ToolbarButton, Fill } = wp.components;
-			const { createElement: el, Fragment } = wp.element;
-			function AddDropdown( BlockListBlock ) {
-				return ( props ) => {
-					return el(
-						Fragment,
-						{},
-						el(
-							Fill,
-							{ name: 'BlockControls' },
-							el( Dropdown, {
-								renderToggle: ( { onToggle } ) =>
-									el(
-										ToolbarButton,
-										{
-											onClick: onToggle,
-											className: 'dropdown-open',
-										},
-										'Open Dropdown'
-									),
-								renderContent: () =>
-									el( 'input', {
-										className: 'dropdown-input',
-									} ),
-							} )
-						),
-						el( BlockListBlock, props )
-					);
-				};
-			}
-
-			wp.hooks.addFilter(
-				'editor.BlockListBlock',
-				'e2e-test/add-dropdown',
-				AddDropdown
-			);
-		} );
-
-		await clickBlockAppender();
-
-		// Type in a paragraph.
-		await page.keyboard.type( 'Type' );
-
-		// Show Toolbar.
-		await showBlockToolbar();
-
-		// Open the dropdown.
-		await page.click( '.dropdown-open' );
-
-		// Type inside the dropdown's input
-		await page.type( '.dropdown-input', 'Random' );
-
-		// The input should still be visible.
-		const input = await page.$( '.dropdown-input' );
-		expect( input ).not.toBe( null );
-	} );
-} );

package/specs/editor/various/sidebar-permalink.test.js

@@ -1,53 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	publishPost,
-	canvas,
-} from '@wordpress/e2e-test-utils';
-
-const urlButtonSelector = '*[aria-label^="Change URL"]';
-
-// This tests are not together with the remaining sidebar tests,
-// because we need to publish/save a post, to correctly test the permalink row.
-// The sidebar test suit enforces that focus is never lost, but during save operations
-// the focus is lost and a new element is focused once the save is completed.
-describe( 'Sidebar Permalink', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-custom-post-types' );
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-custom-post-types' );
-	} );
-
-	it( 'should not render URL when post is publicly queryable but not public', async () => {
-		await createNewPost( { postType: 'public_q_not_public' } );
-		await page.keyboard.type( 'aaaaa' );
-		await publishPost();
-		// Start editing again.
-		await canvas().type( '.editor-post-title__input', ' (Updated)' );
-		expect( await page.$( urlButtonSelector ) ).toBeNull();
-	} );
-
-	it( 'should not render URL when post is public but not publicly queryable', async () => {
-		await createNewPost( { postType: 'not_public_q_public' } );
-		await page.keyboard.type( 'aaaaa' );
-		await publishPost();
-		// Start editing again.
-		await canvas().type( '.editor-post-title__input', ' (Updated)' );
-		expect( await page.$( urlButtonSelector ) ).toBeNull();
-	} );
-
-	it( 'should render URL when post is public and publicly queryable', async () => {
-		await createNewPost( { postType: 'public_q_public' } );
-		await page.keyboard.type( 'aaaaa' );
-		await publishPost();
-		// Start editing again.
-		await canvas( 0 ).type( '.editor-post-title__input', ' (Updated)' );
-		expect( await page.$( urlButtonSelector ) ).not.toBeNull();
-	} );
-} );