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
WordPress · Apr 14, 2022 · c123b25 · c123b25
1 parent b1ee579
commit c123b25
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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.