test: add e2e tests for managing delete modal interactions (#1169)

- Implement tests to ensure the delete modal can be closed with both 'Cancel' and 'Close' buttons.
- Add test to verify deletion of a published article through the delete modal.
- Introduce utility functions `openPublishedTab` and `openDeleteModal` to streamline modal interactions in tests.

e2e/my-posts.spec.ts

@@ -1,6 +1,27 @@
+import type { Page } from "@playwright/test";
 import test, { expect } from "@playwright/test";
 import { articleExcerpt, loggedInAsUserOne } from "./utils";
 
+async function openPublishedTab(page: Page) {
+  await page.goto("http://localhost:3000/my-posts");
+  await page.getByRole("link", { name: "Published" }).click();
+  await expect(page).toHaveURL(/\/my-posts\?tab=published$/);
+}
+
+async function openDeleteModal(page: Page) {
+  await page.getByRole("button", { name: "Options" }).click();
+  const optionsDiv = page.locator(
+    "div[aria-labelledby='headlessui-menu-button-:r5:']",
+  );
+  await expect(optionsDiv).toBeVisible();
+  const deleteButton = optionsDiv.locator("text=Delete");
+  await deleteButton.click();
+  const confirmationDiv = page.getByText(
+    "Are you sure you want to delete this article?",
+  );
+  await expect(confirmationDiv).toBeVisible();
+}
+
 test.describe("Unauthenticated my-posts Page", () => {
   test("Unauthenticated users should be redirected to get-started page if they access my-posts directly", async ({
     page,
@@ -53,4 +74,45 @@ test.describe("Authenticated my-posts Page", () => {
     ).toBeVisible();
     await expect(page.getByText(articleExcerpt, { exact: true })).toBeVisible();
   });
+
+  test("User should close delete modal with Cancel button", async ({
+    page,
+  }) => {
+    await page.goto("http://localhost:3000/my-posts");
+    await openPublishedTab(page);
+    await openDeleteModal(page);
+
+    const closeButton = page.getByRole("button", { name: "Cancel" });
+    await closeButton.click();
+
+    await expect(
+      page.locator("text=Are you sure you want to delete this article?"),
+    ).toBeHidden();
+  });
+
+  test("User should close delete modal with Close button", async ({ page }) => {
+    await page.goto("http://localhost:3000/my-posts");
+    await openPublishedTab(page);
+    await openDeleteModal(page);
+
+    const closeButton = page.getByRole("button", { name: "Close" });
+    await closeButton.click();
+
+    await expect(
+      page.locator("text=Are you sure you want to delete this article?"),
+    ).toBeHidden();
+  });
+
+  test("User should delete published article", async ({ page }) => {
+    await page.goto("http://localhost:3000/my-posts");
+    await openPublishedTab(page);
+    await openDeleteModal(page);
+
+    const closeButton = page.getByRole("button", { name: "Delete" });
+    await closeButton.click();
+
+    await expect(
+      page.getByRole("link", { name: "/articles/e2e-test-slug-published" }),
+    ).toHaveCount(0);
+  });
 });