Skip to content

Commit

Permalink
add tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@BryanValverdeU
BryanValverdeU committed Oct 1, 2024
1 parent 8d69b03 commit 9c7fe96
Show file tree
Hide file tree
Showing 5 changed files with 183 additions and 5 deletions.
2 changes: 1 addition & 1 deletion packages/roosterjs-content-model-dom/lib/formatHandlers/block/paddingFormatHandler.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export const paddingFormatHandler: FormatHandler<PaddingFormat & DirectionFormat
}

PaddingKeys.forEach(key => {
let value = format[key];
const value = format[key];
let defaultValue: string | undefined = undefined;

if (isList) {
Expand Down
5 changes: 2 additions & 3 deletions packages/roosterjs-content-model-dom/lib/formatHandlers/table/tableSpacingFormatHandler.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { isElementOfType } from '../../domUtils/isElementOfType';
import type { FormatHandler } from '../FormatHandler';
import type { SpacingFormat } from 'roosterjs-content-model-types';

Expand Down Expand Up @@ -48,8 +47,8 @@ export const tableSpacingFormatHandler: FormatHandler<SpacingFormat> = {
element.style.borderSpacing = cellSpacing;
}

if (format.cellPadding && isElementOfType(element, 'table')) {
element.cellPadding = format.cellPadding;
if (format.cellPadding) {
element.setAttribute(CellPadding, format.cellPadding);
}
},
};
84 changes: 84 additions & 0 deletions packages/roosterjs-content-model-dom/test/formatHandlers/block/paddingFormatHandlerTest.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,4 +219,88 @@ describe('paddingFormatHandler.apply', () => {

expect(ol.outerHTML).toBe('<ol></ol>');
});

it('Table Cell handle padding', () => {
const tableCell = document.createElement('td');

format.paddingBottom = '10px';
format.paddingTop = '10px';
format.paddingLeft = '10px';
format.paddingRight = '10px';

const contextToUse: ModelToDomContext = Object.assign({}, context, <
Partial<ModelToDomContext>
>{
tableFormat: {
alreadyWroteCellPadding: false,
},
});

paddingFormatHandler.apply(format, tableCell, contextToUse);

expect(tableCell.outerHTML).toBe('<td style="padding: 10px;"></td>');
});

it('Table Header handle padding', () => {
const tableCell = document.createElement('th');

format.paddingBottom = '10px';
format.paddingTop = '10px';
format.paddingLeft = '10px';
format.paddingRight = '10px';

const contextToUse: ModelToDomContext = Object.assign({}, context, <
Partial<ModelToDomContext>
>{
tableFormat: {
alreadyWroteCellPadding: false,
},
});

paddingFormatHandler.apply(format, tableCell, contextToUse);

expect(tableCell.outerHTML).toBe('<th style="padding: 10px;"></th>');
});

it('Table Cell handle padding, padding was already applied in table', () => {
const tableCell = document.createElement('td');

format.paddingBottom = '10px';
format.paddingTop = '10px';
format.paddingLeft = '10px';
format.paddingRight = '10px';

const contextToUse: ModelToDomContext = Object.assign({}, context, <
Partial<ModelToDomContext>
>{
tableFormat: {
alreadyWroteCellPadding: true,
},
});

paddingFormatHandler.apply(format, tableCell, contextToUse);

expect(tableCell.outerHTML).toBe('<td></td>');
});

it('Table Header handle padding, padding was already applied in table', () => {
const tableCell = document.createElement('th');

format.paddingBottom = '10px';
format.paddingTop = '10px';
format.paddingLeft = '10px';
format.paddingRight = '10px';

const contextToUse: ModelToDomContext = Object.assign({}, context, <
Partial<ModelToDomContext>
>{
tableFormat: {
alreadyWroteCellPadding: true,
},
});

paddingFormatHandler.apply(format, tableCell, contextToUse);

expect(tableCell.outerHTML).toBe('<th></th>');
});
});
20 changes: 19 additions & 1 deletion ...es/roosterjs-content-model-dom/test/formatHandlers/table/tableSpacingFormatHandlerTest.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,17 @@ describe('tableSpacingFormatHandler.parse', () => {
expect(format).toEqual({ borderSeparate: true });
});

it('Set border collapsed if element contains cellpadding attribute', () => {
it('Set cellpadding attribute', () => {
div.setAttribute('cellPadding', '0');
tableSpacingFormatHandler.parse(format, div, context, {});
expect(format).toEqual({ cellPadding: '0' });
});

it('Set cellspacing attribute', () => {
div.setAttribute('cellSpacing', '0');
tableSpacingFormatHandler.parse(format, div, context, {});
expect(format).toEqual({ cellSpacing: '0' });
});
});

describe('tableSpacingFormatHandler.apply', () => {
Expand Down Expand Up @@ -69,4 +75,16 @@ describe('tableSpacingFormatHandler.apply', () => {
'<div style="border-collapse: separate; border-spacing: 0px; box-sizing: border-box;"></div>'
);
});

it('Set cellpadding attribute', () => {
format.cellPadding = '5';
tableSpacingFormatHandler.apply(format, div, context);
expect(div.outerHTML).toEqual('<div cellpadding="5"></div>');
});

it('Set cellspacing attribute', () => {
format.cellSpacing = '5';
tableSpacingFormatHandler.apply(format, div, context);
expect(div.outerHTML).toEqual('<div style="border-spacing: 5px;"></div>');
});
});
77 changes: 77 additions & 0 deletions packages/roosterjs-content-model-dom/test/modelToDom/handlers/handleTableTest.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
ContentModelTable,
ContentModelTableRow,
ModelToDomContext,
PaddingFormat,
} from 'roosterjs-content-model-types';

describe('handleTable', () => {
Expand Down Expand Up @@ -615,4 +616,80 @@ describe('handleTable', () => {
expect(div.innerHTML).toBe('<table><tbody><tr><td></td></tr></tbody></table>');
expect(onTableSpy).toHaveBeenCalledWith(div.firstChild, tableModel);
});

it('Regular 2 * 2 table + Cellpadding', () => {
const tdModel1 = createTableCell(1, 1, false);
const tdModel2 = createTableCell(1, 1, false);
const tdModel3 = createTableCell(1, 1, false);
const tdModel4 = createTableCell(1, 1, false);
runTest(
{
blockType: 'Table',
rows: [
{ format: {}, height: 0, cells: [tdModel1, tdModel2] },
{ format: {}, height: 0, cells: [tdModel3, tdModel4] },
],
format: {
cellPadding: '10',
},
widths: [],
dataset: {},
},
'<table cellpadding="10"><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody></table>'
);
});

it('Regular 2 * 2 table all cells contains same padding, so change to use cellpadding', () => {
const padding: PaddingFormat = {
paddingBottom: '10px',
paddingLeft: '10px',
paddingRight: '10px',
paddingTop: '10px',
};

const tdModel1 = createTableCell(1, 1, false, padding);
const tdModel2 = createTableCell(1, 1, false, padding);
const tdModel3 = createTableCell(1, 1, false, padding);
const tdModel4 = createTableCell(1, 1, false, padding);
runTest(
{
blockType: 'Table',
rows: [
{ format: {}, height: 0, cells: [tdModel1, tdModel2] },
{ format: {}, height: 0, cells: [tdModel3, tdModel4] },
],
format: {},
widths: [],
dataset: {},
},
'<table cellpadding="10"><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody></table>'
);
});

it('Regular 2 * 2 table all cells do not contain same padding, do not use cell padding', () => {
const padding: PaddingFormat = {
paddingBottom: '10px',
paddingLeft: '10px',
paddingRight: '10px',
paddingTop: '10px',
};

const tdModel1 = createTableCell(1, 1, false, padding);
const tdModel2 = createTableCell(1, 1, false, padding);
const tdModel3 = createTableCell(1, 1, false, padding);
const tdModel4 = createTableCell(1, 1, false, { ...padding, paddingBottom: '11px' });
runTest(
{
blockType: 'Table',
rows: [
{ format: {}, height: 0, cells: [tdModel1, tdModel2] },
{ format: {}, height: 0, cells: [tdModel3, tdModel4] },
],
format: {},
widths: [],
dataset: {},
},
'<table><tbody><tr><td style="padding: 10px;"></td><td style="padding: 10px;"></td></tr><tr><td style="padding: 10px;"></td><td style="padding: 10px 10px 11px;"></td></tr></tbody></table>'
);
});
});

0 comments on commit 9c7fe96

Please sign in to comment.