Fix flaky test by using waitForResponse to ensure the url details req…

…uest completes (#37901)

* Fix flaky test by using waitForResponse to ensure the url details request completes and 404s

* Handle promises in parallel

* Fix other issues with test

packages/e2e-tests/specs/editor/blocks/navigation.test.js

@@ -435,20 +435,7 @@ describe( 'Navigation', () => {
 		expect( await getNavigationMenuRawContent() ).toMatchSnapshot();
 	} );
 
-	it.skip( 'allows pages to be created from the navigation block and their links added to menu', async () => {
-		// The URL Details endpoint 404s for the created page, since it will
-		// be a draft that is inaccessible publicly. To avoid this we mock
-		// out the endpoint response to be empty which will be handled gracefully
-		// in the UI whilst avoiding any 404s.
-		await setUpResponseMocking( [
-			{
-				match: ( request ) =>
-					request.url().includes( `rest_route` ) &&
-					request.url().includes( `url-details` ),
-				onRequestMatch: createJSONResponse( [] ),
-			},
-		] );
-
+	it( 'allows pages to be created from the navigation block and their links added to menu', async () => {
 		await createNewPost();
 		await insertBlock( 'Navigation' );
 		const startEmptyButton = await page.waitForXPath( START_EMPTY_XPATH );
@@ -466,16 +453,24 @@ describe( 'Navigation', () => {
 		);
 		await input.type( pageTitle );
 
-		// Wait for the create button to appear and click it.
+		// When creating a page, the URLControl makes a request to the
+		// url-details endpoint to fetch information about the page.
+		// Because the draft is inaccessible publicly, this request
+		// returns a 404 response. Wait for the response and expect
+		// the error to have occurred.
 		const createPageButton = await page.waitForSelector(
 			'.block-editor-link-control__search-create'
 		);
-		await createPageButton.click();
-
-		const draftLink = await page.waitForSelector(
-			'.wp-block-navigation-item__content'
+		const responsePromise = page.waitForResponse(
+			( response ) =>
+				response.url().includes( 'url-details' ) &&
+				response.status() === 404
+		);
+		const createPagePromise = createPageButton.click();
+		await Promise.all( [ responsePromise, createPagePromise ] );
+		expect( console ).toHaveErroredWith(
+			'Failed to load resource: the server responded with a status of 404 (Not Found)'
 		);
-		await draftLink.click();
 
 		// Creating a draft is async, so wait for a sign of completion. In this
 		// case the link that shows in the URL popover once a link is added.