Browse Source

Add bunch of unit tests.

Mateusz Samsel 6 years ago
parent
commit
5c272d8081

+ 7 - 0
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorui.js

@@ -25,4 +25,11 @@ export default class FontBackgroundColorUI extends ColorUI {
 			dropdownLabel: 'Font Background Color'
 		} );
 	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'FontBackgroundColorUI';
+	}
 }

+ 7 - 0
packages/ckeditor5-font/src/fontcolor/fontcolorui.js

@@ -25,4 +25,11 @@ export default class FontColorUI extends ColorUI {
 			dropdownLabel: 'Font Color'
 		} );
 	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'FontColorUI';
+	}
 }

+ 2 - 1
packages/ckeditor5-font/src/utils.js

@@ -96,6 +96,7 @@ function normalizeSingleColorDefinition( color ) {
 		return {
 			model: color,
 			label: color,
+			hasBorder: false,
 			view: {
 				name: 'span',
 				styles: {
@@ -108,7 +109,7 @@ function normalizeSingleColorDefinition( color ) {
 		return {
 			model: color.color,
 			label: color.label || color.color,
-			hasBorder: color.hasBorder,
+			hasBorder: color.hasBorder === undefined ? false : color.hasBorder,
 			view: {
 				name: 'span',
 				styles: {

+ 39 - 1
packages/ckeditor5-font/tests/fontbackgroundcolor/fontbackgroundcolorui.js

@@ -3,11 +3,49 @@
  * For licensing, see LICENSE.md.
  */
 
+/* global document */
+
+import FontBackgroundColorEditing from './../../src/fontbackgroundcolor/fontbackgroundcolorediting';
 import FontBackgroundColorUI from './../../src/fontbackgroundcolor/fontbackgroundcolorui';
 import ColorUI from './../../src/ui/colorui';
 
-describe( 'FontBackgroundColorUI', () => {
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+
+import fontBackgroundColorIcon from '../../theme/icons/font-background.svg';
+
+describe( 'FontBckgroundColorUI', () => {
+	let element, editor;
+
+	beforeEach( () => {
+		element = document.createElement( 'div' );
+		document.body.appendChild( element );
+
+		return ClassicTestEditor
+			.create( element, {
+				plugins: [ FontBackgroundColorEditing, FontBackgroundColorUI ]
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+			} );
+	} );
+
+	afterEach( () => {
+		element.remove();
+
+		return editor.destroy();
+	} );
+
 	it( 'is ColorUI', () => {
 		expect( FontBackgroundColorUI.prototype ).to.be.instanceOf( ColorUI );
 	} );
+
+	it( 'has properly set initial values', () => {
+		const fontBackgroundColorUIPlugin = editor.plugins.get( 'FontBackgroundColorUI' );
+
+		expect( fontBackgroundColorUIPlugin.commandName ).to.equal( 'fontBackgroundColor' );
+		expect( fontBackgroundColorUIPlugin.componentName ).to.equal( 'fontBackgroundColor' );
+		expect( fontBackgroundColorUIPlugin.icon ).to.equal( fontBackgroundColorIcon );
+		expect( fontBackgroundColorUIPlugin.dropdownLabel ).to.equal( 'Font Background Color' );
+		expect( fontBackgroundColorUIPlugin.colorColumns ).to.equal( 5 );
+	} );
 } );

+ 38 - 0
packages/ckeditor5-font/tests/fontcolor/fontcolorui.js

@@ -3,11 +3,49 @@
  * For licensing, see LICENSE.md.
  */
 
+/* global document */
+
+import FontColorEditing from './../../src/fontcolor/fontcolorediting';
 import FontColorUI from './../../src/fontcolor/fontcolorui';
 import ColorUI from './../../src/ui/colorui';
 
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+
+import fontColorIcon from '../../theme/icons/font-color.svg';
+
 describe( 'FontColorUI', () => {
+	let element, editor;
+
+	beforeEach( () => {
+		element = document.createElement( 'div' );
+		document.body.appendChild( element );
+
+		return ClassicTestEditor
+			.create( element, {
+				plugins: [ FontColorEditing, FontColorUI ]
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+			} );
+	} );
+
+	afterEach( () => {
+		element.remove();
+
+		return editor.destroy();
+	} );
+
 	it( 'is ColorUI', () => {
 		expect( FontColorUI.prototype ).to.be.instanceOf( ColorUI );
 	} );
+
+	it( 'has properly set initial values', () => {
+		const fontColorUIPlugin = editor.plugins.get( 'FontColorUI' );
+
+		expect( fontColorUIPlugin.commandName ).to.equal( 'fontColor' );
+		expect( fontColorUIPlugin.componentName ).to.equal( 'fontColor' );
+		expect( fontColorUIPlugin.icon ).to.equal( fontColorIcon );
+		expect( fontColorUIPlugin.dropdownLabel ).to.equal( 'Font Color' );
+		expect( fontColorUIPlugin.colorColumns ).to.equal( 5 );
+	} );
 } );

+ 30 - 0
packages/ckeditor5-font/tests/ui/colortile.js

@@ -0,0 +1,30 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import ColorTile from './../../src/ui/colortile';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+
+describe( 'ColorTile', () => {
+	it( 'inhertence from ButtonView', () => {
+		const colorTile = new ColorTile();
+		expect( colorTile ).to.be.instanceOf( ButtonView );
+	} );
+
+	it( 'has proper attributes and classes', () => {
+		const colorTile = new ColorTile();
+		colorTile.render();
+		expect( colorTile.color ).to.be.undefined;
+		expect( colorTile.hasBorder ).to.be.undefined;
+
+		colorTile.set( 'color', 'green' );
+		expect( colorTile.color ).to.equal( 'green' );
+		expect( colorTile.element.style.backgroundColor ).to.equal( 'green' );
+		expect( colorTile.element.classList.contains( 'ck-color-table__color-tile' ) ).to.be.true;
+		expect( colorTile.element.classList.contains( 'ck-color-table__color-tile_bordered' ) ).to.be.false;
+
+		colorTile.set( 'hasBorder', true );
+		expect( colorTile.element.classList.contains( 'ck-color-table__color-tile_bordered' ) ).to.be.true;
+	} );
+} );

+ 126 - 0
packages/ckeditor5-font/tests/utils.js

@@ -0,0 +1,126 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { FONT_COLOR, FONT_BACKGROUND_COLOR, normalizeOptions, addColorsToDropdown } from './../src/utils';
+import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+import ColorTableView from './../src/ui/colortableview';
+
+describe( 'utils', () => {
+	describe( 'color and background color related', () => {
+		it( 'plugin names has proper values', () => {
+			expect( FONT_COLOR ).to.equal( 'fontColor' );
+			expect( FONT_BACKGROUND_COLOR ).to.equal( 'fontBackgroundColor' );
+		} );
+
+		it( 'normalizeOptions can produce the same output object', () => {
+			const normalizedArray = normalizeOptions( [
+				'black',
+				{
+					color: 'black'
+				}, {
+					color: 'black',
+					label: 'Black'
+				}, {
+					color: 'black',
+					label: 'Black',
+					hasBorder: true
+				}, {
+					color: 'black',
+					hasBorder: true
+				}
+			] );
+
+			expect( normalizedArray ).to.deep.equal( [
+				{
+					model: 'black',
+					label: 'black',
+					hasBorder: false,
+					view: {
+						name: 'span',
+						styles: {
+							color: 'black'
+						},
+						priority: 5
+					}
+				}, {
+					model: 'black',
+					label: 'black',
+					hasBorder: false,
+					view: {
+						name: 'span',
+						styles: {
+							color: 'black'
+						},
+						priority: 5
+					}
+				}, {
+					model: 'black',
+					label: 'Black',
+					hasBorder: false,
+					view: {
+						name: 'span',
+						styles: {
+							color: 'black'
+						},
+						priority: 5
+					}
+				},
+				{
+					model: 'black',
+					label: 'Black',
+					hasBorder: true,
+					view: {
+						name: 'span',
+						styles: {
+							color: 'black'
+						},
+						priority: 5
+					}
+				},
+				{
+					model: 'black',
+					label: 'black',
+					hasBorder: true,
+					view: {
+						name: 'span',
+						styles: {
+							color: 'black'
+						},
+						priority: 5
+					}
+				},
+			] );
+		} );
+
+		it( 'adding colors table to dropdown works', () => {
+			const dropdown = createDropdown();
+			dropdown.render();
+
+			addColorsToDropdown( {
+				dropdownView: dropdown,
+				colors: [
+					{
+						label: 'Black',
+						color: '#000',
+						options: {
+							hasBorder: false
+						}
+					}, {
+						label: 'White',
+						color: '#FFFFFF',
+						options: {
+							hasBorder: true
+						}
+					}
+				],
+				colorColumns: 2,
+				removeButtonTooltip: 'Remove Color'
+			} );
+
+			expect( dropdown.colorTableView ).to.be.instanceOf( ColorTableView );
+			expect( dropdown.panelView.children.length ).to.equal( 1 );
+		} );
+	} );
+} );