Ver código fonte

Add table cell background color command tests.

Maciej Gołaszewski 5 anos atrás
pai
commit
648ce11800

+ 2 - 2
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellbackgroundcolorcommand.js

@@ -65,12 +65,12 @@ export default class TableCellBackgroundColorCommand extends Command {
 		const model = this.editor.model;
 		const selection = model.document.selection;
 
-		const { value } = options;
+		const { value, batch } = options;
 
 		const tableCells = Array.from( selection.getSelectedBlocks() )
 			.map( element => findAncestor( 'tableCell', model.createPositionAt( element, 0 ) ) );
 
-		model.change( writer => {
+		model.enqueueChange( batch || 'default', writer => {
 			if ( value ) {
 				tableCells.forEach( tableCell => writer.setAttribute( this.attributeName, value, tableCell ) );
 			} else {

+ 3 - 1
packages/ckeditor5-table/tests/_utils/utils.js

@@ -250,7 +250,9 @@ export function assertTableStyle( editor, tableStyle ) {
  */
 export function assertTableCellStyle( editor, tableCellStyle ) {
 	assertEqualMarkup( editor.getData(),
-		`<figure class="table"><table><tbody><tr><td style="${ tableCellStyle }">foo</td></tr></tbody></table></figure>`
+		'<figure class="table"><table><tbody><tr>' +
+			`<td${ tableCellStyle ? ` style="${ tableCellStyle }"` : '' }>foo</td>` +
+		'</tr></tbody></table></figure>'
 	);
 }
 

+ 153 - 0
packages/ckeditor5-table/tests/tablecellproperties/commands/tablecellbackgroundcolorcommand.js

@@ -0,0 +1,153 @@
+/**
+ * @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 { assertTableCellStyle, modelTable } from '../../_utils/utils';
+import TableCellPropertiesEditing from '../../../src/tablecellproperties/tablecellpropertiesediting';
+import TableCellBackgroundColorCommand from '../../../src/tablecellproperties/commands/tablecellbackgroundcolorcommand';
+
+describe( 'table cell properties', () => {
+	describe( 'commands', () => {
+		describe( 'TableCellBackgroundColorCommand', () => {
+			let editor, model, command;
+
+			beforeEach( async () => {
+				editor = await ModelTestEditor.create( {
+					plugins: [ Paragraph, TableCellPropertiesEditing ]
+				} );
+
+				model = editor.model;
+				command = new TableCellBackgroundColorCommand( editor );
+			} );
+
+			afterEach( () => {
+				return editor.destroy();
+			} );
+
+			describe( 'isEnabled', () => {
+				describe( 'collapsed selection', () => {
+					it( 'should be false if selection does not have table cell', () => {
+						setData( model, '<paragraph>foo[]</paragraph>' );
+						expect( command.isEnabled ).to.be.false;
+					} );
+
+					it( 'should be true is selection has table cell', () => {
+						setData( model, modelTable( [ [ '[]foo' ] ] ) );
+						expect( command.isEnabled ).to.be.true;
+					} );
+				} );
+
+				describe( 'non-collapsed selection', () => {
+					it( 'should be false if selection does not have table cell', () => {
+						setData( model, '<paragraph>f[oo]</paragraph>' );
+						expect( command.isEnabled ).to.be.false;
+					} );
+
+					it( 'should be true is selection has table cell', () => {
+						setData( model, modelTable( [ [ 'f[o]o' ] ] ) );
+						expect( command.isEnabled ).to.be.true;
+					} );
+				} );
+			} );
+
+			describe( 'value', () => {
+				describe( 'collapsed selection', () => {
+					it( 'should be undefined if selected table cell has no backgroundColor property', () => {
+						setData( model, modelTable( [ [ '[]foo' ] ] ) );
+
+						expect( command.value ).to.be.undefined;
+					} );
+
+					it( 'should be set if selected table cell has backgroundColor property', () => {
+						setData( model, modelTable( [ [ { backgroundColor: 'blue', contents: '[]foo' } ] ] ) );
+
+						expect( command.value ).to.equal( 'blue' );
+					} );
+				} );
+
+				describe( 'non-collapsed selection', () => {
+					it( 'should be false if selection does not have table cell', () => {
+						setData( model, '<paragraph>f[oo]</paragraph>' );
+
+						expect( command.value ).to.be.undefined;
+					} );
+
+					it( 'should be true is selection has table cell', () => {
+						setData( model, modelTable( [ [ { backgroundColor: 'blue', contents: 'f[o]o' } ] ] ) );
+
+						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 cell backgroundColor to a passed value', () => {
+						setData( model, modelTable( [ [ 'foo[]' ] ] ) );
+
+						command.execute( { value: '#f00' } );
+
+						assertTableCellStyle( editor, 'background-color:#f00;' );
+					} );
+
+					it( 'should change selected table cell backgroundColor to a passed value', () => {
+						setData( model, modelTable( [ [ { backgroundColor: 'blue', contents: '[]foo' } ] ] ) );
+
+						command.execute( { value: '#f00' } );
+
+						assertTableCellStyle( editor, 'background-color:#f00;' );
+					} );
+
+					it( 'should remove backgroundColor from a selected table cell if no value is passed', () => {
+						setData( model, modelTable( [ [ { backgroundColor: 'blue', contents: '[]foo' } ] ] ) );
+
+						command.execute();
+
+						assertTableCellStyle( editor, '' );
+					} );
+				} );
+
+				describe( 'non-collapsed selection', () => {
+					it( 'should set selected table cell backgroundColor to a passed value', () => {
+						setData( model, modelTable( [ [ '[foo]' ] ] ) );
+
+						command.execute( { value: '#f00' } );
+
+						assertTableCellStyle( editor, 'background-color:#f00;' );
+					} );
+
+					it( 'should change selected table cell backgroundColor to a passed value', () => {
+						setData( model, modelTable( [ [ '[foo]' ] ] ) );
+
+						command.execute( { value: '#f00' } );
+
+						assertTableCellStyle( editor, 'background-color:#f00;' );
+					} );
+
+					it( 'should remove backgroundColor from a selected table cell if no value is passed', () => {
+						setData( model, modelTable( [ [ '[foo]' ] ] ) );
+
+						command.execute();
+
+						assertTableCellStyle( editor, '' );
+					} );
+				} );
+			} );
+		} );
+	} );
+} );