test: fix correct pos for browser env

Author: daybrush

packages/infinitegrid/test/unit/InfiniteGrid.spec.ts

@@ -1603,7 +1603,7 @@ describe("test InfiniteGrid", () => {
         return {
           groupKey: Math.floor(child / 3),
           key: `key${child}`,
-          html: `<div style="height: 100px">${child}</div>`,
+          html: `<div style="height: 100px;width: 100%; ">${child}</div>`,
         };
       }));
 
@@ -1615,39 +1615,38 @@ describe("test InfiniteGrid", () => {
       await waitEvent(ig!, "renderComplete");
 
 
-      // top 320, center는 570 5와 6 사이
+      // top 100, center 350
       // 브라우저간의 오차로 인한 테스트가 필요
-      ig!.getScrollContainerElement().scrollTop = 320;
+      ig!.getScrollContainerElement().scrollTop = 100;
 
       // 스크롤 이동에 따른 보이는 아이템 자동 변경: change cursor (0, 3)
       await waitEvent(ig!, "renderComplete");
+      // 300 + 50 => 700 (offset: 350)
 
 
       // When
       ig!.getItems().forEach((item) => {
         item.element!.style.height = "200px";
       });
 
-      // 6의 300 + 300 + 50 => 300 + 600 + 100
-      // 350 차이
       // 스크롤 위치는 변경 되지 않는다.
       ig!.renderItems({ useResize: true });
       await waitEvent(ig!, "renderComplete");
 
 
       // Then
       const correctedPos = ig!.getScrollContainerElement().scrollTop;
-      expect(correctedPos).to.be.equals(670);
-      expect(ig!.getStartCursor()).to.be.equals(1);
-      expect(ig!.getEndCursor()).to.be.equals(2);
+      expect(correctedPos).to.be.equals(450);
+      expect(ig!.getStartCursor()).to.be.equals(0);
+      expect(ig!.getEndCursor()).to.be.equals(1);
     });
     it(`should check if scroll position is corrected when size, pos, window size is changed (startCursor > 0)`, async () => {
       // Given
       ig!.syncItems([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17].map((child) => {
         return {
           groupKey: Math.floor(child / 3),
           key: `key${child}`,
-          html: `<div style="height: 100px">${child}</div>`,
+          html: `<div style="height: 100px;width: 100%;">${child}</div>`,
         };
       }));
 
@@ -1659,27 +1658,21 @@ describe("test InfiniteGrid", () => {
       await waitEvent(ig!, "renderComplete");
 
 
-      // 6의 300 + 300 + 50 => 300 + 600 + 100
-      // 350 차이
+      // top: 750, center 1000
       ig!.getScrollContainerElement().scrollTop = 750;
 
       // 스크롤 이동에 따른 보이는 아이템 자동 변경: change cursor (2, 4)
-      // 6 ~ 14 9개
-      // 600 ~ 1500
-      // 중간값: 1050 
       await waitEvent(ig!, "renderComplete");
       const prevStartCursor = ig!.getStartCursor();
       const prevEndCursor = ig!.getEndCursor();
 
 
 
       // When
-      // 6 ~ 14 9개
-      // 600 + 0 ~ 600 + 1800
-      // 중간값: 1500 
       ig!.getItems().forEach((item) => {
         item.element!.style.height = "200px";
       });
+      // 600 + 300 + 50 => 600 + 700 (offset: 350)
 
 
       // 스크롤 위치는 변경 되지 않는다.
@@ -1691,9 +1684,9 @@ describe("test InfiniteGrid", () => {
       expect(prevStartCursor).to.be.equals(2);
       expect(prevEndCursor).to.be.equals(4);
       const correctedPos = ig!.getScrollContainerElement().scrollTop;
-      expect(correctedPos).to.be.equals(1200);
-      expect(ig!.getStartCursor()).to.be.equals(3);
-      expect(ig!.getEndCursor()).to.be.equals(4);
+      expect(correctedPos).to.be.equals(1100);
+      expect(ig!.getStartCursor()).to.be.equals(2);
+      expect(ig!.getEndCursor()).to.be.equals(3);
     });
   });
   describe("test ResizeObserver", () => {