[REF] web_editor: abstract convert to grid tests, remove jquery
This removes calls to JQuery in the convert to grid tests and the functions they test. In the process, these tests are abstracted for better readability and maintainability. closes odoo/odoo#113784 X-original-commit: 3eafc2d3425365bfb25b0540de95aab4e7d89ebf Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This commit is contained in:
Antoine Guenet
@@ -103,10 +103,9 @@ function attachmentThumbnailToLinkImg($editable) {
|
||||
* support the mixing and matching of column options (e.g., "col-4 col-sm-6" and
|
||||
* "col col-4" aren't supported).
|
||||
*
|
||||
* @param {JQuery} $editable
|
||||
* @param {Element} editable
|
||||
*/
|
||||
function bootstrapToTable($editable) {
|
||||
const editable = $editable.get(0);
|
||||
function bootstrapToTable(editable) {
|
||||
// First give all rows in columns a separate container parent.
|
||||
for (const rowInColumn of [...editable.querySelectorAll('.row')].filter(row => RE_COL_MATCH.test(row.parentElement.className))) {
|
||||
const previous = rowInColumn.previousElementSibling;
|
||||
@@ -291,10 +290,9 @@ function bootstrapToTable($editable) {
|
||||
/**
|
||||
* Convert Bootstrap cards to table structures.
|
||||
*
|
||||
* @param {JQuery} $editable
|
||||
* @param {Element} editable
|
||||
*/
|
||||
function cardToTable($editable) {
|
||||
const editable = $editable.get(0);
|
||||
function cardToTable(editable) {
|
||||
for (const card of editable.querySelectorAll('.card')) {
|
||||
const table = _createTable(card.attributes);
|
||||
table.style.removeProperty('overflow');
|
||||
@@ -598,9 +596,9 @@ async function toInline($editable, cssRules, $iframe) {
|
||||
fontToImg($editable);
|
||||
await svgToPng($editable);
|
||||
classToStyle($editable, cssRules);
|
||||
bootstrapToTable($editable);
|
||||
cardToTable($editable);
|
||||
listGroupToTable($editable);
|
||||
bootstrapToTable(editable);
|
||||
cardToTable(editable);
|
||||
listGroupToTable(editable);
|
||||
addTables($editable);
|
||||
normalizeColors($editable);
|
||||
const rootFontSizeProperty = getComputedStyle(editable.ownerDocument.documentElement).fontSize;
|
||||
@@ -931,10 +929,9 @@ function getCSSRules(doc) {
|
||||
/**
|
||||
* Convert Bootstrap list groups and their items to table structures.
|
||||
*
|
||||
* @param {JQuery} $editable
|
||||
* @param {Element} editable
|
||||
*/
|
||||
function listGroupToTable($editable) {
|
||||
const editable = $editable.get(0);
|
||||
function listGroupToTable(editable) {
|
||||
for (const listGroup of editable.querySelectorAll('.list-group')) {
|
||||
let table;
|
||||
if (listGroup.querySelectorAll('.list-group-item').length) {
|
||||
|
||||
@@ -8,9 +8,16 @@ const TEST_HEIGHT = 600;
|
||||
QUnit.module('web_editor', {}, function () {
|
||||
QUnit.module('convert_inline', {}, function () {
|
||||
QUnit.module('Convert Bootstrap grids to tables', {
|
||||
beforeEach: function () {
|
||||
this.$editable = $(`<div style="width: ${TEST_WIDTH}px; height: ${TEST_HEIGHT}px;"/>`);
|
||||
$('#qunit-fixture').append(this.$editable);
|
||||
beforeEach: function (assert) {
|
||||
this.editable = document.createElement('div');
|
||||
this.editable.style.setProperty('width', TEST_WIDTH + 'px');
|
||||
this.editable.style.setProperty('height', TEST_HEIGHT + 'px');
|
||||
document.querySelector('#qunit-fixture').append(this.editable);
|
||||
this.testConvertGrid = ({ before, after, title, stepFunction }) => {
|
||||
this.editable.innerHTML = before;
|
||||
(stepFunction || convertInline.bootstrapToTable)(this.editable);
|
||||
assert.strictEqual(removeComments(this.editable.innerHTML), after, title);
|
||||
}
|
||||
}
|
||||
});
|
||||
// Test bootstrapToTable, cardToTable and listGroupToTable
|
||||
@@ -19,260 +26,275 @@ QUnit.module('convert_inline', {}, function () {
|
||||
assert.expect(4);
|
||||
|
||||
// 1x1
|
||||
this.$editable.html(getRegularGridHtml(1, 1));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()), getRegularTableHtml(1, 1, 12, 100, TEST_WIDTH),
|
||||
"should have converted a 1x1 grid to an equivalent table");
|
||||
this.testConvertGrid({
|
||||
before: getRegularGridHtml(1, 1),
|
||||
after: getRegularTableHtml(1, 1, 12, 100, TEST_WIDTH),
|
||||
title: "should have converted a 1x1 grid to an equivalent table",
|
||||
});
|
||||
|
||||
// 1x2
|
||||
this.$editable.html(getRegularGridHtml(1, 2));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()), getRegularTableHtml(1, 2, 6, 50, TEST_WIDTH),
|
||||
"should have converted a 1x2 grid to an equivalent table");
|
||||
this.testConvertGrid({
|
||||
before: getRegularGridHtml(1, 2),
|
||||
after: getRegularTableHtml(1, 2, 6, 50, TEST_WIDTH),
|
||||
title: "should have converted a 1x2 grid to an equivalent table",
|
||||
});
|
||||
|
||||
// 1x3
|
||||
this.$editable.html(getRegularGridHtml(1, 3));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()), getRegularTableHtml(1, 3, 4, 33.33, TEST_WIDTH),
|
||||
"should have converted a 1x3 grid to an equivalent table");
|
||||
this.testConvertGrid({
|
||||
before: getRegularGridHtml(1, 3),
|
||||
after: getRegularTableHtml(1, 3, 4, 33.33, TEST_WIDTH),
|
||||
title: "should have converted a 1x3 grid to an equivalent table",
|
||||
});
|
||||
|
||||
// 1x12
|
||||
this.$editable.html(getRegularGridHtml(1, 12));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()), getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH),
|
||||
"should have converted a 1x12 grid to an equivalent table");
|
||||
this.testConvertGrid({
|
||||
before: getRegularGridHtml(1, 12),
|
||||
after: getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH),
|
||||
title: "should have converted a 1x12 grid to an equivalent table",
|
||||
});
|
||||
});
|
||||
QUnit.test('convert a single-row regular overflowing grid', async function (assert) {
|
||||
assert.expect(4);
|
||||
|
||||
// 1x13
|
||||
this.$editable.html(getRegularGridHtml(1, 13));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()),
|
||||
getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
|
||||
this.testConvertGrid({
|
||||
before: getRegularGridHtml(1, 13),
|
||||
after: getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
|
||||
`<tr>` +
|
||||
getTdHtml(1, '(0, 12)', TEST_WIDTH) + getTdHtml(11, '', TEST_WIDTH) +
|
||||
`</tr></table>`,
|
||||
"should have converted a 1x13 grid to an equivalent table (overflowing)");
|
||||
title: "should have converted a 1x13 grid to an equivalent table (overflowing)",
|
||||
});
|
||||
|
||||
// 1x14
|
||||
this.$editable.html(getRegularGridHtml(1, 14));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()),
|
||||
getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
|
||||
this.testConvertGrid({
|
||||
before: getRegularGridHtml(1, 14),
|
||||
after: getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
|
||||
`<tr>` +
|
||||
getTdHtml(1, '(0, 12)', TEST_WIDTH) + getTdHtml(1, '(0, 13)', TEST_WIDTH) + getTdHtml(10, '', TEST_WIDTH) +
|
||||
`</tr></table>`,
|
||||
"should have converted a 1x14 grid to an equivalent table (overflowing)");
|
||||
title: "should have converted a 1x14 grid to an equivalent table (overflowing)",
|
||||
});
|
||||
|
||||
// 1x25
|
||||
this.$editable.html(getRegularGridHtml(1, 25));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()),
|
||||
getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
|
||||
getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).replace(/\(0, (\d+)\)/g, (s, c) => `(0, ${+c + 12})`)
|
||||
.replace(/^<table[^<]*>/, '').slice(0, -8) +
|
||||
this.testConvertGrid({
|
||||
before: getRegularGridHtml(1, 25),
|
||||
after: getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
|
||||
getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).replace(/\(0, (\d+)\)/g, (s, c) => `(0, ${+c + 12})`)
|
||||
.replace(/^<table[^<]*>/, '').slice(0, -8) +
|
||||
`<tr>` +
|
||||
getTdHtml(1, '(0, 24)', TEST_WIDTH) + getTdHtml(11, '', TEST_WIDTH) +
|
||||
`</tr></table>`,
|
||||
"should have converted a 1x25 grid to an equivalent table (overflowing)");
|
||||
title: "should have converted a 1x25 grid to an equivalent table (overflowing)",
|
||||
});
|
||||
|
||||
// 1x26
|
||||
this.$editable.html(getRegularGridHtml(1, 26));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()),
|
||||
getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
|
||||
getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).replace(/\(0, (\d+)\)/g, (s, c) => `(0, ${+c + 12})`)
|
||||
.replace(/^<table[^<]*>/, '').slice(0, -8) +
|
||||
this.testConvertGrid({
|
||||
before: getRegularGridHtml(1, 26),
|
||||
after: getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
|
||||
getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).replace(/\(0, (\d+)\)/g, (s, c) => `(0, ${+c + 12})`)
|
||||
.replace(/^<table[^<]*>/, '').slice(0, -8) +
|
||||
`<tr>` +
|
||||
getTdHtml(1, '(0, 24)', TEST_WIDTH) + getTdHtml(1, '(0, 25)', TEST_WIDTH) + getTdHtml(10, '', TEST_WIDTH) +
|
||||
`</tr></table>`,
|
||||
"should have converted a 1x26 grid to an equivalent table (overflowing)");
|
||||
title: "should have converted a 1x26 grid to an equivalent table (overflowing)",
|
||||
});
|
||||
});
|
||||
QUnit.test('convert a multi-row regular grid', async function (assert) {
|
||||
assert.expect(4);
|
||||
|
||||
// 2x1
|
||||
this.$editable.html(getRegularGridHtml(2, 1));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()), getRegularTableHtml(2, 1, 12, 100, TEST_WIDTH),
|
||||
"should have converted a 2x1 grid to an equivalent table");
|
||||
this.testConvertGrid({
|
||||
before: getRegularGridHtml(2, 1),
|
||||
after: getRegularTableHtml(2, 1, 12, 100, TEST_WIDTH),
|
||||
title: "should have converted a 2x1 grid to an equivalent table",
|
||||
});
|
||||
|
||||
// 2x[1,2]
|
||||
this.$editable.html(getRegularGridHtml(2, [1, 2]));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()), getRegularTableHtml(2, [1, 2], [12, 6], [100, 50], TEST_WIDTH),
|
||||
"should have converted a 2x[1,2] grid to an equivalent table");
|
||||
this.testConvertGrid({
|
||||
before: getRegularGridHtml(2, [1, 2]),
|
||||
after: getRegularTableHtml(2, [1, 2], [12, 6], [100, 50], TEST_WIDTH),
|
||||
title: "should have converted a 2x[1,2] grid to an equivalent table",
|
||||
});
|
||||
|
||||
// 3x3
|
||||
this.$editable.html(getRegularGridHtml(3, 3));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()), getRegularTableHtml(3, 3, 4, 33.33, TEST_WIDTH),
|
||||
"should have converted a 3x3 grid to an equivalent table");
|
||||
this.testConvertGrid({
|
||||
before: getRegularGridHtml(3, 3),
|
||||
after: getRegularTableHtml(3, 3, 4, 33.33, TEST_WIDTH),
|
||||
title: "should have converted a 3x3 grid to an equivalent table",
|
||||
});
|
||||
|
||||
// 3x[3,2,1]
|
||||
this.$editable.html(getRegularGridHtml(3, [3,2,1]));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()), getRegularTableHtml(3, [3, 2, 1], [4, 6, 12], [33.33, 50, 100], TEST_WIDTH),
|
||||
"should have converted a 3x[3,2,1] grid to an equivalent table");
|
||||
this.testConvertGrid({
|
||||
before: getRegularGridHtml(3, [3,2,1]),
|
||||
after: getRegularTableHtml(3, [3, 2, 1], [4, 6, 12], [33.33, 50, 100], TEST_WIDTH),
|
||||
title: "should have converted a 3x[3,2,1] grid to an equivalent table",
|
||||
});
|
||||
});
|
||||
QUnit.test('convert a multi-row regular overflowing grid', async function (assert) {
|
||||
assert.expect(4);
|
||||
|
||||
// 2x[13,1]
|
||||
this.$editable.html(getRegularGridHtml(2, [13, 1]));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()),
|
||||
getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
|
||||
this.testConvertGrid({
|
||||
before: getRegularGridHtml(2, [13, 1]),
|
||||
after: getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
|
||||
`<tr>` +
|
||||
getTdHtml(1, '(0, 12)', TEST_WIDTH) +
|
||||
getTdHtml(11, '', TEST_WIDTH) + // 13 overflowed the row by 1 -> fill up
|
||||
`</tr>` +
|
||||
`<tr>${getTdHtml(12, '(1, 0)', TEST_WIDTH)}</tr></table>`, // 1 col with no size == col-12
|
||||
"should have converted a 2x[13,1] grid to an equivalent table (overflowing)");
|
||||
title: "should have converted a 2x[13,1] grid to an equivalent table (overflowing)",
|
||||
});
|
||||
|
||||
// 2x[1,13]
|
||||
this.$editable.html(getRegularGridHtml(2, [1, 13]));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(this.$editable.html(),
|
||||
getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33], TEST_WIDTH).slice(0, -8) +
|
||||
this.testConvertGrid({
|
||||
before: getRegularGridHtml(2, [1, 13]),
|
||||
after: getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33], TEST_WIDTH).slice(0, -8) +
|
||||
`<tr>` +
|
||||
getTdHtml(1, '(1, 12)', TEST_WIDTH) +
|
||||
getTdHtml(11, '', TEST_WIDTH) + // 13 overflowed the row by 1 -> fill up
|
||||
`</tr></table>`,
|
||||
"should have converted a 2x[1,13] grid to an equivalent table (overflowing)");
|
||||
title: "should have converted a 2x[1,13] grid to an equivalent table (overflowing)",
|
||||
});
|
||||
|
||||
// 3x[1,13,6]
|
||||
this.$editable.html(getRegularGridHtml(3, [1, 13, 6]));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(this.$editable.html(),
|
||||
getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33], TEST_WIDTH).slice(0, -8) +
|
||||
this.testConvertGrid({
|
||||
before: getRegularGridHtml(3, [1, 13, 6]),
|
||||
after: getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33], TEST_WIDTH).slice(0, -8) +
|
||||
`<tr>` +
|
||||
getTdHtml(1, '(1, 12)', TEST_WIDTH) +
|
||||
getTdHtml(11, '', TEST_WIDTH) + // 13 overflowed the row by 1 -> fill up
|
||||
`</tr>` +
|
||||
getRegularTableHtml(1, 6, 2, 16.67, TEST_WIDTH).replace(/\(0,/g, `(2,`).replace(/^<table[^<]*>/, ''),
|
||||
"should have converted a 3x[1,13,6] grid to an equivalent table (overflowing)");
|
||||
title: "should have converted a 3x[1,13,6] grid to an equivalent table (overflowing)",
|
||||
});
|
||||
|
||||
// 3x[1,6,13]
|
||||
this.$editable.html(getRegularGridHtml(3, [1, 6, 13]));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(this.$editable.html(),
|
||||
getRegularTableHtml(3, [1, 6, 12], [12, 2, 1], [100, 16.67, 8.33], TEST_WIDTH).slice(0, -8) +
|
||||
this.testConvertGrid({
|
||||
before: getRegularGridHtml(3, [1, 6, 13]),
|
||||
after: getRegularTableHtml(3, [1, 6, 12], [12, 2, 1], [100, 16.67, 8.33], TEST_WIDTH).slice(0, -8) +
|
||||
`<tr>` +
|
||||
getTdHtml(1, '(2, 12)', TEST_WIDTH) +
|
||||
getTdHtml(11, '', TEST_WIDTH) + // 13 overflowed the row by 1 -> fill up
|
||||
`</tr></table>`,
|
||||
"should have converted a 3x[1,6,13] grid to an equivalent table (overflowing)");
|
||||
title: "should have converted a 3x[1,6,13] grid to an equivalent table (overflowing)",
|
||||
});
|
||||
});
|
||||
QUnit.test('convert a single-row irregular grid', async function (assert) {
|
||||
assert.expect(2);
|
||||
|
||||
// 1x2
|
||||
this.$editable.html(getGridHtml([[8, 4]]));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()), getTableHtml([[[8, 66.67], [4, 33.33]]], TEST_WIDTH),
|
||||
"should have converted a 1x2 irregular grid to an equivalent table");
|
||||
this.testConvertGrid({
|
||||
before: getGridHtml([[8, 4]]),
|
||||
after: getTableHtml([[[8, 66.67], [4, 33.33]]], TEST_WIDTH),
|
||||
title: "should have converted a 1x2 irregular grid to an equivalent table",
|
||||
});
|
||||
|
||||
// 1x3
|
||||
this.$editable.html(getGridHtml([[2, 3, 7]]));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()), getTableHtml([[[2, 16.67], [3, 25], [7, 58.33]]], TEST_WIDTH),
|
||||
"should have converted a 1x3 grid to an equivalent table");
|
||||
this.testConvertGrid({
|
||||
before: getGridHtml([[2, 3, 7]]),
|
||||
after: getTableHtml([[[2, 16.67], [3, 25], [7, 58.33]]], TEST_WIDTH),
|
||||
title: "should have converted a 1x3 grid to an equivalent table",
|
||||
});
|
||||
});
|
||||
QUnit.test('convert a single-row irregular overflowing grid', async function (assert) {
|
||||
assert.expect(2);
|
||||
|
||||
// 1x2
|
||||
this.$editable.html(getGridHtml([[8, 5]]));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()), getTableHtml([
|
||||
this.testConvertGrid({
|
||||
before: getGridHtml([[8, 5]]),
|
||||
after: getTableHtml([
|
||||
[[8, 66.67], [4, 33.33, '']],
|
||||
[[5, 41.67, '(0, 1)'], [7, 58.33, '']],
|
||||
], TEST_WIDTH),
|
||||
"should have converted a 1x2 irregular overflowing grid to an equivalent table");
|
||||
title: "should have converted a 1x2 irregular overflowing grid to an equivalent table",
|
||||
});
|
||||
|
||||
// 1x3
|
||||
this.$editable.html(getGridHtml([[7, 6, 9]]));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()), getTableHtml([
|
||||
this.testConvertGrid({
|
||||
before: getGridHtml([[7, 6, 9]]),
|
||||
after: getTableHtml([
|
||||
[[7, 58.33], [5, 41.67, '']],
|
||||
[[6, 50, '(0, 1)'], [6, 50, '']],
|
||||
[[9, 75, '(0, 2)'], [3, 25, '']],
|
||||
], TEST_WIDTH),
|
||||
"should have converted a 1x3 irregular overflowing grid to an equivalent table");
|
||||
title: "should have converted a 1x3 irregular overflowing grid to an equivalent table",
|
||||
});
|
||||
});
|
||||
QUnit.test('convert a multi-row irregular grid', async function (assert) {
|
||||
assert.expect(2);
|
||||
|
||||
// 2x2
|
||||
this.$editable.html(getGridHtml([[1, 11], [2, 10]]));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()), getTableHtml([[[1, 8.33], [11, 91.67]], [[2, 16.67], [10, 83.33]]], TEST_WIDTH),
|
||||
"should have converted a 2x2 irregular grid to an equivalent table");
|
||||
this.testConvertGrid({
|
||||
before: getGridHtml([[1, 11], [2, 10]]),
|
||||
after: getTableHtml([[[1, 8.33], [11, 91.67]], [[2, 16.67], [10, 83.33]]], TEST_WIDTH),
|
||||
title: "should have converted a 2x2 irregular grid to an equivalent table",
|
||||
});
|
||||
|
||||
// 2x[2,3]
|
||||
this.$editable.html(getGridHtml([[3, 9], [4, 6, 2]]));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()), getTableHtml([[[3, 25], [9, 75]], [[4, 33.33], [6, 50], [2, 16.67]]], TEST_WIDTH),
|
||||
"should have converted a 2x[2,3] irregular grid to an equivalent table");
|
||||
this.testConvertGrid({
|
||||
before: getGridHtml([[3, 9], [4, 6, 2]]),
|
||||
after: getTableHtml([[[3, 25], [9, 75]], [[4, 33.33], [6, 50], [2, 16.67]]], TEST_WIDTH),
|
||||
title: "should have converted a 2x[2,3] irregular grid to an equivalent table",
|
||||
});
|
||||
});
|
||||
QUnit.test('convert a multi-row irregular overflowing grid', async function (assert) {
|
||||
assert.expect(3);
|
||||
|
||||
// 2x2 (both rows overflow)
|
||||
this.$editable.html(getGridHtml([[6, 8], [7, 9]]));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()),
|
||||
getTableHtml([
|
||||
this.testConvertGrid({
|
||||
before: getGridHtml([[6, 8], [7, 9]]),
|
||||
after: getTableHtml([
|
||||
[[6, 50], [6, 50, '']],
|
||||
[[8, 66.67, '(0, 1)'], [4, 33.33, '']],
|
||||
[[7, 58.33, '(1, 0)'], [5, 41.67, '']],
|
||||
[[9, 75, '(1, 1)'], [3, 25, '']],
|
||||
], TEST_WIDTH),
|
||||
"should have converted a 2x[1,13] irregular grid to an equivalent table (both rows overflowing)");
|
||||
title: "should have converted a 2x[1,13] irregular grid to an equivalent table (both rows overflowing)",
|
||||
});
|
||||
|
||||
// 2x[2,3] (first row overflows)
|
||||
this.$editable.html(getGridHtml([[5, 8], [4, 2, 6]]));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()),
|
||||
getTableHtml([
|
||||
this.testConvertGrid({
|
||||
before: getGridHtml([[5, 8], [4, 2, 6]]),
|
||||
after: getTableHtml([
|
||||
[[5, 41.67], [7, 58.33, '']],
|
||||
[[8, 66.67, '(0, 1)'], [4, 33.33, '']],
|
||||
[[4, 33.33, '(1, 0)'], [2, 16.67, '(1, 1)'], [6, 50, '(1, 2)']],
|
||||
], TEST_WIDTH),
|
||||
"should have converted a 2x[2,3] irregular grid to an equivalent table (first row overflowing)");
|
||||
title: "should have converted a 2x[2,3] irregular grid to an equivalent table (first row overflowing)",
|
||||
});
|
||||
|
||||
// 2x[3,2] (second row overflows)
|
||||
this.$editable.html(getGridHtml([[4, 2, 6], [5, 8]]));
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(removeComments(this.$editable.html()),
|
||||
getTableHtml([
|
||||
this.testConvertGrid({
|
||||
before: getGridHtml([[4, 2, 6], [5, 8]]),
|
||||
after: getTableHtml([
|
||||
[[4, 33.33], [2, 16.67], [6, 50]],
|
||||
[[5, 41.67], [7, 58.33, '']],
|
||||
[[8, 66.67, '(1, 1)'], [4, 33.33, '']],
|
||||
], TEST_WIDTH),
|
||||
"should have converted a 2x[3,2] irregular grid to an equivalent table (second row overflowing)");
|
||||
title: "should have converted a 2x[3,2] irregular grid to an equivalent table (second row overflowing)",
|
||||
});
|
||||
});
|
||||
QUnit.test('convert a card to a table', async function (assert) {
|
||||
assert.expect(1);
|
||||
|
||||
this.$editable.html(
|
||||
`<div class="card">` +
|
||||
`<div class="card-header">` +
|
||||
`<span>HEADER</span>` +
|
||||
`</div>` +
|
||||
`<div class="card-body">` +
|
||||
`<h2 class="card-title">TITLE</h2>` +
|
||||
`<small>BODY <img></small>` +
|
||||
`</div>` +
|
||||
`<div class="card-footer">` +
|
||||
`<a href="#" class="btn">FOOTER</a>` +
|
||||
`</div>` +
|
||||
`</div>`);
|
||||
convertInline.cardToTable(this.$editable);
|
||||
assert.strictEqual(this.$editable.html(),
|
||||
getRegularTableHtml(3, 1, 12, 100)
|
||||
this.testConvertGrid({
|
||||
title: "should have converted a card structure into a table",
|
||||
before:
|
||||
`<div class="card">` +
|
||||
`<div class="card-header">` +
|
||||
`<span>HEADER</span>` +
|
||||
`</div>` +
|
||||
`<div class="card-body">` +
|
||||
`<h2 class="card-title">TITLE</h2>` +
|
||||
`<small>BODY <img></small>` +
|
||||
`</div>` +
|
||||
`<div class="card-footer">` +
|
||||
`<a href="#" class="btn">FOOTER</a>` +
|
||||
`</div>` +
|
||||
`</div>`,
|
||||
stepFunction: convertInline.cardToTable,
|
||||
after: getRegularTableHtml(3, 1, 12, 100)
|
||||
.replace('role=\"presentation\"', 'role=\"presentation\" class=\"card\"')
|
||||
.replace(/<td[^>]*>\(0, 0\)<\/td>/,
|
||||
`<td>` +
|
||||
@@ -295,50 +317,51 @@ QUnit.module('convert_inline', {}, function () {
|
||||
`font-size: unset; line-height: unset;\"><tr>` +
|
||||
`<td class="card-footer"><a href="#" class="btn">FOOTER</a></td>` +
|
||||
`</tr></table></td>`),
|
||||
"should have converted a card structure into a table");
|
||||
});
|
||||
});
|
||||
QUnit.test('convert a list group to a table', async function (assert) {
|
||||
assert.expect(1);
|
||||
|
||||
this.$editable.html(
|
||||
`<ul class="list-group list-group-flush">` +
|
||||
`<li class="list-group-item">` +
|
||||
`<strong>(0, 0)</strong>` +
|
||||
`</li>` +
|
||||
`<li class="list-group-item a">` +
|
||||
`(1, 0)` +
|
||||
`</li>` +
|
||||
`<li><img></li>` +
|
||||
`<li class="list-group-item">` +
|
||||
`<strong class="b">(2, 0)</strong>` +
|
||||
`</li>` +
|
||||
`</ul>`);
|
||||
convertInline.listGroupToTable(this.$editable);
|
||||
assert.strictEqual(this.$editable.html(),
|
||||
getRegularTableHtml(3, 1, 12, 100)
|
||||
this.testConvertGrid({
|
||||
title: "should have converted a list group structure into a table",
|
||||
before:
|
||||
`<ul class="list-group list-group-flush">` +
|
||||
`<li class="list-group-item">` +
|
||||
`<strong>(0, 0)</strong>` +
|
||||
`</li>` +
|
||||
`<li class="list-group-item a">` +
|
||||
`(1, 0)` +
|
||||
`</li>` +
|
||||
`<li><img></li>` +
|
||||
`<li class="list-group-item">` +
|
||||
`<strong class="b">(2, 0)</strong>` +
|
||||
`</li>` +
|
||||
`</ul>`,
|
||||
stepFunction: convertInline.listGroupToTable,
|
||||
after: getRegularTableHtml(3, 1, 12, 100)
|
||||
.split('style="').join('class="list-group-flush" style="')
|
||||
.replace(/<td[^>]*>(\(0, 0\))<\/td>/, '<td><strong>$1</strong></td>')
|
||||
.replace(/<td[^>]*>(\(1, 0\))<\/td>/, '<td class="a">$1</td>')
|
||||
.replace(/<tr><td[^>]*>(\(2, 0\))<\/td>/, '<img><tr><td><strong class="b">$1</strong></td>'),
|
||||
"should have converted a list group structure into a table");
|
||||
});
|
||||
});
|
||||
QUnit.test('convert a grid with offsets to a table', async function (assert) {
|
||||
assert.expect(2);
|
||||
|
||||
this.$editable.html('<div class="container"><div class="row"><div class="col-6 offset-4">(0, 0)</div></div>');
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(this.$editable.html(),
|
||||
getTableHtml([[[4, 33.33, ''], [6, 50, '(0, 0)'], [2, 16.67, '']]], TEST_WIDTH),
|
||||
"should have converted a column with an offset to two columns, then completed the column");
|
||||
this.testConvertGrid({
|
||||
before: '<div class="container"><div class="row"><div class="col-6 offset-4">(0, 0)</div></div>',
|
||||
after: getTableHtml([[[4, 33.33, ''], [6, 50, '(0, 0)'], [2, 16.67, '']]], TEST_WIDTH),
|
||||
title: "should have converted a column with an offset to two columns, then completed the column",
|
||||
});
|
||||
|
||||
this.$editable.html('<div class="container"><div class="row"><div class="col-6 offset-4">(0, 0)</div><div class="col-6 offset-1">(0, 1)</div></div>');
|
||||
convertInline.bootstrapToTable(this.$editable);
|
||||
assert.strictEqual(this.$editable.html(),
|
||||
getTableHtml([
|
||||
this.testConvertGrid({
|
||||
before: '<div class="container"><div class="row"><div class="col-6 offset-4">(0, 0)</div><div class="col-6 offset-1">(0, 1)</div></div>',
|
||||
after: getTableHtml([
|
||||
[[4, 33.33, ''], [6, 50, '(0, 0)'], [1, 8.33, ''], [1, 8.33, '']],
|
||||
[[6, 50, '(0, 1)'], [6, 50, '']]
|
||||
], TEST_WIDTH),
|
||||
"should have converted a column with an offset to two columns, then completed the column (overflowing)");
|
||||
title: "should have converted a column with an offset to two columns, then completed the column (overflowing)",
|
||||
});
|
||||
});
|
||||
|
||||
QUnit.module('Normalize styles');
|
||||
|
||||
Reference in New Issue
Block a user