Block Editor: Fix tests.

WordPress · May 27, 2020 · 1814e0e · 1814e0e
1 parent 782f2b6
commit 1814e0e
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 56 deletions.
diff --git a/packages/block-editor/src/components/provider/test/use-block-sync.js b/packages/block-editor/src/components/provider/test/use-block-sync.js
@@ -217,7 +217,6 @@ describe( 'useBlockSync hook', () => {
 			create(
 				<TestWrapper
 					setRegistry={ setRegistry }
-					clientId="test"
 					value={ value1 }
 					onChange={ onChange }
 					onInput={ onInput }
@@ -257,7 +256,6 @@ describe( 'useBlockSync hook', () => {
 			create(
 				<TestWrapper
 					setRegistry={ setRegistry }
-					clientId="test"
 					value={ value1 }
 					onChange={ onChange }
 					onInput={ onInput }
@@ -343,7 +341,6 @@ describe( 'useBlockSync hook', () => {
 			create(
 				<TestWrapper
 					setRegistry={ setRegistry }
-					clientId="test"
 					value={ value1 }
 					onChange={ onChange }
 					onInput={ onInput }

diff --git a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
@@ -1,12 +1,12 @@
-/**
- * External dependencies
- */
-import { kebabCase } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { insertBlock, visitAdminPage } from '@wordpress/e2e-test-utils';
+import {
+	insertBlock,
+	visitAdminPage,
+	createNewPost,
+	publishPost,
+} from '@wordpress/e2e-test-utils';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
@@ -45,30 +45,6 @@ const getTemplateDropdownElement = async ( itemName ) => {
 	return item;
 };
 
-const createTemplate = async ( templateName = 'Test Template' ) => {
-	// Click the "new template" button.
-	const createNewTemplateButton = await getTemplateDropdownElement( 'New' );
-	await createNewTemplateButton.click();
-	await page.waitForSelector( '.components-modal__frame' );
-
-	// Create a new template with the given name.
-	await page.keyboard.press( 'Tab' );
-	await page.keyboard.press( 'Tab' );
-	await page.keyboard.type( templateName );
-	const [ addTemplateButton ] = await page.$x(
-		'//div[contains(@class, "components-modal__frame")]//button[contains(., "Add")]'
-	);
-	await addTemplateButton.click();
-
-	// Wait for the site editor to load the new template.
-	await page.waitForXPath(
-		`//button[contains(@class, "components-dropdown-menu__toggle")][contains(text(), "${ kebabCase(
-			templateName
-		) }")]`,
-		{ timeout: 3000 }
-	);
-};
-
 const createTemplatePart = async (
 	templatePartName = 'test-template-part',
 	themeName = 'test-theme',
@@ -178,8 +154,8 @@ describe( 'Multi-entity editor states', () => {
 		'#gutenberg-full-site-editing-demo',
 	];
 
+	const templateName = 'Front Page';
 	const templatePartName = 'Test Template Part Name Edit';
-	const templateName = 'Test Template Name Edit';
 	const nestedTPName = 'Test Nested Template Part Name Edit';
 
 	beforeAll( async () => {
@@ -224,8 +200,14 @@ describe( 'Multi-entity editor states', () => {
 
 	describe( 'Multi-entity edit', () => {
 		beforeAll( async () => {
+			await trashExistingPosts( 'wp_template' );
+			await trashExistingPosts( 'wp_template_part' );
+			await createNewPost( {
+				postType: 'wp_template',
+				title: templateName,
+			} );
+			await publishPost();
 			await visitSiteEditor();
-			await createTemplate( templateName );
 			await createTemplatePart( templatePartName );
 			await editTemplatePart( [
 				'Default template part test text.',
@@ -279,19 +261,5 @@ describe( 'Multi-entity editor states', () => {
 			expect( await isEntityDirty( templatePartName ) ).toBe( false );
 			expect( await isEntityDirty( nestedTPName ) ).toBe( true );
 		} );
-
-		it( 'should not dirty any entities when hovering over template preview', async () => {
-			const mainTemplateButton = await getTemplateDropdownElement(
-				kebabCase( templateName )
-			);
-			// Hover and wait for template/template part to load.
-			await mainTemplateButton.hover();
-			await page.waitForSelector(
-				'.edit-site-template-switcher__template-preview .wp-block[data-type="core/template-part"]'
-			);
-			expect( await isEntityDirty( templateName ) ).toBe( false );
-			expect( await isEntityDirty( templatePartName ) ).toBe( false );
-			expect( await isEntityDirty( nestedTPName ) ).toBe( false );
-		} );
 	} );
 } );
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -59,9 +59,11 @@ function Editor( { settings: _settings } ) {
 			select( 'core' ).getEntityRecord(
 				'postType',
 				settings.templateType,
-				settings.templateId
+				settings.templateType === 'wp_template'
+					? settings.templateId
+					: settings.templatePartId
 			),
-		[ settings.templateType, settings.templateId ]
+		[ settings.templateType, settings.templateId, settings.templatePartId ]
 	);
 
 	const context = useMemo( () => ( { settings, setSettings } ), [
@@ -131,7 +133,11 @@ function Editor( { settings: _settings } ) {
 						<EntityProvider
 							kind="postType"
 							type={ settings.templateType }
-							id={ settings.templateId }
+							id={
+								settings.templateType === 'wp_template'
+									? settings.templateId
+									: settings.templatePartId
+							}
 						>
 							<BlockContextProvider value={ blockContext }>
 								<Context.Provider value={ context }>

diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
@@ -46,11 +46,20 @@ export default function Header( {
 	onToggleInserter,
 } ) {
 	const { settings, setSettings } = useEditorContext();
+	const setActiveTemplateId = useCallback(
+		( newTemplateId ) =>
+			setSettings( ( prevSettings ) => ( {
+				...prevSettings,
+				templateId: newTemplateId,
+				templateType: 'wp_template',
+			} ) ),
+		[]
+	);
 	const setActiveTemplatePartId = useCallback(
 		( newTemplatePartId ) =>
 			setSettings( ( prevSettings ) => ( {
 				...prevSettings,
-				templateId: newTemplatePartId,
+				templatePartId: newTemplatePartId,
 				templateType: 'wp_template_part',
 			} ) ),
 		[]
@@ -162,10 +171,12 @@ export default function Header( {
 						templatePartIds={ settings.templatePartIds }
 						page={ settings.page }
 						activeId={ settings.templateId }
+						activeTemplatePartId={ settings.templatePartId }
 						homeId={ settings.homeTemplateId }
 						isTemplatePart={
 							settings.templateType === 'wp_template_part'
 						}
+						onActiveIdChange={ setActiveTemplateId }
 						onActiveTemplatePartIdChange={ setActiveTemplatePartId }
 						onAddTemplateId={ addTemplateId }
 						onRemoveTemplateId={ removeTemplateId }

diff --git a/packages/edit-site/src/components/template-switcher/index.js b/packages/edit-site/src/components/template-switcher/index.js
@@ -50,8 +50,10 @@ export default function TemplateSwitcher( {
 	templatePartIds,
 	page,
 	activeId,
+	activeTemplatePartId,
 	homeId,
 	isTemplatePart,
+	onActiveIdChange,
 	onActiveTemplatePartIdChange,
 	onAddTemplateId,
 	onRemoveTemplateId,
@@ -151,13 +153,21 @@ export default function TemplateSwitcher( {
 					children: ( isTemplatePart
 						? templateParts
 						: [ template ]
-					).find( ( choice ) => choice.value === activeId ).slug,
+					).find(
+						( choice ) =>
+							choice.value ===
+							( isTemplatePart ? activeTemplatePartId : activeId )
+					).slug,
 				} }
 			>
 				{ () => (
 					<>
 						<MenuGroup label={ __( 'Template' ) }>
-							<MenuItem>{ template.label }</MenuItem>
+							<MenuItem
+								onClick={ () => onActiveIdChange( activeId ) }
+							>
+								{ template.label }
+							</MenuItem>
 							{ overwriteSlug &&
 								overwriteSlug !== template.slug && (
 									<MenuItem
@@ -179,7 +189,11 @@ export default function TemplateSwitcher( {
 						<MenuGroup label={ __( 'Template Parts' ) }>
 							<MenuItemsChoice
 								choices={ templateParts }
-								value={ isTemplatePart ? activeId : undefined }
+								value={
+									isTemplatePart
+										? activeTemplatePartId
+										: undefined
+								}
 								onSelect={ onActiveTemplatePartIdChange }
 								onHover={ onHoverTemplatePart }
 							/>