@wordpress/e2e-tests 6.0.0 → 6.2.0

package/specs/editor/various/font-size-picker.test.js

@@ -1,314 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	getEditedPostContent,
-	createNewPost,
-	pressKeyWithModifier,
-	pressKeyTimes,
-	openTypographyToolsPanelMenu,
-} from '@wordpress/e2e-test-utils';
-
-const openFontSizeSelectControl = async () => {
-	const selectControlSelector =
-		"//div[contains(@class, 'components-font-size-picker__controls')]//button[contains(@class, 'components-custom-select-control__button')]";
-	const selectControl = await page.waitForXPath( selectControlSelector );
-	return selectControl.click();
-};
-
-const FONT_SIZE_TOGGLE_GROUP_SELECTOR =
-	"//div[contains(@class, 'components-font-size-picker__controls')]//div[contains(@class, 'components-toggle-group-control')]";
-
-// Click a button by its label - applies when ToggleGroupControl is used.
-const clickFontSizeButtonByLabel = async ( label ) => {
-	const buttonSelector = `${ FONT_SIZE_TOGGLE_GROUP_SELECTOR }//button[@aria-label='${ label }']`;
-	const button = await page.waitForXPath( buttonSelector );
-	return button.click();
-};
-
-// Clicks the button to toggle between custom size input and the control for the presets.
-const toggleCustomInput = async ( showCustomInput ) => {
-	const label = showCustomInput ? 'Set custom size' : 'Use size preset';
-	const toggleButton = await page.waitForXPath(
-		`//button[@aria-label='${ label }']`
-	);
-	return toggleButton.click();
-};
-
-const clickCustomInput = async () => {
-	const customInput = await page.waitForXPath( "//input[@type='number']" );
-	return customInput.click();
-};
-
-describe( 'Font Size Picker', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-	describe( 'Common', () => {
-		it( 'should apply a named font size using the font size input', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph to be made "small"' );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			// This should be the "small" font-size of the editor defaults.
-			await page.keyboard.type( '13' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
-			<p class=\\"has-small-font-size\\">Paragraph to be made \\"small\\"</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-		it( 'should apply a custom font size using the font size input', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph to be made "small"' );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			await page.keyboard.type( '23' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"style\\":{\\"typography\\":{\\"fontSize\\":\\"23px\\"}}} -->
-			<p style=\\"font-size:23px\\">Paragraph to be made \\"small\\"</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-		it( 'should reset a custom font size using input field', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph reset - custom size' );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			await page.keyboard.type( '23' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"style\\":{\\"typography\\":{\\"fontSize\\":\\"23px\\"}}} -->
-			<p style=\\"font-size:23px\\">Paragraph reset - custom size</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			await pressKeyTimes( 'Backspace', 2 );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph reset - custom size</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-	} );
-
-	// A different control is rendered based on the available font sizes number.
-	describe( 'More font sizes', () => {
-		beforeEach( async () => {
-			await page.evaluate( () => {
-				// set a deep `path[]` property in object `obj` to `value`, immutably
-				function setDeep( obj, path, value ) {
-					function doSet( o, i ) {
-						if ( i < path.length ) {
-							const key = path[ i ];
-							return { ...o, [ key ]: doSet( o[ key ], i + 1 ) };
-						}
-						return value;
-					}
-					return doSet( obj, 0 );
-				}
-
-				wp.data.dispatch( 'core/block-editor' ).updateSettings(
-					setDeep(
-						wp.data.select( 'core/block-editor' ).getSettings(),
-						[
-							'__experimentalFeatures',
-							'typography',
-							'fontSizes',
-							'default',
-						],
-						[
-							{
-								name: 'Tiny',
-								slug: 'tiny',
-								size: '11px',
-							},
-							{
-								name: 'Small',
-								slug: 'small',
-								size: '13px',
-							},
-							{
-								name: 'Medium',
-								slug: 'medium',
-								size: '20px',
-							},
-							{
-								name: 'Large',
-								slug: 'large',
-								size: '36px',
-							},
-							{
-								name: 'Extra Large',
-								slug: 'x-large',
-								size: '42px',
-							},
-							{
-								name: 'Huge',
-								slug: 'huge',
-								size: '48px',
-							},
-						]
-					)
-				);
-			} );
-		} );
-
-		it( 'should apply a named font size using the font size buttons', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph to be made "large"' );
-
-			await openFontSizeSelectControl();
-			await pressKeyTimes( 'ArrowDown', 4 );
-			await page.keyboard.press( 'Enter' );
-
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"large\\"} -->
-			<p class=\\"has-large-font-size\\">Paragraph to be made \\"large\\"</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-		it( 'should reset a named font size using the tools panel menu', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type(
-				'Paragraph with font size reset using tools panel menu'
-			);
-
-			await openFontSizeSelectControl();
-			await pressKeyTimes( 'ArrowDown', 3 );
-			await page.keyboard.press( 'Enter' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"medium\\"} -->
-			<p class=\\"has-medium-font-size\\">Paragraph with font size reset using tools panel menu</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			// Open Typography ToolsPanel, font size will be first in menu and gain focus.
-			await openTypographyToolsPanelMenu();
-
-			await page.keyboard.press( 'Enter' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph with font size reset using tools panel menu</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-
-		it( 'should reset a named font size using input field', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type(
-				'Paragraph with font size reset using input field'
-			);
-
-			await openFontSizeSelectControl();
-			await pressKeyTimes( 'ArrowDown', 2 );
-			await page.keyboard.press( 'Enter' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
-			<p class=\\"has-small-font-size\\">Paragraph with font size reset using input field</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			await pressKeyWithModifier( 'primary', 'A' );
-			await page.keyboard.press( 'Backspace' );
-
-			// Disable reason: Wait for changes to apply.
-			// eslint-disable-next-line no-restricted-syntax
-			await page.waitForTimeout( 1000 );
-
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph with font size reset using input field</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-	} );
-	describe( 'Few font sizes', () => {
-		it( 'should apply a named font size using the font size buttons', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph to be made "large"' );
-
-			await clickFontSizeButtonByLabel( 'Large' );
-			const buttonSelector = `${ FONT_SIZE_TOGGLE_GROUP_SELECTOR }//button[@aria-checked='true']`;
-			const [ activeButton ] = await page.$x( buttonSelector );
-			const activeLabel = await page.evaluate(
-				( element ) => element?.getAttribute( 'aria-label' ),
-				activeButton
-			);
-			expect( activeLabel ).toEqual( 'Large' );
-
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"large\\"} -->
-			<p class=\\"has-large-font-size\\">Paragraph to be made \\"large\\"</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-
-		it( 'should reset a named font size using the tools panel menu', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type(
-				'Paragraph with font size reset using tools panel menu'
-			);
-
-			await clickFontSizeButtonByLabel( 'Small' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
-			<p class=\\"has-small-font-size\\">Paragraph with font size reset using tools panel menu</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			// Open Typography ToolsPanel, font size will be first in menu and gain focus.
-			await openTypographyToolsPanelMenu();
-
-			await page.keyboard.press( 'Enter' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph with font size reset using tools panel menu</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-
-		it( 'should reset a named font size using input field', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type(
-				'Paragraph with font size reset using input field'
-			);
-
-			await clickFontSizeButtonByLabel( 'Small' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
-			<p class=\\"has-small-font-size\\">Paragraph with font size reset using input field</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			await pressKeyWithModifier( 'primary', 'A' );
-			await page.keyboard.press( 'Backspace' );
-
-			// Disable reason: Wait for changes to apply.
-			// eslint-disable-next-line no-restricted-syntax
-			await page.waitForTimeout( 1000 );
-
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph with font size reset using input field</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-	} );
-} );

package/specs/editor/various/manage-reusable-blocks.test.js

@@ -1,74 +0,0 @@
-/**
- * External dependencies
- */
-import path from 'path';
-
-/**
- * WordPress dependencies
- */
-import { visitAdminPage } from '@wordpress/e2e-test-utils';
-
-describe( 'Managing reusable blocks', () => {
-	/**
-	 * Returns a Promise which resolves to the number of post list entries on
-	 * the current page.
-	 *
-	 * @return {Promise} Promise resolving to number of post list entries.
-	 */
-	async function getNumberOfEntries() {
-		return page.evaluate(
-			() => document.querySelectorAll( '.hentry' ).length
-		);
-	}
-
-	beforeAll( async () => {
-		await visitAdminPage( 'edit.php', 'post_type=wp_block' );
-	} );
-
-	it( 'Should import reusable blocks', async () => {
-		const originalEntries = await getNumberOfEntries();
-
-		// Import Reusable block.
-		await page.waitForSelector( '.list-reusable-blocks__container' );
-		const importButton = await page.$(
-			'.list-reusable-blocks__container button'
-		);
-		await importButton.click();
-
-		// Select the file to upload.
-		const testReusableBlockFile = path.join(
-			__dirname,
-			'..',
-			'..',
-			'..',
-			'assets',
-			'greeting-reusable-block.json'
-		);
-		const input = await page.$( '.list-reusable-blocks-import-form input' );
-		await input.uploadFile( testReusableBlockFile );
-
-		// Submit the form.
-		const button = await page.$(
-			'.list-reusable-blocks-import-form__button'
-		);
-		await button.click();
-
-		// Wait for the success notice.
-		await page.waitForSelector( '.notice-success' );
-		const noticeContent = await page.$eval(
-			'.notice-success',
-			( element ) => element.textContent
-		);
-		expect( noticeContent ).toEqual(
-			'Reusable block imported successfully!'
-		);
-
-		// Refresh the page.
-		await visitAdminPage( 'edit.php', 'post_type=wp_block' );
-
-		const expectedEntries = originalEntries + 1;
-		const actualEntries = await getNumberOfEntries();
-
-		expect( actualEntries ).toBe( expectedEntries );
-	} );
-} );

package/specs/editor/various/post-visibility.test.js

@@ -1,133 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	setBrowserViewport,
-	createNewPost,
-	openDocumentSettingsSidebar,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Post visibility', () => {
-	afterEach( async () => {
-		await setBrowserViewport( 'large' );
-	} );
-	[ 'large', 'small' ].forEach( ( viewport ) => {
-		it( `can be changed when the viewport is ${ viewport }`, async () => {
-			await setBrowserViewport( viewport );
-
-			await createNewPost();
-
-			await openDocumentSettingsSidebar();
-
-			await page.click( '*[aria-label^="Select visibility"]' );
-
-			const [ privateLabel ] = await page.$x(
-				'//label[text()="Private"]'
-			);
-			await privateLabel.click();
-
-			await page.waitForXPath(
-				'//*[text()="Would you like to privately publish this post now?"]'
-			);
-
-			const [ confirmButton ] = await page.$x(
-				'//*[@role="dialog"]//button[text()="OK"]'
-			);
-			await confirmButton.click();
-
-			const currentStatus = await page.evaluate( () => {
-				return wp.data
-					.select( 'core/editor' )
-					.getEditedPostAttribute( 'status' );
-			} );
-
-			expect( currentStatus ).toBe( 'private' );
-		} );
-
-		it( `can be canceled when the viewport is ${ viewport }`, async () => {
-			await setBrowserViewport( viewport );
-
-			await createNewPost();
-
-			await openDocumentSettingsSidebar();
-
-			const initialStatus = await page.evaluate( () => {
-				return wp.data
-					.select( 'core/editor' )
-					.getEditedPostAttribute( 'status' );
-			} );
-
-			await page.click( '*[aria-label^="Select visibility"]' );
-
-			const [ privateLabel ] = await page.$x(
-				'//label[text()="Private"]'
-			);
-			await privateLabel.click();
-			await page.waitForXPath(
-				'//*[text()="Would you like to privately publish this post now?"]'
-			);
-			const cancelButton = await page.waitForXPath(
-				'//*[@role="dialog"][not(@id="wp-link-wrap")]//button[text()="Cancel"]'
-			);
-			await cancelButton.click();
-
-			const currentStatus = await page.evaluate( () => {
-				return wp.data
-					.select( 'core/editor' )
-					.getEditedPostAttribute( 'status' );
-			} );
-
-			expect( currentStatus ).toBe( initialStatus );
-		} );
-	} );
-
-	it( 'visibility remains private even if the publish date is in the future', async () => {
-		await createNewPost();
-
-		// Enter a title for this post.
-		await page.type( '.editor-post-title__input', 'Title' );
-
-		await openDocumentSettingsSidebar();
-
-		// Set a publish date for the next month.
-		await page.click( '*[aria-label^="Change date"]' );
-		await page.click( '*[aria-label="View next month"]' );
-		await (
-			await page.$x(
-				'//*[@role="application"][@aria-label="Calendar"]//button[text()="15"]'
-			)
-		 )[ 0 ].click();
-
-		await page.click( '*[aria-label^="Select visibility"]' );
-
-		const [ privateLabel ] = await page.$x( '//label[text()="Private"]' );
-		await privateLabel.click();
-
-		await page.waitForXPath(
-			'//*[text()="Would you like to privately publish this post now?"]'
-		);
-
-		const [ confirmButton ] = await page.$x(
-			'//*[@role="dialog"]//button[text()="OK"]'
-		);
-		await confirmButton.click();
-
-		// Enter a title for this post.
-		await page.type( '.editor-post-title__input', ' Changed' );
-
-		// Wait for the button to be clickable before attempting to click.
-		// This could cause errors when we try to click before changes are registered.
-		await page.waitForSelector(
-			'.editor-post-publish-button[aria-disabled="false"]'
-		);
-		await page.click( '.editor-post-publish-button' );
-
-		const currentStatus = await page.evaluate( () => {
-			return wp.data
-				.select( 'core/editor' )
-				.getEditedPostAttribute( 'status' );
-		} );
-
-		expect( currentStatus ).toBe( 'private' );
-	} );
-} );

package/specs/editor/various/toolbar-roving-tabindex.test.js

@@ -1,142 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	pressKeyWithModifier,
-	insertBlock,
-} from '@wordpress/e2e-test-utils';
-
-async function focusBlockToolbar() {
-	await pressKeyWithModifier( 'alt', 'F10' );
-}
-
-async function expectLabelToHaveFocus( label ) {
-	let ariaLabel = await page.evaluate( () =>
-		document.activeElement.getAttribute( 'aria-label' )
-	);
-	// If the labels don't match, try pressing Up Arrow to focus the block wrapper in non-content editable block.
-	if ( ariaLabel !== label ) {
-		await page.keyboard.press( 'ArrowUp' );
-		ariaLabel = await page.evaluate( () =>
-			document.activeElement.getAttribute( 'aria-label' )
-		);
-	}
-	await expect( ariaLabel ).toBe( label );
-}
-
-async function testBlockToolbarKeyboardNavigation(
-	currentBlockLabel,
-	currentBlockTitle
-) {
-	await focusBlockToolbar();
-	await expectLabelToHaveFocus( currentBlockTitle );
-	await page.keyboard.press( 'ArrowRight' );
-	await expectLabelToHaveFocus( 'Move up' );
-	await page.keyboard.press( 'Tab' );
-	await expectLabelToHaveFocus( currentBlockLabel );
-	await pressKeyWithModifier( 'shift', 'Tab' );
-	await expectLabelToHaveFocus( 'Move up' );
-}
-
-async function wrapCurrentBlockWithGroup( currentBlockTitle ) {
-	await page.click( `[aria-label="${ currentBlockTitle }"]` );
-	await page.click( '.editor-block-list-item-group' );
-}
-
-async function testGroupKeyboardNavigation(
-	currentBlockLabel,
-	currentBlockTitle
-) {
-	await expectLabelToHaveFocus( 'Block: Group' );
-	await page.keyboard.press( 'ArrowRight' );
-	await expectLabelToHaveFocus( currentBlockLabel );
-	await pressKeyWithModifier( 'shift', 'Tab' );
-	await expectLabelToHaveFocus( 'Select Group' );
-	await page.keyboard.press( 'ArrowRight' );
-	await expectLabelToHaveFocus( currentBlockTitle );
-}
-
-describe( 'Toolbar roving tabindex', () => {
-	beforeEach( async () => {
-		await createNewPost();
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'First block' );
-	} );
-
-	it( 'ensures paragraph block toolbar uses roving tabindex', async () => {
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Paragraph' );
-		await testBlockToolbarKeyboardNavigation(
-			'Paragraph block',
-			'Paragraph'
-		);
-		await wrapCurrentBlockWithGroup( 'Paragraph' );
-		await testGroupKeyboardNavigation( 'Paragraph block', 'Paragraph' );
-	} );
-
-	it( 'ensures heading block toolbar uses roving tabindex', async () => {
-		await insertBlock( 'Heading' );
-		await page.keyboard.type( 'Heading' );
-		await testBlockToolbarKeyboardNavigation( 'Block: Heading', 'Heading' );
-		await wrapCurrentBlockWithGroup( 'Heading' );
-		await testGroupKeyboardNavigation( 'Block: Heading', 'Heading' );
-	} );
-
-	it( 'ensures list block toolbar uses roving tabindex', async () => {
-		await insertBlock( 'List' );
-		await page.keyboard.type( 'List' );
-		await testBlockToolbarKeyboardNavigation( 'List text', 'Select List' );
-		await page.click( `[aria-label="Select List"]` );
-		await wrapCurrentBlockWithGroup( 'List' );
-		await testGroupKeyboardNavigation( 'Block: List', 'List' );
-	} );
-
-	it( 'ensures image block toolbar uses roving tabindex', async () => {
-		await insertBlock( 'Image' );
-		await testBlockToolbarKeyboardNavigation( 'Block: Image', 'Image' );
-		await wrapCurrentBlockWithGroup( 'Image' );
-		await testGroupKeyboardNavigation( 'Block: Image', 'Image' );
-	} );
-
-	it( 'ensures table block toolbar uses roving tabindex', async () => {
-		await insertBlock( 'Table' );
-		await testBlockToolbarKeyboardNavigation( 'Block: Table', 'Table' );
-		// Move focus to the first toolbar item.
-		await page.keyboard.press( 'Home' );
-		await expectLabelToHaveFocus( 'Table' );
-		await page.click( '.blocks-table__placeholder-button' );
-		await page.keyboard.press( 'Tab' );
-		await testBlockToolbarKeyboardNavigation( 'Body cell text', 'Table' );
-		await wrapCurrentBlockWithGroup( 'Table' );
-		await testGroupKeyboardNavigation( 'Block: Table', 'Table' );
-	} );
-
-	it( 'ensures custom html block toolbar uses roving tabindex', async () => {
-		await insertBlock( 'Custom HTML' );
-		await testBlockToolbarKeyboardNavigation( 'HTML', 'Custom HTML' );
-		await wrapCurrentBlockWithGroup( 'Custom HTML' );
-		await testGroupKeyboardNavigation(
-			'Block: Custom HTML',
-			'Custom HTML'
-		);
-	} );
-
-	it( 'ensures block toolbar remembers the last focused item', async () => {
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Paragraph' );
-		await focusBlockToolbar();
-		await page.keyboard.press( 'ArrowRight' );
-		await expectLabelToHaveFocus( 'Move up' );
-		await page.keyboard.press( 'Tab' );
-		await pressKeyWithModifier( 'shift', 'Tab' );
-		await expectLabelToHaveFocus( 'Move up' );
-	} );
-
-	it( 'can reach toolbar items with arrow keys after pressing alt+F10', async () => {
-		await pressKeyWithModifier( 'alt', 'F10' );
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.press( 'ArrowRight' );
-		await expectLabelToHaveFocus( 'Bold' );
-	} );
-} );