gnezim
49a19a7f63
Angular's schedule date-picker is week-granular (TZ §4.1.9.4): one click anywhere selects the whole calendar week, the panel closes and the input shows the resulting range. React was using PrimeReact's plain range-mode (two clicks required), so a single click left the range half-set and the panel open. Add snapToWeek() in ScheduleStartPage and ScheduleFilter, route both outbound + return Calendars through new onSelect handlers that compute Mon-Sun, commit it as the value, and call cal.hide() via ref. Enable selectOtherMonths so bleed-in days from the previous / next month are clickable. Add 3-test e2e spec (week snap from a mid-week day, snap from a next-month bleed-in day, range placeholder when empty).
72 lines
2.7 KiB
TypeScript
72 lines
2.7 KiB
TypeScript
import { test, expect } from "@playwright/test";
|
||
|
||
// Schedule date picker — Angular parity (TZ §4.1.9.4):
|
||
// • Single click on any day commits the **whole Mon-Sun week** that
|
||
// contains it (the schedule list is week-granular).
|
||
// • The panel auto-closes on selection.
|
||
// • The text input shows the snapped range as `DD.MM.YYYY - DD.MM.YYYY`.
|
||
// • Days bleeding into the previous / next month are clickable too
|
||
// (PrimeReact `selectOtherMonths`).
|
||
//
|
||
// Today (per the harness) is 2026-04-23 (Thursday). Mon-Sun of that
|
||
// week is 2026-04-20 .. 2026-04-26. Clicking 29 April (Wednesday of
|
||
// the next calendar week) must yield 2026-04-27 .. 2026-05-03.
|
||
|
||
test.describe("Schedule date-range picker (week-snap)", () => {
|
||
test("single click snaps to Mon-Sun, closes panel, fills input", async ({
|
||
page,
|
||
}) => {
|
||
await page.goto("/ru-ru/schedule");
|
||
await expect(page.getByTestId("date-range-input")).toBeVisible({
|
||
timeout: 15000,
|
||
});
|
||
|
||
// Open the calendar via its trigger button.
|
||
await page.locator("button.p-datepicker-trigger").first().click();
|
||
const panel = page.locator(".p-datepicker-panel, .p-datepicker").first();
|
||
await expect(panel).toBeVisible();
|
||
|
||
// Click 29 April (Wednesday of the 27 Apr–3 May week).
|
||
await panel.locator('td[aria-label="29.04.2026"] span').click();
|
||
|
||
// Panel auto-dismissed.
|
||
await expect(panel).toBeHidden({ timeout: 5000 });
|
||
|
||
// Input now holds the full week range.
|
||
const input = page.locator("#schedule-date-from");
|
||
await expect(input).toHaveValue("27.04.2026 - 03.05.2026");
|
||
});
|
||
|
||
test("clicking a next-month bleed-in day (3 May) snaps to 4-10 May", async ({
|
||
page,
|
||
}) => {
|
||
await page.goto("/ru-ru/schedule");
|
||
await expect(page.getByTestId("date-range-input")).toBeVisible({
|
||
timeout: 15000,
|
||
});
|
||
|
||
await page.locator("button.p-datepicker-trigger").first().click();
|
||
const panel = page.locator(".p-datepicker-panel, .p-datepicker").first();
|
||
await expect(panel).toBeVisible();
|
||
|
||
// 3 May 2026 is Sunday — visible at the bottom of April as a bleed-in
|
||
// day from the next month. Sunday belongs to the 27 Apr–3 May week,
|
||
// so clicking it must snap to that week (not 4-10 May).
|
||
await panel.locator('td[aria-label="03.05.2026"] span').click();
|
||
|
||
await expect(panel).toBeHidden({ timeout: 5000 });
|
||
await expect(page.locator("#schedule-date-from")).toHaveValue(
|
||
"27.04.2026 - 03.05.2026",
|
||
);
|
||
});
|
||
|
||
test("input renders as range placeholder when empty", async ({ page }) => {
|
||
await page.goto("/ru-ru/schedule");
|
||
const input = page.locator("#schedule-date-from");
|
||
await expect(input).toHaveAttribute(
|
||
"placeholder",
|
||
"ДД.ММ.ГГГГ - ДД.ММ.ГГГГ",
|
||
);
|
||
});
|
||
});
|