소스 검색

Add basic unit tests for font color.

Mateusz Samsel 6 년 전
부모
커밋
dfe3afd8d2
2개의 변경된 파일324개의 추가작업 그리고 0개의 파일을 삭제
  1. 180 0
      packages/ckeditor5-font/tests/fontcolor/fontcolorediting.js
  2. 144 0
      packages/ckeditor5-font/tests/fontcolor/fontcolorui.js

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

@@ -0,0 +1,180 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import FontColorEditing from './../../src/fontcolor/fontcolorediting';
+
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+
+import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
+import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+
+describe( 'FontColorEditing', () => {
+	let editor, doc;
+
+	beforeEach( () => VirtualTestEditor
+		.create( {
+			plugins: [ FontColorEditing, Paragraph ]
+		} )
+		.then( newEditor => {
+			editor = newEditor;
+
+			doc = editor.document;
+		} )
+	);
+
+	afterEach( () => {
+		editor.destroy();
+	} );
+
+	it( 'should set proper schema rules', () => {
+		expect( editor.model.schema.checkAttribute( [ '$block', '$text' ], 'fontColor' ) ).to.be.true;
+		expect( editor.model.schema.checkAttribute( [ '$clipboardHolder', '$text' ], 'fontColor' ) ).to.be.true;
+
+		expect( editor.model.schema.checkAttribute( [ '$block' ], 'fontColor' ) ).to.be.false;
+	} );
+
+	describe( 'config', () => {
+		describe( 'default value', () => {
+			it( 'should be set', () => {
+				expect( editor.config.get( 'fontColor.options' ) ).to.deep.equal( [
+					{
+						label: 'Strong Cyan',
+						color: '#1ABC9C'
+					},
+					{
+						label: 'Emerald',
+						color: '#2ECC71'
+					},
+					{
+						label: 'Bright Blue',
+						color: '#3498DB'
+					},
+					{
+						label: 'Amethyst',
+						color: '#9B59B6'
+					},
+					{
+						label: 'Grayish Blue',
+						color: '#4E5F70'
+					},
+					{
+						label: 'Vivid Yellow',
+						color: '#F1C40F'
+					},
+					{
+						label: 'Dark Cyan',
+						color: '#16A085'
+					},
+					{
+						label: 'Dark Emerald',
+						color: '#27AE60'
+					},
+					{
+						label: 'Strong Blue',
+						color: '#2980B9'
+					},
+					{
+						label: 'Dark Violet',
+						color: '#8E44AD'
+					},
+					{
+						label: 'Desaturated Blue',
+						color: '#2C3E50'
+					},
+					{
+						label: 'Orange',
+						color: '#F39C12'
+					},
+					{
+						label: 'Carrot',
+						color: '#E67E22'
+					},
+					{
+						label: 'Pale Red',
+						color: '#E74C3C'
+					},
+					{
+						label: 'Bright Silver',
+						color: '#ECF0F1'
+					},
+					{
+						label: 'Light Grayish Cyan',
+						color: '#95A5A6'
+					},
+					{
+						label: 'Light Gray',
+						color: '#DDD'
+					},
+					{
+						label: 'White',
+						color: '#FFF'
+					},
+					{
+						label: 'Pumpkin',
+						color: '#D35400'
+					},
+					{
+						label: 'Strong Red',
+						color: '#C0392B'
+					},
+					{
+						label: 'Silver',
+						color: '#BDC3C7'
+					},
+					{
+						label: 'Grayish Cyan',
+						color: '#7F8C8D'
+					},
+					{
+						label: 'Dark Gray',
+						color: '#999'
+					},
+					{
+						label: 'Black',
+						color: '#000'
+					}
+				] );
+			} );
+		} );
+	} );
+
+	describe( 'editing pipeline conversion', () => {
+		beforeEach( () => VirtualTestEditor
+			.create( {
+				plugins: [ FontColorEditing, Paragraph ],
+				fontColor: {
+					options: [
+						{
+							label: 'Color1',
+							color: '#000'
+						}, {
+							label: 'Color2',
+							color: '#123456'
+						}, {
+							label: 'Color3',
+							color: 'rgb( 0, 10, 20 )'
+						}, {
+							label: 'Color4',
+							color: 'hsl( 200,100%,50%)'
+						}, {
+							label: 'Color5 - Light Green',
+							color: 'lightgreen'
+						}
+					]
+				}
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+				doc = editor.model;
+			} )
+		);
+
+		it( 'should convert fontColor attribute to proper style value.', () => {
+			setModelData( doc, '<paragraph>fo<$text fontColor="#000">o b</$text>ar</paragraph>' );
+
+			expect( editor.getData() ).to.equal( '<p>fo<span style="color:#000;">o b</span>ar</p>' );
+		} );
+	} );
+} );

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

@@ -0,0 +1,144 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * 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-family.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';
+
+describe( 'FontColorUI', () => {
+	let editor, command, element;
+
+	testUtils.createSinonSandbox();
+
+	before( () => {
+		addTranslations( 'en', {
+			'Font Color': 'Font Color',
+			'Remove text color': 'Remove text color'
+		} );
+
+		addTranslations( 'pl', {
+			'Font Color': 'Kolor czcionki',
+			'Remove text color': 'Usuń kolor tekstu'
+		} );
+	} );
+
+	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', () => {
+			const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
+			const dropdown = editor.ui.componentFactory.create( 'fontColor' );
+
+			dropdown.commandName = 'fontColor';
+			dropdown.fire( 'execute' );
+
+			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.items.map( item => item.children.first.label ) ).to.deep.equal( [
+					'Domyślna',
+					'Arial'
+				] );
+			} );
+
+			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();
+					} );
+			}
+		} );
+	} );
+} );