From e3cec003f2aff3fd4e81e12966d52a800ce4684d Mon Sep 17 00:00:00 2001 From: ilhan Date: Fri, 24 Jul 2020 16:09:04 +0300 Subject: [PATCH 1/2] fix(ui5-flexible-column-layout): Fix media breakpoints --- packages/fiori/src/FlexibleColumnLayout.js | 8 ++++---- packages/fiori/test/specs/FCL.spec.js | 17 +++++++++-------- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/fiori/src/FlexibleColumnLayout.js b/packages/fiori/src/FlexibleColumnLayout.js index a4a832ab73d7..3719c0853106 100644 --- a/packages/fiori/src/FlexibleColumnLayout.js +++ b/packages/fiori/src/FlexibleColumnLayout.js @@ -239,8 +239,8 @@ class FlexibleColumnLayout extends UI5Element { static get BREAKPOINTS() { return { - "M": 960, - "L": 1280, + "PHONE": 599, + "TABLET": 1023, }; } @@ -563,11 +563,11 @@ class FlexibleColumnLayout extends UI5Element { } get media() { - if (this._width <= FlexibleColumnLayout.BREAKPOINTS.M) { + if (this._width <= FlexibleColumnLayout.BREAKPOINTS.PHONE) { return FlexibleColumnLayout.MEDIA.PHONE; } - if (this._width <= FlexibleColumnLayout.BREAKPOINTS.L) { + if (this._width <= FlexibleColumnLayout.BREAKPOINTS.TABLET) { return FlexibleColumnLayout.MEDIA.TABLET; } diff --git a/packages/fiori/test/specs/FCL.spec.js b/packages/fiori/test/specs/FCL.spec.js index 2ed5080f0bbe..1300a4470309 100644 --- a/packages/fiori/test/specs/FCL.spec.js +++ b/packages/fiori/test/specs/FCL.spec.js @@ -20,9 +20,9 @@ describe("FlexibleColumnLayout Behavior", () => { assert.strictEqual(layoutChangeCounter.getValue(), "1", "The event layout-change is not fired."); }); - it("tests Tablet Size 1200px", () => { + it("tests Tablet Size 1000px", () => { // act - browser.setWindowSize(1200, 1080); + browser.setWindowSize(1000, 1080); const layoutChangeCounter = browser.$("#testLayoutChange"); const visibleColumns = browser.execute(() => { @@ -35,9 +35,9 @@ describe("FlexibleColumnLayout Behavior", () => { assert.strictEqual(layoutChangeCounter.getValue(), "2", "The event layout-change after resizing."); }); - it("tests Phone size 870px", () => { + it("tests Phone size 500px", () => { // act - browser.setWindowSize(870, 1080); + browser.setWindowSize(500, 1080); const layoutChangeCounter = browser.$("#testLayoutChange"); const visibleColumns = browser.execute(() => { @@ -57,19 +57,20 @@ describe("FlexibleColumnLayout Behavior", () => { const fcl = browser.$("#fcl1"); const layoutChangeCounter = browser.$("#layoutChangeRes4"); const arrow = fcl.shadow$(".ui5-fcl-arrow--start"); + let counter = parseInt(layoutChangeCounter.getValue()) || 0; // act arrow.click(); - // assert (two times the event has been fired due resize already) - assert.strictEqual(layoutChangeCounter.getValue(), "4", "The event layout-change fired once."); + // assert + assert.strictEqual(layoutChangeCounter.getValue(), `${++counter}`, "The event layout-change fired once."); assert.strictEqual(fcl.getProperty("layout"), "TwoColumnsMidExpanded", "new layout set"); // act arrow.click(); - // // assert - assert.strictEqual(layoutChangeCounter.getValue(), "5", "The event layout-change fired again."); + // assert + assert.strictEqual(layoutChangeCounter.getValue(), `${++counter}`, "The event layout-change fired again."); assert.strictEqual(fcl.getProperty("layout"), "TwoColumnsStartExpanded", "new layout set"); }); From 5d705d5c320aff928e50cbfe365bb4e367385791 Mon Sep 17 00:00:00 2001 From: ilhan Date: Fri, 24 Jul 2020 19:26:41 +0300 Subject: [PATCH 2/2] eslint --- packages/fiori/src/FlexibleColumnLayout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fiori/src/FlexibleColumnLayout.js b/packages/fiori/src/FlexibleColumnLayout.js index 3719c0853106..7f9f20086281 100644 --- a/packages/fiori/src/FlexibleColumnLayout.js +++ b/packages/fiori/src/FlexibleColumnLayout.js @@ -239,7 +239,7 @@ class FlexibleColumnLayout extends UI5Element { static get BREAKPOINTS() { return { - "PHONE": 599, + "PHONE": 599, "TABLET": 1023, }; }