Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-15 03:01:37 -05:00
Code Issues Activity

Added browser tests for announcement bar (#16742)

Browse source 
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`.
This commit is contained in:
Elena Baidakova 2023-05-05 14:11:26 +04:00 • committed by GitHub
parent ffe6a472a9
commit 4207c9d0d1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 69 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin/.lint-todo
View file

@ -581,3 +581,5 @@ add|ember-template-lint|require-valid-alt-text|20|20|20|20|bc0bb4f51567cea7289bf
add|ember-template-lint|no-action|55|71|55|71|76726a13a086d82dab219df12e86db1773a9de32|1678147200000|1688511600000|1693695600000|lib/koenig-editor/addon/components/koenig-card-embed.hbs
add|ember-template-lint|no-action|56|85|56|85|bb78ad59bc384ea0de5e9459da9d85f1735ce141|1678147200000|1688511600000|1693695600000|lib/koenig-editor/addon/components/koenig-card-embed.hbs
add|ember-template-lint|no-action|57|38|57|38|3ad187464ff78253a0ea4dd17dcfcf0423f66864|1678147200000|1688511600000|1693695600000|lib/koenig-editor/addon/components/koenig-card-embed.hbs
remove|ember-template-lint|require-iframe-title|6|4|6|4|62bc251294f2cbea568fcc8d8e46bb5fe1915bc9|1675296000000|1685660400000|1690844400000|app/components/gh-html-iframe.hbs
remove|ember-template-lint|require-iframe-title|7|4|7|4|62bc251294f2cbea568fcc8d8e46bb5fe1915bc9|1675296000000|1685660400000|1690844400000|app/components/gh-html-iframe.hbs

3
ghost/admin/app/components/announcement-settings/visibility.hbs
View file

@ -25,7 +25,7 @@
{{#if this.isMembersEnabled}}
{{#if this.isPaidAvailable}}
<label class="checkbox" for="free">
<label class="checkbox" for="free" data-testid="announcement-bar-free-member-label">
<input
type="checkbox"
id="free"
@ -33,6 +33,7 @@
class="gh-input"
value={{this.visibilityOptions.freeMembers}}
checked={{this.isFreeMembersChecked}}
data-testid="announcement-bar-free-member-input"
{{on "click" this.updateVisibility}}
>
<span class="input-toggle-component"></span>

2
ghost/admin/app/components/announcement-settings/visibility.js
View file

@ -13,7 +13,7 @@ export default class AnnouncementSettingsVisibilityComponent extends Component {
};
get visibilitySettings() {
return this.settings.announcementVisibility;
return this.settings.announcementVisibility || [];
}
get isPaidAvailable() {

4
ghost/admin/app/components/gh-html-iframe.hbs
View file

@ -3,6 +3,6 @@
{{did-update this.replaceIframeContents @html}}
...attributes
>
<iframe class="w-100 h-100" {{did-insert this.registerIframe}} {{on "load" this.didLoad}}></iframe>
<iframe class="w-100 h-100" {{did-insert this.registerIframe}} {{on "load" this.didLoad}}></iframe>
<iframe class="w-100 h-100" title="Site preview" data-testid="iframe-html" {{did-insert this.registerIframe}} {{on "load" this.didLoad}}></iframe>
<iframe class="w-100 h-100" title="Page preview" data-testid="iframe-html" {{did-insert this.registerIframe}} {{on "load" this.didLoad}}></iframe>
</div>

2
ghost/admin/app/templates/settings/announcement-bar/index.hbs
View file

@ -1,6 +1,6 @@
<section class="gh-canvas gh-design" {{on-key "cmd+s" this.saveFromKeyboard}}>
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title">Announcement bar</h2>
<h2 class="gh-canvas-title" data-testid="announcement-bar-title">Announcement bar</h2>
<section class="view-actions">
{{#if (gt this.themeManagement.availablePreviewTypes.length 1)}}
<div class="gh-select gh-preview-page-selector">

61
ghost/core/test/e2e-browser/admin/announcement-bar-settings.spec.js Normal file
View file

@ -0,0 +1,61 @@
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');
}