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

package/cypress/specs/DateTimePicker.cy.tsx

@@ -0,0 +1,445 @@
+import DateTimePicker from "../../src/DateTimePicker.js";
+import { setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
+
+function DefaultDateTimePicker() {
+	return (
+		<DateTimePicker id="dt" />
+	);
+}
+
+function DateTimePickerWithMinutes() {
+	return <DateTimePicker
+		id="dtMinutes"
+		formatPattern="dd/MM/yyyy, hh:mm a"
+		value="13/04/2020, 09:16 AM"/>;
+}
+
+function DateTimePickerWithSeconds({ initialValue }: { initialValue?: string }) {
+	return (
+		<DateTimePicker
+			id="dtSeconds"
+			formatPattern="dd/MM/yyyy, hh:mm:ss a"
+			value={initialValue || "13/04/2020, 03:16:16 AM"}
+		/>
+	);
+}
+describe("DateTimePicker general interaction", () => {
+	it("tests picker opens/closes programmatically", () => {
+		cy.mount(<DefaultDateTimePicker />);
+
+		cy.ui5DateTimePickerOpen("#dt");
+		cy.ui5DateTimePickerIsOpen("#dt").should("equal", true);
+		cy.ui5DateTimePickerClose("#dt");
+		cy.ui5DateTimePickerIsOpen("#dt").should("equal", false);
+	});
+
+	// Unstable but valid test, needs to be individually observed
+	it.skip("tests selection of new date", () => {
+		setAnimationMode(AnimationMode.None);
+		const PREVIOUS_VALUE = "13/04/2020, 03:16:16 AM";
+
+		cy.mount(<DateTimePicker id="dtSeconds" formatPattern="dd/MM/yyyy, hh:mm:ss a" value={PREVIOUS_VALUE} />);
+		cy.ui5DateTimePickerOpen("#dtSeconds");
+
+		cy.get("#dtSeconds")
+			.shadow()
+			.as("DateTimePicker");
+
+		cy.get("@DateTimePicker")
+			.find("ui5-input")
+			.should("have.value", PREVIOUS_VALUE);
+
+		cy.ui5DateTimePickerGetPopover("#dtSeconds").within(() => {
+			// Click the currently selected day and then move to the next day.
+			cy.get("ui5-calendar")
+				.shadow()
+				.as("calendar");
+
+			cy.get("@calendar")
+				.find("ui5-daypicker")
+				.shadow()
+				.as("daypicker")
+
+			cy.get("@daypicker")
+				.find(".ui5-dp-item--selected")
+				.realClick()
+				.should("be.focused");
+
+			cy.realPress("ArrowRight");
+			cy.realPress("Space");
+
+			// Confirm the change.
+			cy.get("#ok").realClick();
+		});
+
+		// Only the date has changed; the time remains the same.
+		cy.get("@DateTimePicker")
+			.find("ui5-input")
+			.should("be.focused")
+			.should("have.attr", "value", "14/04/2020, 03:16:16 AM");
+
+		cy.ui5DateTimePickerIsOpen("#dtSeconds").should("equal", false);
+		setAnimationMode(AnimationMode.Full);
+	});
+
+	it("tests time controls adjustments", () => {
+		setAnimationMode(AnimationMode.None);
+		const PREVIOUS_VALUE = "13/04/2020, 03:16:16 AM";
+
+		cy.mount(<DateTimePicker id="dtSeconds" formatPattern="dd/MM/yyyy, hh:mm:ss a" value={PREVIOUS_VALUE} />);
+		cy.ui5DateTimePickerOpen("#dtSeconds");
+
+		cy.get("#dtSeconds")
+			.shadow()
+			.find("ui5-input")
+			.should("have.value", PREVIOUS_VALUE);
+
+		cy.ui5DateTimePickerGetPopover("#dtSeconds").within(() => {
+			// Adjust hours:
+			cy.get("ui5-time-selection-clocks")
+				.shadow()
+				.as("clocks");
+
+			cy.get("@clocks")
+				.find(`ui5-toggle-spin-button[data-ui5-clock="hours"]`)
+				.realClick()
+				.should("be.focused");
+
+			cy.realPress("ArrowDown");
+			cy.realPress("Space");
+
+			// Adjust minutes.
+			cy.get("@clocks")
+				.find(`ui5-toggle-spin-button[data-ui5-clock="minutes"]`)
+				.realClick()
+				.should("be.focused");
+
+			cy.realPress("ArrowDown");
+			cy.realPress("ArrowDown");
+			cy.realPress("Space");
+
+			// Adjust seconds.
+			cy.get("@clocks")
+				.find(`ui5-toggle-spin-button[data-ui5-clock="seconds"]`)
+				.realClick()
+				.should("be.focused");
+
+			cy.realPress("ArrowUp");
+			cy.realPress("ArrowUp");
+			cy.realPress("ArrowUp");
+			cy.realType("p");
+
+			// Confirm.
+			cy.get("#ok").realClick();
+		});
+
+		// Only the time parts have been updated.
+		cy.get("#dtSeconds")
+			.shadow()
+			.find("ui5-input")
+			.should("be.focused")
+			.should("have.attr", "value", "13/04/2020, 02:14:19 PM");
+
+		cy.ui5DateTimePickerIsOpen("#dtSeconds").should("equal", false);
+
+		setAnimationMode(AnimationMode.Full);
+	});
+
+	// Unstable test, needs investigation
+	it.skip("tests selection of new date without changing the time section", () => {
+		setAnimationMode(AnimationMode.None);
+
+		const PREVIOUS_VALUE = "14/04/2020, 02:14:19 PM";
+		cy.mount(<DateTimePickerWithSeconds initialValue={PREVIOUS_VALUE} />);
+
+		cy.get("#dtSeconds")
+			.shadow()
+			.find("ui5-input")
+			.should("have.value", PREVIOUS_VALUE);
+
+		// Simulate keyboard interactions
+		cy.realPress("Tab");
+		cy.realPress(["Shift", "Tab"]);
+		cy.realPress("Backspace");
+		cy.get("#dtSeconds")
+			.shadow()
+			.find("ui5-input")
+			.realClick()
+			.should("be.focused");
+		cy.realType("wrongtext");
+		cy.realPress("Tab");
+
+		cy.ui5DateTimePickerOpen("#dtSeconds");
+
+		// Act
+		let selectedDate = "";
+		cy.ui5DateTimePickerGetPopover("#dtSeconds").within(() => {
+			cy.get("ui5-calendar")
+				.shadow()
+				.as("calendar");
+			
+			cy.get("@calendar")
+				.find("ui5-daypicker")
+				.shadow()
+				.as("daypicker");
+			
+			cy.get("@daypicker")
+				.find(".ui5-dp-item--now")
+				.should("be.focused")
+				.then($el => {
+					const timestamp = $el.attr("data-sap-timestamp") || "";
+					const date = new Date(parseInt(timestamp) * 1000);
+					selectedDate = `${String(date.getDate()).padStart(2, "0")}/${String(date.getMonth() + 1).padStart(2, "0")}/${date.getFullYear()}`;
+				})
+				.realClick();
+
+			cy.get("#ok").realClick();
+		});
+
+		cy.get("#dtSeconds")
+			.shadow()
+			.find("ui5-input")
+			.should("be.focused")
+			.should("have.attr", "value", selectedDate + ", 02:14:19 PM");
+
+		setAnimationMode(AnimationMode.Full);
+	});
+
+	it("tests time controls for dtSeconds picker", () => {
+		const expectedClocksCount = 3;
+		const expectedPeriodCount = 1;
+
+		cy.mount(<DateTimePickerWithSeconds />);
+
+		cy.ui5DateTimePickerOpen("#dtSeconds");
+
+		cy.ui5DateTimePickerTimeSelectionClocksCount("#dtSeconds").then(clocksCount => {
+			expect(clocksCount).to.equal(expectedClocksCount,
+				"The picker should display 3 clocks for hours, minutes and seconds.");
+		});
+
+		cy.ui5DateTimePickerPeriodSegmentedButtonCount("#dtSeconds").then(periodCount => {
+			expect(periodCount).to.equal(expectedPeriodCount,
+				"The picker should display 1 period selector.");
+		});
+
+		cy.ui5DateTimePickerClose("#dtSeconds");
+	});
+
+	it("tests time controls for dtMinutes picker", () => {
+		const expectedClocksCount = 2;
+		const expectedPeriodCount = 1;
+
+		cy.mount(<DateTimePickerWithMinutes />);
+
+		cy.ui5DateTimePickerOpen("#dtMinutes");
+
+		cy.ui5DateTimePickerTimeSelectionClocksCount("#dtMinutes").then(clocksCount => {
+			expect(clocksCount).to.equal(expectedClocksCount,
+				"The picker should display 2 clocks for hours and minutes.");
+		});
+
+		cy.ui5DateTimePickerPeriodSegmentedButtonCount("#dtMinutes").then(periodCount => {
+			expect(periodCount).to.equal(expectedPeriodCount,
+				"The picker should display 1 period selector.");
+		});
+
+		cy.ui5DateTimePickerClose("#dtMinutes");
+	});
+
+	it("tests hours clock is active on picker open", () => {
+		cy.mount(<DefaultDateTimePicker />);
+		cy.ui5DateTimePickerOpen("#dt");
+
+		cy.ui5DateTimePickerGetPopover("#dt").within(() => {
+			cy.get("ui5-time-selection-clocks")
+				.shadow()
+				.as("clocks");
+
+			cy.get("@clocks")
+				.find(`ui5-time-picker-clock[data-ui5-clock="hours"]`)
+				.should("have.attr", "active", "");
+		});
+
+		cy.ui5DateTimePickerClose("#dt");
+		cy.ui5DateTimePickerIsOpen("#dt").should("equal", false);
+	});
+
+	// Unstable test, needs investigation
+	it.skip("tests selection of 12:34:56 AM", () => {
+		setAnimationMode(AnimationMode.None);
+
+		cy.mount(<DateTimePickerWithSeconds />);
+
+		cy.ui5DateTimePickerOpen("#dtSeconds");
+		cy.ui5DateTimePickerIsOpen("#dtSeconds").should("equal", true);
+
+		cy.ui5DateTimePickerGetPopover("#dtSeconds")
+			.within(() => {
+				cy.get("ui5-calendar")
+					.shadow()
+					.as("calendar");
+				
+				cy.get("@calendar")
+					.find("ui5-daypicker")
+					.shadow()
+					.as("daypicker");
+				
+				cy.get("@daypicker")
+					.find(".ui5-dp-item--selected")
+					.should("be.focused")
+					.realClick();
+
+				cy.get("ui5-time-selection-clocks")
+					.shadow()
+					.as("clocks");
+
+				cy.get("@clocks")
+					.find(`ui5-toggle-spin-button[data-ui5-clock="hours"]`)
+					.realClick()
+					.should("be.focused")
+					.realType("1")
+					.realType("2");
+
+				cy.get("@clocks")
+					.find(`ui5-toggle-spin-button[data-ui5-clock="minutes"]`)
+					.should("be.focused")
+					.realType("3")
+					.realType("4");
+
+				cy.get("@clocks")
+					.find(`ui5-toggle-spin-button[data-ui5-clock="seconds"]`)
+					.should("be.focused")
+					.realType("5")
+					.realType("6")
+					.realType("a");
+
+				cy.get("#ok").realClick();
+			});
+
+		cy.get("#dtSeconds")
+			.shadow()
+			.find("ui5-input")
+			.should("be.focused")
+			.should("have.attr", "value", "13/04/2020, 12:34:56 AM");
+
+		setAnimationMode(AnimationMode.Full);
+	});
+
+	it("tests change event is prevented on submit when prevent default is called", () => {
+		cy.mount(<DefaultDateTimePicker />);
+
+		// Prevent default behavior of ui5-change event.
+		cy.get("#dt").then($el => {
+			$el[0].addEventListener("ui5-change", (ev: Event) => {
+				ev.preventDefault();
+			});
+		});
+
+		cy.ui5DateTimePickerOpen("#dt");
+
+		cy.ui5DateTimePickerGetPopover("#dt").within(() => {
+			// Click the focused day and confirm the selection.
+			cy.get("ui5-calendar")
+				.shadow()
+				.as("calendar");
+
+			cy.get("@calendar")
+				.find("ui5-daypicker")
+				.shadow()
+				.as("daypicker");
+
+			cy.get("@daypicker")
+				.find("[data-sap-focus-ref]")
+				.should("be.focused")
+				.realClick();
+			cy.get("#ok").realClick();
+		});
+
+		cy.get("#dt")
+			.shadow()
+			.find("ui5-input")
+			.should("be.focused")
+			.should("have.attr", "value", "");
+	});
+
+	it("Min and max dates are set, with no format pattern provided, using valid ISO format", () => {
+		cy.mount(
+			<DateTimePicker
+				id="dtMinMaxDatesISO"
+				minDate="2023-05-01"
+				maxDate="2023-05-31"
+			></DateTimePicker>
+		);
+
+		cy.ui5DateTimePickerOpen("#dtMinMaxDatesISO");
+
+		cy.ui5DateTimePickerGetPopover("#dtMinMaxDatesISO").within(() => {
+			cy.get("ui5-calendar")
+				.shadow()
+				.find(".ui5-calheader")
+				.as("calHeader");
+
+			cy.get("@calHeader")
+				.find("div[data-ui5-cal-header-btn-prev]")
+				.should("have.class", "ui5-calheader-arrowbtn-disabled");
+
+			cy.get("@calHeader")
+				.find("div[data-ui5-cal-header-btn-next]")
+				.should("have.class", "ui5-calheader-arrowbtn-disabled");
+		});
+	});
+
+	it("picker popover should have accessible name", () => {
+		cy.mount(<DefaultDateTimePicker />);
+		cy.ui5DateTimePickerOpen("#dt");
+
+		cy.ui5DateTimePickerGetPopover("#dt")
+			.should("have.attr", "accessible-name", "Choose Date and Time");
+	});
+
+	// Unstable test, needs investigation
+	it.skip("tests change event is fired on submit", () => {
+		cy.mount(<DefaultDateTimePicker />);
+
+		const changeStub = cy.stub();
+		cy.get("#dt").then($el => {
+			$el[0].addEventListener("ui5-change", changeStub);
+		});
+
+		// Open the picker, select a date, and submit to fire the event
+		cy.ui5DateTimePickerOpen("#dt");
+		cy.ui5DateTimePickerGetPopover("#dt").within(() => {
+			cy.get("ui5-calendar")
+				.shadow()
+				.as("calendar");
+
+			cy.get("@calendar")
+				.find("ui5-daypicker")
+				.shadow()
+				.as("daypicker");
+			
+			cy.get("@daypicker")
+				.find("[data-sap-focus-ref]")
+				.realClick()
+				.should("be.focused");
+			cy.get("#ok").realClick();
+		});
+
+		// Assert the change event was fired once
+		cy.wrap(changeStub).should("have.been.calledOnce");
+
+		// Re-open the picker and submit without making a change
+		cy.ui5DateTimePickerOpen("#dt");
+		cy.ui5DateTimePickerGetPopover("#dt").within(() => {
+			cy.get("#ok").realClick();
+		});
+
+		// The change event should not have been fired a second time.
+		cy.wrap(changeStub).should("have.been.calledOnce");
+
+		// Verify the picker is closed
+		cy.ui5DateTimePickerIsOpen("#dt").should("equal", false);
+	});
+});

package/cypress/specs/DayPicker.cy.tsx

@@ -0,0 +1,81 @@
+import "../../src/Assets.js";
+import DayPicker from "../../src/DayPicker.js";
+import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
+import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";
+
+function DefaultDayPicker() {
+	return <DayPicker id="daypicker"/>;
+}
+
+describe("Day Picker Tests", () => {
+	it("Select day with Space", () => {
+		cy.mount(<DefaultDayPicker />);
+		cy.get("#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);
+			});
+	});
+
+	it("Select day with Enter", () => {
+		cy.mount(<DefaultDayPicker />);
+		cy.get("#daypicker")
+			.shadow()
+			.find(".ui5-dp-item--now")
+			.should("be.focused")
+			.as("today");
+
+		cy.get("@today")
+			.realClick()
+			.should("be.focused")
+			.realPress("ArrowRight")
+			.realPress("Enter");
+
+		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);
+			});
+	});
+
+	it("Day names are correctly displayed when length is less than 3", () => {
+		cy.wrap({ setLanguage })
+			.invoke("setLanguage", "en");
+
+		cy.mount(<DefaultDayPicker />);
+		cy.get("#daypicker")
+			.shadow()
+			.find(".ui5-dp-firstday")
+			.first()
+			.should("have.text", "Sun");
+	});
+
+	it("Day names are correctly displayed when length is more than 3", () => {
+		// Set configuration first
+		cy.wrap({ setLanguage })
+			.invoke("setLanguage", "pt_PT");
+
+		cy.mount(<DefaultDayPicker />);
+
+		cy.get("#daypicker")
+			.shadow()
+			.find(".ui5-dp-firstday")
+			.first()
+			.should("have.text", "D");
+	});
+});

package/cypress/specs/Popover.cy.tsx

@@ -62,6 +62,59 @@ describe("Popover opener", () => {
 		});
 		cy.get("#btnClosePopover").realClick();
 	});
+
+	it("tests calling _showOutsideViewport method", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open</Button>
+				<Popover id="popover" opener="btnOpen">
+					<Button id="btnClosePopover">Close</Button>
+				</Popover>
+			</>
+		);
+
+		cy.get("#popover").then(el => {
+			cy.spy<Popover>((el.get(0) as Popover), "_showOutsideViewport").as("showOutsideViewport");
+		});
+
+		// act
+		cy.get("#popover").invoke("prop", "open", "true");
+
+		cy.get("@showOutsideViewport")
+			.should("have.been.calledOnce");
+	});
+
+	it("tests calling _showOutsideViewport method, when popover is created dynamically", () => {
+		cy.mount(
+			<>
+				<div id="container"></div>
+				<Button id="btnOpen">Open</Button>
+			</>
+		);
+
+		cy.get("#container").then(container => {
+			const popover = document.createElement("ui5-popover");
+
+			cy.spy<Popover>((popover as Popover), "_showOutsideViewport").as("showOutsideViewport");
+
+			popover.id = "popover";
+			popover.headerText = "Popover Header";
+			popover.opener = "btnOpen";
+			popover.open = true;
+
+			const content = document.createElement("div");
+			content.innerHTML = "<button id='popoverBtn'>button</button>";
+			popover.appendChild(content);
+
+			container.get(0).appendChild(popover);
+		});
+
+		cy.get("#popover")
+			.should("be.visible");
+
+		cy.get("@showOutsideViewport")
+			.should("have.been.calledOnce");
+	});
 });
 
 describe("Popover interaction", () => {

package/cypress/specs/Tree.cy.tsx

@@ -28,3 +28,21 @@ describe("Tree Tests", () => {
 			.and("have.attr", "accessible-description-ref", "lblDesc2");
 	});
 });
+
+describe("Tree Props", () => {
+	it("noDataText is properly rendered", () => {
+		cy.mount(
+			<>
+				<Tree noDataText="No data"></Tree>
+			</>
+		);
+
+		cy.get("[ui5-tree]")
+			.shadow()
+			.find("[ui5-tree-list]")
+			.shadow()
+			.find("[ui5-busy-indicator]")
+			.find(".ui5-list-nodata")
+			.should("exist")
+	});
+});

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

@@ -43,6 +43,7 @@ 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";
@@ -62,6 +63,7 @@ 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>>