Merge pull request #261 from oddbird/adjust-tests

Wait for polyfill before running test assertions.
oddbird · Oct 14, 2024 · e9f6ce6 · e9f6ce6
2 parents 8bacf91 + 3f65bd2
commit e9f6ce6
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -136,39 +136,48 @@
         ?.addEventListener('click', () => prepareManualPolyfill(), {
           once: true,
         });
-      document
-        .getElementById('apply-polyfill-manually-set1')
-        ?.addEventListener('click', () => {
-          polyfill({
-            elements: [
-              document.getElementById('my-style-manual-anchor'),
-              document.getElementById('my-style-manual-style-el'),
-            ],
-            excludeInlineStyles: true,
-          });
+      const manualSet1Button = document.getElementById(
+        'apply-polyfill-manually-set1',
+      );
+      manualSet1Button?.addEventListener('click', (e) => {
+        polyfill({
+          elements: [
+            document.getElementById('my-style-manual-anchor'),
+            document.getElementById('my-style-manual-style-el'),
+          ],
+          excludeInlineStyles: true,
+        }).then(() => {
+          manualSet1Button.setAttribute('disabled', '');
         });
-      document
-        .getElementById('apply-polyfill-manually-set2')
-        ?.addEventListener('click', () => {
-          polyfill({
-            elements: [
-              document.getElementById('my-style-manual-anchor'),
-              document.getElementById('my-style-manual-link-el'),
-              document.getElementById('my-target-manual-inline-style'),
-            ],
-            excludeInlineStyles: true,
-          });
+      });
+      const manualSet2Button = document.getElementById(
+        'apply-polyfill-manually-set2',
+      );
+      manualSet2Button?.addEventListener('click', (e) => {
+        polyfill({
+          elements: [
+            document.getElementById('my-style-manual-anchor'),
+            document.getElementById('my-style-manual-link-el'),
+            document.getElementById('my-target-manual-inline-style'),
+          ],
+          excludeInlineStyles: true,
+        }).then(() => {
+          manualSet2Button.setAttribute('disabled', '');
         });
-      document
-        .getElementById('apply-polyfill-manually-set3')
-        ?.addEventListener('click', () => {
-          polyfill({
-            elements: [
-              document.getElementById('my-style-manual-anchor'),
-              document.getElementById('my-style-manual-style-el'),
-            ],
-          });
+      });
+      const manualSet3Button = document.getElementById(
+        'apply-polyfill-manually-set3',
+      );
+      manualSet3Button?.addEventListener('click', (e) => {
+        polyfill({
+          elements: [
+            document.getElementById('my-style-manual-anchor'),
+            document.getElementById('my-style-manual-style-el'),
+          ],
+        }).then(() => {
+          manualSet3Button.setAttribute('disabled', '');
         });
+      });
 
       const manualBtn = document.getElementById('apply-polyfill-manually');
       if (SUPPORTS_ANCHOR_POSITIONING) {
@@ -187,6 +196,7 @@
             ],
           }).then((rules) => {
             manualBtn.innerText = 'Polyfill Applied';
+            manualBtn.setAttribute('disabled', '');
             console.log(rules);
           });
         } else {

diff --git a/tests/e2e/polyfill.test.ts b/tests/e2e/polyfill.test.ts
@@ -13,7 +13,8 @@ const anchorSelector = '#my-anchor-positioning';
 
 async function applyPolyfill(page: Page) {
   const btn = page.locator(btnSelector);
-  return await btn.click();
+  await btn.click();
+  return await expect(btn).toBeDisabled();
 }
 
 async function getElementWidth(page: Page, sel: string) {
@@ -128,7 +129,9 @@ test('applies polyfill for `@position-fallback`', async ({ page }) => {
 });
 
 test('applies manual polyfill', async ({ page }) => {
-  await page.locator('#apply-polyfill-manually').click();
+  const applyButton = page.locator('#apply-polyfill-manually');
+  await applyButton.click();
+  await expect(applyButton).toBeDisabled();
   const anchorBox = (await page.locator('#my-anchor-manual').boundingBox())!;
   const target1Box = (await page
     .locator('#my-target-manual-style-el')
@@ -186,6 +189,7 @@ test('applies manual polyfill for multiple elements separately', async ({
   const set2Button = page.locator('#apply-polyfill-manually-set2');
 
   await set1Button.click();
+  await expect(set1Button).toBeDisabled();
 
   const newTarget1Box = (await page
     .locator('#my-target-manual-style-el')
@@ -195,6 +199,7 @@ test('applies manual polyfill for multiple elements separately', async ({
   expect(newTarget1Box.y + newTarget1Box.height).toBeCloseTo(anchorBox.y, 0);
 
   await set2Button.click();
+  await expect(set2Button).toBeDisabled();
 
   const newTarget2Box = (await page
     .locator('#my-target-manual-link-el')
@@ -245,6 +250,7 @@ test('applies manual polyfill with automatic inline style polyfill', async ({
   const set3Button = page.locator('#apply-polyfill-manually-set3');
 
   await set3Button.click();
+  await expect(set3Button).toBeDisabled();
 
   const newTarget1Box = (await page
     .locator('#my-target-manual-style-el')