buzz/desktop/tests/e2e/empty-edit-delete.spec.ts

import { expect, test } from "@playwright/test";

import { installMockBridge } from "../helpers/bridge";
import { openGeneral, pressRowAction } from "../helpers/channelHeadReady";
import { clearComposer, replaceComposerText } from "../helpers/composer";

// A message the mock identity authors in #general. Editing/deleting one's own
// message is exactly Sam's workflow: "delete a message by clearing its edit."
// It is emitted per test rather than reusing the seeded `mock-general-welcome`:
// edits and deletions only overlay a target with a real 64-hex event id, so
// that seed keeps its edit only until the post-subscribe window refetch.
const ORIGINAL_CONTENT = "Ship notes for #general";
const RENDERED_ORIGINAL_CONTENT = "Ship notes for general";
let OWN_MESSAGE_ID: string;

// Open the more-actions menu for a message row and wait for the menu to mount.
async function openMoreActionsMenu(
  page: import("@playwright/test").Page,
  messageId: string,
) {
  await pressRowAction(page.getByTestId(`more-actions-${messageId}`));
  await expect(page.locator('[role="menuitem"]').first()).toBeVisible({
    timeout: 5_000,
  });
}

// Enter edit mode for a message, clear it to empty, and submit — the gesture
// that triggers the empty-edit delete confirmation.
async function submitEmptyEdit(
  page: import("@playwright/test").Page,
  messageId: string,
) {
  await openMoreActionsMenu(page, messageId);
  await page.getByTestId(`edit-message-${messageId}`).click();
  await expect(page.getByTestId("edit-target")).toBeVisible({ timeout: 5_000 });
  // Edit mode sets the editor content via Tiptap's async transaction pipeline;
  // wait for it to populate before we clear it.
  const input = page.getByTestId("message-input");
  await expect(input).not.toBeEmpty({ timeout: 5_000 });
  await clearComposer(input);
  await page.keyboard.press("Enter");
}

test.beforeEach(async ({ page }) => {
  await installMockBridge(page);
  await page.goto("/");
  await openGeneral(page);
  await expect(page.getByTestId("chat-title")).toHaveText("general");
  await expect
    .poll(() =>
      page.evaluate(
        () =>
          (
            window as Window & {
              __BUZZ_E2E_HAS_MOCK_LIVE_SUBSCRIPTION__?: (input: {
                channelName: string;
                kind: number;
                exactChannel: boolean;
              }) => boolean;
            }
          ).__BUZZ_E2E_HAS_MOCK_LIVE_SUBSCRIPTION__?.({
            channelName: "general",
            kind: 9,
            exactChannel: true,
          }) ?? false,
      ),
    )
    .toBe(true);
  const emitted = await page.evaluate(
    (content) =>
      (
        window as Window & {
          __BUZZ_E2E_EMIT_MOCK_MESSAGE__?: (input: {
            channelName: string;
            content: string;
          }) => { id: string } | undefined;
        }
      ).__BUZZ_E2E_EMIT_MOCK_MESSAGE__?.({ channelName: "general", content }),
    ORIGINAL_CONTENT,
  );
  if (!emitted?.id) throw new Error("mock message emit did not return an id");
  OWN_MESSAGE_ID = emitted.id;
});

test("clearing an edit to empty prompts to delete, then deletes on confirm", async ({
  page,
}) => {
  const row = page.locator(`[data-message-id="${OWN_MESSAGE_ID}"]`);
  await expect(row).toBeVisible({ timeout: 10_000 });

  await submitEmptyEdit(page, OWN_MESSAGE_ID);

  // The same "Delete message?" confirmation the Delete menu action shows — an
  // empty edit is routed through it, not silently deleted.
  const dialog = page.getByRole("alertdialog");
  await expect(dialog).toBeVisible({ timeout: 10_000 });
  await expect(dialog).toContainText("Delete message?");
  // Edit mode stays active while the dialog is open — it exits only on confirm.
  await expect(page.getByTestId("edit-target")).toBeVisible();

  // Confirm → the message row is removed and edit mode has exited.
  await dialog.getByRole("button", { name: "Delete" }).click();
  await expect(dialog).toBeHidden({ timeout: 5_000 });
  await expect(page.getByTestId("edit-target")).toBeHidden();
  await expect(row).toBeHidden({ timeout: 5_000 });
});

test("cancelling the empty-edit delete keeps the message", async ({ page }) => {
  const row = page.locator(`[data-message-id="${OWN_MESSAGE_ID}"]`);
  await expect(row).toBeVisible({ timeout: 10_000 });

  await submitEmptyEdit(page, OWN_MESSAGE_ID);

  const dialog = page.getByRole("alertdialog");
  await expect(dialog).toBeVisible({ timeout: 10_000 });

  // Cancel → nothing is deleted, the original message survives, and the user is
  // left in edit mode (the editing session is preserved, not discarded).
  await dialog.getByRole("button", { name: "Cancel" }).click();
  await expect(dialog).toBeHidden({ timeout: 5_000 });
  await expect(page.getByTestId("edit-target")).toBeVisible();
  await expect(row).toBeVisible();
  await expect(page.getByTestId("message-timeline")).toContainText(
    RENDERED_ORIGINAL_CONTENT,
  );
  await expect(row.getByLabel("Open channel general")).toBeVisible();
});

test("a non-empty edit still edits and never deletes", async ({ page }) => {
  const row = page.locator(`[data-message-id="${OWN_MESSAGE_ID}"]`);
  await expect(row).toBeVisible({ timeout: 10_000 });

  await openMoreActionsMenu(page, OWN_MESSAGE_ID);
  await page.getByTestId(`edit-message-${OWN_MESSAGE_ID}`).click();
  await expect(page.getByTestId("edit-target")).toBeVisible({ timeout: 5_000 });
  const input = page.getByTestId("message-input");
  await expect(input).not.toBeEmpty({ timeout: 5_000 });
  const editedContent = `Edited, not deleted ${Date.now()}`;

  await replaceComposerText(input, editedContent);
  await page.keyboard.press("Enter");

  // No delete confirmation, edit mode exits, the row survives with new text.
  await expect(page.getByRole("alertdialog")).toHaveCount(0);
  await expect(page.getByTestId("edit-target")).toBeHidden({ timeout: 10_000 });
  await expect(row).toBeVisible();
  await expect(page.getByTestId("message-timeline")).toContainText(
    editedContent,
  );
  await expect(page.getByTestId("message-timeline")).not.toContainText(
    RENDERED_ORIGINAL_CONTENT,
  );
});

// Clearing a draft must close its autocomplete at once. An Enter inside the
// 120 ms debounce used to pick the stale suggestion instead of submitting, so
// the delete prompt never appeared. The draft's trailing `#general` opens the
// channel list on its own; the other triggers are typed after it.
for (const { trigger, typed, popover } of [
  { trigger: "#channel", typed: "", popover: "channel-autocomplete" },
  { trigger: "@mention", typed: " @al", popover: "mention-autocomplete" },
  { trigger: ":emoji", typed: " :smi", popover: "emoji-autocomplete" },
]) {
  test(`an empty edit submits while the ${trigger} autocomplete is open`, async ({
    page,
  }) => {
    const row = page.locator(`[data-message-id="${OWN_MESSAGE_ID}"]`);
    await expect(row).toBeVisible({ timeout: 10_000 });
    await openMoreActionsMenu(page, OWN_MESSAGE_ID);
    await page.getByTestId(`edit-message-${OWN_MESSAGE_ID}`).click();
    await expect(page.getByTestId("edit-target")).toBeVisible({
      timeout: 5_000,
    });
    // The channel list opens only once the caret has landed after `#general`.
    await expect(page.getByTestId("channel-autocomplete")).toBeVisible({
      timeout: 5_000,
    });
    await page.keyboard.type(typed);
    await expect(page.getByTestId(popover)).toBeVisible({ timeout: 5_000 });

    // Clear and submit back-to-back, well inside the debounce.
    await page.keyboard.press("ControlOrMeta+A");
    await page.keyboard.press("Backspace");
    await page.keyboard.press("Enter");

    await expect(page.getByRole("alertdialog")).toContainText(
      "Delete message?",
      { timeout: 5_000 },
    );
    await expect(page.getByTestId("message-input")).toBeEmpty();
  });
}