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

Added lazy-loading of admin auth in Comments UI (#19799)

Browse Source 
closes ENG-711

When an Admin is authenticated in Comments-UI we only add moderation options to the displayed comments so we don't need to pre-emptively load the `admin-auth` iframe and make the `/ghost/api/admin/users/me/` request until some comments are actually visible.

- used `state.comments.length` property to defer rendering of the admin auth frame until comments have been fetched (after box is scrolled into view) and the count is > 0
This commit is contained in:
Kevin Ansfield 2024-03-05 15:57:20 +00:00 committed by GitHub
parent 50770d20b1
commit 92a8a53a95
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 31 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/comments-ui/src/App.tsx
View File

@ -192,7 +192,7 @@ const App: React.FC<AppProps> = ({scriptTag}) => {
<CommentsFrame ref={iframeRef}>
<ContentBox done={done} />
</CommentsFrame>
<AuthFrame adminUrl={options.adminUrl} onLoad={initAdminAuth}/>
{state.comments.length > 0 ? <AuthFrame adminUrl={options.adminUrl} onLoad={initAdminAuth}/> : null}
<PopupBox />
</AppContext.Provider>
);

25
apps/comments-ui/test/e2e/auth-frame.test.ts
View File

@ -4,7 +4,7 @@ import {expect, test} from '@playwright/test';
const admin = MOCKED_SITE_URL + '/ghost/';
test.describe('Auth Frame', async () => {
test('renders the auth frame', async ({page}) => {
test('skips rendering the auth frame with no comments', async ({page}) => {
const mockedApi = new MockedApi({});
await initialize({
mockedApi,
@ -13,6 +13,23 @@ test.describe('Auth Frame', async () => {
admin
});
const iframeElement = await page.locator('iframe[data-frame="admin-auth"]');
await expect(iframeElement).toHaveCount(0);
});
test('renders the auth frame when there are comments', async ({page}) => {
const mockedApi = new MockedApi({});
mockedApi.addComment({
html: '<p>This is comment 1</p>'
});
await initialize({
mockedApi,
page,
publication: 'Publisher Weekly',
admin
});
const iframeElement = await page.locator('iframe[data-frame="admin-auth"]');
await expect(iframeElement).toHaveCount(1);
});
@ -45,7 +62,7 @@ test.describe('Auth Frame', async () => {
const iframeElement = await page.locator('iframe[data-frame="admin-auth"]');
await expect(iframeElement).toHaveCount(1);
const comments = await frame.getByTestId('comment-component');
const comments = await frame.getByTestId('comment-component');
await expect(comments).toHaveCount(5);
const moreButtons = await frame.getByTestId('more-button');
@ -86,7 +103,7 @@ test.describe('Auth Frame', async () => {
await expect(iframeElement).toHaveCount(1);
// Check if more actions button is visible on each comment
const comments = await frame.getByTestId('comment-component');
const comments = await frame.getByTestId('comment-component');
await expect(comments).toHaveCount(5);
const moreButtons = await frame.getByTestId('more-button');
@ -143,7 +160,7 @@ test.describe('Auth Frame', async () => {
await expect(iframeElement).toHaveCount(1);
// Check if more actions button is visible on each comment
const comments = await frame.getByTestId('comment-component');
const comments = await frame.getByTestId('comment-component');
await expect(comments).toHaveCount(5);
const moreButtons = await frame.getByTestId('more-button');

13
apps/comments-ui/test/e2e/lazy-loading.test.ts
View File

@ -48,18 +48,23 @@ test.describe('Lazy loading', async () => {
await page.locator('iframe[title="comments-frame"]').waitFor({state: 'attached'});
const commentsFrameSelector = 'iframe[title="comments-frame"]';
const adminFrameSelector = 'iframe[data-frame="admin-auth"]';
const frame = page.frameLocator(commentsFrameSelector);
const commentsFrame = page.frameLocator(commentsFrameSelector);
// wait for a little bit to ensure we're not loading comments until scrolled
await page.waitForTimeout(250);
// check that we haven't loaded comments yet
await expect(frame.getByTestId('loading')).toHaveCount(1);
// check that we haven't loaded comments or admin-auth yet
await expect(commentsFrame.getByTestId('loading')).toHaveCount(1);
await expect(page.locator(adminFrameSelector)).toHaveCount(0);
// scroll the iframe into view
const iframeHandle = await page.locator(commentsFrameSelector);
iframeHandle.scrollIntoViewIfNeeded();
await expect(frame.getByTestId('loading')).toHaveCount(0);
// loading state should be gone and admin-auth frame should be present
await expect(commentsFrame.getByTestId('loading')).toHaveCount(0);
await expect(page.locator(adminFrameSelector)).toHaveCount(1);
});
});