Skip to content

Commit

Permalink
[lexical-table] CI: Remerge PR 6200 Resizing table with merged cells (#…
Browse files Browse the repository at this point in the history 
…6235)

Co-authored-by: areznik10 <[email protected]>
  • Loading branch information
@potatowagon
potatowagon and areznik10 authored Jun 3, 2024
1 parent 35efa43 commit b77c39a
Show file tree
Hide file tree
Showing 4 changed files with 328 additions and 69 deletions.
238 changes: 238 additions & 0 deletions packages/lexical-playground/__tests__/e2e/Tables.spec.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import {
selectCellsFromTableCords,
selectFromAdditionalStylesDropdown,
selectFromAlignDropdown,
selectorBoundingBox,
setBackgroundColor,
test,
toggleColumnHeader,
Expand Down Expand Up @@ -1521,6 +1522,243 @@ test.describe.parallel('Tables', () => {
);
});

test('Resize merged cells width (1)', async ({
page,
isPlainText,
isCollab,
}) => {
await initialize({isCollab, page});
test.skip(isPlainText);
if (IS_COLLAB) {
// The contextual menu positioning needs fixing (it's hardcoded to show on the right side)
page.setViewportSize({height: 1000, width: 3000});
}

await focusEditor(page);

await insertTable(page, 3, 3);
await click(page, '.PlaygroundEditorTheme__tableCell');
await selectCellsFromTableCords(
page,
{x: 0, y: 0},
{x: 1, y: 1},
true,
false,
);
await mergeTableCells(page);
await click(page, 'td:nth-child(3) > .PlaygroundEditorTheme__paragraph');
const resizerBoundingBox = await selectorBoundingBox(
page,
'.TableCellResizer__resizer:first-child',
);
const x = resizerBoundingBox.x + resizerBoundingBox.width / 2;
const y = resizerBoundingBox.y + resizerBoundingBox.height / 2;
await page.mouse.move(x, y);
await page.mouse.down();
await page.mouse.move(x + 50, y);
await page.mouse.up();

await assertHTML(
page,
html`
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<table class="PlaygroundEditorTheme__table">
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
colspan="2"
rowspan="2">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
style="width: 125px">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
</tr>
<tr>
<td class="PlaygroundEditorTheme__tableCell" style="width: 125px">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
</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" style="width: 125px">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
</tr>
</table>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
`,
);
});

test('Resize merged cells width (2)', async ({
page,
isPlainText,
isCollab,
}) => {
await initialize({isCollab, page});
test.skip(isPlainText);
if (IS_COLLAB) {
// The contextual menu positioning needs fixing (it's hardcoded to show on the right side)
page.setViewportSize({height: 1000, width: 3000});
}

await focusEditor(page);

await insertTable(page, 3, 3);
await click(page, '.PlaygroundEditorTheme__tableCell');
await selectCellsFromTableCords(
page,
{x: 0, y: 0},
{x: 1, y: 1},
true,
false,
);
await mergeTableCells(page);
await click(page, 'th');
const resizerBoundingBox = await selectorBoundingBox(
page,
'.TableCellResizer__resizer:first-child',
);
const x = resizerBoundingBox.x + resizerBoundingBox.width / 2;
const y = resizerBoundingBox.y + resizerBoundingBox.height / 2;
await page.mouse.move(x, y);
await page.mouse.down();
await page.mouse.move(x + 50, y);
await page.mouse.up();

await assertHTML(
page,
html`
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<table class="PlaygroundEditorTheme__table">
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
colspan="2"
rowspan="2">
<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>
</tr>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
style="width: 125px">
<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>
</tr>
</table>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
`,
);
});

test('Resize merged cells height', async ({page, isPlainText, isCollab}) => {
await initialize({isCollab, page});
test.skip(isPlainText);
if (IS_COLLAB) {
// The contextual menu positioning needs fixing (it's hardcoded to show on the right side)
page.setViewportSize({height: 1000, width: 3000});
}

await focusEditor(page);

await insertTable(page, 3, 3);
await click(page, '.PlaygroundEditorTheme__tableCell');
await selectCellsFromTableCords(
page,
{x: 0, y: 0},
{x: 1, y: 1},
true,
false,
);
await mergeTableCells(page);
await click(page, 'th');
const resizerBoundingBox = await selectorBoundingBox(
page,
'.TableCellResizer__resizer:nth-child(2)',
);
const x = resizerBoundingBox.x + resizerBoundingBox.width / 2;
const y = resizerBoundingBox.y + resizerBoundingBox.height / 2;
await page.mouse.move(x, y);
await page.mouse.down();
await page.mouse.move(x, y + 50);
await page.mouse.up();

await assertHTML(
page,
html`
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<table class="PlaygroundEditorTheme__table">
<tr style="height: 87px">
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
colspan="2"
rowspan="2">
<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>
</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>
</tr>
</table>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
`,
undefined,
{
ignoreClasses: false,
ignoreInlineStyles: false,
},
(actualHtml) =>
// flaky fix: +- 1px for the height assertion
actualHtml.replace(
'<tr style="height: 88px">',
'<tr style="height: 87px">',
),
);
});

test('Merge/unmerge cells (1)', async ({page, isPlainText, isCollab}) => {
await initialize({isCollab, page});
test.skip(isPlainText);
Expand Down
1 change: 1 addition & 0 deletions packages/lexical-playground/__tests__/utils/index.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,7 @@ export async function assertHTML(
ignoreClasses,
ignoreInlineStyles,
'page',
actualHtmlModificationsCallback,
);
}
}
Expand Down
Loading

0 comments on commit b77c39a

Please sign in to comment.