[FIX] web_editor: remove check ids in tests

The random ids of checklists and stars are preserved in the dom, which
is needed for their readonly check features to work. However, it
complicates testing. This systematically removes these ids in tests.
It also removes the ids when they are not needed anymore (the node is
not a checklist anymore for instance).

closes odoo/odoo#83137

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>

addons/web_editor/controllers/main.py

@@ -118,7 +118,7 @@ class Web_Editor(http.Controller):
         htmlelem = etree.fromstring("<div>%s</div>" % value, etree.HTMLParser())
         checked = bool(checked)
 
-        li = htmlelem.find(".//li[@id='%s']" % checklistId)
+        li = htmlelem.find(".//li[@id='checkId-%s']" % checklistId)
 
         if li is None:
             return value
@@ -147,7 +147,7 @@ class Web_Editor(http.Controller):
         value = getattr(record, filename, False)
         htmlelem = etree.fromstring("<div>%s</div>" % value, etree.HTMLParser())
 
-        stars_widget = htmlelem.find(".//span[@id='%s']" % starsId)
+        stars_widget = htmlelem.find(".//span[@id='checkId-%s']" % starsId)
 
         if stars_widget is None:
             return value

addons/web_editor/static/lib/odoo-editor/src/utils/sanitize.js

@@ -77,7 +77,16 @@ export function areSimilarElements(node, node2) {
 class Sanitize {
     constructor(root) {
         this.root = root;
+        // Remove unique ids from checklists and stars. These will be renewed
+        // afterwards.
+        for (const node of closestBlock(root).querySelectorAll('[id^=checkId-]')) {
+            node.removeAttribute('id');
+        }
         this.parse(root);
+        // Ensure unique ids on checklists and stars.
+        for (const node of closestBlock(root).querySelectorAll('.o_checklist > li, .o_stars')) {
+            node.setAttribute('id', `checkId-${Math.floor(new Date() * Math.random())}`);
+        }
     }
 
     parse(node) {
@@ -133,12 +142,6 @@ class Sanitize {
             }
         }
 
-        // Ensure unique ids on checklists and stars.
-        if (node.nodeName == 'LI' && node.parentElement && node.parentElement.classList.contains('o_checklist') ||
-            node.classList && node.classList.contains('o_stars')) {
-            node.setAttribute('id', Math.floor(new Date() * Math.random()));
-        }
-
         // FIXME not parse out of editable zone...
         this._parse(node.firstChild);
         this._parse(node.nextSibling);

addons/web_editor/static/lib/odoo-editor/test/utils.js

@@ -326,6 +326,14 @@ export async function testEditor(Editor = OdooEditor, spec) {
 
     if (spec.contentAfter && !firefoxExecCommandError) {
         renderTextualSelection();
+
+        // remove all check-ids (checklists, stars)
+        if (spec.removeCheckIds) {
+            for (const li of document.querySelectorAll('#editor-test-container li[id^=checkId-')) {
+                li.removeAttribute('id');
+            }
+        }
+
         const value = testNode.innerHTML;
         window.chai.expect(value).to.be.equal(spec.contentAfter);
     }

addons/web_editor/static/src/js/backend/field_html.js

@@ -477,14 +477,16 @@ var FieldHtml = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {
      * @param {OdooEvent} ev
      */
     _onReadonlyClickChecklist: function (ev) {
-        var self = this;
+        const self = this;
         if (ev.offsetX > 0) {
             return;
         }
         ev.stopPropagation();
         ev.preventDefault();
-        var checked = $(ev.target).hasClass('o_checked');
-        var checklistId = parseInt($(ev.target).attr('id') || '0');
+        const checked = $(ev.target).hasClass('o_checked');
+        let checklistId = $(ev.target).attr('id');
+        checklistId = checklistId && checklistId.replace('checkId-', '');
+        checklistId = parseInt(checklistId || '0');
 
         this._rpc({
             route: '/web_editor/checklist',
@@ -517,9 +519,11 @@ var FieldHtml = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {
             sib.nodeType === Node.ELEMENT_NODE && sib.classList.contains('fa-star')
         ));
         const shouldToggleOff = node.classList.contains('fa-star') && !nextStars.length;
-        const rating = shouldToggleOff ? 0 : previousStars.length + 1
+        const rating = shouldToggleOff ? 0 : previousStars.length + 1;
 
-        const starsId = parseInt($(node).parent().attr('id') || '0');
+        let starsId = $(node).parent().attr('id');
+        starsId = starsId && starsId.replace('checkId-', '');
+        starsId = parseInt(starsId || '0');
         this._rpc({
             route: '/web_editor/stars',
             params: {