Skip to content

Commit 639df84

Browse files
daybrushdaybrush
committed
test: test stretch options
1 parent 165fcaa commit 639df84

File tree

2 files changed

+187
-3
lines changed

2 files changed

+187
-3
lines changed

‎src/grids/JustifiedGrid.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -113,15 +113,15 @@ export interface JustifiedGridOptions extends GridOptions {
113113
*/
114114
contentOffset?: number;
115115
/**
116-
* Regardless of the `sizeRange` value, it is possible to basically break the proportion of the item and stretch the inline size to fill the container.
116+
* it is possible to basically break the proportion of the item and stretch the inline size to fill the container.
117117
* If you set the `sizeRange` range narrowly, you can stretch well.
118-
* <ko>sizeRange 값과 무관하게 기본적으로 아이템의 비율을 깨서 inline size를 stretch하여 container를 꽉 채우게 가능하다. sizeRange의 범위를 좁게 설정하면 stretch가 잘 될 수 있다. </ko>
118+
* <ko>기본적으로 아이템의 비율을 깨서 inline size를 stretch하여 container를 꽉 채우게 가능하다. sizeRange의 범위를 좁게 설정하면 stretch가 잘 될 수 있다. </ko>
119119
* @default false
120120
*/
121121
stretch?: boolean;
122122
/**
123123
* If `-`, `+`, or `%` are added as a string value, it is a relative value to the original size. If it is a number value, the stretch range can be set as an absolute value.
124-
* * If `data-grid-min-stretch` and `data-grid-max-stretch` are set in the Element or JSX of each item, they will be applied first.
124+
* If `data-grid-min-stretch` and `data-grid-max-stretch` are set in the Element or JSX of each item, they will be applied first.
125125
* <ko>string 값으로 `-`, `+`, `%`이 붙으면 원본 크기에 대한 상대값이며 number 값으로 들어오면 절대 값으로 stretch 범위를 설정할 수 있습니다.
126126
* 각 아이템의 Element 또는 JSX에 `data-grid-min-stretch`, `data-grid-max-stretch`을 설정하면 우선 적용한다.</ko>
127127
* @

‎test/unit/JustifiedGrid.spec.ts

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { GridItem } from "../../src";
22
import { JustifiedGrid } from "../../src/grids/JustifiedGrid";
3+
import { SIZES } from "./utils/consts";
34
import {
45
appendElements, cleanup, expectItemsPosition,
56
getRowCount, getRowPoses, sandbox, waitEvent,
@@ -505,4 +506,187 @@ describe("test JustifiedGrid", () => {
505506
});
506507
});
507508
});
509+
describe("test stretch option", () => {
510+
it(`should check whether cost is reflected in stretch (no stretch)`, async () => {
511+
// Given
512+
container!.style.cssText = "width: 1000px;";
513+
514+
grid = new JustifiedGrid(container!, {
515+
gap: 5,
516+
horizontal: false,
517+
sizeRange: [150, 300],
518+
stretch: true,
519+
stretchRange: [144, 320],
520+
passUnstretchRow: false,
521+
});
522+
523+
appendElements(container!, 5);
524+
525+
// When
526+
grid.renderItems();
527+
528+
await waitEvent(grid, "renderComplete");
529+
530+
const items = grid.getItems();
531+
const rowCount = getRowCount(items);
532+
// [518, 517],
533+
// [550, 825],
534+
// [640, 640],
535+
// [364, 520],
536+
// [710, 1020],
537+
// [600, 819],
538+
// [486, 729],
539+
// [544, 784],
540+
// [720, 720],
541+
// [381, 555],
542+
// [521, 775],
543+
544+
// Then
545+
expect(rowCount).to.be.equal(1);
546+
547+
// NO STRETCH
548+
items.forEach((item, i) => {
549+
expect(item.cssInlineSize).to.be.closeTo(SIZES[i][0] / SIZES[i][1] * 241.1, 0.1);
550+
expect(item.cssContentSize).to.be.closeTo(241.1, 0.1);
551+
});
552+
});
553+
it(`should check whether cost is reflected in stretch (stretch)`, async () => {
554+
// Given
555+
container!.style.cssText = "width: 1000px;";
556+
557+
grid = new JustifiedGrid(container!, {
558+
gap: 0,
559+
horizontal: false,
560+
sizeRange: [150, 220],
561+
stretch: true,
562+
stretchRange: [144, 300],
563+
passUnstretchRow: false,
564+
});
565+
566+
appendElements(container!, 5);
567+
568+
// When
569+
grid.renderItems();
570+
571+
await waitEvent(grid, "renderComplete");
572+
573+
const items = grid.getItems();
574+
const rowCount = getRowCount(items);
575+
576+
// Then
577+
expect(rowCount).to.be.equal(1);
578+
579+
// NO STRETCH
580+
const expectedHeight = 220;
581+
const sum = SIZES.slice(0, 5).reduce((v1, v2) => v1 + v2[0] / v2[1] * expectedHeight, 0);
582+
const scale = grid.getContainerInlineSize() / sum;
583+
584+
items.forEach((item, i) => {
585+
expect(item.cssContentSize).to.be.closeTo(expectedHeight, 0.1);
586+
expect(item.cssInlineSize).to.be.not.closeTo(SIZES[i][0] / SIZES[i][1] * expectedHeight, 0.1);
587+
expect(item.cssInlineSize).to.be.closeTo(SIZES[i][0] / SIZES[i][1] * scale * expectedHeight, 0.1, `expect ${i}`);
588+
});
589+
});
590+
it(`should check whether cost is reflected in stretch (stretch, 2line)`, async () => {
591+
// Given
592+
container!.style.cssText = "width: 1000px;";
593+
594+
grid = new JustifiedGrid(container!, {
595+
gap: 0,
596+
horizontal: false,
597+
sizeRange: [220, 220],
598+
stretch: true,
599+
stretchRange: [144, 300],
600+
passUnstretchRow: false,
601+
});
602+
603+
appendElements(container!, 8);
604+
605+
// When
606+
grid.renderItems();
607+
608+
await waitEvent(grid, "renderComplete");
609+
610+
611+
const items = grid.getItems();
612+
const rowCount = getRowCount(items);
613+
614+
// Then
615+
expect(rowCount).to.be.equal(2);
616+
617+
// NO STRETCH
618+
const expectedHeight = 220;
619+
620+
621+
// 0 4
622+
// 4 8
623+
const scale1 = grid.getContainerInlineSize()
624+
/ SIZES.slice(0, 4).reduce((v1, v2) => v1 + v2[0] / v2[1] * expectedHeight, 0);
625+
const scale2 = grid.getContainerInlineSize()
626+
/ SIZES.slice(4, 8).reduce((v1, v2) => v1 + v2[0] / v2[1] * expectedHeight, 0);
627+
628+
items.slice(0, 4).forEach((item, i) => {
629+
expect(item.cssContentSize).to.be.closeTo(expectedHeight, 0.1);
630+
expect(item.cssInlineSize).to.be.not.closeTo(SIZES[i][0] / SIZES[i][1] * expectedHeight, 0.1);
631+
expect(item.cssInlineSize).to.be.closeTo(SIZES[i][0] / SIZES[i][1] * scale1 * expectedHeight, 0.1, `expect ${i}`);
632+
});
633+
items.slice(4, 8).forEach((item, i) => {
634+
const size = SIZES[i + 4];
635+
expect(item.cssContentSize).to.be.closeTo(expectedHeight, 0.1);
636+
expect(item.cssInlineSize).to.be.not.closeTo(size[0] / size[1] * expectedHeight, 0.1);
637+
expect(item.cssInlineSize).to.be.closeTo(size[0] / size[1] * scale2 * expectedHeight, 0.1, `expect ${i + 4}`);
638+
});
639+
});
640+
it(`should check whether cost is reflected in stretch (stretch, 2line, pass last line)`, async () => {
641+
// Given
642+
container!.style.cssText = "width: 1000px;";
643+
644+
grid = new JustifiedGrid(container!, {
645+
gap: 0,
646+
horizontal: false,
647+
sizeRange: [220, 220],
648+
stretch: true,
649+
stretchRange: [130, 300],
650+
passUnstretchRow: true,
651+
});
652+
653+
appendElements(container!, 8);
654+
655+
// When
656+
grid.renderItems();
657+
658+
await waitEvent(grid, "renderComplete");
659+
660+
const passedItems = grid.getOutlines().passedItems;
661+
const items = grid.getItems();
662+
const rowCount = getRowCount(items);
663+
664+
// Then
665+
666+
expect(passedItems?.length).to.be.equal(2);
667+
expect(rowCount).to.be.equal(2);
668+
669+
// NO STRETCH
670+
const expectedHeight = 220;
671+
672+
// 0 4
673+
// 4 8
674+
const scale1 = grid.getContainerInlineSize()
675+
/ SIZES.slice(0, 6).reduce((v1, v2) => v1 + v2[0] / v2[1] * expectedHeight, 0);
676+
677+
items.slice(0, 6).forEach((item, i) => {
678+
const size = SIZES[i];
679+
expect(item.cssContentPos).to.be.equals(0);
680+
expect(item.cssContentSize).to.be.closeTo(expectedHeight, 0.1);
681+
expect(item.cssInlineSize).to.be.not.closeTo(size[0] / size[1] * expectedHeight, 0.1);
682+
expect(item.cssInlineSize).to.be.closeTo(size[0] / size[1] * scale1 * expectedHeight, 0.1, `expect ${i}`);
683+
});
684+
items.slice(6, 8).forEach((item, i) => {
685+
const size = SIZES[i + 4];
686+
687+
expect(item.cssContentSize).to.be.closeTo(expectedHeight, 0.1);
688+
expect(item.cssInlineSize).to.be.not.closeTo(size[0] / size[1] * expectedHeight, 0.1);
689+
});
690+
});
691+
});
508692
});

0 commit comments

Comments
 (0)