a596b3aaca
ref https://www.notion.so/AdminX-testing-plan-99b2dab27e794fc893767ccd01c84a63?d=26612fc2b9d84e65bbb269fa3bc5079e&pvs=4#f0089cd4d9f24e93bd7f8e2868987bf6 This pull request renames the end-to-end tests to acceptance tests in the `apps/admin-x-settings` folder. It updates the `ci.yml` file, the `package.json` file, the `playwright.config.ts` file, and the test files to reflect the new naming convention. This change aims to better reflect the purpose and scope of the tests.
166 lines
6.1 KiB
TypeScript
166 lines
6.1 KiB
TypeScript
import {expect, test} from '@playwright/test';
|
|
import {globalDataRequests, mockApi, mockSitePreview, responseFixtures} from '../../utils/acceptance';
|
|
|
|
test.describe('Announcement Bar', async () => {
|
|
test('Working with the announcement bar preview', async ({page}) => {
|
|
await mockApi({page, requests: {
|
|
...globalDataRequests,
|
|
browseLatestPost: {method: 'GET', path: /^\/posts\/.+limit=1/, response: responseFixtures.latestPost}
|
|
}});
|
|
await mockSitePreview({
|
|
page,
|
|
url: responseFixtures.site.site.url,
|
|
response: '<html><head><style></style></head><body><div>homepage preview</div></body></html>'
|
|
});
|
|
await mockSitePreview({
|
|
page,
|
|
url: responseFixtures.latestPost.posts[0].url,
|
|
response: '<html><head><style></style></head><body><div>post preview</div></body></html>'
|
|
});
|
|
|
|
await page.goto('/');
|
|
|
|
const section = page.getByTestId('announcement-bar');
|
|
|
|
await section.getByRole('button', {name: 'Customize'}).click();
|
|
|
|
await page.waitForSelector('[data-testid="announcement-bar-preview-iframe"]');
|
|
|
|
const checkTextInIframes = async (iframesHandles, textToSearch) => {
|
|
let textExists = false;
|
|
for (const iframeHandle of iframesHandles) {
|
|
const frame = await iframeHandle.contentFrame();
|
|
const textFound = await frame?.$eval('body', (body, text) => {
|
|
return body.innerText.includes(text);
|
|
}, textToSearch);
|
|
if (textFound) {
|
|
textExists = true;
|
|
break;
|
|
}
|
|
}
|
|
return textExists;
|
|
};
|
|
|
|
const iframesHandleHome = await page.$$('[data-testid="announcement-bar-preview-iframe"] > iframe');
|
|
const textExistsInHomeIframes = await checkTextInIframes(iframesHandleHome, 'homepage preview');
|
|
expect(textExistsInHomeIframes).toBeTruthy();
|
|
|
|
const modal = page.getByTestId('announcement-bar-modal');
|
|
await modal.getByTestId('design-toolbar').getByRole('tab', {name: 'Post'}).click();
|
|
|
|
await page.waitForSelector('[data-testid="announcement-bar-preview-iframe"]');
|
|
|
|
const iframesHandlePost = await page.$$('[data-testid="announcement-bar-preview-iframe"] > iframe');
|
|
const textExistsInPostIframes = await checkTextInIframes(iframesHandlePost, 'post preview');
|
|
expect(textExistsInPostIframes).toBeTruthy();
|
|
});
|
|
|
|
// TODO - lexical isn't loading in the preview
|
|
// test('Editing announcement bar text content', async ({page}) => {
|
|
// await mockApi({page, requests: {
|
|
// ...globalDataRequests,
|
|
// editSettings: {method: 'PUT', path: '/settings/', response: responseFixtures.settings}
|
|
// }});
|
|
|
|
// await mockSitePreview({
|
|
// page,
|
|
// url: responseFixtures.site.site.url,
|
|
// response: '<html><head><style></style></head><body><div>homepage preview</div></body></html>'
|
|
// });
|
|
|
|
// await page.goto('/');
|
|
|
|
// const section = page.getByTestId('announcement-bar');
|
|
|
|
// await section.getByRole('button', {name: 'Customize'}).click();
|
|
|
|
// const modal = page.getByTestId('announcement-bar-modal');
|
|
|
|
// await expect(modal.frameLocator('[data-testid="announcement-bar-preview"]').getByText('homepage preview')).toHaveCount(1);
|
|
// });
|
|
|
|
test('Can toggle colours', async ({page}) => {
|
|
const {lastApiRequests} = await mockApi({page, requests: {
|
|
...globalDataRequests,
|
|
editSettings: {method: 'PUT', path: '/settings/', response: responseFixtures.settings}
|
|
}});
|
|
|
|
// find label background color
|
|
|
|
await page.goto('/');
|
|
|
|
const section = page.getByTestId('announcement-bar');
|
|
|
|
await section.getByRole('button', {name: 'Customize'}).click();
|
|
|
|
const labelElement = page.locator('label:text("Background color")');
|
|
|
|
await expect(labelElement).toHaveCount(1);
|
|
|
|
const modal = page.getByTestId('announcement-bar-modal');
|
|
|
|
// Check the titles of the buttons.
|
|
// Get the parent div of the label
|
|
const parentDiv = labelElement.locator('..');
|
|
|
|
// Then get the div that follows the label within the parent div
|
|
const buttonContainer = parentDiv.locator('div');
|
|
|
|
const darkButton = buttonContainer.locator('button[title="Dark"]');
|
|
const lightButton = buttonContainer.locator('button[title="Light"]');
|
|
const accentButton = buttonContainer.locator('button[title="Accent"]');
|
|
|
|
await expect(darkButton).toHaveCount(1);
|
|
await expect(lightButton).toHaveCount(1);
|
|
await expect(accentButton).toHaveCount(1);
|
|
|
|
await lightButton?.click();
|
|
|
|
await modal.getByRole('button', {name: 'Save'}).click();
|
|
|
|
expect(lastApiRequests.editSettings?.body).toEqual({
|
|
settings: [
|
|
{key: 'announcement_background', value: 'light'}
|
|
]
|
|
});
|
|
});
|
|
|
|
test('Can toggle visibility', async ({page}) => {
|
|
const {lastApiRequests} = await mockApi({page, requests: {
|
|
...globalDataRequests,
|
|
editSettings: {method: 'PUT', path: '/settings/', response: responseFixtures.settings}
|
|
}});
|
|
|
|
// find label background color
|
|
|
|
await page.goto('/');
|
|
|
|
const section = page.getByTestId('announcement-bar');
|
|
|
|
await section.getByRole('button', {name: 'Customize'}).click();
|
|
|
|
const labelElement = page.locator('h6:text("Visibility")');
|
|
|
|
await expect(labelElement).toHaveCount(1);
|
|
|
|
const modal = page.getByTestId('announcement-bar-modal');
|
|
|
|
// get checkbox input with value of free_members
|
|
|
|
const checkbox = await page.$('input[value="free_members"]');
|
|
|
|
expect(checkbox).not.toBeNull();
|
|
|
|
await checkbox?.check();
|
|
|
|
await modal.getByRole('button', {name: 'Save'}).click();
|
|
|
|
// Note - the value is a stringified array
|
|
expect(lastApiRequests.editSettings?.body).toEqual({
|
|
settings: [
|
|
{key: 'announcement_visibility', value: '["free_members"]'}
|
|
]
|
|
});
|
|
});
|
|
});
|