Update e2e tests and add a new test for Navigation block.

WordPress · Sep 30, 2021 · 3a69217 · 3a69217
1 parent b102fe4
commit 3a69217
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 21 deletions.
diff --git a/packages/e2e-tests/specs/experiments/blocks/__snapshots__/navigation.test.js.snap b/packages/e2e-tests/specs/experiments/blocks/__snapshots__/navigation.test.js.snap
@@ -44,6 +44,16 @@ exports[`Navigation Creating from existing Pages allows a navigation block to be
 <!-- /wp:navigation -->"
 `;
 
+exports[`Navigation Shows the quick inserter when the block contains non-navigation specific blocks 1`] = `
+"<!-- wp:navigation -->
+<!-- wp:navigation-link {\\"label\\":\\"WP\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->
+
+<!-- wp:site-title /-->
+
+<!-- wp:navigation-link {\\"label\\":\\"WP News\\",\\"url\\":\\"https://wordpress.org/news/\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->
+<!-- /wp:navigation -->"
+`;
+
 exports[`Navigation allows an empty navigation block to be created and manually populated using a mixture of internal and external links 1`] = `
 "<!-- wp:navigation -->
 <!-- wp:navigation-link {\\"label\\":\\"WP\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->

diff --git a/packages/e2e-tests/specs/experiments/blocks/navigation.test.js b/packages/e2e-tests/specs/experiments/blocks/navigation.test.js
@@ -246,17 +246,6 @@ async function createEmptyNavBlock() {
 	await startEmptyButton.click();
 }
 
-async function addLinkBlock() {
-	// Using 'click' here checks for regressions of https://github.com/WordPress/gutenberg/issues/18329,
-	// an issue where the block appender requires two clicks.
-	await page.click( '.wp-block-navigation .block-list-appender' );
-
-	const [ linkButton ] = await page.$x(
-		"//*[contains(@class, 'block-editor-inserter__quick-inserter')]//*[text()='Custom Link']"
-	);
-	await linkButton.click();
-}
-
 async function toggleSidebar() {
 	await page.click(
 		'.edit-post-header__settings button[aria-label="Settings"]'
@@ -414,7 +403,7 @@ describe( 'Navigation', () => {
 
 		await createEmptyNavBlock();
 
-		await addLinkBlock();
+		await page.click( '.wp-block-navigation .block-list-appender' );
 
 		// Add a link to the Link block.
 		await updateActiveNavigationLink( {
@@ -425,7 +414,7 @@ describe( 'Navigation', () => {
 
 		await showBlockToolbar();
 
-		await addLinkBlock();
+		await page.click( '.wp-block-navigation .block-list-appender' );
 
 		// After adding a new block, search input should be shown immediately.
 		// Verify that Escape would close the popover.
@@ -477,7 +466,7 @@ describe( 'Navigation', () => {
 
 		await createEmptyNavBlock();
 
-		await addLinkBlock();
+		await page.click( '.wp-block-navigation .block-list-appender' );
 
 		// Add a link to the Link block.
 		await updateActiveNavigationLink( {
@@ -487,7 +476,7 @@ describe( 'Navigation', () => {
 
 		await showBlockToolbar();
 
-		await addLinkBlock();
+		await page.click( '.wp-block-navigation .block-list-appender' );
 
 		// Wait for URL input to be focused
 		await page.waitForSelector(
@@ -548,7 +537,7 @@ describe( 'Navigation', () => {
 		// Create an empty nav block.
 		await createEmptyNavBlock();
 
-		await addLinkBlock();
+		await page.click( '.wp-block-navigation .block-list-appender' );
 
 		// Wait for URL input to be focused
 		await page.waitForSelector(
@@ -642,6 +631,46 @@ describe( 'Navigation', () => {
 		expect( navSubmenusLength ).toEqual( navButtonTogglesLength );
 	} );
 
+	it( 'Shows the quick inserter when the block contains non-navigation specific blocks', async () => {
+		// Add the navigation block.
+		await insertBlock( 'Navigation' );
+
+		// Create an empty nav block.
+		await page.waitForSelector( '.wp-block-navigation-placeholder' );
+
+		await createEmptyNavBlock();
+
+		// Add a Link block first.
+		await page.click( '.wp-block-navigation .block-list-appender' );
+
+		// Add a link to the Link block.
+		await updateActiveNavigationLink( {
+			url: 'https://wordpress.org',
+			label: 'WP',
+			type: 'url',
+		} );
+
+		// Now add a different block type.
+		await insertBlock( 'Site Title' );
+
+		// Now try inserting another Link block via the quick inserter.
+		await page.click( '.wp-block-navigation .block-list-appender' );
+
+		const [ linkButton ] = await page.$x(
+			"//*[contains(@class, 'block-editor-inserter__quick-inserter')]//*[text()='Custom Link']"
+		);
+		await linkButton.click();
+
+		await updateActiveNavigationLink( {
+			url: 'https://wordpress.org/news/',
+			label: 'WP News',
+			type: 'url',
+		} );
+
+		// Expect a Navigation block with two links and a Site Title.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
 	// The following tests are unstable, roughly around when https://github.com/WordPress/wordpress-develop/pull/1412
 	// landed. The block manually tests well, so let's skip to unblock other PRs and immediately follow up. cc @vcanales
 	it.skip( 'loads frontend code only if the block is present', async () => {

diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js
@@ -380,11 +380,6 @@ describe( 'Navigation editor', () => {
 		);
 		await appender.click();
 
-		const linkInserterItem = await page.waitForXPath(
-			'//button[@role="option"]//span[.="Custom Link"]'
-		);
-		await linkInserterItem.click();
-
 		await page.waitForSelector( 'input[aria-label="URL"]' );
 
 		// The link suggestions should be searchable.