From 69b92cad60bbfa6d30b92c7692c334268aafd5f0 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Tue, 10 Oct 2023 08:34:47 +0200
Subject: [PATCH] [FIX] web_editor: wait one tick after triggerEvent in tests

We need to wait one tick after `triggerEvent` to be sure that the
event's listeners are resolved before checking the result. Some tests
did the waiting after calling `triggerEvent`, but some didn't. This
includes the waiting in `triggerEvent` itself.

Part-of: odoo/odoo#141303
---
 .../odoo-editor/test/spec/copyPaste.test.js   | 84 ++++++++--------
 .../odoo-editor/test/spec/editor.test.js      | 95 +++++++++----------
 .../odoo-editor/test/spec/powerbox.test.js    | 44 ++++-----
 .../odoo-editor/test/spec/utils.test.js       | 10 +-
 .../src/js/editor/odoo-editor/test/utils.js   |  3 +-
 5 files changed, 113 insertions(+), 123 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/copyPaste.test.js b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/copyPaste.test.js
index b78baec7735..708046c18e0 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/copyPaste.test.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/copyPaste.test.js
@@ -21,7 +21,7 @@ describe('Copy', () => {
                 contentBefore: '<p>[]</p>',
                 stepFunction: async editor => {
                     const clipboardData = new DataTransfer();
-                    triggerEvent(editor.editable, 'copy', { clipboardData });
+                    await triggerEvent(editor.editable, 'copy', { clipboardData });
                     // Check that nothing was set as clipboard content
                     window.chai.expect(clipboardData.types.length).to.be.equal(0);
                 },
@@ -31,7 +31,7 @@ describe('Copy', () => {
                 stepFunction: async editor => {
                     const clipboardData = new DataTransfer();
                     clipboardData.setData('text/plain', 'should stay');
-                    triggerEvent(editor.editable, 'copy', { clipboardData });
+                    await triggerEvent(editor.editable, 'copy', { clipboardData });
                     // Check that clipboard data was not overwritten
                     window.chai.expect(clipboardData.getData('text/plain')).to.be.equal('should stay');
                 },
@@ -44,7 +44,7 @@ describe('Copy', () => {
                 contentBefore: '<p>a[bcd]e</p>',
                 stepFunction: async editor => {
                     const clipboardData = new DataTransfer();
-                    triggerEvent(editor.editable, 'copy', { clipboardData });
+                    await triggerEvent(editor.editable, 'copy', { clipboardData });
                     window.chai.expect(clipboardData.getData('text/plain')).to.be.equal('bcd');
                     window.chai.expect(clipboardData.getData('text/html')).to.be.equal('bcd');
                     window.chai.expect(clipboardData.getData('text/odoo-editor')).to.be.equal('bcd');
@@ -54,7 +54,7 @@ describe('Copy', () => {
                 contentBefore: '<p>[abc<br>efg]</p>',
                 stepFunction: async editor => {
                     const clipboardData = new DataTransfer();
-                    triggerEvent(editor.editable, 'copy', { clipboardData });
+                    await triggerEvent(editor.editable, 'copy', { clipboardData });
                     window.chai.expect(clipboardData.getData('text/plain')).to.be.equal('abc\nefg');
                     window.chai.expect(clipboardData.getData('text/html')).to.be.equal('abc<br>efg');
                     window.chai.expect(clipboardData.getData('text/odoo-editor')).to.be.equal('abc<br>efg');
@@ -64,7 +64,7 @@ describe('Copy', () => {
                 contentBefore: `]<table><tbody><tr><td><ul><li>a[</li><li>b</li><li>c</li></ul></td><td><br></td></tr></tbody></table>`,
                 stepFunction: async editor => {
                     const clipboardData = new DataTransfer();
-                    triggerEvent(editor.editable, 'copy', { clipboardData });
+                    await triggerEvent(editor.editable, 'copy', { clipboardData });
                     window.chai.expect(clipboardData.getData('text/plain')).to.be.equal('a');
                     window.chai.expect(clipboardData.getData('text/html')).to.be.equal('<table><tbody><tr><td><ul><li>a</li><li>b</li><li>c</li></ul></td><td><br></td></tr></tbody></table>');
                     window.chai.expect(clipboardData.getData('text/odoo-editor')).to.be.equal('<table><tbody><tr><td><ul><li>a</li><li>b</li><li>c</li></ul></td><td><br></td></tr></tbody></table>');
@@ -80,7 +80,7 @@ describe('Cut', () => {
                 contentBefore: '<p>[]</p>',
                 stepFunction: async editor => {
                     const clipboardData = new DataTransfer();
-                    triggerEvent(editor.editable, 'cut', { clipboardData });
+                    await triggerEvent(editor.editable, 'cut', { clipboardData });
                     // Check that nothing was set as clipboard content
                     window.chai.expect(clipboardData.types.length).to.be.equal(0);
                 },
@@ -90,7 +90,7 @@ describe('Cut', () => {
                 stepFunction: async editor => {
                     const clipboardData = new DataTransfer();
                     clipboardData.setData('text/plain', 'should stay');
-                    triggerEvent(editor.editable, 'cut', { clipboardData });
+                    await triggerEvent(editor.editable, 'cut', { clipboardData });
                     // Check that clipboard data was not overwritten
                     window.chai.expect(clipboardData.getData('text/plain')).to.be.equal('should stay');
                 },
@@ -103,7 +103,7 @@ describe('Cut', () => {
                 contentBefore: '<p>a[bcd]e</p>',
                 stepFunction: async editor => {
                     const clipboardData = new DataTransfer();
-                    triggerEvent(editor.editable, 'cut', { clipboardData });
+                    await triggerEvent(editor.editable, 'cut', { clipboardData });
                     window.chai.expect(clipboardData.getData('text/plain')).to.be.equal('bcd');
                     window.chai.expect(clipboardData.getData('text/html')).to.be.equal('bcd');
                     window.chai.expect(clipboardData.getData('text/odoo-editor')).to.be.equal('bcd');
@@ -114,7 +114,7 @@ describe('Cut', () => {
                 contentBefore: '<p>[abc<br>efg]</p>',
                 stepFunction: async editor => {
                     const clipboardData = new DataTransfer();
-                    triggerEvent(editor.editable, 'cut', { clipboardData });
+                    await triggerEvent(editor.editable, 'cut', { clipboardData });
                     window.chai.expect(clipboardData.getData('text/plain')).to.be.equal('abc\nefg');
                     window.chai.expect(clipboardData.getData('text/html')).to.be.equal('abc<br>efg');
                     window.chai.expect(clipboardData.getData('text/odoo-editor')).to.be.equal('abc<br>efg');
@@ -127,7 +127,7 @@ describe('Cut', () => {
                 contentBefore: '<p>a[bcd]e</p>',
                 stepFunction: async editor => {
                     const historyStepsCount = editor._historySteps.length;
-                    triggerEvent(editor.editable, 'cut', { clipboardData: new DataTransfer() });
+                    await triggerEvent(editor.editable, 'cut', { clipboardData: new DataTransfer() });
                     window.chai.expect(editor._historySteps.length).to.be.equal(historyStepsCount + 1);
                     undo(editor);
                 },
@@ -141,8 +141,8 @@ describe('Cut', () => {
                     // Set selection to a[bcd]e.
                     const selection = editor.document.getSelection();
                     selection.extend(selection.anchorNode, 4);
-                    triggerEvent(editor.editable, 'cut', { clipboardData: new DataTransfer() });
-                    triggerEvent(editor.editable, 'input', {
+                    await triggerEvent(editor.editable, 'cut', { clipboardData: new DataTransfer() });
+                    await triggerEvent(editor.editable, 'input', {
                         inputType: 'deleteContentForward'
                     });
                 },
@@ -1477,7 +1477,7 @@ describe('Paste', () => {
                         // Ensure the powerbox is active
                         window.chai.expect(editor.powerbox.isOpen).to.be.true;
                         // Pick the first command (Embed image)
-                        triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
                     },
                     contentAfter: `<p>xy<img src="${imageUrl}">[]z</p>`,
                 });
@@ -1488,8 +1488,8 @@ describe('Paste', () => {
                         // Ensure the powerbox is active
                         window.chai.expect(editor.powerbox.isOpen).to.be.true;
                         // Pick the second command (Paste as URL)
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
-                        triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
                     },
                     contentAfter: `<p>xy<a href="${imageUrl}">${imageUrl}</a>[]z</p>`,
                 });
@@ -1731,7 +1731,7 @@ describe('Paste', () => {
                         // Ensure the powerbox is active
                         window.chai.expect(editor.powerbox.isOpen).to.be.true;
                         // Pick the first command (Embed image)
-                        triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
                     },
                     contentAfter: `<p>ab<img src="${imageUrl}">[]cd</p>`,
                 });
@@ -1742,8 +1742,8 @@ describe('Paste', () => {
                         // Ensure the powerbox is active
                         window.chai.expect(editor.powerbox.isOpen).to.be.true;
                         // Pick the second command (Paste as URL)
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
-                        triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
                     },
                     contentAfter: `<p>ab<a href="${imageUrl}">${imageUrl}</a>[]cd</p>`,
                 });
@@ -1807,8 +1807,8 @@ describe('Paste', () => {
                         // Ensure the powerbox is active
                         window.chai.expect(editor.powerbox.isOpen).to.be.true;
                         // Pick the second command (Paste as URL)
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
-                        triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
                     },
                     contentAfter: `<p><a href="${url}">${url}</a>[]</p>`,
                 });
@@ -1824,8 +1824,8 @@ describe('Paste', () => {
                         // Ensure the powerbox is active
                         window.chai.expect(editor.powerbox.isOpen).to.be.true;
                         // Pick the second command (Paste as URL)
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
-                        triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
                     },
                     contentAfter: `<p>*should not disappear*<a href="${url}">${url}</a>[]</p>`,
                 });
@@ -1878,8 +1878,8 @@ describe('Paste', () => {
                         // Ensure the powerbox is active
                         window.chai.expect(editor.powerbox.isOpen).to.be.true;
                         // Pick the second command (Paste as URL)
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
-                        triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
                     },
                     contentAfter: `<p>ab<a href="${url}">${url}</a>[]cd</p>`,
                 });
@@ -1907,8 +1907,8 @@ describe('Paste', () => {
                         // Ensure the powerbox is active
                         window.chai.expect(editor.powerbox.isOpen).to.be.true;
                         // Pick the second command (Paste as URL)
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
-                        triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
                     },
                     contentAfter: `<p>ab<a href="${url}">${url}</a>[]cd</p>`,
                 });
@@ -1922,7 +1922,7 @@ describe('Paste', () => {
                         // Ensure the powerbox is active
                         window.chai.expect(editor.powerbox.isOpen).to.be.true;
                         // Pick first command (Embed image)
-                        triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
                         // Undo
                         await nextTick();
                         editor.historyUndo();
@@ -1936,10 +1936,9 @@ describe('Paste', () => {
                         // Ensure the powerbox is active
                         window.chai.expect(editor.powerbox.isOpen).to.be.true;
                         // Pick second command (Paste as URL)
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
-                        triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
                         // Undo
-                        await nextTick();
                         editor.historyUndo();
                     },
                     contentAfter: '<p>[abc]</p>',
@@ -1995,9 +1994,8 @@ describe('Paste', () => {
                         // Ensure the powerbox is active
                         window.chai.expect(editor.powerbox.isOpen).to.be.true;
                         // Pick the second command (Paste as URL)
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
-                        triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
-                        await nextTick();
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
                     },
                     contentAfter: `<p><a href="${url}">${url}</a>[]</p>`,
                 });
@@ -2013,8 +2011,8 @@ describe('Paste', () => {
                         // Ensure the powerbox is active
                         window.chai.expect(editor.powerbox.isOpen).to.be.true;
                         // Pick the second command (Paste as URL)
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
-                        triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
                     },
                     contentAfter: `<p>*should not disappear*<a href="${url}">${url}</a>[]</p>`,
                 });
@@ -2067,8 +2065,8 @@ describe('Paste', () => {
                         // Ensure the powerbox is active
                         window.chai.expect(editor.powerbox.isOpen).to.be.true;
                         // Pick the second command (Paste as URL)
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
-                        triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
                     },
                     contentAfter: `<p>ab<a href="${url}">${url}</a>[]cd</p>`,
                 });
@@ -2097,8 +2095,8 @@ describe('Paste', () => {
                         // Ensure the powerbox is active
                         window.chai.expect(editor.powerbox.isOpen).to.be.true;
                         // Pick the second command (Paste as URL)
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
-                        triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
                     },
                     contentAfter: `<p>ab<a href="${url}">${url}</a>[]cd</p>`,
                 });
@@ -2112,9 +2110,8 @@ describe('Paste', () => {
                         // Ensure the powerbox is active
                         window.chai.expect(editor.powerbox.isOpen).to.be.true;
                         // Pick first command (Embed video)
-                        triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
                         // Undo
-                        await nextTick();
                         editor.historyUndo();
                     },
                     contentAfter: '<p>[abc]</p>',
@@ -2126,10 +2123,9 @@ describe('Paste', () => {
                         // Ensure the powerbox is active
                         window.chai.expect(editor.powerbox.isOpen).to.be.true;
                         // Pick second command (Paste as URL)
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
-                        triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowDown' });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
                         // Undo
-                        await nextTick();
                         editor.historyUndo();
                     },
                     contentAfter: '<p>[abc]</p>',
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js
index bf2fbf67c5c..5982d011243 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js
@@ -18,7 +18,6 @@ import {
     undo,
     unformat,
     triggerEvent,
-    nextTickFrame,
     nextTick,
     setTestSelection,
 } from '../utils.js';
@@ -3340,7 +3339,7 @@ X[]
                             sel.anchorNode.remove();
                         }
                     });
-                    triggerEvent(editor.editable, 'keydown', { key: 'Backspace', ctrlKey: true });
+                    await triggerEvent(editor.editable, 'keydown', { key: 'Backspace', ctrlKey: true });
                 },
                 contentAfter: unformat(`<p>[]<br></p>`),
             });
@@ -3360,7 +3359,7 @@ X[]
                             sel.anchorNode.remove();
                         }
                     });
-                    triggerEvent(editor.editable, 'keydown', { key: 'Backspace', ctrlKey: true });
+                    await triggerEvent(editor.editable, 'keydown', { key: 'Backspace', ctrlKey: true });
                 },
                 contentAfter: unformat(`
                     <p>text</p>
@@ -3376,7 +3375,7 @@ X[]
                         []<br>
                     </blockquote>`),
                 stepFunction: async editor => {
-                    triggerEvent(editor.editable, 'keydown', { key: 'Backspace', ctrlKey: true });
+                    await triggerEvent(editor.editable, 'keydown', { key: 'Backspace', ctrlKey: true });
                 },
                 contentAfter: unformat(`<p>[]<br></p>`),
             });
@@ -3390,7 +3389,7 @@ X[]
                         </blockquote>
                     </div></div>`),
                 stepFunction: async editor => {
-                    triggerEvent(editor.editable, 'keydown', { key: 'Backspace', ctrlKey: true });
+                    await triggerEvent(editor.editable, 'keydown', { key: 'Backspace', ctrlKey: true });
                 },
                 contentAfter: unformat(`
                     <div contenteditable="false"><div contenteditable="true">
@@ -3407,7 +3406,7 @@ X[]
                         </blockquote>
                     </div></div>`),
                 stepFunction: async editor => {
-                    triggerEvent(editor.editable, 'keydown', { key: 'Backspace', ctrlKey: true });
+                    await triggerEvent(editor.editable, 'keydown', { key: 'Backspace', ctrlKey: true });
                 },
                 contentAfter: unformat(`
                     <div contenteditable="false"><div contenteditable="true">
@@ -4329,12 +4328,12 @@ X[]
                     const anchorOffset = selection.anchorOffset;
                     const p = editor.editable.querySelector('p');
                     const textNode = p.childNodes[0];
-                    triggerEvent(editor.editable, 'keydown', {key: ' ', code: 'Space'});
+                    await triggerEvent(editor.editable, 'keydown', {key: ' ', code: 'Space'});
                     textNode.textContent = "user@domain.com\u00a0";
                     selection.extend(textNode, anchorOffset + 1);
                     selection.collapseToEnd();
-                    triggerEvent(editor.editable, 'input', {data: ' ', inputType: 'insertText' });
-                    triggerEvent(editor.editable, 'keyup', {key: ' ', code: 'Space'});
+                    await triggerEvent(editor.editable, 'input', {data: ' ', inputType: 'insertText' });
+                    await triggerEvent(editor.editable, 'keyup', {key: ' ', code: 'Space'});
                 },
                 contentAfter: '<p>user@domain.com&nbsp;[]</p>',
             });
@@ -4348,12 +4347,12 @@ X[]
                     const anchorOffset = selection.anchorOffset;
                     const p = editor.editable.querySelector('p');
                     const textNode = p.childNodes[0];
-                    triggerEvent(editor.editable, 'keydown', {key: ' ', code: 'Space'});
+                    await triggerEvent(editor.editable, 'keydown', {key: ' ', code: 'Space'});
                     textNode.textContent = "a http://test.com b http://test.com \u00a0 c http://test.com d";
                     selection.extend(textNode, anchorOffset + 1);
                     selection.collapseToEnd();
-                    triggerEvent(editor.editable, 'input', {data: ' ', inputType: 'insertText' });
-                    triggerEvent(editor.editable, 'keyup', {key: ' ', code: 'Space'});
+                    await triggerEvent(editor.editable, 'input', {data: ' ', inputType: 'insertText' });
+                    await triggerEvent(editor.editable, 'keyup', {key: ' ', code: 'Space'});
                 },
                 contentAfter: '<p>a http://test.com b http://test.com &nbsp;[] c http://test.com d</p>',
             });
@@ -6079,8 +6078,7 @@ X[]
             describe('contenteditable', () => {
                 const tableUiMenuTest = async (editor) => {
                     const column = editor.editable.querySelector('td');
-                    triggerEvent(column, 'mousemove', {});
-                    await nextTickFrame();
+                    await triggerEvent(column, 'mousemove', {});
                     if (editor._rowUi.style.visibility === 'visible') {
                         const paragraph = editor.editable.querySelector('p');
                         const text = document.createTextNode('table ui');
@@ -6123,8 +6121,7 @@ X[]
                 });
                 const resizeTest = async (editor) => {
                     const column = editor.editable.querySelector('td');
-                    triggerEvent(column, 'mousemove', {});
-                    await nextTickFrame();
+                    await triggerEvent(column, 'mousemove', {});
                     if (['o_row_resize', 'o_col_resize'].filter(resize => editor.editable.classList.contains(resize)).length) {
                         const paragraph = editor.editable.querySelector('p');
                         const text = document.createTextNode('resizeCursor');
@@ -6180,7 +6177,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab[]<span class="a">\u200B</span>cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight'});
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight'});
                     },
                     contentAfter: '<p>ab<span class="a">\u200B[]</span>cd</p>',
                     // Final state: '<p>ab<span class="a">\u200B</span>c[]d</p>'
@@ -6188,7 +6185,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab<span class="a">[]\u200B</span>cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight'});
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight'});
                     },
                     contentAfter: '<p>ab<span class="a">\u200B[]</span>cd</p>',
                     // Final state: '<p>ab<span class="a">\u200B</span>c[]d</p>'
@@ -6198,7 +6195,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab[]<span class="a">\u200B</span></p><p>cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight'});
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight'});
                     },
                     contentAfter: '<p>ab<span class="a">\u200B[]</span></p><p>cd</p>',
                     // Final state: '<p>ab<span class="a">\u200B</span></p><p>[]cd</p>'
@@ -6206,7 +6203,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab<span class="a">[]\u200B</span></p><p>cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight'});
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight'});
                     },
                     contentAfter: '<p>ab<span class="a">\u200B[]</span></p><p>cd</p>',
                     // Final state: '<p>ab<span class="a">\u200B</span></p><p>[]cd</p>'
@@ -6216,7 +6213,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>[ab]<span class="a">\u200B</span>cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
                     },
                     contentAfter: '<p>[ab<span class="a">\u200B]</span>cd</p>',
                     // Final state: '<p>[ab<span class="a">\u200B</span>c]d</p>'
@@ -6224,7 +6221,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>[ab<span class="a">]\u200B</span>cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
                     },
                     contentAfter: '<p>[ab<span class="a">\u200B]</span>cd</p>',
                     // Final state: '<p>[ab<span class="a">\u200B</span>c]d</p>'
@@ -6234,7 +6231,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>a[b]<span class="a">\u200B</span>cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
                     },
                     contentAfter: '<p>a[b<span class="a">\u200B]</span>cd</p>',
                     // Final state: '<p>a[b<span class="a">\u200B</span>c]d</p>'
@@ -6242,7 +6239,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>a[b<span class="a">]\u200B</span>cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
                     },
                     contentAfter: '<p>a[b<span class="a">\u200B]</span>cd</p>',
                     // Final state: '<p>a[b<span class="a">\u200B</span>c]d</p>'
@@ -6252,7 +6249,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab[]<span class="a">\u200B</span>cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
                     },
                     contentAfter: '<p>ab[<span class="a">\u200B]</span>cd</p>',
                     // Final state: '<p>ab[<span class="a">\u200B</span>c]d</p>'
@@ -6260,7 +6257,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab<span class="a">[]\u200B</span>cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
                     },
                     contentAfter: '<p>ab<span class="a">[\u200B]</span>cd</p>',
                     // Final state: '<p>ab<span class="a">[\u200B</span>c]d</p>'
@@ -6270,7 +6267,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab<span class="a">]\u200B[</span>cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
                     },
                     contentAfter: '<p>ab<span class="a">\u200B[]</span>cd</p>',
                     // Final state: '<p>ab<span class="a">\u200B</span>[c]d</p>'
@@ -6278,7 +6275,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab<span class="a">]\u200B</span>[cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
                     },
                     contentAfter: '<p>ab<span class="a">\u200B[]</span>cd</p>',
                     // Final state: '<p>ab<span class="a">\u200B</span>[c]d</p>'
@@ -6286,7 +6283,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab]<span class="a">\u200B</span>[cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
                     },
                     contentAfter: '<p>ab<span class="a">\u200B[]</span>cd</p>',
                     // Final state: '<p>ab<span class="a">\u200B</span>[c]d</p>'
@@ -6294,7 +6291,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab]<span class="a">\u200B[</span>cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
                     },
                     contentAfter: '<p>ab<span class="a">\u200B[]</span>cd</p>',
                     // Final state: '<p>ab<span class="a">\u200B</span>[c]d</p>'
@@ -6304,7 +6301,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab<span class="a">]\u200B</span>c[d</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
                     },
                     contentAfter: '<p>ab<span class="a">\u200B]</span>c[d</p>',
                     // Final state: '<p>ab<span class="a">\u200B</span>c[]d</p>'
@@ -6312,7 +6309,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab]<span class="a">\u200B</span>c[d</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
                     },
                     contentAfter: '<p>ab<span class="a">\u200B]</span>c[d</p>',
                     // Final state: '<p>ab<span class="a">\u200B</span>c[]d</p>'
@@ -6390,14 +6387,14 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab<span class="a">\u200B[]</span>cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft'});
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft'});
                     },
                     contentAfter: '<p>ab<span class="a">[]\u200B</span>cd</p>',
                 });
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab<span class="a">\u200B</span>[]cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft'});
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft'});
                     },
                     contentAfter: '<p>ab<span class="a">[]\u200B</span>cd</p>',
                 });
@@ -6406,7 +6403,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab<span class="a">\u200B[]</span>cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
                     },
                     contentAfter: '<p>ab<span class="a">]\u200B[</span>cd</p>',
                     // Final state: '<p>a]b<span class="a">\u200B[</span>cd</p>'
@@ -6414,7 +6411,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab<span class="a">\u200B</span>[]cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
                     },
                     contentAfter: '<p>ab<span class="a">]\u200B[</span>cd</p>',
                     // Final state: '<p>a]b<span class="a">\u200B[</span>cd</p>'
@@ -6424,7 +6421,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab<span class="a">\u200B</span>]cd[</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
                     },
                     contentAfter: '<p>ab<span class="a">]\u200B</span>cd[</p>',
                     // Final state: '<p>a]b<span class="a">\u200B</span>cd[</p>'
@@ -6432,7 +6429,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab<span class="a">\u200B]</span>cd[</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
                     },
                     contentAfter: '<p>ab<span class="a">]\u200B</span>cd[</p>',
                     // Final state: '<p>a]b<span class="a">\u200B</span>cd[</p>'
@@ -6442,7 +6439,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab<span class="a">\u200B</span>]c[d</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
                     },
                     contentAfter: '<p>ab<span class="a">]\u200B</span>c[d</p>',
                     // Final state: '<p>a]b<span class="a">\u200B</span>c[d</p>'
@@ -6450,7 +6447,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab<span class="a">\u200B]</span>c[d</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
                     },
                     contentAfter: '<p>ab<span class="a">]\u200B</span>c[d</p>',
                     // Final state: '<p>a]b<span class="a">\u200B</span>c[d</p>'
@@ -6460,7 +6457,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab<span class="a">[\u200B]</span>cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
                     },
                     contentAfter: '<p>ab<span class="a">[]\u200B</span>cd</p>',
                     // Final state: '<p>a]b<span class="a">[\u200B</span>cd</p>'
@@ -6468,7 +6465,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab<span class="a">[\u200B</span>]cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
                     },
                     contentAfter: '<p>ab<span class="a">[]\u200B</span>cd</p>',
                     // Final state: '<p>a]b<span class="a">[\u200B</span>cd</p>'
@@ -6476,7 +6473,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab[<span class="a">\u200B]</span>cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
                     },
                     contentAfter: '<p>ab[<span class="a">]\u200B</span>cd</p>',
                     // Final state: '<p>a]b[<span class="a">\u200B</span>cd</p>'
@@ -6484,7 +6481,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>ab[<span class="a">\u200B</span>]cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
                     },
                     contentAfter: '<p>ab[<span class="a">]\u200B</span>cd</p>',
                     // Final state: '<p>a]b[<span class="a">\u200B</span>cd</p>'
@@ -6494,7 +6491,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>a[b<span class="a">\u200B]</span>cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
                     },
                     contentAfter: '<p>a[b<span class="a">]\u200B</span>cd</p>',
                     // Final state: '<p>a[]b<span class="a">\u200B</span>cd</p>'
@@ -6502,7 +6499,7 @@ X[]
                 await testEditor(BasicEditor, {
                     contentBefore: '<p>a[b<span class="a">\u200B</span>]cd</p>',
                     stepFunction: async editor => {
-                        triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
+                        await triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
                     },
                     contentAfter: '<p>a[b<span class="a">]\u200B</span>cd</p>',
                     // Final state: '<p>a[]b<span class="a">\u200B</span>cd</p>'
@@ -7037,14 +7034,12 @@ X[]
                 }
                 const index = after ? childNodeIndex(editableChild) + 1 : childNodeIndex(editableChild);
                 const pos = [editor.editable, index];
-                triggerEvent(editor.editable, 'mousedown');
+                await triggerEvent(editor.editable, 'mousedown');
                 const selection = editor.document.getSelection();
                 selection.setBaseAndExtent(...pos, ...pos);
                 await nextTick();
-                triggerEvent(editor.editable, 'mouseup');
-                await nextTick();
+                await triggerEvent(editor.editable, 'mouseup');
                 triggerEvent(editor.editable, 'click');
-                await nextTick();
             };
 
             it('should insert a paragraph at end of editable and place cursor in it', async () => {
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/powerbox.test.js b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/powerbox.test.js
index 7c1748763cf..feb1ebf4e24 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/powerbox.test.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/powerbox.test.js
@@ -28,7 +28,7 @@ describe('Powerbox', () => {
                 stepFunction: async editor => {
                     await insertText(editor, '/');
                     await insertText(editor, 'head');
-                    triggerEvent(editor.editable, 'keyup');
+                    await triggerEvent(editor.editable, 'keyup');
                     window.chai.expect(getCurrentCommandNames(editor.powerbox)).to.eql(['Heading 1', 'Heading 2', 'Heading 3']);
                 },
             });
@@ -40,8 +40,8 @@ describe('Powerbox', () => {
                     editor.powerbox.el.classList.add('yo');
                     await insertText(editor, '/');
                     await insertText(editor, 'head');
-                    triggerEvent(editor.editable, 'keyup');
-                    triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
+                    await triggerEvent(editor.editable, 'keyup');
+                    await triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
                 },
                 contentAfter: '<h1>ab[]</h1>',
             });
@@ -54,8 +54,8 @@ describe('Powerbox', () => {
                 stepFunction: async editor => {
                     await insertText(editor,'/');
                     await insertText(editor, 'table');
-                    triggerEvent(editor.editable,'keyup');
-                    triggerEvent(editor.editable,'keydown', {key: 'Enter'});
+                    await triggerEvent(editor.editable,'keyup');
+                    await triggerEvent(editor.editable,'keydown', {key: 'Enter'});
                 },
                 contentAfter: `<table class="table table-bordered o_table"><tbody><tr><td>[]<p><br></p></td><td><p><br></p></td><td><p><br></p></td></tr><tr><td><p><br></p></td><td><p><br></p></td><td><p><br></p></td></tr><tr><td><p><br></p></td><td><p><br></p></td><td><p><br></p></td></tr></tbody></table><p><br></p>`,
             });
@@ -111,13 +111,13 @@ describe('Powerbox', () => {
             });
             powerbox.open();
             window.chai.expect(powerbox._context.selectedCommand.name).to.eql('1');
-            triggerEvent(editable, 'keydown', { key: 'ArrowDown'});
+            await triggerEvent(editable, 'keydown', { key: 'ArrowDown'});
             window.chai.expect(powerbox._context.selectedCommand.name).to.eql('2');
-            triggerEvent(editable, 'keydown', { key: 'ArrowDown'});
+            await triggerEvent(editable, 'keydown', { key: 'ArrowDown'});
             window.chai.expect(powerbox._context.selectedCommand.name).to.eql('3');
-            triggerEvent(editable, 'keydown', { key: 'ArrowUp'});
+            await triggerEvent(editable, 'keydown', { key: 'ArrowUp'});
             window.chai.expect(powerbox._context.selectedCommand.name).to.eql('2');
-            triggerEvent(editable, 'keydown', { key: 'ArrowUp'});
+            await triggerEvent(editable, 'keydown', { key: 'ArrowUp'});
             window.chai.expect(powerbox._context.selectedCommand.name).to.eql('1');
             powerbox.destroy();
             editable.remove();
@@ -137,10 +137,10 @@ describe('Powerbox', () => {
             });
             powerbox.open();
             window.chai.expect(editable.innerText).to.eql('');
-            triggerEvent(editable, 'keydown', { key: 'Enter'});
+            await triggerEvent(editable, 'keydown', { key: 'Enter'});
             window.chai.expect(editable.innerText).to.eql('1');
-            triggerEvent(editable, 'keydown', { key: 'ArrowDown'});
-            triggerEvent(editable, 'keydown', { key: 'Enter'});
+            await triggerEvent(editable, 'keydown', { key: 'ArrowDown'});
+            await triggerEvent(editable, 'keydown', { key: 'Enter'});
             window.chai.expect(editable.innerText).to.eql('2');
             powerbox.destroy();
             editable.remove();
@@ -224,18 +224,18 @@ describe('Powerbox', () => {
             window.chai.expect(getCurrentCommandNames(powerbox)).to.eql(['a1', 'a2', 'a3', 'b1y', 'b2x', 'b3x']);
             // filter: '1'
             editable.append(document.createTextNode('1'));
-            triggerEvent(editable, 'keyup');
+            await triggerEvent(editable, 'keyup');
             window.chai.expect(getCurrentCommandNames(powerbox)).to.eql(['a1', 'b1y']);
             // filter: ''
             editable.lastChild.remove();
-            triggerEvent(editable, 'keyup');
+            await triggerEvent(editable, 'keyup');
             window.chai.expect(getCurrentCommandNames(powerbox)).to.eql(['a1', 'a2', 'a3', 'b1y', 'b2x', 'b3x']);
             // filter: 'a'
             editable.append(document.createTextNode('a'));
-            triggerEvent(editable, 'keyup'); // filter: 'a'.
+            await triggerEvent(editable, 'keyup'); // filter: 'a'.
             window.chai.expect(getCurrentCommandNames(powerbox)).to.eql(['a1', 'a2', 'a3']);
             editable.append(document.createTextNode('1'));
-            triggerEvent(editable, 'keyup'); // filter: 'a1'.
+            await triggerEvent(editable, 'keyup'); // filter: 'a1'.
             window.chai.expect(getCurrentCommandNames(powerbox)).to.eql(['a1']);
             powerbox.destroy();
             editable.remove();
@@ -264,19 +264,19 @@ describe('Powerbox', () => {
             window.chai.expect(getCurrentCommandNames(powerbox)).to.eql(['a1', 'a2', 'a3', 'b1y', 'b2x', 'b3x']);
             // Text: '1y' -> filter: 'y'
             editable.append(document.createTextNode('x'));
-            triggerEvent(editable, 'keyup');
+            await triggerEvent(editable, 'keyup');
             window.chai.expect(getCurrentCommandNames(powerbox)).to.eql(['b2x', 'b3x']);
             // Text: '1'
             editable.lastChild.remove();
-            triggerEvent(editable, 'keydown', { key: 'Backspace' });
-            triggerEvent(editable, 'keyup');
+            await triggerEvent(editable, 'keydown', { key: 'Backspace' });
+            await triggerEvent(editable, 'keyup');
             window.chai.expect(getCurrentCommandNames(powerbox)).to.eql(['a1', 'a2', 'a3', 'b1y', 'b2x', 'b3x']);
             window.chai.expect(powerbox.isOpen).to.eql(true);
             window.chai.expect(powerbox.el.style.display).not.to.eql('none');
             // Text: ''
             editable.lastChild.remove();
-            triggerEvent(editable, 'keydown', { key: 'Backspace' });
-            triggerEvent(editable, 'keyup');
+            await triggerEvent(editable, 'keydown', { key: 'Backspace' });
+            await triggerEvent(editable, 'keyup');
             window.chai.expect(powerbox.isOpen).to.eql(false);
             window.chai.expect(powerbox.el.style.display).to.eql('none');
             powerbox.destroy();
@@ -298,7 +298,7 @@ describe('Powerbox', () => {
             powerbox.open();
             window.chai.expect(powerbox.isOpen).to.eql(true);
             window.chai.expect(powerbox.el.style.display).not.to.eql('none');
-            triggerEvent(editable, 'keydown', { key: 'Escape' });
+            await triggerEvent(editable, 'keydown', { key: 'Escape' });
             window.chai.expect(powerbox.isOpen).to.eql(false);
             window.chai.expect(powerbox.el.style.display).to.eql('none');
             powerbox.destroy();
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/utils.test.js b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/utils.test.js
index 45d96ef8434..802e8da8aed 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/utils.test.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/utils.test.js
@@ -761,14 +761,12 @@ describe('Utils', () => {
                 stepFunction: async editor => {
                     const sel = document.getSelection();
                     const element = sel.anchorNode;
-                    triggerEvent(editor.editable, 'keydown', { key: '/' });
+                    await triggerEvent(editor.editable, 'keydown', { key: '/' });
                     await insertText(editor, '/');
-                    triggerEvent(editor.editable, 'keyup', { key: '/' });
+                    await triggerEvent(editor.editable, 'keyup', { key: '/' });
                     await insertText(editor, 'h2');
-                    triggerEvent(element, 'keyup', { key: '2' });
-                    await nextTickFrame();
-                    triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
-                    await nextTickFrame();
+                    await triggerEvent(element, 'keyup', { key: '2' });
+                    await triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
                     const activeElement = document.activeElement;
                     setCursorStart(activeElement.lastElementChild);
                     await nextTickFrame();
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/utils.js b/addons/web_editor/static/src/js/editor/odoo-editor/test/utils.js
index cd832b0f56d..c1e2cc99661 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/test/utils.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/utils.js
@@ -636,7 +636,7 @@ function getEventConstructor(win, type) {
     return eventTypes[type];
 }
 
-export function triggerEvent(
+export async function triggerEvent(
     el,
     eventName,
     options,
@@ -659,6 +659,7 @@ export function triggerEvent(
     const ev = new EventClass(eventName, options);
 
     currentElement.dispatchEvent(ev);
+    await nextTick();
     return ev;
 }