Browse Source

Added docs and tests to ImageStyle plugin.

Szymon Kupś 9 years ago
parent
commit
8cff7f6479

+ 14 - 5
packages/ckeditor5-image/src/imagestyle/imagestyle.js

@@ -11,6 +11,13 @@ import Plugin from '../../core/plugin.js';
 import ImageStyleEngine from './imagestyleengine.js';
 import ButtonView from '../../ui/button/buttonview.js';
 
+/**
+ * The image style plugin.
+ *
+ * Uses {@link module:image/imagestyle/imagestyleengine~ImageStyleEngine}.
+ *
+ * @extends module:core/plugin~Plugin
+ */
 export default class ImageStyle extends Plugin {
 	/**
 	 * @inheritDoc
@@ -23,16 +30,19 @@ export default class ImageStyle extends Plugin {
 	 * @inheritDoc
 	 */
 	init() {
-		const editor = this.editor;
-
-		// Get configuration.
-		const styles = editor.config.get( 'image.styles' );
+		const styles = this.editor.config.get( 'image.styles' );
 
 		for ( let style of styles ) {
 			this._createButton( style );
 		}
 	}
 
+	/**
+	 * Creates button for each style and stores it in editor's {@link module:ui/componentfactory~ComponentFactory ComponentFactory}.
+	 *
+	 * @private
+	 * @param {module:image/imagestyle/imagestyleengine~ImageStyleFormat} style
+	 */
 	_createButton( style ) {
 		const editor = this.editor;
 		const command = editor.commands.get( 'imagestyle' );
@@ -52,7 +62,6 @@ export default class ImageStyle extends Plugin {
 				return commandValue == style.value;
 			} );
 
-			// // Execute command.
 			this.listenTo( view, 'execute', () => editor.execute( 'imagestyle', { value: style.value } ) );
 
 			return view;

+ 0 - 1
packages/ckeditor5-image/src/imagestyle/imagestylecommand.js

@@ -116,4 +116,3 @@ export default class ImageStyleCommand extends Command {
 		} );
 	}
 }
-

+ 70 - 0
packages/ckeditor5-image/tests/imagestyle/imagestyle.js

@@ -0,0 +1,70 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global document */
+
+import ClassicTestEditor from 'tests/core/_utils/classictesteditor.js';
+import ImageStyle from 'ckeditor5/image/imagestyle/imagestyle.js';
+import ImageStyleEngine from 'ckeditor5/image/imagestyle/imagestyleengine.js';
+import ButtonView from 'ckeditor5/ui/button/buttonview.js';
+
+describe( 'ImageStyle', () => {
+	let editor;
+	const styles =  [
+		{ name: 'style 1', title: 'Style 1 title', icon: 'style1-icon', value: null },
+		{ name: 'style 2', title: 'Style 2 title', icon: 'style2-icon', value: 'style2', cssClass: 'style2-class' },
+		{ name: 'style 3', title: 'Style 3 title', icon: 'style3-icon', value: 'style3', cssClass: 'style3-class' }
+	];
+
+	beforeEach( () => {
+		const editorElement = document.createElement( 'div' );
+		document.body.appendChild( editorElement );
+
+		return ClassicTestEditor.create( editorElement, {
+			plugins: [ ImageStyle ],
+			image: {
+				styles
+			}
+		} )
+		.then( newEditor => {
+			editor = newEditor;
+		} );
+	} );
+
+	afterEach( () => {
+		return editor.destroy();
+	} );
+
+	it( 'should be loaded', () => {
+		expect( editor.plugins.get( ImageStyle ) ).to.be.instanceOf( ImageStyle );
+	} );
+
+	it( 'should load ImageStyleEngine plugin', () => {
+		expect( editor.plugins.get( ImageStyleEngine ) ).to.be.instanceOf( ImageStyleEngine );
+	} );
+
+	it( 'should register buttons for each style', () => {
+		const command = editor.commands.get( 'imagestyle' );
+		const spy = sinon.spy( editor, 'execute' );
+
+		for ( let style of styles ) {
+			const buttonView =  editor.ui.componentFactory.create( style.name );
+
+			expect( buttonView ).to.be.instanceOf( ButtonView );
+			expect( buttonView.label ).to.equal( style.title );
+			expect( buttonView.icon ).to.equal( style.icon );
+
+			command.isEnabled = true;
+			expect( buttonView.isEnabled ).to.be.true;
+			command.isEnabled = false;
+			expect( buttonView.isEnabled ).to.be.false;
+
+			buttonView.fire( 'execute' );
+			sinon.assert.calledWithExactly( editor.execute, 'imagestyle', { value: style.value } );
+
+			spy.reset();
+		}
+	} );
+} );