8
0
Просмотр исходного кода

Correct spelling mistake, add unit tests for colorui.

Mateusz Samsel 6 лет назад
Родитель
Сommit
2bd822338c
2 измененных файлов с 126 добавлено и 51 удалено
  1. 1 1
      packages/ckeditor5-font/tests/ui/colortableview.js
  2. 125 50
      packages/ckeditor5-font/tests/ui/colorui.js

+ 1 - 1
packages/ckeditor5-font/tests/ui/colortableview.js

@@ -257,7 +257,7 @@ describe( 'ColorTableView', () => {
 		} );
 		} );
 
 
 		describe( 'events', () => {
 		describe( 'events', () => {
-			it( 'added colors delegates eexecute to parent', () => {
+			it( 'added colors delegates execute to parent', () => {
 				const spy = sinon.spy();
 				const spy = sinon.spy();
 				colorTableView.on( 'execute', spy );
 				colorTableView.on( 'execute', spy );
 
 

+ 125 - 50
packages/ckeditor5-font/tests/ui/colorui.js

@@ -3,44 +3,75 @@
  * For licensing, see LICENSE.md.
  * For licensing, see LICENSE.md.
  */
  */
 
 
-/* global document */
+/* global document, Event */
 
 
-import FontColorEditing from '../../src/fontcolor/fontcolorediting';
-import FontColorUI from '../../src/fontcolor/fontcolorui';
-
-import fontColorIcon from '../../theme/icons/font-color.svg';
+import ColorUI from './../../src/ui/colorui';
+import FontColorCommand from './../../src/fontcolor/fontcolorcommand';
 
 
 import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
 import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import { add as addTranslations, _clear as clearTranslations } from '@ckeditor/ckeditor5-utils/src/translation-service';
 import { add as addTranslations, _clear as clearTranslations } from '@ckeditor/ckeditor5-utils/src/translation-service';
 
 
-describe.skip( 'ColorUI', () => {
-	let editor, command, element;
+describe( 'ColorUI', () => {
+	class TestColorPlugin extends ColorUI {
+		constructor( editor ) {
+			super( editor, {
+				commandName: 'testColorCommand',
+				componentName: 'testColor',
+				icon: '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"></svg>',
+				dropdownLabel: 'Test Color'
+			} );
+			editor.commands.add( 'testColorCommand', new FontColorCommand( editor ) );
+		}
+
+		/**
+		 * @inheritDoc
+		 */
+		static get pluginName() {
+			return 'TestColorPlugin';
+		}
+	}
+
+	const testColorConfig = {
+		colors: [
+			'yellow',
+			{
+				color: '#000',
+			}, {
+				color: 'rgb(255, 255, 255)',
+				label: 'White',
+				hasBorder: true
+			}, {
+				color: 'red',
+				label: 'RED'
+			}, {
+				color: '#00FF00',
+				label: 'Green',
+				hasBorder: false
+			}
+		],
+		columns: 3
+	};
 
 
 	testUtils.createSinonSandbox();
 	testUtils.createSinonSandbox();
 
 
 	before( () => {
 	before( () => {
 		addTranslations( 'en', {
 		addTranslations( 'en', {
-			'Font Color': 'Font Color',
-			'Remove color': 'Remove text color',
-			'Black': 'Black',
+			'Test Color': 'Test Color',
+			'Remove color': 'Remove color',
+			'yellow': 'yellow',
 			'White': 'White',
 			'White': 'White',
-			'Red': 'Red',
-			'Orange': 'Orange',
-			'Blue': 'Blue',
+			'RED': 'RED',
 			'Green': 'Green'
 			'Green': 'Green'
 		} );
 		} );
 
 
 		addTranslations( 'pl', {
 		addTranslations( 'pl', {
-			'Font Color': 'Kolor czcionki',
+			'Test Color': 'Testowy plugin do kolorów',
 			'Remove color': 'Usuń kolor',
 			'Remove color': 'Usuń kolor',
-			'Black': 'Czarny',
+			'yellow': 'żółty',
 			'White': 'Biały',
 			'White': 'Biały',
-			'Red': 'Czerwony',
-			'Orange': 'Pomarańczowy',
-			'Blue': 'Niebieski',
-			'Green': 'Zielony',
-			'Yellow': 'Żółty'
+			'RED': 'CZERWONY',
+			'Green': 'Zielony'
 		} );
 		} );
 	} );
 	} );
 
 
@@ -48,16 +79,20 @@ describe.skip( 'ColorUI', () => {
 		clearTranslations();
 		clearTranslations();
 	} );
 	} );
 
 
+	let editor, element, testColorPlugin, command;
+
 	beforeEach( () => {
 	beforeEach( () => {
 		element = document.createElement( 'div' );
 		element = document.createElement( 'div' );
 		document.body.appendChild( element );
 		document.body.appendChild( element );
 
 
 		return ClassicTestEditor
 		return ClassicTestEditor
 			.create( element, {
 			.create( element, {
-				plugins: [ FontColorEditing, FontColorUI ]
+				plugins: [ TestColorPlugin ],
+				testColor: testColorConfig
 			} )
 			} )
 			.then( newEditor => {
 			.then( newEditor => {
 				editor = newEditor;
 				editor = newEditor;
+				testColorPlugin = newEditor.plugins.get( 'TestColorPlugin' );
 			} );
 			} );
 	} );
 	} );
 
 
@@ -67,40 +102,85 @@ describe.skip( 'ColorUI', () => {
 		return editor.destroy();
 		return editor.destroy();
 	} );
 	} );
 
 
-	describe( 'fontColor Dropdown', () => {
+	describe( 'constructor()', () => {
+		it( 'has assigned proper commandName', () => {
+			expect( testColorPlugin.commandName ).to.equal( 'testColorCommand' );
+		} );
+
+		it( 'has assigned proper componentName', () => {
+			expect( testColorPlugin.componentName ).to.equal( 'testColor' );
+		} );
+
+		it( 'has assigned proper icon', () => {
+			expect( testColorPlugin.icon ).to.equal( '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"></svg>' );
+		} );
+
+		it( 'has assigned proper dropdownLabel', () => {
+			expect( testColorPlugin.dropdownLabel ).to.equal( 'Test Color' );
+		} );
+
+		it( 'has assigned proper amount of columns', () => {
+			// Value taken from editor's config above.
+			expect( testColorPlugin.colorColumns ).to.equal( 3 );
+		} );
+	} );
+
+	describe( 'testColor Dropdown', () => {
 		let dropdown;
 		let dropdown;
 
 
 		beforeEach( () => {
 		beforeEach( () => {
-			command = editor.commands.get( 'fontColor' );
-			dropdown = editor.ui.componentFactory.create( 'fontColor' );
+			command = editor.commands.get( 'testColorCommand' );
+			dropdown = editor.ui.componentFactory.create( 'testColor' );
 		} );
 		} );
 
 
 		it( 'button has the base properties', () => {
 		it( 'button has the base properties', () => {
 			const button = dropdown.buttonView;
 			const button = dropdown.buttonView;
 
 
-			expect( button ).to.have.property( 'label', 'Font Color' );
+			expect( button ).to.have.property( 'label', 'Test Color' );
 			expect( button ).to.have.property( 'tooltip', true );
 			expect( button ).to.have.property( 'tooltip', true );
-			expect( button ).to.have.property( 'icon', fontColorIcon );
+			expect( button ).to.have.property( 'icon', '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"></svg>' );
 		} );
 		} );
 
 
 		it( 'should add custom CSS class to dropdown', () => {
 		it( 'should add custom CSS class to dropdown', () => {
-			const dropdown = editor.ui.componentFactory.create( 'fontColor' );
+			const dropdown = editor.ui.componentFactory.create( 'testColor' );
 
 
 			dropdown.render();
 			dropdown.render();
 
 
-			expect( dropdown.element.classList.contains( 'ck-font-color-dropdown' ) ).to.be.true;
+			expect( dropdown.element.classList.contains( 'ck-color-ui-dropdown' ) ).to.be.true;
 		} );
 		} );
 
 
 		it( 'should focus view after command execution from dropdown', () => {
 		it( 'should focus view after command execution from dropdown', () => {
 			const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
 			const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
-			const dropdown = editor.ui.componentFactory.create( 'fontColor' );
+			const dropdown = editor.ui.componentFactory.create( 'testColor' );
 
 
-			dropdown.commandName = 'fontColor';
+			dropdown.commandName = 'testColorCommand';
 			dropdown.fire( 'execute', { value: null } );
 			dropdown.fire( 'execute', { value: null } );
 
 
 			sinon.assert.calledOnce( focusSpy );
 			sinon.assert.calledOnce( focusSpy );
 		} );
 		} );
 
 
+		it( 'static color grid should impact on recent colors', () => {
+			const firstStaticTile = dropdown.colorTableView.items.get( 1 ).items.first;
+			const recentColorsModel = dropdown.colorTableView.recentlyUsedColors;
+			const spy = sinon.spy();
+
+			dropdown.on( 'execute', spy );
+
+			firstStaticTile.element.dispatchEvent( new Event( 'click' ) );
+
+			sinon.assert.calledOnce( spy );
+			sinon.assert.calledWith( spy, sinon.match.any, {
+				value: 'yellow',
+				label: 'yellow',
+				hasBorder: false
+			} );
+			expect( recentColorsModel.get( 0 ) ).to.include( {
+				color: 'yellow',
+				label: 'yellow',
+				hasBorder: false
+			} );
+		} );
+
 		describe( 'model to command binding', () => {
 		describe( 'model to command binding', () => {
 			it( 'isEnabled', () => {
 			it( 'isEnabled', () => {
 				command.isEnabled = false;
 				command.isEnabled = false;
@@ -120,7 +200,7 @@ describe.skip( 'ColorUI', () => {
 			it( 'works for the #buttonView', () => {
 			it( 'works for the #buttonView', () => {
 				const buttonView = dropdown.buttonView;
 				const buttonView = dropdown.buttonView;
 
 
-				expect( buttonView.label ).to.equal( 'Kolor czcionki' );
+				expect( buttonView.label ).to.equal( 'Testowy plugin do kolorów' );
 			} );
 			} );
 
 
 			it( 'works for the colorTableView#items in the panel', () => {
 			it( 'works for the colorTableView#items in the panel', () => {
@@ -132,26 +212,20 @@ describe.skip( 'ColorUI', () => {
 			describe( 'works for', () => {
 			describe( 'works for', () => {
 				const colors = [
 				const colors = [
 					{
 					{
-						color: 'hsl(0, 0%, 0%)',
-						label: 'Czarny'
-					}, {
-						color: 'hsl(0, 0%, 100%)',
-						label: 'Biały'
+						color: 'yellow',
+						label: 'żółty'
 					}, {
 					}, {
-						color: 'hsl(0, 75%, 60%)',
-						label: 'Czerwony'
+						color: '#000',
+						label: '#000'
 					}, {
 					}, {
-						color: 'hsl(30, 75%, 60%)',
-						label: 'Pomarańczowy'
+						color: 'rgb(255, 255, 255)',
+						label: 'Biały'
 					}, {
 					}, {
-						color: 'hsl(240, 75%, 60%)',
-						label: 'Niebieski'
+						color: 'red',
+						label: 'CZERWONY'
 					}, {
 					}, {
-						color: 'hsl(120, 75%, 60%)',
+						color: '#00FF00',
 						label: 'Zielony'
 						label: 'Zielony'
-					}, {
-						color: 'hsl(60, 75%, 60%)',
-						label: 'Żółty'
 					}
 					}
 				];
 				];
 
 
@@ -169,14 +243,15 @@ describe.skip( 'ColorUI', () => {
 
 
 				return ClassicTestEditor
 				return ClassicTestEditor
 					.create( editorElement, {
 					.create( editorElement, {
-						plugins: [ FontColorEditing, FontColorUI ],
-						toolbar: [ 'fontColor' ],
+						plugins: [ TestColorPlugin ],
+						testColor: testColorConfig,
+						toolbar: [ 'testColor' ],
 						language: 'pl',
 						language: 'pl',
 					} )
 					} )
 					.then( newEditor => {
 					.then( newEditor => {
 						editor = newEditor;
 						editor = newEditor;
-						dropdown = editor.ui.componentFactory.create( 'fontColor' );
-						command = editor.commands.get( 'fontColor' );
+						dropdown = editor.ui.componentFactory.create( 'testColor' );
+						command = editor.commands.get( 'testColorCommand' );
 
 
 						editorElement.remove();
 						editorElement.remove();