test: Preserve content with merging cells

umaranis · Nov 28, 2023 · 3fc69c0 · 3fc69c0
1 parent d4530df
commit 3fc69c0
Showing 1 changed file with 100 additions and 0 deletions.
diff --git a/demos/playground/src/__tests__/e2e/Tables.spec.mjs b/demos/playground/src/__tests__/e2e/Tables.spec.mjs
@@ -959,6 +959,11 @@ test.describe('Tables', () => {
                 dir="ltr">
                 <span data-lexical-text="true">first</span>
               </p>
+              <p
+                class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+                dir="ltr">
+                <span data-lexical-text="true">second</span>
+              </p>
             </th>
           </tr>
         </table>
@@ -984,6 +989,11 @@ test.describe('Tables', () => {
                 dir="ltr">
                 <span data-lexical-text="true">first</span>
               </p>
+              <p
+                class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+                dir="ltr">
+                <span data-lexical-text="true">second</span>
+              </p>
             </th>
             <td class="PlaygroundEditorTheme__tableCell"><br /></td>
           </tr>
@@ -1119,6 +1129,96 @@ test.describe('Tables', () => {
     );
   });
 
+  test('Merge with content', async ({ page, isPlainText }) => {
+    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 moveDown(page, 1);
+    await moveRight(page, 1);
+    await page.keyboard.type('A');
+    await moveRight(page, 1);
+    await page.keyboard.type('B');
+    await moveRight(page, 2);
+    await page.keyboard.type('C');
+    await moveRight(page, 1);
+    await page.keyboard.type('D');
+
+    await selectCellsFromTableCords(
+      page,
+      { x: 1, y: 1 },
+      { x: 2, y: 2 },
+      false,
+      false,
+    );
+    await mergeTableCells(page);
+    await assertHTML(
+      page,
+      html`
+        <p class="PlaygroundEditorTheme__paragraph"><br /></p>
+        <table class="PlaygroundEditorTheme__table">
+          <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>
+          </tr>
+          <tr>
+            <th
+              class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
+              <p class="PlaygroundEditorTheme__paragraph"><br /></p>
+            </th>
+            <td
+              class="PlaygroundEditorTheme__tableCell"
+              colspan="2"
+              rowspan="2">
+              <p
+                class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+                dir="ltr">
+                <span data-lexical-text="true">A</span>
+              </p>
+              <p
+                class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+                dir="ltr">
+                <span data-lexical-text="true">B</span>
+              </p>
+              <p
+                class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+                dir="ltr">
+                <span data-lexical-text="true">C</span>
+              </p>
+              <p
+                class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+                dir="ltr">
+                <span data-lexical-text="true">D</span>
+              </p>
+            </td>
+          </tr>
+          <tr>
+            <th
+              class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
+              <p class="PlaygroundEditorTheme__paragraph"><br /></p>
+            </th>
+          </tr>
+        </table>
+        <p class="PlaygroundEditorTheme__paragraph"><br /></p>
+      `,
+    );
+  });
+
   test('Select multiple merged cells (selection expands to a rectangle)', async ({
     page,
     isPlainText,