Skip to content

Commit

Permalink
fix e2e tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@GermanJablo
GermanJablo committed Oct 7, 2024
1 parent 8271c5e commit 0ba00bf
Show file tree
Hide file tree
Showing 6 changed files with 146 additions and 112 deletions.
27 changes: 16 additions & 11 deletions packages/lexical-playground/__tests__/e2e/Selection.spec.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -686,7 +686,8 @@ test.describe.parallel('Selection', () => {
{
anchorOffset: {desc: 'beginning of cell', value: 0},
anchorPath: [
{desc: 'index of table in root', value: 1},
{desc: 'index of scrollable in root', value: 1},
{desc: 'table is firstChild of scrollable', value: 0},
{desc: 'first table row', value: 1},
{desc: 'second cell', value: 1},
{desc: 'first paragraph', value: 0},
Expand All @@ -695,7 +696,8 @@ test.describe.parallel('Selection', () => {
],
focusOffset: {desc: 'full text length', value: cellText.length},
focusPath: [
{desc: 'index of table in root', value: 1},
{desc: 'index of scrollable in root', value: 1},
{desc: 'table is firstChild of scrollable', value: 0},
{desc: 'first table row', value: 1},
{desc: 'second cell', value: 1},
{desc: 'first paragraph', value: 0},
Expand All @@ -716,14 +718,16 @@ test.describe.parallel('Selection', () => {
{
anchorOffset: {desc: 'beginning of cell', value: 0},
anchorPath: [
{desc: 'index of table in root', value: 1},
{desc: 'index of scrollable in root', value: 1},
{desc: 'table is firstChild of scrollable', value: 0},
{desc: 'first table row', value: 1},
{desc: 'first cell', value: 0},
{desc: 'beginning of text', value: 0},
],
focusOffset: {desc: 'beginning of text', value: 0},
focusPath: [
{desc: 'index of table in root', value: 1},
{desc: 'index of scrollable in root', value: 1},
{desc: 'table is firstChild of scrollable', value: 0},
{desc: 'first table row', value: 1},
{desc: 'first cell', value: 0},
{desc: 'beginning of text', value: 0},
Expand Down Expand Up @@ -772,7 +776,8 @@ test.describe.parallel('Selection', () => {
{
anchorOffset: {desc: 'beginning of cell', value: 0},
anchorPath: [
{desc: 'index of table in root', value: 1},
{desc: 'index of scrollable in root', value: 1},
{desc: 'table is firstChild of scrollable', value: 0},
{desc: 'first table row', value: 1},
{desc: 'first cell', value: 0},
],
Expand Down Expand Up @@ -983,8 +988,8 @@ test.describe.parallel('Selection', () => {
await assertSelection(page, {
anchorOffset: 0,
anchorPath: [0],
focusOffset: 0,
focusPath: [2],
focusOffset: 1,
focusPath: [1, 0, 2, 1],
});
});

Expand All @@ -1008,8 +1013,8 @@ test.describe.parallel('Selection', () => {
await assertSelection(page, {
anchorOffset: 0,
anchorPath: [2],
focusOffset: 0,
focusPath: [0],
focusOffset: 1,
focusPath: [1, 0, 1, 0],
});
});

Expand All @@ -1031,7 +1036,7 @@ test.describe.parallel('Selection', () => {
anchorOffset: 0,
anchorPath: [0],
focusOffset: 1,
focusPath: [1, 2, 1],
focusPath: [1, 0, 2, 1],
});
},
);
Expand All @@ -1054,7 +1059,7 @@ test.describe.parallel('Selection', () => {
anchorOffset: 0,
anchorPath: [1],
focusOffset: 1,
focusPath: [0, 1, 0],
focusPath: [0, 0, 1, 0],
});
},
);
Expand Down
168 changes: 86 additions & 82 deletions packages/lexical-playground/__tests__/regression/4661-insert-column-selection.spec.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,47 +47,49 @@ test.describe('Regression test #4661', () => {
page,
html`
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<table class="PlaygroundEditorTheme__table">
<colgroup>
<col style="width: 92px" />
<col style="width: 92px" />
<col style="width: 92px" />
<col style="width: 92px" />
</colgroup>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
</tr>
<tr>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
</tr>
</table>
<div class="lexical-scrollable" style="overflow-x: auto;">
<table class="PlaygroundEditorTheme__table">
<colgroup>
<col style="width: 92px" />
<col style="width: 92px" />
<col style="width: 92px" />
<col style="width: 92px" />
</colgroup>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
</tr>
<tr>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
</tr>
</table>
</div>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
`,
);
Expand Down Expand Up @@ -119,47 +121,49 @@ test.describe('Regression test #4661', () => {
page,
html`
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<table class="PlaygroundEditorTheme__table">
<colgroup>
<col style="width: 92px" />
<col style="width: 92px" />
<col style="width: 92px" />
<col style="width: 92px" />
</colgroup>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
</tr>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
</tr>
</table>
<div class="lexical-scrollable" style="overflow-x: auto;">
<table class="PlaygroundEditorTheme__table">
<colgroup>
<col style="width: 92px" />
<col style="width: 92px" />
<col style="width: 92px" />
<col style="width: 92px" />
</colgroup>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
</tr>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
</tr>
</table>
</div>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
`,
);
Expand Down
19 changes: 10 additions & 9 deletions packages/lexical-table/src/LexicalScrollableNode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
*/
import {
$applyNodeReplacement,
$createParagraphNode,
$getRoot,
$getSelection,
$isRangeSelection,
DOMConversionMap,
Expand Down Expand Up @@ -85,7 +87,13 @@ export class ScrollableNode extends ElementNode {
return (node: LexicalNode) => {
const selection = $getSelection();
if ((node as ScrollableNode).isEmpty()) {
node.remove();
const root = $getRoot();
if (root.__first === node.getKey() && root.getChildrenSize() === 1) {
root.append($createParagraphNode());
node.remove();
} else {
node.remove();
}
return;
}
const firstChild: ElementNode = (node as ScrollableNode).getFirstChild()!;
Expand All @@ -96,14 +104,7 @@ export class ScrollableNode extends ElementNode {
$isRangeSelection(selection) &&
selection.anchor.key === node.getKey()
) {
const row = firstChild.getFirstChild<ElementNode>()!;
const cell = row.getFirstChild<ElementNode>()!;
const cellChild = cell.getFirstChild()!;
if (cellChild) {
cellChild.selectStart();
} else {
cell.selectEnd();
}
firstChild.getFirstDescendant()!.selectStart();
}
};
}
Expand Down
30 changes: 22 additions & 8 deletions packages/lexical-table/src/LexicalTableSelectionHelpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@ import {
import {CAN_USE_DOM} from 'shared/canUseDOM';
import invariant from 'shared/invariant';

import {TableRowNode} from '../dist/LexicalTable.dev';
import {$isScrollableNode} from './LexicalScrollableNode';
import {$isTableCellNode} from './LexicalTableCellNode';
import {$isTableNode} from './LexicalTableNode';
Expand Down Expand Up @@ -1371,7 +1370,10 @@ function $handleArrowKey(

if (!$isSelectionInTable(selection, tableNode)) {
if ($isRangeSelection(selection)) {
if (selection.isCollapsed()) {
if (
selection.isCollapsed() &&
(direction === 'forward' || direction === 'backward')
) {
if (event.shiftKey) {
return false;
}
Expand Down Expand Up @@ -1408,13 +1410,11 @@ function $handleArrowKey(
if (direction === 'backward') {
siblingNode.selectEnd();
} else {
const row = siblingNode.getFirstChild() as TableRowNode;
const cell = row.getFirstChild() as TableCellNode;
const firstChild = cell.getFirstChild();
if (firstChild) {
firstChild.selectStart();
const firstDescendant = siblingNode.getFirstDescendant()!;
if ($isTableCellNode(firstDescendant)) {
firstDescendant.selectEnd();
} else {
cell.selectEnd();
firstDescendant.selectStart();
}
}
return true;
Expand All @@ -1423,6 +1423,20 @@ function $handleArrowKey(
(direction === 'up' || direction === 'down')
) {
const focusNode = selection.focus.getNode();
const tableNode2 = $findMatchingParent(focusNode, $isTableNode);
if (tableNode2 && direction === 'up') {
const newFocus = tableNode2.getParentOrThrow().getPreviousSibling();
if (newFocus) {
selection.focus.set(newFocus.getKey(), 0, 'element');
}
return true;
} else if (tableNode2 && direction === 'down') {
const newFocus = tableNode2.getParentOrThrow().getNextSibling();
if (newFocus) {
selection.focus.set(newFocus.getKey(), 0, 'element');
}
return true;
}
if ($isRootOrShadowRoot(focusNode)) {
const selectedNode = selection.getNodes()[0];
if (selectedNode) {
Expand Down
4 changes: 2 additions & 2 deletions packages/lexical-table/src/__tests__/unit/LexicalScrollableNode.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ describe('LexicalScrollableNode tests', () => {
expect($isTableNode(table)).toBe(true);
table.remove();
});
expect(testEnv.innerHTML).toBe('');
expect(testEnv.innerHTML).toBe('<p><br></p>');

// scrollableNode.importDOM
await editor.update(() => {
Expand All @@ -60,7 +60,7 @@ describe('LexicalScrollableNode tests', () => {
$insertNodes(nodes);
});
expect(testEnv.innerHTML).toBe(
'<div class="lexical-scrollable" style="overflow-x: auto;"><table><colgroup></colgroup><br></table></div>',
'<p><br></p><div class="lexical-scrollable" style="overflow-x: auto;"><table><colgroup></colgroup><br></table></div>',
);
});
});
Expand Down
Loading

0 comments on commit 0ba00bf

Please sign in to comment.