[IMP] website: adapt website_update_column_count

This commit include the fix of website_update_column_cout tour
and update the option on toggle on/off mobile preview.

Author: divy-odoo

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

@@ -3,9 +3,10 @@ import {
     insertSnippet,
     registerWebsitePreviewTour,
     toggleMobilePreview,
+    changeOptionInPopover,
 } from '@website/js/tours/tour_utils';
 
-const columnCountOptSelector = ".snippet-option-layout_column we-select[data-name='column_count_opt']";
+const columnCountOptSelector = "div[data-label='Layout'] .dropdown-toggle";
 const columnsSnippetRow = ":iframe .s_three_columns .row";
 const textImageSnippetRow = ":iframe .s_text_image .row";
 const changeFirstAndSecondColumnsMobileOrder = (snippetRowSelector, snippetName) => {
@@ -48,47 +49,35 @@ registerWebsitePreviewTour("website_update_column_count", {
 ...clickOnSnippet({
     id: "s_three_columns",
     name: "Columns",
-}), {
-    content: "Open the columns count select",
-    trigger: columnCountOptSelector,
-    run: "click",
-}, {
-    content: "Set 5 columns on desktop",
-    trigger: `${columnCountOptSelector} we-button[data-select-count='5']`,
-    run: "click",
-}, {
+}),
+...changeOptionInPopover("Columns", "Layout", "[data-action-value='5']"),
+{
     content: "Check that there are now 5 items on 5 columns, and that it didn't change the mobile layout",
     trigger: `${columnsSnippetRow}:has(.col-lg-2:nth-child(5):not(.col-2)):not(:has(:nth-child(6)))`,
 }, {
     content: "Check that there is an offset on the 1st item to center the row on desktop, but not on mobile",
     trigger: `${columnsSnippetRow} > .offset-lg-1:not(.offset-1):first-child`,
-}, {
-    content: "Open the columns count select",
-    trigger: columnCountOptSelector,
-    run: "click",
-}, {
-    content: "Set 2 columns on desktop",
-    trigger: `${columnCountOptSelector} we-button[data-select-count='2']`,
-    run: "click",
-}, {
+},
+...changeOptionInPopover("Columns", "Layout", "[data-action-value='2']"),
+{
     content: "Check that there are still 5 items in the row and click on the last one",
     trigger: `${columnsSnippetRow} > :nth-child(5)`,
     run: "click",
 }, {
     content: "Delete the item",
-    trigger: "we-title:contains('Card') .oe_snippet_remove",
+    trigger: "div[data-container-title='Card'] .oe_snippet_remove",
     run: "click",
 }, {
     content: "Toggle mobile view",
-    trigger: ".o_we_website_top_actions [data-action='mobile']",
+    trigger: ".o-snippets-top-actions button[data-action='mobile']",
     run: "click",
 }, {
     content: "Check that there is 1 column on mobile and click on the selector",
-    trigger: `${columnCountOptSelector} we-toggler:contains('1')`,
+    trigger: `${columnCountOptSelector}:contains('1')`,
     run: "click",
 }, {
     content: "Set 3 columns on mobile",
-    trigger: `${columnCountOptSelector} we-button[data-select-count='3']`,
+    trigger: ".o_popover div[data-action-id='changeColumnCount'][data-action-value='3']",
     run: "click",
 }, {
     content: "Check that there are still 4 items but on rows of 3 columns",
@@ -97,60 +86,68 @@ registerWebsitePreviewTour("website_update_column_count", {
 // As there is no practical way to resize the items through the handles, the
 // next step approximates part of what could be reached.
 {
+    content: "Click on the 2nd item",
+    trigger: `${columnsSnippetRow} > :nth-child(2)`,
+    run: "click",
+}, {
     content: "Add a fake resized class on mobile to the 2nd item",
     trigger: `${columnsSnippetRow} > :nth-child(2)`,
-    run() {
-        this.anchor.classList.replace("col-4", "col-6");
-        // As this is a hardcoded class replacement, a click is needed to
-        // update the column count.
-        this.anchor.previousElementSibling.click();
-    },
+    async run() {
+        const overlayEl = document.querySelector(".oe_overlay.oe_active .o_side_x.e");
+
+        const triggerPointerEvent = (type, x, y) => {
+            const event = new PointerEvent(type, {
+                bubbles: true,
+                pageX: x,
+                pageY: y,
+                clientX: x,
+                clientY: y,
+                pointerType: 'mouse',
+            });
+            (type === "pointermove" ? window : overlayEl).dispatchEvent(event);
+        };
+
+        // Trigger pointer down
+        triggerPointerEvent("pointerdown", 100, 100);
+        // Wait for the mutex/this.next to lock and sizingResolve to be ready
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Dragging
+        triggerPointerEvent("pointermove", 150, 100);
+        triggerPointerEvent("pointerup", 150, 100);
+    }
 }, {
     content: "Check that the counter shows 'Custom'",
-    trigger: `${columnCountOptSelector} we-toggler:contains('Custom')`,
+    trigger: `${columnCountOptSelector}:contains('Custom')`,
 }, {
     content: "Click on the 2nd item",
     trigger: `${columnsSnippetRow} > :nth-child(2)`,
     run: "click",
 }, {
     content: "Change the orders of the 2nd and 3rd items",
-    trigger: ":iframe .o_overlay_move_options [data-name='move_right_opt']",
+    trigger: ".o_overlay_options [aria-label='Move right']",
     run: "click",
-},
-{
+}, {
     trigger: `${columnsSnippetRow}:has([style*='order: 2;'].order-lg-0:nth-child(2) + [style*='order: 1;'].order-lg-0:nth-child(3))`,
-},
-{
+}, {
     content: "Check that the 1st item now has order: 0 and a class .order-lg-0 " +
              "and that order: 1, .order-lg-0 is set on the 3rd item, and order: 2, .order-lg-0 on the 2nd",
     trigger: `${columnsSnippetRow}:has([style*='order: 0;'].order-lg-0:first-child)`,
 }, {
     content: "Toggle desktop view",
-    trigger: ".o_we_website_top_actions [data-action='mobile']",
+    trigger: ".o-snippets-top-actions button[data-action='mobile']",
     run: "click",
-}, {
-    content: "Open the columns count select",
-    trigger: columnCountOptSelector,
-    run: "click",
-}, {
-    content: "Add 2 more items through the columns counter",
-    trigger: `${columnCountOptSelector} we-button[data-select-count='6']`,
-    run: "click",
-}, {
+},
+...changeOptionInPopover("Columns", "Layout", "[data-action-value='6']"),
+{
     content: "Check that each item has a different mobile order from 0 to 5",
     trigger: `${columnsSnippetRow}${[0, 1, 2, 3, 4, 5].map(n => `:has([style*='order: ${n};'].order-lg-0)`).join("")}`,
 }, {
     content: "Click on the 6th item",
     trigger: `${columnsSnippetRow} > :nth-child(6)`,
     run: "click",
-}, {
-    // TODO: remove this step. It should not be needed, but the build fails
-    // without it.
-    content: "Wait for move arrows to appear",
-    trigger: ":iframe .o_overlay_move_options:has([data-name='move_left_opt'] + .d-none[data-name='move_right_opt'])",
 }, {
     content: "Change the orders of the 5th and 6th items to override the mobile orders",
-    trigger: ":iframe .o_overlay_move_options [data-name='move_left_opt']",
+    trigger: ".o_overlay_options [aria-label='Move left']",
     run: "click",
 }, {
     content: "Check that there are no orders anymore",

addons/website/tests/test_ui.py

@@ -620,7 +620,6 @@ def test_website_media_dialog_insert_media(self):
     def test_website_text_font_size(self):
         self.start_tour('/@/', 'website_text_font_size', login='admin', timeout=300)
 
-    @unittest.skip
     def test_update_column_count(self):
         self.start_tour(self.env['website'].get_client_action_url('/'), 'website_update_column_count', login="admin")