import { describe, expect, test } from "@odoo/hoot";
import { setupEditor, testEditor } from "../_helpers/editor";
import { unformat } from "../_helpers/format";
import { bold, resetSize, setColor } from "../_helpers/user_actions";
import { getContent } from "../_helpers/selection";
import { queryAll } from "@odoo/hoot-dom";
describe("custom selection", () => {
test("should indicate selected cells with blue background", async () => {
const { el } = await setupEditor(
unformat(`
`)
);
expect(getContent(el)).toBe(
unformat(`
`)
);
const defaultBackgroundColor = getComputedStyle(el)["background-color"];
const backgroundColorTDs = queryAll("table td").map(
(td) => getComputedStyle(td)["background-color"]
);
// Unselected cells should have the default background color
expect(backgroundColorTDs[0]).toBe(defaultBackgroundColor);
// Selected cells should have a distinct background color
expect(backgroundColorTDs[1]).not.toBe(defaultBackgroundColor);
expect(backgroundColorTDs[2]).not.toBe(defaultBackgroundColor);
});
});
describe("select a full table on cross over", () => {
describe("select", () => {
test("should select some characters and a table", async () => {
await testEditor({
contentBefore:
"a[bc
",
contentAfterEdit:
"a[bc
" +
'' +
'| a]b | ' +
'cd | ' +
'ef | ' +
"
",
});
});
test("should select a table and some characters", async () => {
await testEditor({
contentBefore:
"a]bc
",
contentAfterEdit:
'a]bc
',
});
});
test("should select some characters, a table and some more characters", async () => {
await testEditor({
contentBefore:
"a[bc
a]bc
",
contentAfterEdit:
'a[bc
a]bc
',
});
});
test("should select some characters, a table, some more characters and another table", async () => {
await testEditor({
contentBefore:
"a[bc
abc
",
contentAfterEdit:
'a[bc
' +
'abc
',
});
});
test("should select some characters, a table, some more characters, another table and some more characters", async () => {
await testEditor({
contentBefore:
"a[bc
abc
a]bc
",
contentAfterEdit:
'a[bc
' +
'abc
a]bc
',
});
});
});
describe("toggleFormat", () => {
test("should apply bold to some characters and a table", async () => {
await testEditor({
contentBefore:
"a[bc
" +
"| a]b | " +
"cd | " +
"ef | " +
"
",
stepFunction: bold,
contentAfterEdit:
"a[bc
" +
'' +
'| ab | ' +
'cd | ' +
'ef] | ' +
"
",
});
});
test("should apply bold to a table and some characters", async () => {
await testEditor({
contentBefore:
"" +
"| ab | " +
"cd | " +
"e[f | " +
"
a]bc
",
stepFunction: bold,
contentAfterEdit:
'' +
'| [ab | ' +
'cd | ' +
'ef | ' +
"
" +
"a]bc
",
});
});
test("should apply bold to some characters, a table and some more characters", async () => {
await testEditor({
contentBefore:
"a[bc
" +
"" +
"| ab | " +
"cd | " +
"ef | " +
"
" +
"a]bc
",
stepFunction: bold,
contentAfterEdit:
"a[bc
" +
'' +
'| ab | ' +
'cd | ' +
'ef | ' +
"
" +
"a]bc
",
});
});
test("should apply bold to some characters, a table, some more characters and another table", async () => {
await testEditor({
contentBefore:
"a[bc
" +
"" +
"| ab | " +
"cd | " +
"ef | " +
"
" +
"abc
" +
"" +
"| a]b | " +
"cd | " +
"ef | " +
"
",
stepFunction: bold,
contentAfterEdit:
"a[bc
" +
'' +
'| ab | ' +
'cd | ' +
'ef | ' +
"
" +
"abc
" +
'' +
'| ab | ' +
'cd | ' +
'ef] | ' +
"
",
});
});
test("should apply bold to some characters, a table, some more characters, another table and some more characters", async () => {
await testEditor({
contentBefore:
"a[bc
" +
"" +
"| ab | " +
"cd | " +
"ef | " +
"
" +
"abc
" +
"" +
"| ab | " +
"cd | " +
"ef | " +
"
" +
"a]bc
",
stepFunction: bold,
contentAfterEdit:
"a[bc
" +
'' +
'| ab | ' +
'cd | ' +
'ef | ' +
"
" +
"abc
" +
'' +
'| ab | ' +
'cd | ' +
'ef | ' +
"
" +
"a]bc
",
});
});
});
describe("color", () => {
test("should apply a color to some characters and a table", async () => {
await testEditor({
contentBefore: unformat(`
a[bc
`),
stepFunction: setColor("aquamarine", "color"),
contentAfterEdit: unformat(`
a[bc
`),
});
});
test("should apply a color to a table and some characters", async () => {
await testEditor({
contentBefore:
"" +
"| ab | " +
"cd | " +
"e[f | " +
"
a]bc
",
stepFunction: setColor("aquamarine", "color"),
contentAfterEdit: unformat(`
a]bc
`),
});
});
test("should apply a color to some characters, a table and some more characters", async () => {
await testEditor({
contentBefore:
"a[bc
" +
"" +
"| ab | " +
"cd | " +
"ef | " +
"
" +
"a]bc
",
stepFunction: setColor("aquamarine", "color"),
contentAfterEdit: unformat(`
a[bc
a]bc
`),
});
});
test("should apply a color to some characters, a table, some more characters and another table", async () => {
await testEditor({
contentBefore:
"a[bc
" +
"" +
"| ab | " +
"cd | " +
"ef | " +
"
" +
"abc
" +
"" +
"| a]b | " +
"cd | " +
"ef | " +
"
",
stepFunction: setColor("aquamarine", "color"),
contentAfterEdit: unformat(`
a[bc
abc
`),
});
});
test("should apply a color to some characters, a table, some more characters, another table and some more characters", async () => {
await testEditor({
contentBefore:
"a[bc
" +
"" +
"| ab | " +
"cd | " +
"ef | " +
"
" +
"abc
" +
"" +
"| ab | " +
"cd | " +
"ef | " +
"
" +
"a]bc
",
stepFunction: setColor("aquamarine", "color"),
contentAfterEdit: unformat(`
a[bc
abc
a]bc
`),
});
});
});
});
describe("select columns on cross over", () => {
describe("select", () => {
test("should select two columns", async () => {
await testEditor({
contentBefore:
"",
contentAfterEdit:
'' +
'| a[b | ' +
'c]d | ' +
"ef | " +
"
",
});
});
test("should select a whole row", async () => {
await testEditor({
contentBefore:
"",
contentAfterEdit:
'' +
'| a[b | ' +
'cd | ' +
'e]f | ' +
"
| ab | cd | ef |
",
});
});
test("should select a whole column", async () => {
await testEditor({
contentBefore:
"" +
"| a[b | cd | ef |
" +
"| ab | cd | ef |
" +
"| a]b | cd | ef |
" +
"
",
contentAfterEdit:
'' +
"" +
'| a[b | ' +
"cd | " +
"ef | " +
"
" +
"" +
'| ab | ' +
"cd | " +
"ef | " +
"
" +
"" +
'| a]b | ' +
"cd | " +
"ef | " +
"
" +
"
",
});
});
test("should select from (0,0) to (1,1) in a 3x3 table", async () => {
await testEditor({
contentBefore:
"" +
"| a[b | cd | ef |
" +
"| ab | c]d | ef |
" +
"| ab | cd | ef |
" +
"
",
contentAfterEdit:
'' +
"" +
'| a[b | ' +
'cd | ' +
"ef | " +
"
" +
"" +
'| ab | ' +
'c]d | ' +
"ef | " +
"
" +
"" +
"| ab | " +
"cd | " +
"ef | " +
"
" +
"
",
});
});
test("should select a whole table", async () => {
await testEditor({
contentBefore:
"" +
"| a[b | cd | ef |
" +
"| ab | cd | ef |
" +
"| ab | cd | e]f |
" +
"
",
contentAfterEdit:
'' +
"" +
'| a[b | ' +
'cd | ' +
'ef | ' +
"
" +
"" +
'| ab | ' +
'cd | ' +
'ef | ' +
"
" +
"" +
'| ab | ' +
'cd | ' +
'e]f | ' +
"
" +
"
",
});
});
});
describe("toggleFormat", () => {
test("should apply bold to two columns", async () => {
await testEditor({
contentBefore:
"" +
"| a[b | " +
"c]d | " +
"ef | " +
"
",
stepFunction: bold,
contentAfterEdit:
'' +
'| [ab | ' +
'cd] | ' +
"ef | " +
"
",
});
});
test("should apply bold to a whole row", async () => {
await testEditor({
contentBefore:
"" +
"| a[b | " +
"cd | " +
"e]f | " +
"
| ab | cd | ef |
",
stepFunction: bold,
contentAfterEdit:
'' +
'| [ab | ' +
'cd | ' +
'ef] | ' +
"
| ab | cd | ef |
",
});
});
test("should apply bold to a whole column", async () => {
await testEditor({
contentBefore:
"" +
"" +
"| a[b | " +
"cd | " +
"ef | " +
"
" +
"" +
"| ab | " +
"cd | " +
"ef | " +
"
" +
"" +
"| a]b | " +
"cd | " +
"ef | " +
"
" +
"
",
stepFunction: bold,
contentAfterEdit:
'' +
"" +
'| [ab | ' +
"cd | " +
"ef | " +
"
" +
"" +
'| ab | ' +
"cd | " +
"ef | " +
"
" +
"" +
'| ab] | ' +
"cd | " +
"ef | " +
"
" +
"
",
});
});
test("should apply bold from (0,0) to (1,1) in a 3x3 table", async () => {
await testEditor({
contentBefore:
"" +
"" +
"| a[b | " +
"cd | " +
"ef | " +
"
" +
"" +
"| ab | " +
"c]d | " +
"ef | " +
"
" +
"" +
"| ab | " +
"cd | " +
"ef | " +
"
" +
"
",
stepFunction: bold,
contentAfterEdit:
'' +
"" +
'| [ab | ' +
'cd | ' +
"ef | " +
"
" +
"" +
'| ab | ' +
'cd] | ' +
"ef | " +
"
" +
"" +
"| ab | " +
"cd | " +
"ef | " +
"
" +
"
",
});
});
test("should apply bold to a whole table", async () => {
await testEditor({
contentBefore:
"" +
"" +
"| a[b | " +
"cd | " +
"ef | " +
"
" +
"" +
"| ab | " +
"cd | " +
"ef | " +
"
" +
"" +
"| ab | " +
"cd | " +
"e]f | " +
"
" +
"
",
stepFunction: bold,
contentAfterEdit:
'' +
"" +
'| [ab | ' +
'cd | ' +
'ef | ' +
"
" +
"" +
'| ab | ' +
'cd | ' +
'ef | ' +
"
" +
"" +
'| ab | ' +
'cd | ' +
'ef] | ' +
"
" +
"
",
});
});
});
describe("reset size", () => {
test("should remove any height or width of the table and bring it back to it original form", async () => {
await testEditor({
contentBefore: ``,
stepFunction: resetSize,
contentAfter: ``,
});
});
test("should remove any height or width of the table without loosing the style of the element inside it.", async () => {
await testEditor({
contentBefore: `
[]TESTTEXT |
|
|
|
TESTTEXT
|
|
codeTEST |
|
- text
- text
- text
|
`,
stepFunction: resetSize,
contentAfter: `
[]TESTTEXT |
|
|
|
TESTTEXT
|
|
codeTEST |
|
- text
- text
- text
|
`,
});
});
test("should remove any height or width of the table without removig the style of the table.", async () => {
await testEditor({
contentBefore: ``,
stepFunction: resetSize,
contentAfter: ``,
});
});
});
describe("color", () => {
test("should apply a color to two columns", async () => {
await testEditor({
contentBefore:
"" +
"| a[b | " +
"c]d | " +
"ef | " +
"
",
stepFunction: setColor("aquamarine", "color"),
contentAfterEdit: unformat(`
`),
});
});
test("should apply a color to a whole row", async () => {
await testEditor({
contentBefore:
"" +
"| a[b | " +
"cd | " +
"e]f | " +
"
| ab | cd | ef |
",
stepFunction: setColor("aquamarine", "color"),
contentAfterEdit: unformat(`
`),
});
});
test("should apply a color to a whole column", async () => {
await testEditor({
contentBefore:
"" +
"" +
"| a[b | " +
"cd | " +
"ef | " +
"
" +
"" +
"| ab | " +
"cd | " +
"ef | " +
"
" +
"" +
"| a]b | " +
"cd | " +
"ef | " +
"
" +
"
",
stepFunction: setColor("aquamarine", "color"),
contentAfterEdit: unformat(`
|
a[b
|
cd |
ef |
|
ab
|
cd |
ef |
|
a]b
|
cd |
ef |
`),
});
});
test("should apply a color from (0,0) to (1,1) in a 3x3 table", async () => {
await testEditor({
contentBefore:
"" +
"" +
"| a[b | " +
"cd | " +
"ef | " +
"
" +
"" +
"| ab | " +
"c]d | " +
"ef | " +
"
" +
"" +
"| ab | " +
"cd | " +
"ef | " +
"
" +
"
",
stepFunction: setColor("aquamarine", "color"),
contentAfterEdit: unformat(`
|
a[b
|
cd
|
ef |
|
ab
|
c]d
|
ef |
| ab |
cd |
ef |
`),
});
});
test("should apply a color to a whole table", async () => {
await testEditor({
contentBefore:
"" +
"" +
"| a[b | " +
"cd | " +
"ef | " +
"
" +
"" +
"| ab | " +
"cd | " +
"ef | " +
"
" +
"" +
"| ab | " +
"cd | " +
"e]f | " +
"
" +
"
",
stepFunction: setColor("aquamarine", "color"),
contentAfterEdit: unformat(`
|
a[b
|
cd
|
ef
|
|
ab
|
cd
|
ef
|
|
ab
|
cd
|
e]f
|
`),
});
});
});
});