OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated default comments from 5 to 20 (#20359)

Browse Source 
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.
This commit is contained in:
Ronald Langeveld 2024-06-11 18:39:59 +07:00 committed by GitHub
parent 0aa36b901d
commit bea074b23d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 27 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/comments-ui/src/components/content/Content.tsx
View File

@ -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 />
</>
);
};

2
apps/comments-ui/src/utils/api.ts
View File

@ -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);
}

48
apps/comments-ui/test/e2e/pagination.test.ts
View File

@ -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();

8
apps/comments-ui/test/utils/e2e.ts
View File

@ -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>`
});
}
}