[FIX] web_tour: consume step even if tip not visible

When several tips (coming from different tours) can be displayed on
the same screen, we only display one of them [1], the one from the
tour having the lowest priority [2]. For instance, with CRM and
Sales, there are two tours starting from the HomeMenu, but we only
display the tip on the CRM app.

Before this commit, if the user entered the Sales app, the first
step of sales tour wasn't consumed, so no tip were displayed inside
the Sales app, even though the user "discovered it by himself".

This commit ensures that tips that aren't displayed because there
is another one with a lower sequence still get consumed when the
user clicks on their anchor.

[1] f0a7d69dcf39348b70662e3523e8160f3367c0b6
[2] 61ed0409c3c419f9624874fb0743d707eee673b1

closes odoo/odoo#53606

X-original-commit: 3bf1d8418f41bcaa0ba4b153620def11aaea0a2b
Signed-off-by: Julien Mougenot (jum) <jum@odoo.com>

3 files changed, 45 insertions, 7 deletions

diff --git a/addons/web_tour/static/src/js/tip.js b/addons/web_tour/static/src/js/tip.js
index b08c12dce52..1f7758d6ada 100644
--- a/addons/web_tour/static/src/js/tip.js
+++ b/addons/web_tour/static/src/js/tip.js
@@ -27,6 +27,8 @@ var Tip = Widget.extend({
      *  - position [String] tip's position ('top', 'right', 'left' or 'bottom'), default 'right'
      *  - width [int] the width in px of the tip when opened, default 270
      *  - space [int] space in px between anchor and tip, default 10
+     *  - hidden [boolean] if true, the tip won't be visible (but the handlers will still be
+     *    bound on the anchor, so that the tip is consumed if the user clicks on it)
      *  - overlay [Object] x and y values for the number of pixels the mouseout detection area
      *    overlaps the opened tip, default {x: 50, y: 50}
      */
@@ -89,6 +91,7 @@ var Tip = Widget.extend({
         this._bind_anchor_events();
         this._updatePosition(true);
 
+        this.$el.toggleClass('d-none', !!this.info.hidden);
         this.$el.css("opacity", 1);
         core.bus.on("resize", this, _.debounce(function () {
             if (this.tip_opened) {
diff --git a/addons/web_tour/static/src/js/tour_manager.js b/addons/web_tour/static/src/js/tour_manager.js
index bdcb3f91c7f..aae5c85bf38 100644
--- a/addons/web_tour/static/src/js/tour_manager.js
+++ b/addons/web_tour/static/src/js/tour_manager.js
@@ -235,12 +235,11 @@ return core.Class.extend(mixins.EventDispatcherMixin, ServicesMixin, {
             const sortedTooltips = Object.keys(this.active_tooltips).sort(
                 (a, b) => this.tours[a].sequence - this.tours[b].sequence
             );
+            let visibleTip = false;
             for (const tourName of sortedTooltips) {
                 var tip = this.active_tooltips[tourName];
-                var activated = this._check_for_tooltip(tip, tourName);
-                if (activated) {
-                    break;
-                }
+                tip.hidden = visibleTip;
+                visibleTip = this._check_for_tooltip(tip, tourName) || visibleTip;
             }
         }
     },
diff --git a/addons/web_tour/static/tests/tour_manager_tests.js b/addons/web_tour/static/tests/tour_manager_tests.js
index 14802f9086f..0b8f7e0679d 100644
--- a/addons/web_tour/static/tests/tour_manager_tests.js
+++ b/addons/web_tour/static/tests/tour_manager_tests.js
@@ -71,12 +71,48 @@ odoo.define('web_tour.tour_manager_tests', async function (require) {
                 debug: true,
             });
 
-            assert.containsOnce(document.body, '.o_tooltip');
-            const tooltip = document.querySelector('.o_tooltip_content');
-            assert.strictEqual(tooltip.innerHTML.trim(), "Oui",
+            assert.containsOnce(document.body, '.o_tooltip:visible');
+            assert.strictEqual($('.o_tooltip_content:visible').text(), "Oui",
                 "content should be that of the third tour");
 
             tourManager.destroy();
         });
+
+        QUnit.test("Click on invisible tip consumes it", async function (assert) {
+            assert.expect(5);
+
+            const tourManager = await createTourManager({
+                template: `
+                    <button class="btn anchor1">Anchor</button>
+                    <button class="btn anchor2">Anchor</button>
+                    `,
+                tours: [{
+                    name: "Tour 1",
+                    options: { rainbowMan: false, sequence: 10 },
+                    steps: [{ trigger: '.anchor1', content: "1" }],
+                }, {
+                    name: "Tour 2",
+                    options: { rainbowMan: false, sequence: 5 },
+                    steps: [{ trigger: '.anchor2', content: "2" }],
+                }],
+                // Use this test in "debug" mode because the tips need to be in
+                // the viewport to be able to test their normal content
+                // (otherwise, the tips would indicate to the users that they
+                // have to scroll).
+                debug: true,
+            });
+
+            assert.containsN(document.body, '.o_tooltip', 2);
+            assert.strictEqual($('.o_tooltip_content:visible').text(), "2");
+
+            await testUtils.dom.click($('.anchor1'));
+            assert.containsOnce(document.body, '.o_tooltip');
+            assert.strictEqual($('.o_tooltip_content:visible').text(), "2");
+
+            await testUtils.dom.click($('.anchor2'));
+            assert.containsNone(document.body, '.o_tooltip');
+
+            tourManager.destroy();
+        });
     });
 });