improve: MCD-541: Add waitForNuxtHydration helper (#33)

* improve: MCD-541: Add waitForNuxtHydration helper

* MCD-541: Fix CSP

* MCD-541: Improve waitForNuxtHydration

* MCD-541: Improve wait for nuxt to use events

* Update comments test-methods.d.ts

Author: alexieremia

tests/helpers/test-methods.d.ts

@@ -56,3 +56,15 @@ export function theStatusMessageShouldContain([message, page]): Promise<void>;
  * array page object, selector and text to be filled.
  */
 export function fillCKEditorTextArea([page, locator, textAreaContent]): Promise<void>;
+
+/**
+  * Wait for Nuxt hydration to complete before running tests.
+  * @param {Page} page The page to wait for.
+  */
+export function waitForNuxtHydration(page): Promise<void>;
+
+/**
+  * Wait for Nuxt to be ready before running tests.
+  * @param {Page} page The page to wait for.
+  */
+export function waitForNuxtToBeReady(page): Promise<void>;

tests/helpers/test-methods.js

@@ -138,4 +138,42 @@ module.exports = {
       editorInstance.setData(textAreaContent);
     }, { locator, textAreaContent });
   },
+  /**
+   * Wait for Nuxt hydration to complete before running tests.
+   * @param {Page} page The page to wait for.
+   */
+  waitForNuxtHydration: async (page) => {
+    await page.evaluate(async () => {
+      return new Promise((resolve) => {
+        // Check if hydration has already completed.
+        if (window.lupusNuxtHydrationComplete) {
+          resolve(true);
+          return;
+        }
+        // Otherwise, wait for the event.
+        window.addEventListener('lupus-nuxt:loading:end', () => resolve(true), {
+          once: true,
+        });
+      });
+    });
+  },
+  /**
+   * Wait for Nuxt to be ready before running tests.
+   * @param {Page} page The page to wait for.
+   */
+  waitForNuxtToBeReady: async (page) => {
+    await page.evaluate(async () => {
+      return new Promise((resolve) => {
+        // Check if Nuxt is already ready.
+        if (window.lupusNuxtReady) {
+          resolve(true);
+          return;
+        }
+        // Otherwise, wait for the event.
+        window.addEventListener('lupus-nuxt:ready', () => resolve(true), {
+          once: true,
+        });
+      });
+    });
+  },
 };