test: test stretch options

naver · Jun 13, 2024 · 639df84 · 639df84
1 parent 165fcaa
commit 639df84
Show file tree

Hide file tree

Showing 2 changed files with 187 additions and 3 deletions.
diff --git 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.
-   * <ko>sizeRange 값과 무관하게 기본적으로 아이템의 비율을 깨서 inline size를 stretch하여 container를 꽉 채우게 가능하다. sizeRange의 범위를 좁게 설정하면 stretch가 잘 될 수 있다. </ko>
+   * <ko>기본적으로 아이템의 비율을 깨서 inline size를 stretch하여 container를 꽉 채우게 가능하다. sizeRange의 범위를 좁게 설정하면 stretch가 잘 될 수 있다. </ko>
    * @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.
    * <ko>string 값으로 `-`, `+`, `%`이 붙으면 원본 크기에 대한 상대값이며 number 값으로 들어오면 절대 값으로 stretch 범위를 설정할 수 있습니다.
    * 각 아이템의 Element 또는 JSX에 `data-grid-min-stretch`, `data-grid-max-stretch`을 설정하면 우선 적용한다.</ko>
    * @

diff --git 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);
+      });
+    });
+  });
 });