From be782ddde5b66eda0f28e9051ee804ae335370e7 Mon Sep 17 00:00:00 2001 From: "Louis (loco)" Date: Thu, 11 Jan 2024 15:08:01 +0100 Subject: [PATCH] [FIX] web_editor, *: correctly display the hierarchy between elements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit *website Steps to reproduce: - Drop a "Text-Image" snippet on the website. - Click on a column and hide it on desktop. - Click on the parent snippet and hide it on desktop. -> The column is not a child of the parent in the invisible entry. Since [1], invisible snippets are shown hierarchically in order to better visualize the "parent-children" relation that could exist between them. To do so, [1] based its logic on the `.o_snippet_invisible` to find the invisible elements. However, since [2], a distinction has been made between elements that are hidden only on desktop, only on mobile or on both depending on some conditions. The goal of this commit is to take the new `o_snippet_mobile_invisible` and `o_snippet_desktop_invisible` classes into account at the creation of the invisible entry. [1]: https://github.com/odoo/odoo/commit/922d3e63b597b1ef7fbbb5ebb4641a3ad8bdf4ed [2]: https://github.com/odoo/odoo/commit/3103e0553011b5c1f4078972d7a88fa3fd4068b2 task-3679823 closes odoo/odoo#150512 X-original-commit: c8f247ee5fa178f012b2852cba3d0e9322a2c3a6 Signed-off-by: Robin Lejeune (role) --- .../static/src/js/editor/snippets.editor.js | 2 +- .../tests/tours/conditional_visibility.js | 67 +++++++++++++++++++ addons/website/tests/test_ui.py | 1 + 3 files changed, 69 insertions(+), 1 deletion(-) diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js index 0982a88739b..dd6ca884ff7 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -2559,7 +2559,7 @@ var SnippetsMenu = Widget.extend({ // their descendant snippets. const rootInvisibleSnippetEls = [...$invisibleSnippets].filter(invisibleSnippetEl => { const ancestorInvisibleEl = invisibleSnippetEl - .parentElement.closest(".o_snippet_invisible"); + .parentElement.closest(invisibleSelector); if (!ancestorInvisibleEl) { return true; } diff --git a/addons/website/static/tests/tours/conditional_visibility.js b/addons/website/static/tests/tours/conditional_visibility.js index c4c884ef372..630cde16172 100644 --- a/addons/website/static/tests/tours/conditional_visibility.js +++ b/addons/website/static/tests/tours/conditional_visibility.js @@ -181,3 +181,70 @@ wTourUtils.clickOnSnippet(snippets[1]), run: () => {}, // it is a check }, ]); + +wTourUtils.registerWebsitePreviewTour("conditional_visibility_5", { + edition: true, + test: true, + url: "/", +}, () => [ + wTourUtils.dragNDrop(snippets[0]), + { + content: "Click on the image of the dragged snippet", + trigger: "iframe .s_text_image img", + }, + wTourUtils.changeOption("DeviceVisibility", 'we-button[data-toggle-device-visibility="no_desktop"]'), + { + content: "Check that the Column has been added in the 'Invisible Elements' panel", + trigger: ".o_we_invisible_el_panel .o_we_invisible_entry:contains('Column')", + run: () => {}, // it is a check + }, + { + content: "Click on the 'Text - Image' snippet", + trigger: "iframe .s_text_image", + }, + wTourUtils.changeOption("ConditionalVisibility", 'we-button[data-toggle-device-visibility="no_desktop"]'), + { + content: "Check that the 'Text - Image' is the parent of 'Column' in the 'Invisible Elements' panel", + trigger: ".o_we_invisible_el_panel .o_we_invisible_root_parent.o_we_invisible_entry:contains('Text - Image') + ul .o_we_invisible_entry.o_we_sublevel_1:contains('Column')", + run: () => {}, // it is a check + }, + { + content: "Click on the 'Text - Image' entry on the 'Invisible Elements' panel", + trigger: ".o_we_invisible_el_panel .o_we_invisible_root_parent.o_we_invisible_entry:contains('Text - Image')", + }, + { + content: "Check that the snippet is visible on the website", + trigger: "iframe .s_text_image.o_snippet_desktop_invisible.o_snippet_override_invisible", + run: () => {}, // it is a check + }, + wTourUtils.changeOption("ConditionalVisibility", 'we-button[data-toggle-device-visibility="no_mobile"]'), + { + content: "Check that the 'Text - Image' has been removed from the 'Invisible Elements' panel", + trigger: ".o_we_invisible_el_panel:not(.o_we_invisible_entry:contains('Text - Image'))", + run: () => {}, // it is a check + }, + { + content: "Click on the 'Column' entry on the 'Invisible Elements' panel", + trigger: ".o_we_invisible_el_panel .o_we_invisible_entry:contains('Column')", + }, + { + content: "Check that the column is visible on the website", + trigger: "iframe .s_text_image .row > .o_snippet_desktop_invisible.o_snippet_override_invisible", + run: () => {}, // it is a check + }, + wTourUtils.changeOption("DeviceVisibility", 'we-button[data-toggle-device-visibility="no_mobile"]'), + { + content: "Check that the column has been removed from the 'Invisible Elements' panel", + trigger: "#oe_snippets:not(:has(.o_we_invisible_entry:contains('Column')))", + run: () => {}, // it is a check + }, + { + content: "Activate mobile preview", + trigger: ".o_we_website_top_actions button[data-action='mobile']", + }, + { + content: "Check that the 'Text - Image' is the parent of 'Column' in the 'Invisible Elements' panel", + trigger: ".o_we_invisible_el_panel .o_we_invisible_root_parent.o_we_invisible_entry:contains('Text - Image') + ul .o_we_invisible_entry.o_we_sublevel_1:contains('Column')", + run: () => {}, // it is a check + }, +]); diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py index 88e5333255d..0ed5d2ea741 100644 --- a/addons/website/tests/test_ui.py +++ b/addons/website/tests/test_ui.py @@ -305,6 +305,7 @@ class TestUi(odoo.tests.HttpCase): self.start_tour('/web', 'conditional_visibility_2', login='admin') self.start_tour(self.env['website'].get_client_action_url('/'), 'conditional_visibility_3', login='admin') self.start_tour(self.env['website'].get_client_action_url('/'), 'conditional_visibility_4', login='admin') + self.start_tour(self.env['website'].get_client_action_url('/'), 'conditional_visibility_5', login='admin') def test_11_website_snippet_background_edition(self): self.env['ir.attachment'].create({