From c123b259a6ad1b55c301b16766bde7a2e70acf6d Mon Sep 17 00:00:00 2001
From: Carlos Bravo <37012961+c4rl0sbr4v0@users.noreply.github.com>
Date: Thu, 14 Apr 2022 02:08:49 +0200
Subject: [PATCH] Fix comments no results placeholder not appearing (#40234)

* Fix comments no results placeholder not appearing

* Revert changes and apply fix recommended

* Add e2e test for no results

* Comment cleaning
---
 .../block-library/src/comment-template/edit.js   |  7 +++++--
 .../block-library/src/comment-template/hooks.js  |  3 ++-
 .../experiments/blocks/comments-query.test.js    | 16 ++++++++++++----
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/comment-template/edit.js b/packages/block-library/src/comment-template/edit.js
index f41f0a98e5d67..6027ec3f78e72 100644
--- a/packages/block-library/src/comment-template/edit.js
+++ b/packages/block-library/src/comment-template/edit.js
@@ -252,7 +252,6 @@ export default function CommentTemplateEdit( {
 		( select ) => {
 			const { getEntityRecords } = select( coreStore );
 			const { getBlocks } = select( blockEditorStore );
-
 			return {
 				// Request only top-level comments. Replies are embedded.
 				topLevelComments: commentQuery
@@ -289,7 +288,11 @@ export default function CommentTemplateEdit( {
 	}
 
 	if ( ! commentTree.length ) {
-		return <p { ...blockProps }> { __( 'No results found.' ) }</p>;
+		return (
+			<p { ...blockProps } data-testid="noresults">
+				{ __( 'No results found.' ) }
+			</p>
+		);
 	}
 
 	return (
diff --git a/packages/block-library/src/comment-template/hooks.js b/packages/block-library/src/comment-template/hooks.js
index ea2ead61331eb..fa10b0ccf2ee6 100644
--- a/packages/block-library/src/comment-template/hooks.js
+++ b/packages/block-library/src/comment-template/hooks.js
@@ -96,9 +96,10 @@ const useDefaultPageIndex = ( { defaultPage, postId, perPage, queryArgs } ) => {
 			method: 'HEAD',
 			parse: false,
 		} ).then( ( res ) => {
+			const pages = parseInt( res.headers.get( 'X-WP-TotalPages' ) );
 			setDefaultPages( {
 				...defaultPages,
-				[ key ]: parseInt( res.headers.get( 'X-WP-TotalPages' ) ),
+				[ key ]: pages <= 1 ? 1 : pages, // If there are 0 pages, it means that there are no comments, but there is no 0th page.
 			} );
 		} );
 	}, [ defaultPage, postId, perPage, setDefaultPages ] );
diff --git a/packages/e2e-tests/specs/experiments/blocks/comments-query.test.js b/packages/e2e-tests/specs/experiments/blocks/comments-query.test.js
index 1fab57ce5dc42..5d706b3cf5210 100644
--- a/packages/e2e-tests/specs/experiments/blocks/comments-query.test.js
+++ b/packages/e2e-tests/specs/experiments/blocks/comments-query.test.js
@@ -24,11 +24,21 @@ describe( 'Comment Query Loop', () => {
 			'newest'
 		);
 	} );
+	it( 'We show no results message if there are no comments', async () => {
+		await trashAllComments();
+		await createNewPost();
+		await insertBlock( 'Comments Query Loop' );
+		await page.waitForSelector( '[data-testid="noresults"]' );
+		expect(
+			await page.evaluate(
+				( el ) => el.innerText,
+				await page.$( '[data-testid="noresults"]' )
+			)
+		).toEqual( 'No results found.' );
+	} );
 	it( 'Pagination links are working as expected', async () => {
 		await createNewPost();
-		// Insert the Query Comment Loop block.
 		await insertBlock( 'Comments Query Loop' );
-		// Insert the Comment Loop form.
 		await insertBlock( 'Post Comments Form' );
 		await publishPost();
 		// Visit the post that was just published.
@@ -89,9 +99,7 @@ describe( 'Comment Query Loop', () => {
 	it( 'Pagination links are not appearing if break comments is not enabled', async () => {
 		await setOption( 'page_comments', '0' );
 		await createNewPost();
-		// Insert the Query Comment Loop block.
 		await insertBlock( 'Comments Query Loop' );
-		// Insert the Comment Loop form.
 		await insertBlock( 'Post Comments Form' );
 		await publishPost();
 		// Visit the post that was just published.