From 7594705db56dfbb0fb43dce359c121406799acb3 Mon Sep 17 00:00:00 2001 From: Romaric MOYEUVRE Date: Thu, 5 Dec 2024 16:54:51 +0100 Subject: [PATCH] Fix destroy of countdown + add test --- .../src/snippets/s_countdown/countdown.js | 31 +++++++++---------- .../interactions/snippets/countdown.test.js | 13 ++++++++ .../tour_utils/widget_lifecycle_dep_widget.js | 2 +- 3 files changed, 28 insertions(+), 18 deletions(-) diff --git a/addons/website/static/src/snippets/s_countdown/countdown.js b/addons/website/static/src/snippets/s_countdown/countdown.js index 2eaacac5d920e..14fc82c0234cc 100644 --- a/addons/website/static/src/snippets/s_countdown/countdown.js +++ b/addons/website/static/src/snippets/s_countdown/countdown.js @@ -8,16 +8,20 @@ import { getCSSVariableValue, getHtmlStyle } from "@html_editor/utils/formatting class Countdown extends Interaction { static selector = ".s_countdown"; + dynamicContent = { + ".s_countdown_canvas_wrapper:t-att-class": () => ({ + "d-flex": true, + "justify-content-center": true, + }), + } setup() { - // Remove SVG previews (used to simulated canvas) this.el.querySelectorAll("svg").forEach(el => { el.parentNode.remove(); }) this.wrapperEl = this.el.querySelector(".s_countdown_canvas_wrapper"); - this.wrapperEl.classList.add("d-flex", "justify-content-center"); this.hereBeforeTimerEnds = false; this.endAction = this.el.dataset.endAction; this.endTime = parseInt(this.el.dataset.endTime); @@ -58,13 +62,8 @@ class Countdown extends Interaction { } destroy() { - this.el.querySelector(".s_countdown_end_redirect_message")?.remove(); this.el.querySelector(".s_countdown_end_message")?.classList.add("d-none"); - this.el.querySelector(".s_countdown_text_wrapper")?.remove(); this.el.querySelector(".s_countdown_canvas_wrapper")?.classList.remove("d-none"); - this.el.querySelector(".s_countdown_canvas_flex")?.remove(); - - this.wrapperEl.innerHTML = ""; clearInterval(this.setInterval); } @@ -94,11 +93,9 @@ class Countdown extends Interaction { if (!this.el.querySelector(".s_countdown_end_redirect_message").length) { const container = this.el.querySelector("> .container, > .container-fluid, > .o_container_small"); - container.appendChild( - renderToElement("website.s_countdown.end_redirect_message", { - redirectUrl: redirectUrl, - }) - ); + this.insert(renderToElement("website.s_countdown.end_redirect_message", { + redirectUrl: redirectUrl, + }), container); } } } else if (this.endAction === "message" || this.endAction === "message_no_countdown") { @@ -128,7 +125,7 @@ class Countdown extends Interaction { this.timeDiff = []; if (this.isUnitVisible("d") && !(this.onlyOneUnit && delta < 86400)) { const divEl = this.createCanvasWrapper(); - this.wrapperEl.appendChild(divEl); + this.insert(divEl, this.wrapperEl); this.timeDiff.push({ canvas: divEl, // There is no logical number of unit (total) on which day units @@ -140,7 +137,7 @@ class Countdown extends Interaction { } if (this.isUnitVisible("h") || (this.onlyOneUnit && delta < 86400 && delta > 3600)) { const divEl = this.createCanvasWrapper(); - this.wrapperEl.appendChild(divEl); + this.insert(divEl, this.wrapperEl); this.timeDiff.push({ canvas: divEl, total: 24, @@ -150,7 +147,7 @@ class Countdown extends Interaction { } if (this.isUnitVisible("m") || (this.onlyOneUnit && delta < 3600 && delta > 60)) { const divEl = this.createCanvasWrapper(); - this.wrapperEl.appendChild(divEl); + this.insert(divEl, this.wrapperEl); this.timeDiff.push({ canvas: divEl, total: 60, @@ -160,7 +157,7 @@ class Countdown extends Interaction { } if (this.isUnitVisible("s") || (this.onlyOneUnit && delta < 60)) { const divEl = this.createCanvasWrapper(); - this.wrapperEl.appendChild(divEl); + this.insert(divEl, this.wrapperEl); this.timeDiff.push({ canvas: divEl, total: 60, @@ -214,7 +211,7 @@ class Countdown extends Interaction { const spanEl = document.createElement("span"); spanEl.classList.add("s_countdown_text", "ms-1"); this.textWrapperEl.appendChild(spanEl); - this.wrapperEl.appendChild(this.textWrapperEl); + this.insert(this.textWrapperEl, this.wrapperEl); } this.textWrapperEl.classList.toggle("d-none", hideCountdown); diff --git a/addons/website/static/tests/interactions/snippets/countdown.test.js b/addons/website/static/tests/interactions/snippets/countdown.test.js index df4df18885dc8..480847fb8070e 100644 --- a/addons/website/static/tests/interactions/snippets/countdown.test.js +++ b/addons/website/static/tests/interactions/snippets/countdown.test.js @@ -117,3 +117,16 @@ test("[time] countdown display is updated correctly when time pass", async () => // Second canvas must have changed twice expect(secondsUpdate12 && secondsUpdate23).toBe(true); }); + +test("countdown is stopped correctly", async () => { + const { core, el } = await startInteractions(getTemplate()); + const wrapEl = el.querySelector(".s_countdown_canvas_wrapper"); + await advanceTime(0); + expect(wrapEl.querySelectorAll(".s_countdown_canvas_flex").length).toBe(4); + core.stopInteractions(); + expect(!!wrapEl.querySelector(".s_countdown_end_redirect_message")).toBe(false); + expect(!!wrapEl.querySelector(".s_countdown_text_wrapper")).toBe(false); + expect(!!wrapEl.querySelector(".s_countdown_canvas_flex")).toBe(false); + expect(wrapEl.querySelector(".s_countdown_end_message")?.classList.contains("d-none")).toBe(true); + expect(wrapEl.querySelector(".s_countdown_canvas_wrapper")?.classList.contains("d-none")).toBe(false); +}); diff --git a/addons/website/static/tests/tour_utils/widget_lifecycle_dep_widget.js b/addons/website/static/tests/tour_utils/widget_lifecycle_dep_widget.js index 9615196b3d441..13d72d8aa0f8f 100644 --- a/addons/website/static/tests/tour_utils/widget_lifecycle_dep_widget.js +++ b/addons/website/static/tests/tour_utils/widget_lifecycle_dep_widget.js @@ -26,7 +26,7 @@ odoo.loader.bus.addEventListener("module-started", (e) => { dynamicContent = { "_root": { // TODO Adapt naming if still needed. - "t-att-class": ({ "public_widget_started": true }), + "t-att-class": () => ({ "public_widget_started": true }), }, }; // TODO Handle edit mode.