From b65151494b3a8479ed0f97018607e29650e9d042 Mon Sep 17 00:00:00 2001
From: fdardenne <dafl@odoo.com>
Date: Fri, 7 Mar 2025 11:22:30 +0100
Subject: [PATCH] Snippet add dialog tests: make it green

The `AddSnippetDialo`g component is doing a `loadBundle` to fetch
the content to put in the snippet dialog.

Previously, when using the `AddSnippetDialog``, tests waited for
a arbitrary amount of time before the snippet dialog shows.
This resulted in tests failing when there is latency from the
server/network.

This commit adds an utility that allow us to await the loadBundle
used by `AddSnippetDialog`allowing the tests to not wait an arbitrary
amount of time.
---
 .../tests/block_tab/snippet_groups.test.js    | 47 ++++++++++++-------
 .../custom_tab/container_buttons.test.js      |  5 +-
 .../static/tests/edit_interaction.test.js     |  3 +-
 .../static/tests/invisible_elements.test.js   |  9 +++-
 .../static/tests/website_helpers.js           | 13 ++++-
 5 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/addons/html_builder/static/tests/block_tab/snippet_groups.test.js b/addons/html_builder/static/tests/block_tab/snippet_groups.test.js
index aef7e7c7ac7fa..e905bd3b40c96 100644
--- a/addons/html_builder/static/tests/block_tab/snippet_groups.test.js
+++ b/addons/html_builder/static/tests/block_tab/snippet_groups.test.js
@@ -15,15 +15,15 @@ import {
     getSnippetStructure,
     setupWebsiteBuilder,
     setupWebsiteBuilderWithDummySnippet,
+    waitForSnippetDialog,
 } from "../website_helpers";
 
 defineWebsiteModels();
 
 function getBasicSection(content, { name, withColoredLevelClass = false }) {
     const className = withColoredLevelClass ? "s_test o_colored_level" : "s_test";
-    return unformat(`<section class="${className}" data-snippet="s_test" ${
-        name ? `data-name="${name}"` : ""
-    }>
+    return unformat(`<section class="${className}" data-snippet="s_test" ${name ? `data-name="${name}"` : ""
+        }>
         <div class="test_a">${content}</div>
     </section>`);
 }
@@ -112,15 +112,18 @@ test("open add snippet dialog + switch snippet category", async () => {
         },
     });
     expect(queryAllTexts(".o-snippets-menu #snippet_groups .o_snippet")).toEqual(["A", "B"]);
-    await click(queryFirst(".o-snippets-menu #snippet_groups .o_snippet_thumbnail"));
-    await waitFor(".o_add_snippet_dialog");
+    await click(
+        queryFirst(
+            ".o-snippets-menu #snippet_groups .o_snippet_thumbnail .o_snippet_thumbnail_area"
+        )
+    );
+    await waitForSnippetDialog();
     expect(queryAllTexts(".o_add_snippet_dialog aside .list-group .list-group-item")).toEqual([
         "A",
         "B",
     ]);
     expect(".o_add_snippet_dialog aside .list-group .list-group-item.active").toHaveText("A");
 
-    await waitFor(".o_add_snippet_dialog iframe.show.o_add_snippet_iframe", { timeout: 2000 });
     expect(
         ".o_add_snippet_dialog .o_add_snippet_iframe:iframe .o_snippet_preview_wrap"
     ).toHaveCount(2);
@@ -186,8 +189,12 @@ test("search snippet in add snippet dialog", async () => {
             ),
         },
     });
-    await click(queryFirst(".o-snippets-menu #snippet_groups .o_snippet_thumbnail"));
-    await waitFor(".o_add_snippet_dialog iframe.show.o_add_snippet_iframe", { timeout: 1000 });
+    await click(
+        queryFirst(
+            ".o-snippets-menu #snippet_groups .o_snippet_thumbnail .o_snippet_thumbnail_area"
+        )
+    );
+    await waitForSnippetDialog();
     expect("aside .list-group .list-group-item").toHaveCount(2);
     const snippetsDescriptionProcessed = snippetsDescription(true);
     expect(
@@ -262,10 +269,14 @@ test("add snippet dialog with imagePreview", async () => {
             ),
         },
     });
-    await click(queryFirst(".o-snippets-menu #snippet_groups .o_snippet_thumbnail"));
+    await click(
+        queryFirst(
+            ".o-snippets-menu #snippet_groups .o_snippet_thumbnail .o_snippet_thumbnail_area"
+        )
+    );
     const previewSnippetIframeSelector =
         ".o_add_snippet_dialog .o_add_snippet_iframe:iframe .o_snippet_preview_wrap";
-    await waitFor(".o_add_snippet_dialog iframe.show.o_add_snippet_iframe", { timeout: 500 });
+    await waitForSnippetDialog();
     expect(`${previewSnippetIframeSelector}`).toHaveCount(2);
     const snippetsDescriptionProcessed = snippetsDescription(true);
     expect(`${previewSnippetIframeSelector}:first`).toHaveInnerHTML(
@@ -306,8 +317,12 @@ test("insert snippet structure", async () => {
         `<section class="o_colored_level"><p>Text</p></section>`
     );
 
-    await click(queryFirst(".o-snippets-menu #snippet_groups .o_snippet_thumbnail"));
-    await waitFor(".o_add_snippet_dialog iframe.show.o_add_snippet_iframe", { timeout: 500 });
+    await click(
+        queryFirst(
+            ".o-snippets-menu #snippet_groups .o_snippet_thumbnail .o_snippet_thumbnail_area"
+        )
+    );
+    await waitForSnippetDialog();
     const previewSelector =
         ".o_add_snippet_dialog .o_add_snippet_iframe:iframe .o_snippet_preview_wrap";
     expect(previewSelector).toHaveCount(1);
@@ -315,8 +330,7 @@ test("insert snippet structure", async () => {
     await contains(previewSelector).click();
     expect(".o_add_snippet_dialog").toHaveCount(0);
     expect(editableContent).toHaveInnerHTML(
-        `<section class="o_colored_level"><p>Text</p></section>${
-            snippetsDescription({ withName: true, withColoredLevelClass: true })[0].content
+        `<section class="o_colored_level"><p>Text</p></section>${snippetsDescription({ withName: true, withColoredLevelClass: true })[0].content
         }`
     );
 });
@@ -365,7 +379,7 @@ test("drag&drop snippet structure", async () => {
         unformat(`<section class="o_colored_level"><p>Text</p></section>`)
     );
 
-    await waitFor(".o_add_snippet_dialog iframe.show.o_add_snippet_iframe", { timeout: 500 });
+    await waitForSnippetDialog();
     const previewSelector =
         ".o_add_snippet_dialog .o_add_snippet_iframe:iframe .o_snippet_preview_wrap";
     expect(previewSelector).toHaveCount(1);
@@ -373,8 +387,7 @@ test("drag&drop snippet structure", async () => {
     await contains(previewSelector).click();
     expect(".o_add_snippet_dialog").toHaveCount(0);
     expect(editableContent).toHaveInnerHTML(
-        `${
-            snippetsDescription({ withName: true, withColoredLevelClass: true })[0].content
+        `${snippetsDescription({ withName: true, withColoredLevelClass: true })[0].content
         }<section class="o_colored_level"><p>Text</p></section>`
     );
 });
diff --git a/addons/html_builder/static/tests/custom_tab/container_buttons.test.js b/addons/html_builder/static/tests/custom_tab/container_buttons.test.js
index 1a1dd146a9290..f535b158ce8a2 100644
--- a/addons/html_builder/static/tests/custom_tab/container_buttons.test.js
+++ b/addons/html_builder/static/tests/custom_tab/container_buttons.test.js
@@ -10,6 +10,7 @@ import {
     dummyBase64Img,
     addPlugin,
     addActionOption,
+    waitForSnippetDialog,
 } from "../website_helpers";
 import { contains, onRpc } from "@web/../tests/web_test_helpers";
 import { animationFrame } from "@odoo/hoot-mock";
@@ -140,7 +141,7 @@ test("Use the sidebar 'save snippet' buttons", async () => {
 
     // Check that there is no custom section.
     const customGroupSelector =
-        ".o-snippets-menu #snippet_groups .o_snippet_thumbnail_title:contains('Custom')";
+        ".o-snippets-menu #snippet_groups .o_snippet[data-snippet-group='custom'] .o_snippet_thumbnail_area";
     expect(".o-snippets-menu div:contains('Custom Inner Content')").toHaveCount(0);
     expect(customGroupSelector).toHaveCount(0);
 
@@ -166,7 +167,7 @@ test("Use the sidebar 'save snippet' buttons", async () => {
     ).toHaveCount(1);
     expect(customGroupSelector).toHaveCount(1);
     await contains(customGroupSelector).click();
-    await animationFrame();
+    await waitForSnippetDialog();
     expect(
         ".o_add_snippet_dialog .o_add_snippet_iframe:iframe span:contains('Custom Dummy Section')"
     ).toHaveCount(1);
diff --git a/addons/html_builder/static/tests/edit_interaction.test.js b/addons/html_builder/static/tests/edit_interaction.test.js
index 52a4d7941ac95..81c7eec636c12 100644
--- a/addons/html_builder/static/tests/edit_interaction.test.js
+++ b/addons/html_builder/static/tests/edit_interaction.test.js
@@ -42,8 +42,9 @@ test("dropping a new snippet starts its interaction", async () => {
     await openBuilderSidebar();
     await waitFor(".o-website-builder_sidebar.o_builder_sidebar_open");
     expect.verifySteps([]);
+
     await contains(
-        `.o-snippets-menu #snippet_groups .o_snippet:contains('Text') .o_snippet_thumbnail`
+        `.o-snippets-menu #snippet_groups .o_snippet[data-snippet-group='text'] .o_snippet_thumbnail_area`
     ).click();
     await confirmAddSnippet("s_title");
     expect.verifySteps(["update"]);
diff --git a/addons/html_builder/static/tests/invisible_elements.test.js b/addons/html_builder/static/tests/invisible_elements.test.js
index a5e5fb0a8b75a..57a9c61d746d4 100644
--- a/addons/html_builder/static/tests/invisible_elements.test.js
+++ b/addons/html_builder/static/tests/invisible_elements.test.js
@@ -11,6 +11,7 @@ import {
     getSnippetStructure,
     invisibleEl,
     setupWebsiteBuilder,
+    waitForSnippetDialog,
 } from "./website_helpers";
 
 defineWebsiteModels();
@@ -72,8 +73,12 @@ test("Add an element on the invisible elements tab", async () => {
             ),
         },
     });
-    await click(queryFirst(".o-snippets-menu #snippet_groups .o_snippet_thumbnail"));
-    await waitFor(".o_add_snippet_dialog iframe.show.o_add_snippet_iframe", { timeout: 500 });
+    await click(
+        queryFirst(
+            ".o-snippets-menu #snippet_groups .o_snippet_thumbnail .o_snippet_thumbnail_area"
+        )
+    );
+    await waitForSnippetDialog();
     await contains(
         ".o_add_snippet_dialog .o_add_snippet_iframe:iframe .o_snippet_preview_wrap"
     ).click();
diff --git a/addons/html_builder/static/tests/website_helpers.js b/addons/html_builder/static/tests/website_helpers.js
index 6159a5fedf36a..f88534178c136 100644
--- a/addons/html_builder/static/tests/website_helpers.js
+++ b/addons/html_builder/static/tests/website_helpers.js
@@ -372,7 +372,7 @@ export async function confirmAddSnippet(snippetName) {
     if (snippetName) {
         previewSelector += " [data-snippet='" + snippetName + "']";
     }
-    await waitFor(".o_add_snippet_dialog iframe.show.o_add_snippet_iframe", { timeout: 500 });
+    await waitForSnippetDialog();
     await contains(previewSelector).click();
     await animationFrame();
 }
@@ -381,11 +381,20 @@ export async function insertCategorySnippet({ group, snippet } = {}) {
     await contains(
         `.o-snippets-menu #snippet_groups .o_snippet${
             group ? `[data-snippet-group=${group}]` : ""
-        } .o_snippet_thumbnail`
+        } .o_snippet_thumbnail .o_snippet_thumbnail_area`
     ).click();
     await confirmAddSnippet(snippet);
 }
 
+export async function waitForSnippetDialog() {
+    await animationFrame();
+    await loadBundle("html_builder.iframe_add_dialog", {
+        targetDoc: queryOne("iframe.o_add_snippet_iframe").contentDocument,
+        js: false,
+    });
+    await waitFor(".o_add_snippet_dialog iframe.show.o_add_snippet_iframe");
+}
+
 export async function setupWebsiteBuilderWithSnippet(snippetName, options = {}) {
     mockService("website", {
         get currentWebsite() {