From 6d2daa0013b7f3b64ad63daa4ec30f8f9ce05bcf Mon Sep 17 00:00:00 2001 From: "Serge Bayet (seba)" Date: Wed, 31 Jan 2024 12:34:39 +0000 Subject: [PATCH] [FIX] web_editor: address zero-width-space bug in link inner content MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit resolves a bug related to zero-width spaces within the inner content of a link. The bug led to a systematic test failure in 17.0 link_tools when comparing the input value with the expected value. The bug originated from [1] that manipulates zero-width spaces to allow users to select the edges of the link. Steps to reproduce: - Navigate to the Project app and open a random task (create one if none exists). - Select the "Description" tab. - Enter "/link" and press "Enter" to activate the link tools dialog box. - In the link label field, input "The Website". - In the URL or email field, input "localhost:8069". - Save the changes. - A new div is generated with the class "note-editable". - Click on the newly created link. - Edit the link by clicking on the edit icon in the popover. - Direct the focus to the link label field at the end of the string "The Website". - Press the "Backspace" key — observe that nothing happens. This fix is actually a complement to [2]. The test added in [3] eliminates zero-width-spaces prior to asserting the equality of values. This was appropriately addresses and handled in this commit. In version 16.2 [4], they refactored and improved the handling of zero-width spaces (ZWS). As a result, ZWS in the link are now escaped when the selection is made, eliminating the need to filter out these empty characters. So, I added two assertions that provide more comprehensive test coverage. The previous test only accounted for one way to open the LinkDialog: selecting a part of the link and clicking on the toolbox icon. Another method is to simply click on the link. In this case, a popover appears, allowing link editing via the edit-link icon. In the latter case, the test fails without the fix. In version 16.4, the link component was migrated to OWL. So the bug isn't there anymore. The new test is kept. Note that after this commit's merge in 16.4, it was patched with [5]. This forward-ported version includes the patch directly. [1]: https://github.com/odoo/odoo/commit/99bc9b115dbdfc29260b4ccdb55ffa2ed16dffb3 [2]: https://github.com/odoo/odoo/commit/71feab51f41f0658f4ad61f99386c9c6978c6025 [3]: https://github.com/odoo/odoo/commit/a56586119845969e9d867a220f5330a6c7daa5c2 [4]: https://github.com/odoo/odoo/commit/89b0ce0c74458342fea5e1b093e9383f82e2440f [5]: https://github.com/odoo/odoo/pull/154644 runbot-44779 closes odoo/odoo#154474 X-original-commit: 9db065e75d7b31febe4a42138308b47d0fa46508 Signed-off-by: Quentin Smetz (qsm) Co-authored-by: Rodolpho Lima --- .../static/tests/html_field_tests.js | 26 ++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/addons/web_editor/static/tests/html_field_tests.js b/addons/web_editor/static/tests/html_field_tests.js index ed3108a98b8..c4538e069ae 100644 --- a/addons/web_editor/static/tests/html_field_tests.js +++ b/addons/web_editor/static/tests/html_field_tests.js @@ -959,7 +959,7 @@ QUnit.module("WebEditor.HtmlField", ({ beforeEach }) => { QUnit.module("Link"); QUnit.test("link preview in Link Dialog", async (assert) => { - assert.expect(4); + assert.expect(6); serverData.models.partner.records.push({ id: 1, @@ -976,6 +976,26 @@ QUnit.module("WebEditor.HtmlField", ({ beforeEach }) => { `, }); + // Test the popover option to edit the link + const a = document.querySelector(".test_target a"); + // Wait for the popover to appear + await nextTick(); + a.click(); + await nextTick(); + // Click on the edit link icon + document.querySelector("a.mx-1.o_we_edit_link.text-dark").click(); + // Make sure popover is closed + await new Promise(resolve => $(a).on('hidden.bs.popover.link_popover', resolve)); + let labelInputField = document.querySelector(".modal input#o_link_dialog_label_input"); + let linkPreview = document.querySelector(".modal a#link-preview"); + assert.strictEqual(labelInputField.value, 'This website', + "The label input field should match the link's content"); + assert.strictEqual(linkPreview.innerText.replaceAll("\u200B", ""), "This website", + "Link label in preview should match label input field"); + + // Click on discard + await click(document, ".modal .modal-footer button.btn-secondary"); + const p = document.querySelector(".test_target"); // Select link label to open the floating toolbar. setSelection(p, 0, p, 1); @@ -984,8 +1004,8 @@ QUnit.module("WebEditor.HtmlField", ({ beforeEach }) => { document.querySelector("#toolbar #create-link").click(); await nextTick(); - const labelInputField = document.querySelector(".modal input#o_link_dialog_label_input"); - const linkPreview = document.querySelector(".modal a#link-preview"); + labelInputField = document.querySelector(".modal input#o_link_dialog_label_input"); + linkPreview = document.querySelector(".modal a#link-preview"); assert.strictEqual(labelInputField.value, 'This website', "The label input field should match the link's content"); assert.strictEqual(linkPreview.innerText, 'This website',