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

package/cypress/specs/base/AccessibilityTextsHelper.cy.tsx

@@ -242,6 +242,147 @@ describe("AccessibilityTextsHelper", () => {
 			.should("not.have.attr", "aria-label");
 	});
 
+	it("Input accessibleDescriptionRef Tests", () => {
+		cy.mount(
+			<>
+				<Label id="lblDesc1">FirstDesc</Label>
+				<Label id="lblDesc2">SecondDesc</Label>
+				<Label id="lblDesc3">ThirdDesc</Label>
+				<Input id="inputDescRef" accessibleDescriptionRef="lblDesc1 lblDesc3"></Input>
+			</>
+		);
+
+		// assert
+		cy.get("#inputDescRef")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "FirstDesc ThirdDesc");
+
+		// act - update text of referenced label
+		cy.get("#lblDesc1")
+			.then($el => {
+				$el.get(0).innerHTML = "First Label Desc";
+			});
+
+		// assert
+		cy.get("#inputDescRef")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "First Label Desc ThirdDesc");
+
+		// act - update accessible-description-ref
+		cy.get("#inputDescRef")
+			.invoke("attr", "accessible-description-ref", "lblDesc2");
+
+		// assert
+		cy.get("#inputDescRef")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "SecondDesc");
+
+		// act - update accessible-description-ref
+		cy.get("#inputDescRef")
+			.invoke("attr", "accessible-description-ref", "lblDesc3");
+
+		// assert
+		cy.get("#inputDescRef")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "ThirdDesc");
+
+		// act - remove accessible-description-ref
+		cy.get("#inputDescRef")
+			.invoke("removeAttr", "accessible-description-ref");
+
+		// assert
+		cy.get("#inputDescRef")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("not.have.text", "");
+	});
+
+	it("Input accessibleDescription Tests", () => {
+		cy.mount(
+			<>
+				<Input id="inputDesc" accessibleDescription="Some description added by accessibleDescription"></Input>
+			</>
+		);
+		// assert
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "Some description added by accessibleDescription");
+
+		// act - update accessible-description
+		cy.get("#inputDesc")
+			.invoke("attr", "accessible-description", "Some description added by accessibleDescription");
+
+		// assert
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "Some description added by accessibleDescription");
+
+		// act - remove accessible-description
+		cy.get("#inputDesc")
+			.invoke("removeAttr", "accessible-description");
+
+		// assert
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("not.have.text", "");
+	});
+
+	// both
+	it("Input accessibleDescriptionRef and accessibleDescription Tests", () => {
+		cy.mount(
+			<>
+				<Label id="lblDesc1">FirstDesc</Label>
+				<Label id="lblDesc2">SecondDesc</Label>
+				<Input id="inputDesc" accessibleDescriptionRef="lblDesc1" accessibleDescription="Some description added by accessibleDescription"></Input>
+			</>
+		);
+
+		// assert - accessibleDescription is used
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "FirstDesc");
+
+		// act - update text of referenced label
+		cy.get("#lblDesc1")
+			.then($el => {
+				$el.get(0).innerHTML = "First Label Desc";
+			});
+
+		// assert - accessibleDescriptionRef is used
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "First Label Desc");
+
+		// act - remove accessible-description-ref
+		cy.get("#inputDesc")
+			.invoke("removeAttr", "accessible-description-ref");
+
+		// assert - accessibleDescription is used
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "Some description added by accessibleDescription");
+
+		// act - remove accessible-description
+		cy.get("#inputDesc")
+			.invoke("removeAttr", "accessible-description");
+
+		// assert - accessibleDescriptionRef is used
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("not.have.text", "");
+	});
+
 	it("Tests generic html elements with for attribute", () => {
 		cy.mount(
 			<>

package/cypress/support/commands/ColorPicker.commands.ts

@@ -22,3 +22,17 @@ Cypress.Commands.add("ui5ColorPickerUpdateInput", { prevSubject: true }, (subjec
 		.realType(value)
 		.realPress("Enter");
 });
+
+Cypress.Commands.add("ui5ColorPickerValidateInput", { prevSubject: true }, (subject, name, value) => {
+	cy.wrap(subject)
+		.as("colorPicker")
+		.should("be.visible");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find(name)
+		.as("input");
+
+	cy.get("@input")
+		.should("have.value", value);
+});

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/DateTimePicker.commands.ts

@@ -0,0 +1,60 @@
+Cypress.Commands.add("ui5DateTimePickerOpen", selector => {
+	cy.get(selector)
+		.then($dateTimePicker => {
+			cy.wrap($dateTimePicker).invoke("attr", "open", true);
+		});
+});
+
+Cypress.Commands.add("ui5DateTimePickerClose", selector => {
+	cy.get(selector).invoke("attr", "open", false);
+});
+
+Cypress.Commands.add("ui5DateTimePickerGetPopover", selector => {
+	return cy.get(selector)
+		.shadow()
+		.find("ui5-responsive-popover");
+});
+
+Cypress.Commands.add("ui5DateTimePickerIsOpen", selector => {
+	return cy
+		.get(selector)
+		.invoke("attr", "open")
+		.then(attr => Boolean(attr));
+});
+
+Cypress.Commands.add("ui5DateTimePickerGetSubmitButton", selector => {
+	return cy.get(selector)
+		.shadow()
+		.find("ui5-responsive-popover")
+		.find("#ok");
+});
+
+Cypress.Commands.add("ui5DateTimePickerGetCancelButton", selector => {
+	return cy
+		.get(selector)
+		.shadow()
+		.find("ui5-responsive-popover")
+		.find("#cancel");
+});
+
+Cypress.Commands.add("ui5DateTimePickerTimeSelectionClocksCount", selector => {
+	return cy
+		.get(selector)
+		.shadow()
+		.find("ui5-responsive-popover")
+		.find("ui5-time-selection-clocks")
+		.shadow()
+		.find("ui5-time-picker-clock")
+		.its("length");
+});
+
+Cypress.Commands.add("ui5DateTimePickerPeriodSegmentedButtonCount", selector => {
+	return cy
+		.get(selector)
+		.shadow()
+		.find("ui5-responsive-popover")
+		.find("ui5-time-selection-clocks")
+		.shadow()
+		.find("ui5-segmented-button")
+		.its("length");
+});

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,10 @@ 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/DateTimePicker.commands.js";
+import "./commands/DatePicker.commands.js";
 import "./commands/Menu.commands.js";
+import "./commands/SegmentedButton.commands.js";
 
 type SimulationDevices = "phone"
 
@@ -60,8 +63,23 @@ declare global {
 			ui5CalendarGetMonth(calendarSelector: string, timestamp: string): Chainable<JQuery<HTMLElement>>
 			ui5ColorPickerToggleColorMode(): Chainable<void>
 			ui5ColorPickerUpdateInput(name: string, value: string): Chainable<void>
+			ui5ColorPickerValidateInput(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>
 		}
 	}
 }