fix(ui5-tabcontainer): left arrow correctly scrolls to left in textOnly (#97)

Fixes: #94

Author: adrian-bobev

packages/main/src/TabContainer.js

@@ -755,7 +755,7 @@ class TabContainer extends WebComponent {
 	}
 
 	_navigationIconPress(icon) {
-		if (icon.classList.contains("sapMITBArrowScrollLeft")) {
+		if (icon.classList.contains("sapMITBArrowScrollLeft") || icon.classList.contains("sapMITBArrowScrollLeftTextOnly")) {
 			this._leftArrow.onPress();
 		} else {
 			this._rightArrow.onPress();

packages/main/test/sap/ui/webcomponents/main/pages/TabContainer.html

@@ -103,7 +103,7 @@ <h5>Horizontal design</h5>
 		</ui5-tabcontainer>
 
 		<h5>Icons only</h5>
-		<ui5-tabcontainer show-overflow="true" selected-index="1">
+		<ui5-tabcontainer show-overflow="true" selected-index="1" id="tabContainerIconOnly">
 			<ui5-tab key="item1" icon="sap-icon://employee" count="12343455">
 				<ui5-button>Button 11</ui5-button>
 				<ui5-button>Button 12</ui5-button>
@@ -117,14 +117,15 @@ <h5>Icons only</h5>
 
 
 		<h5>Text Only</h5>
-		<ui5-tabcontainer show-overflow="true" selected-index="3">
+		<ui5-tabcontainer show-overflow="true" id="tabContainerTextOnly">
 			<ui5-tab key="item1" text="Tab 1">
 				<ui5-button>Button 11</ui5-button>
 				<ui5-button>Button 12</ui5-button>
 			</ui5-tab>
 			<ui5-tab key="item2" text="Tab 2">
+				<ui5-button>Button 2</ui5-button>
 			</ui5-tab>
-			<ui5-tab key="item3" text="Tab 2">
+			<ui5-tab key="item3" text="Tab 3">
 				<ui5-button>Button 3</ui5-button>
 			</ui5-tab>
 		</ui5-tabcontainer>
@@ -173,4 +174,4 @@ <h5>Text and Count Inline Mode</h5>
 		});
 </script>
 </body>
-</html>
+</html>

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

@@ -18,4 +18,49 @@ describe("TabContainer general interaction", () => {
 		assert.strictEqual(field2.getProperty("value"), SELECTED_TAB_KEY, "Item data-key is retrieved correctly");
 		assert.strictEqual(field3.getProperty("value"), SELECTED_TAB_TEXT, "Item text is retrieved correctly.");
 	});
-});
+
+	it("scroll works on iconsOnly TabContainer", () => {
+		browser.setWindowSize(250, 1080);
+
+		const arrowLeft = browser.findElementDeep("#tabContainerIconOnly >>> .sapMITBArrowScrollLeft");
+		const arrowRight = browser.findElementDeep("#tabContainerIconOnly >>> .sapMITBArrowScrollRight");
+
+		assert.ok(!arrowLeft.isDisplayed(), "'Left Arrow' should be initially hidden");
+		assert.ok(arrowRight.isDisplayed(), "'Right Arrow' should be initially shown");
+
+		arrowRight.click();
+		browser.pause(300); // TODO: wait for animation finish. Remove when solved on framework level
+
+		assert.ok(arrowLeft.isDisplayed(), "'Left Arrow' should be shown after 'Right Arrow' click");
+		assert.ok(!arrowRight.isDisplayed(), "'Right Arrow' should be hidden after 'Right Arrow' click");
+
+		arrowLeft.click();
+		browser.pause(300); // TODO: wait for animation finish. Remove when solved on framework level
+
+		assert.ok(!arrowLeft.isDisplayed(), "'Left Arrow' should be hidden after 'Left Arrow' click");
+		assert.ok(arrowRight.isDisplayed(), "'Right Arrow' should be shown after 'Left Arrow' click");
+	});
+
+	it("scroll works on textOnly TabContainer", () => {
+		browser.setWindowSize(250, 1080);
+		browser.findElementDeep("#tabContainerTextOnly").scrollIntoView();
+
+		const arrowLeft = browser.findElementDeep("#tabContainerTextOnly >>> .sapMITBArrowScrollLeftTextOnly");
+		const arrowRight = browser.findElementDeep("#tabContainerTextOnly >>> .sapMITBArrowScrollRightTextOnly");
+
+		assert.ok(!arrowLeft.isDisplayed(), "'Left Arrow' should be initially hidden");
+		assert.ok(arrowRight.isDisplayed(), "'Right Arrow' should be initially shown");
+
+		arrowRight.click();
+		browser.pause(300); // TODO: wait for animation finish. Remove when solved on framework level
+
+		assert.ok(arrowLeft.isDisplayed(), "'Left Arrow' should be shown after 'Right Arrow' click");
+		assert.ok(!arrowRight.isDisplayed(), "'Right Arrow' should be hidden after 'Right Arrow' click");
+
+		arrowLeft.click();
+		browser.pause(300); // TODO: wait for animation finish. Remove when solved on framework level
+
+		assert.ok(!arrowLeft.isDisplayed(), "'Left Arrow' should be hidden after 'Left Arrow' click");
+		assert.ok(arrowRight.isDisplayed(), "'Right Arrow' should be shown after 'Left Arrow' click");
+	});
+});