@wordpress/e2e-tests 7.19.0 → 7.20.0

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

package/specs/editor/various/editor-modes.test.js

@@ -1,163 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	clickBlockToolbarButton,
-	clickMenuItem,
-	createNewPost,
-	getCurrentPostContent,
-	switchEditorModeTo,
-	pressKeyTimes,
-	pressKeyWithModifier,
-	openTypographyToolsPanelMenu,
-	canvas,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Editing modes (visual/HTML)', () => {
-	beforeEach( async () => {
-		await createNewPost();
-		await clickBlockAppender();
-		await page.keyboard.type( 'Hello world!' );
-	} );
-
-	it( 'should switch between visual and HTML modes', async () => {
-		// This block should be in "visual" mode by default.
-		let visualBlock = await canvas().$$( '[data-block].rich-text' );
-		expect( visualBlock ).toHaveLength( 1 );
-
-		// Change editing mode from "Visual" to "HTML".
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Edit as HTML' );
-
-		// Wait for the block to be converted to HTML editing mode.
-		const htmlBlock = await canvas().$$(
-			'[data-block] .block-editor-block-list__block-html-textarea'
-		);
-		expect( htmlBlock ).toHaveLength( 1 );
-
-		// Change editing mode from "HTML" back to "Visual".
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Edit visually' );
-
-		// This block should be in "visual" mode by default.
-		visualBlock = await canvas().$$( '[data-block].rich-text' );
-		expect( visualBlock ).toHaveLength( 1 );
-	} );
-
-	it( 'should display sidebar in HTML mode', async () => {
-		// Change editing mode from "Visual" to "HTML".
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Edit as HTML' );
-
-		// The `drop cap` toggle for the paragraph block should appear, even in
-		// HTML editing mode.
-		await openTypographyToolsPanelMenu();
-		await page.click( 'button[aria-label="Show Drop cap"]' );
-
-		const dropCapToggle = await page.$x(
-			"//label[contains(text(), 'Drop cap')]"
-		);
-
-		expect( dropCapToggle ).toHaveLength( 1 );
-	} );
-
-	it( 'should update HTML in HTML mode when sidebar is used', async () => {
-		// Change editing mode from "Visual" to "HTML".
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Edit as HTML' );
-
-		// Make sure the paragraph content is rendered as expected.
-		let htmlBlockContent = await canvas().$eval(
-			'.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea',
-			( node ) => node.textContent
-		);
-		expect( htmlBlockContent ).toEqual( '<p>Hello world!</p>' );
-
-		// Change the `drop cap` using the sidebar.
-		await openTypographyToolsPanelMenu();
-		await page.click( 'button[aria-label="Show Drop cap"]' );
-
-		const [ dropCapToggle ] = await page.$x(
-			"//label[contains(text(), 'Drop cap')]"
-		);
-		await dropCapToggle.click();
-
-		// Make sure the HTML content updated.
-		htmlBlockContent = await canvas().$eval(
-			'.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea',
-			( node ) => node.textContent
-		);
-		expect( htmlBlockContent ).toEqual(
-			'<p class="has-drop-cap">Hello world!</p>'
-		);
-	} );
-
-	it( 'the code editor should unselect blocks and disable the inserter', async () => {
-		// The paragraph block should be selected.
-		const title = await page.$eval(
-			'.block-editor-block-card__title',
-			( element ) => element.innerText
-		);
-		expect( title ).toBe( 'Paragraph' );
-
-		// The Block inspector should be active.
-		let [ blockInspectorTab ] = await page.$x(
-			'//button[@role="tab"][@aria-selected="true"][contains(text(), "Block")]'
-		);
-		expect( blockInspectorTab ).not.toBeNull();
-
-		await switchEditorModeTo( 'Code' );
-
-		// The Block inspector should not be active anymore.
-		[ blockInspectorTab ] = await page.$x(
-			'//button[@role="tab"][@aria-selected="true"][contains(text(), "Block")]'
-		);
-		expect( blockInspectorTab ).toBeUndefined();
-
-		// No block is selected.
-		const inactiveBlockInspectorTab = await page.waitForXPath(
-			'//button[@role="tab"][contains(text(), "Block")]'
-		);
-		inactiveBlockInspectorTab.click();
-		const noBlocksElement = await page.$(
-			'.block-editor-block-inspector__no-blocks'
-		);
-		expect( noBlocksElement ).not.toBeNull();
-
-		// The inserter is disabled.
-		const disabledInserter = await page.$(
-			'.edit-post-header-toolbar__inserter-toggle:disabled, .edit-post-header-toolbar__inserter-toggle[aria-disabled="true"]'
-		);
-		expect( disabledInserter ).not.toBeNull();
-	} );
-
-	// Test for regressions of https://github.com/WordPress/gutenberg/issues/24054.
-	it( 'saves content when using the shortcut in the Code Editor', async () => {
-		await switchEditorModeTo( 'Code' );
-
-		const textContent = await page.evaluate(
-			() => document.querySelector( '.editor-post-text-editor' ).value
-		);
-		const editPosition = textContent.indexOf( 'Hello' );
-
-		// Replace the word 'Hello' with 'Hi'.
-		await canvas().click( '.editor-post-title__input' );
-		await page.keyboard.press( 'Tab' );
-		await pressKeyTimes( 'ArrowRight', editPosition );
-		await pressKeyTimes( 'Delete', 5 );
-		await page.keyboard.type( 'Hi' );
-
-		// Save the post using the shortcut.
-		await pressKeyWithModifier( 'primary', 's' );
-		await page.waitForSelector( '.editor-post-saved-state.is-saved' );
-
-		await switchEditorModeTo( 'Visual' );
-
-		expect( await getCurrentPostContent() ).toMatchInlineSnapshot( `
-		"<!-- wp:paragraph -->
-		<p>Hi world!</p>
-		<!-- /wp:paragraph -->"
-	` );
-	} );
-} );