Files
pleno-vue/tests/ct/date-period-selector.ct.spec.ts
T

62 lines
2.3 KiB
TypeScript

import DatePeriodSelector from "@/components/displays/buttons/DatePeriodSelector.vue";
import { expect, test } from "./fixtures/plenoCt";
const selection = {
startDate: new Date("2026-05-01T00:00:00.000Z"),
endDate: new Date("2026-05-04T23:59:59.999Z"),
};
const mountDatePeriodSelector = async (mount, props = {}) =>
mount(DatePeriodSelector, {
props: {
selection,
allowEmptySelection: true,
visibility: {
showMonthSelector: true,
showYearSelector: true,
showUpdateButton: false,
},
onSelectionChange: () => {},
...props,
},
hooksConfig: {
locale: "en",
},
});
test.describe("DatePeriodSelector component", () => {
test("desktop other month action opens an inline month picker modal", async ({ mount, page }, testInfo) => {
test.skip(testInfo.project.name.includes("mobile"), "Desktop shortcut buttons are replaced by the mobile select.");
await page.clock.setFixedTime(new Date("2026-05-04T10:00:00.000Z"));
const component = await mountDatePeriodSelector(mount);
await expect(component.getByTestId("date-period-shortcut-anytime")).toContainText(/anytime/i);
await component.getByTestId("date-period-other-dropdown-trigger").click();
const otherMonthOption = component.getByTestId("date-period-other-other_month");
await expect(otherMonthOption).toBeVisible();
await expect(otherMonthOption).toContainText(/other month/i);
await otherMonthOption.click();
await expect(component.getByTestId("date-period-other-month-modal")).toBeVisible();
await expect(component.getByTestId("date-period-other-month-picker")).toBeVisible();
});
test("mobile shortcuts keep primary and other actions reachable without route boot", async ({ mount, page }) => {
await page.setViewportSize({ width: 390, height: 844 });
await page.clock.setFixedTime(new Date("2026-05-04T10:00:00.000Z"));
const component = await mountDatePeriodSelector(mount);
const shortcutSelect = component.getByTestId("date-period-shortcuts");
await expect(shortcutSelect.locator("option").filter({ hasText: /anytime/i })).toHaveCount(1);
await component.getByTestId("date-period-other-dropdown-trigger").click();
await expect(component.getByTestId("date-period-other-other_month")).toBeVisible();
});
});