pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REF] web_editor: adapt editor tests to use triggerEvent

Browse Source 
A new method `triggerEvent` has been introduced in order to simplify
event creation. This commit adapt the tests to use that method.

closes odoo/odoo#92653

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This commit is contained in:
Nicolas Bayet
2022-06-02 16:54:12 +02:00
parent a88bb2250a
commit 2712e0d1ca
3 changed files with 43 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/lib/odoo-editor/test/spec/editor.test.js
+33 -36
View File
@@ -8,9 +8,6 @@ import {
insertLineBreak,
insertParagraphBreak,
insertText,
keydown,
keyup,
nextTickFrame,
redo,
testEditor,
undo,
@@ -2423,7 +2420,7 @@ X[]
sel.anchorNode.remove();
}
});
await keydown(editor.editable, 'Backspace', { ctrlKey: true, cancelable: true });
triggerEvent(editor.editable, 'keydown', { key: 'Backspace', ctrlKey: true });
},
contentAfter: unformat(`<p>[]<br></p>`),
});
@@ -2443,7 +2440,7 @@ X[]
sel.anchorNode.remove();
}
});
await keydown(editor.editable, 'Backspace', { ctrlKey: true, cancelable: true });
triggerEvent(editor.editable, 'keydown', { key: 'Backspace', ctrlKey: true });
},
contentAfter: unformat(`
<p>text</p>
@@ -2459,7 +2456,7 @@ X[]
[]<br>
</blockquote>`),
stepFunction: async editor => {
await keydown(editor.editable, 'Backspace', { ctrlKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'Backspace', ctrlKey: true });
},
contentAfter: unformat(`<p>[]<br></p>`),
});
@@ -2473,7 +2470,7 @@ X[]
</blockquote>
</div></div>`),
stepFunction: async editor => {
await keydown(editor.editable, 'Backspace', { ctrlKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'Backspace', ctrlKey: true });
},
contentAfter: unformat(`
<div contenteditable="false"><div contenteditable="true">
@@ -2490,7 +2487,7 @@ X[]
</blockquote>
</div></div>`),
stepFunction: async editor => {
await keydown(editor.editable, 'Backspace', { ctrlKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'Backspace', ctrlKey: true });
},
contentAfter: unformat(`
<div contenteditable="false"><div contenteditable="true">
@@ -3533,7 +3530,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab[]<span>\u200B</span>cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowRight');
triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight'});
},
contentAfter: 'ab<span>\u200B[]</span>cd',
// Final state: 'ab<span>\u200B</span>c[]d'
@@ -3541,7 +3538,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab<span>[]\u200B</span>cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowRight');
triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight'});
},
contentAfter: 'ab<span>\u200B[]</span>cd',
// Final state: 'ab<span>\u200B</span>c[]d'
@@ -3551,7 +3548,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: '[ab]<span>\u200B</span>cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowRight', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
},
contentAfter: '[ab<span>\u200B]</span>cd',
// Final state: '[ab<span>\u200B</span>c]d'
@@ -3559,7 +3556,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: '[ab<span>]\u200B</span>cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowRight', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
},
contentAfter: '[ab<span>\u200B]</span>cd',
// Final state: '[ab<span>\u200B</span>c]d'
@@ -3569,7 +3566,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'a[b]<span>\u200B</span>cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowRight', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
},
contentAfter: 'a[b<span>\u200B]</span>cd',
// Final state: 'a[b<span>\u200B</span>c]d'
@@ -3577,7 +3574,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'a[b<span>]\u200B</span>cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowRight', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
},
contentAfter: 'a[b<span>\u200B]</span>cd',
// Final state: 'a[b<span>\u200B</span>c]d'
@@ -3587,7 +3584,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab[]<span>\u200B</span>cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowRight', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
},
contentAfter: 'ab[<span>\u200B]</span>cd',
// Final state: 'ab[<span>\u200B</span>c]d'
@@ -3595,7 +3592,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab<span>[]\u200B</span>cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowRight', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
},
contentAfter: 'ab<span>[\u200B]</span>cd',
// Final state: 'ab<span>[\u200B</span>c]d'
@@ -3605,7 +3602,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab<span>]\u200B[</span>cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowRight', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
},
contentAfter: 'ab<span>\u200B[]</span>cd',
// Final state: 'ab<span>\u200B</span>[c]d'
@@ -3613,7 +3610,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab<span>]\u200B</span>[cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowRight', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
},
contentAfter: 'ab<span>\u200B[]</span>cd',
// Final state: 'ab<span>\u200B</span>[c]d'
@@ -3621,7 +3618,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab]<span>\u200B</span>[cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowRight', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
},
contentAfter: 'ab<span>\u200B[]</span>cd',
// Final state: 'ab<span>\u200B</span>[c]d'
@@ -3629,7 +3626,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab]<span>\u200B[</span>cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowRight', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
},
contentAfter: 'ab<span>\u200B[]</span>cd',
// Final state: 'ab<span>\u200B</span>[c]d'
@@ -3639,7 +3636,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab<span>]\u200B</span>c[d',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowRight', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
},
contentAfter: 'ab<span>\u200B]</span>c[d',
// Final state: 'ab<span>\u200B</span>c[]d'
@@ -3647,7 +3644,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab]<span>\u200B</span>c[d',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowRight', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowRight', shiftKey: true });
},
contentAfter: 'ab<span>\u200B]</span>c[d',
// Final state: 'ab<span>\u200B</span>c[]d'
@@ -3659,7 +3656,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab<span>\u200B[]</span>cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowLeft');
triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft'});
},
contentAfter: 'ab<span>[]\u200B</span>cd',
// Final state: 'a[]b<span>\u200B</span>cd'
@@ -3667,7 +3664,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab<span>\u200B</span>[]cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowLeft');
triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft'});
},
contentAfter: 'ab<span>[]\u200B</span>cd',
// Final state: 'a[]b<span>\u200B</span>cd'
@@ -3677,7 +3674,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab<span>\u200B[]</span>cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowLeft', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
},
contentAfter: 'ab<span>]\u200B[</span>cd',
// Final state: 'a]b<span>\u200B[</span>cd'
@@ -3685,7 +3682,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab<span>\u200B</span>[]cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowLeft', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
},
contentAfter: 'ab<span>]\u200B[</span>cd',
// Final state: 'a]b<span>\u200B[</span>cd'
@@ -3695,7 +3692,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab<span>\u200B</span>]cd[',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowLeft', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
},
contentAfter: 'ab<span>]\u200B</span>cd[',
// Final state: 'a]b<span>\u200B</span>cd['
@@ -3703,7 +3700,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab<span>\u200B]</span>cd[',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowLeft', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
},
contentAfter: 'ab<span>]\u200B</span>cd[',
// Final state: 'a]b<span>\u200B</span>cd['
@@ -3713,7 +3710,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab<span>\u200B</span>]c[d',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowLeft', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
},
contentAfter: 'ab<span>]\u200B</span>c[d',
// Final state: 'a]b<span>\u200B</span>c[d'
@@ -3721,7 +3718,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab<span>\u200B]</span>c[d',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowLeft', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
},
contentAfter: 'ab<span>]\u200B</span>c[d',
// Final state: 'a]b<span>\u200B</span>c[d'
@@ -3731,7 +3728,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab<span>[\u200B]</span>cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowLeft', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
},
contentAfter: 'ab<span>[]\u200B</span>cd',
// Final state: 'a]b<span>[\u200B</span>cd'
@@ -3739,7 +3736,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab<span>[\u200B</span>]cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowLeft', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
},
contentAfter: 'ab<span>[]\u200B</span>cd',
// Final state: 'a]b<span>[\u200B</span>cd'
@@ -3747,7 +3744,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab[<span>\u200B]</span>cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowLeft', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
},
contentAfter: 'ab[<span>]\u200B</span>cd',
// Final state: 'a]b[<span>\u200B</span>cd'
@@ -3755,7 +3752,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'ab[<span>\u200B</span>]cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowLeft', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
},
contentAfter: 'ab[<span>]\u200B</span>cd',
// Final state: 'a]b[<span>\u200B</span>cd'
@@ -3765,7 +3762,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'a[b<span>\u200B]</span>cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowLeft', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
},
contentAfter: 'a[b<span>]\u200B</span>cd',
// Final state: 'a[]b<span>\u200B</span>cd'
@@ -3773,7 +3770,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: 'a[b<span>\u200B</span>]cd',
stepFunction: async editor => {
await keydown(editor.editable, 'ArrowLeft', { shiftKey: true });
triggerEvent(editor.editable, 'keydown', { key: 'ArrowLeft', shiftKey: true });
},
contentAfter: 'a[b<span>]\u200B</span>cd',
// Final state: 'a[]b<span>\u200B</span>cd'
addons/web_editor/static/lib/odoo-editor/test/spec/utils.test.js
+6 -6
View File
@@ -37,10 +37,9 @@ import {
import {
BasicEditor,
insertText,
keydown,
keyup,
nextTickFrame,
testEditor,
triggerEvent,
unformat,
} from '../utils.js';
@@ -742,12 +741,13 @@ describe('Utils', () => {
stepFunction: async editor => {
const sel = document.getSelection();
const element = sel.anchorNode;
await keydown(editor.editable, '/');
triggerEvent(editor.editable, 'keydown', { key: '/' });
await insertText(editor, '/');
await keyup(editor.editable, '/');
triggerEvent(editor.editable, 'keyup', { key: '/' });
await insertText(editor, 'h2');
await keyup(element, '2', { bubbles: true });
await keydown(editor.editable, 'Enter');
triggerEvent(element, 'keyup', { key: '2' });
await nextTickFrame();
triggerEvent(editor.editable, 'keydown', { key: 'Enter' });
const activeElement = document.activeElement;
setCursorStart(activeElement.lastElementChild);
await nextTickFrame();
addons/web_editor/static/lib/odoo-editor/test/utils.js
+4 -27
View File
@@ -401,39 +401,19 @@ export async function click(el, options) {
const pos = el.getBoundingClientRect();
options = Object.assign(
{
bubbles: true,
clientX: pos.left + 1,
clientY: pos.top + 1,
},
options,
);
el.dispatchEvent(new MouseEvent('mousedown', options));
triggerEvent(el, 'mousedown', options);
await nextTickFrame();
el.dispatchEvent(new MouseEvent('mouseup', options));
triggerEvent(el, 'mouseup', options);
await nextTick();
el.dispatchEvent(new MouseEvent('click', options));
triggerEvent(el, 'click', options);
await nextTickFrame();
}
export async function keydown(editable, key, options = {}) {
options = Object.assign(
{ key: key },
options
);
const ev = new KeyboardEvent('keydown', options);
editable.dispatchEvent(ev);
await nextTickFrame();
}
export async function keyup(editable, key, options = {}) {
options = Object.assign(
{ key: key },
options
);
const ev = new KeyboardEvent('keyup', options);
editable.dispatchEvent(ev);
await nextTickFrame();
}
export async function deleteForward(editor) {
editor.execCommand('oDeleteForward');
@@ -486,13 +466,10 @@ export async function insertText(editor, text) {
// Unfortunatly those Event are flagged `isTrusted: false`.
// So we have no choice and need to detect them inside the Editor.
// But it's the closest to real Browser we can go.
var event = new InputEvent('input', {
triggerEvent(editor.editable, 'input', {
inputType: 'insertText',
data: text,
bubbles: true,
cancelable: true,
});
editor.editable.dispatchEvent(event);
}
export function undo(editor) {