Skip to content

Commit b621214

Browse files
ddariboddaribo
committed
chore(splitter): resize tests checkpoint
1 parent 15a03e7 commit b621214

File tree

1 file changed

+247
-64
lines changed

1 file changed

+247
-64
lines changed

‎src/components/splitter/splitter.spec.ts‎

Lines changed: 247 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -301,34 +301,88 @@ describe('Splitter', () => {
301301
expect(style.maxHeight).to.equal('500px');
302302
});
303303

304-
it('should handle percentage sizes', async () => {
305-
const splitter = await fixture<IgcSplitterComponent>(
306-
createTwoPanesWithSizesAndConstraints({
307-
startSize: '30%',
308-
endSize: '70%',
309-
startMinSize: '20%',
310-
startMaxSize: '80%',
311-
})
312-
);
313-
await elementUpdated(splitter);
314-
315-
const startPane = getSplitterPart(splitter, 'start-pane');
316-
const style1 = getComputedStyle(startPane);
317-
318-
const endPane = getSplitterPart(splitter, 'end-pane');
319-
const style2 = getComputedStyle(endPane);
320-
321-
expect(splitter.startSize).to.equal('30%');
322-
expect(splitter.endSize).to.equal('70%');
323-
expect(style1.flex).to.equal('0 1 30%');
324-
expect(style2.flex).to.equal('0 1 70%');
325-
326-
expect(splitter.startMinSize).to.equal('20%');
327-
expect(splitter.startMaxSize).to.equal('80%');
328-
expect(style1.minWidth).to.equal('20%');
329-
expect(style1.maxWidth).to.equal('80%');
304+
it('should handle percentage sizes - horizontal and vertical', async () => {
305+
const testPercentageSizes = async (orientation: SplitterOrientation) => {
306+
const splitter = await fixture<IgcSplitterComponent>(
307+
createTwoPanesWithSizesAndConstraints({
308+
orientation,
309+
startSize: '30%',
310+
endSize: '70%',
311+
startMinSize: '20%',
312+
startMaxSize: '80%',
313+
splitterWidth: '1000px',
314+
})
315+
);
316+
await elementUpdated(splitter);
317+
318+
const totalAvailable = getTotalSize(
319+
splitter,
320+
orientation === 'horizontal' ? 'width' : 'height'
321+
);
322+
const startPane = getSplitterPart(splitter, 'start-pane');
323+
const style1 = getComputedStyle(startPane);
324+
325+
const endPane = getSplitterPart(splitter, 'end-pane');
326+
const style2 = getComputedStyle(endPane);
327+
const sizes = getPanesSizes(
328+
splitter,
329+
orientation === 'horizontal' ? 'width' : 'height'
330+
);
331+
332+
expect(sizes.startSize).to.be.closeTo(totalAvailable * 0.3, 2);
333+
expect(sizes.endSize).to.be.closeTo(totalAvailable * 0.7, 2);
334+
335+
expect(splitter.startSize).to.equal('30%');
336+
expect(splitter.endSize).to.equal('70%');
337+
expect(style1.flex).to.equal('0 1 30%');
338+
expect(style2.flex).to.equal('0 1 70%');
339+
340+
expect(splitter.startMinSize).to.equal('20%');
341+
expect(splitter.startMaxSize).to.equal('80%');
342+
343+
const minProp = orientation === 'horizontal' ? 'minWidth' : 'minHeight';
344+
expect(style1[minProp]).to.equal('20%');
345+
const maxProp = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
346+
expect(style1[maxProp]).to.equal('80%');
347+
};
348+
349+
await testPercentageSizes('horizontal');
350+
await testPercentageSizes('vertical');
351+
});
330352

331-
// TODO: test with drag; add constraints to second pane
353+
it('should handle mixed % and auto size - horizontal and vertical', async () => {
354+
const testMixedSizes = async (orientation: SplitterOrientation) => {
355+
const splitter = await fixture<IgcSplitterComponent>(
356+
createTwoPanesWithSizesAndConstraints({
357+
orientation,
358+
endSize: '30%',
359+
splitterWidth: '1000px',
360+
})
361+
);
362+
await elementUpdated(splitter);
363+
364+
const totalAvailable = getTotalSize(
365+
splitter,
366+
orientation === 'horizontal' ? 'width' : 'height'
367+
);
368+
369+
const startPart = getSplitterPart(splitter, 'start-pane');
370+
const style = getComputedStyle(startPart);
371+
expect(style.flex).to.equal('1 1 auto');
372+
373+
const sizes = getPanesSizes(
374+
splitter,
375+
orientation === 'horizontal' ? 'width' : 'height'
376+
);
377+
const expectedEndSize = roundPrecise((30 / 100) * totalAvailable, 2);
378+
expect(sizes.endSize).to.be.closeTo(expectedEndSize, 2);
379+
380+
const endPart = getSplitterPart(splitter, 'end-pane');
381+
const styleEnd = getComputedStyle(endPart);
382+
expect(styleEnd.flex).to.equal('0 1 30%');
383+
};
384+
await testMixedSizes('horizontal');
385+
await testMixedSizes('vertical');
332386
});
333387
});
334388

@@ -864,10 +918,10 @@ describe('Splitter', () => {
864918

865919
const isX = orientation === 'horizontal';
866920

867-
const bar = getSplitterPart(constraintSplitter, 'bar');
868-
const barSize = bar.getBoundingClientRect()[isX ? 'width' : 'height'];
869-
const totalAvailable = 500 - barSize;
870-
expect(totalAvailable).to.equal(495);
921+
const totalAvailable = getTotalSize(
922+
constraintSplitter,
923+
isX ? 'width' : 'height'
924+
);
871925

872926
let delta = 1000;
873927
await resize(constraintSplitter, isX ? delta : 0, isX ? 0 : delta);
@@ -898,7 +952,7 @@ describe('Splitter', () => {
898952
expect(sizes.endSize).to.be.closeTo(expectedEndMax, 2);
899953
};
900954

901-
const testConflictingConstraints = async (
955+
const testConflictingConstraintsInPx = async (
902956
orientation: SplitterOrientation
903957
) => {
904958
const constraintSplitter = await fixture<IgcSplitterComponent>(
@@ -916,10 +970,10 @@ describe('Splitter', () => {
916970

917971
const isX = orientation === 'horizontal';
918972

919-
const bar = getSplitterPart(constraintSplitter, 'bar');
920-
const barSize = bar.getBoundingClientRect()[isX ? 'width' : 'height'];
921-
const totalAvailable = 500 - barSize;
922-
expect(totalAvailable).to.equal(495);
973+
const totalAvailable = getTotalSize(
974+
constraintSplitter,
975+
isX ? 'width' : 'height'
976+
);
923977

924978
const initialSizes = getPanesSizes(
925979
constraintSplitter,
@@ -943,6 +997,108 @@ describe('Splitter', () => {
943997
expect(sizes.startSize + sizes.endSize).to.be.at.most(totalAvailable);
944998
};
945999

1000+
const testConflictingConstraintsInPercentage = async (
1001+
orientation: SplitterOrientation
1002+
) => {
1003+
const constraintSplitter = await fixture<IgcSplitterComponent>(
1004+
createTwoPanesWithSizesAndConstraints({
1005+
orientation,
1006+
startSize: '40%',
1007+
startMinSize: '20%',
1008+
startMaxSize: '80%',
1009+
endSize: '60%',
1010+
endMinSize: '30%',
1011+
endMaxSize: '70%',
1012+
})
1013+
);
1014+
await elementUpdated(constraintSplitter);
1015+
1016+
const isX = orientation === 'horizontal';
1017+
const totalAvailable = getTotalSize(
1018+
constraintSplitter,
1019+
isX ? 'width' : 'height'
1020+
);
1021+
1022+
const initialSizes = getPanesSizes(
1023+
constraintSplitter,
1024+
isX ? 'width' : 'height'
1025+
);
1026+
const initialCombinedSize = initialSizes.startSize + initialSizes.endSize;
1027+
1028+
// Try to grow start pane to max (80%), but end pane has min (30%)
1029+
// Result: Start pane can only grow as much as end pane allows
1030+
const delta = 1000;
1031+
await resize(constraintSplitter, isX ? delta : 0, isX ? 0 : delta);
1032+
1033+
const sizes = getPanesSizes(constraintSplitter, isX ? 'width' : 'height');
1034+
1035+
// Start pane can only grow until end pane hits its minSize (30% of 495px)
1036+
// Within the initial combined size - because of flex basis
1037+
const expectedEndMin = Math.round((totalAvailable * 30) / 100);
1038+
const expectedStartAfterResize = initialCombinedSize - expectedEndMin;
1039+
1040+
expect(sizes.startSize).to.be.closeTo(expectedStartAfterResize, 2);
1041+
expect(sizes.endSize).to.be.closeTo(expectedEndMin, 2);
1042+
1043+
expect(sizes.startSize + sizes.endSize).to.be.closeTo(
1044+
initialCombinedSize,
1045+
2
1046+
);
1047+
expect(sizes.startSize + sizes.endSize).to.be.at.most(totalAvailable);
1048+
};
1049+
1050+
const testMixedConstraintsPxAndPercentage = async (
1051+
orientation: SplitterOrientation
1052+
) => {
1053+
const mixedConstraintSplitter = await fixture<IgcSplitterComponent>(
1054+
createTwoPanesWithSizesAndConstraints({
1055+
orientation,
1056+
startMinSize: '100px',
1057+
startMaxSize: '50%',
1058+
})
1059+
);
1060+
await elementUpdated(mixedConstraintSplitter);
1061+
1062+
const startPane = getSplitterPart(mixedConstraintSplitter, 'start-pane');
1063+
const style = getComputedStyle(startPane);
1064+
1065+
expect(mixedConstraintSplitter.startMinSize).to.equal('100px');
1066+
expect(mixedConstraintSplitter.startMaxSize).to.equal('50%');
1067+
const targetMinProp =
1068+
orientation === 'horizontal' ? 'minWidth' : 'minHeight';
1069+
const targetMaxProp =
1070+
orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
1071+
expect(style[targetMinProp]).to.equal('100px');
1072+
expect(style[targetMaxProp]).to.equal('50%');
1073+
1074+
const isX = orientation === 'horizontal';
1075+
const totalAvailable = getTotalSize(
1076+
mixedConstraintSplitter,
1077+
isX ? 'width' : 'height'
1078+
);
1079+
const expectedEndMax = Math.round((totalAvailable * 50) / 100);
1080+
1081+
let delta = 1000;
1082+
await resize(mixedConstraintSplitter, isX ? delta : 0, isX ? 0 : delta);
1083+
1084+
const sizes = getPanesSizes(
1085+
mixedConstraintSplitter,
1086+
isX ? 'width' : 'height'
1087+
);
1088+
expect(sizes.startSize).to.be.closeTo(totalAvailable - expectedEndMax, 2);
1089+
expect(sizes.endSize).to.be.closeTo(expectedEndMax, 2);
1090+
1091+
delta = -1000;
1092+
await resize(mixedConstraintSplitter, isX ? delta : 0, isX ? 0 : delta);
1093+
1094+
const sizesAfterSecondResize = getPanesSizes(
1095+
mixedConstraintSplitter,
1096+
isX ? 'width' : 'height'
1097+
);
1098+
expect(sizesAfterSecondResize.startSize).to.equal(100);
1099+
expect(sizesAfterSecondResize.endSize).to.equal(totalAvailable - 100);
1100+
};
1101+
9461102
describe('Horizontal orientation', () => {
9471103
it('should honor minSize and maxSize constraints when resizing, constraints in px', async () => {
9481104
await testMinMaxConstraintsPx('horizontal');
@@ -953,7 +1109,23 @@ describe('Splitter', () => {
9531109
});
9541110

9551111
it('should respect both panes constraints when they conflict during resize in px', async () => {
956-
await testConflictingConstraints('horizontal');
1112+
await testConflictingConstraintsInPx('horizontal');
1113+
});
1114+
1115+
it('should respect both panes constraints when they conflict during resize in %', async () => {
1116+
await testConflictingConstraintsInPercentage('horizontal');
1117+
});
1118+
1119+
it('should handle mixed px and % constraints - start in px; end in %', async () => {
1120+
await testMixedConstraintsPxAndPercentage('horizontal');
1121+
});
1122+
1123+
it('should handle resize with mixed % and auto size', async () => {
1124+
// TODO
1125+
});
1126+
1127+
it('should handle mixed px and auto size', async () => {
1128+
// TODO
9571129
});
9581130
});
9591131

@@ -967,40 +1139,38 @@ describe('Splitter', () => {
9671139
});
9681140

9691141
it('should respect both panes constraints when they conflict during resize in px - vertical', async () => {
970-
await testConflictingConstraints('vertical');
1142+
await testConflictingConstraintsInPx('vertical');
9711143
});
972-
});
9731144

974-
it('should result in % sizes after resize when the panes size is auto', () => {
975-
//TODO
976-
});
977-
978-
it('should handle mixed px and % constraints - start in px; end in %', async () => {
979-
const mixedConstraintSplitter = await fixture<IgcSplitterComponent>(
980-
createTwoPanesWithSizesAndConstraints({
981-
startMinSize: '100px',
982-
startMaxSize: '50%',
983-
})
984-
);
985-
await elementUpdated(mixedConstraintSplitter);
1145+
it('should respect both panes constraints when they conflict during resize in % - vertical', async () => {
1146+
await testConflictingConstraintsInPercentage('vertical');
1147+
});
9861148

987-
const startPane = getSplitterPart(mixedConstraintSplitter, 'start-pane');
988-
const style = getComputedStyle(startPane);
1149+
it('should handle mixed px and % constraints - start in px; end in %', async () => {
1150+
await testMixedConstraintsPxAndPercentage('vertical');
1151+
});
9891152

990-
expect(mixedConstraintSplitter.startMinSize).to.equal('100px');
991-
expect(mixedConstraintSplitter.startMaxSize).to.equal('50%');
992-
expect(style.minWidth).to.equal('100px');
993-
expect(style.maxWidth).to.equal('50%');
1153+
it('should handle resize with mixed % and auto size - vertical', async () => {
1154+
// TODO
1155+
});
9941156

995-
// TODO: test with drag
1157+
it('should handle resize with mixed px and auto size - vertical', async () => {
1158+
// TODO
1159+
});
9961160
});
9971161

998-
it('should handle mixed % and auto size', async () => {
999-
// TODO
1000-
});
1162+
it('should result in % sizes after resize when the panes size is auto', async () => {
1163+
const previousSizes = getPanesSizes(splitter, 'width');
1164+
const deltaX = 100;
10011165

1002-
it('should handle mixed px and auto size', async () => {
1003-
// TODO
1166+
await resize(splitter, deltaX, 0);
1167+
await elementUpdated(splitter);
1168+
1169+
const currentSizes = getPanesSizes(splitter, 'width');
1170+
expect(currentSizes.startSize).to.equal(previousSizes.startSize + deltaX);
1171+
expect(currentSizes.endSize).to.equal(previousSizes.endSize - deltaX);
1172+
expect(splitter.startSize).to.contain('%');
1173+
expect(splitter.endSize).to.contain('%');
10041174
});
10051175

10061176
it('panes should not exceed splitter size when set in px and horizontally resizing to end', async () => {
@@ -1114,14 +1284,16 @@ type SplitterTestSizesAndConstraints = {
11141284
endMinSize?: string;
11151285
endMaxSize?: string;
11161286
orientation?: SplitterOrientation;
1287+
splitterWidth?: string;
1288+
splitterHeight?: string;
11171289
};
11181290

11191291
function createTwoPanesWithSizesAndConstraints(
11201292
config: SplitterTestSizesAndConstraints
11211293
) {
11221294
return html`
11231295
<igc-splitter
1124-
style="width: 500px; height: 500px;"
1296+
style=${`width: ${config.splitterWidth ?? '500px'}; height: ${config.splitterHeight ?? '500px'};`}
11251297
.orientation=${config.orientation ?? 'horizontal'}
11261298
.startSize=${config.startSize}
11271299
.endSize=${config.endSize}
@@ -1234,3 +1406,14 @@ function checkPanesAreWithingBounds(
12341406
splitter.getBoundingClientRect()[dimension === 'x' ? 'width' : 'height'];
12351407
expect(startSize + endSize).to.be.at.most(splitterSize);
12361408
}
1409+
1410+
function getTotalSize(
1411+
splitter: IgcSplitterComponent,
1412+
dimension: 'width' | 'height'
1413+
) {
1414+
const bar = getSplitterPart(splitter, 'bar');
1415+
const barSize = bar.getBoundingClientRect()[dimension];
1416+
const splitterSize = splitter.getBoundingClientRect()[dimension];
1417+
const totalAvailable = splitterSize - barSize;
1418+
return totalAvailable;
1419+
}

0 commit comments

Comments
 (0)