test: table cell background color

umaranis · Dec 6, 2023 · 5ec4c9b · 5ec4c9b
1 parent 816e798
commit 5ec4c9b
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/demos/playground/src/__tests__/e2e/Tables.spec.mjs b/demos/playground/src/__tests__/e2e/Tables.spec.mjs
@@ -36,6 +36,7 @@ import {
   SAMPLE_IMAGE_URL,
   selectCellsFromTableCords,
   selectFromAdditionalStylesDropdown,
+  setBackgroundColor,
   test,
   unmergeTableCell,
 } from '../utils/index.mjs';
@@ -1647,9 +1648,7 @@ test.describe('Tables', () => {
     await insertTable(page, 1, 1);
     await selectAll(page);
 
-    await page.pause();
     await click(page, 'div[contenteditable="true"] p:first-of-type');
-    await page.pause();
 
     await assertSelection(page, {
       anchorOffset: 3,
@@ -1658,4 +1657,36 @@ test.describe('Tables', () => {
       focusPath: [0, 0, 0],
     });
   });
+
+  test('Background color to cell', 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, 1, 1);
+    await setBackgroundColor(page);
+    await click(page, '.color-picker-basic-color button');
+    await click(page, '.Modal__closeButton');
+
+    await assertHTML(
+      page,
+      html`
+        <p class="PlaygroundEditorTheme__paragraph"><br /></p>
+        <table class="PlaygroundEditorTheme__table">
+          <tr>
+            <th
+              class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
+              style="background-color: rgb(208, 2, 27)">
+              <p class="PlaygroundEditorTheme__paragraph"><br /></p>
+            </th>
+          </tr>
+        </table>
+        <p class="PlaygroundEditorTheme__paragraph"><br /></p>
+      `,
+    );
+  });
 });
diff --git a/demos/playground/src/__tests__/utils/index.mjs b/demos/playground/src/__tests__/utils/index.mjs
@@ -828,6 +828,11 @@ export async function deleteTable(page) {
   await click(page, '.item[data-test-id="table-delete"]');
 }
 
+export async function setBackgroundColor(page) {
+  await click(page, '.table-cell-action-button-container');
+  await click(page, '.item[data-test-id="table-background-color"]');
+}
+
 export async function enableCompositionKeyEvents(page) {
   const targetPage = IS_COLLAB ? await page.frame('left') : page;
   await targetPage.evaluate(() => {