Ver Fonte

Improve unit tests names.

Mateusz Samsel há 6 anos atrás
pai
commit
93cb2c9ab4
1 ficheiros alterados com 65 adições e 41 exclusões
  1. 65 41
      packages/ckeditor5-font/tests/ui/colortableview.js

+ 65 - 41
packages/ckeditor5-font/tests/ui/colortableview.js

@@ -89,24 +89,24 @@ describe( 'ColorTableView', () => {
 	testUtils.createSinonSandbox();
 
 	describe( 'constructor()', () => {
-		it( 'creates items collection', () => {
+		it( 'should create items collection', () => {
 			expect( colorTableView.items ).to.be.instanceOf( ViewCollection );
 		} );
 
-		it( 'store color definitions', () => {
+		it( 'should store colors\' definitions', () => {
 			expect( colorTableView.colorDefinitions ).to.be.instanceOf( Array );
 			expect( colorTableView.colorDefinitions ).to.deep.equal( colorDefinitions );
 		} );
 
-		it( 'creates focus tracker', () => {
+		it( 'should create focus tracker', () => {
 			expect( colorTableView.focusTracker ).to.be.instanceOf( FocusTracker );
 		} );
 
-		it( 'creates keystroke handler', () => {
+		it( 'should create keystroke handler', () => {
 			expect( colorTableView.keystrokes ).to.be.instanceOf( KeystrokeHandler );
 		} );
 
-		it( 'creates observable for selected color', () => {
+		it( 'should create observable for selected color', () => {
 			expect( colorTableView.selectedColor ).to.be.undefined;
 
 			colorTableView.set( 'selectedColor', 'white' );
@@ -114,38 +114,38 @@ describe( 'ColorTableView', () => {
 			expect( colorTableView.selectedColor ).to.equal( 'white' );
 		} );
 
-		it( 'sets tooltip for the remove color button', () => {
+		it( 'should set tooltip for the remove color button', () => {
 			expect( colorTableView.removeButtonLabel ).to.equal( 'Remove color' );
 		} );
 
-		it( 'sets number of drawn columns', () => {
+		it( 'should set number of drawn columns', () => {
 			expect( colorTableView.columns ).to.equal( 5 );
 		} );
 
-		it( 'creates collection of document colors', () => {
+		it( 'should create collection of document colors', () => {
 			expect( colorTableView.documentColors ).to.be.instanceOf( Collection );
 		} );
 
-		it( 'sets maximum number of document colors', () => {
+		it( 'should set maximum number of document colors', () => {
 			expect( colorTableView.documentColorsCount ).to.equal( 4 );
 		} );
 
-		it( 'creates focus cycler', () => {
+		it( 'should create focus cycler', () => {
 			expect( colorTableView._focusCycler ).to.be.instanceOf( FocusCycler );
 		} );
 
-		it( 'has correct class', () => {
+		it( 'should apply correct classes', () => {
 			expect( colorTableView.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( colorTableView.element.classList.contains( 'ck-color-table' ) ).to.be.true;
 		} );
 
-		it( 'has correct amount of children', () => {
+		it( 'should have correct amount of children', () => {
 			expect( colorTableView.items.length ).to.equal( 4 );
 		} );
 	} );
 
-	describe( 'update elements in focus tracker', () => {
-		it( 'focuses the tile in DOM', () => {
+	describe( 'focus tracker', () => {
+		it( 'should focus first child of colorTableView in DOM', () => {
 			const spy = sinon.spy( colorTableView._focusCycler, 'focusFirst' );
 
 			colorTableView.focus();
@@ -153,7 +153,7 @@ describe( 'ColorTableView', () => {
 			sinon.assert.calledOnce( spy );
 		} );
 
-		it( 'focuses last the tile in DOM', () => {
+		it( 'should focuses the last child of colorTableView in DOM', () => {
 			const spy = sinon.spy( colorTableView._focusCycler, 'focusLast' );
 
 			colorTableView.focusLast();
@@ -169,18 +169,18 @@ describe( 'ColorTableView', () => {
 			removeButton = colorTableView.items.first;
 		} );
 
-		it( 'has proper class', () => {
+		it( 'should have proper class', () => {
 			expect( removeButton.element.classList.contains( 'ck-color-table__remove-color' ) ).to.be.true;
 		} );
 
-		it( 'has proper setting', () => {
+		it( 'should have proper settings', () => {
 			expect( removeButton.withText ).to.be.true;
 			expect( removeButton.icon ).to.equal( removeButtonIcon );
 			expect( removeButton.tooltip ).to.be.true;
 			expect( removeButton.label ).to.equal( 'Remove color' );
 		} );
 
-		it( 'executes event with "null" value', () => {
+		it( 'should execute event with "null" value', () => {
 			const spy = sinon.spy();
 			colorTableView.on( 'execute', spy );
 
@@ -198,12 +198,12 @@ describe( 'ColorTableView', () => {
 			staticColorTable = colorTableView.items.get( 1 );
 		} );
 
-		it( 'has added 3 children from definition', () => {
+		it( 'should have added 3 children from definition', () => {
 			expect( staticColorTable.items.length ).to.equal( 3 );
 		} );
 
 		colorDefinitions.forEach( ( item, index ) => {
-			it( `dispatch event to parent element for color: ${ item.color }`, () => {
+			it( `should dispatch event to parent element for color: ${ item.color }`, () => {
 				const spy = sinon.spy();
 				colorTableView.on( 'execute', spy );
 
@@ -256,7 +256,7 @@ describe( 'ColorTableView', () => {
 			} );
 
 			describe( 'model manipulation', () => {
-				it( 'adding items works properly', () => {
+				it( 'should add item to document colors', () => {
 					expect( documentColors.length ).to.equal( 0 );
 
 					documentColors.add( Object.assign( {}, colorBlack ) );
@@ -267,7 +267,7 @@ describe( 'ColorTableView', () => {
 					expect( documentColors.first.options.hasBorder ).to.be.false;
 				} );
 
-				it( 'adding multiple times same color should not populate items collection', () => {
+				it( 'should not add same item twice one after another', () => {
 					expect( documentColors.length ).to.equal( 0 );
 
 					documentColors.add( Object.assign( {}, colorBlack ) );
@@ -281,7 +281,7 @@ describe( 'ColorTableView', () => {
 					expect( documentColors.length ).to.equal( 1 );
 				} );
 
-				it( 'adding duplicated colors don\'t add it to model', () => {
+				it( 'should not add item if it\'s present on the documentColor list', () => {
 					expect( documentColors.length ).to.equal( 0 );
 
 					documentColors.add( Object.assign( {}, colorBlack ) );
@@ -313,7 +313,7 @@ describe( 'ColorTableView', () => {
 			} );
 
 			describe( 'events', () => {
-				it( 'added colors delegates execute to parent', () => {
+				it( 'should delegate execute to parent', () => {
 					const spy = sinon.spy();
 					colorTableView.on( 'execute', spy );
 
@@ -328,8 +328,8 @@ describe( 'ColorTableView', () => {
 			} );
 
 			describe( 'binding', () => {
-				it( 'add tile item when document colors model is updated', () => {
-					let itm;
+				it( 'should add new colorTile item when document colors model is updated', () => {
+					let colorTile;
 
 					expect( documentColors.length ).to.equal( 0 );
 					expect( documentColorsGridView.items.length ).to.equal( 0 );
@@ -338,17 +338,17 @@ describe( 'ColorTableView', () => {
 					expect( documentColors.length ).to.equal( 1 );
 					expect( documentColorsGridView.items.length ).to.equal( 1 );
 
-					itm = documentColorsGridView.items.first;
-					expect( itm ).to.be.instanceOf( ColorTileView );
-					expect( itm.label ).to.equal( 'Black' );
-					expect( itm.color ).to.equal( '#000000' );
-					expect( itm.hasBorder ).to.be.false;
+					colorTile = documentColorsGridView.items.first;
+					expect( colorTile ).to.be.instanceOf( ColorTileView );
+					expect( colorTile.label ).to.equal( 'Black' );
+					expect( colorTile.color ).to.equal( '#000000' );
+					expect( colorTile.hasBorder ).to.be.false;
 
 					documentColors.add( Object.assign( {}, colorEmpty ) );
-					itm = documentColorsGridView.items.get( 1 );
-					expect( itm ).to.be.instanceOf( ColorTileView );
-					expect( itm.color ).to.equal( 'hsla(0,0%,0%,0)' );
-					expect( itm.hasBorder ).to.be.true;
+					colorTile = documentColorsGridView.items.get( 1 );
+					expect( colorTile ).to.be.instanceOf( ColorTileView );
+					expect( colorTile.color ).to.equal( 'hsla(0,0%,0%,0)' );
+					expect( colorTile.hasBorder ).to.be.true;
 				} );
 			} );
 		} );
@@ -379,7 +379,7 @@ describe( 'ColorTableView', () => {
 	} );
 
 	describe( '_addColorToDocumentColors', () => {
-		it( 'add custom color from not defined colors', () => {
+		it( 'should add custom color', () => {
 			colorTableView._addColorToDocumentColors( '#123456' );
 			expect( colorTableView.documentColors.get( 0 ) ).to.deep.include( {
 				color: '#123456',
@@ -390,7 +390,7 @@ describe( 'ColorTableView', () => {
 			} );
 		} );
 
-		it( 'add already define color based on color value', () => {
+		it( 'should detect already define color based on color value and use', () => {
 			colorTableView._addColorToDocumentColors( 'rgb(255,255,255)' );
 			// Color values are kept without spaces.
 			expect( colorTableView.documentColors.get( 0 ) ).to.deep.include( {
@@ -435,7 +435,7 @@ describe( 'ColorTableView', () => {
 			return editor.destroy();
 		} );
 
-		it( 'checkmark is present in document colors section', () => {
+		it( 'should have color tile turned on in document colors and static colors section', () => {
 			const command = editor.commands.get( 'testColorCommand' );
 
 			setModelData( model,
@@ -455,7 +455,7 @@ describe( 'ColorTableView', () => {
 			expect( redDocumentColorTile.isOn ).to.be.true;
 		} );
 
-		it( 'checkmark is present in static colors when there is no space for document color', () => {
+		it( 'should have color tile turned on in static colors section when document colors are full', () => {
 			const command = editor.commands.get( 'testColorCommand' );
 
 			setModelData( model,
@@ -469,6 +469,7 @@ describe( 'ColorTableView', () => {
 			dropdown.isOpen = true;
 
 			expect( staticColorsGrid.selectedColor ).to.equal( '#00FF00' );
+			expect( documentColorsGrid.selectedColor ).to.equal( '#00FF00' );
 
 			const redStaticColorTile = staticColorsGrid.items.find( tile => tile.color === '#00FF00' );
 			const activeDocumentColorTile = documentColorsGrid.items.find( tile => tile.isOn );
@@ -476,9 +477,32 @@ describe( 'ColorTableView', () => {
 			expect( redStaticColorTile.isOn ).to.be.true;
 			expect( activeDocumentColorTile ).to.be.undefined;
 		} );
+
+		it( 'should have no selection for color outside of definition', () => {
+			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="pink">Test</$text></paragraph>'
+			);
+			command.value = 'pink';
+
+			dropdown.isOpen = true;
+
+			expect( staticColorsGrid.selectedColor ).to.equal( 'pink' );
+			expect( documentColorsGrid.selectedColor ).to.equal( 'pink' );
+
+			const activeStaticDocumentTile = staticColorsGrid.items.find( tile => tile.isOn );
+			const activeDocumentColorTile = documentColorsGrid.items.find( tile => tile.isOn );
+
+			expect( activeStaticDocumentTile ).to.be.undefined;
+			expect( activeDocumentColorTile ).to.be.undefined;
+		} );
 	} );
 
-	describe( 'empty document colors', () => {
+	describe( 'no document colors section', () => {
 		let editor, element, dropdown, model;
 
 		beforeEach( () => {
@@ -510,7 +534,7 @@ describe( 'ColorTableView', () => {
 			return editor.destroy();
 		} );
 
-		it( 'document colors are not created', () => {
+		it( 'should not create document colors section', () => {
 			const colorTableView = dropdown.colorTableView;
 
 			setModelData( model,