From 3c349b9d886d70e19d2527493315701d98d519c6 Mon Sep 17 00:00:00 2001 From: Adrian Bobev Date: Tue, 26 Feb 2019 15:08:08 +0200 Subject: [PATCH 1/2] fix(ui5-tabcontainer): left arrow correctly scrolls to left in textOnly Fixes: https://github.com/SAP/ui5-webcomponents/issues/94 --- packages/main/src/TabContainer.js | 2 +- .../main/pages/TabContainer.html | 9 ++-- packages/main/test/specs/TabContainer.spec.js | 47 ++++++++++++++++++- 3 files changed, 52 insertions(+), 6 deletions(-) diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index d37b799f8da8..7abff5f282b0 100644 --- a/packages/main/src/TabContainer.js +++ b/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(); diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/TabContainer.html b/packages/main/test/sap/ui/webcomponents/main/pages/TabContainer.html index 0704fbb1e285..6013e28ba6ce 100644 --- a/packages/main/test/sap/ui/webcomponents/main/pages/TabContainer.html +++ b/packages/main/test/sap/ui/webcomponents/main/pages/TabContainer.html @@ -103,7 +103,7 @@
Horizontal design
Icons only
- + Button 11 Button 12 @@ -117,14 +117,15 @@
Icons only
Text Only
- + Button 11 Button 12 + Button 2 - + Button 3 @@ -173,4 +174,4 @@
Text and Count Inline Mode
}); - \ No newline at end of file + diff --git a/packages/main/test/specs/TabContainer.spec.js b/packages/main/test/specs/TabContainer.spec.js index 3e283055996b..bfa154bc2178 100644 --- a/packages/main/test/specs/TabContainer.spec.js +++ b/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."); }); -}); \ No newline at end of file + + 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); + + 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); + + 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); + + 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); + + 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"); + }); +}); From ad4c9b2437745cc48c802ef15d923c4367e3bd1f Mon Sep 17 00:00:00 2001 From: Adrian Bobev Date: Tue, 26 Feb 2019 15:42:31 +0200 Subject: [PATCH 2/2] add comments for todo on some lines --- packages/main/test/specs/TabContainer.spec.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/main/test/specs/TabContainer.spec.js b/packages/main/test/specs/TabContainer.spec.js index bfa154bc2178..dc7b1739ebb3 100644 --- a/packages/main/test/specs/TabContainer.spec.js +++ b/packages/main/test/specs/TabContainer.spec.js @@ -29,13 +29,13 @@ describe("TabContainer general interaction", () => { assert.ok(arrowRight.isDisplayed(), "'Right Arrow' should be initially shown"); arrowRight.click(); - browser.pause(300); + 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); + 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"); @@ -52,13 +52,13 @@ describe("TabContainer general interaction", () => { assert.ok(arrowRight.isDisplayed(), "'Right Arrow' should be initially shown"); arrowRight.click(); - browser.pause(300); + 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); + 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");