瀏覽代碼

Tests: Extended the coverage for the ColorGrid.

Aleksander Nowodzinski 6 年之前
父節點
當前提交
74d7aef7ce
共有 2 個文件被更改,包括 80 次插入48 次删除
  1. 24 21
      packages/ckeditor5-ui/src/colorgrid/colorgrid.js
  2. 56 27
      packages/ckeditor5-ui/tests/colorgrid/colorgrid.js

+ 24 - 21
packages/ckeditor5-ui/src/colorgrid/colorgrid.js

@@ -32,6 +32,13 @@ export default class ColorGrid extends View {
 	constructor( locale, options ) {
 		super( locale );
 
+		const colorDefinitions = options && options.colorDefinitions || [];
+		const viewStyleAttribute = {};
+
+		if ( options && options.columns ) {
+			viewStyleAttribute.gridTemplateColumns = `repeat( ${ options.columns }, 1fr)`;
+		}
+
 		/**
 		 * Collection of the child tile views.
 		 *
@@ -76,28 +83,26 @@ export default class ColorGrid extends View {
 			}
 		} );
 
-		if ( options.colorDefinitions ) {
-			options.colorDefinitions.forEach( item => {
-				const colorTile = new ColorTile();
+		colorDefinitions.forEach( item => {
+			const colorTile = new ColorTile();
 
-				colorTile.set( {
-					color: item.color,
-					label: item.label,
-					tooltip: true,
-					hasBorder: item.options.hasBorder
-				} );
+			colorTile.set( {
+				color: item.color,
+				label: item.label,
+				tooltip: true,
+				hasBorder: item.options.hasBorder
+			} );
 
-				colorTile.on( 'execute', () => {
-					this.fire( 'execute', {
-						value: item.color,
-						hasBorder: item.options.hasBorder,
-						label: item.label
-					} );
+			colorTile.on( 'execute', () => {
+				this.fire( 'execute', {
+					value: item.color,
+					hasBorder: item.options.hasBorder,
+					label: item.label
 				} );
-
-				this.items.add( colorTile );
 			} );
-		}
+
+			this.items.add( colorTile );
+		} );
 
 		this.setTemplate( {
 			tag: 'div',
@@ -107,9 +112,7 @@ export default class ColorGrid extends View {
 					'ck',
 					'ck-color-grid'
 				],
-				style: {
-					gridTemplateColumns: `repeat( ${ options.columns }, 1fr)`
-				}
+				style: viewStyleAttribute
 			}
 		} );
 	}

+ 56 - 27
packages/ckeditor5-ui/tests/colorgrid/colorgrid.js

@@ -14,7 +14,7 @@ import FocusCycler from '../../src/focuscycler';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
 describe( 'ColorGrid', () => {
-	let locale, colorGrid;
+	let locale, view;
 
 	const colorDefinitions = [
 		{
@@ -42,37 +42,66 @@ describe( 'ColorGrid', () => {
 
 	beforeEach( () => {
 		locale = { t() {} };
-		colorGrid = new ColorGrid( locale, { colorDefinitions } );
-		colorGrid.render();
+		view = new ColorGrid( locale, { colorDefinitions } );
+		view.render();
+	} );
+
+	afterEach( () => {
+		view.destroy();
 	} );
 
 	testUtils.createSinonSandbox();
 
 	describe( 'constructor()', () => {
+		it( 'creates element from template', () => {
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
+			expect( view.element.classList.contains( 'ck-color-grid' ) ).to.be.true;
+		} );
+
+		it( 'uses the options#columns to control the grid', () => {
+			const view = new ColorGrid( locale, { columns: 3 } );
+			view.render();
+
+			expect( view.element.style.gridTemplateColumns ).to.equal( '1fr 1fr 1fr' );
+
+			view.destroy();
+		} );
+
+		it( 'creates the view without provided color definitions', () => {
+			const view = new ColorGrid( locale );
+			view.render();
+
+			expect( view.items ).to.have.length( 0 );
+
+			view.destroy();
+		} );
+
 		it( 'creates view collection with children', () => {
-			expect( colorGrid.items ).to.be.instanceOf( ViewCollection );
+			expect( view.items ).to.be.instanceOf( ViewCollection );
 		} );
 
 		it( 'creates focus tracker', () => {
-			expect( colorGrid.focusTracker ).to.be.instanceOf( FocusTracker );
+			expect( view.focusTracker ).to.be.instanceOf( FocusTracker );
 		} );
 
 		it( 'creates keystroke handler', () => {
-			expect( colorGrid.keystrokes ).to.be.instanceOf( KeystrokeHandler );
+			expect( view.keystrokes ).to.be.instanceOf( KeystrokeHandler );
 		} );
 
 		it( 'creates focus cycler', () => {
-			expect( colorGrid._focusCycler ).to.be.instanceOf( FocusCycler );
+			expect( view._focusCycler ).to.be.instanceOf( FocusCycler );
 		} );
 
 		describe( 'add colors from definition as child items', () => {
 			it( 'has proper number of elements', () => {
-				expect( colorGrid.items.length ).to.equal( 3 );
+				expect( view.items.length ).to.equal( 3 );
 			} );
+
 			colorDefinitions.forEach( ( color, index ) => {
 				describe( 'child items has proper attributes', () => {
 					it( `for (index: ${ index }, color: ${ color.color }) child`, () => {
-						const colorTile = colorGrid.items.get( index );
+						const colorTile = view.items.get( index );
+
 						expect( colorTile ).to.be.instanceOf( ColorTile );
 						expect( colorTile.color ).to.equal( color.color );
 					} );
@@ -84,9 +113,9 @@ describe( 'ColorGrid', () => {
 	describe( 'execute()', () => {
 		it( 'fires event for rendered tiles', () => {
 			const spy = sinon.spy();
-			const firstTile = colorGrid.items.first;
+			const firstTile = view.items.first;
 
-			colorGrid.on( 'execute', spy );
+			view.on( 'execute', spy );
 
 			firstTile.isEnabled = true;
 
@@ -102,36 +131,36 @@ describe( 'ColorGrid', () => {
 
 	describe( 'focus', () => {
 		it( 'focuses the tile in DOM', () => {
-			const spy = sinon.spy( colorGrid.items.first, 'focus' );
+			const spy = sinon.spy( view.items.first, 'focus' );
 
-			colorGrid.focus();
+			view.focus();
 
 			sinon.assert.calledOnce( spy );
 
-			colorGrid.items.clear();
-			colorGrid.focus();
+			view.items.clear();
+			view.focus();
 
-			expect( colorGrid.items.length ).to.equal( 0 );
+			expect( view.items.length ).to.equal( 0 );
 			sinon.assert.calledOnce( spy );
 		} );
 
 		it( 'focuses last the tile in DOM', () => {
-			const spy = sinon.spy( colorGrid.items.last, 'focus' );
+			const spy = sinon.spy( view.items.last, 'focus' );
 
-			colorGrid.focusLast();
+			view.focusLast();
 
 			sinon.assert.calledOnce( spy );
 
-			colorGrid.items.clear();
-			colorGrid.focusLast();
+			view.items.clear();
+			view.focusLast();
 
-			expect( colorGrid.items.length ).to.equal( 0 );
+			expect( view.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 spy = sinon.spy( view.focusTracker, 'add' );
 
 				const colorTile = new ColorTile();
 				colorTile.set( {
@@ -142,18 +171,18 @@ describe( 'ColorGrid', () => {
 						hasBorder: false
 					}
 				} );
-				colorGrid.items.add( colorTile );
+				view.items.add( colorTile );
 
-				expect( colorGrid.items.length ).to.equal( 4 );
+				expect( view.items.length ).to.equal( 4 );
 				sinon.assert.calledOnce( spy );
 			} );
 
 			it( 'removes element', () => {
-				const spy = sinon.spy( colorGrid.focusTracker, 'remove' );
+				const spy = sinon.spy( view.focusTracker, 'remove' );
 
-				colorGrid.items.remove( colorGrid.items.length - 1 );
+				view.items.remove( view.items.length - 1 );
 
-				expect( colorGrid.items.length ).to.equal( 2 );
+				expect( view.items.length ).to.equal( 2 );
 				sinon.assert.calledOnce( spy );
 			} );
 		} );