diff --git a/packages/fiori/src/FlexibleColumnLayout.js b/packages/fiori/src/FlexibleColumnLayout.js index a4a832ab73d7..7f9f20086281 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"); });