From 9521576e2b469551e2b66555726502b547b71917 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 16 Dec 2021 11:56:45 +0800
Subject: [PATCH] Split up and enable script loading tests

---
 .../specs/editor/blocks/navigation.test.js    | 113 ++----------------
 1 file changed, 10 insertions(+), 103 deletions(-)

diff --git a/packages/e2e-tests/specs/editor/blocks/navigation.test.js b/packages/e2e-tests/specs/editor/blocks/navigation.test.js
index a3517d4a2c1f8b..39c20350737f0f 100644
--- a/packages/e2e-tests/specs/editor/blocks/navigation.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/navigation.test.js
@@ -12,8 +12,6 @@ import {
 	saveDraft,
 	showBlockToolbar,
 	openPreviewPage,
-	selectBlockByClientId,
-	getAllBlocks,
 	ensureSidebarOpened,
 	__experimentalRest as rest,
 	publishPost,
@@ -115,21 +113,6 @@ const PLACEHOLDER_ACTIONS_XPATH = `//*[contains(@class, '${ PLACEHOLDER_ACTIONS_
 const START_EMPTY_XPATH = `${ PLACEHOLDER_ACTIONS_XPATH }//button[text()='Start empty']`;
 const ADD_ALL_PAGES_XPATH = `${ PLACEHOLDER_ACTIONS_XPATH }//button[text()='Add all pages']`;
 
-async function turnResponsivenessOn() {
-	const blocks = await getAllBlocks();
-
-	await selectBlockByClientId( blocks[ 0 ].clientId );
-	await ensureSidebarOpened();
-
-	const [ responsivenessToggleButton ] = await page.$x(
-		'//label[text()[contains(.,"Enable responsive menu")]]'
-	);
-
-	await responsivenessToggleButton.click();
-
-	await saveDraft();
-}
-
 /**
  * Delete all items for the given REST resources using the REST API.
  *
@@ -645,29 +628,11 @@ describe( 'Navigation', () => {
 		} );
 	} );
 
-	// 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 () => {
-		// Mock the response from the Pages endpoint. This is done so that the pages returned are always
-		// consistent and to test the feature more rigorously than the single default sample page.
-		// await mockPagesResponse( [
-		// 	{
-		// 		title: 'Home',
-		// 		slug: 'home',
-		// 	},
-		// 	{
-		// 		title: 'About',
-		// 		slug: 'about',
-		// 	},
-		// 	{
-		// 		title: 'Contact Us',
-		// 		slug: 'contact',
-		// 	},
-		// ] );
-
-		// Create first block at the start in order to enable preview.
-		await insertBlock( 'Navigation' );
-		await saveDraft();
+	it( 'does not load the frontend script if no navigation blocks are present', async () => {
+		await createNewPost();
+		await insertBlock( 'Paragraph' );
+		await page.waitForSelector( 'p[data-title="Paragraph"]:focus' );
+		await page.keyboard.type( 'Hello' );
 
 		const previewPage = await openPreviewPage();
 		const isScriptLoaded = await previewPage.evaluate(
@@ -679,22 +644,14 @@ describe( 'Navigation', () => {
 		);
 
 		expect( isScriptLoaded ).toBe( false );
+	} );
 
-		const allPagesButton = await page.waitForXPath( ADD_ALL_PAGES_XPATH );
-		await allPagesButton.click();
+	it( 'loads the frontend script only once even when multiple navigation blocks are present', async () => {
+		await createNewPost();
 		await insertBlock( 'Navigation' );
-		const allPagesButton2 = await page.waitForXPath( ADD_ALL_PAGES_XPATH );
-		await allPagesButton2.click();
-		await turnResponsivenessOn();
-
-		await previewPage.reload( {
-			waitFor: [ 'networkidle0', 'domcontentloaded' ],
-		} );
+		await insertBlock( 'Navigation' );
+		const previewPage = await openPreviewPage();
 
-		/*
-			Count instances of the tag to make sure that it's been loaded only once,
-			regardless of the number of navigation blocks present.
-		*/
 		const tagCount = await previewPage.evaluate(
 			() =>
 				Array.from(
@@ -706,54 +663,4 @@ describe( 'Navigation', () => {
 
 		expect( tagCount ).toBe( 1 );
 	} );
-
-	it.skip( 'loads frontend code only if responsiveness is turned on', async () => {
-		// await mockPagesResponse( [
-		// 	{
-		// 		title: 'Home',
-		// 		slug: 'home',
-		// 	},
-		// 	{
-		// 		title: 'About',
-		// 		slug: 'about',
-		// 	},
-		// 	{
-		// 		title: 'Contact Us',
-		// 		slug: 'contact',
-		// 	},
-		// ] );
-
-		await insertBlock( 'Navigation' );
-		await saveDraft();
-
-		const previewPage = await openPreviewPage();
-		let isScriptLoaded = await previewPage.evaluate(
-			() =>
-				null !==
-				document.querySelector(
-					'script[src*="navigation/view.min.js"]'
-				)
-		);
-
-		expect( isScriptLoaded ).toBe( false );
-
-		const allPagesButton = await page.waitForXPath( ADD_ALL_PAGES_XPATH );
-		await allPagesButton.click();
-
-		await turnResponsivenessOn();
-
-		await previewPage.reload( {
-			waitFor: [ 'networkidle0', 'domcontentloaded' ],
-		} );
-
-		isScriptLoaded = await previewPage.evaluate(
-			() =>
-				null !==
-				document.querySelector(
-					'script[src*="navigation/view.min.js"]'
-				)
-		);
-
-		expect( isScriptLoaded ).toBe( true );
-	} );
 } );