Skip to content

Commit a92742c

Browse files
kineticjsilhan007
kineticjs
and
ilhan007
authored
feat(ui5-flexible-column-layout): public layoutsConfiguration property (#9290)
* feat(ui5-flexible-column-layout): expose public layoutsConfiguration property * feat(ui5-flexible-Column-layout): add tests * feat(ui5-flexible-column-layout): remove json object from jsdoc * feat(ui5-flexible-column-layout): public layoutsConfiguration property * feat(ui5-flexible-column-layout): add sample and adjust widths of columns below min-width * feat(ui5-flexible-column-layout): immediate update of layout configuration * feat(ui5-flexible-column-layout): add sample * feat(ui5-flexible-column-layout): improve type declarations * feat(ui5-flexible-column-layout): improve documentation * feat(ui5-flexible-column-layout): tmp config to allow sharing a sample * feat(ui5-flexible-column-layout): tests and some refactoring * feat(ui5-flexible-column-layout): fix eslint errors * feat(ui5-flexible-column-layout): fix eslint errors * feat(ui5-flexible-column-layout): minor corrections * feat(ui5-flexible-column-layout): improve sample * feat(ui5-flexible-column-layout): improve sample * feat(ui5-flexible-column-layout): preserve legacy property for backward compatibility * feat(ui5-flexible-column-layout): correct indentation * feat(ui5-flexible-column-layout): docu improvement * feat(ui5-flexible-column-layout): docu improvement * feat(ui5-flexible-column-layout): formatting improvement * feat(ui5-flexible-column-layout): formatting improvement * Merge remote-tracking branch 'origin/main' into fcl-layout-config-api * feat(ui5-flexible-column-layout): correct version * feat(ui5-flexible-column-layout): add experimental flag * feat(ui5-flexible-column-layout): correct documentation * feat(ui5-flexible-column-layout): apply feedback --------- Co-authored-by: ilhan orhan <[email protected]>
1 parent 549785c commit a92742c

File tree

11 files changed

+991
-229
lines changed

11 files changed

+991
-229
lines changed

‎packages/fiori/cypress/specs/FCL.cy.tsx‎

Lines changed: 293 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,25 @@ describe("FlexibleColumnLayout Behavior", () => {
209209
cy.get("@fcl")
210210
.should("have.attr", "_visible-columns", "3");
211211

212+
// Assert default column widths
213+
cy.get("@fcl")
214+
.shadow()
215+
.find(".ui5-fcl-column--start")
216+
.should("have.attr", "style")
217+
.and("include", "width: 25%");
218+
219+
cy.get("@fcl")
220+
.shadow()
221+
.find(".ui5-fcl-column--middle")
222+
.should("have.attr", "style")
223+
.and("include", "width: 50%");
224+
225+
cy.get("@fcl")
226+
.shadow()
227+
.find(".ui5-fcl-column--end")
228+
.should("have.attr", "style")
229+
.and("include", "width: 25%");
230+
212231
cy.get("@layoutChangeStub")
213232
.should("not.have.been.called");
214233
});
@@ -233,6 +252,25 @@ describe("FlexibleColumnLayout Behavior", () => {
233252
cy.get("@fcl")
234253
.should("have.attr", "_visible-columns", "2");
235254

255+
// Assert default column widths for tablet size
256+
cy.get("@fcl")
257+
.shadow()
258+
.find(".ui5-fcl-column--start")
259+
.should("have.attr", "style")
260+
.and("include", "width: 0px");
261+
262+
cy.get("@fcl")
263+
.shadow()
264+
.find(".ui5-fcl-column--middle")
265+
.should("have.attr", "style")
266+
.and("include", "width: 67%");
267+
268+
cy.get("@fcl")
269+
.shadow()
270+
.find(".ui5-fcl-column--end")
271+
.should("have.attr", "style")
272+
.and("include", "width: 33%");
273+
236274
cy.get("@layoutChangeStub")
237275
.should("have.been.calledOnce");
238276
});
@@ -1116,4 +1154,258 @@ describe("Accessibility with Animation Disabled", () => {
11161154
.find(".ui5-fcl-column--middle")
11171155
.should("have.attr", "aria-hidden", "true");
11181156
});
1119-
});
1157+
});
1158+
1159+
describe("Layouts configuration", () => {
1160+
const COLUMN_MIN_WIDTH = 248;
1161+
1162+
it("initial configuration", () => {
1163+
1164+
cy.mount(
1165+
<FlexibleColumnLayout layout="TwoColumnsStartExpanded">
1166+
<div slot="startColumn">some content</div>
1167+
<div slot="midColumn">some content</div>
1168+
<div slot="endColumn">some content</div>
1169+
</FlexibleColumnLayout>
1170+
);
1171+
1172+
cy.get("[ui5-flexible-column-layout]")
1173+
.as("fcl")
1174+
.then($fcl => {
1175+
$fcl.get(0).addEventListener("layout-configuration-change", cy.stub().as("layoutConfigChangeStub"));
1176+
});
1177+
1178+
// Assert resulting column widths
1179+
cy.get("@fcl")
1180+
.shadow()
1181+
.find(".ui5-fcl-column--start")
1182+
.should("have.attr", "style")
1183+
.and("include", "width: 67%");
1184+
1185+
cy.get("@fcl")
1186+
.shadow()
1187+
.find(".ui5-fcl-column--middle")
1188+
.should("have.attr", "style")
1189+
.and("include", "width: 33%");
1190+
1191+
cy.get("@fcl")
1192+
.shadow()
1193+
.find(".ui5-fcl-column--end")
1194+
.should("have.attr", "style")
1195+
.and("include", "width: 0px");
1196+
1197+
// Assert layoutsConfiguration is initially an empty object
1198+
cy.get("@fcl")
1199+
.invoke("prop", "layoutsConfiguration")
1200+
.should("deep.equal", {});
1201+
1202+
cy.get("@layoutConfigChangeStub")
1203+
.should("not.have.been.called");
1204+
});
1205+
1206+
it("allows set configuration programatically", () => {
1207+
1208+
cy.mount(
1209+
<FlexibleColumnLayout layout="TwoColumnsStartExpanded">
1210+
<div slot="startColumn">some content</div>
1211+
<div slot="midColumn">some content</div>
1212+
<div slot="endColumn">some content</div>
1213+
</FlexibleColumnLayout>
1214+
);
1215+
1216+
cy.get("[ui5-flexible-column-layout]")
1217+
.as("fcl")
1218+
.then($fcl => {
1219+
$fcl.get(0).addEventListener("layout-configuration-change", cy.stub().as("layoutConfigChangeStub"));
1220+
});
1221+
1222+
// Set layoutsConfiguration programmatically
1223+
cy.get("@fcl")
1224+
.invoke("prop", "layoutsConfiguration", {
1225+
"desktop": {
1226+
"TwoColumnsStartExpanded": {
1227+
layout: ["75%", "25%", "0%"]
1228+
}
1229+
}
1230+
});
1231+
1232+
// Assert resulting column widths
1233+
cy.get("@fcl")
1234+
.shadow()
1235+
.find(".ui5-fcl-column--start")
1236+
.should("have.attr", "style")
1237+
.and("include", "width: 75%");
1238+
1239+
cy.get("@fcl")
1240+
.shadow()
1241+
.find(".ui5-fcl-column--middle")
1242+
.should("have.attr", "style")
1243+
.and("include", "width: 25%");
1244+
1245+
cy.get("@fcl")
1246+
.shadow()
1247+
.find(".ui5-fcl-column--end")
1248+
.should("have.attr", "style")
1249+
.and("include", "width: 0px");
1250+
1251+
cy.get("@layoutConfigChangeStub")
1252+
.should("not.have.been.called");
1253+
});
1254+
1255+
it("fires layout-configuration-change event when dragging separator within same layout", () => {
1256+
cy.mount(
1257+
<FlexibleColumnLayout
1258+
layout="TwoColumnsStartExpanded">
1259+
<div slot="startColumn">Start</div>
1260+
<div slot="midColumn">Mid</div>
1261+
<div slot="endColumn">End</div>
1262+
</FlexibleColumnLayout>
1263+
);
1264+
1265+
cy.get("[ui5-flexible-column-layout]").then(($fcl) => {
1266+
const fcl = $fcl[0];
1267+
fcl.addEventListener("layout-configuration-change", cy.stub().as("layoutConfigurationChanged"));
1268+
});
1269+
1270+
cy.get("[ui5-flexible-column-layout]").as("fcl");
1271+
1272+
// resize the columns within the same layout-type
1273+
cy.get("@fcl")
1274+
.shadow()
1275+
.find(".ui5-fcl-separator-start")
1276+
.should("be.visible")
1277+
.realMouseDown()
1278+
.realMouseMove(10, 0)
1279+
.realMouseUp();
1280+
1281+
cy.get("@layoutConfigurationChanged").should("have.been.calledOnce");
1282+
cy.get("@fcl").should("have.prop", "layout", "TwoColumnsStartExpanded");
1283+
1284+
// Check that layoutsConfiguration property has the expected structure
1285+
cy.get("@fcl").invoke("prop", "layoutsConfiguration").then((layoutsConfig: any) => {
1286+
expect(layoutsConfig).to.have.property("desktop");
1287+
expect(layoutsConfig.desktop).to.have.property("TwoColumnsStartExpanded");
1288+
expect(layoutsConfig.desktop.TwoColumnsStartExpanded).to.have.property("layout");
1289+
expect(layoutsConfig.desktop.TwoColumnsStartExpanded.layout).to.be.an("array");
1290+
expect(layoutsConfig.desktop.TwoColumnsStartExpanded.layout).to.have.length(3);
1291+
expect(layoutsConfig.desktop.TwoColumnsStartExpanded.layout).to.satisfy((arr: any[]) =>
1292+
arr.every(item => typeof item === "string")
1293+
);
1294+
1295+
// Check the exact values of the layout array
1296+
const layoutArray = layoutsConfig.desktop.TwoColumnsStartExpanded.layout;
1297+
1298+
// 1) Calling parseInt on each of them should return a number
1299+
const parsedNumbers = layoutArray.map((item: string) => parseInt(item, 10));
1300+
expect(parsedNumbers).to.satisfy((nums: number[]) =>
1301+
nums.every(num => !isNaN(num))
1302+
);
1303+
1304+
// 2) The last number should be 0
1305+
expect(parsedNumbers[2]).to.equal(0);
1306+
1307+
// 3) The first number should be greater than the second number
1308+
expect(parsedNumbers[0]).to.be.greaterThan(parsedNumbers[1]);
1309+
});
1310+
});
1311+
1312+
it("fires layout-configuration-change event when dragging separator to update the layout", () => {
1313+
cy.mount(
1314+
<FlexibleColumnLayout
1315+
layout="TwoColumnsStartExpanded">
1316+
<div slot="startColumn">Start</div>
1317+
<div slot="midColumn">Mid</div>
1318+
<div slot="endColumn">End</div>
1319+
</FlexibleColumnLayout>
1320+
);
1321+
1322+
cy.get("[ui5-flexible-column-layout]").then(($fcl) => {
1323+
const fcl = $fcl[0];
1324+
fcl.addEventListener("layout-configuration-change", cy.stub().as("layoutConfigurationChanged"));
1325+
});
1326+
1327+
cy.get("[ui5-flexible-column-layout]").as("fcl");
1328+
1329+
// resize the columns to a new layout-type
1330+
cy.get("@fcl")
1331+
.shadow()
1332+
.find(".ui5-fcl-separator-start")
1333+
.should("be.visible")
1334+
.realMouseDown()
1335+
.realMouseMove(-400, 0)
1336+
.realMouseUp();
1337+
1338+
cy.get("@layoutConfigurationChanged").should("have.been.calledOnce");
1339+
cy.get("@fcl").should("have.prop", "layout", "TwoColumnsMidExpanded");
1340+
1341+
// Check that layoutsConfiguration property has the expected structure
1342+
cy.get("@fcl").invoke("prop", "layoutsConfiguration").then((layoutsConfig: any) => {
1343+
expect(layoutsConfig).to.have.property("desktop");
1344+
expect(layoutsConfig.desktop).to.have.property("TwoColumnsMidExpanded");
1345+
expect(layoutsConfig.desktop.TwoColumnsMidExpanded).to.have.property("layout");
1346+
expect(layoutsConfig.desktop.TwoColumnsMidExpanded.layout).to.be.an("array");
1347+
expect(layoutsConfig.desktop.TwoColumnsMidExpanded.layout).to.have.length(3);
1348+
expect(layoutsConfig.desktop.TwoColumnsMidExpanded.layout).to.satisfy((arr: any[]) =>
1349+
arr.every(item => typeof item === "string")
1350+
);
1351+
1352+
// Check the exact values of the layout array
1353+
const layoutArray = layoutsConfig.desktop.TwoColumnsMidExpanded.layout;
1354+
1355+
// 1) Calling parseInt on each of them should return a number
1356+
const parsedNumbers = layoutArray.map((item: string) => parseInt(item, 10));
1357+
expect(parsedNumbers).to.satisfy((nums: number[]) =>
1358+
nums.every(num => !isNaN(num))
1359+
);
1360+
1361+
// 2) The last number should be 0
1362+
expect(parsedNumbers[2]).to.equal(0);
1363+
1364+
// 3) The first number should be smaller than the second number
1365+
expect(parsedNumbers[0]).to.be.lessThan(parsedNumbers[1]);
1366+
});
1367+
});
1368+
1369+
it("applies min width constraints", () => {
1370+
1371+
cy.mount(
1372+
<FlexibleColumnLayout layout="ThreeColumnsMidExpanded">
1373+
<div slot="startColumn">some content</div>
1374+
<div slot="midColumn">some content</div>
1375+
<div slot="endColumn">some content</div>
1376+
</FlexibleColumnLayout>
1377+
);
1378+
1379+
cy.get("[ui5-flexible-column-layout]")
1380+
.as("fcl")
1381+
.then($fcl => {
1382+
$fcl.get(0).addEventListener("layout-configuration-change", cy.stub().as("layoutConfigChangeStub"));
1383+
});
1384+
1385+
// Set layoutsConfiguration programmatically
1386+
cy.get("@fcl")
1387+
.invoke("prop", "layoutsConfiguration", {
1388+
"desktop": {
1389+
"ThreeColumnsMidExpanded": {
1390+
layout: ["10%", "80%", "10%"]
1391+
}
1392+
}
1393+
});
1394+
1395+
// Assert resulting column widths respect minimum width constraint
1396+
cy.get("@fcl")
1397+
.shadow()
1398+
.find(".ui5-fcl-column--start")
1399+
.should("have.prop", "offsetWidth", COLUMN_MIN_WIDTH);
1400+
1401+
cy.get("@fcl")
1402+
.shadow()
1403+
.find(".ui5-fcl-column--end")
1404+
.should("have.prop", "offsetWidth", COLUMN_MIN_WIDTH);
1405+
1406+
cy.get("@layoutConfigChangeStub")
1407+
.should("not.have.been.called");
1408+
});
1409+
1410+
});
1411+

0 commit comments

Comments
 (0)