8
0
panr 5 лет назад
Родитель
Сommit
ba2935832d
1 измененных файлов с 91 добавлено и 11 удалено
  1. 91 11
      packages/ckeditor5-image/tests/imageresize/imageresizeui.js

+ 91 - 11
packages/ckeditor5-image/tests/imageresize/imageresizeui.js

@@ -17,24 +17,38 @@ import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import Table from '@ckeditor/ckeditor5-table/src/table';
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import { expectToThrowCKEditorError } from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
+
+import iconSmall from '../../theme/icons/image-resize-small.svg';
+import iconMedium from '../../theme/icons/image-resize-medium.svg';
+import iconLarge from '../../theme/icons/image-resize-large.svg';
+import iconFull from '../../theme/icons/image-resize-full.svg';
 
 describe( 'ImageResizeUI', () => {
 	let plugin, command, editor, editorElement;
 
 	const resizeOptions = [ {
 		name: 'imageResize:original',
-		label: 'Original size',
-		value: null
+		value: null,
+		icon: 'original'
+	},
+	{
+		name: 'imageResize:25',
+		label: '25%',
+		value: '25',
+		icon: 'small'
 	},
 	{
 		name: 'imageResize:50',
 		label: '50%',
-		value: '50'
+		value: '50',
+		icon: 'medium'
 	},
 	{
 		name: 'imageResize:75',
 		label: '75%',
-		value: '75'
+		value: '75',
+		icon: 'large'
 	} ];
 
 	testUtils.createSinonSandbox();
@@ -82,6 +96,12 @@ describe( 'ImageResizeUI', () => {
 		} );
 	} );
 
+	it( 'should create `_resizeUnit`', () => {
+		const unit = plugin._resizeUnit;
+
+		expect( unit ).to.equal( '%' );
+	} );
+
 	describe( 'init()', () => {
 		it( 'should have set "%" resize unit', () => {
 			const unit = editor.config.get( 'image.resizeUnit' );
@@ -167,12 +187,12 @@ describe( 'ImageResizeUI', () => {
 			expect( editor.ui.componentFactory.create( 'imageResize' ) ).to.be.instanceof( DropdownView );
 		} );
 
-		it( 'should have 3 resize options in the `imageResize` dropdown', () => {
+		it( 'should have 4 resize options in the `imageResize` dropdown', () => {
 			const dropdownView = editor.ui.componentFactory.create( 'imageResize' );
 
-			expect( dropdownView.listView.items.length ).to.equal( 3 );
-			expect( dropdownView.listView.items.first.element.textContent ).to.equal( 'Original size' );
-			expect( dropdownView.listView.items._items[ 1 ].element.textContent ).to.equal( '50%' );
+			expect( dropdownView.listView.items.length ).to.equal( 4 );
+			expect( dropdownView.listView.items.first.element.textContent ).to.equal( 'Original' );
+			expect( dropdownView.listView.items._items[ 1 ].element.textContent ).to.equal( '25%' );
 			expect( dropdownView.listView.items.last.element.textContent ).to.equal( '75%' );
 		} );
 
@@ -192,7 +212,7 @@ describe( 'ImageResizeUI', () => {
 			resizeBy50Percent.fire( 'execute' );
 
 			sinon.assert.calledOnce( commandSpy );
-			expect( command.value.width ).to.equal( '50%' );
+			expect( command.value.width ).to.equal( '25%' );
 		} );
 	} );
 
@@ -213,13 +233,37 @@ describe( 'ImageResizeUI', () => {
 			expect( editor.ui.componentFactory.create( 'imageResize:50' ) ).to.be.instanceof( ButtonView );
 		} );
 
-		it( 'should be created with visible "50%" label', () => {
+		it( 'should be created with invisible "50%" label when is provided', () => {
+			const buttonView = editor.ui.componentFactory.create( 'imageResize:50' );
+			buttonView.render();
+
+			expect( buttonView.withText ).to.be.false;
+			expect( buttonView.label ).to.equal( '50%' );
+			expect( buttonView.labelView ).to.be.instanceOf( View );
+		} );
+
+		it( 'should be created with invisible "50%" label when is not provided', async () => {
+			const editor = await ClassicTestEditor
+				.create( editorElement, {
+					plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResizeUI ],
+					image: {
+						resizeUnit: '%',
+						resizeOptions: [ {
+							name: 'imageResize:50',
+							value: '50',
+							icon: 'medium'
+						} ]
+					}
+				} );
+
 			const buttonView = editor.ui.componentFactory.create( 'imageResize:50' );
 			buttonView.render();
 
-			expect( buttonView.withText ).to.be.true;
+			expect( buttonView.withText ).to.be.false;
 			expect( buttonView.label ).to.equal( '50%' );
 			expect( buttonView.labelView ).to.be.instanceOf( View );
+
+			editor.destroy();
 		} );
 
 		it( 'should be created with a proper tooltip, depends on the set value', () => {
@@ -251,5 +295,41 @@ describe( 'ImageResizeUI', () => {
 			sinon.assert.calledOnce( commandSpy );
 			expect( command.value.width ).to.equal( '50%' );
 		} );
+
+		it( 'should have set a proper icon', () => {
+			const buttonOriginal = editor.ui.componentFactory.create( 'imageResize:original' );
+			const button25 = editor.ui.componentFactory.create( 'imageResize:25' );
+			const button50 = editor.ui.componentFactory.create( 'imageResize:50' );
+			const button75 = editor.ui.componentFactory.create( 'imageResize:75' );
+
+			expect( buttonOriginal.icon ).to.deep.equal( iconFull );
+			expect( button25.icon ).to.deep.equal( iconSmall );
+			expect( button50.icon ).to.deep.equal( iconMedium );
+			expect( button75.icon ).to.deep.equal( iconLarge );
+		} );
+
+		it( 'should throw the CKEditorError if no `icon` is provided', async () => {
+			const editor = await ClassicTestEditor
+				.create( editorElement, {
+					plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResizeUI ],
+					image: {
+						resizeUnit: '%',
+						resizeOptions: [ {
+							name: 'imageResize:noicon',
+							value: '100'
+						} ],
+						toolbar: [ 'imageResize:noicon' ]
+					}
+				} );
+
+			const errMsg = 'The resize option "imageResize:noicon" misses an `icon` property ' +
+				'or its value doesn\'t match the available options.';
+
+			expectToThrowCKEditorError( () => {
+				editor.ui.componentFactory.create( 'imageResize:noicon' );
+			}, errMsg );
+
+			editor.destroy();
+		} );
 	} );
 } );