Sfoglia il codice sorgente

Bootstrap MentionUI tests.

Maciej Gołaszewski 6 anni fa
parent
commit
2d1760b442

+ 14 - 16
packages/ckeditor5-mention/src/mentionui.js

@@ -37,24 +37,22 @@ export default class MentionUI extends Plugin {
 	init() {
 		const editor = this.editor;
 
-		const locale = editor.locale;
+		this.panelView = new BalloonPanelView( editor.locale );
+		this.panelView.withArrow = false;
+		this.panelView.render();
 
-		this._panel = new BalloonPanelView( locale );
-		this._panel.withArrow = false;
-		this._panel.render();
+		this.editor.ui.view.body.add( this.panelView );
 
-		this.editor.ui.view.body.add( this._panel );
-
-		this._mentions = new MentionsView( locale );
+		const mentionView = new MentionsView( editor.locale );
 
 		const items = new Collection();
 
-		this._panel.content.add( this._mentions );
+		this.panelView.content.add( mentionView );
 
-		this._mentions.listView.items.bindTo( items ).using( item => {
+		mentionView.listView.items.bindTo( items ).using( item => {
 			const { label } = item;
-			const listItemView = new ListItemView( locale );
-			const buttonView = new ButtonView( locale );
+			const listItemView = new ListItemView( editor.locale );
+			const buttonView = new ButtonView( editor.locale );
 
 			buttonView.label = label;
 			buttonView.withText = true;
@@ -62,7 +60,7 @@ export default class MentionUI extends Plugin {
 
 			listItemView.children.add( buttonView );
 
-			buttonView.delegate( 'execute' ).to( this._mentions );
+			buttonView.delegate( 'execute' ).to( mentionView );
 
 			return listItemView;
 		} );
@@ -71,7 +69,7 @@ export default class MentionUI extends Plugin {
 
 		const watcher = new TextWatcher( editor, testCallback );
 
-		this._mentions.on( 'execute', evt => {
+		mentionView.on( 'execute', evt => {
 			const label = evt.source.label;
 
 			const text = watcher.last;
@@ -144,9 +142,9 @@ export default class MentionUI extends Plugin {
 		}
 
 		// Pin the panel to an element with the "target" id DOM.
-		this._panel.pin( this._getBalloonPositionData() );
+		this.panelView.pin( this._getBalloonPositionData() );
 
-		this._panel.show();
+		this.panelView.show();
 	}
 
 	// TODO copied from balloontoolbar
@@ -177,7 +175,7 @@ export default class MentionUI extends Plugin {
 	}
 
 	_hideForm() {
-		this._panel.hide();
+		this.panelView.hide();
 	}
 }
 

+ 65 - 0
packages/ckeditor5-mention/tests/mentionui.js

@@ -0,0 +1,65 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global window, document */
+
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+
+import MentionUI from '../src/mentionui';
+import MentionEditing from '../src/mentionediting';
+
+describe( 'BalloonToolbar', () => {
+	let editor, editingView, mentionUI, editorElement;
+
+	testUtils.createSinonSandbox();
+
+	beforeEach( () => {
+		editorElement = document.createElement( 'div' );
+		document.body.appendChild( editorElement );
+
+		return ClassicTestEditor
+			.create( editorElement, {
+				plugins: [ Paragraph, MentionEditing, MentionUI ]
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+				editingView = editor.editing.view;
+				mentionUI = editor.plugins.get( MentionUI );
+
+				editingView.attachDomRoot( editorElement );
+
+				// Focus the engine.
+				editingView.document.isFocused = true;
+				editingView.getDomRoot().focus();
+
+				// Remove all selection ranges from DOM before testing.
+				window.getSelection().removeAllRanges();
+			} );
+	} );
+
+	afterEach( () => {
+		sinon.restore();
+		editorElement.remove();
+
+		return editor.destroy();
+	} );
+
+	it( 'should create a plugin instance', () => {
+		expect( mentionUI ).to.instanceOf( Plugin );
+		expect( mentionUI ).to.instanceOf( MentionUI );
+	} );
+
+	describe( 'child views', () => {
+		describe( 'panelView', () => {
+			it( 'should be added to the ui.view.body collection', () => {
+				expect( Array.from( editor.ui.view.body ) ).to.include( mentionUI.panelView );
+			} );
+		} );
+	} );
+} );