[IMP] website: adapt mega menu tours

Author: aans-odoo

addons/html_editor/controllers/main.py

@@ -592,7 +592,10 @@ def link_preview_metadata_internal(self, preview_url):
             context = dict(request.env.context)
             words = preview_url.strip('/').split('/')
 
-            record_id = int(words.pop())
+            try:
+                record_id = int(words.pop())
+            except ValueError:
+                return {}
             action_name = words.pop()
             if (action_name.startswith('m-') or '.' in action_name) and action_name in request.env and not request.env[action_name]._abstract:
                 # if path format is `odoo/<model>/<record_id>` so we use `action_name` as model name

addons/website/static/src/js/tours/tour_utils.js

@@ -631,3 +631,29 @@ export function toggleMobilePreview(toggleOn) {
         },
     ];
 }
+
+/**
+ * Opens the link popup for the specified link element.
+ *
+ * @param {string} triggerSelector - Selector for the link element.
+ * @param {string} [linkName=""] - Name of the link.
+ * @returns {TourStep[]} The tour steps that opens the link popup.
+ */
+export function openLinkPopup(triggerSelector, linkName = "") {
+    return [
+        {
+            content: `Open '${linkName}' link popup`,
+            trigger: triggerSelector,
+            async run() {
+                const el = this.anchor;
+                const sel = el.ownerDocument.getSelection();
+                sel.collapse(el.childNodes[0], 1);
+                el.focus();
+            }
+        },
+        {
+            content: "Check if the link popover opened",
+            trigger: ".o-we-linkpopover"
+        }
+    ];
+}

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

@@ -1,7 +1,8 @@
 import {
-    changeOption,
+    changeOptionInPopover,
     clickOnExtraMenuItem,
     clickOnSave,
+    openLinkPopup,
     registerWebsitePreviewTour,
 } from "@website/js/tours/tour_utils";
 
@@ -123,14 +124,10 @@ registerWebsitePreviewTour("megamenu_active_nav_link", {
     edition: true,
 }, () => [
        // Add a megamenu item to the top menu.
-    {
-        content: "Click on a menu item",
-        trigger: ":iframe .top_menu .nav-item a",
-        run: "click",
-    },
+    ...openLinkPopup(":iframe .top_menu .nav-item a", "Home"),
     {
         content: "Click on 'Link' to open Link Dialog",
-        trigger: ":iframe .o_edit_menu_popover a.js_edit_menu",
+        trigger: ".o-we-linkpopover a.js_edit_menu",
         run: "click",
     },
     {
@@ -160,50 +157,24 @@ registerWebsitePreviewTour("megamenu_active_nav_link", {
         run: "click",
     },
     {
-        trigger: "#oe_snippets.o_loaded",
+        trigger: "body:not(:has(.modal))",
     },
     {
         content: "Check for the new mega menu",
         trigger: `:iframe .top_menu:has(.nav-item a.o_mega_menu_toggle:contains("Megatron"))`,
     },
-    {
-        trigger: ".o_website_preview.editor_enable.editor_has_snippets:not(.o_is_blocked)"
-    },
     clickOnExtraMenuItem({}, true),
     toggleMegaMenu({}),
+    ...openLinkPopup(":iframe .s_mega_menu_odoo_menu .nav-link:contains('Laptops')", "Laptops"),
     {
-        content: "Select the first menu link of the first column",
-        trigger: ":iframe .s_mega_menu_odoo_menu .row > div:first-child .nav a",
-        async run(actions) {
-            await actions.click();
-            const iframeDocument = document.querySelector('.o_iframe').contentDocument;
-            const range = iframeDocument.createRange();
-            range.selectNodeContents(this.anchor);
-            const sel = iframeDocument.getSelection();
-            sel.removeAllRanges();
-            sel.addRange(range);
-        },
-    },
-    {
-        content: "Click 'edit link' button if URL input is now shown",
-        trigger: "#create-link",
-        async run(actions) {
-            // Note: the 'create-link' button is always here, however the input 
-            // for the URL might not be.
-            // We have to consider both cases:
-            // 1. Single-app website build: a few menu, so no extra menu added 
-            //    and the URL input is shown
-            // 2. Multi-app website build:  many menu, so extra menu added 
-            //    and the URL input is not shown
-            if (!document.querySelector("#o_link_dialog_url_input")) {
-                await actions.click();
-            }
-        },
+        content: "Click on 'Edit Link'",
+        trigger: ".o-we-linkpopover a.o_we_edit_link",
+        run: "click",
     },
     {
         content: "Change the link",
-        trigger: "#o_link_dialog_url_input",
-        run: "edit /new_page"
+        trigger: ".o-we-linkpopover input.o_we_href_input_link",
+        run: "edit /new_page",
     },
     ...clickOnSave(),
     clickOnExtraMenuItem({}, true),
@@ -223,14 +194,10 @@ registerWebsitePreviewTour('edit_megamenu_big_icons_subtitles', {
     edition: true,
 }, () => [
     // Add a megamenu item to the top menu.
-    {
-        content: "Click on a menu item",
-        trigger: ':iframe .top_menu .nav-item a',
-        run: "click",
-    },
+    ...openLinkPopup(":iframe .top_menu .nav-item a", "Home"),
     {
         content: "Click on 'Link' to open Link Dialog",
-        trigger: ':iframe .o_edit_menu_popover a.js_edit_menu',
+        trigger: ".o-we-linkpopover a.js_edit_menu",
         run: "click",
     },
     {
@@ -260,15 +227,12 @@ registerWebsitePreviewTour('edit_megamenu_big_icons_subtitles', {
         run: "click",
     },
     {
-        trigger: '#oe_snippets.o_loaded',
+        trigger: "body:not(:has(.modal))",
     },
     {
         content: "Check for the new mega menu",
         trigger: ':iframe .top_menu:has(.nav-item a.o_mega_menu_toggle:contains("Megaaaaa2!"))',
     },
-    {
-        trigger: ".o_website_preview.editor_enable.editor_has_snippets:not(.o_is_blocked)"
-    },
     // Edit a menu item
     clickOnExtraMenuItem({}, true),
     toggleMegaMenu({}),
@@ -277,18 +241,14 @@ registerWebsitePreviewTour('edit_megamenu_big_icons_subtitles', {
         trigger: ':iframe .s_mega_menu_odoo_menu .row > div:first-child .nav > :first-child',
         run: "click",
     },
-    changeOption("MegaMenuLayout", "we-toggler"),
-    {
-        content: "Select Big Icons Subtitles mega menu",
-        trigger: '[data-select-label="Big Icons Subtitles"]',
-        run: "click",
-    },
+    // Change MegaMenu template
+    ...changeOptionInPopover("Mega Menu", "Template", "[title='Big Icons Subtitles']"),
     {
         content: "Select the h4 of first menu link of the first column",
         trigger: ':iframe .s_mega_menu_big_icons_subtitles .row > div:first-child .nav > :first-child h4',
         async run(actions) {
             await actions.click();
-            const iframeDocument = document.querySelector('.o_iframe').contentDocument;
+            const iframeDocument = document.querySelector('.o_iframe_container iframe').contentDocument;
             const range = iframeDocument.createRange();
             range.selectNodeContents(this.anchor);
             const sel = iframeDocument.getSelection();
@@ -298,7 +258,7 @@ registerWebsitePreviewTour('edit_megamenu_big_icons_subtitles', {
     },
     {
         content: "Convert it to Bold",
-        trigger: '#oe_snippets #toolbar #bold',
+        trigger: ".o-we-toolbar button[name='bold']",
         run: "click",
     },
     ...clickOnSave(),

addons/website/tests/test_ui.py

@@ -514,7 +514,6 @@ def test_15_website_link_tools(self):
     def test_16_website_edit_megamenu(self):
         self.start_tour(self.env['website'].get_client_action_url('/'), 'edit_megamenu', login='admin')
 
-    @unittest.skip
     def test_website_megamenu_active_nav_link(self):
         self.start_tour(self.env['website'].get_client_action_url('/'), 'megamenu_active_nav_link', login='admin')
 
@@ -603,7 +602,6 @@ def test_29_website_backend_menus_redirect(self):
     def test_30_website_text_animations(self):
         self.start_tour("/", 'text_animations', login='admin')
 
-    @unittest.skip
     def test_31_website_edit_megamenu_big_icons_subtitles(self):
         self.start_tour(self.env['website'].get_client_action_url('/'), 'edit_megamenu_big_icons_subtitles', login='admin')