8
0
Pārlūkot izejas kodu

Add table border color command tests.

Maciej Gołaszewski 5 gadi atpakaļ
vecāks
revīzija
310c980126

+ 3 - 4
packages/ckeditor5-table/src/tableproperties/commands/tablebordercolorcommand.js

@@ -39,7 +39,7 @@ export default class TableBorderColorCommand extends Command {
 		const editor = this.editor;
 		const selection = editor.model.document.selection;
 
-		const table = Array.from( selection.getSelectedBlocks() ).find( block => block.is( 'table' ) );
+		const table = findAncestor( 'table', selection.getFirstPosition() );
 
 		this.isEnabled = !!table;
 		this.value = this._getValue( table );
@@ -65,12 +65,12 @@ export default class TableBorderColorCommand extends Command {
 		const model = this.editor.model;
 		const selection = model.document.selection;
 
-		const { value } = options;
+		const { value, batch } = options;
 
 		const tables = Array.from( selection.getSelectedBlocks() )
 			.map( element => findAncestor( 'table', model.createPositionAt( element, 0 ) ) );
 
-		model.change( writer => {
+		model.enqueueChange( batch || 'default', writer => {
 			if ( value ) {
 				tables.forEach( table => writer.setAttribute( this.attributeName, value, table ) );
 			} else {
@@ -79,4 +79,3 @@ export default class TableBorderColorCommand extends Command {
 		} );
 	}
 }
-

+ 31 - 0
packages/ckeditor5-table/tests/_utils/utils.js

@@ -89,6 +89,37 @@ export function setTableCellWithObjectAttributes( model, attributes, cellContent
 }
 
 /**
+ * Helper method for creating a test table, with a single table cell, which attributes might be objects.
+ *
+ *		setTableWithObjectAttributes(
+ *			model,
+ *			{
+ *				borderColor: { top: '#f00', left: '#ba2' }
+ *				backgroundColor: '#f00'
+ *			},
+ *			'fo[o]'
+ *		);
+ *
+ * This will create a model table with one table cell with a "foo" text. Selection will be set on last "o" and a table will have three
+ * attributes.
+ *
+ * @param {module:engine/model/model~Model} model
+ * @param {Object} attributes
+ * @param {String} cellContent
+ */
+export function setTableWithObjectAttributes( model, attributes, cellContent ) {
+	setData( model, modelTable( [ [ { contents: cellContent } ] ] ) );
+
+	const table = model.document.getRoot().getChild( 0 );
+
+	model.change( writer => {
+		for ( const [ key, value ] of Object.entries( attributes ) ) {
+			writer.setAttribute( key, value, table );
+		}
+	} );
+}
+
+/**
  * Returns a view representation of a table shorthand notation:
  *
  *		viewTable( [

+ 178 - 0
packages/ckeditor5-table/tests/tableproperties/commands/tablebordercolorcommand.js

@@ -0,0 +1,178 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import ModelTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/modeltesteditor';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+
+import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+
+import { assertTableStyle, modelTable, setTableWithObjectAttributes } from '../../_utils/utils';
+import TablePropertiesEditing from '../../../src/tableproperties/tablepropertiesediting';
+import TableBorderColorCommand from '../../../src/tableproperties/commands/tablebordercolorcommand';
+
+describe( 'table properties', () => {
+	describe( 'commands', () => {
+		describe( 'TableBorderColorCommand', () => {
+			let editor, model, command;
+
+			beforeEach( async () => {
+				editor = await ModelTestEditor.create( {
+					plugins: [ Paragraph, TablePropertiesEditing ]
+				} );
+
+				model = editor.model;
+				command = new TableBorderColorCommand( editor );
+			} );
+
+			afterEach( () => {
+				return editor.destroy();
+			} );
+
+			describe( 'isEnabled', () => {
+				describe( 'collapsed selection', () => {
+					it( 'should be false if selection does not have table', () => {
+						setData( model, '<paragraph>foo[]</paragraph>' );
+						expect( command.isEnabled ).to.be.false;
+					} );
+
+					it( 'should be true is selection has table', () => {
+						setData( model, modelTable( [ [ '[]foo' ] ] ) );
+						expect( command.isEnabled ).to.be.true;
+					} );
+				} );
+
+				describe( 'non-collapsed selection', () => {
+					it( 'should be false if selection does not have table', () => {
+						setData( model, '<paragraph>f[oo]</paragraph>' );
+						expect( command.isEnabled ).to.be.false;
+					} );
+
+					it( 'should be true is selection has table', () => {
+						setData( model, modelTable( [ [ 'f[o]o' ] ] ) );
+						expect( command.isEnabled ).to.be.true;
+					} );
+				} );
+			} );
+
+			describe( 'value', () => {
+				describe( 'collapsed selection', () => {
+					it( 'should be undefined if selected table has no borderColor property', () => {
+						setData( model, modelTable( [ [ '[]foo' ] ] ) );
+
+						expect( command.value ).to.be.undefined;
+					} );
+
+					it( 'should be set if selected table has borderColor property (single string)', () => {
+						setData( model, modelTable( [ [ '[]foo' ] ], { borderColor: 'blue' } ) );
+
+						expect( command.value ).to.equal( 'blue' );
+					} );
+
+					it( 'should be set if selected table has borderColor property object with same values', () => {
+						setTableWithObjectAttributes( model, {
+							borderColor: {
+								top: 'blue',
+								right: 'blue',
+								bottom: 'blue',
+								left: 'blue'
+							}
+						}, '[]foo' );
+						expect( command.value ).to.equal( 'blue' );
+					} );
+
+					it( 'should be undefined if selected table has borderColor property object with different values', () => {
+						setTableWithObjectAttributes( model, {
+							borderColor: {
+								top: 'blue',
+								right: 'red',
+								bottom: 'blue',
+								left: 'blue'
+							}
+						}, '[]foo' );
+
+						expect( command.value ).to.be.undefined;
+					} );
+				} );
+
+				describe( 'non-collapsed selection', () => {
+					it( 'should be false if selection does not have table', () => {
+						setData( model, '<paragraph>f[oo]</paragraph>' );
+
+						expect( command.value ).to.be.undefined;
+					} );
+
+					it( 'should be true is selection has table', () => {
+						setData( model, modelTable( [ [ 'f[o]o' ] ], { borderColor: 'blue' } ) );
+
+						expect( command.value ).to.equal( 'blue' );
+					} );
+				} );
+			} );
+
+			describe( 'execute()', () => {
+				it( 'should use provided batch', () => {
+					setData( model, modelTable( [ [ 'foo[]' ] ] ) );
+					const batch = model.createBatch();
+					const spy = sinon.spy( model, 'enqueueChange' );
+
+					command.execute( { value: '#f00', batch } );
+					sinon.assert.calledWith( spy, batch );
+				} );
+
+				describe( 'collapsed selection', () => {
+					it( 'should set selected table borderColor to a passed value', () => {
+						setData( model, modelTable( [ [ 'foo[]' ] ] ) );
+
+						command.execute( { value: '#f00' } );
+
+						assertTableStyle( editor, 'border-bottom:#f00;border-left:#f00;border-right:#f00;border-top:#f00;' );
+					} );
+
+					it( 'should change selected table borderColor to a passed value', () => {
+						setData( model, modelTable( [ [ '[]foo' ] ], { borderColor: 'blue' } ) );
+
+						command.execute( { value: '#f00' } );
+
+						assertTableStyle( editor, 'border-bottom:#f00;border-left:#f00;border-right:#f00;border-top:#f00;' );
+					} );
+
+					it( 'should remove borderColor from a selected table if no value is passed', () => {
+						setData( model, modelTable( [ [ '[]foo' ] ], { borderColor: 'blue' } ) );
+
+						command.execute();
+
+						assertTableStyle( editor, '' );
+					} );
+				} );
+
+				describe( 'non-collapsed selection', () => {
+					it( 'should set selected table borderColor to a passed value', () => {
+						setData( model, modelTable( [ [ '[foo]' ] ] ) );
+
+						command.execute( { value: '#f00' } );
+
+						assertTableStyle( editor, 'border-bottom:#f00;border-left:#f00;border-right:#f00;border-top:#f00;' );
+					} );
+
+					it( 'should change selected table borderColor to a passed value', () => {
+						setData( model, modelTable( [ [ '[foo]' ] ] ) );
+
+						command.execute( { value: '#f00' } );
+
+						assertTableStyle( editor, 'border-bottom:#f00;border-left:#f00;border-right:#f00;border-top:#f00;' );
+					} );
+
+					it( 'should remove borderColor from a selected table if no value is passed', () => {
+						setData( model, modelTable( [ [ '[foo]' ] ] ) );
+
+						command.execute();
+
+						assertTableStyle( editor, '' );
+					} );
+				} );
+			} );
+		} );
+	} );
+} );