@wordpress/e2e-tests 7.18.1 → 7.19.1-next.79a6196f.0

package/specs/editor/various/block-editor-keyboard-shortcuts.test.js

@@ -1,110 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	clickBlockAppender,
-	getEditedPostContent,
-	pressKeyWithModifier,
-	clickBlockToolbarButton,
-	clickMenuItem,
-	clickOnCloseModalButton,
-	canvas,
-} from '@wordpress/e2e-test-utils';
-
-const createTestParagraphBlocks = async () => {
-	await clickBlockAppender();
-	await page.keyboard.type( '1st' );
-	await page.keyboard.press( 'Enter' );
-	await page.keyboard.type( '2nd' );
-	await page.keyboard.press( 'Enter' );
-	await page.keyboard.type( '3rd' );
-};
-
-describe( 'block editor keyboard shortcuts', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	describe( 'move blocks', () => {
-		const moveUp = async () => pressKeyWithModifier( 'secondary', 't' );
-		const moveDown = async () => pressKeyWithModifier( 'secondary', 'y' );
-		describe( 'single block selected', () => {
-			it( 'should move the block up', async () => {
-				await createTestParagraphBlocks();
-				expect( await getEditedPostContent() ).toMatchSnapshot();
-				await moveUp();
-				await moveUp();
-				expect( await getEditedPostContent() ).toMatchSnapshot();
-			} );
-
-			it( 'should move the block down', async () => {
-				await createTestParagraphBlocks();
-				expect( await getEditedPostContent() ).toMatchSnapshot();
-				await page.keyboard.press( 'ArrowUp' );
-				await moveDown();
-				expect( await getEditedPostContent() ).toMatchSnapshot();
-			} );
-		} );
-
-		describe( 'multiple blocks selected', () => {
-			it( 'should move the blocks up', async () => {
-				await createTestParagraphBlocks();
-				expect( await getEditedPostContent() ).toMatchSnapshot();
-				await pressKeyWithModifier( 'shift', 'ArrowUp' );
-				await canvas().waitForSelector(
-					'[aria-label="Multiple selected blocks"]'
-				);
-				await moveUp();
-				expect( await getEditedPostContent() ).toMatchSnapshot();
-			} );
-
-			it( 'should move the blocks down', async () => {
-				await createTestParagraphBlocks();
-				expect( await getEditedPostContent() ).toMatchSnapshot();
-				await page.keyboard.press( 'ArrowUp' );
-				await pressKeyWithModifier( 'shift', 'ArrowUp' );
-				await canvas().waitForSelector(
-					'[aria-label="Multiple selected blocks"]'
-				);
-				await moveDown();
-				expect( await getEditedPostContent() ).toMatchSnapshot();
-			} );
-		} );
-	} );
-	describe( 'test shortcuts handling through portals in the same tree', () => {
-		beforeEach( async () => {
-			await createTestParagraphBlocks();
-			// Multiselect via keyboard.
-			await pressKeyWithModifier( 'primary', 'a' );
-			await pressKeyWithModifier( 'primary', 'a' );
-		} );
-		it( 'should propagate properly and duplicate selected blocks', async () => {
-			await clickBlockToolbarButton( 'Options' );
-			const label = 'Duplicate';
-			await page.$x(
-				`//div[@role="menu"]//span[contains(concat(" ", @class, " "), " components-menu-item__item ")][contains(text(), "${ label }")]`
-			);
-			await pressKeyWithModifier( 'primaryShift', 'd' );
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-		it( 'should prevent deleting multiple selected blocks from inputs', async () => {
-			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Create pattern' );
-			const reusableBlockNameInputSelector =
-				'.patterns-menu-items__convert-modal .components-text-control__input';
-			const nameInput = await page.waitForSelector(
-				reusableBlockNameInputSelector
-			);
-			await nameInput.click();
-			await page.keyboard.type( 'hi' );
-			await page.keyboard.press( 'Backspace' );
-			await page.keyboard.press( 'ArrowLeft' );
-			await page.keyboard.press( 'Delete' );
-			await clickOnCloseModalButton(
-				'.patterns-menu-items__convert-modal'
-			);
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-	} );
-} );

package/specs/editor/various/block-switcher.test.js

@@ -1,130 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	hasBlockSwitcher,
-	getAvailableBlockTransforms,
-	createNewPost,
-	insertBlock,
-	pressKeyWithModifier,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Block Switcher', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'Should show the expected block transforms on the list block when the blocks are removed', async () => {
-		// Insert a list block.
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '- List content' );
-		await page.keyboard.press( 'ArrowUp' );
-		await pressKeyWithModifier( 'alt', 'F10' );
-
-		// Verify the block switcher exists.
-		expect( await hasBlockSwitcher() ).toBeTruthy();
-
-		// Verify the correct block transforms appear.
-		expect( await getAvailableBlockTransforms() ).toEqual(
-			expect.arrayContaining( [
-				'Group',
-				'Paragraph',
-				'Heading',
-				'Quote',
-				'Columns',
-			] )
-		);
-	} );
-
-	it( 'Should show the expected block transforms on the list block when the quote block is removed', async () => {
-		// Remove the quote block from the list of registered blocks.
-		await page.evaluate( () => {
-			wp.blocks.unregisterBlockType( 'core/quote' );
-		} );
-
-		// Insert a list block.
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '- List content' );
-		await page.keyboard.press( 'ArrowUp' );
-		await pressKeyWithModifier( 'alt', 'F10' );
-
-		// Verify the block switcher exists.
-		expect( await hasBlockSwitcher() ).toBeTruthy();
-
-		// Verify the correct block transforms appear.
-		expect( await getAvailableBlockTransforms() ).toEqual(
-			expect.arrayContaining( [
-				'Group',
-				'Paragraph',
-				'Heading',
-				'Columns',
-			] )
-		);
-	} );
-
-	it( 'Should not show the block switcher if all the blocks the list block transforms into are removed', async () => {
-		// Insert a list block.
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '- List content' );
-
-		// Remove the paragraph and quote block from the list of registered blocks.
-		await page.evaluate( () => {
-			[
-				'core/quote',
-				'core/pullquote',
-				'core/paragraph',
-				'core/group',
-				'core/heading',
-				'core/columns',
-			].forEach( ( block ) => wp.blocks.unregisterBlockType( block ) );
-		} );
-
-		await page.keyboard.press( 'ArrowUp' );
-		await pressKeyWithModifier( 'alt', 'F10' );
-
-		// Verify the block switcher exists.
-		expect( await hasBlockSwitcher() ).toBeFalsy();
-		// Verify the correct block transforms appear.
-		expect( await getAvailableBlockTransforms() ).toHaveLength( 0 );
-	} );
-
-	describe( 'Conditional tranformation options', () => {
-		describe( 'Columns tranforms', () => {
-			it( 'Should show Columns block only if selected blocks are between limits (1-6)', async () => {
-				await page.keyboard.press( 'Enter' );
-				await page.keyboard.type( '- List content' );
-				await page.keyboard.press( 'ArrowUp' );
-				await insertBlock( 'Heading' );
-				await page.keyboard.type( 'I am a header' );
-				await page.keyboard.down( 'Shift' );
-				await page.keyboard.press( 'ArrowUp' );
-				await page.keyboard.up( 'Shift' );
-				expect( await getAvailableBlockTransforms() ).toEqual(
-					expect.arrayContaining( [ 'Columns' ] )
-				);
-			} );
-			it( 'Should NOT show Columns transform only if selected blocks are more than max limit(6)', async () => {
-				await page.keyboard.press( 'Enter' );
-				await page.keyboard.type( '- List content' );
-				await page.keyboard.press( 'ArrowUp' );
-				await insertBlock( 'Heading' );
-				await page.keyboard.type( 'I am a header' );
-				await page.keyboard.press( 'Enter' );
-				await page.keyboard.type( 'First paragraph' );
-				await page.keyboard.press( 'Enter' );
-				await page.keyboard.type( 'Second paragraph' );
-				await page.keyboard.press( 'Enter' );
-				await page.keyboard.type( 'Third paragraph' );
-				await page.keyboard.press( 'Enter' );
-				await page.keyboard.type( 'Fourth paragraph' );
-				await page.keyboard.press( 'Enter' );
-				await page.keyboard.type( 'Fifth paragraph' );
-				await pressKeyWithModifier( 'primary', 'a' );
-				await pressKeyWithModifier( 'primary', 'a' );
-				expect( await getAvailableBlockTransforms() ).not.toEqual(
-					expect.arrayContaining( [ 'Columns' ] )
-				);
-			} );
-		} );
-	} );
-} );

package/specs/editor/various/core-settings.test.js

@@ -1,42 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { visitAdminPage } from '@wordpress/e2e-test-utils';
-
-async function getOptionsValues( selector ) {
-	await visitAdminPage( 'options.php' );
-	return page.evaluate( ( theSelector ) => {
-		const inputs = Array.from( document.querySelectorAll( theSelector ) );
-		return inputs.reduce( ( memo, input ) => {
-			memo[ input.id ] = input.value;
-			return memo;
-		}, {} );
-	}, selector );
-}
-
-// It might make sense to include a similar test in WP core (or move this one over).
-// See discussion here: https://github.com/WordPress/gutenberg/pull/32797#issuecomment-864192088.
-describe( 'Settings', () => {
-	test( 'Regression: updating a specific option will only change its value and will not corrupt others', async () => {
-		// We won't select the option that we updated and will also remove some
-		// _transient options that seem to change at every update.
-		const optionsInputsSelector =
-			'form#all-options table.form-table input:not([id*="_transient"]):not([id="blogdescription"])';
-		const optionsBefore = await getOptionsValues( optionsInputsSelector );
-
-		await visitAdminPage( 'options-general.php' );
-		await page.type(
-			'input#blogdescription',
-			'Just another Gutenberg site'
-		);
-		await page.click( 'input#submit' );
-
-		const optionsAfter = await getOptionsValues( optionsInputsSelector );
-
-		Object.entries( optionsBefore ).forEach( ( optionBefore ) => {
-			const [ id ] = optionBefore;
-			const optionAfter = [ id, optionsAfter[ id ] ];
-			expect( optionAfter ).toStrictEqual( optionBefore );
-		} );
-	} );
-} );

package/specs/editor/various/datepicker.test.js

@@ -1,148 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createNewPost, changeSiteTimezone } from '@wordpress/e2e-test-utils';
-
-async function getInputValue( selector ) {
-	return page.$eval( selector, ( element ) => element.value );
-}
-
-async function getSelectedOptionLabel( selector ) {
-	return page.$eval(
-		selector,
-		( element ) => element.options[ element.selectedIndex ].text
-	);
-}
-
-async function getDatePickerValues() {
-	const year = await getInputValue(
-		'.components-datetime__time-field-year input'
-	);
-	const month = await getInputValue(
-		'.components-datetime__time-field-month select'
-	);
-	const monthLabel = await getSelectedOptionLabel(
-		'.components-datetime__time-field-month select'
-	);
-	const day = await getInputValue(
-		'.components-datetime__time-field-day input'
-	);
-	const hours = await getInputValue(
-		'.components-datetime__time-field-hours-input input'
-	);
-	const minutes = await getInputValue(
-		'.components-datetime__time-field-minutes-input input'
-	);
-	const amOrPm = await page.$eval(
-		'.components-datetime__time-field-am-pm .is-primary',
-		( element ) => element.innerText.toLowerCase()
-	);
-
-	return { year, month, monthLabel, day, hours, minutes, amOrPm };
-}
-
-function trimLeadingZero( str ) {
-	return str[ 0 ] === '0' ? str.slice( 1 ) : str;
-}
-
-function formatDatePickerValues(
-	{ year, monthLabel, day, hours, minutes, amOrPm },
-	timezone
-) {
-	const dayTrimmed = trimLeadingZero( day );
-	const hoursTrimmed = trimLeadingZero( hours );
-	return `${ monthLabel } ${ dayTrimmed }, ${ year } ${ hoursTrimmed }:${ minutes }\xa0${ amOrPm } ${ timezone }`;
-}
-
-async function getPublishingDate() {
-	return page.$eval(
-		'.editor-post-schedule__dialog-toggle',
-		( dateLabel ) => dateLabel.textContent
-	);
-}
-
-describe.each( [ [ 'UTC-10' ], [ 'UTC' ], [ 'UTC+10' ] ] )(
-	`Datepicker %s`,
-	( timezone ) => {
-		let oldTimezone;
-		beforeEach( async () => {
-			await page.emulateTimezone( 'America/New_York' ); // Set browser to a timezone that's different to `timezone`.
-			oldTimezone = await changeSiteTimezone( timezone );
-			await createNewPost();
-		} );
-		afterEach( async () => {
-			await changeSiteTimezone( oldTimezone );
-			await page.emulateTimezone( null );
-		} );
-
-		it( 'should show the publishing date as "Immediately" if the date is not altered', async () => {
-			const publishingDate = await getPublishingDate();
-
-			expect( publishingDate ).toEqual( 'Immediately' );
-		} );
-
-		it( 'should show the publishing date if the date is in the past', async () => {
-			// Open the datepicker.
-			await page.click( '.editor-post-schedule__dialog-toggle' );
-
-			// Change the publishing date to a year in the past.
-			await page.click( '.components-datetime__time-field-year' );
-			await page.keyboard.press( 'ArrowDown' );
-			const datePickerValues = await getDatePickerValues();
-
-			// Close the datepicker.
-			await page.click( '.editor-post-schedule__dialog-toggle' );
-
-			const publishingDate = await getPublishingDate();
-
-			expect( publishingDate ).toBe(
-				formatDatePickerValues( datePickerValues, timezone )
-			);
-		} );
-
-		it( 'should show the publishing date if the date is in the future', async () => {
-			// Open the datepicker.
-			await page.click( '.editor-post-schedule__dialog-toggle' );
-
-			// Change the publishing date to a year in the future.
-			await page.click( '.components-datetime__time-field-year' );
-			await page.keyboard.press( 'ArrowUp' );
-			const datePickerValues = await getDatePickerValues();
-
-			// Close the datepicker.
-			await page.click( '.editor-post-schedule__dialog-toggle' );
-
-			const publishingDate = await getPublishingDate();
-
-			expect( publishingDate ).not.toEqual( 'Immediately' );
-			// The expected date format will be "Sep 26, 2018 11:52 pm".
-			expect( publishingDate ).toBe(
-				formatDatePickerValues( datePickerValues, timezone )
-			);
-		} );
-
-		it( `should show the publishing date as "Immediately" if the date is cleared`, async () => {
-			// Open the datepicker.
-			await page.click( '.editor-post-schedule__dialog-toggle' );
-
-			// Change the publishing date to a year in the future.
-			await page.click( '.components-datetime__time-field-year' );
-			await page.keyboard.press( 'ArrowUp' );
-
-			// Close the datepicker.
-			await page.click( '.editor-post-schedule__dialog-toggle' );
-
-			// Open the datepicker.
-			await page.click( '.editor-post-schedule__dialog-toggle' );
-
-			// Clear the date.
-			await page.click(
-				'.block-editor-publish-date-time-picker button[aria-label="Now"]'
-			);
-
-			const publishingDate = await getPublishingDate();
-
-			expect( publishingDate ).toEqual( 'Immediately' );
-		} );
-	}
-);

package/specs/editor/various/dropdown-menu.test.js

@@ -1,143 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createNewPost, pressKeyTimes } from '@wordpress/e2e-test-utils';
-
-const moreMenuButtonSelector = '.components-button[aria-label="Options"]';
-const moreMenuDropdownSelector =
-	'.components-dropdown-menu__menu[aria-label="Options"]';
-const menuItemsSelector = [ 'menuitem', 'menuitemcheckbox', 'menuitemradio' ]
-	.map( ( role ) => `${ moreMenuDropdownSelector } [role="${ role }"]` )
-	.join( ',' );
-
-describe( 'Dropdown Menu', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'allows navigation through each item using arrow keys', async () => {
-		await page.click( moreMenuButtonSelector );
-		const menuItems = await page.$$( menuItemsSelector );
-
-		// Catch any issues with the selector, which could cause a false positive test result.
-		expect( menuItems.length ).toBeGreaterThan( 0 );
-
-		let activeElementText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-		const [ firstMenuItem ] = menuItems;
-		const firstMenuItemText = await firstMenuItem.evaluate(
-			( element ) => element.textContent
-		);
-
-		// Expect the first menu item to be focused.
-		expect( activeElementText ).toBeDefined();
-		expect( activeElementText ).toBe( firstMenuItemText );
-
-		// Arrow down to the last item.
-		await pressKeyTimes( 'ArrowDown', menuItems.length - 1 );
-
-		activeElementText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-
-		const [ lastMenuItem ] = menuItems.slice( -1 );
-		const lastMenuItemText = await lastMenuItem.evaluate(
-			( element ) => element.textContent
-		);
-
-		// Expect the last menu item to be focused.
-		expect( activeElementText ).toBeDefined();
-		expect( activeElementText ).toBe( lastMenuItemText );
-
-		// Arrow back up to the first item.
-		await pressKeyTimes( 'ArrowUp', menuItems.length - 1 );
-
-		activeElementText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-
-		// Expect the first menu item to be focused again.
-		expect( activeElementText ).toBeDefined();
-		expect( activeElementText ).toBe( firstMenuItemText );
-	} );
-
-	it( 'loops to the beginning and end when navigating past the boundaries of the menu', async () => {
-		await page.click( moreMenuButtonSelector );
-		const menuItems = await page.$$( menuItemsSelector );
-
-		// Catch any issues with the selector, which could cause a false positive test result.
-		expect( menuItems.length ).toBeGreaterThan( 0 );
-
-		let activeElementText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-		const [ firstMenuItem ] = menuItems;
-		const firstMenuItemText = await firstMenuItem.evaluate(
-			( element ) => element.textContent
-		);
-
-		// Expect the first menu item to be focused.
-		expect( activeElementText ).toBeDefined();
-		expect( activeElementText ).toBe( firstMenuItemText );
-
-		// Arrow up to the last item.
-		await page.keyboard.press( 'ArrowUp' );
-
-		activeElementText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-
-		const [ lastMenuItem ] = menuItems.slice( -1 );
-		const lastMenuItemText = await lastMenuItem.evaluate(
-			( element ) => element.textContent
-		);
-
-		// Expect the last menu item to be focused.
-		expect( activeElementText ).toBeDefined();
-		expect( activeElementText ).toBe( lastMenuItemText );
-
-		// Arrow back down to the first item.
-		await page.keyboard.press( 'ArrowDown' );
-
-		activeElementText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-
-		// Expect the first menu item to be focused again.
-		expect( activeElementText ).toBeDefined();
-		expect( activeElementText ).toBe( firstMenuItemText );
-	} );
-
-	it( 'ignores arrow key navigation that is orthogonal to the orientation of the menu, but stays open', async () => {
-		await page.click( moreMenuButtonSelector );
-		const menuItems = await page.$$( menuItemsSelector );
-
-		// Catch any issues with the selector, which could cause a false positive test result.
-		expect( menuItems.length ).toBeGreaterThan( 0 );
-
-		let activeElementText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-		const [ firstMenuItem ] = menuItems;
-		const firstMenuItemText = await firstMenuItem.evaluate(
-			( element ) => element.textContent
-		);
-
-		// Expect the first menu item to be focused.
-		expect( activeElementText ).toBeDefined();
-		expect( activeElementText ).toBe( firstMenuItemText );
-
-		// Press left and right keys an arbitrary (but > 1) number of times.
-		await pressKeyTimes( 'ArrowLeft', 5 );
-		await pressKeyTimes( 'ArrowRight', 5 );
-
-		activeElementText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-
-		// Expect the first menu item to still be focused.
-		expect( activeElementText ).toBeDefined();
-		expect( activeElementText ).toBe( firstMenuItemText );
-	} );
-} );