fix(ui5-timepicker): prevent setting valueState="Error" on empty value

- Fixes the issue: when the user clears the input of the TimePicker, value-state="Error' is set, but should not as empty value is allowed and valid (this is how it works in openui5). And, the user also gets "change" event and he/she always can set  "Error" state when encounter an empty value.
- Refactors the TimePicker tests entirely, as they used to depend on some hardcoded ids that change whenever we add new TimePicker components in the test page.

FIXES: #1398

Author: ilhan007

packages/main/src/TimePicker.js

@@ -540,15 +540,26 @@ class TimePicker extends UI5Element {
 	}
 
 	/**
-	 * Opens the picker.
+	 * Checks if a value is valid against the current format patternt of the TimePicker.
+	 *
+	 * <br><br>
+	 * <b>Note:</b> an empty string is considered as valid value.
+	 * @param {string} value The value to be tested against the current date format
 	 * @public
 	 */
-	isValid(value = "") {
+	isValid(value) {
+		if (value === "") {
+			return true;
+		}
 		return !!(value && this.getFormat().parse(value));
 	}
 
-	normalizeValue(sValue) {
-		return this.getFormat().format(this.getFormat().parse(sValue));
+	normalizeValue(value) {
+		if (value === "") {
+			return value;
+		}
+
+		return this.getFormat().format(this.getFormat().parse(value));
 	}
 
 	get _formatPattern() {

packages/main/test/pages/TimePicker.html

@@ -24,7 +24,7 @@
 		<ui5-timepicker id="timepicker2" format-pattern="hh:mm:ss" value=""></ui5-timepicker>
 		<ui5-timepicker id="timepicker3" format-pattern="hh:mm:ss a"></ui5-timepicker>
 		<ui5-timepicker id="timepicker3" format-pattern="HH:mm"></ui5-timepicker>
-
+	
 		<br /><br />
 		<ui5-title>Test "change" event</ui5-title>
 		<ui5-timepicker id="timepickerChange"></ui5-timepicker>
@@ -35,6 +35,12 @@
 		<ui5-timepicker id="timepickerInput"></ui5-timepicker>
 		<ui5-input id="inputResult"></ui5-input>
 
+
+		<br /><br />
+		<ui5-title>Test empty value</ui5-title>
+		<ui5-timepicker id="timepickerEmptyValue"></ui5-timepicker>
+		<ui5-button id="testBtn">btn for testing</ui5-button>
+
 		<script>
 				var counter = 0;
 				timepickerChange.addEventListener("change", function() {

packages/main/test/specs/TimePicker.spec.js

@@ -4,38 +4,63 @@ describe("TimePicker general interaction", () => {
 	browser.url("http://localhost:8080/test-resources/pages/TimePicker.html");
 
 	it("tests sliders value", () => {
-		browser.$("#timepicker").setProperty("value", "11:12:13");
-		browser.$("#timepicker").shadow$("ui5-input").$(".ui5-timepicker-input-icon-button").click();
+		const timepicker = browser.$("#timepicker");
+		const staticAreaItemClassName = browser.getStaticAreaItemClassName("#timepicker");
+		const timepickerPopover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+
+		// act
+		timepicker.setProperty("value", "11:12:13");
+		timepicker.shadow$("ui5-input").$(".ui5-timepicker-input-icon-button").click();
 
-		const timepickerPopover = browser.$$(".ui5wc_5")[0].shadow$$(".ui5-timepicker-popover")[0];
 		const hoursSliderValue = timepickerPopover.$(".ui5-timepicker-hours-wheelslider").getValue();
 		const minutesSliderValue = timepickerPopover.$(".ui5-timepicker-minutes-wheelslider").getValue();
 		const secondsSliderValue = timepickerPopover.$(".ui5-timepicker-seconds-wheelslider").getValue();
 
+		// assert
 		assert.strictEqual(hoursSliderValue, "11", "Hours are equal");
 		assert.strictEqual(minutesSliderValue, "12", "Minutes are equal");
 		assert.strictEqual(secondsSliderValue, "13", "Minutes are equal");
 	});
 
 	it("tests sliders submit value", () => {
-		const timepickerPopover = browser.$$(".ui5wc_5")[0].shadow$$(".ui5-timepicker-popover")[0];
+		const timepicker = browser.$("#timepicker");
+		const staticAreaItemClassName = browser.getStaticAreaItemClassName("#timepicker");
+		const timepickerPopover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
 
-		timepickerPopover.setProperty("opened",true);
+		// act
+		timepickerPopover.setProperty("opened", true);
 		timepickerPopover.$(".ui5-timepicker-hours-wheelslider").setProperty("value","14");
 		timepickerPopover.$(".ui5-timepicker-minutes-wheelslider").setProperty("value","15");
 		timepickerPopover.$(".ui5-timepicker-seconds-wheelslider").setProperty("value","16");
 		timepickerPopover.$("#submit").click();
 
-		const textValue = browser.$("#timepicker").shadow$$("#ui5wc_5-inner")[0].getValue();
+		const textValue = timepicker.shadow$("ui5-input").getValue();
 		assert.strictEqual(textValue.substring(0,2), "14", "Hours are equal");
 		assert.strictEqual(textValue.substring(3,5), "15", "Minutes are equal");
 	});
 
 	it("tests submit wrong value", () => {
-		browser.$("#timepicker").click();
-		browser.$("#timepicker").keys("123123123");
-		browser.$("#timepicker").keys("Enter");
+		const timepicker = browser.$("#timepicker");
+
+		timepicker.click();
+		timepicker.keys("123123123");
+		timepicker.keys("Enter");
+
+		assert.strictEqual(timepicker.shadow$("ui5-input").getProperty("valueState"), "Error", "The value state is on error");
+	});
+
+	it("tests value state", () => {
+		const timepicker = browser.$("#timepickerEmptyValue");
+		const button = browser.$("#testBtn");
+
+		// act
+		timepicker.click();
+		while(timepicker.shadow$("ui5-input").getProperty("value") !== ""){
+			timepicker.keys("Backspace");
+		}
+		button.click();
 
-		assert.strictEqual(browser.$("#timepicker").shadow$("ui5-input").getProperty("valueState"), "Error", "The value state is on error");
+		// assert
+		assert.strictEqual(timepicker.shadow$("ui5-input").getProperty("valueState"), "None", "The value state is None");
 	});
 });