345 lines
12 KiB
JavaScript
345 lines
12 KiB
JavaScript
import { describe, test } from "@odoo/hoot";
|
|
import { press } from "@odoo/hoot-dom";
|
|
import { testEditor } from "../_helpers/editor";
|
|
import { unformat } from "../_helpers/format";
|
|
|
|
describe("move selection with tab/shift+tab", () => {
|
|
describe("tab", () => {
|
|
test("should move cursor to the next th", async () => {
|
|
await testEditor({
|
|
contentBefore: unformat(`
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<th>[]ab</th>
|
|
<th>cd</th>
|
|
<th>ef</th>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
stepFunction: async () => press("Tab"),
|
|
contentAfter: unformat(`
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<th>ab</th>
|
|
<th>cd[]</th>
|
|
<th>ef</th>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
});
|
|
});
|
|
test("should move cursor to the next td", async () => {
|
|
await testEditor({
|
|
contentBefore: unformat(`
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<th>[]ab</th>
|
|
<td>cd</td>
|
|
<td>ef</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
stepFunction: async () => press("Tab"),
|
|
contentAfter: unformat(`
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<th>ab</th>
|
|
<td>cd[]</td>
|
|
<td>ef</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
});
|
|
});
|
|
test("should move cursor to the end of next cell", async () => {
|
|
await testEditor({
|
|
contentBefore: unformat(`
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>[]ab</td>
|
|
<td>cd</td>
|
|
<td>ef</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
stepFunction: async () => press("Tab"),
|
|
contentAfter: unformat(`
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>ab</td>
|
|
<td>cd[]</td>
|
|
<td>ef</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
});
|
|
});
|
|
test.tags("iframe", "desktop");
|
|
test("in iframe, desktop: should move cursor to the end of next cell in an iframe", async () => {
|
|
await testEditor({
|
|
props: { iframe: true },
|
|
contentBefore: unformat(`
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>[]ab</td>
|
|
<td>cd</td>
|
|
<td>ef</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
stepFunction: async () => press("Tab"),
|
|
contentAfter: unformat(`
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>ab</td>
|
|
<td>cd[]</td>
|
|
<td>ef</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
});
|
|
});
|
|
test.tags("iframe", "mobile");
|
|
test("in iframe, mobile: should move cursor to the end of next cell in an iframe", async () => {
|
|
await testEditor({
|
|
props: { iframe: true, mobile: true },
|
|
contentBefore: unformat(`
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>[]ab</td>
|
|
<td>cd</td>
|
|
<td>ef</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
stepFunction: async () => press("Tab"),
|
|
contentAfter: unformat(`
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>ab</td>
|
|
<td>cd[]</td>
|
|
<td>ef</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
});
|
|
});
|
|
test("should move cursor to the end of next cell in the row below", async () => {
|
|
await testEditor({
|
|
contentBefore: unformat(`
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>ab</td>
|
|
<td>[cd]</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ef</td>
|
|
<td>gh</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
stepFunction: async () => press("Tab"),
|
|
contentAfter: unformat(`
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>ab</td>
|
|
<td>cd</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ef[]</td>
|
|
<td>gh</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
});
|
|
});
|
|
test("move cursor to end of next cell when selection is inside table", async () => {
|
|
await testEditor({
|
|
contentBefore: unformat(`
|
|
<ul>
|
|
<li>
|
|
<br>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td><p>[]ab</p></td>
|
|
<td><p>cd</p></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<br>
|
|
</li>
|
|
</ul>
|
|
`),
|
|
stepFunction: async () => press("Tab"),
|
|
contentAfter: unformat(`
|
|
<ul>
|
|
<li>
|
|
<br>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td><p>ab</p></td>
|
|
<td><p>cd[]</p></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<br>
|
|
</li>
|
|
</ul>
|
|
`),
|
|
});
|
|
});
|
|
});
|
|
describe("shift+tab", () => {
|
|
test("should move cursor to the end of previous cell", async () => {
|
|
await testEditor({
|
|
contentBefore: unformat(`
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>ab</td>
|
|
<td>[]cd</td>
|
|
<td>ef</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
stepFunction: async () => press(["Shift", "Tab"]),
|
|
contentAfter: unformat(`
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>ab[]</td>
|
|
<td>cd</td>
|
|
<td>ef</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
});
|
|
});
|
|
test("should move cursor to the end of previous cell in the row above", async () => {
|
|
await testEditor({
|
|
contentBefore: unformat(`
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>ab</td>
|
|
<td>cd</td>
|
|
</tr>
|
|
<tr>
|
|
<td>[ef]</td>
|
|
<td>gh</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
stepFunction: async () => press(["Shift", "Tab"]),
|
|
contentAfter: unformat(`
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>ab</td>
|
|
<td>cd[]</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ef</td>
|
|
<td>gh</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
});
|
|
});
|
|
test("should not cursor if there is no previous cell", async () => {
|
|
await testEditor({
|
|
contentBefore: unformat(`
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>[ab]</td>
|
|
<td>cd</td>
|
|
<td>ef</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
stepFunction: async () => press(["Shift", "Tab"]),
|
|
contentAfter: unformat(`
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>[ab]</td>
|
|
<td>cd</td>
|
|
<td>ef</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
});
|
|
});
|
|
test("move cursor to end of previous cell when selection is inside table", async () => {
|
|
await testEditor({
|
|
contentBefore: unformat(`
|
|
<ul>
|
|
<li>
|
|
<br>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td><p>ab</p></td>
|
|
<td><p>[]cd</p></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<br>
|
|
</li>
|
|
</ul>
|
|
`),
|
|
stepFunction: async () => press(["Shift", "Tab"]),
|
|
contentAfter: unformat(`
|
|
<ul>
|
|
<li>
|
|
<br>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td><p>ab[]</p></td>
|
|
<td><p>cd</p></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<br>
|
|
</li>
|
|
</ul>
|
|
`),
|
|
});
|
|
});
|
|
});
|
|
});
|