[IMP] website: add tests for all snippets (drag and drop)

Image gallery snippet when dropped is throwing a traceback.
This lead to the editor not usable anymore, as any JS error will prevent any
further action (no JS will work anymore).

This introduce a test that will drag and drop every snippet in a page and click
on it to load its settings in the right panel.

Note that it will remove the snippet before drag & dropping the next one, as
having too many snippet will impact the perf, even killing the browser entirely
if there is a lot.

task-2604383

closes #74135

Signed-off-by: Jérémy Kersten (jke) <[email protected]>

Author: rdeodoo

addons/website/static/tests/tours/snippets_all_drag_and_drop.js

@@ -0,0 +1,94 @@
+odoo.define("website.tour.snippets_all_drag_and_drop", async function (require) {
+"use strict";
+
+const tour = require("web_tour.tour");
+
+let snippetsNames = (new URL(document.location.href)).searchParams.get('snippets_names') || '';
+snippetsNames = snippetsNames.split(',');
+let steps = [];
+let n = 0;
+for (const snippet of snippetsNames) {
+    n++;
+    const snippetSteps = [{
+        content: `Drop ${snippet} snippet [${n}/${snippetsNames.length}]`,
+        trigger: `#oe_snippets .oe_snippet:has( > [data-snippet='${snippet}']) .oe_snippet_thumbnail`,
+        run: "drag_and_drop #wrap",
+    }, {
+        content: `Edit ${snippet} snippet`,
+        trigger: `#wrap.o_editable [data-snippet='${snippet}']`,
+    }, {
+        content: `check ${snippet} setting are loaded, wait panel is visible`,
+        trigger: ".o_we_customize_panel",
+        run: function () {}, // it's a check
+    }, {
+        content: `Remove the ${snippet} snippet`, // Avoid bad perf if many snippets
+        trigger: "we-button.oe_snippet_remove:last"
+    }, {
+        content: `click on 'BLOCKS' tab (${snippet})`,
+        trigger: ".o_we_add_snippet_btn",
+    }];
+
+    if (snippet === 's_google_map') {
+        snippetSteps.splice(1, 3, {
+            content: 'Close API Key popup',
+            trigger: ".modal-footer .btn-secondary",
+        });
+    } else if (snippet === 's_popup') {
+        snippetSteps[2]['in_modal'] = false;
+        snippetSteps.splice(3, 2, {
+            content: `Hide the ${snippet} popup`,
+            trigger: ".s_popup_close",
+        });
+    } else if (['s_newsletter_block', 's_newsletter_subscribe_form', 's_newsletter_subscribe_popup'].includes(snippet)) {
+        snippetSteps.splice(1, 0, {
+            content: `Confirm the ${snippet} popup`,
+            trigger: `.modal-footer button.btn-primary`,
+        });
+    }
+    if (snippet === 's_newsletter_subscribe_popup') {
+        snippetSteps.splice(3, 2, {
+            content: `Hide the ${snippet} popup`,
+            trigger: "button.close",
+        });
+    }
+    steps = steps.concat(snippetSteps);
+}
+
+tour.register("snippets_all_drag_and_drop", {
+    test: true,
+}, [
+    {
+        content: "Ensure snippets are actually passed at the test.",
+        trigger: "#oe_snippets",
+        run: function () {
+            // safety check, otherwise the test might "break" one day and
+            // receive no steps. The test would then not test anything anymore
+            // without us noticing it.
+            if (steps.lenth < 280) {
+                console.error("This test is not behaving as it should.");
+            }
+        },
+    },
+    // This first step is needed as it will be used later for inner snippets
+    // Without this, it will dropped inside the footer and will need an extra
+    // selector.
+    {
+        content: "Drop s_text_image snippet",
+        trigger: "#oe_snippets .oe_snippet:has( > [data-snippet='s_text_image']) .oe_snippet_thumbnail",
+        run: "drag_and_drop #wrap"
+    },
+    {
+        content: "Edit s_text_image snippet",
+        trigger: "#wrap.o_editable [data-snippet='s_text_image']"
+    },
+    {
+        content: "check setting are loaded, wait panel is visible",
+        trigger: ".o_we_customize_panel"
+    },
+    {
+        content: "click on 'BLOCKS' tab",
+        trigger: ".o_we_add_snippet_btn"
+    },
+].concat(steps)
+);
+});

addons/website/tests/test_snippets.py

@@ -1,8 +1,11 @@
 # -*- coding: utf-8 -*-
 # Part of Odoo. See LICENSE file for full copyright and licensing details.
 
+from lxml import html
+
 import odoo
 import odoo.tests
+from odoo.addons.website.tools import MockRequest
 
 
 @odoo.tests.common.tagged('post_install', '-at_install', 'website_snippets')
@@ -13,3 +16,11 @@ def test_01_empty_parents_autoremove(self):
 
     def test_02_default_shape_gets_palette_colors(self):
         self.start_tour("/?enable_editor=1", "default_shape_gets_palette_colors", login='admin')
+
+    def test_03_snippets_all_drag_and_drop(self):
+        with MockRequest(self.env, website=self.env['website'].browse(1)):
+            snippets_template = self.env['ir.ui.view'].render_public_asset('website.snippets')
+        html_template = html.fromstring(snippets_template)
+        data_snippet_els = html_template.xpath("//*[@class='o_panel' and not(contains(@class, 'd-none'))]//*[@data-snippet]")
+        snippets_names = ','.join([el.attrib['data-snippet'] for el in data_snippet_els])
+        self.start_tour("/?enable_editor=1&snippets_names=%s" % snippets_names, "snippets_all_drag_and_drop", login='admin', timeout=300)