Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

test(e2e): close notification boxes after confirming they exist #19947

Merged
merged 9 commits into from
Mar 29, 2024
Merged

test(e2e): close notification boxes after confirming they exist #19947

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1d43cfb
test: close saved notification box after confirming
innerdvations Mar 28, 2024
b7de88b
test: add utility for closing notification
innerdvations Mar 29, 2024
a6e8bb4
chore: line break
innerdvations Mar 29, 2024
a93d3bb
chore: prettier
innerdvations Mar 29, 2024
1796160
Merge branch 'v5/main' into test/e2e-close-saved-popups-v5
innerdvations Mar 29, 2024
600c174
test: fix more broken tests
innerdvations Mar 29, 2024
7a22562
test: fix more failing popups
innerdvations Mar 29, 2024
459e1ba
Merge branch 'test/e2e-close-saved-popups-v5' of https://github.com/s…
innerdvations Mar 29, 2024
8314a20
test: import
innerdvations Mar 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 4 additions & 3 deletions e2e/tests/content-manager/cloning.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { test, expect } from '@playwright/test';
import { expect, test } from '@playwright/test';
import { resetDatabaseAndImportDataFromPath } from '../../scripts/dts-import';
import { login } from '../../utils/login';
import { findAndClose } from '../../utils/shared';

test.describe('Cloning', () => {
test.beforeEach(async ({ page }) => {
Expand Down Expand Up @@ -32,7 +33,7 @@ test.describe('Cloning', () => {
await expect(page.getByRole('button', { name: 'Row actions' }).first()).toBeEnabled();
await page.getByRole('button', { name: 'Row actions' }).first().click();
await page.getByRole('menuitem', { name: 'Duplicate' }).click();
await expect(page.getByText('Success:Cloned document')).toBeVisible();
await findAndClose(page, 'Success:Cloned document');

/**
* Now we should be in our edit view with the new document already saved.
Expand Down Expand Up @@ -99,7 +100,7 @@ test.describe('Cloning', () => {
await page.getByRole('textbox', { name: 'slug' }).fill('');
await page.getByRole('textbox', { name: 'slug' }).fill('hammers-post-match-analysis');
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.getByText('Success:Cloned document')).toBeVisible();
await findAndClose(page, 'Success:Cloned document');
await page.waitForURL(EDIT_URL);

/**
Expand Down
50 changes: 31 additions & 19 deletions e2e/tests/content-manager/editview.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { test, expect } from '@playwright/test';
import { login } from '../../utils/login';
import { resetDatabaseAndImportDataFromPath } from '../../scripts/dts-import';
import { findAndClose } from '../../utils/shared';

test.describe('Edit View', () => {
test.beforeEach(async ({ page }) => {
Expand Down Expand Up @@ -60,7 +61,9 @@ test.describe('Edit View', () => {
await expect(page.getByRole('button', { name: 'More document actions' })).toBeDisabled();
await page.getByRole('textbox', { name: 'title' }).fill('Being from Kansas City');
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.getByText('Saved')).toBeVisible();

await findAndClose(page, 'Saved');

// the title should update post save because it's the `mainField` of the content-type
await expect(page.getByRole('heading', { name: 'Being from Kansas City' })).toBeVisible();
await expect(page.getByRole('heading', { name: 'Create an entry' })).not.toBeVisible();
Expand Down Expand Up @@ -100,7 +103,7 @@ test.describe('Edit View', () => {
* available.
*/
await page.getByRole('button', { name: 'Publish' }).click();
await expect(page.getByText('Success:Published')).toBeVisible();
await findAndClose(page, 'Success:Published');
await expect(page.getByRole('tab', { name: 'Draft' })).toHaveAttribute(
'aria-selected',
'true'
Expand Down Expand Up @@ -141,14 +144,16 @@ test.describe('Edit View', () => {
await expect(page.getByRole('button', { name: 'Save' })).not.toBeDisabled();
await expect(page.getByRole('button', { name: 'Publish' })).not.toBeDisabled();
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.getByText('Saved')).toBeVisible();

await findAndClose(page, 'Saved');

await page.getByRole('button', { name: 'More document actions' }).click();
await expect(page.getByRole('menuitem', { name: 'Unpublish' })).not.toBeDisabled();
await expect(page.getByRole('menuitem', { name: 'Discard changes' })).not.toBeDisabled();
await page.getByRole('menuitem', { name: 'Discard changes' }).click();
await expect(page.getByRole('dialog', { name: 'Confirmation' })).toBeVisible();
await page.getByRole('button', { name: 'Confirm' }).click();
await expect(page.getByText('Success:Changes discarded')).toBeVisible();
await findAndClose(page, 'Success:Changes discarded');
await expect(page.getByLabel('title')).toHaveValue('Being an American'); // ensure the form has updated.

/**
Expand All @@ -158,7 +163,7 @@ test.describe('Edit View', () => {
await expect(page.getByRole('menuitem', { name: 'Unpublish' })).not.toBeDisabled();
await expect(page.getByRole('menuitem', { name: 'Discard changes' })).toBeDisabled();
await page.getByRole('menuitem', { name: 'Unpublish' }).click();
await expect(page.getByText('Success:Unpublished')).toBeVisible();
await findAndClose(page, 'Success:Unpublished');
// wait for the all the notifications to clear.
await expect(page.getByText('Success:Unpublished')).not.toBeVisible();
await expect(page.getByRole('button', { name: 'More document actions' })).toBeDisabled();
Expand All @@ -168,11 +173,13 @@ test.describe('Edit View', () => {
* discard draft flow
*/
await page.getByRole('button', { name: 'Publish' }).click();
await expect(page.getByText('Success:Published')).toBeVisible();
await findAndClose(page, 'Success:Published');
await expect(page.getByText('Success:Published')).not.toBeVisible();
await page.getByRole('textbox', { name: 'title' }).fill('Being an American in the UK');
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.getByText('Saved')).toBeVisible();

await findAndClose(page, 'Saved');

await page.getByRole('button', { name: 'More document actions' }).click();
await expect(page.getByRole('menuitem', { name: 'Unpublish' })).not.toBeDisabled();
await expect(page.getByRole('menuitem', { name: 'Discard changes' })).not.toBeDisabled();
Expand All @@ -188,7 +195,7 @@ test.describe('Edit View', () => {
page.getByRole('radio', { name: 'Unpublish and replace last draft' })
).toBeVisible();
await page.getByRole('button', { name: 'Confirm' }).click();
await expect(page.getByText('Success:Unpublished')).toBeVisible();
await findAndClose(page, 'Success:Unpublished');
await expect(page.getByRole('button', { name: 'Publish' })).not.toBeDisabled();
await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled();
await expect(page.getByRole('button', { name: 'More document actions' })).toBeDisabled();
Expand All @@ -204,7 +211,7 @@ test.describe('Edit View', () => {
await page.getByRole('menuitem', { name: 'Delete document' }).click();
await expect(page.getByRole('dialog', { name: 'Confirmation' })).toBeVisible();
await page.getByRole('button', { name: 'Confirm' }).click();
await expect(page.getByText('Success:Deleted')).toBeVisible();
await findAndClose(page, 'Success:Deleted');

/**
* We're back on the list view and we can asser the document was correctly deleted.
Expand Down Expand Up @@ -266,7 +273,9 @@ test.describe('Edit View', () => {
"We're a premier league football club based in South West London with a vicious rivalry with Fulham. Because who doens't hate them?"
);
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.getByText('Saved')).toBeVisible();

await findAndClose(page, 'Saved');

// the title should update post save because it's the `mainField` of the content-type
await expect(page.getByRole('heading', { name: 'Welcome to AFC Richmond' })).toBeVisible();
await expect(page.getByRole('heading', { name: 'Untitled' })).not.toBeVisible();
Expand All @@ -280,7 +289,7 @@ test.describe('Edit View', () => {
* available.
*/
await page.getByRole('button', { name: 'Publish' }).click();
await expect(page.getByText('Success:Published')).toBeVisible();
await findAndClose(page, 'Success:Published');
await expect(page.getByRole('tab', { name: 'Draft' })).toHaveAttribute(
'aria-selected',
'true'
Expand Down Expand Up @@ -321,14 +330,16 @@ test.describe('Edit View', () => {
await expect(page.getByRole('button', { name: 'Save' })).not.toBeDisabled();
await expect(page.getByRole('button', { name: 'Publish' })).not.toBeDisabled();
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.getByText('Saved')).toBeVisible();

await findAndClose(page, 'Saved');

await page.getByRole('button', { name: 'More document actions' }).click();
await expect(page.getByRole('menuitem', { name: 'Unpublish' })).not.toBeDisabled();
await expect(page.getByRole('menuitem', { name: 'Discard changes' })).not.toBeDisabled();
await page.getByRole('menuitem', { name: 'Discard changes' }).click();
await expect(page.getByRole('dialog', { name: 'Confirmation' })).toBeVisible();
await page.getByRole('button', { name: 'Confirm' }).click();
await expect(page.getByText('Success:Changes discarded')).toBeVisible();
await findAndClose(page, 'Success:Changes discarded');
await expect(page.getByLabel('title')).toHaveValue('Welcome to AFC Richmond'); // ensure the form has updated.

/**
Expand All @@ -338,8 +349,7 @@ test.describe('Edit View', () => {
await expect(page.getByRole('menuitem', { name: 'Unpublish' })).not.toBeDisabled();
await expect(page.getByRole('menuitem', { name: 'Discard changes' })).toBeDisabled();
await page.getByRole('menuitem', { name: 'Unpublish' }).click();
await expect(page.getByText('Success:Unpublished')).toBeVisible();
// wait for the all the notifications to clear.
await findAndClose(page, 'Success:Unpublished');
await expect(page.getByText('Success:Unpublished')).not.toBeVisible();
await expect(page.getByRole('button', { name: 'More document actions' })).toBeDisabled();

Expand All @@ -348,11 +358,13 @@ test.describe('Edit View', () => {
* discard draft flow
*/
await page.getByRole('button', { name: 'Publish' }).click();
await expect(page.getByText('Success:Published')).toBeVisible();
await findAndClose(page, 'Success:Published');
await expect(page.getByText('Success:Published')).not.toBeVisible();
await page.getByRole('textbox', { name: 'title' }).fill('Being an American in the UK');
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.getByText('Saved')).toBeVisible();

await findAndClose(page, 'Saved');

await page.getByRole('button', { name: 'More document actions' }).click();
await expect(page.getByRole('menuitem', { name: 'Unpublish' })).not.toBeDisabled();
await expect(page.getByRole('menuitem', { name: 'Discard changes' })).not.toBeDisabled();
Expand All @@ -368,7 +380,7 @@ test.describe('Edit View', () => {
page.getByRole('radio', { name: 'Unpublish and replace last draft' })
).toBeVisible();
await page.getByRole('button', { name: 'Confirm' }).click();
await expect(page.getByText('Success:Unpublished')).toBeVisible();
await findAndClose(page, 'Success:Unpublished');
await expect(page.getByRole('button', { name: 'Publish' })).not.toBeDisabled();
await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled();
await expect(page.getByRole('button', { name: 'More document actions' })).toBeDisabled();
Expand All @@ -384,7 +396,7 @@ test.describe('Edit View', () => {
await page.getByRole('menuitem', { name: 'Delete document' }).click();
await expect(page.getByRole('dialog', { name: 'Confirmation' })).toBeVisible();
await page.getByRole('button', { name: 'Confirm' }).click();
await expect(page.getByText('Success:Deleted')).toBeVisible();
await findAndClose(page, 'Success:Deleted');

/**
* The form should be completely reset.
Expand Down
5 changes: 3 additions & 2 deletions e2e/tests/i18n/editview.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { test, expect } from '@playwright/test';
import { resetDatabaseAndImportDataFromPath } from '../../scripts/dts-import';
import { login } from '../../utils/login';
import { findAndClose } from '../../utils/shared';

test.describe('Edit view', () => {
test.beforeEach(async ({ page }) => {
Expand Down Expand Up @@ -86,7 +87,7 @@ test.describe('Edit view', () => {
* Publish the document
*/
await page.getByRole('button', { name: 'Publish' }).click();
await expect(page.getByText('Success:Published')).toBeVisible();
await findAndClose(page, 'Success:Published');

/**
* Now we'll go back to the list view to ensure the content has been updated
Expand Down Expand Up @@ -205,7 +206,7 @@ test.describe('Edit view', () => {
* Publish the document
*/
await page.getByRole('button', { name: 'Publish' }).click();
await expect(page.getByText('Success:Published')).toBeVisible();
await findAndClose(page, 'Success:Published');

/**
* Now we'll go back to the list view to ensure the content has been updated
Expand Down
9 changes: 5 additions & 4 deletions e2e/tests/i18n/settings.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { test, expect } from '@playwright/test';
import { resetDatabaseAndImportDataFromPath } from '../../scripts/dts-import';
import { login } from '../../utils/login';
import { prunePermissions } from '../../scripts/endpoints';
import { findAndClose } from '../../utils/shared';

test.describe('Settings', () => {
test.beforeEach(async ({ page }) => {
Expand Down Expand Up @@ -42,7 +43,7 @@ test.describe('Settings', () => {
await page.getByRole('option', { name: 'Italian (it)' }).click();
await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled();
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.getByText('Success:Locale successfully added')).toBeVisible();
await findAndClose(page, 'Success:Locale successfully added');

/**
* Next, we'll navigate to our shop single type & add the a localised version of this document.
Expand Down Expand Up @@ -89,7 +90,7 @@ test.describe('Settings', () => {
await page.getByRole('button', { name: 'There is 1 missing component' }).click();
await page.getByRole('button', { name: 'Hero image' }).click();
await page.getByRole('button', { name: 'Publish' }).click();
await expect(page.getByText('Success:Published')).toBeVisible();
await findAndClose(page, 'Success:Published');
});

test('As a user I want to delete an existing locale and have the content deleted as well', async ({
Expand Down Expand Up @@ -124,7 +125,7 @@ test.describe('Settings', () => {

await expect(page.getByRole('dialog', { name: 'Confirmation' })).toBeVisible();
await page.getByRole('button', { name: 'Confirm' }).click();
await expect(page.getByText('Success:Locale successfully deleted')).toBeVisible();
await findAndClose(page, 'Success:Locale successfully deleted');

/**
* Finally, go back to the list view, the english articles should be there,
Expand Down Expand Up @@ -176,7 +177,7 @@ test.describe('Settings', () => {
await page.getByRole('textbox', { name: 'Locale display name' }).fill('');
await page.getByRole('textbox', { name: 'Locale display name' }).fill('UK English');
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.getByText('Success:Locale successfully edited')).toBeVisible();
await findAndClose(page, 'Success:Locale successfully edited');

/**
* Lets go back to the list view and assert that the changes are reflected.
Expand Down
21 changes: 21 additions & 0 deletions e2e/utils/shared.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,24 @@ export const navToHeader = async (page: Page, navItems: string[], headerText: st
await expect(header).toBeVisible();
return header;
};

/**
* Look for an element containing text, and then click a sibling close button
*/
export const findAndClose = async (
page: Page,
text: string,
role: string = 'status',
closeLabel: string = 'Close'
) => {
// Verify the popup text is visible.
await expect(page.locator(`:has-text("${text}")[role="${role}"]`)).toBeVisible();

// Find the 'Close' button that is a sibling of the element containing the specified text.
const closeBtn = await page.locator(
`:has-text("${text}")[role="${role}"] ~ button[aria-label="${closeLabel}"]`
);

// Click the 'Close' button.
await closeBtn.click();
};