From bea074b23d8df2d8afe353b1c55a9569eb9e0e07 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Tue, 11 Jun 2024 18:39:59 +0700
Subject: [PATCH] Updated default comments from 5 to 20 (#20359)

ref MOM-135 MOM-211 MOM-213

- Bumped up the default comments count from 5 to 20 comments before
pagination kicks in.
- Moved the pagination (`Show X previous comments)` to bottom of the
page (soon to be reworded to `Show x more comments`)
- Updated tests and added a new helper for adding multiple comments easier.
---
 .../src/components/content/Content.tsx        |  2 +-
 apps/comments-ui/src/utils/api.ts             |  2 +-
 apps/comments-ui/test/e2e/pagination.test.ts  | 48 +++++++------------
 apps/comments-ui/test/utils/e2e.ts            |  8 ++++
 4 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/apps/comments-ui/src/components/content/Content.tsx b/apps/comments-ui/src/components/content/Content.tsx
index ce665a1a55..caf9810b63 100644
--- a/apps/comments-ui/src/components/content/Content.tsx
+++ b/apps/comments-ui/src/components/content/Content.tsx
@@ -37,7 +37,6 @@ const Content = () => {
     return (
         <>
             <ContentTitle count={commentCount} showCount={showCount} title={title}/>
-            <Pagination />
             <div className={!pagination ? 'mt-4' : ''} data-test="comment-elements">
                 {commentsElements}
             </div>
@@ -47,6 +46,7 @@ const Content = () => {
                     : null
                 }
             </div>
+            <Pagination />
         </>
     );
 };
diff --git a/apps/comments-ui/src/utils/api.ts b/apps/comments-ui/src/utils/api.ts
index a30903aa1c..1d839be01c 100644
--- a/apps/comments-ui/src/utils/api.ts
+++ b/apps/comments-ui/src/utils/api.ts
@@ -129,7 +129,7 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}: {site
 
                 const params = new URLSearchParams();
 
-                params.set('limit', '5');
+                params.set('limit', '20');
                 if (filter) {
                     params.set('filter', filter);
                 }
diff --git a/apps/comments-ui/test/e2e/pagination.test.ts b/apps/comments-ui/test/e2e/pagination.test.ts
index 5542c3fca3..8ef7237e52 100644
--- a/apps/comments-ui/test/e2e/pagination.test.ts
+++ b/apps/comments-ui/test/e2e/pagination.test.ts
@@ -1,28 +1,11 @@
-import {MockedApi, initialize} from '../utils/e2e';
+import {MockedApi, addMultipleComments, initialize} from '../utils/e2e';
 import {expect, test} from '@playwright/test';
 
 test.describe('Pagination', async () => {
-    test('Shows pagination button on top if more than 5 comments', async ({page}) => {
+    test('Shows pagination button at bottom if more than 20 comments', async ({page}) => {
         const mockedApi = new MockedApi({});
 
-        mockedApi.addComment({
-            html: '<p>This is comment 1</p>'
-        });
-        mockedApi.addComment({
-            html: '<p>This is comment 2</p>'
-        });
-        mockedApi.addComment({
-            html: '<p>This is comment 3</p>'
-        });
-        mockedApi.addComment({
-            html: '<p>This is comment 4</p>'
-        });
-        mockedApi.addComment({
-            html: '<p>This is comment 5</p>'
-        });
-        mockedApi.addComment({
-            html: '<p>This is comment 6</p>'
-        });
+        addMultipleComments(mockedApi, 21);
 
         const {frame} = await initialize({
             mockedApi,
@@ -36,24 +19,27 @@ test.describe('Pagination', async () => {
         await expect(frame.getByTestId('pagination-component')).toContainText('Show 1 previous comment');
 
         // Test total comments with test-id comment-component is 5
-        await expect(frame.getByTestId('comment-component')).toHaveCount(5);
+        await expect(frame.getByTestId('comment-component')).toHaveCount(20);
 
-        // Check only the first 5 comments are visible
-        await expect(frame.getByText('This is comment 1')).not.toBeVisible();
-        await expect(frame.getByText('This is comment 2')).toBeVisible();
-        await expect(frame.getByText('This is comment 3')).toBeVisible();
-        await expect(frame.getByText('This is comment 4')).toBeVisible();
-        await expect(frame.getByText('This is comment 5')).toBeVisible();
-        await expect(frame.getByText('This is comment 6')).toBeVisible();
+        // Check only the first latest 20 comments are visible
+        await expect(frame.getByText('This is comment 1.')).not.toBeVisible();
+        await expect(frame.getByText('This is comment 2.')).toBeVisible();
+        await expect(frame.getByText('This is comment 3.')).toBeVisible();
+        await expect(frame.getByText('This is comment 4.')).toBeVisible();
+        await expect(frame.getByText('This is comment 5.')).toBeVisible();
+        await expect(frame.getByText('This is comment 6.')).toBeVisible();
+        await expect(frame.getByText('This is comment 20.')).toBeVisible();
+
+        // 
 
         // Click the pagination button
         await frame.getByTestId('pagination-component').click();
 
-        // Check only 6 visible (not more than that)
-        await expect(frame.getByTestId('comment-component')).toHaveCount(6);
+        // Check only 21 visible (not more than that)
+        await expect(frame.getByTestId('comment-component')).toHaveCount(21);
 
         // Check comments 6 is visible
-        await expect(frame.getByText('This is comment 1')).toBeVisible();
+        await expect(frame.getByText('This is comment 1.')).toBeVisible();
 
         // Check the pagination button is not visible
         await expect(frame.getByTestId('pagination-component')).not.toBeVisible();
diff --git a/apps/comments-ui/test/utils/e2e.ts b/apps/comments-ui/test/utils/e2e.ts
index 356c05fcf4..240b0ce2ca 100644
--- a/apps/comments-ui/test/utils/e2e.ts
+++ b/apps/comments-ui/test/utils/e2e.ts
@@ -202,3 +202,11 @@ export function getModifierKey() {
         return 'Control';
     }
 }
+
+export function addMultipleComments(api, numComments) {
+    for (let i = 1; i <= numComments; i++) {
+        api.addComment({
+            html: `<p>This is comment ${i}.</p>`
+        });
+    }
+}