@ui5/webcomponents 2.9.0-rc.0 → 2.9.0-rc.1

package/cypress/support/commands/DatePicker.commands.ts

@@ -0,0 +1,218 @@
+Cypress.Commands.add("ui5DatePickerGetInnerInput", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-input")
+		.shadow()
+		.find("input")
+		.as("innerInput");
+
+	return cy.get("@innerInput");
+});
+
+Cypress.Commands.add("ui5DatePickerGetPopoverDate", { prevSubject: true }, (subject, timestamp) => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find("ui5-daypicker")
+		.shadow()
+		.find(`[data-sap-timestamp='${timestamp}']`)
+		.first();
+});
+
+Cypress.Commands.add("ui5DatePickerGetDisplayedDay", { prevSubject: true }, (subject, index) => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find("ui5-daypicker")
+		.shadow()
+		.find(".ui5-dp-content .ui5-dp-item")
+		.eq(index);
+});
+
+Cypress.Commands.add("ui5DatePickerGetFirstDisplayedDate", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find("ui5-daypicker")
+		.shadow()
+		.find("div.ui5-dp-item")
+		.first();
+});
+
+Cypress.Commands.add("ui5DatePickerGetFirstDisplayedYear", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.shadow()
+		.find("ui5-yearpicker")
+		.as("yearPicker")
+		.should("be.visible");
+
+	return cy.get("@yearPicker")
+		.shadow()
+		.find("div.ui5-yp-item")
+		.first();
+});
+Cypress.Commands.add("ui5DatePickerGetDisplayedMonth", { prevSubject: true }, (subject: string, index: number) => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.shadow()
+		.find("ui5-monthpicker")
+		.as("monthPicker")
+		.should("be.visible");
+
+	return cy.get("@monthPicker")
+		.shadow()
+		.find(".ui5-mp-root .ui5-mp-item")
+		.eq(index);
+});
+
+Cypress.Commands.add("ui5DatePickerGetDisplayedYear", { prevSubject: true }, (subject: string, index: number) => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.shadow()
+		.find("ui5-yearpicker")
+		.as("yearPicker")
+		.should("be.visible");
+
+	return cy.get("@yearPicker")
+		.shadow()
+		.find(".ui5-yp-root .ui5-yp-item")
+		.eq(index);
+});
+
+Cypress.Commands.add("ui5DatePickerGetNextButton", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find(".ui5-calheader div[data-ui5-cal-header-btn-next]")
+		.first();
+});
+
+Cypress.Commands.add("ui5DatePickerGetPreviousButton", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find(".ui5-calheader div[data-ui5-cal-header-btn-prev]")
+		.first();
+});
+
+Cypress.Commands.add("ui5DatePickerGetMonthButton", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find(".ui5-calheader div[data-ui5-cal-header-btn-month]")
+		.first();
+});
+
+Cypress.Commands.add("ui5DatePickerGetYearButton", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find(".ui5-calheader div[data-ui5-cal-header-btn-year]")
+		.first();
+});
+
+Cypress.Commands.add("ui5DatePickerValueHelpIconPress", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-icon")
+		.realClick();
+});

package/cypress/support/commands/SegmentedButton.commands.ts

@@ -0,0 +1,32 @@
+import type SegmentedButtonItem from "../../../src/SegmentedButtonItem.js";
+
+Cypress.Commands.add("ui5SegmentedButtonItemToggleSelect", { prevSubject: true }, (subject, deselect) => {
+	const arg = deselect ? "have.attr" : "not.have.attr";
+	const arg2 = deselect ? "not.have.attr" : "have.attr";
+
+	cy.wrap(subject)
+		.as("segmentedButtonItem")
+		.should("be.visible");
+
+	cy.get<SegmentedButtonItem>("@segmentedButtonItem")
+		.should(arg, "selected");
+
+	cy.get<SegmentedButtonItem>("@segmentedButtonItem")
+		.realClick();
+
+	cy.get<SegmentedButtonItem>("@segmentedButtonItem")
+		.should(arg2, "selected");
+});
+
+Cypress.Commands.add("ui5SegmentedButtonFocusFirstItem", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("items")
+		.should("be.visible");
+
+	cy.get<SegmentedButtonItem>("@items")
+		.first()
+		.realClick();
+
+	cy.get<SegmentedButtonItem>("@items")
+		.should("be.focused");
+});

package/cypress/support/commands.ts

@@ -43,7 +43,9 @@ import { internals, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import "./commands/Calendar.commands.js";
 import "./commands/ColorPalette.commands.js";
 import "./commands/ColorPicker.commands.js";
+import "./commands/DatePicker.commands.js";
 import "./commands/Menu.commands.js";
+import "./commands/SegmentedButton.commands.js";
 
 type SimulationDevices = "phone"
 
@@ -62,6 +64,20 @@ declare global {
 			ui5ColorPickerUpdateInput(name: string, value: string): Chainable<void>
 			ui5ColorPaletteCheckSelectedColor(colorPaletteItem: string, values: {r: string, g: string, b: string, a: string}): Chainable<void>
 			ui5ColorPaletteNavigateAndCheckSelectedColor(colorPalette: string, startIndex: number, key: string, expectedValue: string): Chainable<void>
+			ui5DatePickerGetInnerInput(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetPopoverDate(timestamp: number): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetDisplayedDay(index: number): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetFirstDisplayedDate(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetFirstDisplayedYear(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetDisplayedMonth(index: number): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetDisplayedYear(index: number): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetNextButton(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetPreviousButton(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetMonthButton(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetYearButton(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerValueHelpIconPress(): Chainable<void>
+			ui5SegmentedButtonItemToggleSelect(deselect?: boolean): Chainable<void>
+			ui5SegmentedButtonFocusFirstItem(): Chainable<void>
 		}
 	}
 }