@ui5/webcomponents 0.0.0-4e88b8243 → 0.0.0-50f1454ef

package/cypress/specs/base/{AccessibilityTextsHelper.cy.ts → AccessibilityTextsHelper.cy.tsx}

@@ -1,17 +1,18 @@
-import { html } from "lit";
-import "../../../src/Label.js";
-import "../../../src/Input.js";
-import "../../../src/List.js";
+import Label from "../../../src/Label.js";
+import Input from "../../../src/Input.js";
+import List from "../../../src/List.js";
 
 describe("AccessibilityTextsHelper", () => {
 	it("Label-for tests", () => {
-		cy.mount(html`
-			<ui5-input id="myInput" placeholder="input placeholder" class="field"></ui5-input>
-			<ui5-label id="lblDesc1" for="myInput">Desc1</ui5-label>
-			<ui5-label id="lblDesc2" for="myInput">Desc2</ui5-label>
-			<ui5-label id="lblDesc3" for="myInput">Desc3</ui5-label>
-			<label id="lblDesc4" for="myInput">Desc4</label>
-		`);
+		cy.mount(
+			<>
+				<Input id="myInput" placeholder="input placeholder" class="field"></Input>
+				<Label id="lblDesc1" for="myInput">Desc1</Label>
+				<Label id="lblDesc2" for="myInput">Desc2</Label>
+				<Label id="lblDesc3" for="myInput">Desc3</Label>
+				<label id="lblDesc4" for="myInput">Desc4</label>
+			</>
+		);
 
 		// assert
 		cy.get("#myInput")
@@ -34,12 +35,14 @@ describe("AccessibilityTextsHelper", () => {
 	});
 
 	it("Input accessibleNameRef Tests", () => {
-		cy.mount(html`
-            <ui5-label id="lblEnterName1">FirstDesc</ui5-label>
-            <ui5-label id="lblEnterName2">SecondDesc</ui5-label>
-            <ui5-label id="lblEnterName3">ThirdDesc</ui5-label>
-            <ui5-input id="inputEnterName" accessible-name-ref="lblEnterName1 lblEnterName3" placeholder="Enter your name"></ui5-input>
-        `);
+		cy.mount(
+			<>
+				<Label id="lblEnterName1">FirstDesc</Label>
+				<Label id="lblEnterName2">SecondDesc</Label>
+				<Label id="lblEnterName3">ThirdDesc</Label>
+				<Input id="inputEnterName" accessibleNameRef="lblEnterName1 lblEnterName3" placeholder="Enter your name"></Input>
+			</>
+		);
 
 		// assert
 		cy.get("#inputEnterName")
@@ -81,11 +84,13 @@ describe("AccessibilityTextsHelper", () => {
 	});
 
 	it("Input accessibleName and accessibleNameRef Tests", () => {
-		cy.mount(html`
-			<ui5-label id="lblEnterDesc1" for="inputEnterDesc">Label for inputEnterDesc</ui5-label>
-			<ui5-label id="lblEnterDesc3">Label to be added/removed as accessible-name-ref</ui5-label>
-			<ui5-input id="inputEnterDesc" accessible-name="Some description added by accessibleName" placeholder="Enter description"></ui5-input>
-		`);
+		cy.mount(
+			<>
+				<Label id="lblEnterDesc1" for="inputEnterDesc">Label for inputEnterDesc</Label>
+				<Label id="lblEnterDesc3">Label to be added/removed as accessible-name-ref</Label>
+				<Input id="inputEnterDesc" accessibleName="Some description added by accessibleName" placeholder="Enter description"></Input>
+			</>
+		);
 
 		const INITIAL_ACCESSIBLE_NAME = "Some description added by accessibleName";
 		const UPDATED_ACCESSIBLE_NAME = "Another description added by accessibleName";
@@ -158,12 +163,14 @@ describe("AccessibilityTextsHelper", () => {
 	});
 
 	it("Three inputs with same label accessibleNameRef Tests", () => {
-		cy.mount(html`
-			<ui5-label id="lblTestDesc" for="testInput1">Label for testInput1 Desc</ui5-label>
-			<ui5-input id="testInput1" placeholder="Enter description1"></ui5-input>
-			<ui5-input id="testInput2" accessible-name-ref="lblTestDesc" accessible-name="Hello" placeholder="Enter description2"></ui5-input>
-			<ui5-input id="testInput3" accessible-name-ref="lblTestDesc" placeholder="Enter description3"></ui5-input>
-		`);
+		cy.mount(
+			<>
+				<Label id="lblTestDesc" for="testInput1">Label for testInput1 Desc</Label>
+				<Input id="testInput1" placeholder="Enter description1"></Input>
+				<Input id="testInput2" accessibleNameRef="lblTestDesc" accessibleName="Hello" placeholder="Enter description2"></Input>
+				<Input id="testInput3" accessibleNameRef="lblTestDesc" placeholder="Enter description3"></Input>
+			</>
+		);
 
 		const LBL_TEXT_CONTENT = "Label for testInput1 Desc";
 		const LBL_TEXT_CONTENT_UPDATED = "Another description for testing";
@@ -235,15 +242,158 @@ 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(html`
-			<label id="elId1" for="myInput2">Desc1</label>
-			<label id="elId2" for="myInput2">Desc2</label>
-			<ui5-input id="myInput2" placeholder="input placeholder"></ui5-input>
-			<div id="elId3" for="myInput2">Desc3</div>
-			<span id="elId4" for="myInput2">Desc4</span>
-			<span id="elId5" for="myInput2">Desc5</span>
-		`);
+		cy.mount(
+			<>
+				<label id="elId1" for="myInput2">Desc1</label>
+				<label id="elId2" for="myInput2">Desc2</label>
+				<Input id="myInput2" placeholder="input placeholder"></Input>
+				<label id="elId3" for="myInput2">Desc3</label>
+				<label id="elId4" for="myInput2">Desc4</label>
+				<label id="elId5" for="myInput2">Desc5</label>
+			</>
+		);
 
 		cy.get("#myInput2")
 			.shadow()
@@ -280,11 +430,13 @@ describe("AccessibilityTextsHelper", () => {
 	});
 
 	it("Tests accessibleDescription and accessibleDescriptionRef with ui5-list", () => {
-		cy.mount(html`
-			<ui5-label id="lblDesc1">Desc1</ui5-label>
-			<ui5-label id="lblDesc2">Desc2</ui5-label>
-			<ui5-list id="list" accessible-description-ref="lblDesc1 lblDesc2" accessible-description="Desc3"></ui5-list>
-		`);
+		cy.mount(
+			<>
+				<Label id="lblDesc1">Desc1</Label>
+				<Label id="lblDesc2">Desc2</Label>
+				<List id="list" accessibleDescriptionRef="lblDesc1 lblDesc2" accessibleDescription="Desc3"></List>
+			</>
+		);
 
 		cy.get("#list")
 			.shadow()

package/cypress/specs/base/{Events.cy.ts → Events.cy.tsx}

@@ -1,42 +1,49 @@
-import { html } from "lit";
-import "../../../src/Dialog.js";
-import "../../../src/Select.js";
-import "../../../src/Option.js";
-import "../../../src/Input.js";
-import "../../../src/SuggestionItem.js";
 import "../../../src/features/InputSuggestions.js";
-import "../../../src/MessageStrip.js";
-import "../../../src/MultiComboBox.js";
-import "../../../src/MultiComboBoxItem.js";
-import "../../../src/Panel.js";
-import "../../../src/Button.js";
-import "../../../src/CheckBox.js";
-import "../../../src/Label.js";
-import "../../../src/MenuItem.js";
-import "../../../src/Menu.js";
+import Dialog from "../../../src/Dialog.js";
+import Input from "../../../src/Input.js";
+import SuggestionItem from "../../../src/SuggestionItem.js";
+import MessageStrip from "../../../src/MessageStrip.js";
+import Panel from "../../../src/Panel.js";
+import Label from "../../../src/Label.js";
+import Select from "../../../src/Select.js";
+import Option from "../../../src/Option.js";
+import Button from "../../../src/Button.js";
+import MenuItem from "../../../src/MenuItem.js";
+import Menu from "../../../src/Menu.js";
+import MultiComboBox from "../../../src/MultiComboBox.js";
+import MultiComboBoxItem from "../../../src/MultiComboBoxItem.js";
+import CheckBox from "../../../src/CheckBox.js";
+import { setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
+import type ResponsivePopover from "../../../src/ResponsivePopover.js";
 
 describe("Event bubbling", () => {
+	before(() => {
+		cy.wrap({ setAnimationMode })
+			.invoke("setAnimationMode", AnimationMode.None);
+	})
+
 	it("test bubbling events", () => {
-		cy.mount(html`
+		cy.mount(
 			<div id="app">
-				<ui5-dialog id="myDialog" header-text="Dialog">
-					<ui5-input id="myInput" show-suggestions>
-						<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
-						<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
-						<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
-					</ui5-input>
+				<Dialog id="myDialog" headerText="Dialog">
+					<Input id="myInput" showSuggestions={true}>
+						<SuggestionItem text="Cozy"></SuggestionItem>
+						<SuggestionItem text="Compact"></SuggestionItem>
+						<SuggestionItem text="Condensed"></SuggestionItem>
+					</Input>
 
-					<ui5-message-strip id="myMsgStrip">(Information) with default icon and close button:</ui5-message-strip>
+					<MessageStrip id="myMsgStrip">(Information) with default icon and close button:</MessageStrip>
 
-					<ui5-panel id="panel" header-text="Panel">
-						<ui5-label>
+					<Panel id="panel" headerText="Panel">
+						<Label>
 							Lorem ipsum dolor sit amet, tamquam invidunt cu sed, unum regione mel ea, quo ea alia novum. Ne qui illud zril
 							nostrum, vel ea sint dicant postea.
-						</ui5-label>
-					</ui5-panel>
-				</ui5-dialog>
+						</Label>
+					</Panel>
+				</Dialog>
 			</div>
-		`);
+		);
 
 		cy.get("#app")
 			.as("app");
@@ -77,10 +84,22 @@ describe("Event bubbling", () => {
 
 		cy.get("@dialog").invoke("attr", "open", true);
 
+		cy.get<Dialog>("@dialog")
+			.ui5DialogOpened()
+
 		// act - toggle Input suggestions
 		cy.get("@input")
-			.realClick()
-			.realType("a");
+			.realClick();
+
+		cy.get("@input")
+			.should("be.focused");
+
+		cy.realType("a");
+
+		cy.get("@input")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverOpened();
 
 		cy.get("@input")
 			.find("[ui5-suggestion-item]")
@@ -97,16 +116,15 @@ describe("Event bubbling", () => {
 			.realClick();
 
 		// assert
-		// - the close event of the MessageStrip bubbles:  MessageStrip -> Dialog -> App
-		// - the close event of the Input bubbles: Input -> Dialog -> App
+		// - the close event of the Dialog is not triggered because MessageStrip and Input do not bubble
 		cy.get("@inpClosed")
 			.should("have.been.calledOnce");
 		cy.get("@msgClosed")
 			.should("have.been.calledOnce");
 		cy.get("@dialogClosed")
-			.should("have.been.calledTwice");
+			.should("have.been.not.called");
 		cy.get("@appClosed")
-			.should("have.been.calledTwice");
+			.should("have.been.not.called");
 
 		// act - toggle Panel
 		cy.get("@panel")
@@ -122,28 +140,28 @@ describe("Event bubbling", () => {
 	});
 
 	it("test non-bubbling events", () => {
-		cy.mount(html`
+		cy.mount(
 			<div id="app">
-				<ui5-dialog id="myDialog" header-text="Dialog">
-					<ui5-select id="mySelect">
-						<ui5-option>Hello</ui5-option>
-						<ui5-option>World</ui5-option>
-						<ui5-option>Hello</ui5-option>
-					</ui5-select>
-
-					<ui5-button id="btnOpen">Open Menu</ui5-button>
-					<ui5-menu id="myMenu" header-text="Menu" opener="btnOpen">
-						<ui5-menu-item text="New File"></ui5-menu-item>
-						<ui5-menu-item text="New Folder"></ui5-menu-item>
-					</ui5-menu>
-
-					<ui5-multi-combobox id="myMCB">
-						<ui5-mcb-item text="Cosy"></ui5-mcb-item>
-						<ui5-mcb-item selected text="Compact"></ui5-mcb-item>
-					</ui5-multi-combobox>
-				</ui5-dialog>
+				<Dialog id="myDialog" headerText="Dialog">
+					<Select id="mySelect">
+						<Option>Hello</Option>
+						<Option>World</Option>
+						<Option>Hello</Option>
+					</Select>
+
+					<Button id="btnOpen">Open Menu</Button>
+					<Menu id="myMenu" headerText="Menu" opener="btnOpen">
+						<MenuItem text="New File"></MenuItem>
+						<MenuItem text="New Folder"></MenuItem>
+					</Menu>
+
+					<MultiComboBox id="myMCB">
+						<MultiComboBoxItem text="Cosy"></MultiComboBoxItem>
+						<MultiComboBoxItem selected text="Compact"></MultiComboBoxItem>
+					</MultiComboBox>
+				</Dialog>
 			</div>
-		`);
+		);
 
 		cy.get("#app")
 			.as("app");
@@ -221,7 +239,7 @@ describe("Event bubbling", () => {
 
 		// assert - the open event of the MultiComboBox do not bubble
 		cy.get("@mcbOpened").should("have.been.calledOnce");
-		cy.get("@dialogOpened").should("have.been.calledTwice");
+		cy.get("@dialogOpened").should("have.been.calledOnce");
 
 		cy.get("@multiComboboxIcon")
 			.realClick();
@@ -248,12 +266,12 @@ describe("Event bubbling", () => {
 	});
 
 	it("test cancelable events", () => {
-		cy.mount(html`
+		cy.mount(
 			<div id="app">
-				<ui5-checkbox id="cb"></ui5-checkbox>
-				<ui5-checkbox id="cb2"></ui5-checkbox>
+				<CheckBox id="cb"></CheckBox>
+				<CheckBox id="cb2"></CheckBox>
 			</div>
-		`);
+		);
 
 		cy.get("#cb")
 			.as("checkbox");

package/cypress/specs/base/{IconCollection.cy.ts → IconCollection.cy.tsx}

@@ -1,9 +1,9 @@
 import "./css/redfish.custom.theme.css";
 import getEffectiveIconCollection from "@ui5/webcomponents-base/dist/asset-registries/util/getIconCollectionByTheme.js";
 import { setTheme, isLegacyThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
-import { html } from "lit";
 import "../../../src/Assets.js";
-import "../../../src/Icon.js";
+import Icon from "../../../src/Icon.js";
+import home from "@ui5/webcomponents-icons/dist/home.js";
 
 describe("Icon collection", () => {
 	before(() => {
@@ -12,7 +12,7 @@ describe("Icon collection", () => {
 	});
 
 	it("tests the icon collection in built-in themes", () => {
-		cy.mount(html`<ui5-icon name="home"></ui5-icon>`);
+		cy.mount(<Icon name={home}></Icon>);
 
 		cy.wrap({ getEffectiveIconCollection })
 			.invoke("getEffectiveIconCollection")
@@ -37,7 +37,7 @@ describe("Icon collection", () => {
 	});
 
 	it("tests the icon collection in built-in themes", () => {
-		cy.mount(html`<ui5-icon name="home"></ui5-icon>`);
+		cy.mount(<Icon name={home}></Icon>);
 
 		// act
 		cy.wrap({ setTheme })

package/cypress/specs/base/{IgnoreCustomElements.cy.ts → IgnoreCustomElements.cy.tsx}

@@ -1,6 +1,5 @@
-import { html } from "lit";
-import "../../../src/Card.js";
-import "../../../src/CardHeader.js";
+import Card from "../../../src/Card.js";
+import CardHeader from "../../../src/CardHeader.js";
 
 import { ignoreCustomElements, shouldIgnoreCustomElement } from "@ui5/webcomponents-base/dist/IgnoreCustomElements.js";
 
@@ -9,16 +8,20 @@ ignoreCustomElements("my-");
 
 describe("Ignore Custom Elements", () => {
 	it("tests shouldIgnoreCustomElement method", () => {
-		cy.mount(html`<ui5-card>
-		<ui5-card-header
-			slot="header"
-			status="4 of 10"
-			title-text="Product">
-		</ui5-card-header>
+		cy.mount(
+			<Card>
+				<CardHeader
+					slot="header"
+					subtitleText="4 of 10"
+					titleText="Product">
+				</CardHeader>
 
-		<app-trip-calendar class="myCard-trip-calendar"></app-trip-calendar>
-		<my-trip-calendar class="myCard-trip-calendar"></app-trip-calendar>
-	</ui5-card>`);
+				{/* @ts-expect-error */}
+				<app-trip-calendar class="myCard-trip-calendar"></app-trip-calendar>
+				{/* @ts-expect-error */}
+				<my-trip-calendar class="myCard-trip-calendar"></my-trip-calendar>
+			</Card>
+		);
 
 		cy.wrap({ shouldIgnoreCustomElement })
 			.invoke("shouldIgnoreCustomElement", "app-trip-calendar")

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

@@ -0,0 +1,64 @@
+import { setEnableDefaultTooltips } from "@ui5/webcomponents-base/dist/config/Tooltips.js";
+import Button from "../../../src/Button.js";
+import RatingIndicator from "../../../src/RatingIndicator.js";
+import ToggleButton from "../../../src/ToggleButton.js";
+import SegmentedButtonItem from "../../../src/SegmentedButtonItem.js";
+import SegmentedButton from "../../../src/SegmentedButton.js";
+import Icon from "../../../src/Icon.js";
+
+import settings from "@ui5/webcomponents-icons/dist/settings.js";
+import add from "@ui5/webcomponents-icons/dist/add.js";
+import activate from "@ui5/webcomponents-icons/dist/activate.js";
+
+describe("Default Tooltips", () => {
+	before(() => {
+		cy.wrap({ setEnableDefaultTooltips })
+			.invoke("setEnableDefaultTooltips", false);
+	})
+
+	it("tests navigation", () => {
+		cy.mount(
+			<>
+				<Icon id="ic" name={settings}></Icon>
+				<Button id="btn" icon={settings}></Button>
+				<RatingIndicator id="rt"></RatingIndicator>
+				<ToggleButton id="togglebtn" icon={settings}></ToggleButton>
+				<SegmentedButton id="segBtn">
+					<SegmentedButtonItem id="segBtnItem" icon={add}></SegmentedButtonItem>
+					<SegmentedButtonItem id="segBtnItem2" icon={settings}></SegmentedButtonItem>
+					<SegmentedButtonItem id="segBtnItem3" icon={activate}></SegmentedButtonItem>
+				</SegmentedButton>
+			</>
+		);
+
+		cy.get("#ic")
+			.shadow()
+			.find("title")
+			.should("not.exist");
+
+		cy.get("#btn")
+			.shadow()
+			.find(".ui5-button-icon")
+			.should("not.have.attr", "title");
+
+		cy.get("#togglebtn")
+			.shadow()
+			.find(".ui5-button-icon")
+			.should("not.have.attr", "title");
+
+		cy.get("#rt")
+			.shadow()
+			.find(".ui5-rating-indicator-root")
+			.should("not.have.attr", "title");
+
+		cy.get("#segBtnItem")
+			.shadow()
+			.find(".ui5-segmented-button-item-root")
+			.should("not.have.attr", "title");
+
+		cy.get("#segBtnItem")
+			.shadow()
+			.find(".ui5-segmented-button-item-icon")
+			.should("not.have.attr", "title");
+	});
+});

package/cypress/support/commands/Calendar.commands.ts

@@ -0,0 +1,21 @@
+Cypress.Commands.add("ui5CalendarGetDay", (calendarSelector, timestamp) => {
+	cy.get(calendarSelector)
+		.as("calendar");
+	
+	cy.get("@calendar")
+		.shadow()
+		.find("[ui5-daypicker]")
+		.as("daypicker");
+	
+	return cy.get("@daypicker")
+			.shadow()
+			.find(`div[data-sap-timestamp=${timestamp}]`);
+});
+
+Cypress.Commands.add("ui5CalendarGetMonth", (calendarSelector, timestamp) => {
+	return cy.get(calendarSelector)
+		.shadow()
+		.find("[ui5-monthpicker]")
+		.shadow()
+		.find(`div[data-sap-timestamp=${timestamp}]`);
+});