[FIX] website: prevent social media tour to fail sometimes

There is a weird deeper low level misbehavior which makes concurent
click to not acts as they should.
Depending on the runbot/tour speed, the misbehavior might kick in and
makes the tour fail.

When you click on multiple options very quick back to back, their click
will be registered and processed one by one, waiting for the previous
one before considering the next one.
You can see that by simply printing a console log in both
`renderListItems` and `_computeWidgetState` method from `s_social_media`
`options.js` file. Then click quickly on the options related to this
snippet like the active toggle and/or remove custom media.

Despite respecting the click order and not overlapping, some click
results (like hidding or removing) will be rollbacked visually and only
the latest click result (starting from the DOM state before the first
click) will be applied.

Long story short: spam click on every toggle option of all the social
media, you will see that all your click will be processed one by one:
- The first media you toggled off will be toggled off
- Then the second media you toggled off will be toggled off but the
  first one will be back to toggle on.

It seems to be correctly applying the click result one after the other,
but always starting from the initial DOM state/option widget state
(before the clicks), and not as it should: process the second click
based on the state of things altered by the previous click.

This will need a deeper and longer investigation to fix the root cause.
In the meantime, as this tour is failing multiple times a day, this
commit introduce a workaround to avoid this error in the tour.

task-3212519 (later fix)
runbot-16628

closes odoo/odoo#114600

X-original-commit: e9bd67672ea0517771998ec56f155709cd7c310e
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Romain Derie (rde) <rde@odoo.com>

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

@@ -2,6 +2,30 @@
 
 import wTourUtils from 'website.tour_utils';
 
+// TODO: Remove following steps once fix of task-3212519 is done.
+// Those steps are preventing a race condition to happen in the meantime: when
+// the tour was clicking on the toggle to hide facebook in the next step, it
+// would actually "ignore" the result of the click on the toggle and would just
+// consider the action of focusing out the input.
+const socialRaceConditionClass = 'social_media_race_condition';
+const preventRaceConditionStep = [{
+    content: "Wait a few ms to avoid race condition",
+    // Ensure the class is remove from previous call of those steps
+    extra_trigger: `body:not(.${socialRaceConditionClass})`,
+    trigger: 'iframe .s_social_media',
+    run() {
+        setTimeout(() => {
+            document.body.classList.add(socialRaceConditionClass);
+        }, 500);
+    }
+}, {
+    content: "Check the race condition class is added after a few ms",
+    trigger: `body.${socialRaceConditionClass}`,
+    run() {
+        document.body.classList.remove(socialRaceConditionClass);
+    }
+}];
+
 const addNewSocialNetwork = function (optionIndex, linkIndex, url) {
     return [{
         content: "Click on Add New Social Network",
@@ -26,7 +50,9 @@ const addNewSocialNetwork = function (optionIndex, linkIndex, url) {
         content: "Ensure new link is changed",
         trigger: `iframe .s_social_media:has(a:eq(${linkIndex})[href='${url}'])`,
         run: () => {}, // This is a check.
-    }];
+    },
+    ...preventRaceConditionStep,
+    ];
 };
 
 wTourUtils.registerWebsitePreviewTour('snippet_social_media', {
@@ -58,6 +84,7 @@ wTourUtils.registerWebsitePreviewTour('snippet_social_media', {
         trigger: 'we-list table input:eq(6)[data-media="facebook"]',
         run: () => {}, // This is a check.
     },
+    ...preventRaceConditionStep,
     // Create a Link for which we don't have an icon to propose.
     ...addNewSocialNetwork(7, 6, 'https://whatever.it/1EdSw9X'),
     // Create a custom instagram link.
@@ -87,6 +114,7 @@ wTourUtils.registerWebsitePreviewTour('snippet_social_media', {
                  ":has(a:eq(5)[href='https://www.paypal.com/abc']:has(i.fa-paypal))",
         run: () => {}, // This is a check.
     },
+    ...preventRaceConditionStep,
     {
         content: 'Delete the custom link',
         trigger: 'we-list we-button.o_we_select_remove_option',