F-r-ldraledigplannerare/frontend/e2e/tests/drag-create-delete.spec.ts

/**
 * The two authoring gestures the calendar rework is actually about:
 * dragging a range to create planned days, and deleting them again through
 * the period popover. Neither was covered end-to-end before — the existing
 * specs only check rendering (bands, red days, age-4 figures) of state the
 * API seeded directly.
 *
 * A drag opens the day popover pre-selected on every dragged date, same as
 * before. What that popover does on save changed (todo.md #10/#11): by
 * default it now creates a fixed, one-off `LeaveWish` and lets the planner
 * fund it (a `calendar-band-wish:` band, not `adhoc:`) — see
 * `Calendar.tsx`'s `handleSaveWish`. The old "write exact ad-hoc
 * `planned_leave_day` rows" behaviour still exists, behind the modal's
 * "Advanced" disclosure (`handleSavePinnedDay`) — the first test below
 * opens it explicitly to keep exercising that path.
 *
 * The drag deliberately crosses a month boundary (the last two days of one
 * month into the first day of the next) — a regression guard for the
 * leading/trailing-week gating bug, where `CalendarWeek.tsx` used to wire
 * pointer handlers only for cells matching `weekDates[0]`'s month, so a
 * trailing day belonging to the next month was inert and a drag could never
 * reach it.
 *
 * Uses a brand-new, empty account (see `support/onboarding.ts`) rather than
 * the shared demo workspace, so the calendar starts with nothing on it.
 *
 * The target month is derived from "today" (never a hardcoded year).
 */
import { test, expect } from '@playwright/test'
import { goToCalendarMonth, calendarDayCell, dragSelectDates } from '../support/calendarNav'
import { toIsoDate, addDays } from '../support/dates'
import { uniqueEmail, registerAndReachOnboarding, fillChildStep, continueSoloAndSkipBalances } from '../support/onboarding'

test.use({ storageState: { cookies: [], origins: [] } })

/**
 * A month, at least two months out from today, whose last day is NOT a
 * Sunday — i.e. the grid actually renders a trailing-week row bleeding into
 * the following month (a month that ends on Sunday has no trailing row at
 * all after the "no phantom week" fix; see `Calendar.tsx`'s week-building
 * loop). Returns that month plus the last two of its days and the first day
 * of the next month — the exact range the drag below crosses.
 */
function targetRange(): { month: Date; dates: [string, string, string] } {
  const now = new Date()
  let month = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth() + 2, 1))
  let lastDayOfMonth = new Date(Date.UTC(month.getUTCFullYear(), month.getUTCMonth() + 1, 0))
  while (lastDayOfMonth.getUTCDay() === 0 /* Sunday */) {
    month = new Date(Date.UTC(month.getUTCFullYear(), month.getUTCMonth() + 1, 1))
    lastDayOfMonth = new Date(Date.UTC(month.getUTCFullYear(), month.getUTCMonth() + 1, 0))
  }
  const dates = [addDays(lastDayOfMonth, -1), lastDayOfMonth, addDays(lastDayOfMonth, 1)].map(toIsoDate) as [
    string,
    string,
    string,
  ]
  return { month, dates }
}

test('dragging a range and pinning it through Advanced plans every day exactly, and deleting it removes the days for good', async ({
  page,
}) => {
  await registerAndReachOnboarding(page, uniqueEmail('drag-delete'), 'Robin Testsson')
  await fillChildStep(page, 'Nova')
  await continueSoloAndSkipBalances(page)

  const { month, dates } = targetRange()
  const [firstDate, , lastDate] = dates

  await goToCalendarMonth(page, month)

  const adhocBand = page.locator('[data-testid^="calendar-band-adhoc:"]')
  await expect(adhocBand).toHaveCount(0) // a brand-new account — nothing here yet

  // The drag spans the month's last two days plus the first day of the
  // following month, rendered as a trailing cell in this same grid.
  await dragSelectDates(page, dates)

  // A multi-day drag opens the day popover pre-selected on every dragged
  // date — it does not create a period/wish by itself.
  await expect(page.getByTestId('modal-title')).toHaveText('Planera 3 dagar')
  // The default save path would create a fixed wish instead (see the next
  // test) — opening "Advanced" keeps this test on the exact-pinned-days
  // path todo.md #10/#11 kept as an escape hatch.
  await page.getByTestId('advanced-toggle').click()
  await page.getByTestId('save-button').click()
  await expect(page.getByTestId('planned-day-modal__content')).not.toBeVisible()

  // All three dragged days are one continuous ad-hoc PERIOD, but the grid
  // renders a multi-week band as one DOM element per week ROW it crosses
  // (see CalendarWeek.tsx's `computeBandSegments` and
  // calendar-band.spec.ts) — here Nov 29 (a Sunday, the last column of its
  // week) and Nov 30 (a Monday, the first column of the next) fall in
  // different rows even though they're one calendar day apart. Both
  // elements share the same `data-testid` (derived from the band's key +
  // overall start date), which IS the "one period" assertion: a real
  // second period would get its own id.
  await expect(adhocBand.first()).toBeVisible()
  await expect
    .poll(async () => {
      const testIds = await adhocBand.evaluateAll((els) => els.map((el) => el.getAttribute('data-testid')))
      return new Set(testIds).size
    })
    .toBe(1)

  // Open it through its band — an ad-hoc band (no wishId) shows the plain
  // date range and can only be deleted, not edited. `.first()` because the
  // band may render as more than one DOM segment (see above); either one
  // opens the same underlying period.
  await adhocBand.first().click()
  await expect(page.getByTestId('period-popover__content')).toBeVisible()
  await expect(page.getByTestId('period-adhoc-notice')).toBeVisible()
  await expect(page.getByTestId('period-popover__content')).toContainText(`${firstDate} – ${lastDate}`)

  // todo.md #9 — an ad-hoc band has no recurring plan, so "every year" is
  // disabled; "this day"/"this period" are the only meaningful choices, and
  // "this period" removes the whole ad-hoc range (today's only behaviour).
  await expect(page.getByTestId('period-delete-all-years-button')).toBeDisabled()
  await page.getByTestId('period-delete-year-button').click()
  await expect(page.getByTestId('period-delete-confirm')).toBeVisible()

  // Regression guard for the "Yes, delete" footer bug: the confirm button's
  // label is long enough to wrap without `white-space: nowrap` on `.btn`
  // (src/styles/primitives.css), which used to make it visibly taller than
  // "Cancel" sitting next to it. Assert both the CSS guard and the rendered
  // heights actually matching.
  const cancelButton = page.getByTestId('period-delete-cancel-button')
  const confirmButton = page.getByTestId('period-delete-confirm-button')
  await expect(cancelButton).toHaveCSS('white-space', 'nowrap')
  await expect(confirmButton).toHaveCSS('white-space', 'nowrap')
  const [cancelBox, confirmBox] = await Promise.all([cancelButton.boundingBox(), confirmButton.boundingBox()])
  expect(cancelBox).not.toBeNull()
  expect(confirmBox).not.toBeNull()
  expect(confirmBox?.height).toBe(cancelBox?.height)

  await page.getByTestId('period-delete-confirm-button').click()
  await expect(page.getByTestId('period-popover__overlay')).not.toBeVisible()

  // The regression this guards ("Remove a period's days along with the
  // period"): the underlying planned days must actually be gone
  // server-side, not merely dropped from client state. A reload refetches
  // from the API, so this is the assertion a surviving-days bug would fail.
  await page.reload()
  await goToCalendarMonth(page, month)
  await expect(page.locator('[data-testid^="calendar-band-adhoc:"]')).toHaveCount(0)

  // And the day itself is empty again — clicking it opens the "plan a new
  // day" modal, not an edit of a day that supposedly no longer exists.
  await calendarDayCell(page, dates[1]).click()
  await expect(page.getByTestId('modal-title')).toHaveText('Planera en dag')
})

test('a drag saved without opening Advanced creates a planner-funded wish, and the three-way remove deletes it', async ({
  page,
}) => {
  // todo.md #10/#11 — the default path no longer writes pinned days
  // directly: it creates a fixed, one-off `LeaveWish` and lets the sync
  // fund it, so the resulting band is wish-linked (`calendar-band-wish:`),
  // not `adhoc:`.
  await registerAndReachOnboarding(page, uniqueEmail('drag-wish'), 'Robin Testsson')
  await fillChildStep(page, 'Nova')
  await continueSoloAndSkipBalances(page)

  const { month, dates } = targetRange()

  await goToCalendarMonth(page, month)

  const wishBand = page.locator('[data-testid^="calendar-band-wish:"]')
  await expect(wishBand).toHaveCount(0)

  await dragSelectDates(page, dates)
  await expect(page.getByTestId('modal-title')).toHaveText('Planera 3 dagar')
  // A solo account has no parent-mode selector to touch — save directly.
  await page.getByTestId('save-button').click()
  await expect(page.getByTestId('planned-day-modal__content')).not.toBeVisible()

  await expect(wishBand.first()).toBeVisible()

  // Open the wish-linked band. Its own three-way remove: "this day" cannot
  // be expressed for a wish (it would just reappear on the next sync) and
  // is disabled; "this period" on a `recurrence: 'once'` wish (there is
  // only one occurrence) removes the whole thing, same as "every year".
  await wishBand.first().click()
  await expect(page.getByTestId('period-popover__content')).toBeVisible()
  await expect(page.getByTestId('period-delete-day-button')).toBeDisabled()

  await page.getByTestId('period-delete-year-button').click()
  await expect(page.getByTestId('period-delete-confirm')).toBeVisible()
  await page.getByTestId('period-delete-confirm-button').click()
  await expect(page.getByTestId('period-popover__overlay')).not.toBeVisible()

  await page.reload()
  await goToCalendarMonth(page, month)
  await expect(page.locator('[data-testid^="calendar-band-wish:"]')).toHaveCount(0)
})