Mateusz Samsel 6 anni fa
parent
commit
22e5036071

+ 25 - 0
packages/ckeditor5-font/tests/_utils/testcolorplugin.js

@@ -0,0 +1,25 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import ColorUI from './../../src/ui/colorui';
+import FontColorCommand from './../../src/fontcolor/fontcolorcommand';
+
+export default 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: editor.locale.t( 'Test Color' )
+		} );
+
+		editor.commands.add( 'testColorCommand', new FontColorCommand( editor ) );
+		editor.model.schema.extend( '$text', { allowAttributes: 'testColor' } );
+	}
+
+	static get pluginName() {
+		return 'TestColorPlugin';
+	}
+}

+ 181 - 10
packages/ckeditor5-font/tests/ui/colortableview.js

@@ -3,8 +3,10 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals Event */
+/* globals document,Event */
 
+import TestColorPlugin from '../_utils/testcolorplugin';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import ColorTableView from './../../src/ui/colortableview';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
@@ -14,6 +16,9 @@ import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
 import removeButtonIcon from '@ckeditor/ckeditor5-core/theme/icons/eraser.svg';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import ColorTileView from '@ckeditor/ckeditor5-ui/src/colorgrid/colortileview';
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 
 describe( 'ColorTableView', () => {
 	let locale, colorTableView;
@@ -41,6 +46,29 @@ describe( 'ColorTableView', () => {
 			}
 		}
 	];
+	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
+	};
 
 	beforeEach( () => {
 		locale = { t() {} };
@@ -90,10 +118,6 @@ describe( 'ColorTableView', () => {
 			expect( colorTableView.removeButtonLabel ).to.equal( 'Remove color' );
 		} );
 
-		it( 'sets tooltip for the document colors section', () => {
-			expect( colorTableView.documentColorsLabel ).to.equal( 'Document colors' );
-		} );
-
 		it( 'sets number of drawn columns', () => {
 			expect( colorTableView.columns ).to.equal( 5 );
 		} );
@@ -297,11 +321,7 @@ describe( 'ColorTableView', () => {
 
 					sinon.assert.calledOnce( spy );
 					sinon.assert.calledWith( spy, sinon.match.any, {
-						value: '#000000',
-						label: 'Black',
-						options: {
-							hasBorder: false
-						}
+						value: '#000000'
 					} );
 				} );
 			} );
@@ -357,4 +377,155 @@ describe( 'ColorTableView', () => {
 			} );
 		} );
 	} );
+
+	describe( '_addColorToDocumentColors', () => {
+		it( 'add custom color from not defined colors', () => {
+			colorTableView._addColorToDocumentColors( '#123456' );
+			expect( colorTableView.documentColors.get( 0 ) ).to.deep.include( {
+				color: '#123456',
+				label: '#123456',
+				options: {
+					hasBorder: false
+				}
+			} );
+		} );
+
+		it( 'add already define color based on color value', () => {
+			colorTableView._addColorToDocumentColors( 'rgb(255,255,255)' );
+			// Color values are kept without spaces.
+			expect( colorTableView.documentColors.get( 0 ) ).to.deep.include( {
+				color: 'rgb(255,255,255)'
+			} );
+		} );
+	} );
+
+	describe( 'updateSelectedColors() with document colors', () => {
+		let element, editor, model, dropdown, staticColorsGrid, documentColorsGrid;
+
+		beforeEach( () => {
+			element = document.createElement( 'div' );
+			document.body.appendChild( element );
+
+			return ClassicTestEditor
+				.create( element, {
+					plugins: [ Paragraph, TestColorPlugin ],
+					testColor: Object.assign( {
+						documentColors: 3
+					}, testColorConfig )
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+					model = editor.model;
+
+					dropdown = editor.ui.componentFactory.create( 'testColor' );
+					dropdown.render();
+
+					staticColorsGrid = dropdown.colorTableView.staticColorsGrid;
+					documentColorsGrid = dropdown.colorTableView.documentColorsGrid;
+
+					global.document.body.appendChild( dropdown.element );
+				} );
+		} );
+
+		afterEach( () => {
+			element.remove();
+			dropdown.element.remove();
+			dropdown.destroy();
+
+			return editor.destroy();
+		} );
+
+		it( 'checkmark is present in document colors section', () => {
+			const command = editor.commands.get( 'testColorCommand' );
+
+			setModelData( model,
+				'<paragraph><$text testColor="red">Foo</$text></paragraph>'
+			);
+			command.value = 'red';
+
+			dropdown.isOpen = true;
+
+			expect( staticColorsGrid.selectedColor ).to.be.null;
+			expect( documentColorsGrid.selectedColor ).to.equal( 'red' );
+
+			const redStaticColorTile = staticColorsGrid.items.find( tile => tile.color === 'red' );
+			const redDocumentColorTile = documentColorsGrid.items.get( 0 );
+
+			expect( redStaticColorTile.isOn ).to.be.false;
+			expect( redDocumentColorTile.isOn ).to.be.true;
+		} );
+
+		it( 'checkmark is present in static colors', () => {
+			const command = editor.commands.get( 'testColorCommand' );
+
+			setModelData( model,
+				'<paragraph><$text testColor="gold">Bar</$text></paragraph>' +
+				'<paragraph><$text testColor="rgb(10,20,30)">Foo</$text></paragraph>' +
+				'<paragraph><$text testColor="#FFAACC">Baz</$text></paragraph>' +
+				'<paragraph><$text testColor="#00FF00">Test</$text></paragraph>'
+			);
+			command.value = '#00FF00';
+
+			dropdown.isOpen = true;
+
+			expect( staticColorsGrid.selectedColor ).to.equal( '#00FF00' );
+			expect( documentColorsGrid.selectedColor ).to.be.null;
+
+			const redStaticColorTile = staticColorsGrid.items.find( tile => tile.color === '#00FF00' );
+			const redDocumentColorTile = documentColorsGrid.items.get( 0 );
+
+			expect( redStaticColorTile.isOn ).to.be.true;
+			expect( redDocumentColorTile.isOn ).to.be.false;
+		} );
+	} );
+
+	describe( 'empty document colors', () => {
+		let editor, element, dropdown, model;
+
+		beforeEach( () => {
+			element = document.createElement( 'div' );
+			document.body.appendChild( element );
+
+			return ClassicTestEditor
+				.create( element, {
+					plugins: [ Paragraph, TestColorPlugin ],
+					testColor: Object.assign( {
+						documentColors: 0
+					}, testColorConfig )
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+					model = editor.model;
+					// testColorPlugin = newEditor.plugins.get( 'TestColorPlugin' );
+					dropdown = editor.ui.componentFactory.create( 'testColor' );
+
+					dropdown.render();
+					global.document.body.appendChild( dropdown.element );
+				} );
+		} );
+
+		afterEach( () => {
+			element.remove();
+			dropdown.element.remove();
+			dropdown.destroy();
+
+			return editor.destroy();
+		} );
+
+		it( 'document colors are not created', () => {
+			const colorTableView = dropdown.colorTableView;
+
+			setModelData( model,
+				'<paragraph><$text testColor="gold">Bar</$text></paragraph>' +
+				'<paragraph><$text testColor="rgb(10,20,30)">Foo</$text></paragraph>' +
+				'<paragraph><$text testColor="gold">New Foo</$text></paragraph>' +
+				'<paragraph><$text testColor="#FFAACC">Baz</$text></paragraph>'
+			);
+
+			dropdown.isOpen = true;
+
+			expect( colorTableView.documentColorsCount ).to.equal( 0 );
+			expect( colorTableView.documentColorsLabel ).to.be.undefined;
+		} );
+	} );
 } );

+ 1 - 192
packages/ckeditor5-font/tests/ui/colorui.js

@@ -5,8 +5,7 @@
 
 /* global document */
 
-import ColorUI from './../../src/ui/colorui';
-import FontColorCommand from './../../src/fontcolor/fontcolorcommand';
+import TestColorPlugin from '../_utils/testcolorplugin';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
@@ -15,24 +14,6 @@ import { add as addTranslations, _clear as clearTranslations } from '@ckeditor/c
 import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 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: editor.locale.t( 'Test Color' )
-			} );
-
-			editor.commands.add( 'testColorCommand', new FontColorCommand( editor ) );
-			editor.model.schema.extend( '$text', { allowAttributes: 'testColor' } );
-		}
-
-		static get pluginName() {
-			return 'TestColorPlugin';
-		}
-	}
-
 	const testColorConfig = {
 		colors: [
 			'yellow',
@@ -168,7 +149,6 @@ describe( 'ColorUI', () => {
 		it( 'colorTableView has set proper default attributes', () => {
 			const colorTableView = dropdown.colorTableView;
 
-			expect( colorTableView.documentColorsLabel ).to.equal( 'Document colors' );
 			expect( colorTableView.documentColorsCount ).to.equal( 3 );
 		} );
 
@@ -354,175 +334,4 @@ describe( 'ColorUI', () => {
 			}
 		} );
 	} );
-
-	describe( '_addColorToDocumentColors', () => {
-		let dropdown;
-
-		beforeEach( () => {
-			dropdown = editor.ui.componentFactory.create( 'testColor' );
-			dropdown.render();
-		} );
-
-		afterEach( () => {
-			dropdown.destroy();
-		} );
-
-		it( 'add custom color from not defined colors', () => {
-			testColorPlugin._addColorToDocumentColors( '#123456' );
-			expect( dropdown.colorTableView.documentColors.get( 0 ) ).to.deep.include( {
-				color: '#123456',
-				label: '#123456',
-				options: {
-					hasBorder: false
-				}
-			} );
-		} );
-
-		it( 'add already define color absed on color value', () => {
-			testColorPlugin._addColorToDocumentColors( 'rgb(255,255,255)' );
-			// Color values are kept without spaces.
-			expect( dropdown.colorTableView.documentColors.get( 0 ) ).to.deep.include( {
-				color: 'rgb(255,255,255)',
-				label: 'White',
-				options: {
-					hasBorder: true
-				}
-			} );
-		} );
-	} );
-
-	describe( '_updateSelectedColors() with document colors', () => {
-		let editor, element, dropdown;
-
-		beforeEach( () => {
-			element = document.createElement( 'div' );
-			document.body.appendChild( element );
-
-			return ClassicTestEditor
-				.create( element, {
-					plugins: [ Paragraph, TestColorPlugin ],
-					testColor: Object.assign( {
-						documentColors: 3
-					}, testColorConfig )
-				} )
-				.then( newEditor => {
-					editor = newEditor;
-					model = editor.model;
-					testColorPlugin = newEditor.plugins.get( 'TestColorPlugin' );
-					dropdown = editor.ui.componentFactory.create( 'testColor' );
-
-					dropdown.render();
-					global.document.body.appendChild( dropdown.element );
-				} );
-		} );
-
-		afterEach( () => {
-			element.remove();
-			dropdown.element.remove();
-			dropdown.destroy();
-
-			return editor.destroy();
-		} );
-
-		it( 'checkmark in document colors', () => {
-			const colorTableView = dropdown.colorTableView;
-			const command = editor.commands.get( 'testColorCommand' );
-
-			setModelData( model,
-				'<paragraph><$text testColor="red">Foo</$text></paragraph>'
-			);
-			command.value = 'red';
-
-			dropdown.isOpen = true;
-
-			const staticColorsGrid = colorTableView.items.get( 1 );
-			const documentColorsGrid = colorTableView.items.get( 2 );
-
-			expect( staticColorsGrid.selectedColor ).to.be.null;
-			expect( documentColorsGrid.selectedColor ).to.equal( 'red' );
-
-			const redStaticColorTile = staticColorsGrid.items.find( tile => tile.color === 'red' );
-			const redDocumentColorTile = documentColorsGrid.items.get( 0 );
-
-			expect( redStaticColorTile.isOn ).to.be.false;
-			expect( redDocumentColorTile.isOn ).to.be.true;
-		} );
-
-		it( 'checkmark in static colors', () => {
-			const colorTableView = dropdown.colorTableView;
-			const command = editor.commands.get( 'testColorCommand' );
-
-			setModelData( model,
-				'<paragraph><$text testColor="gold">Bar</$text></paragraph>' +
-				'<paragraph><$text testColor="rgb(10,20,30)">Foo</$text></paragraph>' +
-				'<paragraph><$text testColor="#FFAACC">Baz</$text></paragraph>' +
-				'<paragraph><$text testColor="#00FF00">Test</$text></paragraph>'
-			);
-			command.value = '#00FF00';
-
-			dropdown.isOpen = true;
-
-			const staticColorsGrid = colorTableView.items.get( 1 );
-			const documentColorsGrid = colorTableView.items.get( 2 );
-
-			expect( staticColorsGrid.selectedColor ).to.equal( '#00FF00' );
-			expect( documentColorsGrid.selectedColor ).to.be.null;
-
-			const redStaticColorTile = staticColorsGrid.items.find( tile => tile.color === '#00FF00' );
-			const redDocumentColorTile = documentColorsGrid.items.get( 0 );
-
-			expect( redStaticColorTile.isOn ).to.be.true;
-			expect( redDocumentColorTile.isOn ).to.be.false;
-		} );
-	} );
-
-	describe( 'empty document colors', () => {
-		let editor, element, dropdown;
-
-		beforeEach( () => {
-			element = document.createElement( 'div' );
-			document.body.appendChild( element );
-
-			return ClassicTestEditor
-				.create( element, {
-					plugins: [ Paragraph, TestColorPlugin ],
-					testColor: Object.assign( {
-						documentColors: 0
-					}, testColorConfig )
-				} )
-				.then( newEditor => {
-					editor = newEditor;
-					model = editor.model;
-					testColorPlugin = newEditor.plugins.get( 'TestColorPlugin' );
-					dropdown = editor.ui.componentFactory.create( 'testColor' );
-
-					dropdown.render();
-					global.document.body.appendChild( dropdown.element );
-				} );
-		} );
-
-		afterEach( () => {
-			element.remove();
-			dropdown.element.remove();
-			dropdown.destroy();
-
-			return editor.destroy();
-		} );
-
-		it( 'document colors are not created', () => {
-			const colorTableView = dropdown.colorTableView;
-
-			setModelData( model,
-				'<paragraph><$text testColor="gold">Bar</$text></paragraph>' +
-				'<paragraph><$text testColor="rgb(10,20,30)">Foo</$text></paragraph>' +
-				'<paragraph><$text testColor="gold">New Foo</$text></paragraph>' +
-				'<paragraph><$text testColor="#FFAACC">Baz</$text></paragraph>'
-			);
-
-			dropdown.isOpen = true;
-
-			expect( colorTableView.documentColorsCount ).to.equal( 0 );
-			expect( colorTableView.documentColorsLabel ).to.be.undefined;
-		} );
-	} );
 } );