@bigbinary/neeto-playwright-commons 2.1.4 → 2.1.5

package/index.d.ts

@@ -3510,6 +3510,21 @@ declare class EditorPage {
   private verifyCalloutSelector;
   private buttonsAndVerifications;
   private fillRandomText;
+  /**
+   *
+   * Used to assert that rendered preview HTML matches the key–value pairs produced by the editor (for example, the return value of verifyDescriptionEditor). Each pair is checked against previewLocator using the appropriate selector for that formatting type.
+   *
+   * previewLocator (required): A Playwright Locator or Page that wraps the preview output (read-only HTML), not the editable editor surface.
+   *
+   * keyValuePairs (required): An array of { key, value } objects. Supported keys include editor formatting types such as bold, italic, underline, link, strike, bulletList, orderedList, codeBlock, emoji, todoList, image-upload, heading keys, and highlight-<index> for highlighter styles. When value is undefined, the assertion only checks that the corresponding element exists (first match for that tag).
+   *
+   * @example 
+   *
+   * const keysAndValues = await editorPage.verifyDescriptionEditor();
+   * await editorPage.verifyDescriptionPreview(previewSection, keysAndValues);
+   * @endexample
+  */
+  verifyDescriptionPreview: (previewLocator: Locator | Page, keyValuePairs: KeyValuePair[]) => Promise<void[]>;
   /**
    *
    * Used to verify description editor functionality.

package/index.js

@@ -6246,17 +6246,14 @@ class CustomCommands {
         await expect(locator).toBeChecked({ checked: shouldBeChecked });
     }).toPass({ timeout: 15_000 });
     moveCursorAtBottom = async () => {
-        const platform = require$$0$5.platform();
-        if (platform === "darwin") {
-            await this.page.keyboard.press("Meta+ArrowRight");
-            await this.page.keyboard.press("Meta+ArrowDown");
-        }
-        else {
-            await this.page.keyboard.press("End");
-            await this.page.keyboard.press("PageDown");
-        }
+        const isMacOS = require$$0$5.platform() === "darwin";
+        const rightArrowKey = isMacOS ? "Meta+ArrowRight" : "End";
+        const downArrowKey = isMacOS ? "Meta+ArrowDown" : "PageDown";
+        await this.page.keyboard.press(rightArrowKey);
+        await this.page.keyboard.press(rightArrowKey);
+        await this.page.keyboard.press(downArrowKey);
         // eslint-disable-next-line playwright/no-wait-for-timeout
-        await this.page.waitForTimeout(100); // Adding some delay for DOM to react
+        await this.page.waitForTimeout(150); // Adding some delay for DOM to react
         await this.page.keyboard.press("Enter");
     };
 }
@@ -118856,7 +118853,7 @@ class HelpAndProfilePage {
                 expect(bodyElement).not.toHaveClass(THEMES_TEXTS.lightThemeClass),
             ]);
             await expect(this.page.getByTestId(COMMON_SELECTORS.dropdownContainer).filter({
-                has: this.page.getByTestId(PROFILE_SECTION_SELECTORS.myProfileButton),
+                has: this.page.getByTestId(PROFILE_SECTION_SELECTORS.profileExpandMenuBtn),
             })).toHaveScreenshot(expectedScreenshot, { maxDiffPixelRatio: 0.1 });
         });
     };
@@ -119879,7 +119876,7 @@ class EditorPage {
     calloutSelector;
     videoUploadOption;
     todoListSelector;
-    filePath = "../../../e2e/assets/images/BigBinary.png";
+    filePath = "../../../e2e/assets/images/sample.png";
     videoPath = "../../../e2e/assets/files/sample.mp4";
     linkUrl = faker.internet.url();
     imageUrl = "https://picsum.photos/200/300";
@@ -119944,10 +119941,9 @@ class EditorPage {
     };
     verifyFontSize = async () => {
         const fontsAndTexts = [];
-        const fontSizeDropdownButton = this.page.getByTestId(NEETO_EDITOR_SELECTORS.neetoEditorFixedMenuFontSize);
-        await this.contentField.focus();
-        await this.contentField.press("Enter");
-        await fontSizeDropdownButton.click();
+        await this.page
+            .getByTestId(NEETO_EDITOR_SELECTORS.neetoEditorFixedMenuFontSize)
+            .click();
         const headingButtons = await this.page
             .getByTestId(COMMON_SELECTORS.dropdownContainer)
             .getByRole("button")
@@ -119969,10 +119965,7 @@ class EditorPage {
                 level: Number(headingLevel?.slice(1)),
                 name: randomText,
             })).toBeVisible();
-            fontsAndTexts.push({
-                key: fontKey,
-                value: randomText,
-            });
+            fontsAndTexts.push({ key: fontKey, value: randomText });
         }
         return fontsAndTexts;
     };
@@ -120015,18 +120008,13 @@ class EditorPage {
             .click();
         await expect(this.page.getByTestId(COMMON_SELECTORS.customDropdownContainer())).toBeVisible({ timeout: 5_000 });
     }).toPass({ timeout: 30_000 });
-    focusText = (textLocator) => {
-        const platform = require$$0$5.platform();
-        return expect(async () => {
-            await textLocator.click();
-            platform === "darwin"
-                ? await this.page.keyboard.press("Meta+ArrowRight")
-                : await this.page.keyboard.press("End");
-            await expect(textLocator.locator("..")).toHaveClass(/has-focus/, {
-                timeout: 5_000,
-            });
-        }).toPass({ timeout: 20_000 });
-    };
+    focusText = (textLocator) => expect(async () => {
+        await textLocator.click();
+        await this.page.keyboard.press(require$$0$5.platform() === "darwin" ? "Meta+ArrowRight" : "End");
+        await expect(textLocator.locator("..")).toHaveClass(/has-focus/, {
+            timeout: 5_000,
+        });
+    }).toPass({ timeout: 20_000 });
     highlightText = async (isButtonInMoreMenu, colorIndex) => {
         const randomText = await this.fillRandomText();
         await this.openHighlighterContainer(isButtonInMoreMenu);
@@ -120125,9 +120113,7 @@ class EditorPage {
                 .getByTestId(COMMON_SELECTORS.dropdownIcon)
                 .click();
             await this.uploadDeleteButton.click();
-            await expect(this.imageWrapper).toBeHidden({
-                timeout: 15_000,
-            });
+            await expect(this.imageWrapper).toBeHidden({ timeout: 15_000 });
         }
         return [{ key: "image-upload", value: imagePath }];
     };
@@ -120173,9 +120159,7 @@ class EditorPage {
         isButtonInMoreMenu && (await this.moreMenuSelector.click());
         await this.emojiSelector.click();
         const emojiContainer = this.page.getByTestId(NEETO_EDITOR_SELECTORS.emojiContainer);
-        await expect(emojiContainer).toBeVisible({
-            timeout: 10_000,
-        });
+        await expect(emojiContainer).toBeVisible({ timeout: 10_000 });
         await emojiContainer
             .getByPlaceholder(DESCRIPTION_EDITOR_TEXTS.search)
             .fill(EMOJI_LABEL);
@@ -120239,9 +120223,7 @@ class EditorPage {
                 .getByTestId(COMMON_SELECTORS.dropdownIcon)
                 .click();
             await this.uploadDeleteButton.click();
-            await expect(this.imageWrapper).toBeHidden({
-                timeout: 15_000,
-            });
+            await expect(this.imageWrapper).toBeHidden({ timeout: 15_000 });
         }
         return [{ key: "video-upload", value: this.videoPath }];
     };
@@ -120334,9 +120316,44 @@ class EditorPage {
         this.wordsUsedInEditor.push(randomText);
         const randomTextLocator = this.contentField.getByText(randomText);
         await randomTextLocator.scrollIntoViewIfNeeded();
-        await randomTextLocator.click({ clickCount: 3 });
+        const box = await randomTextLocator.boundingBox();
+        await randomTextLocator.click({
+            clickCount: 3,
+            ...(box && { position: { x: box.width * 0.99, y: box.height / 2 } }),
+        });
         return randomText;
     };
+    verifyDescriptionPreview = (previewLocator, keyValuePairs) => Promise.all(keyValuePairs.flatMap(({ key, value }) => {
+        const elementReplacement = {
+            bold: "strong",
+            italic: "em",
+            underline: "u",
+            link: "a",
+            strike: "s",
+            bulletList: "ul li",
+            orderedList: "ol li",
+            codeBlock: "pre",
+            emoji: "span",
+        };
+        if (key.includes("highlight")) {
+            const highlightIndex = key.split("-")[1];
+            return expect(previewLocator.locator(`span[style*="background-color: var(${NEETO_EDITOR_SELECTORS.highlightBg(Number(highlightIndex))})"][style*="color: var(${NEETO_EDITOR_SELECTORS.highlightText(Number(highlightIndex))})"]`, { hasText: value })).toBeVisible();
+        }
+        if (key === "todoList") {
+            return expect(previewLocator.locator(NEETO_EDITOR_SELECTORS.todoList, {
+                hasText: value,
+            })).toBeVisible();
+        }
+        const replacement = elementReplacement?.[key] ?? key;
+        if (value === undefined) {
+            return expect(
+            // eslint-disable-next-line playwright/no-nth-methods
+            previewLocator.locator(replacement).first()).toBeVisible();
+        }
+        return expect(previewLocator.locator(key === "image-upload"
+            ? `img[src*="sample"]`
+            : `${replacement}:has-text("${value}")`)).toBeVisible();
+    }));
     verifyDescriptionEditor = async ({ dynamicVariables, linkUrl, videoPath, filePath, imageUrl, videoUrl, highlighterCount, cannedResponseSuccessMessage, } = {}) => {
         this.linkUrl = linkUrl || this.linkUrl;
         this.filePath = filePath || this.filePath;