fix(shadow-wrapper): do not call success callback on the second `css-…

…src` attribute change (#583)
uploadcare · Dec 29, 2023 · eb9618a · eb9618a
1 parent 8e0a4de
commit eb9618a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 13 deletions.
diff --git a/utils/waitForAttribute.js b/utils/waitForAttribute.js
@@ -10,10 +10,27 @@
  * }} options
  */
 export const waitForAttribute = ({ element, attribute, onSuccess, onTimeout, timeout = 300 }) => {
+  const currentAttrValue = element.getAttribute(attribute);
+  if (currentAttrValue !== null) {
+    onSuccess(currentAttrValue);
+    return;
+  }
+
+  const observer = new MutationObserver((mutations) => {
+    const mutation = mutations[mutations.length - 1];
+    handleMutation(mutation);
+  });
+
+  observer.observe(element, {
+    attributes: true,
+    attributeFilter: [attribute],
+  });
+
   const timeoutId = setTimeout(() => {
     observer.disconnect();
     onTimeout();
   }, timeout);
+
   /** @param {MutationRecord} mutation */
   const handleMutation = (mutation) => {
     const attrValue = element.getAttribute(attribute);
@@ -23,17 +40,4 @@ export const waitForAttribute = ({ element, attribute, onSuccess, onTimeout, tim
       onSuccess(attrValue);
     }
   };
-  const currentAttrValue = element.getAttribute(attribute);
-  if (currentAttrValue !== null) {
-    clearTimeout(timeoutId);
-    onSuccess(currentAttrValue);
-  }
-  const observer = new MutationObserver((mutations) => {
-    const mutation = mutations[mutations.length - 1];
-    handleMutation(mutation);
-  });
-  observer.observe(element, {
-    attributes: true,
-    attributeFilter: [attribute],
-  });
 };
diff --git a/utils/waitForAttribute.test.js b/utils/waitForAttribute.test.js
@@ -55,4 +55,24 @@ describe('waitForAttribute', () => {
     expect(onSuccess.getCall(0).args[0]).to.equal('test');
     expect(onTimeout.called).to.be.false;
   });
+
+  it('should not call onSuccess on the second attribute change', async () => {
+    const element = document.createElement('div');
+    element.setAttribute(TEST_ATTRIBUTE, 'test');
+    const onSuccess = spy();
+    const onTimeout = spy();
+    waitForAttribute({
+      element,
+      attribute: TEST_ATTRIBUTE,
+      onSuccess,
+      onTimeout,
+      timeout: 10,
+    });
+    await delay(100);
+    element.setAttribute(TEST_ATTRIBUTE, 'tes2');
+    await delay(100);
+    expect(onSuccess.calledOnce).to.be.true;
+    expect(onSuccess.getCall(0).args[0]).to.equal('test');
+    expect(onTimeout.called).to.be.false;
+  });
 });