Ghost/ghost/core/test/e2e-browser/admin/announcement-bar-settings.spec.js
Elena Baidakova 4207c9d0d1
Added browser tests for announcement bar (#16742)
refs TryGhost/Team#3122

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 87727d9</samp>

Added `data-testid` attributes to various elements in the announcement
bar settings feature to enable Playwright testing. Fixed a potential bug
with the `visibilitySettings` getter in the `visibility.js` component.
Added Playwright tests for the announcement bar settings feature in
`announcement-bar-settings.spec.js`.
2023-05-05 14:11:26 +04:00

62 lines
2.8 KiB
JavaScript

const {expect, test} = require('@playwright/test');
test.describe('Announcement Bar Settings', () => {
test('Bar hidden by default', async ({page}) => {
await page.goto('/ghost');
await goToAnnouncementBarSettings(page);
await test.step('Bar should be hidden', async () => {
const htmlFrame = await getPreviewFrame(page);
await expect(await htmlFrame.locator('#announcement-bar-root')).toHaveCount(0);
});
});
test('Show/hide bar if visibility checked/unchecked and text filled', async ({page}) => {
await page.goto('/ghost');
await goToAnnouncementBarSettings(page);
await test.step('Check free members', async () => {
const freeMembersCheckbox = await page.getByTestId('announcement-bar-free-member-input');
await expect(await freeMembersCheckbox.isChecked()).toBeFalsy();
await page.getByTestId('announcement-bar-free-member-label').click();
await expect(await freeMembersCheckbox.isChecked()).toBeTruthy();
});
await test.step('Fill announcement text', async () => {
await page.locator('.koenig-react-editor').click();
await expect(await page.locator('[contenteditable="true"]')).toBeVisible({timeout: 30000}); // add timeout as lexical module loading can take time
await page.keyboard.type('Announcement text');
await page.getByTestId('announcement-bar-title').click();
});
const htmlFrame = await getPreviewFrame(page);
await test.step('Announcement bar should be visible', async () => {
await expect(await htmlFrame.getByText('Announcement text')).toBeVisible();
});
await test.step('Disable free members', async () => {
const freeMembersCheckbox = await page.getByTestId('announcement-bar-free-member-input');
await expect(await freeMembersCheckbox.isChecked()).toBeTruthy();
await page.getByTestId('announcement-bar-free-member-label').click();
await expect(await freeMembersCheckbox.isChecked()).toBeFalsy();
await page.locator('.koenig-react-editor').click();
});
await test.step('Announcement bar should be hidden', async () => {
await expect(await htmlFrame.getByText('Announcement text')).toBeHidden();
});
});
});
async function goToAnnouncementBarSettings(page) {
return await test.step('Navigate to the announcement bar settings', async () => {
await page.locator('[data-test-nav="settings"]').click();
await page.locator('[data-test-nav="announcement-bar"]').click();
await expect(await page.getByTestId('announcement-bar-title')).toBeVisible();
});
}
async function getPreviewFrame(page) {
return page.frameLocator('[data-testid="iframe-html"]:visible');
}