fix(ui5-split-button): fix JS error on empty text content (#4612)

When the default slot is empty, e.g no text is provided, the this.text[0].textContent throws an error. Instead, call to this.textContent is sufficient. Fixes: #4609
SAP · Jan 24, 2022 · c407fd1 · c407fd1
1 parent 11e686f
commit c407fd1
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/packages/main/src/SplitButton.js b/packages/main/src/SplitButton.js
@@ -389,7 +389,7 @@ class SplitButton extends UI5Element {
 	}
 
 	get textButtonAccText() {
-		return this.text[0].textContent;
+		return this.textContent;
 	}
 
 	get textButton() {

diff --git a/packages/main/test/pages/SplitButton.html b/packages/main/test/pages/SplitButton.html
@@ -66,6 +66,11 @@ <h3 class="header-title">Text Direction</h3>
 	<div class="samples-margin">
 		<ui5-switch id="direction" text-on="RTL" text-off="LTR"></ui5-input>
 	</div>
+
+	<h3>Test textContent</h3>
+	<ui5-split-button id="emptySpBtn" design="Default"></ui5-split-button>
+	<ui5-split-button id="defaultSpBtn" design="Default">Default</ui5-split-button>
+
 </body>
 <script>
 	var displayEvent = document.getElementById("displayEvent"),
@@ -84,7 +89,7 @@ <h3 class="header-title">Text Direction</h3>
 
 	function displayEventDetails(event) {
 		displayEvent.value = event.type;
-		displayElement.value = event.target.text[0].textContent;
+		displayElement.value = event.target.textContent;
 		setTimeout(function() {
 			displayEvent.value = "";
 			displayElement.value = "";

diff --git a/packages/main/test/specs/SplitButton.spec.js b/packages/main/test/specs/SplitButton.spec.js
@@ -13,6 +13,21 @@ describe("Split Button general interaction", () => {
 		assert.strictEqual(await arrowButton.getAttribute("design"), design, "Arrow button have proper design");
 	});
 
+	it("tests textContent on 'click'", async () => {
+		await browser.url(`http://localhost:${PORT}/test-resources/pages/SplitButton.html`);
+		const sbEmpty = await browser.$("#emptySpBtn");
+		const textButton1 = await sbEmpty.shadow$(".ui5-split-text-button");
+		const sbDefault = await browser.$("#defaultSpBtn");
+		const textButton2 = await sbDefault.shadow$(".ui5-split-text-button");
+		const field = await browser.$("#displayElement");
+
+		await textButton1.click({x: 1, y: 1});
+		assert.strictEqual(await field.getValue(), "", "Button text is empty string");
+
+		await textButton2.click({x: 1, y: 1});
+		assert.strictEqual(await field.getValue(), "Default", "Button text is 'Default'");
+	});
+
 	it("tests text button 'click' event (mouse)", async () => {
 		await browser.url(`http://localhost:${PORT}/test-resources/pages/SplitButton.html`);
 		const sbDefault = await browser.$("#sbDefault");