Răsfoiți Sursa

Correct error with naming and simplify focus method. Add unit test for color grid.

Mateusz Samsel 6 ani în urmă
părinte
comite
65f1326a69

+ 1 - 7
packages/ckeditor5-font/src/ui/colorgrid.js

@@ -115,13 +115,7 @@ export default class ColorGrid extends View {
 	 */
 	focusLast() {
 		if ( this.items.length ) {
-			const lastChild = this.children.last;
-
-			if ( typeof lastChild.focusLast === 'function' ) {
-				lastChild.focusLast();
-			} else {
-				lastChild.focus();
-			}
+			this.items.last.focus();
 		}
 	}
 

+ 88 - 5
packages/ckeditor5-font/tests/ui/colorgrid.js

@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
+/* globals Event */
+
 import ColorGrid from './../../src/ui/colorgrid';
 import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
@@ -10,8 +12,10 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
 import ColorTile from '../../src/ui/colortile';
 
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+
 describe( 'ColorGrid', () => {
-	const colorDefinition = [
+	const colorsDefinition = [
 		{
 			color: '#000',
 			label: 'Black',
@@ -32,14 +36,16 @@ describe( 'ColorGrid', () => {
 			}
 		}
 	];
-
 	let locale, colorGrid;
+
 	beforeEach( () => {
 		locale = { t() {} };
-		colorGrid = new ColorGrid( locale, colorDefinition );
+		colorGrid = new ColorGrid( locale, { colorsDefinition } );
 		colorGrid.render();
 	} );
 
+	testUtils.createSinonSandbox();
+
 	describe( 'constructor()', () => {
 		it( 'creates view collection with children', () => {
 			expect( colorGrid.items ).to.be.instanceOf( ViewCollection );
@@ -61,9 +67,9 @@ describe( 'ColorGrid', () => {
 			it( 'has proper number of elements', () => {
 				expect( colorGrid.items.length ).to.equal( 3 );
 			} );
-			colorDefinition.forEach( ( color, index ) => {
+			colorsDefinition.forEach( ( color, index ) => {
 				describe( 'child items has proper attributes', () => {
-					it( `for ${ index } child`, () => {
+					it( `for (index: ${ index }, color: ${ color.color }) child`, () => {
 						const colorTile = colorGrid.items.get( index );
 						expect( colorTile ).to.be.instanceOf( ColorTile );
 						expect( colorTile.color ).to.equal( color.color );
@@ -72,4 +78,81 @@ describe( 'ColorGrid', () => {
 			} );
 		} );
 	} );
+
+	describe( 'execute()', () => {
+		it( 'fires event for rendered tiles', () => {
+			const spy = sinon.spy();
+			const firstTile = colorGrid.items.first;
+
+			colorGrid.on( 'execute', spy );
+
+			firstTile.isEnabled = true;
+
+			firstTile.element.dispatchEvent( new Event( 'click' ) );
+			sinon.assert.callCount( spy, 1 );
+
+			firstTile.isEnabled = false;
+
+			firstTile.element.dispatchEvent( new Event( 'click' ) );
+			sinon.assert.callCount( spy, 1 );
+		} );
+	} );
+
+	describe( 'focus', () => {
+		it( 'focuses the tile in DOM', () => {
+			const spy = sinon.spy( colorGrid.items.first, 'focus' );
+
+			colorGrid.focus();
+
+			sinon.assert.calledOnce( spy );
+
+			colorGrid.items.clear();
+			colorGrid.focus();
+
+			expect( colorGrid.items.length ).to.equal( 0 );
+			sinon.assert.calledOnce( spy );
+		} );
+
+		it( 'focuses last the tile in DOM', () => {
+			const spy = sinon.spy( colorGrid.items.last, 'focus' );
+
+			colorGrid.focusLast();
+
+			sinon.assert.calledOnce( spy );
+
+			colorGrid.items.clear();
+			colorGrid.focusLast();
+
+			expect( colorGrid.items.length ).to.equal( 0 );
+			sinon.assert.calledOnce( spy );
+		} );
+
+		describe( 'update elements in focus tracker', () => {
+			it( 'adding new element', () => {
+				const spy = sinon.spy( colorGrid.focusTracker, 'add' );
+
+				const colorTile = new ColorTile();
+				colorTile.set( {
+					color: 'yellow',
+					label: 'Yellow',
+					tooltip: true,
+					options: {
+						hasBorder: false
+					}
+				} );
+				colorGrid.items.add( colorTile );
+
+				expect( colorGrid.items.length ).to.equal( 4 );
+				sinon.assert.calledOnce( spy );
+			} );
+			it( 'removes element', () => {
+				const spy = sinon.spy( colorGrid.focusTracker, 'remove' );
+
+				colorGrid.items.remove( colorGrid.items.length - 1 );
+
+				expect( colorGrid.items.length ).to.equal( 2 );
+				sinon.assert.calledOnce( spy );
+			} );
+		} );
+	} );
 } );