[FIX] web_editor: correct reference to editable in tests
Some tests depended on a variable to be defined, which was only defined in other tests. X-original-commit: d3e30a532526e7be54d6153a3ed375ff30d8f8e3 Part-of: odoo/odoo#84513
This commit is contained in:
Antoine Guenet
@@ -2,11 +2,8 @@
|
||||
import convertInline from '@web_editor/js/backend/convert_inline';
|
||||
import {getGridHtml, getTableHtml, getRegularGridHtml, getRegularTableHtml} from 'web_editor.test_utils';
|
||||
|
||||
|
||||
QUnit.module('web_editor', {}, function () {
|
||||
QUnit.module('convert_inline', {}, function () {
|
||||
let $editable;
|
||||
|
||||
QUnit.module('Convert Bootstrap grids to tables');
|
||||
// Test bootstrapToTable, cardToTable and listGroupToTable
|
||||
|
||||
@@ -14,7 +11,7 @@ QUnit.module('convert_inline', {}, function () {
|
||||
assert.expect(4);
|
||||
|
||||
// 1x1
|
||||
$editable = $(`<div>${getRegularGridHtml(1, 1)}</div>`);
|
||||
let $editable = $(`<div>${getRegularGridHtml(1, 1)}</div>`);
|
||||
convertInline.bootstrapToTable($editable);
|
||||
assert.strictEqual($editable.html(), getRegularTableHtml(1, 1, 12, 100),
|
||||
"should have converted a 1x1 grid to an equivalent table");
|
||||
@@ -41,7 +38,7 @@ QUnit.module('convert_inline', {}, function () {
|
||||
assert.expect(4);
|
||||
|
||||
// 1x13
|
||||
$editable = $(`<div>${getRegularGridHtml(1, 13)}</div>`);
|
||||
let $editable = $(`<div>${getRegularGridHtml(1, 13)}</div>`);
|
||||
convertInline.bootstrapToTable($editable);
|
||||
assert.strictEqual($editable.html(),
|
||||
getRegularTableHtml(1, 12, 1, 8.33).slice(0, -8) +
|
||||
@@ -82,7 +79,7 @@ QUnit.module('convert_inline', {}, function () {
|
||||
assert.expect(4);
|
||||
|
||||
// 2x1
|
||||
$editable = $(`<div>${getRegularGridHtml(2, 1)}</div>`);
|
||||
let $editable = $(`<div>${getRegularGridHtml(2, 1)}</div>`);
|
||||
convertInline.bootstrapToTable($editable);
|
||||
assert.strictEqual($editable.html(), getRegularTableHtml(2, 1, 12, 100),
|
||||
"should have converted a 2x1 grid to an equivalent table");
|
||||
@@ -109,7 +106,7 @@ QUnit.module('convert_inline', {}, function () {
|
||||
assert.expect(4);
|
||||
|
||||
// 2x[13,1]
|
||||
$editable = $(`<div>${getRegularGridHtml(2, [13, 1])}</div>`);
|
||||
let $editable = $(`<div>${getRegularGridHtml(2, [13, 1])}</div>`);
|
||||
convertInline.bootstrapToTable($editable);
|
||||
assert.strictEqual($editable.html(),
|
||||
getRegularTableHtml(1, 12, 1, 8.33).slice(0, -8) +
|
||||
@@ -146,7 +143,7 @@ QUnit.module('convert_inline', {}, function () {
|
||||
assert.expect(2);
|
||||
|
||||
// 1x2
|
||||
$editable = $(`<div>${getGridHtml([[8, 4]])}</div>`);
|
||||
let $editable = $(`<div>${getGridHtml([[8, 4]])}</div>`);
|
||||
convertInline.bootstrapToTable($editable);
|
||||
assert.strictEqual($editable.html(), getTableHtml([[[8, 66.67], [4, 33.33]]]),
|
||||
"should have converted a 1x2 irregular grid to an equivalent table");
|
||||
@@ -161,7 +158,7 @@ QUnit.module('convert_inline', {}, function () {
|
||||
assert.expect(2);
|
||||
|
||||
// 1x2
|
||||
$editable = $(`<div>${getGridHtml([[8, 5]])}</div>`);
|
||||
let $editable = $(`<div>${getGridHtml([[8, 5]])}</div>`);
|
||||
convertInline.bootstrapToTable($editable);
|
||||
assert.strictEqual($editable.html(), getTableHtml([
|
||||
[[8, 66.67], [4, 33.33, '']],
|
||||
@@ -183,7 +180,7 @@ QUnit.module('convert_inline', {}, function () {
|
||||
assert.expect(2);
|
||||
|
||||
// 2x2
|
||||
$editable = $(`<div>${getGridHtml([[1, 11], [2, 10]])}</div>`);
|
||||
let $editable = $(`<div>${getGridHtml([[1, 11], [2, 10]])}</div>`);
|
||||
convertInline.bootstrapToTable($editable);
|
||||
assert.strictEqual($editable.html(), getTableHtml([[[1, 8.33], [11, 91.67]], [[2, 16.67], [10, 83.33]]]),
|
||||
"should have converted a 2x2 irregular grid to an equivalent table");
|
||||
@@ -198,7 +195,7 @@ QUnit.module('convert_inline', {}, function () {
|
||||
assert.expect(3);
|
||||
|
||||
// 2x2 (both rows overflow)
|
||||
$editable = $(`<div>${getGridHtml([[6, 8], [7, 9]])}</div>`);
|
||||
let $editable = $(`<div>${getGridHtml([[6, 8], [7, 9]])}</div>`);
|
||||
convertInline.bootstrapToTable($editable);
|
||||
assert.strictEqual($editable.html(),
|
||||
getTableHtml([
|
||||
@@ -234,8 +231,8 @@ QUnit.module('convert_inline', {}, function () {
|
||||
QUnit.test('convert a card to a table', async function (assert) {
|
||||
assert.expect(1);
|
||||
|
||||
$editable.html(
|
||||
`<div class="card">` +
|
||||
const $editable = $(
|
||||
`<div><div class="card">` +
|
||||
`<div class="card-header">` +
|
||||
`<span>HEADER</span>` +
|
||||
`</div>` +
|
||||
@@ -246,7 +243,7 @@ QUnit.module('convert_inline', {}, function () {
|
||||
`<div class="card-footer">` +
|
||||
`<a href="#" class="btn">FOOTER</a>` +
|
||||
`</div>` +
|
||||
`</div>`);
|
||||
`</div></div>`);
|
||||
convertInline.cardToTable($editable);
|
||||
assert.strictEqual($editable.html(),
|
||||
getRegularTableHtml(3, 1, 12, 100)
|
||||
@@ -277,8 +274,8 @@ QUnit.module('convert_inline', {}, function () {
|
||||
QUnit.test('convert a list group to a table', async function (assert) {
|
||||
assert.expect(1);
|
||||
|
||||
$editable.html(
|
||||
`<ul class="list-group list-group-flush">` +
|
||||
const $editable = $(
|
||||
`<div><ul class="list-group list-group-flush">` +
|
||||
`<li class="list-group-item">` +
|
||||
`<strong>(0, 0)</strong>` +
|
||||
`</li>` +
|
||||
@@ -289,7 +286,7 @@ QUnit.module('convert_inline', {}, function () {
|
||||
`<li class="list-group-item">` +
|
||||
`<strong class="b">(2, 0)</strong>` +
|
||||
`</li>` +
|
||||
`</ul>`);
|
||||
`</ul></div>`);
|
||||
convertInline.listGroupToTable($editable);
|
||||
assert.strictEqual($editable.html(),
|
||||
getRegularTableHtml(3, 1, 12, 100)
|
||||
@@ -306,12 +303,12 @@ QUnit.module('convert_inline', {}, function () {
|
||||
QUnit.test('convert rgb color to hexadecimal', async function (assert) {
|
||||
assert.expect(1);
|
||||
|
||||
$editable.html(
|
||||
`<div style="color: rgb(0, 0, 0);">` +
|
||||
const $editable = $(
|
||||
`<div><div style="color: rgb(0, 0, 0);">` +
|
||||
`<div class="a" style="padding: 0; background-color:rgb(255,255,255)" width="100%">` +
|
||||
`<p style="border: 1px rgb(50, 100,200 ) solid; color: rgb(35, 134, 54);">Test</p>` +
|
||||
`</div>` +
|
||||
`</div>`
|
||||
`</div></div>`
|
||||
);
|
||||
convertInline.normalizeColors($editable);
|
||||
assert.strictEqual($editable.html(),
|
||||
@@ -332,7 +329,7 @@ QUnit.module('convert_inline', {}, function () {
|
||||
`</div>` +
|
||||
`</div>`;
|
||||
|
||||
$editable = $(`<div>${testDom}</div>`);
|
||||
let $editable = $(`<div>${testDom}</div>`);
|
||||
document.body.append($editable[0]);
|
||||
convertInline.normalizeRem($editable);
|
||||
assert.strictEqual($editable.html(),
|
||||
@@ -430,7 +427,7 @@ QUnit.module('convert_inline', {}, function () {
|
||||
`</table>`;
|
||||
|
||||
// table.o_mail_snippet_general
|
||||
$editable = $(`<div>${testTable}</div>`);
|
||||
const $editable = $(`<div>${testTable}</div>`);
|
||||
convertInline.formatTables($editable);
|
||||
assert.strictEqual($editable.html(), expectedTable,
|
||||
"should have moved the padding from table.o_mail_snippet_general and table in it to their respective cells"
|
||||
@@ -439,7 +436,7 @@ QUnit.module('convert_inline', {}, function () {
|
||||
QUnit.test('add a tbody to any table that doesn\'t have one', async function (assert) {
|
||||
assert.expect(1);
|
||||
|
||||
$editable = $(`<div>${`<table><tr><td>I don't have a body :'(</td></tr></table>`}</div>`);
|
||||
const $editable = $(`<div>${`<table><tr><td>I don't have a body :'(</td></tr></table>`}</div>`);
|
||||
$editable.find('tr').unwrap();
|
||||
convertInline.formatTables($editable);
|
||||
assert.strictEqual($editable.html(), `<table><tbody style="vertical-align: top;"><tr><td>I don't have a body :'(</td></tr></tbody></table>`,
|
||||
@@ -449,7 +446,7 @@ QUnit.module('convert_inline', {}, function () {
|
||||
QUnit.test('add number heights to parents of elements with percent heights', async function (assert) {
|
||||
assert.expect(3);
|
||||
|
||||
$editable = $(`<div>${`<table><tbody><tr style="height: 100%;"><td>yup</td></tr></tbody></table>`}</div>`);
|
||||
let $editable = $(`<div>${`<table><tbody><tr style="height: 100%;"><td>yup</td></tr></tbody></table>`}</div>`);
|
||||
convertInline.formatTables($editable);
|
||||
assert.strictEqual($editable.html(), `<table><tbody style="height: 0px;"><tr style="height: 100%;"><td>yup</td></tr></tbody></table>`,
|
||||
"should have added a 0 height to the parent of a 100% height element"
|
||||
@@ -470,7 +467,7 @@ QUnit.module('convert_inline', {}, function () {
|
||||
QUnit.test('express align-self with vertical-align on table cells', async function (assert) {
|
||||
assert.expect(3);
|
||||
|
||||
$editable = $(`<div><table><tbody><tr><td style="align-self: start;">yup</td></tr></tbody></table></div>`);
|
||||
let $editable = $(`<div><table><tbody><tr><td style="align-self: start;">yup</td></tr></tbody></table></div>`);
|
||||
convertInline.formatTables($editable);
|
||||
assert.strictEqual($editable.html(), `<table><tbody><tr><td style="align-self: start; vertical-align: top;">yup</td></tr></tbody></table>`,
|
||||
"should have added a top vertical alignment"
|
||||
@@ -495,10 +492,10 @@ QUnit.module('convert_inline', {}, function () {
|
||||
QUnit.test('convert snippets to tables', async function (assert) {
|
||||
assert.expect(2);
|
||||
|
||||
$editable.html(
|
||||
`<div class="o_mail_snippet_general">` +
|
||||
let $editable = $(
|
||||
`<div><div class="o_mail_snippet_general">` +
|
||||
`<div>Snippet</div>` +
|
||||
`</div>`
|
||||
`</div></div>`
|
||||
);
|
||||
convertInline.addTables($editable);
|
||||
assert.strictEqual($editable.html(),
|
||||
@@ -508,10 +505,10 @@ QUnit.module('convert_inline', {}, function () {
|
||||
"should have converted .o_mail_snippet_general to a special table structure with a table in it"
|
||||
);
|
||||
|
||||
$editable.html(
|
||||
`<div class="o_mail_snippet_general">` +
|
||||
$editable = $(
|
||||
`<div><div class="o_mail_snippet_general">` +
|
||||
`<table><tbody><tr><td>Snippet</td></tr></tbody></table>` +
|
||||
`</div>`
|
||||
`</div></div>`
|
||||
);
|
||||
convertInline.addTables($editable);
|
||||
assert.strictEqual($editable.html(),
|
||||
@@ -524,10 +521,10 @@ QUnit.module('convert_inline', {}, function () {
|
||||
QUnit.test('convert mailing bodies to tables', async function (assert) {
|
||||
assert.expect(2);
|
||||
|
||||
$editable.html(
|
||||
`<div class="o_layout">` +
|
||||
let $editable = $(
|
||||
`<div><div class="o_layout">` +
|
||||
`<div>Mailing</div>` +
|
||||
`</div>`
|
||||
`</div></div>`
|
||||
);
|
||||
convertInline.addTables($editable);
|
||||
assert.strictEqual($editable.html(),
|
||||
@@ -538,10 +535,10 @@ QUnit.module('convert_inline', {}, function () {
|
||||
"should have converted .o_layout to a special table structure with a table in it"
|
||||
);
|
||||
|
||||
$editable.html(
|
||||
`<div class="o_layout">` +
|
||||
$editable = $(
|
||||
`<div><div class="o_layout">` +
|
||||
`<table><tbody><tr><td>Mailing</td></tr></tbody></table>` +
|
||||
`</div>`
|
||||
`</div></div>`
|
||||
);
|
||||
convertInline.addTables($editable);
|
||||
assert.strictEqual($editable.html(),
|
||||
@@ -559,7 +556,7 @@ QUnit.module('convert_inline', {}, function () {
|
||||
QUnit.test('convert Bootstrap classes to inline styles', async function (assert) {
|
||||
assert.expect(1);
|
||||
|
||||
$editable = $(`<div>${`<div class="container"><div class="row"><div class="col">Hello</div></div></div>`}</div>`);
|
||||
const $editable = $(`<div><div class="container"><div class="row"><div class="col">Hello</div></div></div></div>`);
|
||||
convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
|
||||
const containerStyle = `padding:0 16px 0 16px;margin:0 auto 0 auto;box-sizing:border-box;max-width:1140px;width:100%;`;
|
||||
const rowStyle = `margin:0 -16px 0 -16px;box-sizing:border-box;`;
|
||||
@@ -587,7 +584,7 @@ QUnit.module('convert_inline', {}, function () {
|
||||
border-top-left-radius: 40%;
|
||||
}
|
||||
`, 0);
|
||||
$editable = $(`<div>${`<div class="test-border-radius"></div>`}</div>`);
|
||||
let $editable = $(`<div>${`<div class="test-border-radius"></div>`}</div>`);
|
||||
convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
|
||||
assert.strictEqual($editable.html(),
|
||||
`<div class="test-border-radius" style="border-radius:30%;box-sizing:border-box;"></div>`,
|
||||
@@ -784,7 +781,7 @@ QUnit.module('convert_inline', {}, function () {
|
||||
text-decoration-thickness: 10px;
|
||||
}
|
||||
`, 0);
|
||||
$editable = $(`<div>${`<div class="test-decoration"></div>`}</div>`);
|
||||
let $editable = $(`<div>${`<div class="test-decoration"></div>`}</div>`);
|
||||
convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
|
||||
assert.strictEqual($editable.html(),
|
||||
`<div class="test-decoration" style="text-decoration:underline;box-sizing:border-box;"></div>`,
|
||||
@@ -960,19 +957,19 @@ QUnit.module('convert_inline', {}, function () {
|
||||
}
|
||||
`, 2);
|
||||
|
||||
$editable = $(`<div>${`<span class="test-color"></span>`}</div>`);
|
||||
let $editable = $(`<div><span class="test-color"></span></div>`);
|
||||
convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
|
||||
assert.strictEqual($editable.html(),
|
||||
`<span class="test-color" style="box-sizing:border-box;color:blue;"></span>`,
|
||||
"should have prioritized the last defined style");
|
||||
|
||||
$editable = $(`<div>${`<div class="test-color"></div>`}</div>`);
|
||||
$editable = $(`<div><div class="test-color"></div></div>`);
|
||||
convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
|
||||
assert.strictEqual($editable.html(),
|
||||
`<div class="test-color" style="box-sizing:border-box;color:green;"></div>`,
|
||||
"should have prioritized the more specific style");
|
||||
|
||||
$editable = $(`<div>${`<div class="test-color" style="color: yellow;"></div>`}</div>`);
|
||||
$editable = $(`<div><div class="test-color" style="color: yellow;"></div></div>`);
|
||||
convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
|
||||
assert.strictEqual($editable.html(),
|
||||
`<div class="test-color" style="box-sizing:border-box;color: yellow;"></div>`,
|
||||
@@ -983,7 +980,7 @@ QUnit.module('convert_inline', {}, function () {
|
||||
color: black !important;
|
||||
}
|
||||
`, 0);
|
||||
$editable = $(`<div>${`<div class="test-color"></div>`}</div>`);
|
||||
$editable = $(`<div><div class="test-color"></div></div>`);
|
||||
convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
|
||||
assert.strictEqual($editable.html(),
|
||||
`<div class="test-color" style="box-sizing:border-box;color:black;"></div>`,
|
||||
|
||||
Reference in New Issue
Block a user