瀏覽代碼

Add tests for asynchronous feed.

Maciej Gołaszewski 6 年之前
父節點
當前提交
c1bce991d5
共有 2 個文件被更改,包括 96 次插入6 次删除
  1. 2 5
      packages/ckeditor5-mention/src/mentionui.js
  2. 94 1
      packages/ckeditor5-mention/tests/mentionui.js

+ 2 - 5
packages/ckeditor5-mention/src/mentionui.js

@@ -156,6 +156,7 @@ export default class MentionUI extends Plugin {
 						this._items.add( { item, marker } );
 					}
 
+					// todo: Debounce...
 					if ( this._items.length ) {
 						this._showPanel();
 					} else {
@@ -174,16 +175,12 @@ export default class MentionUI extends Plugin {
 	}
 
 	_showPanel() {
-		if ( this.panelView.isVisible ) {
-			return;
-		}
-
 		this.panelView.pin( this._getBalloonPositionData() );
-
 		this.panelView.show();
 	}
 
 	_hidePanel() {
+		this.panelView.unpin();
 		this.panelView.hide();
 	}
 

+ 94 - 1
packages/ckeditor5-mention/tests/mentionui.js

@@ -155,6 +155,99 @@ describe( 'BalloonToolbar', () => {
 					.then( () => expect( mentionUI.panelView.isVisible ).to.be.false );
 			} );
 		} );
+
+		describe( 'asynchronous list with custom trigger', () => {
+			beforeEach( () => {
+				const issuesNumbers = [ '100', '101', '102', '103' ];
+
+				return createClassicTestEditor( [
+					{
+						marker: '#',
+						feed: feedText => {
+							return new Promise( resolve => {
+								setTimeout( () => {
+									resolve( issuesNumbers.filter( number => number.includes( feedText ) ) );
+								}, 20 );
+							} );
+						}
+					}
+				] );
+			} );
+
+			it( 'should show panel for matched marker', () => {
+				setData( model, '<paragraph>foo []</paragraph>' );
+
+				model.change( writer => {
+					writer.insertText( '#', doc.selection.getFirstPosition() );
+				} );
+
+				return waitForDebounce()
+					.then( () => {
+						expect( mentionUI.panelView.isVisible ).to.be.true;
+						expect( mentionUI._mentionsView.listView.items ).to.have.length( 4 );
+					} );
+			} );
+
+			it( 'should show filtered results for matched text', () => {
+				setData( model, '<paragraph>foo []</paragraph>' );
+
+				model.change( writer => {
+					writer.insertText( '#', doc.selection.getFirstPosition() );
+				} );
+
+				model.change( writer => {
+					writer.insertText( '2', doc.selection.getFirstPosition() );
+				} );
+
+				return waitForDebounce()
+					.then( () => {
+						expect( mentionUI.panelView.isVisible ).to.be.true;
+						expect( mentionUI._mentionsView.listView.items ).to.have.length( 1 );
+					} );
+			} );
+
+			it( 'should hide panel if no matched items', () => {
+				setData( model, '<paragraph>foo []</paragraph>' );
+
+				model.change( writer => {
+					writer.insertText( '#', doc.selection.getFirstPosition() );
+				} );
+
+				return waitForDebounce()
+					.then( () => expect( mentionUI.panelView.isVisible ).to.be.true )
+					.then( () => {
+						model.change( writer => {
+							writer.insertText( 'x', doc.selection.getFirstPosition() );
+						} );
+					} )
+					.then( waitForDebounce )
+					.then( () => {
+						expect( mentionUI.panelView.isVisible ).to.be.false;
+						expect( mentionUI._mentionsView.listView.items ).to.have.length( 0 );
+					} );
+			} );
+
+			it( 'should hide panel when text was unmatched', () => {
+				setData( model, '<paragraph>foo []</paragraph>' );
+
+				model.change( writer => {
+					writer.insertText( '#', doc.selection.getFirstPosition() );
+				} );
+
+				return waitForDebounce()
+					.then( () => expect( mentionUI.panelView.isVisible ).to.be.true )
+					.then( () => {
+						model.change( writer => {
+							const end = doc.selection.getFirstPosition();
+							const start = end.getShiftedBy( -1 );
+
+							writer.remove( writer.createRange( start, end ) );
+						} );
+					} )
+					.then( waitForDebounce )
+					.then( () => expect( mentionUI.panelView.isVisible ).to.be.false );
+			} );
+		} );
 	} );
 
 	describe( 'execute', () => {
@@ -233,7 +326,7 @@ describe( 'BalloonToolbar', () => {
 		return new Promise( resolve => {
 			setTimeout( () => {
 				resolve();
-			} );
+			}, 50 );
 		} );
 	}
 } );