Преглед изворни кода

Add unit tests for colorui. Remove wrong tests.

Mateusz Samsel пре 6 година
родитељ
комит
b5ea98c752
2 измењених фајлова са 153 додато и 94 уклоњено
  1. 3 3
      packages/ckeditor5-font/src/ui/colorui.js
  2. 150 91
      packages/ckeditor5-font/tests/ui/colorui.js

+ 3 - 3
packages/ckeditor5-font/src/ui/colorui.js

@@ -138,9 +138,6 @@ export default class ColorUI extends Plugin {
 						documentColors.clear();
 
 						for ( const rootName of rootNames ) {
-							if ( documentColors.length >= maxCount ) {
-								break;
-							}
 							const root = document.getRoot( rootName );
 							const range = model.createRangeIn( root );
 							for ( const node of range.getItems() ) {
@@ -151,6 +148,9 @@ export default class ColorUI extends Plugin {
 									}
 								}
 							}
+							if ( documentColors.length >= maxCount ) {
+								break;
+							}
 						}
 					}
 				} );

+ 150 - 91
packages/ckeditor5-font/tests/ui/colorui.js

@@ -8,11 +8,11 @@
 import ColorUI from './../../src/ui/colorui';
 import FontColorCommand from './../../src/fontcolor/fontcolorcommand';
 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';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import { add as addTranslations, _clear as clearTranslations } from '@ckeditor/ckeditor5-utils/src/translation-service';
-import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 describe( 'ColorUI', () => {
 	class TestColorPlugin extends ColorUI {
@@ -135,6 +135,12 @@ describe( 'ColorUI', () => {
 		beforeEach( () => {
 			command = editor.commands.get( 'testColorCommand' );
 			dropdown = editor.ui.componentFactory.create( 'testColor' );
+
+			dropdown.render();
+		} );
+
+		afterEach( () => {
+			dropdown.destroy();
 		} );
 
 		it( 'button has the base properties', () => {
@@ -146,10 +152,6 @@ describe( 'ColorUI', () => {
 		} );
 
 		it( 'should add custom CSS class to dropdown', () => {
-			const dropdown = editor.ui.componentFactory.create( 'testColor' );
-
-			dropdown.render();
-
 			expect( dropdown.element.classList.contains( 'ck-color-ui-dropdown' ) ).to.be.true;
 		} );
 
@@ -163,6 +165,13 @@ describe( 'ColorUI', () => {
 			sinon.assert.calledOnce( focusSpy );
 		} );
 
+		it( 'colorTableView has set proper default attributes', () => {
+			const colorTableView = dropdown.colorTableView;
+
+			expect( colorTableView.documentColorsLabel ).to.equal( 'Document colors' );
+			expect( colorTableView.documentColorsCount ).to.equal( 3 );
+		} );
+
 		describe( 'model to command binding', () => {
 			it( 'isEnabled', () => {
 				command.isEnabled = false;
@@ -174,119 +183,95 @@ describe( 'ColorUI', () => {
 			} );
 		} );
 
-		describe( 'reacts on change:data event', () => {
-			let recentColorsModel;
+		describe( 'properly detects document colors on dropdown open', () => {
+			let documentColorsModel, dropdown;
 			beforeEach( () => {
-				recentColorsModel = testColorPlugin.colorTableView.recentlyUsedColors;
+				dropdown = editor.ui.componentFactory.create( 'testColor' );
+				dropdown.render();
+				documentColorsModel = dropdown.colorTableView.documentColors;
+				global.document.body.appendChild( dropdown.element );
 			} );
-
-			it( 'editor starts with empty colors', () => {
-				recentColorsModel.map( ( item, index ) => {
-					expect( item ).to.include( {
-						color: 'hsla(0, 0%, 0%, 0)',
-						isEnabled: false,
-						hasBorder: true
-					}, `Default item with index: ${ index }, should be empty color.` );
-				} );
+			afterEach( () => {
+				dropdown.destroy();
 			} );
 
-			it( 'recent colors are read after initialization', () => {
-				setModelData( model, '<paragraph><$text testColor="rgb(10,20,30)">Foo</$text></paragraph>' +
+			it( 'adds to model colors from editor and not duplicates it', () => {
+				setModelData( model,
 					'<paragraph><$text testColor="gold">Bar</$text></paragraph>' +
-					'<paragraph><$text testColor="#FFAACC">Baz</$text></paragraph>' +
-					'<paragraph><$text testColor="gold">New Foo</$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>'
+				);
 
-				// First color should be reset to gold, because it's appear again in last paragraph
-				expect( recentColorsModel.get( 0 ) ).to.include( {
+				dropdown.isOpen = true;
+
+				expect( documentColorsModel.get( 0 ) ).to.deep.include( {
 					color: 'gold',
 					label: 'gold',
-					hasBorder: false
-				} );
-
-				expect( recentColorsModel.get( 1 ) ).to.include( {
-					color: '#FFAACC',
-					label: '#FFAACC',
-					hasBorder: false
+					options: {
+						hasBorder: false
+					}
 				} );
 
-				expect( recentColorsModel.get( 2 ) ).to.include( {
+				expect( documentColorsModel.get( 1 ) ).to.deep.include( {
 					color: 'rgb(10,20,30)',
 					label: 'rgb(10,20,30)',
-					hasBorder: false
+					options: {
+						hasBorder: false
+					}
 				} );
-			} );
 
-			it( 'predefined color is recognized and is not used in recent colors', () => {
-				setModelData( model, '<paragraph><$text testColor="rgb(255,255,255)">Foo</$text></paragraph>' );
-				expect( recentColorsModel.get( 0 ) ).to.include( {
-					color: 'hsla(0, 0%, 0%, 0)',
-					isEnabled: false,
-					hasBorder: true
+				expect( documentColorsModel.get( 2 ) ).to.deep.include( {
+					color: '#FFAACC',
+					label: '#FFAACC',
+					options: {
+						hasBorder: false
+					}
 				} );
 			} );
 
-			it( 'removing color from model doesn\'t change recent colors', () => {
-				setModelData( model, '<paragraph><$text testColor="lightgreen">Foo</$text></paragraph>' );
-
-				expect( recentColorsModel.get( 0 ) ).to.include( {
-					color: 'lightgreen',
-					label: 'lightgreen',
-					hasBorder: false
-				} );
-
-				const textNode = model.document.getRoot().getChild( 0 ).getChild( 0 );
+			it( 'reacts on document model changes', () => {
+				setModelData( model,
+					'<paragraph><$text testColor="rgb(10,20,30)">Foo</$text></paragraph>'
+				);
 
-				model.change( writer => {
-					writer.removeAttribute( 'testColor', textNode );
-				} );
+				dropdown.isOpen = true;
 
-				expect( recentColorsModel.get( 0 ) ).to.include( {
-					color: 'lightgreen',
-					label: 'lightgreen',
-					hasBorder: false
+				expect( documentColorsModel.length ).to.equal( 1 );
+				expect( documentColorsModel.get( 0 ) ).to.deep.include( {
+					color: 'rgb(10,20,30)',
+					label: 'rgb(10,20,30)',
+					options: {
+						hasBorder: false
+					}
 				} );
-				expect( getModelData( model, { withoutSelection: true } ) ).to.equal( '<paragraph>Foo</paragraph>' );
-			} );
 
-			it( 'inserting text without color doesn\'t break anything in colors', () => {
-				setModelData( model, '<paragraph><$text testColor="lightblue">Foo</$text>[]</paragraph>' );
+				dropdown.isOpen = false;
 
-				const paragraph = model.document.getRoot().getChild( 0 );
-
-				model.change( writer => {
-					writer.insertText( 'bar', paragraph, 'end' );
-				} );
-				expect( recentColorsModel.get( 0 ) ).to.include( {
-					color: 'lightblue',
-					label: 'lightblue',
-					hasBorder: false
-				} );
-				expect( getModelData( model, { withoutSelection: true } ) )
-					.to.equal( '<paragraph><$text testColor="lightblue">Foo</$text>bar</paragraph>' );
-			} );
+				setModelData( model,
+					'<paragraph><$text testColor="gold">Bar</$text></paragraph>' +
+					'<paragraph><$text testColor="#FFAACC">Baz</$text></paragraph>'
+				);
 
-			it( 'changing color value will added as recently used color', () => {
-				setModelData( model, '<paragraph><$text testColor="lightblue">Foo</$text>[]</paragraph>' );
+				dropdown.isOpen = true;
 
-				const textNode = model.document.getRoot().getChild( 0 ).getChild( 0 );
+				expect( documentColorsModel.length ).to.equal( 2 );
 
-				model.change( writer => {
-					writer.setAttribute( 'testColor', 'lightgreen', textNode );
+				expect( documentColorsModel.get( 0 ) ).to.deep.include( {
+					color: 'gold',
+					label: 'gold',
+					options: {
+						hasBorder: false
+					}
 				} );
 
-				expect( recentColorsModel.get( 0 ) ).to.include( {
-					color: 'lightgreen',
-					label: 'lightgreen',
-					hasBorder: false
-				} );
-				expect( recentColorsModel.get( 1 ) ).to.include( {
-					color: 'lightblue',
-					label: 'lightblue',
-					hasBorder: false
+				expect( documentColorsModel.get( 1 ) ).to.deep.include( {
+					color: '#FFAACC',
+					label: '#FFAACC',
+					options: {
+						hasBorder: false
+					}
 				} );
-
-				expect( getModelData( model, { withoutSelection: true } ) )
-					.to.equal( '<paragraph><$text testColor="lightgreen">Foo</$text></paragraph>' );
 			} );
 		} );
 
@@ -368,4 +353,78 @@ 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( 'empty document colors', () => {
+		let editor, element;
+
+		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' );
+				} );
+		} );
+
+		afterEach( () => {
+			element.remove();
+
+			return editor.destroy();
+		} );
+
+		it( 'document colors are not created', () => {
+			const dropdown = editor.ui.componentFactory.create( 'testColor' );
+			dropdown.render();
+
+			const colorTableView = dropdown.colorTableView;
+
+			expect( colorTableView.documentColorsCount ).to.equal( 0 );
+			expect( colorTableView.documentColorsLabel ).to.be.undefined;
+		} );
+	} );
 } );