TX/artifacts/tx-os/tests/executive-meetings-edit-toggle.spec.mjs

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

async function loginViaUi(page, username, password) {
  await page.goto("/login");
  await page.locator("#username").fill(username);
  await page.locator("#password").fill(password);
  await Promise.all([
    page.waitForURL((url) => !url.pathname.endsWith("/login"), {
      timeout: 15_000,
    }),
    page.locator('form button[type="submit"]').click(),
  ]);
}

test("Schedule: Edit toggle hides editing affordances by default and reveals them when on", async ({
  page,
}) => {
  await page.addInitScript(() => {
    try {
      window.localStorage.setItem("tx-lang", "en");
    } catch {
      /* localStorage may not be ready before navigation */
    }
  });

  await loginViaUi(page, "admin", "admin123");
  // Make sure we always start the test in view mode regardless of any
  // previously-persisted toggle state from another run. We clear AFTER
  // login so the cleanup isn't undone by the initScript on every nav.
  await page.goto("/executive-meetings");
  // The toggle's storage key is namespaced per-user
  // (`em-schedule-edit-mode-v1:<userId>`), so we wipe every entry that
  // starts with the base key to make sure we begin in view mode no
  // matter who admin's userId resolves to in this run.
  await page.evaluate(() => {
    try {
      const keys = Object.keys(window.localStorage);
      for (const k of keys) {
        if (k.startsWith("em-schedule-edit-mode-v1")) {
          window.localStorage.removeItem(k);
        }
      }
    } catch {
      /* ignore */
    }
  });
  await page.reload();

  // Toggle is rendered (admin has edit permission), and starts in
  // pressed=false / view mode.
  const toggle = page.getByTestId("em-edit-mode-toggle");
  await expect(toggle).toBeVisible();
  await expect(toggle).toHaveAttribute("aria-pressed", "false");

  // In view mode the row-level "Add meeting" button must be hidden.
  await expect(page.getByTestId("em-add-row-button")).toHaveCount(0);
  // And no row-level overlays (delete, color picker, merge trigger,
  // grip handle) should exist anywhere in the table.
  await expect(page.locator('[data-testid^="em-delete-row-"]')).toHaveCount(0);
  await expect(page.getByTestId("em-row-color-trigger")).toHaveCount(0);
  await expect(page.locator('[data-testid^="em-merge-trigger-"]')).toHaveCount(0);
  await expect(page.locator('[data-testid^="em-row-grip-"]')).toHaveCount(0);

  // Flip toggle on. aria-pressed becomes true and the affordances appear.
  await toggle.click();
  await expect(toggle).toHaveAttribute("aria-pressed", "true");

  // The "+ Add meeting" row button is back.
  await expect(page.getByTestId("em-add-row-button")).toBeVisible();

  // Persist + survive a reload: the toggle should still be on.
  await page.reload();
  const toggleAfterReload = page.getByTestId("em-edit-mode-toggle");
  await expect(toggleAfterReload).toHaveAttribute("aria-pressed", "true");
  await expect(page.getByTestId("em-add-row-button")).toBeVisible();

  // Toggle back off — affordances disappear again.
  await toggleAfterReload.click();
  await expect(toggleAfterReload).toHaveAttribute("aria-pressed", "false");
  await expect(page.getByTestId("em-add-row-button")).toHaveCount(0);
});

test("Schedule: turning edit mode OFF cancels any open inline editor and discards the draft", async ({
  page,
}) => {
  await page.addInitScript(() => {
    try {
      window.localStorage.setItem("tx-lang", "en");
    } catch {
      /* ignore */
    }
  });

  await loginViaUi(page, "admin", "admin123");
  await page.goto("/executive-meetings");
  // Start clean (view mode), then flip edit mode on.
  await page.evaluate(() => {
    try {
      const keys = Object.keys(window.localStorage);
      for (const k of keys) {
        if (k.startsWith("em-schedule-edit-mode-v1")) {
          window.localStorage.removeItem(k);
        }
      }
    } catch {
      /* ignore */
    }
  });
  await page.reload();

  const toggle = page.getByTestId("em-edit-mode-toggle");
  await expect(toggle).toBeVisible();
  await toggle.click();
  await expect(toggle).toHaveAttribute("aria-pressed", "true");

  // Make sure there's at least one row to edit. If the schedule is
  // empty for today, add a row via the now-visible "+ Add meeting"
  // button so the test has a stable target.
  const addRow = page.getByTestId("em-add-row-button");
  await expect(addRow).toBeVisible();
  let titleCells = page.locator('[data-testid^="em-edit-title-"]');
  if ((await titleCells.count()) === 0) {
    await addRow.click();
    await expect(titleCells.first()).toBeVisible({ timeout: 5_000 });
  }

  // Open the first inline title editor and type a draft we expect
  // to be discarded.
  const firstTitle = titleCells.first();
  const originalText = (await firstTitle.innerText()).trim();
  await firstTitle.click();
  // The editor renders a contenteditable inside the cell. Type a
  // unique draft so we can later assert it never landed.
  const draft = "DRAFT-DO-NOT-PERSIST-" + Date.now();
  await page.keyboard.type(draft);

  // Now flip edit mode OFF while the editor is still open. The
  // EditableCell `disabled` effect should exit edit mode and reset
  // the displayed content back to its saved value.
  await toggle.click();
  await expect(toggle).toHaveAttribute("aria-pressed", "false");

  // The displayed cell should NOT contain our draft text — i.e. the
  // open editor was cancelled and the unsaved draft was discarded.
  const afterText = (await firstTitle.innerText()).trim();
  expect(afterText).not.toContain(draft);
  expect(afterText).toBe(originalText);
});

test("Schedule: attendee index prefix renders on the same visual line as the name", async ({
  page,
}) => {
  // Regression guard for the "number stacked above the name" bug
  // (Tasks #173 / #175). Attendee names are saved as tiptap HTML
  // (`<p>name</p>`); without a fix, the block-level <p> pushes the
  // name onto its own visual row beneath the small index span. We
  // assert that for at least one attendee, the index span and the
  // name wrapper share roughly the same vertical center, in BOTH
  // view mode and edit mode.
  await page.addInitScript(() => {
    try {
      window.localStorage.setItem("tx-lang", "en");
    } catch {
      /* ignore */
    }
  });

  await loginViaUi(page, "admin", "admin123");
  await page.goto("/executive-meetings");
  // Reset edit-mode toggle so we start in view mode.
  await page.evaluate(() => {
    try {
      const keys = Object.keys(window.localStorage);
      for (const k of keys) {
        if (k.startsWith("em-schedule-edit-mode-v1")) {
          window.localStorage.removeItem(k);
        }
      }
    } catch {
      /* ignore */
    }
  });
  await page.reload();

  // Find the first attendee LI in the schedule that actually has
  // an index prefix span and a name span. We bind the assertion to
  // the LI's structure (index span + sibling name span) so it
  // stays meaningful even if specific data changes.
  const firstAttendeeLi = page
    .locator(
      'li.inline-flex:has(> span.text-gray-500):has(> span:not(.text-gray-500))',
    )
    .first();

  async function assertInline(li) {
    await expect(li).toBeVisible();
    const indexBox = await li.locator("> span.text-gray-500").boundingBox();
    const nameBox = await li
      .locator("> span:not(.text-gray-500), > div")
      .first()
      .boundingBox();
    expect(indexBox).not.toBeNull();
    expect(nameBox).not.toBeNull();
    const indexCenter = indexBox.y + indexBox.height / 2;
    const nameCenter = nameBox.y + nameBox.height / 2;
    // If the name had wrapped onto a row below the index, the
    // vertical centers would differ by at least one full line
    // height (~18-22px). We allow up to 8px of slack for normal
    // baseline alignment between an inline span and an inline-block.
    expect(Math.abs(indexCenter - nameCenter)).toBeLessThan(8);
  }

  // 1. View mode (toggle off): name renders as a plain <span>
  //    next to the index span.
  await assertInline(firstAttendeeLi);

  // 2. Edit mode (toggle on): name renders inside an EditableCell
  //    inline-block <div>; should still sit beside the index span.
  const toggle = page.getByTestId("em-edit-mode-toggle");
  if (await toggle.isVisible().catch(() => false)) {
    await toggle.click();
    await expect(toggle).toHaveAttribute("aria-pressed", "true");
    // Re-locate after re-render — the matching attendee LI now
    // wraps an EditableCell <div> instead of a plain <span>.
    const firstAttendeeLiEditable = page
      .locator(
        'li.inline-flex:has(> span.text-gray-500):has(> div[data-testid^="em-edit-attendee-"])',
      )
      .first();
    await assertInline(firstAttendeeLiEditable);
  }
});