fix(ui5-li): fix title update when initially empty (#2362)

When the textContent is an empty string initially, the following element is not rendered
<span part="title" class="ui5-li-title"><slot></slot></span>
Later when we update the textContent, it is not displayed as it relies on the slotting, but the slot element is not there. The issue has been found in a specific Select use case, referenced below. I considered making a ui5-select-list-item and make that change in a separate template, but I can't find side effects or visual degradations.

FIXES #2342

Author: ilhan007

packages/main/src/StandardListItem.hbs

@@ -2,9 +2,7 @@
 
 {{#*inline "listItemContent"}}
 	<div class="ui5-li-title-wrapper">
-		{{#if textContent.length}}
-			<span part="title" class="ui5-li-title"><slot></slot></span>
-		{{/if}}
+		<span part="title" class="ui5-li-title"><slot></slot></span>
 		{{#if description}}
 			<span part="description" class="ui5-li-desc">{{description}}</span>
 		{{/if}}

packages/main/test/pages/List_test_page.html

@@ -148,6 +148,13 @@ <h2 id="testHeader">Test aria</h2>
 		<ui5-li >item</ui5-li>
 	</ui5-list>
 
+	<ui5-list id="listWithEmptyItem">
+		<ui5-li id="emptyItem"></ui5-li>
+		<ui5-li>IPhone 3</ui5-li>
+		<ui5-li>HP Monitor 24</ui5-li>
+	</ui5-list>
+	<ui5-button id="changeEmptyItem">Change empty item text</ui5-button>
+
 	<script>
 		'use strict';
 
@@ -199,6 +206,10 @@ <h2 id="testHeader">Test aria</h2>
 			scrollableContiner.scroll(0, scrollableContiner.scrollHeight);
 		});
 
+		changeEmptyItem.addEventListener("click", function(e) {
+			emptyItem.textContent = "updated";
+		});
+
 		var loadMoreCounter = 0;
 		infiniteScrollEx.addEventListener("ui5-loadMore", function(e) {
 			for(var i = 0; i < 3; i++) {

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

@@ -263,4 +263,32 @@ describe("List Tests", () => {
 		assert.strictEqual(ulCustomHeader.getAttribute("aria-labelledby"),
 			null, "aria-labelledby is not present");
 	});
+
+	it("tests title is updated, when initially empty", () => {
+		const btnChangeEmptyItem = $("#changeEmptyItem");
+		const emptyItem = $("#emptyItem");
+		const NEW_TEXT = "updated";
+		const assignedNodesBefore = browser.execute(() => {
+			return document.getElementById("emptyItem").shadowRoot.querySelector("slot").assignedNodes().length;
+		});
+
+		// assert default
+		assert.strictEqual(emptyItem.getProperty("innerHTML"), "",
+			"The value is empty string");
+		assert.strictEqual(assignedNodesBefore, 0,
+			"No slotted elements as no text is present.");
+
+		// act
+		btnChangeEmptyItem.click();	// update the item textContent
+
+		const assignedNodesAfter = browser.execute(() => {
+			return document.getElementById("emptyItem").shadowRoot.querySelector("slot").assignedNodes().length;
+		});
+
+		// assert
+		assert.strictEqual(emptyItem.getProperty("innerHTML"), NEW_TEXT,
+			"The value is updated");
+		assert.strictEqual(assignedNodesAfter, 1,
+			"The new text is slotted.");
+	});
 });