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

package/cypress/specs/ColorPicker.cy.tsx

@@ -1,10 +1,10 @@
 import ColorPicker from "../../src/ColorPicker.js";
 
-describe("Color Picker tests", () => {
+describe("Color Picker general interaction tests", () => {
 	it("should not display color channel inputs and alpha slider in simplified mode", () => {
 		cy.mount(<ColorPicker simplified={true}></ColorPicker>);
 
-		cy.get("ui5-color-picker")
+		cy.get("[ui5-color-picker]")
 			.as("colorPicker");
 
 		cy.get<ColorPicker>("@colorPicker")
@@ -23,35 +23,104 @@ describe("Color Picker tests", () => {
 			.should("not.exist");
 	});
 
-	it("should toggle display to RGB or HSL when button is selected", () => {
+	it("should fire change event when color is changed", () => {
+		cy.mount(<ColorPicker></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.then($item => {
+				$item.get(0).addEventListener("change", cy.stub().as("valueChanged"));
+			});
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#red", "123");
+
+		cy.get("@valueChanged")
+			.should("have.been.calledOnce");
+	});
+
+	it("should correctly parse rgb value to color", () => {
+		cy.mount(<ColorPicker value="rgb(0, 255, 0)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "00ff00");
+	});
+
+	it("should correctly parse rgba value color", () => {
+		cy.mount(<ColorPicker value="rgba(255, 0, 255, 0.5)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "ff00ff");
+
+		cy.get("[ui5-color-picker]")
+			.ui5ColorPickerValidateInput("#alpha", "0.5");
+	});
+
+	it("should correctly parse HEX value to color", () => {
+		cy.mount(<ColorPicker value="#fafafa"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "fafafa");
+	});
+
+	it("should correctly parse short form HEX value to color", () => {
+		cy.mount(<ColorPicker value="#123"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "112233");
+	});
+
+	it("should correctly parse CSS color value to color", () => {
+		cy.mount(<ColorPicker value="gray"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "808080");
+	});
+
+	it("should toggle display from RGB to HSL when arrow button is selected", () => {
 		cy.mount(<ColorPicker value="rgba(112, 178, 225, 1)"></ColorPicker>);
 
-		cy.get("ui5-color-picker")
+		cy.get("[ui5-color-picker]")
 			.as("colorPicker");
 
 		cy.get<ColorPicker>("@colorPicker")
 			.ui5ColorPickerToggleColorMode();
 
 		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find("#hue")
-			.should("have.attr", "value", "205");
+			.ui5ColorPickerValidateInput("#hue", "205");
 
 		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find("#saturation")
-			.should("have.attr", "value", "65");
+			.ui5ColorPickerValidateInput("#saturation", "65");
 
 		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find("#light")
-			.should("have.attr", "value", "66");
+			.ui5ColorPickerValidateInput("#light", "66");
+	});
+
+	it("should update value when color is changed via the RGB input fields", () => {
+		cy.mount(<ColorPicker value="rgba(62, 128, 99, 1)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#red", "123");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#green", "56");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#blue", "93");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(123, 56, 93, 1)");
 	});
 
-	it("should update value when hue is changed via the input field", () => {
+	it("should update value when color is changed via the Hue input field", () => {
 		cy.mount(<ColorPicker value="rgba(112, 178, 225, 1)"></ColorPicker>);
 
-		cy.get("ui5-color-picker")
+		cy.get("[ui5-color-picker]")
 			.as("colorPicker");
 
 		cy.get<ColorPicker>("@colorPicker")
@@ -61,13 +130,13 @@ describe("Color Picker tests", () => {
 			.ui5ColorPickerUpdateInput("#hue", "130");
 
 		cy.get<ColorPicker>("@colorPicker")
-			.should("have.attr", "value", "rgba(112, 225, 131, 1)");
+			.should("have.value", "rgba(112, 225, 131, 1)");
 	});
 
-	it("should update value when saturation is changed via the input field", () => {
+	it("should update value when color is changed via the Saturation input field", () => {
 		cy.mount(<ColorPicker value="rgba(112, 225, 131, 1)"></ColorPicker>);
 
-		cy.get("ui5-color-picker")
+		cy.get("[ui5-color-picker]")
 			.as("colorPicker");
 
 		cy.get<ColorPicker>("@colorPicker")
@@ -77,13 +146,13 @@ describe("Color Picker tests", () => {
 			.ui5ColorPickerUpdateInput("#saturation", "44");
 
 		cy.get<ColorPicker>("@colorPicker")
-			.should("have.attr", "value", "rgba(130, 206, 143, 1)");
+			.should("have.value", "rgba(130, 206, 143, 1)");
 	});
 
-	it("should update value when light is changed via the input field", () => {
+	it("should update value when color is changed via the Light input field", () => {
 		cy.mount(<ColorPicker value="rgba(130, 206, 143, 1)"></ColorPicker>);
 
-		cy.get("ui5-color-picker")
+		cy.get("[ui5-color-picker]")
 			.as("colorPicker");
 
 		cy.get<ColorPicker>("@colorPicker")
@@ -93,13 +162,126 @@ describe("Color Picker tests", () => {
 			.ui5ColorPickerUpdateInput("#light", "30");
 
 		cy.get<ColorPicker>("@colorPicker")
-			.should("have.attr", "value", "rgba(43, 110, 54, 1)");
+			.should("have.value", "rgba(43, 110, 54, 1)");
+	});
+
+	it("should update value when color is changed via the HEX input field", () => {
+		cy.mount(<ColorPicker value="rgba(123, 56, 93, 1)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput(".ui5-color-picker-hex-input", "7be");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(119, 187, 238, 1)");
+	});
+
+	it("should update value when alpha is changed via the Alpha input field", () => {
+		cy.mount(<ColorPicker value="rgba(232, 128, 222, 0.89)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#alpha", "0.30");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(232, 128, 222, 0.3)");
+	});
+
+	it("should update value when color is changed via the Hue slider", () => {
+		cy.mount(<ColorPicker value="rgba(70, 64, 191, 1)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-hue-slider")
+			.realClick({ position: "center" });
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(64, 191, 189, 1)");
+	});
+
+	it("should update value when alpha is changed via the Alpha slider", () => {
+		cy.mount(<ColorPicker value="rgba(70, 64, 191, 0)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-alpha-slider")
+			.realClick({ position: "center" });
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(70, 64, 191, 0.5)");
+	});
+
+	it("should update Saturation & Light inputs when selecting color from main color grid", () => {
+		cy.mount(<ColorPicker value="rgba(136, 64, 101, 1)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#hue", "329");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#saturation", "36");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#light", "39");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-main-color")
+			.realClick({ x: 200, y: 50 });
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#hue", "329");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#saturation", "81");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#light", "78");
+	});
+});
+
+describe("Color Picker accessibility tests", () => {
+	it("should show correct accessibility info for RGB inputs", () => {
+		cy.mount(<ColorPicker></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#red")
+			.should("have.attr", "accessible-name", "Red");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#green")
+			.should("have.attr", "accessible-name", "Green");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#blue")
+			.should("have.attr", "accessible-name", "Blue");
 	});
 
 	it("should show correct accessibility info for HSL inputs", () => {
 		cy.mount(<ColorPicker></ColorPicker>);
 
-		cy.get("ui5-color-picker")
+		cy.get("[ui5-color-picker]")
 			.as("colorPicker");
 
 		cy.get<ColorPicker>("@colorPicker")
@@ -120,4 +302,31 @@ describe("Color Picker tests", () => {
 			.find("#light")
 			.should("have.attr", "accessible-name", "Light");
 	});
+
+	it("should show correct accessibility info for sliders and other input", () => {
+		cy.mount(<ColorPicker></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#alpha")
+			.should("have.attr", "accessible-name", "Alpha");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-hex-input")
+			.should("have.attr", "accessible-name", "Hexadecimal");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-hue-slider")
+			.should("have.attr", "accessible-name", "Hue control");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-alpha-slider")
+			.should("have.attr", "accessible-name", "Alpha control");
+	});
 });

package/cypress/specs/DateControlsWithTimezone.cy.tsx

@@ -28,7 +28,7 @@ describe("Date related components in different timezone", () => {
 
 		cy.get("#datePickerNow")
 			.shadow()
-			.find("ui5-input")
+			.find("[ui5-datetime-input]")
 			.should("have.attr", "value", value);
 	});
 
@@ -41,7 +41,7 @@ describe("Date related components in different timezone", () => {
 		now.setHours(now.getHours() + 13);
 		const hours = String(now.getHours()).padStart(2, "0");
 		const minutes = String(now.getMinutes()).padStart(2, "0");
-		const seconds = now.getSeconds();
+		const seconds = String(now.getSeconds()).padStart(2, "0");
 
 		const value = `${hours}:${minutes}:${seconds}`;
 
@@ -63,13 +63,13 @@ describe("Date related components in different timezone", () => {
 		const year = now.getFullYear();
 		const hours = String(now.getHours()).padStart(2, "0");
 		const minutes = String(now.getMinutes()).padStart(2, "0");
-		const seconds = now.getSeconds();
+		const seconds = String(now.getSeconds()).padStart(2, "0");
 
 		const value = `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;
 
 		cy.get("#dateTimePickerNow")
 			.shadow()
-			.find("[ui5-input]")
+			.find("[ui5-datetime-input]")
 			.should("have.attr", "value", value);
 	});
 });

package/cypress/specs/DatePicker.cy.tsx

@@ -18,7 +18,7 @@ describe("Date Picker Tests", () => {
 
 		cy.get<DatePicker>("@datePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.should("be.visible");
 
 		cy.get<DatePicker>("@datePicker")
@@ -97,12 +97,18 @@ describe("Date Picker Tests", () => {
 
 		cy.get("@datePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.should("have.attr", "value-state", "Negative");
+		
+		cy.get("@datePicker")
+			.shadow()
+			.find("[slot='header']")
+			.first()
+			.should("have.text", "Invalid entry");
 
 		cy.get("@datePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.shadow()
 			.find(".ui5-input-content")
 			.should("be.visible");
@@ -145,7 +151,7 @@ describe("Date Picker Tests", () => {
 		cy.get("[ui5-date-picker]")
 			.as("datePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.should("have.attr", "required");
 
 		cy.get<DatePicker>("@datePicker")
@@ -902,7 +908,7 @@ describe("Date Picker Tests", () => {
 
 		cy.get<DatePicker>("@datePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.shadow()
 			.find(".ui5-input-content")
 			.should("be.visible");
@@ -924,7 +930,7 @@ describe("Date Picker Tests", () => {
 
 		cy.get<DatePicker>("@datePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.shadow()
 			.find(".ui5-input-content")
 			.should("be.visible");
@@ -960,7 +966,7 @@ describe("Date Picker Tests", () => {
 
 		cy.get<DatePicker>("@datePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.shadow()
 			.find(".ui5-input-content")
 			.should("be.visible");
@@ -1687,7 +1693,7 @@ describe("Legacy date customization and Islamic calendar type", () => {
 
 		cy.get("@datePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.should("have.attr", "value-state", "None");
 	});
 });

package/cypress/specs/DateRangePicker.cy.tsx

@@ -13,7 +13,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("invalid input")
@@ -21,6 +21,12 @@ describe("DateRangePicker general interaction", () => {
 
 		cy.get("@dateRangePicker")
 			.should("have.attr", "value-state", "Negative");
+
+		cy.get("@dateRangePicker")
+			.shadow()
+			.find("[slot='header']")
+			.first()
+			.should("have.text", "Invalid entry");
 	});
 
 	it("Custom Validation None", () => {
@@ -29,7 +35,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("09/09/2020 - 10/10/2020")
@@ -47,7 +53,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("09/09/2020 - 10/10/2020")
@@ -67,7 +73,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("Feb 25, 2022 @ Feb 28, 2022")
@@ -84,7 +90,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("27/09/2019 - 10/10/2019")
@@ -118,7 +124,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("05/08/2020 - 05/08/2020")
@@ -167,7 +173,7 @@ describe("DateRangePicker general interaction", () => {
 
 		cy.get("@dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realPress("F4");
@@ -193,7 +199,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.as("input")
 			.realClick()
 			.should("be.focused")
@@ -233,7 +239,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.as("input")
 			.realClick()
 			.should("be.focused")
@@ -273,7 +279,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.as("input")
 			.realClick()
 			.should("be.focused")
@@ -309,7 +315,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("Jul 17, 2020 @ Jul 16, 2020")
@@ -325,7 +331,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("Jul 17, 2020 @ Jul 16, 2020")
@@ -341,7 +347,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("2020-09-09 - 2020-10-10")
@@ -365,7 +371,7 @@ describe("DateRangePicker general interaction", () => {
 
 		cy.get("@dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realPress("F4");
@@ -412,7 +418,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realPress("F4");
@@ -432,7 +438,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("09/06/2024 - 15/06/2024")
@@ -466,7 +472,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.shadow()
 			.find("input")
 			.realClick()
@@ -484,7 +490,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realPress("F4");
@@ -507,7 +513,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("09.2024 - 11.2024")
@@ -538,7 +544,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realPress("F4");
@@ -561,7 +567,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("0001 - 0006")