@wordpress/e2e-tests 5.6.0 → 6.1.0

package/specs/site-editor/multi-entity-editing.test.js

@@ -1,309 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	insertBlock,
-	createNewPost,
-	publishPost,
-	deleteAllTemplates,
-	activateTheme,
-	canvas,
-	openDocumentSettingsSidebar,
-	pressKeyWithModifier,
-	selectBlockByClientId,
-	visitSiteEditor,
-	clickSiteEditorMenuItem,
-	navigateSiteEditorBackToRoot,
-	openSiteEditorNavigationPanel,
-	siteEditorNavigateSequence,
-} from '@wordpress/e2e-test-utils';
-
-const clickTemplateItem = async ( menus, itemName ) => {
-	await openSiteEditorNavigationPanel();
-	await navigateSiteEditorBackToRoot();
-	await siteEditorNavigateSequence( menus );
-	await clickSiteEditorMenuItem( itemName );
-};
-
-const createTemplatePart = async (
-	templatePartName = 'test-template-part',
-	isNested = false
-) => {
-	// Create new template part.
-	await insertBlock( 'Template Part' );
-	const [ createNewButton ] = await page.$x(
-		'//button[contains(text(), "New template part")]'
-	);
-	await createNewButton.click();
-	await page.waitForSelector(
-		isNested
-			? '.wp-block-template-part .wp-block-template-part.block-editor-block-list__layout'
-			: '.wp-block-template-part.block-editor-block-list__layout'
-	);
-	await openDocumentSettingsSidebar();
-
-	const advancedPanelXPath = `//div[contains(@class,"interface-interface-skeleton__sidebar")]//button[@class="components-button components-panel__body-toggle"][contains(text(),"Advanced")]`;
-	const advancedPanel = await page.waitForXPath( advancedPanelXPath );
-	await advancedPanel.click();
-
-	const nameInputXPath = `${ advancedPanelXPath }/ancestor::div[contains(@class, "components-panel__body")]//div[contains(@class,"components-base-control__field")]//label[contains(text(), "Title")]/following-sibling::input`;
-	const nameInput = await page.waitForXPath( nameInputXPath );
-	await nameInput.click();
-
-	// Select all of the text in the title field.
-	await pressKeyWithModifier( 'primary', 'a' );
-
-	// Give the reusable block a title.
-	await page.keyboard.type( templatePartName );
-};
-
-const editTemplatePart = async ( textToAdd, isNested = false ) => {
-	await page.click(
-		`${
-			isNested
-				? '.wp-block-template-part .wp-block-template-part'
-				: '.wp-block-template-part'
-		} .block-editor-button-block-appender`
-	);
-	await page.click( '.editor-block-list-item-paragraph' );
-	for ( const text of textToAdd ) {
-		await page.keyboard.type( text );
-		await page.keyboard.press( 'Enter' );
-	}
-};
-
-const saveAllEntities = async () => {
-	if ( await openEntitySavePanel() ) {
-		await page.click( 'button.editor-entities-saved-states__save-button' );
-	}
-};
-
-const openEntitySavePanel = async () => {
-	// Open the entity save panel if it is not already open.
-	try {
-		await page.waitForSelector( '.entities-saved-states__panel', {
-			timeout: 500,
-		} );
-	} catch {
-		try {
-			await page.click(
-				'.edit-site-save-button__button[aria-disabled=false]',
-				{ timeout: 500 }
-			);
-		} catch {
-			try {
-				await page.click(
-					'.editor-post-publish-button__button.has-changes-dot',
-					{ timeout: 500 }
-				);
-			} catch {
-				return false; // Not dirty because the button is disabled.
-			}
-		}
-		await page.waitForSelector( '.entities-saved-states__panel' );
-	}
-	// If we made it this far, the panel is opened.
-
-	return true;
-};
-
-const isEntityDirty = async ( name ) => {
-	const isOpen = await openEntitySavePanel();
-	if ( ! isOpen ) {
-		return false;
-	}
-	try {
-		await page.waitForXPath(
-			`//label[@class="components-checkbox-control__label"]//strong[contains(text(),"${ name }")]`,
-			{ timeout: 1000 }
-		);
-		return true;
-	} catch {}
-	return false;
-};
-
-const removeErrorMocks = () => {
-	// TODO: Add back console mocks when
-	// https://github.com/WordPress/gutenberg/issues/17355 is fixed.
-	/* eslint-disable no-console */
-	console.warn.mockReset();
-	console.error.mockReset();
-	console.info.mockReset();
-	/* eslint-enable no-console */
-};
-
-describe( 'Multi-entity editor states', () => {
-	beforeAll( async () => {
-		await activateTheme( 'emptytheme' );
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-	} );
-
-	afterAll( async () => {
-		await activateTheme( 'twentytwentyone' );
-	} );
-
-	it( 'should not display any dirty entities when loading the site editor', async () => {
-		await visitSiteEditor();
-		expect( await openEntitySavePanel() ).toBe( false );
-	} );
-
-	// Skip reason: This should be rewritten to use other methods to switching to different templates.
-	it.skip( 'should not dirty an entity by switching to it in the template dropdown', async () => {
-		await visitSiteEditor( {
-			postId: 'emptytheme//header',
-			postType: 'wp_template_part',
-		} );
-		await page.waitForFunction( () =>
-			Array.from( window.frames ).find(
-				( { name } ) => name === 'editor-canvas'
-			)
-		);
-
-		// Wait for blocks to load.
-		await canvas().waitForSelector( '.wp-block' );
-		expect( await isEntityDirty( 'header' ) ).toBe( false );
-		expect( await isEntityDirty( 'Index' ) ).toBe( false );
-
-		// Switch back and make sure it is still clean.
-		await clickTemplateItem( 'Templates', 'Index' );
-		await page.waitForFunction( () =>
-			Array.from( window.frames ).find(
-				( { name } ) => name === 'editor-canvas'
-			)
-		);
-		await canvas().waitForSelector( '.wp-block' );
-		expect( await isEntityDirty( 'header' ) ).toBe( false );
-		expect( await isEntityDirty( 'Index' ) ).toBe( false );
-
-		removeErrorMocks();
-	} );
-
-	describe( 'Multi-entity edit', () => {
-		const templatePartName = 'Test Template Part Name Edit';
-		const nestedTPName = 'Test Nested Template Part Name Edit';
-		const templateName = 'Custom Template';
-
-		beforeAll( async () => {
-			await deleteAllTemplates( 'wp_template' );
-			await deleteAllTemplates( 'wp_template_part' );
-			await createNewPost( {
-				postType: 'wp_template',
-				title: templateName,
-			} );
-			await publishPost();
-			await createTemplatePart( templatePartName );
-			await editTemplatePart( [
-				'Default template part test text.',
-				'Second paragraph test.',
-			] );
-			await createTemplatePart( nestedTPName, true );
-			await editTemplatePart(
-				[ 'Nested Template Part Text.', 'Second Nested test.' ],
-				true
-			);
-			await saveAllEntities();
-			await visitSiteEditor();
-
-			// Wait for site editor to load.
-			await canvas().waitForSelector(
-				'.wp-block-template-part.block-editor-block-list__layout'
-			);
-
-			// Our custom template shows up in the "Templates > General" menu; let's use it.
-			await clickTemplateItem(
-				[ 'Templates', 'General templates' ],
-				templateName
-			);
-			await page.waitForXPath(
-				`//h1[contains(@class, "edit-site-document-actions__title") and contains(text(), '${ templateName }')]`
-			);
-
-			removeErrorMocks();
-		} );
-
-		const saveAndWaitResponse = async () => {
-			await Promise.all( [
-				saveAllEntities(),
-
-				// Wait for the save request and the subsequent query to be
-				// fulfilled - both are requests made to /index.php route.
-				// Without that, clicked elements can lose focus sometimes
-				// when the response is received.
-				page.waitForResponse( ( response ) => {
-					return (
-						response.url().includes( 'index.php' ) &&
-						response.request().method() === 'POST'
-					);
-				} ),
-
-				page.waitForResponse( ( response ) => {
-					return (
-						response.url().includes( 'index.php' ) &&
-						response.request().method() === 'GET'
-					);
-				} ),
-			] );
-			removeErrorMocks();
-		};
-
-		it.skip( 'should only dirty the parent entity when editing the parent', async () => {
-			// Clear selection so that the block is not added to the template part.
-			await insertBlock( 'Paragraph' );
-
-			// Add changes to the main parent entity.
-			await page.keyboard.type( 'Test.' );
-
-			expect( await isEntityDirty( templateName ) ).toBe( true );
-			expect( await isEntityDirty( templatePartName ) ).toBe( false );
-			expect( await isEntityDirty( nestedTPName ) ).toBe( false );
-			await saveAndWaitResponse();
-		} );
-
-		it.skip( 'should only dirty the child when editing the child', async () => {
-			// Select parent TP to unlock selecting content.
-			await canvas().click( '.wp-block-template-part' );
-			await canvas().click(
-				'.wp-block-template-part .wp-block[data-type="core/paragraph"]'
-			);
-			await page.keyboard.type( 'Some more test words!' );
-
-			expect( await isEntityDirty( templateName ) ).toBe( false );
-			expect( await isEntityDirty( templatePartName ) ).toBe( true );
-			expect( await isEntityDirty( nestedTPName ) ).toBe( false );
-			await saveAndWaitResponse();
-		} );
-
-		it.skip( 'should only dirty the nested entity when editing the nested entity', async () => {
-			// Select parent TP to unlock selecting child.
-			await canvas().click( '.wp-block-template-part' );
-			// Select child TP to unlock selecting content.
-			await canvas().click(
-				'.wp-block-template-part .wp-block-template-part'
-			);
-			await canvas().click(
-				'.wp-block-template-part .wp-block-template-part .wp-block[data-type="core/paragraph"]'
-			);
-			await page.keyboard.type( 'Nested test words!' );
-
-			expect( await isEntityDirty( templateName ) ).toBe( false );
-			expect( await isEntityDirty( templatePartName ) ).toBe( false );
-			expect( await isEntityDirty( nestedTPName ) ).toBe( true );
-			await saveAndWaitResponse();
-		} );
-
-		it.skip( 'should not allow selecting template part content without parent selected', async () => {
-			// Unselect blocks.
-			await selectBlockByClientId();
-			// Try to select a child block of a template part.
-			await canvas().click(
-				'.wp-block-template-part .wp-block-template-part .wp-block[data-type="core/paragraph"]'
-			);
-
-			const selectedBlock = await page.evaluate( () => {
-				return wp.data.select( 'core/block-editor' ).getSelectedBlock();
-			} );
-			expect( selectedBlock?.name ).toBe( 'core/template-part' );
-		} );
-	} );
-} );