feat: add waitForElement DOMUtils (#94)

src/index.js

@@ -23,6 +23,7 @@ import Blocks from './utils/Blocks.js';
 import CSV from './utils/CSV.js';
 import DOMUtils from './utils/DOMUtils.js';
 import FileUtils from './utils/FileUtils.js';
+import Loader from './utils/Loader.js';
 import Utils from './utils/Utils.js';
 
 import WPUtils from './wp/WPUtils.js';
@@ -44,6 +45,7 @@ export {
   CSV,
   DOMUtils,
   FileUtils,
+  Loader,
   Utils,
   WPUtils,
   WPAdminAjaxPager,

src/utils/DOMUtils.js

@@ -263,4 +263,19 @@ export default class DOMUtils {
     }
     return null;
   }
+
+  static async waitForElement(selector, document, timeout = 5000, interval = 250) {
+    return new Promise((resolve, reject) => {
+      const timeWas = new Date();
+      const wait = setInterval(() => {
+        if (document.querySelector(selector)) {
+          clearInterval(wait);
+          resolve();
+        } else if (new Date() - timeWas > timeout) { // Timeout
+          clearInterval(wait);
+          reject();
+        }
+      }, interval);
+    });
+  }
 }

src/utils/Loader.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export default class Loader {
+  static async waitForElement(selector, document, timeout = 5000, interval = 250) {
+    return new Promise((resolve, reject) => {
+      const timeWas = new Date();
+      const wait = setInterval(() => {
+        if (document.querySelector(selector)) {
+          clearInterval(wait);
+          resolve();
+        } else if (new Date() - timeWas > timeout) { // Timeout
+          clearInterval(wait);
+          reject();
+        }
+      }, interval);
+    });
+  }
+}

test/utils/Loader.spec.js

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* eslint-disable no-shadow */
+
+import { rejects, doesNotReject } from 'assert';
+import { describe, it } from 'mocha';
+
+import { JSDOM } from 'jsdom';
+
+import Loader from '../../src/utils/Loader.js';
+
+describe('Loader#waitForElement', () => {
+  it('should fail for non existing element', async () => {
+    const { document } = (new JSDOM()).window;
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    await rejects(async () => {
+      await Loader.waitForElement('.dummy', document, 25, 20);
+    });
+  });
+
+  it('should find existing element', async () => {
+    const { document } = (new JSDOM()).window;
+    const div = document.createElement('div');
+    div.classList.add('dummy');
+    document.body.appendChild(div);
+    await doesNotReject(async () => {
+      await Loader.waitForElement('.dummy', document, 100, 20);
+    });
+  });
+
+  it('should wait for element to appear in the DOM', async () => {
+    const { document } = (new JSDOM()).window;
+    setTimeout(() => {
+      const div = document.createElement('div');
+      div.classList.add('dummy');
+      document.body.appendChild(div);
+    }, 50);
+    await doesNotReject(async () => {
+      await Loader.waitForElement('.dummy', document, 100, 20);
+    });
+  });
+});