[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
This commit is contained in:
Antoine Guenet
2023-11-07 21:02:24 +00:00
committed by Sébastien Geelen (sge)
parent b031af6c6a
commit 69b92cad60
5 changed files with 113 additions and 123 deletions
@@ -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>',
@@ -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 () => {
@@ -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();
@@ -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();
@@ -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;
}