[FIX] website: correctly toggle the preview for the countdown snippet

The countdown snippet has an end action that can be configured to show a
message when the countdown reaches zero. A button in the editor toggles
a preview of this message. However, a bug currently makes the preview
disappear whenever the snippet's widget is restarted... which occurs by
simply hovering some other options.

To solve the problem, the preview visibility is now controlled by a
separate css class s_countdown_enable_preview overriding d-none. This
way, the preview visibility no longer interacts with the widget's logic
and is no longer affected by the widget restarting.

task-2638366

X-original-commit: c37354d457f5b868673b4f974e401f4c635062d2
Part-of: odoo/odoo#81557
Co-authored-by: qsm-odoo <qsm@odoo.com>

addons/website/static/src/scss/website.edit_mode.scss

@@ -215,6 +215,18 @@ body.editor_enable.editor_has_snippets {
     }
 }
 
+// s_countdown preview classes
+body.editor_enable {
+    .s_countdown {
+        .s_countdown_enable_preview {
+            display: initial !important;
+        }
+        .s_countdown_none {
+            display: none !important;
+        }
+    }
+}
+
 //s_dynamic_snippet
 body.editor_enable {
     .s_dynamic {

addons/website/static/src/snippets/s_countdown/options.js

@@ -12,6 +12,16 @@ options.registry.countdown = options.Class.extend({
         'click .toggle-edit-message': '_onToggleEndMessageClick',
     }),
 
+    /**
+     * Remove any preview classes, if present.
+     *
+     * @override
+     */
+    cleanForSave: async function () {
+        this.$target.find('.s_countdown_canvas_wrapper').removeClass("s_countdown_none");
+        this.$target.find('.s_countdown_end_message').removeClass("s_countdown_enable_preview");
+    },
+
     //--------------------------------------------------------------------------
     // Options
     //--------------------------------------------------------------------------
@@ -87,9 +97,9 @@ options.registry.countdown = options.Class.extend({
      */
     updateUIEndMessage: function () {
         this.$target.find('.s_countdown_canvas_wrapper')
-            .toggleClass("d-none", this.showEndMessage === true && this.$target.hasClass("hide-countdown"));
+            .toggleClass("s_countdown_none", this.showEndMessage === true && this.$target.hasClass("hide-countdown"));
         this.$target.find('.s_countdown_end_message')
-            .toggleClass("d-none", !this.showEndMessage);
+            .toggleClass("s_countdown_enable_preview", this.showEndMessage === true);
     },
 
     //--------------------------------------------------------------------------

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

@@ -0,0 +1,56 @@
+/** @odoo-module */
+
+import tour from 'web_tour.tour';
+import wTourUtils from 'website.tour_utils';
+
+tour.register('snippet_countdown', {
+    test: true,
+    url: '/?enable_editor=1',
+}, [
+    wTourUtils.dragNDrop({id: 's_countdown', name: 'Countdown'}),
+    wTourUtils.clickOnSnippet({id: 's_countdown', name: 'Countdown'}),
+    wTourUtils.changeOption('countdown', 'we-select:has([data-end-action]) we-toggler', 'end action'),
+    wTourUtils.changeOption('countdown', 'we-button[data-end-action="message"]', 'end action'),
+    wTourUtils.changeOption('countdown', 'we-button.toggle-edit-message', 'message preview'),
+    // The next two steps check that the end message does not disappear when a
+    // widgets_start_request is triggered.
+    {
+        content: "Hover an option which has a preview",
+        trigger: '[data-select-class="o_half_screen_height"]',
+        run: function (actions) {
+            this.$anchor.trigger('mouseover');
+            this.$anchor.trigger('mouseenter');
+        },
+    },
+    {
+        content: "Check that the countdown message is still displayed",
+        trigger: '.s_countdown .s_picture',
+        run: () => {
+            // Just a visibility check
+
+            // Also make sure the mouseout and mouseleave are triggered so that
+            // next steps make sense.
+            // TODO the next steps are not actually testing anything without
+            // it and the mouseout and mouseleave make sense but really it
+            // should not be *necessary* to simulate those for the editor flow
+            // to make some sense.
+            const $previousAnchor = $('[data-select-class="o_half_screen_height"]');
+            $previousAnchor.trigger('mouseout');
+            $previousAnchor.trigger('mouseleave');
+        },
+    },
+    // Next, we change the end action to message and no countdown while the edit
+    // message toggle is still activated. It should hide the countdown
+    wTourUtils.changeOption('countdown', 'we-select:has([data-end-action]) we-toggler', 'end action'),
+    wTourUtils.changeOption('countdown', 'we-button[data-end-action="message_no_countdown"]', 'end action'),
+    {
+        content: "Check that the countdown is not displayed",
+        trigger: '.s_countdown:has(.s_countdown_canvas_wrapper:not(:visible))',
+        run: () => null, // Just a visibility check
+    },
+    {
+        content: "Check that the message is still displayed",
+        trigger: '.s_countdown .s_picture',
+        run: () => null, // Just a visibility check
+    },
+]);

addons/website/tests/test_snippets.py

@@ -28,3 +28,6 @@ class TestSnippets(odoo.tests.HttpCase):
         ]
         snippets_names = ','.join([el.attrib['data-snippet'] for el in data_snippet_els if el.attrib['data-snippet'] not in blacklist])
         self.start_tour("/?enable_editor=1&snippets_names=%s" % snippets_names, "snippets_all_drag_and_drop", login='admin', timeout=300)
+
+    def test_04_countdown_preview(self):
+        self.start_tour("/?enable_editor=1", "snippet_countdown", login='admin')