Skip to content

Commit

Permalink
Merge pull request #6750 from ckeditor/i/6749
Browse files Browse the repository at this point in the history 
Internal (table): Updated table mocking tools to preserve cells' content. Closes #6749.
  • Loading branch information
@jodator
jodator authored May 7, 2020
2 parents b567de4 + 90c69d9 commit e87a95b
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 29 deletions.
44 changes: 22 additions & 22 deletions packages/ckeditor5-table/tests/_utils-tests/table-ascii-art.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ describe( 'table ascii-art and model helpers', () => {
} );

it( 'should create proper ascii-art', () => {
const asciiArt = createTableAsciiArt( table );
const asciiArt = createTableAsciiArt( model, table );

expect( asciiArt ).to.equal( [
'+----+',
Expand All @@ -54,7 +54,7 @@ describe( 'table ascii-art and model helpers', () => {
} );

it( 'should create proper tableData', () => {
const modelData = prepareModelTableInput( table );
const modelData = prepareModelTableInput( model, table );
const modelDataString = prettyFormatModelTableInput( modelData );

expect( modelData ).to.deep.equal( tableData );
Expand All @@ -81,7 +81,7 @@ describe( 'table ascii-art and model helpers', () => {
} );

it( 'should create proper ascii-art', () => {
const asciiArt = createTableAsciiArt( table );
const asciiArt = createTableAsciiArt( model, table );

expect( asciiArt ).to.equal( [
'+----+----+',
Expand All @@ -91,7 +91,7 @@ describe( 'table ascii-art and model helpers', () => {
} );

it( 'should create proper tableData', () => {
const modelData = prepareModelTableInput( table );
const modelData = prepareModelTableInput( model, table );
const modelDataString = prettyFormatModelTableInput( modelData );

expect( modelData ).to.deep.equal( tableData );
Expand Down Expand Up @@ -119,7 +119,7 @@ describe( 'table ascii-art and model helpers', () => {
} );

it( 'should create proper ascii-art', () => {
const asciiArt = createTableAsciiArt( table );
const asciiArt = createTableAsciiArt( model, table );

expect( asciiArt ).to.equal( [
'+----+',
Expand All @@ -131,7 +131,7 @@ describe( 'table ascii-art and model helpers', () => {
} );

it( 'should create proper tableData', () => {
const modelData = prepareModelTableInput( table );
const modelData = prepareModelTableInput( model, table );
const modelDataString = prettyFormatModelTableInput( modelData );

expect( modelData ).to.deep.equal( tableData );
Expand Down Expand Up @@ -160,7 +160,7 @@ describe( 'table ascii-art and model helpers', () => {
} );

it( 'should create proper ascii-art', () => {
const asciiArt = createTableAsciiArt( table );
const asciiArt = createTableAsciiArt( model, table );

expect( asciiArt ).to.equal( [
'+----+----+',
Expand All @@ -172,7 +172,7 @@ describe( 'table ascii-art and model helpers', () => {
} );

it( 'should create proper tableData', () => {
const modelData = prepareModelTableInput( table );
const modelData = prepareModelTableInput( model, table );
const modelDataString = prettyFormatModelTableInput( modelData );

expect( modelData ).to.deep.equal( tableData );
Expand Down Expand Up @@ -203,7 +203,7 @@ describe( 'table ascii-art and model helpers', () => {
} );

it( 'should create proper ascii-art', () => {
const asciiArt = createTableAsciiArt( table );
const asciiArt = createTableAsciiArt( model, table );

expect( asciiArt ).to.equal( [
'+----+----+----+----+',
Expand All @@ -219,7 +219,7 @@ describe( 'table ascii-art and model helpers', () => {
} );

it( 'should create proper tableData', () => {
const modelData = prepareModelTableInput( table );
const modelData = prepareModelTableInput( model, table );
const modelDataString = prettyFormatModelTableInput( modelData );

expect( modelData ).to.deep.equal( tableData );
Expand Down Expand Up @@ -253,7 +253,7 @@ describe( 'table ascii-art and model helpers', () => {
} );

it( 'should create proper ascii-art', () => {
const asciiArt = createTableAsciiArt( table );
const asciiArt = createTableAsciiArt( model, table );

expect( asciiArt ).to.equal( [
'+----+----+----+----+',
Expand All @@ -271,7 +271,7 @@ describe( 'table ascii-art and model helpers', () => {
} );

it( 'should create proper tableData', () => {
const modelData = prepareModelTableInput( table );
const modelData = prepareModelTableInput( model, table );
const modelDataString = prettyFormatModelTableInput( modelData );

expect( modelData ).to.deep.equal( tableData );
Expand All @@ -293,8 +293,8 @@ describe( 'table ascii-art and model helpers', () => {

beforeEach( () => {
tableData = [
[ 'x', 'x' ],
[ 'x', 'x' ]
[ '', 'x' ],
[ '10', 'foobar' ]
];

setModelData( model, modelTable( tableData ) );
Expand All @@ -303,32 +303,32 @@ describe( 'table ascii-art and model helpers', () => {
} );

it( 'should create proper ascii-art', () => {
const asciiArt = createTableAsciiArt( table );
const asciiArt = createTableAsciiArt( model, table );

expect( asciiArt ).to.equal( [
'+----+----+',
'| 00 | 01 |',
'| | x |',
'+----+----+',
'| 10 | 11 |',
'| 10 | fo |',
'+----+----+'
].join( '\n' ) );
} );

it( 'should create proper tableData', () => {
const modelData = prepareModelTableInput( table );
const modelData = prepareModelTableInput( model, table );
const modelDataString = prettyFormatModelTableInput( modelData );

tableData = [
[ '00', '01' ],
[ '10', '11' ]
[ '', 'x' ],
[ '10', 'foobar' ]
];

expect( modelData ).to.deep.equal( tableData );

assertSameCodeString( modelDataString,
`[
[ '00', '01' ],
[ '10', '11' ]
[ '', 'x' ],
[ '10', 'foobar' ]
]`
);
} );
Expand Down
21 changes: 17 additions & 4 deletions packages/ckeditor5-table/tests/_utils/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -493,10 +493,11 @@ function getClassToSet( attributes ) {
/**
* Returns ascii-art visualization of the table.
*
* @param {module:engine/model/model~Model} model The editor model.
* @param {module:engine/model/element~Element} table The table model element.
* @returns {String}
*/
export function createTableAsciiArt( table ) {
export function createTableAsciiArt( model, table ) {
const tableMap = [ ...new TableWalker( table, { includeSpanned: true } ) ];

const { row: lastRow, column: lastColumn } = tableMap[ tableMap.length - 1 ];
Expand Down Expand Up @@ -525,8 +526,11 @@ export function createTableAsciiArt( table ) {
gridLine += !cellInfo.isColSpan || !cellInfo.isRowSpan ? '+' : ' ';
gridLine += !cellInfo.isRowSpan ? '----' : ' ';

let contents = getElementPlainText( model, cellInfo.cell ).substring( 0, 2 );
contents += ' '.repeat( 2 - contents.length );

contentLine += !cellInfo.isColSpan ? '|' : ' ';
contentLine += !cellInfo.isColSpan && !cellInfo.isRowSpan ? ` ${ cellInfo.row }${ cellInfo.column } ` : ' ';
contentLine += !cellInfo.isColSpan && !cellInfo.isRowSpan ? ` ${ contents } ` : ' ';

if ( column == lastColumn ) {
gridLine += '+';
Expand All @@ -547,10 +551,11 @@ export function createTableAsciiArt( table ) {
/**
* Generates input data for `modelTable` helper method.
*
* @param {module:engine/model/model~Model} model The editor model.
* @param {module:engine/model/element~Element} table The table model element.
* @returns {Array.<Array.<String|Object>>}
*/
export function prepareModelTableInput( table ) {
export function prepareModelTableInput( model, table ) {
const result = [];
let row = [];

Expand All @@ -564,7 +569,7 @@ export function prepareModelTableInput( table ) {
continue;
}

const contents = `${ cellInfo.row }${ cellInfo.column }`;
const contents = getElementPlainText( model, cellInfo.cell );

if ( cellInfo.colspan > 1 || cellInfo.rowspan > 1 ) {
row.push( {
Expand Down Expand Up @@ -607,3 +612,11 @@ export function prettyFormatModelTableInput( data ) {

return `[\n${ rowsStringified.join( ',\n' ) }\n]`;
}

// Returns all the text content from element.
function getElementPlainText( model, element ) {
return [ ...model.createRangeIn( element ).getWalker() ]
.filter( ( { type } ) => type == 'text' )
.map( ( { item: { data } } ) => data )
.join( '' );
}
1 change: 1 addition & 0 deletions packages/ckeditor5-table/tests/manual/tablemocking.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
<button type="button" id="clear-content">Clear editor</button>
<button type="button" id="set-model-data">↓ Set model data ↓</button>
<button type="button" id="get-model-data">↑ Get model data ↑</button>
<button type="button" id="renumber-cells">Renumber cells</button>

<span id="input-status"></span>
</div>
Expand Down
24 changes: 21 additions & 3 deletions packages/ckeditor5-table/tests/manual/tablemocking.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-util

import { diffString } from 'json-diff';
import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
import TableWalker from '../../src/tablewalker';

ClassicEditor
.create( document.querySelector( '#editor' ), {
Expand Down Expand Up @@ -44,7 +45,24 @@ ClassicEditor
updateInputStatus();

const table = findTable( editor );
modelData.value = table ? prettyFormatModelTableInput( prepareModelTableInput( table ) ) : '';
modelData.value = table ? prettyFormatModelTableInput( prepareModelTableInput( editor.model, table ) ) : '';

updateAsciiAndDiff();
} );

document.getElementById( 'renumber-cells' ).addEventListener( 'click', () => {
const table = findTable( editor );

if ( !table ) {
return;
}

editor.model.change( writer => {
for ( const { row, column, cell } of new TableWalker( table ) ) {
const selection = editor.model.createSelection( cell, 'in' );
editor.model.insertContent( writer.createText( `${ row }${ column }` ), selection );
}
} );

updateAsciiAndDiff();
} );
Expand All @@ -61,7 +79,7 @@ ClassicEditor
}

const inputModelData = parseModelData( modelData.value );
const currentModelData = prepareModelTableInput( table );
const currentModelData = prepareModelTableInput( editor.model, table );

const diffOutput = inputModelData ? diffString( inputModelData, currentModelData, {
theme: {
Expand All @@ -71,7 +89,7 @@ ClassicEditor
}
} ) : '-- no input --';

asciiOut.innerHTML = createTableAsciiArt( table ) + '\n\n' +
asciiOut.innerHTML = createTableAsciiArt( editor.model, table ) + '\n\n' +
'Diff: input vs post-fixed model:\n' + ( diffOutput ? diffOutput : '-- no differences --' );
}

Expand Down

0 comments on commit e87a95b

Please sign in to comment.