From 9e5d1495273515bf3b62f6bc8a39ecef55d6a2a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=20De=20Caluw=C3=A9?= Date: Wed, 15 Dec 2021 15:11:57 +0000 Subject: [PATCH] [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 --- .../static/src/scss/website.edit_mode.scss | 12 ++++ .../src/snippets/s_countdown/options.js | 14 ++++- .../static/tests/tours/snippet_countdown.js | 56 +++++++++++++++++++ addons/website/tests/test_snippets.py | 3 + 4 files changed, 83 insertions(+), 2 deletions(-) create mode 100644 addons/website/static/tests/tours/snippet_countdown.js diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss index fd01858f398..7b5798697f0 100644 --- a/addons/website/static/src/scss/website.edit_mode.scss +++ b/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 { diff --git a/addons/website/static/src/snippets/s_countdown/options.js b/addons/website/static/src/snippets/s_countdown/options.js index cec5a29e26a..75f8ac9d2e4 100644 --- a/addons/website/static/src/snippets/s_countdown/options.js +++ b/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); }, //-------------------------------------------------------------------------- diff --git a/addons/website/static/tests/tours/snippet_countdown.js b/addons/website/static/tests/tours/snippet_countdown.js new file mode 100644 index 00000000000..580565e744d --- /dev/null +++ b/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 + }, +]); diff --git a/addons/website/tests/test_snippets.py b/addons/website/tests/test_snippets.py index 2d37b3f5ddf..5c0f2dad7f3 100644 --- a/addons/website/tests/test_snippets.py +++ b/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')