refactor: Resize observer test to not depend on exact window size (#95)

cloudscape-design · Sep 4, 2024 · 877ec32 · 877ec32
1 parent 7377468
commit 877ec32
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 19 deletions.
diff --git a/src/internal/container-queries/__integ__/use-resize-observer.test.ts b/src/internal/container-queries/__integ__/use-resize-observer.test.ts
@@ -23,10 +23,11 @@ describe('use-resize-observer', () => {
     'reports dimensions correctly',
     setupTest(async page => {
       await page.waitForVisible('#target');
-      await page.resizeWindow(999, 777);
-      await expect(page.getElementsText('#target')).resolves.toEqual(['Content: 979/757\nBorder: 999/777']);
-      await page.resizeWindow(777, 333);
-      await expect(page.getElementsText('#target')).resolves.toEqual(['Content: 757/313\nBorder: 777/333']);
+      await expect(page.getElementsText('#target')).resolves.toEqual(['Content: 280/280\nBorder: 300/300']);
+      await page.click('[id="width+"]');
+      await page.click('[id="height-"]');
+      await page.pause(10);
+      await expect(page.getElementsText('#target')).resolves.toEqual(['Content: 290/270\nBorder: 310/290']);
     })
   );
 });
diff --git a/test-pages/src/pages/use-resize-observer-test.tsx b/test-pages/src/pages/use-resize-observer-test.tsx
@@ -10,23 +10,40 @@ export default function Page() {
 
   useResizeObserver(() => document.querySelector('#target'), setEntry);
 
-  const contentWidth = entry?.contentBoxWidth || 0;
-  const contentHeight = entry?.contentBoxHeight || 0;
-  const borderWidth = entry?.borderBoxWidth || 0;
-  const borderHeight = entry?.borderBoxHeight || 0;
+  const [width, setWidth] = useState(300);
+  const [height, setHeight] = useState(300);
 
   return (
-    <div
-      id="target"
-      style={{
-        width: '100%',
-        height: '100%',
-        padding: '10px',
-      }}
-    >
-      Content: {contentWidth}/{contentHeight}
-      <br />
-      Border: {borderWidth}/{borderHeight}
+    <div style={{ margin: '10px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <div style={{ display: 'flex', gap: '16px' }}>
+        <button id="width+" onClick={() => setWidth(prev => prev + 10)}>
+          Width + 10px
+        </button>
+        <button id="width-" onClick={() => setWidth(prev => prev - 10)}>
+          Width - 10px
+        </button>
+        <button id="height+" onClick={() => setHeight(prev => prev + 10)}>
+          Height + 10px
+        </button>
+        <button id="height-" onClick={() => setHeight(prev => prev - 10)}>
+          Height - 10px
+        </button>
+      </div>
+
+      <div id="container" style={{ width, height, background: 'gray' }}>
+        <div
+          id="target"
+          style={{
+            width: '100%',
+            height: '100%',
+            padding: '10px',
+          }}
+        >
+          Content: {entry?.contentBoxWidth || 0}/{entry?.contentBoxHeight || 0}
+          <br />
+          Border: {entry?.borderBoxWidth || 0}/{entry?.borderBoxHeight || 0}
+        </div>
+      </div>
     </div>
   );
 }