From 639df8471ba56e69b6063e7315de2c0f86b36fc6 Mon Sep 17 00:00:00 2001 From: Daybrush Date: Mon, 10 Jun 2024 11:25:44 +0900 Subject: [PATCH] test: test `stretch` options --- src/grids/JustifiedGrid.ts | 6 +- test/unit/JustifiedGrid.spec.ts | 184 ++++++++++++++++++++++++++++++++ 2 files changed, 187 insertions(+), 3 deletions(-) diff --git a/src/grids/JustifiedGrid.ts b/src/grids/JustifiedGrid.ts index 2c0b510..7251c2a 100644 --- a/src/grids/JustifiedGrid.ts +++ b/src/grids/JustifiedGrid.ts @@ -113,15 +113,15 @@ export interface JustifiedGridOptions extends GridOptions { */ contentOffset?: number; /** - * 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. + * it is possible to basically break the proportion of the item and stretch the inline size to fill the container. * If you set the `sizeRange` range narrowly, you can stretch well. - * sizeRange 값과 무관하게 기본적으로 아이템의 비율을 깨서 inline size를 stretch하여 container를 꽉 채우게 가능하다. sizeRange의 범위를 좁게 설정하면 stretch가 잘 될 수 있다. + * 기본적으로 아이템의 비율을 깨서 inline size를 stretch하여 container를 꽉 채우게 가능하다. sizeRange의 범위를 좁게 설정하면 stretch가 잘 될 수 있다. * @default false */ stretch?: boolean; /** * 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. - * * 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. + * 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. * string 값으로 `-`, `+`, `%`이 붙으면 원본 크기에 대한 상대값이며 number 값으로 들어오면 절대 값으로 stretch 범위를 설정할 수 있습니다. * 각 아이템의 Element 또는 JSX에 `data-grid-min-stretch`, `data-grid-max-stretch`을 설정하면 우선 적용한다. * @ diff --git a/test/unit/JustifiedGrid.spec.ts b/test/unit/JustifiedGrid.spec.ts index 15eff0b..b4ed1aa 100644 --- a/test/unit/JustifiedGrid.spec.ts +++ b/test/unit/JustifiedGrid.spec.ts @@ -1,5 +1,6 @@ import { GridItem } from "../../src"; import { JustifiedGrid } from "../../src/grids/JustifiedGrid"; +import { SIZES } from "./utils/consts"; import { appendElements, cleanup, expectItemsPosition, getRowCount, getRowPoses, sandbox, waitEvent, @@ -505,4 +506,187 @@ describe("test JustifiedGrid", () => { }); }); }); + describe("test stretch option", () => { + it(`should check whether cost is reflected in stretch (no stretch)`, async () => { + // Given + container!.style.cssText = "width: 1000px;"; + + grid = new JustifiedGrid(container!, { + gap: 5, + horizontal: false, + sizeRange: [150, 300], + stretch: true, + stretchRange: [144, 320], + passUnstretchRow: false, + }); + + appendElements(container!, 5); + + // When + grid.renderItems(); + + await waitEvent(grid, "renderComplete"); + + const items = grid.getItems(); + const rowCount = getRowCount(items); + // [518, 517], + // [550, 825], + // [640, 640], + // [364, 520], + // [710, 1020], + // [600, 819], + // [486, 729], + // [544, 784], + // [720, 720], + // [381, 555], + // [521, 775], + + // Then + expect(rowCount).to.be.equal(1); + + // NO STRETCH + items.forEach((item, i) => { + expect(item.cssInlineSize).to.be.closeTo(SIZES[i][0] / SIZES[i][1] * 241.1, 0.1); + expect(item.cssContentSize).to.be.closeTo(241.1, 0.1); + }); + }); + it(`should check whether cost is reflected in stretch (stretch)`, async () => { + // Given + container!.style.cssText = "width: 1000px;"; + + grid = new JustifiedGrid(container!, { + gap: 0, + horizontal: false, + sizeRange: [150, 220], + stretch: true, + stretchRange: [144, 300], + passUnstretchRow: false, + }); + + appendElements(container!, 5); + + // When + grid.renderItems(); + + await waitEvent(grid, "renderComplete"); + + const items = grid.getItems(); + const rowCount = getRowCount(items); + + // Then + expect(rowCount).to.be.equal(1); + + // NO STRETCH + const expectedHeight = 220; + const sum = SIZES.slice(0, 5).reduce((v1, v2) => v1 + v2[0] / v2[1] * expectedHeight, 0); + const scale = grid.getContainerInlineSize() / sum; + + items.forEach((item, i) => { + expect(item.cssContentSize).to.be.closeTo(expectedHeight, 0.1); + expect(item.cssInlineSize).to.be.not.closeTo(SIZES[i][0] / SIZES[i][1] * expectedHeight, 0.1); + expect(item.cssInlineSize).to.be.closeTo(SIZES[i][0] / SIZES[i][1] * scale * expectedHeight, 0.1, `expect ${i}`); + }); + }); + it(`should check whether cost is reflected in stretch (stretch, 2line)`, async () => { + // Given + container!.style.cssText = "width: 1000px;"; + + grid = new JustifiedGrid(container!, { + gap: 0, + horizontal: false, + sizeRange: [220, 220], + stretch: true, + stretchRange: [144, 300], + passUnstretchRow: false, + }); + + appendElements(container!, 8); + + // When + grid.renderItems(); + + await waitEvent(grid, "renderComplete"); + + + const items = grid.getItems(); + const rowCount = getRowCount(items); + + // Then + expect(rowCount).to.be.equal(2); + + // NO STRETCH + const expectedHeight = 220; + + + // 0 4 + // 4 8 + const scale1 = grid.getContainerInlineSize() + / SIZES.slice(0, 4).reduce((v1, v2) => v1 + v2[0] / v2[1] * expectedHeight, 0); + const scale2 = grid.getContainerInlineSize() + / SIZES.slice(4, 8).reduce((v1, v2) => v1 + v2[0] / v2[1] * expectedHeight, 0); + + items.slice(0, 4).forEach((item, i) => { + expect(item.cssContentSize).to.be.closeTo(expectedHeight, 0.1); + expect(item.cssInlineSize).to.be.not.closeTo(SIZES[i][0] / SIZES[i][1] * expectedHeight, 0.1); + expect(item.cssInlineSize).to.be.closeTo(SIZES[i][0] / SIZES[i][1] * scale1 * expectedHeight, 0.1, `expect ${i}`); + }); + items.slice(4, 8).forEach((item, i) => { + const size = SIZES[i + 4]; + expect(item.cssContentSize).to.be.closeTo(expectedHeight, 0.1); + expect(item.cssInlineSize).to.be.not.closeTo(size[0] / size[1] * expectedHeight, 0.1); + expect(item.cssInlineSize).to.be.closeTo(size[0] / size[1] * scale2 * expectedHeight, 0.1, `expect ${i + 4}`); + }); + }); + it(`should check whether cost is reflected in stretch (stretch, 2line, pass last line)`, async () => { + // Given + container!.style.cssText = "width: 1000px;"; + + grid = new JustifiedGrid(container!, { + gap: 0, + horizontal: false, + sizeRange: [220, 220], + stretch: true, + stretchRange: [130, 300], + passUnstretchRow: true, + }); + + appendElements(container!, 8); + + // When + grid.renderItems(); + + await waitEvent(grid, "renderComplete"); + + const passedItems = grid.getOutlines().passedItems; + const items = grid.getItems(); + const rowCount = getRowCount(items); + + // Then + + expect(passedItems?.length).to.be.equal(2); + expect(rowCount).to.be.equal(2); + + // NO STRETCH + const expectedHeight = 220; + + // 0 4 + // 4 8 + const scale1 = grid.getContainerInlineSize() + / SIZES.slice(0, 6).reduce((v1, v2) => v1 + v2[0] / v2[1] * expectedHeight, 0); + + items.slice(0, 6).forEach((item, i) => { + const size = SIZES[i]; + expect(item.cssContentPos).to.be.equals(0); + expect(item.cssContentSize).to.be.closeTo(expectedHeight, 0.1); + expect(item.cssInlineSize).to.be.not.closeTo(size[0] / size[1] * expectedHeight, 0.1); + expect(item.cssInlineSize).to.be.closeTo(size[0] / size[1] * scale1 * expectedHeight, 0.1, `expect ${i}`); + }); + items.slice(6, 8).forEach((item, i) => { + const size = SIZES[i + 4]; + + expect(item.cssContentSize).to.be.closeTo(expectedHeight, 0.1); + expect(item.cssInlineSize).to.be.not.closeTo(size[0] / size[1] * expectedHeight, 0.1); + }); + }); + }); });