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

strapi · Mar 29, 2024 · 017049d · 017049d
1 parent 94f313a
commit 017049d
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 28 deletions.
diff --git a/e2e/tests/content-manager/cloning.spec.ts b/e2e/tests/content-manager/cloning.spec.ts
@@ -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 }) => {
@@ -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.
@@ -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);
 
     /**

diff --git a/e2e/tests/content-manager/editview.spec.ts b/e2e/tests/content-manager/editview.spec.ts
@@ -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 }) => {
@@ -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();
@@ -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'
@@ -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.
 
       /**
@@ -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();
@@ -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();
@@ -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();
@@ -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.
@@ -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();
@@ -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'
@@ -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.
 
       /**
@@ -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();
 
@@ -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();
@@ -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();
@@ -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.

diff --git a/e2e/tests/i18n/editview.spec.ts b/e2e/tests/i18n/editview.spec.ts
@@ -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 }) => {
@@ -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
@@ -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

diff --git a/e2e/tests/i18n/settings.spec.ts b/e2e/tests/i18n/settings.spec.ts
@@ -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 }) => {
@@ -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.
@@ -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 ({
@@ -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,
@@ -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.

diff --git a/e2e/utils/shared.ts b/e2e/utils/shared.ts
@@ -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();
+};