e2e test for new formatting options

facebook · Dec 2, 2024 · 6dcb401 · 6dcb401
1 parent 73e0a0d
commit 6dcb401
Showing 1 changed file with 134 additions and 0 deletions.
diff --git a/packages/lexical-playground/__tests__/e2e/TextFormatting.spec.mjs b/packages/lexical-playground/__tests__/e2e/TextFormatting.spec.mjs
@@ -14,7 +14,9 @@ import {
   selectCharacters,
   toggleBold,
   toggleItalic,
+  toggleLowercase,
   toggleUnderline,
+  toggleUppercase,
 } from '../keyboardShortcuts/index.mjs';
 import {
   assertHTML,
@@ -428,6 +430,138 @@ test.describe.parallel('TextFormatting', () => {
     });
   });
 
+  const capitalizationFormats = [
+    {
+      applyCapitalization: toggleLowercase,
+      className: 'PlaygroundEditorTheme__textLowercase',
+      format: 'lowercase',
+    },
+    {
+      applyCapitalization: toggleUppercase,
+      className: 'PlaygroundEditorTheme__textUppercase',
+      format: 'uppercase',
+    },
+  ];
+
+  capitalizationFormats.forEach(({className, format, applyCapitalization}) => {
+    test(`Can select text and change it to ${format}`, async ({
+      page,
+      isPlainText,
+    }) => {
+      test.skip(isPlainText);
+
+      await focusEditor(page);
+      await page.keyboard.type('Hello world!');
+      await moveLeft(page);
+      await selectCharacters(page, 'left', 5);
+
+      await assertSelection(page, {
+        anchorOffset: 11,
+        anchorPath: [0, 0, 0],
+        focusOffset: 6,
+        focusPath: [0, 0, 0],
+      });
+
+      await applyCapitalization(page);
+      await assertHTML(
+        page,
+        html`
+          <p
+            class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+            dir="ltr">
+            <span data-lexical-text="true">Hello</span>
+            <span class="${className}" data-lexical-text="true">world</span>
+            <span data-lexical-text="true">!</span>
+          </p>
+        `,
+      );
+
+      await assertSelection(page, {
+        anchorOffset: 5,
+        anchorPath: [0, 1, 0],
+        focusOffset: 0,
+        focusPath: [0, 1, 0],
+      });
+    });
+  });
+
+  const capitalizationResettingTestCases = [
+    {
+      expectedFinalHTML: html`
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span class="$formatClassName" data-lexical-text="true">Hello</span>
+          <span data-lexical-text="true">world!</span>
+        </p>
+      `,
+      key: 'Space',
+    },
+    {
+      expectedFinalHTML: html`
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span class="$formatClassName" data-lexical-text="true">Hello</span>
+          <span data-lexical-text="true"></span>
+          <span data-lexical-text="true">world!</span>
+        </p>
+      `,
+      key: 'Tab',
+    },
+    {
+      expectedFinalHTML: html`
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span class="$formatClassName" data-lexical-text="true">Hello</span>
+        </p>
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span data-lexical-text="true">world!</span>
+        </p>
+      `,
+      key: 'Enter',
+    },
+  ];
+
+  capitalizationFormats.forEach(({format, className, applyCapitalization}) => {
+    capitalizationResettingTestCases.forEach(({key, expectedFinalHTML}) => {
+      test(`Pressing ${key} resets ${format} format`, async ({
+        page,
+        isPlainText,
+      }) => {
+        test.skip(isPlainText);
+
+        await focusEditor(page);
+
+        await applyCapitalization(page);
+        await page.keyboard.type('Hello');
+
+        await assertHTML(
+          page,
+          html`
+            <p
+              class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+              dir="ltr">
+              <span class="${className}" data-lexical-text="true">Hello</span>
+            </p>
+          `,
+        );
+
+        // Pressing the key should reset the format
+        await page.keyboard.press(key);
+        await page.keyboard.type(' world!');
+
+        await assertHTML(
+          page,
+          expectedFinalHTML.replace('$formatClassName', className),
+        );
+      });
+    });
+  });
+
   test(`Can select text and increase the font-size`, async ({
     page,
     isPlainText,