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

package/cypress/specs/DateTimePicker.cy.tsx

@@ -25,64 +25,6 @@ function DateTimePickerWithSeconds({ initialValue }: { initialValue?: string })
 	);
 }
 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";
@@ -92,7 +34,7 @@ describe("DateTimePicker general interaction", () => {
 
 		cy.get("#dtSeconds")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.should("have.value", PREVIOUS_VALUE);
 
 		cy.ui5DateTimePickerGetPopover("#dtSeconds").within(() => {
@@ -137,7 +79,7 @@ describe("DateTimePicker general interaction", () => {
 		// Only the time parts have been updated.
 		cy.get("#dtSeconds")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.should("be.focused")
 			.should("have.attr", "value", "13/04/2020, 02:14:19 PM");
 
@@ -146,6 +88,64 @@ describe("DateTimePicker general interaction", () => {
 		setAnimationMode(AnimationMode.Full);
 	});
 
+	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-datetime-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-datetime-input")
+			.should("be.focused")
+			.should("have.attr", "value", "14/04/2020, 03:16:16 AM");
+
+		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);
@@ -155,7 +155,7 @@ describe("DateTimePicker general interaction", () => {
 
 		cy.get("#dtSeconds")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.should("have.value", PREVIOUS_VALUE);
 
 		// Simulate keyboard interactions
@@ -164,7 +164,7 @@ describe("DateTimePicker general interaction", () => {
 		cy.realPress("Backspace");
 		cy.get("#dtSeconds")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused");
 		cy.realType("wrongtext");
@@ -199,7 +199,7 @@ describe("DateTimePicker general interaction", () => {
 
 		cy.get("#dtSeconds")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.should("be.focused")
 			.should("have.attr", "value", selectedDate + ", 02:14:19 PM");
 
@@ -320,7 +320,7 @@ describe("DateTimePicker general interaction", () => {
 
 		cy.get("#dtSeconds")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.should("be.focused")
 			.should("have.attr", "value", "13/04/2020, 12:34:56 AM");
 
@@ -331,7 +331,11 @@ describe("DateTimePicker general interaction", () => {
 		cy.mount(<DefaultDateTimePicker />);
 
 		// Prevent default behavior of ui5-change event.
-		cy.get("#dt").then($el => {
+		cy.get("[ui5-datetime-picker]")
+			.as("dtp")
+			
+		cy.get("@dtp")
+			.then($el => {
 			$el[0].addEventListener("ui5-change", (ev: Event) => {
 				ev.preventDefault();
 			});
@@ -354,12 +358,24 @@ describe("DateTimePicker general interaction", () => {
 				.find("[data-sap-focus-ref]")
 				.should("be.focused")
 				.realClick();
+
 			cy.get("#ok").realClick();
 		});
 
-		cy.get("#dt")
+		cy.get("@dtp")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.should($rp => {
+				expect($rp.is(":popover-open")).to.be.false;
+			})
+			.and("not.have.attr", "open");
+
+		cy.get("@dtp")
 			.shadow()
-			.find("ui5-input")
+			.find("[ui5-datetime-input]")
+			.as("input");
+		
+		cy.get("@input")
 			.should("be.focused")
 			.should("have.attr", "value", "");
 	});
@@ -399,6 +415,25 @@ describe("DateTimePicker general interaction", () => {
 			.should("have.attr", "accessible-name", "Choose Date and Time");
 	});
 
+	it("value state", () => {
+		cy.mount(<DateTimePicker id="dtpValueState" valueState="Negative"></DateTimePicker>);
+		cy.get("[ui5-datetime-picker]")
+			.as("dateTimePicker");
+
+		cy.get<DateTimePicker>("@dateTimePicker")
+			.shadow()
+			.find("ui5-datetime-input")
+			.should("have.attr", "value-state", "Negative");
+
+		cy.ui5DateTimePickerOpen("#dtpValueState");
+
+		cy.get<DateTimePicker>("@dateTimePicker")
+			.shadow()
+			.find("[slot='header']")
+			.first()
+			.should("have.text", "Invalid entry");
+	});
+
 	// Unstable test, needs investigation
 	it.skip("tests change event is fired on submit", () => {
 		cy.mount(<DefaultDateTimePicker />);

package/cypress/specs/DayPicker.cy.tsx

@@ -34,11 +34,11 @@ describe("Day Picker Tests", () => {
 		cy.get("#daypicker")
 			.shadow()
 			.find(".ui5-dp-item--now")
+			.realClick()
 			.should("be.focused")
 			.as("today");
 
 		cy.get("@today")
-			.realClick()
 			.should("be.focused")
 			.realPress("ArrowRight")
 			.realPress("Enter");

package/cypress/specs/FormSupport.cy.tsx

@@ -563,16 +563,46 @@ describe("Form support", () => {
 				<Option value="" selected>Option 3</Option>
 			</Select>
 
+			<Select value="Option 1">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+
+			<Select value="option2">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+			<Select value="Option 3">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+
 			<Select id="select4" name="select4">
 				<Option selected>Option 1</Option>
 				<Option value="option2">Option 2</Option>
 				<Option value="">Option 3</Option>
 			</Select>
+
+			<Select id="select44" name="select44" value="Option 1">
+				<Option selected>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+
 			<Select id="select5" name="select5">
 				<Option>Option 1</Option>
 				<Option value="option2" selected>Option 2</Option>
 				<Option value="">Option 3</Option>
 			</Select>
+			<Select id="select55" name="select55" value="option2">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+
 			<Select id="select7" name="select7" required>
 				<Option selected>Option 1</Option>
 				<Option value="option2">Option 2</Option>
@@ -589,6 +619,22 @@ describe("Form support", () => {
 				<Option value="" selected>Option 3</Option>
 			</Select>
 
+			<Select id="select77" name="select77" required value="Option 1">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+			<Select id="select88" name="select88" required value="option2">
+				<Option>Option 1</Option>
+				<Option value="option2" selected>Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+			<Select id="select99" name="select99" required value="Option 3">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+
 			<button type="submit">Submits forms</button>
 		</form>);
 
@@ -630,6 +676,17 @@ describe("Form support", () => {
 			.eq(1)
 			.realClick();
 
+		cy.get("#select99")
+			.realClick();
+
+		cy.get("#select99")
+			.should("have.attr", "opened");
+
+		cy.get("#select99")
+			.find("[ui5-option]")
+			.eq(1)
+			.realClick();
+
 		cy.get("button")
 			.realClick();
 
@@ -640,7 +697,7 @@ describe("Form support", () => {
 			.then($el => {
 				return getFormData($el.get(0));
 			})
-			.should("be.equal", "select4=Option 1&select5=option2&select6=&select7=Option 1&select8=option2&select9=option2");
+			.should("be.equal", "select4=Option 1&select44=Option 1&select5=option2&select55=option2&select6=&select7=Option 1&select8=option2&select9=option2&select77=Option 1&select88=option2&select99=option2");
 	});
 
 	it("ui5-slider in form", () => {

package/cypress/specs/Input.cy.tsx

@@ -763,6 +763,66 @@ describe("Change event behavior when selecting the same suggestion item", () =>
 		});
 	});
 
+	it("Change event fires after typing a new value following a clear icon click", () => {
+		cy.mount(
+			<>
+				<Input showClearIcon={true}></Input>
+			</>
+		);
+
+		cy.get("ui5-input")
+			.as("input");
+
+		cy.get("@input")
+			.then($input => {
+				$input[0].addEventListener("ui5-change", cy.stub().as("inputChange"));
+			});
+
+		cy.get("@input")
+			.click();
+
+		cy.get("@input")
+			.realType("Albania");
+
+		cy.get("@input")
+			.realPress("Enter");
+
+		cy.get("@inputChange")
+			.should("have.been.calledOnce");
+
+		cy.get("@input")
+			.shadow()
+			.find("ui5-icon")
+			.as("icon");
+
+		cy.get("@icon")
+			.click();
+
+		cy.get("@input")
+			.should("have.attr", "value", "");
+
+		cy.get("@input")
+			.realType("Argentina");
+
+		cy.get("@input")
+			.realPress("Enter");
+
+		cy.get("@inputChange")
+			.should("have.been.calledTwice");
+
+		cy.get("@icon")
+			.click();
+
+		cy.get("@input")
+			.realType("Argentina");
+
+		cy.get("@input")
+			.realPress("Enter");
+
+		cy.get("@inputChange")
+			.should("have.been.calledTwice");
+	});
+
 	it("should not close the dialog when item is selected", () => {
 		cy.mount(
 			<>
@@ -834,7 +894,7 @@ describe("Accessibility", () => {
 			.shadow()
 			.find("input")
 			.should("have.attr", "aria-describedby", "accessibleDescription");
-		
+
 		cy.get("@input")
 			.shadow()
 			.find("span#accessibleDescription")

package/cypress/specs/Select.cy.tsx

@@ -3,6 +3,158 @@ import OptionCustom from "../../src/OptionCustom.js";
 import Select from "../../src/Select.js";
 import download from "@ui5/webcomponents-icons/dist/download.js";
 
+describe("Select - value handling", () => {
+	it("tests selection via Select's value", () => {
+		cy.mount(
+			<>
+				<Select value="option2">
+					<Option id="opt1" value="option1">Option 1</Option>
+					<Option id="opt2" value="option2">Option 2</Option>
+					<Option id="opt3" value="option3">Option 3</Option>
+				</Select>
+
+				<Select value="option6">
+					<Option id="opt4" value="option4">Option 4</Option>
+					<Option id="opt5" value="option5">Option 5</Option>
+					<Option id="opt6" value="option6">Option 6</Option>
+				</Select>
+			</>
+		);
+
+		cy.get("#opt2").should("have.attr", "selected");
+		cy.get("#opt6").should("have.attr", "selected");
+	});
+
+	it("tests Select's value has precedence over Option's selected", () => {
+		cy.mount(
+			<>
+				<Select value="option1">
+					<Option id="opt1" value="option1">Option 1</Option>
+					<Option id="opt2" value="option2">Option 2</Option>
+					<Option id="opt3" value="option3" selected={true}>Option 3</Option>
+				</Select>
+
+				<Select value="option6">
+					<Option id="opt4" value="option4">Option 4</Option>
+					<Option id="opt5" value="option5" selected={true}>Option 5</Option>
+					<Option id="opt6" value="option6">Option 6</Option>
+				</Select>
+			</>
+		);
+
+		// assert that Select's value is preferred over Option's selected
+		cy.get("#opt1").should("have.attr", "selected");
+		cy.get("#opt3").should("not.have.attr", "selected");
+		cy.get("#opt5").should("not.have.attr", "selected");
+		cy.get("#opt6").should("have.attr", "selected");
+	});
+
+	it("tests Select's value of an option, added with delay", () => {
+		const addOption = () => {
+			const newOption = document.createElement("ui5-option") as Option;
+			newOption.id = "opt3";
+			newOption.value = "option3";
+			newOption.textContent = "Option 3";
+			document.getElementById("sel")?.appendChild(newOption);
+		};
+
+		cy.mount(
+			<Select id="sel" value="option3">
+				<Option id="opt1" value="option1">Option 1</Option>
+				<Option id="opt2" value="option2">Option 2</Option>
+			</Select>
+		);
+
+		cy.get("#opt3").should("not.exist");
+
+		cy.wrap(addOption).invoke("call");
+
+		// assert "Option 3" is selected although added after the Select was mounted
+		cy.get("#opt3").should("have.attr", "selected");
+	});
+
+	it("tests Select's value set with a delay", () => {
+		const setValue = () => {
+			const select = document.getElementById("sel") as Select;
+			select.value = "option2";
+		};
+
+		cy.mount(
+			<Select id="sel">
+				<Option id="opt1" value="option1">Option 1</Option>
+				<Option id="opt2" value="option2">Option 2</Option>
+				<Option id="opt3" value="option3">Option 3</Option>
+			</Select>
+		);
+
+		cy.wrap(setValue).invoke("call");
+
+		// assert "Option 2" is selected after dynamic value change
+		cy.get("#opt2").should("have.attr", "selected");
+	});
+
+	it("tests Select's value of a missing option - auto-selects firsts", () => {
+		cy.mount(
+			<Select id="sel" value="option3">
+				<Option id="opt1" value="option1">Option 1</Option>
+				<Option id="opt2" value="option2">Option 2</Option>
+			</Select>
+		);
+
+		// assert: Value remains "option3"
+		cy.get("#sel")
+			.should("have.attr", "value", "option3")
+			.invoke("prop", "value", "option3");
+
+		// assert: no option is selected - the Select is displayed empty
+		cy.get("#opt1").should("not.have.attr", "selected");
+		cy.get("#opt2").should("not.have.attr", "selected");
+	});
+
+	it("tests Select's value updated after user interaction", () => {
+		cy.mount(
+			<Select id="sel" value="option3">
+				<Option id="opt1" value="option1">Option 1</Option>
+				<Option id="opt2" value="option2">Option 2</Option>
+				<Option id="opt3" value="option3">Option 3</Option>
+			</Select>
+		);
+
+		cy.get("#sel")
+			.realClick();
+
+		cy.get("#sel")
+			.should("have.attr", "opened");
+
+		// act: select first option with click
+
+		cy.get("#sel")
+			.find("[ui5-option]")
+			.eq(0)
+			.realClick();
+
+		// assert: value is updated after user interaction
+		cy.get("#sel")
+			.should("have.attr", "value", "option1")
+			.invoke("prop", "value", "option1");
+
+		// act: select second option with keyboard
+		cy.get("#sel")
+			.realClick();
+
+		cy.get("#sel")
+			.realPress("ArrowDown");
+
+		cy.get("#sel")
+			.realPress("Enter");
+
+		// assert: value is updated after ArrowDown + Enter
+		cy.get("#sel")
+		.should("have.attr", "value", "option2")
+		.invoke("prop", "value", "option2");
+	});
+});
+
 describe("Select - Accessibility", () => {
 	it("tests options tooltip is set displayed", () => {
 		const EXPECTED_TOOLTIP = "Tooltip";