mentionui.js 41 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* global window, document, setTimeout, Event */
  6. import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
  7. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  8. import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  9. import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
  10. import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
  11. import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
  12. import global from '@ckeditor/ckeditor5-utils/src/dom/global';
  13. import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  14. import DomEventData from '@ckeditor/ckeditor5-engine/src/view/observer/domeventdata';
  15. import EventInfo from '@ckeditor/ckeditor5-utils/src/eventinfo';
  16. import MentionUI from '../src/mentionui';
  17. import MentionEditing from '../src/mentionediting';
  18. import MentionsView from '../src/ui/mentionsview';
  19. describe( 'MentionUI', () => {
  20. let editor, model, doc, editingView, mentionUI, editorElement, mentionsView, panelView, listView;
  21. const staticConfig = {
  22. feeds: [
  23. { feed: [ 'Barney', 'Lily', 'Marshall', 'Robin', 'Ted' ] }
  24. ]
  25. };
  26. testUtils.createSinonSandbox();
  27. beforeEach( () => {
  28. editorElement = document.createElement( 'div' );
  29. document.body.appendChild( editorElement );
  30. } );
  31. afterEach( () => {
  32. sinon.restore();
  33. editorElement.remove();
  34. return editor.destroy();
  35. } );
  36. it( 'should create a plugin instance', () => {
  37. return createClassicTestEditor().then( () => {
  38. expect( mentionUI ).to.instanceOf( Plugin );
  39. expect( mentionUI ).to.instanceOf( MentionUI );
  40. } );
  41. } );
  42. describe( 'pluginName', () => {
  43. it( 'should return plugin by its name', () => {
  44. return createClassicTestEditor().then( () => {
  45. expect( editor.plugins.get( 'MentionUI' ) ).to.equal( mentionUI );
  46. } );
  47. } );
  48. } );
  49. describe( 'child views', () => {
  50. beforeEach( () => createClassicTestEditor() );
  51. describe( 'panelView', () => {
  52. it( 'should create a view instance', () => {
  53. expect( panelView ).to.instanceof( BalloonPanelView );
  54. } );
  55. it( 'should be added to the ui.view.body collection', () => {
  56. expect( Array.from( editor.ui.view.body ) ).to.include( panelView );
  57. } );
  58. it( 'should have disabled arrow', () => {
  59. expect( panelView.withArrow ).to.be.false;
  60. } );
  61. it( 'should have added MentionView as a child', () => {
  62. expect( panelView.content.get( 0 ) ).to.be.instanceof( MentionsView );
  63. } );
  64. } );
  65. } );
  66. describe( 'position', () => {
  67. let pinSpy;
  68. const caretRect = {
  69. bottom: 118,
  70. height: 18,
  71. left: 500,
  72. right: 501,
  73. top: 100,
  74. width: 1
  75. };
  76. const balloonRect = {
  77. bottom: 150,
  78. height: 150,
  79. left: 0,
  80. right: 200,
  81. top: 0,
  82. width: 200
  83. };
  84. beforeEach( () => {
  85. return createClassicTestEditor( staticConfig ).then( () => {
  86. pinSpy = sinon.spy( panelView, 'pin' );
  87. } );
  88. } );
  89. it( 'should properly calculate position data', () => {
  90. const editableElement = editingView.document.selection.editableElement;
  91. setData( model, '<paragraph>foo []</paragraph>' );
  92. stubSelectionRects( [ caretRect ] );
  93. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  94. model.change( writer => {
  95. writer.insertText( '@', doc.selection.getFirstPosition() );
  96. } );
  97. return waitForDebounce()
  98. .then( () => {
  99. const pinArgument = pinSpy.firstCall.args[ 0 ];
  100. const { target, positions, limiter, fitInViewport } = pinArgument;
  101. expect( fitInViewport ).to.be.true;
  102. expect( positions ).to.have.length( 4 );
  103. // Mention UI should set limiter to the editable area.
  104. expect( limiter() ).to.equal( editingView.domConverter.mapViewToDom( editableElement ) );
  105. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  106. const mentionMarker = editor.model.markers.get( 'mention' );
  107. const focus = doc.selection.focus;
  108. const expectedRange = editor.model.createRange( focus.getShiftedBy( -1 ), focus );
  109. // It should create a model marker for matcher marker character ('@').
  110. expect( expectedRange.isEqual( mentionMarker.getRange() ) ).to.be.true;
  111. const toViewRangeSpy = sinon.spy( editor.editing.mapper, 'toViewRange' );
  112. expect( target() ).to.deep.equal( caretRect );
  113. sinon.assert.calledOnce( toViewRangeSpy );
  114. const range = toViewRangeSpy.firstCall.args[ 0 ];
  115. expect( mentionMarker.getRange().isEqual( range ), 'Should position to mention marker.' );
  116. const caretSouthEast = positions[ 0 ];
  117. const caretNorthEast = positions[ 1 ];
  118. const caretSouthWest = positions[ 2 ];
  119. const caretNorthWest = positions[ 3 ];
  120. expect( caretSouthEast( caretRect, balloonRect ) ).to.deep.equal( {
  121. left: 501,
  122. name: 'caret_se',
  123. top: 121
  124. } );
  125. expect( caretNorthEast( caretRect, balloonRect ) ).to.deep.equal( {
  126. left: 501,
  127. name: 'caret_ne',
  128. top: -53
  129. } );
  130. expect( caretSouthWest( caretRect, balloonRect ) ).to.deep.equal( {
  131. left: 301,
  132. name: 'caret_sw',
  133. top: 121
  134. } );
  135. expect( caretNorthWest( caretRect, balloonRect ) ).to.deep.equal( {
  136. left: 301,
  137. name: 'caret_nw',
  138. top: -53
  139. } );
  140. } );
  141. } );
  142. it( 'should re-calculate position on typing and stay on selected position', () => {
  143. setData( model, '<paragraph>foo []</paragraph>' );
  144. stubSelectionRects( [ caretRect ] );
  145. model.change( writer => {
  146. writer.insertText( '@', doc.selection.getFirstPosition() );
  147. } );
  148. let positionAfterFirstShow;
  149. return waitForDebounce()
  150. .then( () => {
  151. sinon.assert.calledOnce( pinSpy );
  152. const pinArgument = pinSpy.firstCall.args[ 0 ];
  153. const { positions } = pinArgument;
  154. expect( positions ).to.have.length( 4 );
  155. positionAfterFirstShow = panelView.position;
  156. model.change( writer => {
  157. writer.insertText( 't', doc.selection.getFirstPosition() );
  158. } );
  159. } )
  160. .then( waitForDebounce )
  161. .then( () => {
  162. sinon.assert.calledTwice( pinSpy );
  163. const pinArgument = pinSpy.secondCall.args[ 0 ];
  164. const { positions } = pinArgument;
  165. expect( positions, 'should reuse first matched position' ).to.have.length( 1 );
  166. expect( positions[ 0 ].name ).to.equal( positionAfterFirstShow );
  167. } );
  168. } );
  169. it( 'does not fail if selection has no #editableElement', () => {
  170. setData( model, '<paragraph>foo []</paragraph>' );
  171. stubSelectionRects( [ caretRect ] );
  172. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  173. model.change( writer => {
  174. writer.insertText( '@', doc.selection.getFirstPosition() );
  175. } );
  176. return waitForDebounce()
  177. .then( () => {
  178. const pinArgument = pinSpy.firstCall.args[ 0 ];
  179. const { limiter } = pinArgument;
  180. sinon.stub( editingView.document.selection, 'editableElement' ).value( null );
  181. // Should not break;
  182. expect( limiter() ).to.be.null;
  183. } );
  184. } );
  185. } );
  186. describe( 'typing integration', () => {
  187. it( 'should show panel for matched marker after typing minimum characters', () => {
  188. return createClassicTestEditor( { feeds: [ Object.assign( { minimumCharacters: 2 }, staticConfig.feeds[ 0 ] ) ] } )
  189. .then( () => {
  190. setData( model, '<paragraph>foo []</paragraph>' );
  191. model.change( writer => {
  192. writer.insertText( '@', doc.selection.getFirstPosition() );
  193. } );
  194. } )
  195. .then( () => {
  196. model.change( writer => {
  197. writer.insertText( 'B', doc.selection.getFirstPosition() );
  198. } );
  199. } )
  200. .then( waitForDebounce )
  201. .then( () => {
  202. expect( panelView.isVisible ).to.be.false;
  203. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  204. } )
  205. .then( waitForDebounce )
  206. .then( () => {
  207. model.change( writer => {
  208. writer.insertText( 'a', doc.selection.getFirstPosition() );
  209. } );
  210. } )
  211. .then( waitForDebounce )
  212. .then( () => {
  213. expect( panelView.isVisible ).to.be.true;
  214. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  215. expect( listView.items ).to.have.length( 1 );
  216. model.change( writer => {
  217. writer.insertText( 'r', doc.selection.getFirstPosition() );
  218. } );
  219. } )
  220. .then( waitForDebounce )
  221. .then( () => {
  222. expect( panelView.isVisible ).to.be.true;
  223. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  224. expect( listView.items ).to.have.length( 1 );
  225. } );
  226. } );
  227. describe( 'static list with large set of results', () => {
  228. const bigList = {
  229. marker: '@',
  230. feed: [
  231. 'a01', 'a02', 'a03', 'a04', 'a05', 'a06', 'a07', 'a08', 'a09', 'a10', 'a11', 'a12'
  232. ]
  233. };
  234. beforeEach( () => {
  235. return createClassicTestEditor( { feeds: [ bigList ] } );
  236. } );
  237. it( 'should show panel with no more then 10 items for default static feed', () => {
  238. setData( model, '<paragraph>foo []</paragraph>' );
  239. model.change( writer => {
  240. writer.insertText( '@', doc.selection.getFirstPosition() );
  241. } );
  242. return waitForDebounce()
  243. .then( () => {
  244. expect( panelView.isVisible ).to.be.true;
  245. expect( listView.items ).to.have.length( 10 );
  246. } );
  247. } );
  248. it( 'should scroll mention panel to the selected item', () => {
  249. setData( model, '<paragraph>foo []</paragraph>' );
  250. model.change( writer => {
  251. writer.insertText( '@', doc.selection.getFirstPosition() );
  252. } );
  253. return waitForDebounce()
  254. .then( () => {
  255. expect( panelView.isVisible ).to.be.true;
  256. expectChildViewsIsOnState( [ true, false, false, false, false, false, false, false, false, false ] );
  257. const arrowDownEvtData = {
  258. keyCode: keyCodes.arrowdown,
  259. preventDefault: sinon.spy(),
  260. stopPropagation: sinon.spy()
  261. };
  262. const arrowUpEvtData = {
  263. keyCode: keyCodes.arrowup,
  264. preventDefault: sinon.spy(),
  265. stopPropagation: sinon.spy()
  266. };
  267. fireKeyDownEvent( arrowDownEvtData );
  268. expect( mentionsView.element.scrollTop ).to.equal( 0 );
  269. expectChildViewsIsOnState( [ false, true, false, false, false, false, false, false, false, false ] );
  270. fireKeyDownEvent( arrowUpEvtData );
  271. fireKeyDownEvent( arrowUpEvtData );
  272. expectChildViewsIsOnState( [ false, false, false, false, false, false, false, false, false, true ] );
  273. expect( mentionsView.element.scrollTop ).to.be.not.equal( 0 );
  274. fireKeyDownEvent( arrowDownEvtData );
  275. expectChildViewsIsOnState( [ true, false, false, false, false, false, false, false, false, false ] );
  276. expect( mentionsView.element.scrollTop ).to.equal( 0 );
  277. } );
  278. } );
  279. } );
  280. describe( 'static list with default trigger', () => {
  281. beforeEach( () => {
  282. return createClassicTestEditor( staticConfig );
  283. } );
  284. it( 'should show panel for matched marker', () => {
  285. setData( model, '<paragraph>foo []</paragraph>' );
  286. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  287. model.change( writer => {
  288. writer.insertText( '@', doc.selection.getFirstPosition() );
  289. } );
  290. return waitForDebounce()
  291. .then( () => {
  292. expect( panelView.isVisible ).to.be.true;
  293. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  294. expect( listView.items ).to.have.length( 5 );
  295. } );
  296. } );
  297. it( 'should show panel for matched marker at the beginning of paragraph', () => {
  298. setData( model, '<paragraph>[] foo</paragraph>' );
  299. model.change( writer => {
  300. writer.insertText( '@', doc.selection.getFirstPosition() );
  301. } );
  302. return waitForDebounce()
  303. .then( () => {
  304. expect( panelView.isVisible ).to.be.true;
  305. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  306. expect( listView.items ).to.have.length( 5 );
  307. } );
  308. } );
  309. it( 'should not show panel for marker in the middle of other word', () => {
  310. setData( model, '<paragraph>foo[]</paragraph>' );
  311. model.change( writer => {
  312. writer.insertText( '@', doc.selection.getFirstPosition() );
  313. } );
  314. return waitForDebounce()
  315. .then( () => {
  316. expect( panelView.isVisible ).to.be.false;
  317. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  318. } );
  319. } );
  320. it( 'should not show panel when selection is inside a mention', () => {
  321. setData( model, '<paragraph>foo [@John] bar</paragraph>' );
  322. model.change( writer => {
  323. writer.setAttribute( 'mention', { id: '@John', _uid: 1234 }, doc.selection.getFirstRange() );
  324. } );
  325. model.change( writer => {
  326. writer.setSelection( doc.getRoot().getChild( 0 ), 7 );
  327. } );
  328. return waitForDebounce()
  329. .then( () => {
  330. expect( panelView.isVisible ).to.be.false;
  331. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  332. } );
  333. } );
  334. it( 'should not show panel when selection is at the end of a mention', () => {
  335. setData( model, '<paragraph>foo [@John] bar</paragraph>' );
  336. model.change( writer => {
  337. writer.setAttribute( 'mention', { id: '@John', _uid: 1234 }, doc.selection.getFirstRange() );
  338. } );
  339. model.change( writer => {
  340. writer.setSelection( doc.getRoot().getChild( 0 ), 9 );
  341. } );
  342. return waitForDebounce()
  343. .then( () => {
  344. expect( panelView.isVisible ).to.be.false;
  345. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  346. } );
  347. } );
  348. it( 'should not show panel when selection is not collapsed', () => {
  349. setData( model, '<paragraph>foo []</paragraph>' );
  350. model.change( writer => {
  351. writer.insertText( '@', doc.selection.getFirstPosition() );
  352. } );
  353. return waitForDebounce()
  354. .then( () => {
  355. expect( panelView.isVisible ).to.be.true;
  356. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  357. model.change( () => {
  358. model.modifySelection( doc.selection, { direction: 'backward', unit: 'character' } );
  359. } );
  360. } )
  361. .then( waitForDebounce )
  362. .then( () => {
  363. expect( panelView.isVisible ).to.be.false;
  364. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  365. } );
  366. } );
  367. it( 'should not show panel when selection is after existing mention', () => {
  368. setData( model, '<paragraph>foo [@John] bar[]</paragraph>' );
  369. model.change( writer => {
  370. writer.setAttribute( 'mention', { id: '@John', _uid: 1234 }, doc.selection.getFirstRange() );
  371. } );
  372. return waitForDebounce()
  373. .then( () => {
  374. expect( panelView.isVisible ).to.be.false;
  375. model.change( writer => {
  376. writer.setSelection( doc.getRoot().getChild( 0 ), 8 );
  377. } );
  378. } )
  379. .then( waitForDebounce )
  380. .then( () => {
  381. expect( panelView.isVisible ).to.be.false;
  382. } );
  383. } );
  384. it( 'should show filtered results for matched text', () => {
  385. setData( model, '<paragraph>foo []</paragraph>' );
  386. model.change( writer => {
  387. writer.insertText( '@', doc.selection.getFirstPosition() );
  388. } );
  389. model.change( writer => {
  390. writer.insertText( 'T', doc.selection.getFirstPosition() );
  391. } );
  392. return waitForDebounce()
  393. .then( () => {
  394. expect( panelView.isVisible ).to.be.true;
  395. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  396. expect( listView.items ).to.have.length( 1 );
  397. } );
  398. } );
  399. it( 'should focus the first item in panel', () => {
  400. setData( model, '<paragraph>foo []</paragraph>' );
  401. model.change( writer => {
  402. writer.insertText( '@', doc.selection.getFirstPosition() );
  403. } );
  404. return waitForDebounce()
  405. .then( () => {
  406. const button = listView.items.get( 0 ).children.get( 0 );
  407. expect( button.isOn ).to.be.true;
  408. } );
  409. } );
  410. it( 'should hide panel if no matched items', () => {
  411. setData( model, '<paragraph>foo []</paragraph>' );
  412. model.change( writer => {
  413. writer.insertText( '@', doc.selection.getFirstPosition() );
  414. } );
  415. return waitForDebounce()
  416. .then( () => expect( panelView.isVisible ).to.be.true )
  417. .then( () => {
  418. model.change( writer => {
  419. writer.insertText( 'x', doc.selection.getFirstPosition() );
  420. } );
  421. } )
  422. .then( waitForDebounce )
  423. .then( () => {
  424. expect( panelView.isVisible ).to.be.false;
  425. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  426. expect( listView.items ).to.have.length( 0 );
  427. } );
  428. } );
  429. it( 'should hide panel when text was unmatched', () => {
  430. setData( model, '<paragraph>foo []</paragraph>' );
  431. model.change( writer => {
  432. writer.insertText( '@', doc.selection.getFirstPosition() );
  433. } );
  434. return waitForDebounce()
  435. .then( () => expect( panelView.isVisible ).to.be.true )
  436. .then( () => {
  437. model.change( writer => {
  438. const end = doc.selection.getFirstPosition();
  439. const start = end.getShiftedBy( -1 );
  440. writer.remove( writer.createRange( start, end ) );
  441. } );
  442. } )
  443. .then( waitForDebounce )
  444. .then( () => expect( panelView.isVisible ).to.be.false );
  445. } );
  446. } );
  447. describe( 'asynchronous list with custom trigger', () => {
  448. beforeEach( () => {
  449. const issuesNumbers = [ '100', '101', '102', '103' ];
  450. return createClassicTestEditor( {
  451. feeds: [
  452. {
  453. marker: '#',
  454. feed: feedText => {
  455. return new Promise( resolve => {
  456. setTimeout( () => {
  457. resolve( issuesNumbers.filter( number => number.includes( feedText ) ) );
  458. }, 20 );
  459. } );
  460. }
  461. }
  462. ]
  463. } );
  464. } );
  465. it( 'should show panel for matched marker', () => {
  466. setData( model, '<paragraph>foo []</paragraph>' );
  467. model.change( writer => {
  468. writer.insertText( '#', doc.selection.getFirstPosition() );
  469. } );
  470. return waitForDebounce()
  471. .then( () => {
  472. expect( panelView.isVisible ).to.be.true;
  473. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  474. expect( listView.items ).to.have.length( 4 );
  475. } );
  476. } );
  477. it( 'should show filtered results for matched text', () => {
  478. setData( model, '<paragraph>foo []</paragraph>' );
  479. model.change( writer => {
  480. writer.insertText( '#', doc.selection.getFirstPosition() );
  481. } );
  482. model.change( writer => {
  483. writer.insertText( '2', doc.selection.getFirstPosition() );
  484. } );
  485. return waitForDebounce()
  486. .then( () => {
  487. expect( panelView.isVisible ).to.be.true;
  488. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  489. expect( listView.items ).to.have.length( 1 );
  490. } );
  491. } );
  492. it( 'should hide panel if no matched items', () => {
  493. setData( model, '<paragraph>foo []</paragraph>' );
  494. model.change( writer => {
  495. writer.insertText( '#', doc.selection.getFirstPosition() );
  496. } );
  497. return waitForDebounce()
  498. .then( () => expect( panelView.isVisible ).to.be.true )
  499. .then( () => {
  500. model.change( writer => {
  501. writer.insertText( 'x', doc.selection.getFirstPosition() );
  502. } );
  503. } )
  504. .then( waitForDebounce )
  505. .then( () => {
  506. expect( panelView.isVisible ).to.be.false;
  507. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  508. expect( listView.items ).to.have.length( 0 );
  509. } );
  510. } );
  511. it( 'should hide panel when text was unmatched', () => {
  512. setData( model, '<paragraph>foo []</paragraph>' );
  513. model.change( writer => {
  514. writer.insertText( '#', doc.selection.getFirstPosition() );
  515. } );
  516. return waitForDebounce()
  517. .then( () => expect( panelView.isVisible ).to.be.true )
  518. .then( () => {
  519. model.change( writer => {
  520. const end = doc.selection.getFirstPosition();
  521. const start = end.getShiftedBy( -1 );
  522. writer.remove( writer.createRange( start, end ) );
  523. } );
  524. } )
  525. .then( waitForDebounce )
  526. .then( () => expect( panelView.isVisible ).to.be.false );
  527. } );
  528. } );
  529. } );
  530. describe( 'panel behavior', () => {
  531. it( 'should close the opened panel on esc', () => {
  532. return createClassicTestEditor( staticConfig )
  533. .then( () => {
  534. setData( model, '<paragraph>foo []</paragraph>' );
  535. model.change( writer => {
  536. writer.insertText( '@', doc.selection.getFirstPosition() );
  537. } );
  538. } )
  539. .then( waitForDebounce )
  540. .then( () => {
  541. expect( panelView.isVisible ).to.be.true;
  542. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  543. fireKeyDownEvent( {
  544. keyCode: keyCodes.esc,
  545. preventDefault: sinon.spy(),
  546. stopPropagation: sinon.spy()
  547. } );
  548. expect( panelView.isVisible ).to.be.false;
  549. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  550. } );
  551. } );
  552. it( 'should close the opened panel when click outside the panel', () => {
  553. return createClassicTestEditor( staticConfig )
  554. .then( () => {
  555. setData( model, '<paragraph>foo []</paragraph>' );
  556. model.change( writer => {
  557. writer.insertText( '@', doc.selection.getFirstPosition() );
  558. } );
  559. } )
  560. .then( waitForDebounce )
  561. .then( () => {
  562. expect( panelView.isVisible ).to.be.true;
  563. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  564. document.body.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) );
  565. expect( panelView.isVisible ).to.be.false;
  566. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  567. } );
  568. } );
  569. it( 'should hide the panel on selection change', () => {
  570. return createClassicTestEditor( staticConfig )
  571. .then( () => {
  572. setData( model, '<paragraph>foo []</paragraph>' );
  573. model.change( writer => {
  574. writer.insertText( '@', doc.selection.getFirstPosition() );
  575. } );
  576. } )
  577. .then( waitForDebounce )
  578. .then( () => {
  579. expect( panelView.isVisible ).to.be.true;
  580. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  581. model.change( writer => {
  582. // Place position at the beginning of a paragraph.
  583. writer.setSelection( doc.getRoot().getChild( 0 ), 0 );
  584. } );
  585. expect( panelView.isVisible ).to.be.false;
  586. expect( panelView.position ).to.be.undefined;
  587. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  588. } );
  589. } );
  590. it( 'should hide the panel on selection change triggered by mouse click', () => {
  591. return createClassicTestEditor( staticConfig )
  592. .then( () => {
  593. setData( model, '<paragraph>foo []</paragraph>' );
  594. model.change( writer => {
  595. writer.insertText( '@', doc.selection.getFirstPosition() );
  596. } );
  597. } )
  598. .then( waitForDebounce )
  599. .then( () => {
  600. expect( panelView.isVisible ).to.be.true;
  601. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  602. // This happens when user clicks outside the panel view and selection is changed.
  603. // Two panel closing mechanisms are run:
  604. // - clickOutsideHandler
  605. // - unmatched text in text watcher
  606. // which may fail when trying to remove mention marker twice.
  607. document.body.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) );
  608. model.change( writer => {
  609. // Place position at the beginning of a paragraph.
  610. writer.setSelection( doc.getRoot().getChild( 0 ), 0 );
  611. } );
  612. expect( panelView.isVisible ).to.be.false;
  613. expect( panelView.position ).to.be.undefined;
  614. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  615. } );
  616. } );
  617. describe( 'default list item', () => {
  618. // Create map of expected feed items as objects as they will be stored internally.
  619. const feedItems = staticConfig.feeds[ 0 ].feed.map( text => ( { text: `@${ text }`, id: `@${ text }` } ) );
  620. beforeEach( () => {
  621. return createClassicTestEditor( staticConfig );
  622. } );
  623. describe( 'on arrows', () => {
  624. it( 'should cycle down on arrow down', () => {
  625. setData( model, '<paragraph>foo []</paragraph>' );
  626. model.change( writer => {
  627. writer.insertText( '@', doc.selection.getFirstPosition() );
  628. } );
  629. return waitForDebounce()
  630. .then( () => {
  631. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  632. const keyEvtData = {
  633. keyCode: keyCodes.arrowdown,
  634. preventDefault: sinon.spy(),
  635. stopPropagation: sinon.spy()
  636. };
  637. fireKeyDownEvent( keyEvtData );
  638. expectChildViewsIsOnState( [ false, true, false, false, false ] );
  639. fireKeyDownEvent( keyEvtData );
  640. expectChildViewsIsOnState( [ false, false, true, false, false ] );
  641. fireKeyDownEvent( keyEvtData );
  642. expectChildViewsIsOnState( [ false, false, false, true, false ] );
  643. fireKeyDownEvent( keyEvtData );
  644. expectChildViewsIsOnState( [ false, false, false, false, true ] );
  645. fireKeyDownEvent( keyEvtData );
  646. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  647. } );
  648. } );
  649. it( 'should cycle up on arrow up', () => {
  650. setData( model, '<paragraph>foo []</paragraph>' );
  651. model.change( writer => {
  652. writer.insertText( '@', doc.selection.getFirstPosition() );
  653. } );
  654. return waitForDebounce()
  655. .then( () => {
  656. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  657. const keyEvtData = {
  658. keyCode: keyCodes.arrowup,
  659. preventDefault: sinon.spy(),
  660. stopPropagation: sinon.spy()
  661. };
  662. fireKeyDownEvent( keyEvtData );
  663. expectChildViewsIsOnState( [ false, false, false, false, true ] );
  664. fireKeyDownEvent( keyEvtData );
  665. expectChildViewsIsOnState( [ false, false, false, true, false ] );
  666. fireKeyDownEvent( keyEvtData );
  667. expectChildViewsIsOnState( [ false, false, true, false, false ] );
  668. fireKeyDownEvent( keyEvtData );
  669. expectChildViewsIsOnState( [ false, true, false, false, false ] );
  670. fireKeyDownEvent( keyEvtData );
  671. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  672. } );
  673. } );
  674. } );
  675. describe( 'on "execute" keys', () => {
  676. testExecuteKey( 'enter', keyCodes.enter, feedItems );
  677. testExecuteKey( 'tab', keyCodes.tab, feedItems );
  678. testExecuteKey( 'space', keyCodes.space, feedItems );
  679. } );
  680. } );
  681. describe( 'default list item with custom feed', () => {
  682. const issues = [
  683. { id: '@Ted' },
  684. { id: '@Barney' },
  685. { id: '@Robin' },
  686. { id: '@Lily' },
  687. { id: '@Marshal' }
  688. ];
  689. beforeEach( () => {
  690. return createClassicTestEditor( {
  691. feeds: [
  692. {
  693. marker: '@',
  694. feed: feedText => issues.filter( issue => issue.id.includes( feedText ) )
  695. }
  696. ]
  697. } );
  698. } );
  699. it( 'should show panel for matched marker', () => {
  700. setData( model, '<paragraph>foo []</paragraph>' );
  701. model.change( writer => {
  702. writer.insertText( '@', doc.selection.getFirstPosition() );
  703. } );
  704. return waitForDebounce()
  705. .then( () => {
  706. expect( panelView.isVisible ).to.be.true;
  707. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  708. expect( listView.items ).to.have.length( 5 );
  709. } );
  710. } );
  711. } );
  712. describe( 'custom list item (string)', () => {
  713. const issues = [
  714. { id: '1002', title: 'Some bug in editor.' },
  715. { id: '1003', title: 'Introduce this feature.' },
  716. { id: '1004', title: 'Missing docs.' },
  717. { id: '1005', title: 'Another bug.' },
  718. { id: '1006', title: 'More bugs' }
  719. ];
  720. beforeEach( () => {
  721. return createClassicTestEditor( {
  722. feeds: [
  723. {
  724. marker: '@',
  725. feed: issues,
  726. itemRenderer: item => item.title
  727. }
  728. ]
  729. } );
  730. } );
  731. it( 'should show panel for matched marker', () => {
  732. setData( model, '<paragraph>foo []</paragraph>' );
  733. model.change( writer => {
  734. writer.insertText( '@', doc.selection.getFirstPosition() );
  735. } );
  736. return waitForDebounce()
  737. .then( () => {
  738. expect( panelView.isVisible ).to.be.true;
  739. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  740. expect( listView.items ).to.have.length( 5 );
  741. } );
  742. } );
  743. describe( 'keys', () => {
  744. describe( 'on arrows', () => {
  745. it( 'should cycle down on arrow down', () => {
  746. setData( model, '<paragraph>foo []</paragraph>' );
  747. model.change( writer => {
  748. writer.insertText( '@', doc.selection.getFirstPosition() );
  749. } );
  750. return waitForDebounce()
  751. .then( () => {
  752. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  753. const keyEvtData = {
  754. keyCode: keyCodes.arrowdown,
  755. preventDefault: sinon.spy(),
  756. stopPropagation: sinon.spy()
  757. };
  758. fireKeyDownEvent( keyEvtData );
  759. expectChildViewsIsOnState( [ false, true, false, false, false ] );
  760. fireKeyDownEvent( keyEvtData );
  761. expectChildViewsIsOnState( [ false, false, true, false, false ] );
  762. fireKeyDownEvent( keyEvtData );
  763. expectChildViewsIsOnState( [ false, false, false, true, false ] );
  764. fireKeyDownEvent( keyEvtData );
  765. expectChildViewsIsOnState( [ false, false, false, false, true ] );
  766. fireKeyDownEvent( keyEvtData );
  767. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  768. } );
  769. } );
  770. it( 'should cycle up on arrow up', () => {
  771. setData( model, '<paragraph>foo []</paragraph>' );
  772. model.change( writer => {
  773. writer.insertText( '@', doc.selection.getFirstPosition() );
  774. } );
  775. return waitForDebounce()
  776. .then( () => {
  777. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  778. const keyEvtData = {
  779. keyCode: keyCodes.arrowup,
  780. preventDefault: sinon.spy(),
  781. stopPropagation: sinon.spy()
  782. };
  783. fireKeyDownEvent( keyEvtData );
  784. expectChildViewsIsOnState( [ false, false, false, false, true ] );
  785. fireKeyDownEvent( keyEvtData );
  786. expectChildViewsIsOnState( [ false, false, false, true, false ] );
  787. fireKeyDownEvent( keyEvtData );
  788. expectChildViewsIsOnState( [ false, false, true, false, false ] );
  789. fireKeyDownEvent( keyEvtData );
  790. expectChildViewsIsOnState( [ false, true, false, false, false ] );
  791. fireKeyDownEvent( keyEvtData );
  792. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  793. } );
  794. } );
  795. } );
  796. describe( 'on "execute" keys', () => {
  797. testExecuteKey( 'enter', keyCodes.enter, issues );
  798. testExecuteKey( 'tab', keyCodes.tab, issues );
  799. testExecuteKey( 'space', keyCodes.space, issues );
  800. } );
  801. } );
  802. } );
  803. describe( 'custom list item (DOM Element)', () => {
  804. const issues = [
  805. { id: '1002', title: 'Some bug in editor.' },
  806. { id: '1003', title: 'Introduce this feature.' },
  807. { id: '1004', title: 'Missing docs.' },
  808. { id: '1005', title: 'Another bug.' },
  809. { id: '1006', title: 'More bugs' }
  810. ];
  811. beforeEach( () => {
  812. return createClassicTestEditor( {
  813. feeds: [
  814. {
  815. marker: '@',
  816. feed: feedText => {
  817. return Promise.resolve( issues.filter( issue => issue.id.includes( feedText ) ) );
  818. },
  819. itemRenderer: item => {
  820. const span = global.document.createElementNS( 'http://www.w3.org/1999/xhtml', 'span' );
  821. span.innerHTML = `<span id="issue-${ item.id }">@${ item.title }</span>`;
  822. return span;
  823. }
  824. }
  825. ]
  826. } );
  827. } );
  828. it( 'should show panel for matched marker', () => {
  829. setData( model, '<paragraph>foo []</paragraph>' );
  830. model.change( writer => {
  831. writer.insertText( '@', doc.selection.getFirstPosition() );
  832. } );
  833. return waitForDebounce()
  834. .then( () => {
  835. expect( panelView.isVisible ).to.be.true;
  836. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  837. expect( listView.items ).to.have.length( 5 );
  838. } );
  839. } );
  840. describe( 'keys', () => {
  841. describe( 'on arrows', () => {
  842. it( 'should cycle down on arrow down', () => {
  843. setData( model, '<paragraph>foo []</paragraph>' );
  844. model.change( writer => {
  845. writer.insertText( '@', doc.selection.getFirstPosition() );
  846. } );
  847. return waitForDebounce()
  848. .then( () => {
  849. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  850. const keyEvtData = {
  851. keyCode: keyCodes.arrowdown,
  852. preventDefault: sinon.spy(),
  853. stopPropagation: sinon.spy()
  854. };
  855. fireKeyDownEvent( keyEvtData );
  856. expectChildViewsIsOnState( [ false, true, false, false, false ] );
  857. fireKeyDownEvent( keyEvtData );
  858. expectChildViewsIsOnState( [ false, false, true, false, false ] );
  859. fireKeyDownEvent( keyEvtData );
  860. expectChildViewsIsOnState( [ false, false, false, true, false ] );
  861. fireKeyDownEvent( keyEvtData );
  862. expectChildViewsIsOnState( [ false, false, false, false, true ] );
  863. fireKeyDownEvent( keyEvtData );
  864. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  865. } );
  866. } );
  867. it( 'should cycle up on arrow up', () => {
  868. setData( model, '<paragraph>foo []</paragraph>' );
  869. model.change( writer => {
  870. writer.insertText( '@', doc.selection.getFirstPosition() );
  871. } );
  872. return waitForDebounce()
  873. .then( () => {
  874. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  875. const keyEvtData = {
  876. keyCode: keyCodes.arrowup,
  877. preventDefault: sinon.spy(),
  878. stopPropagation: sinon.spy()
  879. };
  880. fireKeyDownEvent( keyEvtData );
  881. expectChildViewsIsOnState( [ false, false, false, false, true ] );
  882. fireKeyDownEvent( keyEvtData );
  883. expectChildViewsIsOnState( [ false, false, false, true, false ] );
  884. fireKeyDownEvent( keyEvtData );
  885. expectChildViewsIsOnState( [ false, false, true, false, false ] );
  886. fireKeyDownEvent( keyEvtData );
  887. expectChildViewsIsOnState( [ false, true, false, false, false ] );
  888. fireKeyDownEvent( keyEvtData );
  889. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  890. } );
  891. } );
  892. } );
  893. describe( 'on "execute" keys', () => {
  894. testExecuteKey( 'enter', keyCodes.enter, issues );
  895. testExecuteKey( 'tab', keyCodes.tab, issues );
  896. testExecuteKey( 'space', keyCodes.space, issues );
  897. } );
  898. describe( 'mouse', () => {
  899. it( 'should execute selected button on mouse click', () => {
  900. setData( model, '<paragraph>foo []</paragraph>' );
  901. model.change( writer => {
  902. writer.insertText( '@', doc.selection.getFirstPosition() );
  903. } );
  904. const command = editor.commands.get( 'mention' );
  905. const spy = testUtils.sinon.spy( command, 'execute' );
  906. return waitForDebounce()
  907. .then( () => {
  908. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  909. const element = panelView.element.querySelector( '#issue-1004' );
  910. element.dispatchEvent( new Event( 'click', { bubbles: true } ) );
  911. sinon.assert.calledOnce( spy );
  912. const commandOptions = spy.getCall( 0 ).args[ 0 ];
  913. const item = issues[ 2 ];
  914. expect( commandOptions ).to.have.property( 'mention' ).that.deep.equal( item );
  915. expect( commandOptions ).to.have.property( 'marker', '@' );
  916. expect( commandOptions ).to.have.property( 'range' );
  917. const start = model.createPositionAt( doc.getRoot().getChild( 0 ), 4 );
  918. const expectedRange = model.createRange( start, start.getShiftedBy( 1 ) );
  919. expect( commandOptions.range.isEqual( expectedRange ) ).to.be.true;
  920. } );
  921. } );
  922. } );
  923. } );
  924. } );
  925. function testExecuteKey( name, keyCode, feedItems ) {
  926. it( 'should execute selected button on ' + name, () => {
  927. setData( model, '<paragraph>foo []</paragraph>' );
  928. model.change( writer => {
  929. writer.insertText( '@', doc.selection.getFirstPosition() );
  930. } );
  931. const command = editor.commands.get( 'mention' );
  932. const spy = testUtils.sinon.spy( command, 'execute' );
  933. return waitForDebounce()
  934. .then( () => {
  935. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  936. fireKeyDownEvent( {
  937. keyCode: keyCodes.arrowup,
  938. preventDefault: sinon.spy(),
  939. stopPropagation: sinon.spy()
  940. } );
  941. expectChildViewsIsOnState( [ false, false, false, false, true ] );
  942. fireKeyDownEvent( {
  943. keyCode,
  944. preventDefault: sinon.spy(),
  945. stopPropagation: sinon.spy()
  946. } );
  947. sinon.assert.calledOnce( spy );
  948. assertCommandOptions( spy.getCall( 0 ).args[ 0 ], '@', feedItems[ 4 ] );
  949. const start = model.createPositionAt( doc.getRoot().getChild( 0 ), 4 );
  950. const expectedRange = model.createRange( start, start.getShiftedBy( 1 ) );
  951. expect( spy.getCall( 0 ).args[ 0 ].range.isEqual( expectedRange ) ).to.be.true;
  952. } );
  953. } );
  954. it( 'should do nothing if panel is not visible on ' + name, () => {
  955. setData( model, '<paragraph>foo []</paragraph>' );
  956. model.change( writer => {
  957. writer.insertText( '@', doc.selection.getFirstPosition() );
  958. } );
  959. const command = editor.commands.get( 'mention' );
  960. const spy = testUtils.sinon.spy( command, 'execute' );
  961. return waitForDebounce()
  962. .then( () => {
  963. expect( panelView.isVisible ).to.be.true;
  964. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  965. fireKeyDownEvent( {
  966. keyCode: keyCodes.esc,
  967. preventDefault: sinon.spy(),
  968. stopPropagation: sinon.spy()
  969. } );
  970. expect( panelView.isVisible ).to.be.false;
  971. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  972. fireKeyDownEvent( {
  973. keyCode,
  974. preventDefault: sinon.spy(),
  975. stopPropagation: sinon.spy()
  976. } );
  977. sinon.assert.notCalled( spy );
  978. expect( panelView.isVisible ).to.be.false;
  979. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  980. } );
  981. } );
  982. }
  983. } );
  984. describe( 'execute', () => {
  985. beforeEach( () => createClassicTestEditor( staticConfig ) );
  986. it( 'should call the mention command with proper options', () => {
  987. setData( model, '<paragraph>foo []</paragraph>' );
  988. model.change( writer => {
  989. writer.insertText( '@', doc.selection.getFirstPosition() );
  990. } );
  991. const command = editor.commands.get( 'mention' );
  992. const spy = testUtils.sinon.spy( command, 'execute' );
  993. return waitForDebounce()
  994. .then( () => {
  995. listView.items.get( 0 ).children.get( 0 ).fire( 'execute' );
  996. sinon.assert.calledOnce( spy );
  997. const commandOptions = spy.getCall( 0 ).args[ 0 ];
  998. assertCommandOptions( commandOptions, '@', { id: '@Barney', text: '@Barney' } );
  999. const start = model.createPositionAt( doc.getRoot().getChild( 0 ), 4 );
  1000. const expectedRange = model.createRange( start, start.getShiftedBy( 1 ) );
  1001. expect( commandOptions.range.isEqual( expectedRange ) ).to.be.true;
  1002. } );
  1003. } );
  1004. it( 'should hide panel on execute', () => {
  1005. setData( model, '<paragraph>foo []</paragraph>' );
  1006. model.change( writer => {
  1007. writer.insertText( '@', doc.selection.getFirstPosition() );
  1008. } );
  1009. return waitForDebounce()
  1010. .then( () => {
  1011. listView.items.get( 0 ).children.get( 0 ).fire( 'execute' );
  1012. expect( panelView.isVisible ).to.be.false;
  1013. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  1014. } );
  1015. } );
  1016. it( 'should focus view after command execution', () => {
  1017. const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
  1018. setData( model, '<paragraph>foo []</paragraph>' );
  1019. model.change( writer => {
  1020. writer.insertText( '@', doc.selection.getFirstPosition() );
  1021. } );
  1022. return waitForDebounce()
  1023. .then( () => {
  1024. listView.items.get( 0 ).children.get( 0 ).fire( 'execute' );
  1025. sinon.assert.calledOnce( focusSpy );
  1026. } );
  1027. } );
  1028. } );
  1029. function createClassicTestEditor( mentionConfig ) {
  1030. return ClassicTestEditor
  1031. .create( editorElement, {
  1032. plugins: [ Paragraph, MentionEditing, MentionUI ],
  1033. mention: mentionConfig
  1034. } )
  1035. .then( newEditor => {
  1036. editor = newEditor;
  1037. model = editor.model;
  1038. doc = model.document;
  1039. editingView = editor.editing.view;
  1040. mentionUI = editor.plugins.get( MentionUI );
  1041. panelView = mentionUI.panelView;
  1042. mentionsView = mentionUI._mentionsView;
  1043. listView = mentionsView.listView;
  1044. editingView.attachDomRoot( editorElement );
  1045. // Focus the engine.
  1046. editingView.document.isFocused = true;
  1047. editingView.getDomRoot().focus();
  1048. // Remove all selection ranges from DOM before testing.
  1049. window.getSelection().removeAllRanges();
  1050. } );
  1051. }
  1052. function waitForDebounce() {
  1053. return new Promise( resolve => {
  1054. setTimeout( () => {
  1055. resolve();
  1056. }, 50 );
  1057. } );
  1058. }
  1059. function fireKeyDownEvent( options ) {
  1060. const eventInfo = new EventInfo( editingView.document, 'keydown' );
  1061. const eventData = new DomEventData( editingView.document, {
  1062. target: document.body
  1063. }, options );
  1064. editingView.document.fire( eventInfo, eventData );
  1065. }
  1066. function stubSelectionRects( rects ) {
  1067. const originalViewRangeToDom = editingView.domConverter.viewRangeToDom;
  1068. // Mock selection rect.
  1069. sinon.stub( editingView.domConverter, 'viewRangeToDom' ).callsFake( ( ...args ) => {
  1070. const domRange = originalViewRangeToDom.apply( editingView.domConverter, args );
  1071. sinon.stub( domRange, 'getClientRects' )
  1072. .returns( rects );
  1073. return domRange;
  1074. } );
  1075. }
  1076. function expectChildViewsIsOnState( expectedState ) {
  1077. const childViews = [ ...listView.items ].map( listView => listView.children.get( 0 ) );
  1078. expect( childViews.map( child => child.isOn ) ).to.deep.equal( expectedState );
  1079. }
  1080. function assertCommandOptions( commandOptions, marker, item ) {
  1081. expect( commandOptions ).to.have.property( 'marker', marker );
  1082. expect( commandOptions ).to.have.property( 'range' );
  1083. expect( commandOptions ).to.have.property( 'mention' );
  1084. const mentionForCommand = commandOptions.mention;
  1085. for ( const key of Object.keys( item ) ) {
  1086. expect( mentionForCommand[ key ] ).to.equal( item[ key ] );
  1087. }
  1088. }
  1089. } );