Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
184 changes: 182 additions & 2 deletions packages/main/cypress/specs/Calendar.cy.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -408,9 +408,19 @@ describe("Calendar general interaction", () => {
.find("[ui5-daypicker]")
.shadow()
.find("[tabindex='0']")
.realClick();
.realClick()
.should("have.focus");

cy.focused().realPress(["Shift", "F4"]);

// Wait for focus to settle before proceeding
cy.get<Calendar>("#calendar1")
.shadow()
.find("[ui5-yearpicker]")
.shadow()
.find("[tabindex='0']")
.should("have.focus");

cy.focused().realPress("PageUp");

cy.get<Calendar>("#calendar1")
Expand All @@ -419,6 +429,14 @@ describe("Calendar general interaction", () => {
expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(1980, 9, 1, 0, 0, 0)));
});

// Wait for focus to settle before proceeding
cy.get<Calendar>("#calendar1")
.shadow()
.find("[ui5-yearpicker]")
.shadow()
.find("[tabindex='0']")
.should("have.focus");

cy.focused().realPress("PageDown");

cy.get<Calendar>("#calendar1")
Expand All @@ -441,6 +459,14 @@ describe("Calendar general interaction", () => {
expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(1998, 9, 16, 0, 0, 0)));
});

// Wait for focus to settle before proceeding
cy.get<Calendar>("#calendar1")
.shadow()
.find("[ui5-yearrangepicker]")
.shadow()
.find("[tabindex='0']")
.should("have.focus");

cy.focused().realPress("PageUp");

cy.get<Calendar>("#calendar1")
Expand All @@ -463,6 +489,14 @@ describe("Calendar general interaction", () => {
expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(1998, 9, 16, 0, 0, 0)));
});

// Wait for focus to settle before proceeding
cy.get<Calendar>("#calendar1")
.shadow()
.find("[ui5-yearrangepicker]")
.shadow()
.find("[tabindex='0']")
.should("have.focus");

cy.focused().realPress("PageDown");

cy.get<Calendar>("#calendar1")
Expand Down Expand Up @@ -503,7 +537,8 @@ describe("Calendar general interaction", () => {
cy.get<Calendar>("#calendar1").invoke("prop", "timestamp", timestamp);

cy.ui5CalendarGetDay("#calendar1", timestamp.toString())
.focus();
.focus()
.should("have.focus");

// Select the focused date
cy.focused().realPress("Space");
Expand Down Expand Up @@ -1254,3 +1289,148 @@ describe("Calendar accessibility", () => {
});
});
});

describe("Day Picker Tests", () => {
it("Select day with Space", () => {
cy.mount(<Calendar id="calendar1"></Calendar>);

cy.get<Calendar>("#calendar1")
.shadow()
.find("[ui5-daypicker]")
.shadow()
.find(".ui5-dp-item--now")
.as("today");

cy.get("@today")
.realClick()
.should("be.focused")
.realPress("ArrowRight")
.realPress("Space");

cy.focused()
.invoke("attr", "data-sap-timestamp")
.then(timestampAttr => {
const timestamp = parseInt(timestampAttr!);
const selectedDate = new Date(timestamp * 1000).getDate();
const expectedDate = new Date(Date.now() + 24 * 3600 * 1000).getDate();
expect(selectedDate).to.eq(expectedDate);
});

cy.get<Calendar>("#calendar1")
.should(($calendar) => {
const selectedDates = $calendar.prop("selectedDates");
expect(selectedDates).to.have.length.greaterThan(0);
});
});

it("Select day with Enter", () => {
const today = new Date();
const tomorrow = Math.floor(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate() + 1, 0, 0, 0, 0) / 1000);

cy.mount(<Calendar id="calendar1"></Calendar>);

cy.get<Calendar>("#calendar1")
.shadow()
.find("[ui5-daypicker]")
.shadow()
.find(".ui5-dp-item--now")
.realClick();

// Wait for focus to settle before proceeding
cy.get<Calendar>("#calendar1")
.shadow()
.find("[ui5-daypicker]")
.shadow()
.find("[tabindex='0']")
.should("have.focus");

cy.get<Calendar>("#calendar1")
.realPress("ArrowRight");

cy.get<Calendar>("#calendar1")
.shadow()
.find("[ui5-daypicker]")
.shadow()
.find(`[data-sap-timestamp='${tomorrow}']`)
.should("have.focus");

cy.get<Calendar>("#calendar1")
.realPress("Enter");

// assert the date after today is selected
cy.get<Calendar>("#calendar1")
.should(($calendar) => {
const selectedDates = $calendar.prop("selectedDates");
expect(selectedDates).to.include(tomorrow);
});
});

it("Day names are correctly displayed", () => {
cy.mount(<Calendar id="calendar1"></Calendar>);

cy.get<Calendar>("#calendar1")
.shadow()
.find("[ui5-daypicker]")
.shadow()
.find(".ui5-dp-firstday")
.first()
.should("have.text", "Sun"); // English default
});

it("Day names container has proper structure", () => {
cy.mount(<Calendar id="calendar1"></Calendar>);

cy.get<Calendar>("#calendar1")
.shadow()
.find("[ui5-daypicker]")
.shadow()
.find(".ui5-dp-days-names-container")
.should("exist")
.find("[role='columnheader']")
.should("have.length", 8);
});

it("Arrow navigation works in day picker", () => {
const date = new Date(Date.UTC(2000, 10, 15, 0, 0, 0));
cy.mount(getDefaultCalendar(date));

const timestamp = new Date(Date.UTC(2000, 10, 15, 0, 0, 0)).valueOf() / 1000;
const nextDayTimestamp = new Date(Date.UTC(2000, 10, 16, 0, 0, 0)).valueOf() / 1000;

cy.ui5CalendarGetDay("#calendar1", timestamp.toString())
.realClick()
.should("have.focus");

cy.focused().realPress("ArrowRight");

cy.ui5CalendarGetDay("#calendar1", nextDayTimestamp.toString())
.should("have.focus");

cy.focused().realPress("ArrowLeft");

cy.ui5CalendarGetDay("#calendar1", timestamp.toString())
.should("have.focus");
});

it("Today's date is highlighted correctly", () => {
cy.mount(<Calendar id="calendar1"></Calendar>);

cy.get<Calendar>("#calendar1")
.shadow()
.find("[ui5-daypicker]")
.shadow()
.find(".ui5-dp-item--now")
.should("exist")
.and("be.visible")
.invoke("attr", "data-sap-timestamp")
.then(timestampAttr => {
const timestamp = parseInt(timestampAttr!);
const todayFromTimestamp = new Date(timestamp * 1000);
const actualToday = new Date();

expect(todayFromTimestamp.getDate()).to.equal(actualToday.getDate());
expect(todayFromTimestamp.getMonth()).to.equal(actualToday.getMonth());
expect(todayFromTimestamp.getFullYear()).to.equal(actualToday.getFullYear());
});
});
});
54 changes: 50 additions & 4 deletions packages/main/cypress/specs/DatePicker.cy.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -511,12 +511,35 @@ describe("Date Picker Tests", () => {
.as("datePicker")
.ui5DatePickerValueHelpIconPress();

// Focus the day picker's focusable element first
cy.get<DatePicker>("@datePicker")
.shadow()
.find("ui5-calendar")
.as("calendar")
.realPress(["Shift", "F4"])
.realPress("F4");
.shadow()
.find("ui5-daypicker")
.shadow()
.find("[tabindex='0']")
.should("be.visible")
.focus()
.should("have.focus");

cy.focused().realPress(["Shift", "F4"]);

// Wait for year picker to be visible and focused
cy.get("@calendar")
.shadow()
.find("ui5-yearpicker")
.should("be.visible");

cy.get("@calendar")
.shadow()
.find("ui5-yearpicker")
.shadow()
.find("[tabindex='0']")
.should("have.focus");

cy.focused().realPress("F4");

cy.get("@calendar")
.shadow()
Expand All @@ -531,12 +554,35 @@ describe("Date Picker Tests", () => {
.as("datePicker")
.ui5DatePickerValueHelpIconPress();

// Focus the day picker's focusable element first
cy.get<DatePicker>("@datePicker")
.shadow()
.find("ui5-calendar")
.as("calendar")
.realPress("F4")
.realPress(["Shift", "F4"]);
.shadow()
.find("ui5-daypicker")
.shadow()
.find("[tabindex='0']")
.should("be.visible")
.focus()
.should("have.focus");

cy.focused().realPress("F4");

// Wait for month picker to be visible and focused
cy.get("@calendar")
.shadow()
.find("ui5-monthpicker")
.should("be.visible");

cy.get("@calendar")
.shadow()
.find("ui5-monthpicker")
.shadow()
.find("[tabindex='0']")
.should("have.focus");

cy.focused().realPress(["Shift", "F4"]);

cy.get("@calendar")
.shadow()
Expand Down
2 changes: 1 addition & 1 deletion packages/main/cypress/specs/DateRangePicker.cy.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import "../../dist/Assets.js";
import "../../src/Assets.js";
import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
import DateRangePicker from "../../src/DateRangePicker.js";
import Label from "../../src/Label.js";
Expand Down
81 changes: 0 additions & 81 deletions packages/main/cypress/specs/DayPicker.cy.tsx

This file was deleted.

Loading
Loading