Procházet zdrojové kódy

Aligned code to changes in the WidgetToolbar. Fixed tests.

Maciej Bukowski před 7 roky
rodič
revize
8473800f84

+ 3 - 6
packages/ckeditor5-table/src/tabletoolbar.js

@@ -8,10 +8,7 @@
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
-import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon';
-import { isTableWidgetSelected, isTableContentSelected } from './utils';
-import { repositionContextualBalloon, getBalloonPositionData } from './ui/utils';
+import { isTableContentSelected } from './utils';
 import WidgetToolbar from '@ckeditor/ckeditor5-widget/src/widgettoolbar';
 
 /**
@@ -47,9 +44,9 @@ export default class TableToolbar extends Plugin {
 		const editor = this.editor;
 		const widgetToolbar = editor.plugins.get( 'WidgetToolbar' );
 
-		widgetToolbar.add( {
+		widgetToolbar.add( 'table', {
 			toolbarItems: editor.config.get( 'table.toolbar' ) || [],
-			isSelected: isTableContentSelected,
+			isVisible: isTableContentSelected,
 		} );
 	}
 }

+ 2 - 2
packages/ckeditor5-table/src/tablewidgettoolbar.js

@@ -35,9 +35,9 @@ export default class TableWidgetToolbar extends Plugin {
 		const editor = this.editor;
 		const widgetToolbar = editor.plugins.get( 'WidgetToolbar' );
 
-		widgetToolbar.add( {
+		widgetToolbar.add( 'tableWidget', {
 			toolbarItems: editor.config.get( 'table.widgetToolbar' ) || [],
-			isSelected: isTableWidgetSelected,
+			isVisible: isTableWidgetSelected,
 		} );
 	}
 }

+ 3 - 3
packages/ckeditor5-table/tests/tabletoolbar.js

@@ -17,7 +17,7 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 describe( 'TableToolbar', () => {
-	let editor, model, doc, plugin, toolbar, balloon, editorElement;
+	let editor, model, doc, widgetToolbar, toolbar, balloon, editorElement;
 
 	beforeEach( () => {
 		editorElement = global.document.createElement( 'div' );
@@ -34,8 +34,8 @@ describe( 'TableToolbar', () => {
 				editor = newEditor;
 				model = newEditor.model;
 				doc = model.document;
-				plugin = editor.plugins.get( TableToolbar );
-				toolbar = plugin._toolbar;
+				widgetToolbar = editor.plugins.get( 'WidgetToolbar' );
+				toolbar = widgetToolbar._toolbars.get( 'table' ).view;
 				balloon = editor.plugins.get( 'ContextualBalloon' );
 			} );
 	} );

+ 39 - 17
packages/ckeditor5-table/tests/tablewidgettoolbar.js

@@ -6,16 +6,17 @@
 
 import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
 import Table from '@ckeditor/ckeditor5-table/src/table';
-import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import TableWidgetToolbar from '../src/tablewidgettoolbar';
 import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import View from '@ckeditor/ckeditor5-ui/src/view';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
 describe( 'TableWidgetToolbar', () => {
-	let editor, element, tableWidgetToolbar, balloon, toolbar, model;
+	let editor, element, widgetToolbar, balloon, toolbar, model;
 
 	testUtils.createSinonSandbox();
 
@@ -24,14 +25,14 @@ describe( 'TableWidgetToolbar', () => {
 		document.body.appendChild( element );
 
 		return ClassicTestEditor.create( element, {
-			plugins: [ Paragraph, Table, TableToolbar, TableWidgetToolbar ],
+			plugins: [ Paragraph, Table, TableWidgetToolbar, FakeButton ],
 			table: {
-				widgetToolbar: []
+				widgetToolbar: [ 'fake_button' ]
 			}
 		} ).then( _editor => {
 			editor = _editor;
-			tableWidgetToolbar = editor.plugins.get( TableWidgetToolbar );
-			toolbar = tableWidgetToolbar._toolbar;
+			widgetToolbar = editor.plugins.get( 'WidgetToolbar' );
+			toolbar = widgetToolbar._toolbars.get( 'tableWidget' ).view;
 			balloon = editor.plugins.get( 'ContextualBalloon' );
 			model = editor.model;
 		} );
@@ -46,21 +47,23 @@ describe( 'TableWidgetToolbar', () => {
 		expect( editor.plugins.get( TableWidgetToolbar ) ).to.be.instanceOf( TableWidgetToolbar );
 	} );
 
-	// it( 'should have only one item - comment', () => {
-	// 	expect( toolbar.items ).to.have.length( 1 );
-	// 	expect( toolbar.items.get( 0 ).label ).to.equal( 'Inline comment' );
-	// } );
+	describe( 'toolbar', () => {
+		it( 'should use the config.table.tableWidget to create items', () => {
+			expect( toolbar.items ).to.have.length( 1 );
+			expect( toolbar.items.get( 0 ).label ).to.equal( 'fake button' );
+		} );
 
-	it( 'should set proper CSS classes', () => {
-		const spy = sinon.spy( balloon, 'add' );
+		it( 'should set proper CSS classes', () => {
+			const spy = sinon.spy( balloon, 'add' );
 
-		editor.ui.focusTracker.isFocused = true;
+			editor.ui.focusTracker.isFocused = true;
 
-		setData( model, '[<table><tableRow><tableCell></tableCell></tableRow></table>]' );
+			setData( model, '[<table><tableRow><tableCell></tableCell></tableRow></table>]' );
 
-		sinon.assert.calledWithMatch( spy, {
-			view: toolbar,
-			balloonClassName: 'ck-toolbar-container'
+			sinon.assert.calledWithMatch( spy, {
+				view: toolbar,
+				balloonClassName: 'ck-toolbar-container'
+			} );
 		} );
 	} );
 
@@ -166,4 +169,23 @@ describe( 'TableWidgetToolbar', () => {
 			expect( balloon.visibleView ).to.be.null;
 		} );
 	} );
+
+	// Plugin that adds fake_button to editor's component factory.
+	class FakeButton extends Plugin {
+		init() {
+			try {
+				this.editor.ui.componentFactory.add( 'fake_button', locale => {
+					const view = new ButtonView( locale );
+
+					view.set( {
+						label: 'fake button'
+					} );
+
+					return view;
+				} );
+			} catch ( err ) {
+				console.log( err );
+			}
+		}
+	}
 } );