test: cached getBoundingClientRect()

QwikDev · Jan 15, 2022 · 7d9cafc · 7d9cafc
1 parent fa701da
commit 7d9cafc
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/tests/platform/element/element.spec.ts b/tests/platform/element/element.spec.ts
@@ -13,6 +13,9 @@ test('element', async ({ page }) => {
   const yInt = parseFloat(y);
   expect(yInt).toBeGreaterThan(4);
 
+  const testGetBoundingClientRectCached = page.locator('#testGetBoundingClientRectCached');
+  await expect(testGetBoundingClientRectCached).toHaveText('true');
+
   const testQSH1 = page.locator('#testQSH1');
   await expect(testQSH1).toHaveText('H1');
 
@@ -82,4 +85,7 @@ test('element', async ({ page }) => {
 
   const testElementEquality = page.locator('#testElementEquality');
   await expect(testElementEquality).toHaveText('true');
+
+  const testElementId = page.locator('#testElementId');
+  await expect(testElementId).toHaveText('attrId true');
 });
diff --git a/tests/platform/element/index.html b/tests/platform/element/index.html
@@ -79,20 +79,23 @@ <h1>Element</h1>
       <li>
         <strong>getBoundingClientRect()</strong>
         <code id="testGetBoundingClientRectY"></code>
+        <code id="testGetBoundingClientRectCached"></code>
         <code id="testGetBoundingClientRect"></code>
         <script type="text/partytown">
           (function () {
             const elm = document.getElementsByTagName('h1')[0];
             const t = document.getElementById('testGetBoundingClientRect');
             const y = document.getElementById('testGetBoundingClientRectY');
+            const cached = document.getElementById('testGetBoundingClientRectCached');
             // should only be one main access
+            const r1 = elm.getBoundingClientRect();
             elm.getBoundingClientRect();
             elm.getBoundingClientRect();
             elm.getBoundingClientRect();
-            elm.getBoundingClientRect();
-            const r = elm.getBoundingClientRect();
-            t.textContent = JSON.stringify(r);
-            y.textContent = r.y;
+            const r2 = elm.getBoundingClientRect();
+            t.textContent = JSON.stringify(r1);
+            y.textContent = r1.y;
+            cached.textContent = (JSON.stringify(r1) === JSON.stringify(r2));
           })();
         </script>
       </li>
@@ -393,6 +396,22 @@ <h1>Element</h1>
         </script>
       </li>
 
+      <li>
+        <strong id="propId">element, id</strong>
+        <code id="testElementId"></code>
+        <script type="text/partytown">
+          (function () {
+            const label = document.getElementById('propId');
+            const elm = document.getElementById('testElementId');
+            const id1 = label.id;
+            label.setAttribute('id', 'attrId')
+            const id2 = label.id;
+            const id3 = label.id;
+            elm.textContent = id2 + ' ' + (id2 === id3);
+          })();
+        </script>
+      </li>
+
       <script type="text/partytown">
         (function () {
           document.body.classList.add('completed');