diff --git a/apps/comments-ui/src/App.tsx b/apps/comments-ui/src/App.tsx index d15c35e425..0f42eeb967 100644 --- a/apps/comments-ui/src/App.tsx +++ b/apps/comments-ui/src/App.tsx @@ -192,7 +192,7 @@ const App: React.FC = ({scriptTag}) => { - + {state.comments.length > 0 ? : null} ); diff --git a/apps/comments-ui/test/e2e/auth-frame.test.ts b/apps/comments-ui/test/e2e/auth-frame.test.ts index 51c50e7841..3ad23c9df8 100644 --- a/apps/comments-ui/test/e2e/auth-frame.test.ts +++ b/apps/comments-ui/test/e2e/auth-frame.test.ts @@ -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: '

This is comment 1

' + }); + + 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'); diff --git a/apps/comments-ui/test/e2e/lazy-loading.test.ts b/apps/comments-ui/test/e2e/lazy-loading.test.ts index 3c50d6c307..7e71143abd 100644 --- a/apps/comments-ui/test/e2e/lazy-loading.test.ts +++ b/apps/comments-ui/test/e2e/lazy-loading.test.ts @@ -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); }); });