浏览代码

Add some base unit test.

Mateusz Samsel 6 年之前
父节点
当前提交
9bfdc9b500

+ 237 - 0
packages/ckeditor5-font/tests/fontbackgroundcolor/fontbackgroundcoloreditng.js

@@ -0,0 +1,237 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import FontBackgroundColorEditing from './../../src/fontbackgroundcolor/fontbackgroundcolorediting';
+
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+
+import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
+import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+
+describe( 'FontBackgroundColorEditing', () => {
+	let editor, doc;
+
+	beforeEach( () => VirtualTestEditor
+		.create( {
+			plugins: [ FontBackgroundColorEditing, Paragraph ]
+		} )
+		.then( newEditor => {
+			editor = newEditor;
+
+			doc = editor.document;
+		} )
+	);
+
+	afterEach( () => {
+		editor.destroy();
+	} );
+
+	it( 'should set proper schema rules', () => {
+		expect( editor.model.schema.checkAttribute( [ '$block', '$text' ], 'fontBackgroundColor' ) ).to.be.true;
+		expect( editor.model.schema.checkAttribute( [ '$clipboardHolder', '$text' ], 'fontBackgroundColor' ) ).to.be.true;
+
+		expect( editor.model.schema.checkAttribute( [ '$block' ], 'fontBackgroundColor' ) ).to.be.false;
+	} );
+
+	describe( 'config', () => {
+		describe( 'default value', () => {
+			it( 'should be set', () => {
+				expect( editor.config.get( 'fontBackgroundColor.colors' ) ).to.deep.equal( [
+					{
+						color: 'hsl(0, 0%, 0%)',
+						label: 'Black'
+					}, {
+						color: 'hsl(0, 0%, 30%)',
+						label: 'Dim grey'
+					}, {
+						color: 'hsl(0, 0%, 60%)',
+						label: 'Grey'
+					}, {
+						color: 'hsl(0, 0%, 90%)',
+						label: 'Light grey'
+					}, {
+						color: 'hsl(0, 0%, 100%)',
+						label: 'White',
+						hasBorder: true
+					}, {
+						color: 'hsl(0, 75%, 60%)',
+						label: 'Red'
+					}, {
+						color: 'hsl(30, 75%, 60%)',
+						label: 'Orange'
+					}, {
+						color: 'hsl(60, 75%, 60%)',
+						label: 'Yellow'
+					}, {
+						color: 'hsl(90, 75%, 60%)',
+						label: 'Light green'
+					}, {
+						color: 'hsl(120, 75%, 60%)',
+						label: 'Green'
+					}, {
+						color: 'hsl(150, 75%, 60%)',
+						label: 'Aquamarine'
+					}, {
+						color: 'hsl(180, 75%, 60%)',
+						label: 'Turquoise'
+					}, {
+						color: 'hsl(210, 75%, 60%)',
+						label: 'Light blue'
+					}, {
+						color: 'hsl(240, 75%, 60%)',
+						label: 'Blue'
+					}, {
+						color: 'hsl(270, 75%, 60%)',
+						label: 'Purple'
+					}
+				] );
+				expect( editor.config.get( 'fontBackgroundColor.columns' ) ).to.equal( 5 );
+			} );
+		} );
+	} );
+
+	describe( 'editing pipeline conversion', () => {
+		beforeEach( () => VirtualTestEditor
+			.create( {
+				plugins: [ FontBackgroundColorEditing, Paragraph ],
+				fontBackgroundColor: {
+					colors: [
+						{
+							label: 'Color1',
+							color: '#000'
+						}, {
+							label: 'Color2',
+							color: '#123456'
+						}, {
+							label: 'Color3',
+							color: 'rgb( 0, 10, 20 )'
+						},
+						'hsl( 200,100%,50%)',
+						{
+							label: 'Color5 - Light Green',
+							color: 'lightgreen'
+						}
+					]
+				}
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+				doc = editor.model;
+			} )
+		);
+
+		describe( 'convert different color version', () => {
+			const tests = [
+				'#000',
+				'green',
+				'rgb( 0, 10, 20 )',
+				'rgba( 20, 30, 50, 0.4)',
+				'hsl( 10, 20%, 30%)',
+				'hsla( 300, 50%, 100%, .3)',
+				'rgb( 20%, 30%, 40% )',
+				'#345678'
+			];
+			tests.forEach( test => {
+				it( `should convert fontBackgroundColor attribute: "${ test }" to proper style value.`, () => {
+					setModelData( doc, `<paragraph>fo<$text fontBackgroundColor="${ test }">o b</$text>ar</paragraph>` );
+
+					expect( editor.getData() ).to.equal( `<p>fo<span style="background-color:${ test };">o b</span>ar</p>` );
+				} );
+			} );
+		} );
+	} );
+
+	describe( 'data pipeline conversions', () => {
+		beforeEach( () => {
+			return VirtualTestEditor
+				.create( {
+					plugins: [ FontBackgroundColorEditing, Paragraph ],
+					fontBackgroundColor: {
+						colors: [
+							{
+								label: 'Color1',
+								color: '#000'
+							}, {
+								label: 'Color2',
+								color: '#123456'
+							}, {
+								label: 'Color3',
+								color: 'rgb( 0, 10, 20 )'
+							},
+							'hsl( 200,100%,50%)',
+							{
+								label: 'Color5 - Light Green',
+								color: 'lightgreen'
+							}
+						]
+					}
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+
+					doc = editor.model;
+				} );
+		} );
+
+		it( 'should convert from element with defined style when with other styles', () => {
+			const data = '<p>f<span style="font-size: 18px;background-color: rgb(10, 20, 30);">o</span>o</p>';
+
+			editor.setData( data );
+
+			expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontBackgroundColor="rgb(10,20,30)">o</$text>o</paragraph>' );
+
+			expect( editor.getData() ).to.equal( '<p>f<span style="background-color:rgb(10,20,30);">o</span>o</p>' );
+		} );
+
+		describe( 'should convert from different color versions', () => {
+			const tests = [
+				'#000',
+				'green',
+				'rgb( 0, 10, 20 )',
+				'rgba( 20, 30, 50, 0.4)',
+				'hsl( 10, 20%, 30%)',
+				'hsla( 300, 50%, 100%, .3)',
+				'rgb( 20%, 30%, 40% )',
+				'#345678'
+			];
+
+			tests.forEach( test => {
+				it( `should convert fontBackgroundColor attribute: "${ test }" to proper style value.`, () => {
+					const data = `<p>f<span style="background-color: ${ test }">o</span>o</p>`;
+					editor.setData( data );
+
+					expect( getModelData( doc ) )
+						.to.equal( `<paragraph>[]f<$text fontBackgroundColor="${ test.replace( / /g, '' ) }">o</$text>o</paragraph>` );
+
+					expect( editor.getData() )
+						.to.equal( `<p>f<span style="background-color:${ test.replace( / /g, '' ) };">o</span>o</p>` );
+				} );
+			} );
+		} );
+
+		it( 'should convert from complex definition', () => {
+			editor.setData(
+				'<p>f<span style="background-color: lightgreen;">o</span>o</p>' +
+				'<p>f<span style="background-color: hsl( 200, 100%, 50% );">o</span>o</p>' +
+				'<p>b<span style="background-color: rgba(1,2,3,.4);">a</span>r</p>' +
+				'<p>b<span style="background-color:#fff;">a</span>z</p>'
+			);
+
+			expect( getModelData( doc ) ).to.equal(
+				'<paragraph>[]f<$text fontBackgroundColor="lightgreen">o</$text>o</paragraph>' +
+				'<paragraph>f<$text fontBackgroundColor="hsl(200,100%,50%)">o</$text>o</paragraph>' +
+				'<paragraph>b<$text fontBackgroundColor="rgba(1,2,3,.4)">a</$text>r</paragraph>' +
+				'<paragraph>b<$text fontBackgroundColor="#fff">a</$text>z</paragraph>'
+			);
+
+			expect( editor.getData() ).to.equal(
+				'<p>f<span style="background-color:lightgreen;">o</span>o</p>' +
+				'<p>f<span style="background-color:hsl(200,100%,50%);">o</span>o</p>' +
+				'<p>b<span style="background-color:rgba(1,2,3,.4);">a</span>r</p>' +
+				'<p>b<span style="background-color:#fff;">a</span>z</p>'
+			);
+		} );
+	} );
+} );

+ 13 - 0
packages/ckeditor5-font/tests/fontbackgroundcolor/fontbackgroundcolorui.js

@@ -0,0 +1,13 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import FontBackgroundColorUI from './../../src/fontbackgroundcolor/fontbackgroundcolorui';
+import ColorUI from './../../src/ui/colorui';
+
+describe( 'FontBackgroundColorUI', () => {
+	it( 'is ColorUI', () => {
+		expect( FontBackgroundColorUI.prototype ).to.be.instanceOf( ColorUI );
+	} );
+} );

+ 1 - 0
packages/ckeditor5-font/tests/fontcolor/fontcolorediting.js

@@ -87,6 +87,7 @@ describe( 'FontColorEditing', () => {
 						label: 'Purple'
 					}
 				] );
+				expect( editor.config.get( 'fontColor.columns' ) ).to.equal( 5 );
 			} );
 		} );
 	} );

+ 4 - 179
packages/ckeditor5-font/tests/fontcolor/fontcolorui.js

@@ -3,186 +3,11 @@
  * For licensing, see LICENSE.md.
  */
 
-/* global document */
-
-import FontColorEditing from '../../src/fontcolor/fontcolorediting';
-import FontColorUI from '../../src/fontcolor/fontcolorui';
-
-import fontColorIcon from '../../theme/icons/font-color.svg';
-
-import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
-import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
-import { add as addTranslations, _clear as clearTranslations } from '@ckeditor/ckeditor5-utils/src/translation-service';
+import FontColorUI from './../../src/fontcolor/fontcolorui';
+import ColorUI from './../../src/ui/colorui';
 
 describe( 'FontColorUI', () => {
-	let editor, command, element;
-
-	testUtils.createSinonSandbox();
-
-	before( () => {
-		addTranslations( 'en', {
-			'Font Color': 'Font Color',
-			'Remove color': 'Remove text color',
-			'Black': 'Black',
-			'White': 'White',
-			'Red': 'Red',
-			'Orange': 'Orange',
-			'Blue': 'Blue',
-			'Green': 'Green'
-		} );
-
-		addTranslations( 'pl', {
-			'Font Color': 'Kolor czcionki',
-			'Remove color': 'Usuń kolor',
-			'Black': 'Czarny',
-			'White': 'Biały',
-			'Red': 'Czerwony',
-			'Orange': 'Pomarańczowy',
-			'Blue': 'Niebieski',
-			'Green': 'Zielony',
-			'Yellow': 'Żółty'
-		} );
-	} );
-
-	after( () => {
-		clearTranslations();
-	} );
-
-	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();
-	} );
-
-	describe( 'fontColor Dropdown', () => {
-		let dropdown;
-
-		beforeEach( () => {
-			command = editor.commands.get( 'fontColor' );
-			dropdown = editor.ui.componentFactory.create( 'fontColor' );
-		} );
-
-		it( 'button has the base properties', () => {
-			const button = dropdown.buttonView;
-
-			expect( button ).to.have.property( 'label', 'Font Color' );
-			expect( button ).to.have.property( 'tooltip', true );
-			expect( button ).to.have.property( 'icon', fontColorIcon );
-		} );
-
-		it( 'should add custom CSS class to dropdown', () => {
-			const dropdown = editor.ui.componentFactory.create( 'fontColor' );
-
-			dropdown.render();
-
-			expect( dropdown.element.classList.contains( 'ck-font-color-dropdown' ) ).to.be.true;
-		} );
-
-		it( 'should focus view after command execution from dropdown', () => {
-			const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
-			const dropdown = editor.ui.componentFactory.create( 'fontColor' );
-
-			dropdown.commandName = 'fontColor';
-			dropdown.fire( 'execute', { value: null } );
-
-			sinon.assert.calledOnce( focusSpy );
-		} );
-
-		describe( 'model to command binding', () => {
-			it( 'isEnabled', () => {
-				command.isEnabled = false;
-
-				expect( dropdown.buttonView.isEnabled ).to.be.false;
-
-				command.isEnabled = true;
-				expect( dropdown.buttonView.isEnabled ).to.be.true;
-			} );
-		} );
-
-		describe( 'localization', () => {
-			beforeEach( () => {
-				return localizedEditor();
-			} );
-
-			it( 'works for the #buttonView', () => {
-				const buttonView = dropdown.buttonView;
-
-				expect( buttonView.label ).to.equal( 'Kolor czcionki' );
-			} );
-
-			it( 'works for the colorTableView#items in the panel', () => {
-				const colorTableView = dropdown.colorTableView;
-				expect( colorTableView.removeButtonTooltip ).to.equal( 'Usuń kolor' );
-				expect( colorTableView.items.first.label ).to.equal( 'Usuń kolor' );
-			} );
-
-			describe( 'works for', () => {
-				const colors = [
-					{
-						color: 'hsl(0, 0%, 0%)',
-						label: 'Czarny'
-					}, {
-						color: 'hsl(0, 0%, 100%)',
-						label: 'Biały'
-					}, {
-						color: 'hsl(0, 75%, 60%)',
-						label: 'Czerwony'
-					}, {
-						color: 'hsl(30, 75%, 60%)',
-						label: 'Pomarańczowy'
-					}, {
-						color: 'hsl(240, 75%, 60%)',
-						label: 'Niebieski'
-					}, {
-						color: 'hsl(120, 75%, 60%)',
-						label: 'Zielony'
-					}, {
-						color: 'hsl(60, 75%, 60%)',
-						label: 'Żółty'
-					}
-				];
-
-				colors.forEach( test => {
-					it( `tested color ${ test.color } with name ${ test.label }.`, () => {
-						const colorGrid = dropdown.colorTableView.items.get( 1 );
-						const tile = colorGrid.items.find( colorTile => test.color === colorTile.color );
-						expect( tile.label ).to.equal( test.label );
-					} );
-				} );
-			} );
-			function localizedEditor() {
-				const editorElement = document.createElement( 'div' );
-				document.body.appendChild( editorElement );
-
-				return ClassicTestEditor
-					.create( editorElement, {
-						plugins: [ FontColorEditing, FontColorUI ],
-						toolbar: [ 'fontColor' ],
-						language: 'pl',
-					} )
-					.then( newEditor => {
-						editor = newEditor;
-						dropdown = editor.ui.componentFactory.create( 'fontColor' );
-						command = editor.commands.get( 'fontColor' );
-
-						editorElement.remove();
-
-						return editor.destroy();
-					} );
-			}
-		} );
+	it( 'is ColorUI', () => {
+		expect( FontColorUI.prototype ).to.be.instanceOf( ColorUI );
 	} );
 } );