Browse Source

Tests: Added tests for the CharacterGridView class.

Aleksander Nowodzinski 6 years ago
parent
commit
3567f558ad

+ 2 - 2
packages/ckeditor5-special-characters/src/ui/charactergridview.js

@@ -22,7 +22,7 @@ export default class CharacterGridView extends View {
 	/**
 	 * Creates an instance of a character grid containing tiles representing special characters.
 	 *
-	 * @param {module:utils/locale~Locale} [locale] The localization services instance.
+	 * @param {module:utils/locale~Locale} locale The localization services instance.
 	 * @param {Object} options Component configuration
 	 * @param {Number} options.columns A number of columns in the grid.
 	 */
@@ -32,7 +32,7 @@ export default class CharacterGridView extends View {
 		const viewStyleAttribute = {};
 
 		if ( options && options.columns ) {
-			viewStyleAttribute.gridTemplateColumns = `repeat( ${ options.columns }, 1fr)`;
+			viewStyleAttribute.gridTemplateColumns = `repeat( ${ options.columns }, 1fr )`;
 		}
 
 		/**

+ 67 - 0
packages/ckeditor5-special-characters/tests/ui/charactergridview.js

@@ -0,0 +1,67 @@
+/**
+ * @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 CharacterGridView from '../../src/ui/charactergridview';
+import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+
+describe.only( 'CharacterGridView', () => {
+	let view;
+
+	testUtils.createSinonSandbox();
+
+	beforeEach( () => {
+		view = new CharacterGridView();
+		view.render();
+	} );
+
+	afterEach( () => {
+		view.destroy();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'creates view#tiles collection', () => {
+			expect( view.tiles ).to.be.instanceOf( ViewCollection );
+		} );
+
+		it( 'creates #element from template', () => {
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
+			expect( view.element.classList.contains( 'ck-character-grid' ) ).to.be.true;
+			expect( view.element.style.gridTemplateColumns ).to.equal( '' );
+		} );
+
+		it( 'supports columns configuration', () => {
+			const view = new CharacterGridView( {}, { columns: 3 } );
+			view.render();
+
+			expect( view.element.style.gridTemplateColumns ).to.be.oneOf( [ '1fr 1fr 1fr', 'repeat(3, 1fr)' ] );
+
+			view.destroy();
+		} );
+	} );
+
+	describe( 'createTile()', () => {
+		it( 'creates a new tile button', () => {
+			const tile = view.createTile( 'ε', 'foo bar baz' );
+
+			expect( tile ).to.be.instanceOf( ButtonView );
+			expect( tile.label ).to.equal( 'ε' );
+			expect( tile.withText ).to.be.true;
+			expect( tile.class ).to.equal( 'ck-character-grid__tile' );
+		} );
+
+		it( 'delegates #execute from the tile to the grid', () => {
+			const tile = view.createTile( 'ε', 'foo bar baz' );
+			const spy = sinon.spy();
+
+			view.on( 'execute', spy );
+			tile.fire( 'execute' );
+
+			sinon.assert.calledOnce( spy );
+			sinon.assert.calledWithExactly( spy, sinon.match.any, { name: 'foo bar baz' } );
+		} );
+	} );
+} );