@bigbinary/neeto-playwright-commons 1.22.38 → 1.22.40

package/index.cjs.js

@@ -3754,6 +3754,7 @@ const NEETO_EDITOR_SELECTORS = {
     videoEmbedSubmit: "neeto-editor-embed-cancel",
     videoWrapper: "neeto-editor-video-wrapper",
     paragraphOption: fixedMenuSelector("font-size-option-body2"),
+    calloutOption: fixedMenuSelector("callout-option"),
     attachmentPreview: "ne-attachments-wrapper",
     imageUploadLinkButton: "neeto-editor-media-uploader-link-tab",
     errorText: "neeto-editor-error-text",
@@ -3767,8 +3768,14 @@ const NEETO_EDITOR_SELECTORS = {
     videoUploadOption: optionSelector("video-upload"),
     todoListOption: optionSelector("todoList"),
     editorMenuWrapper: "neeto-editor-fixed-menu-wrapper",
+    dataEmojiType: (type) => `[data-emoji="${type}"]`,
+    //Use data-cy once https://github.com/neetozone/neeto-editor/issues/1651 is resolved
+    calloutContent: ".callout-content",
+    //Use data-cy once https://github.com/neetozone/neeto-editor/issues/1648 is resolved
+    calloutTypeOption: ".neeto-editor-callout-dropdown__type-option",
     editorMediaUploaderTab: "neeto-editor-media-uploader-local-tab",
     dynamicVariableSelector: (variable) => `dynamic-variables-list-item-${joinHyphenCase(variable)}`,
+    dynamicVariableList: (variable) => `dynamic-variables-list-${neetoCist.hyphenate(variable)}`,
     neetoEditorFixedMenuFontSize: "neeto-editor-fixed-menu-font-size-option",
     highlightText: (textColorIndex) => `--neeto-editor-highlight-text-${textColorIndex}`,
     highlightBg: (bgColorIndex) => `--neeto-editor-highlight-bg-${bgColorIndex}`,
@@ -192720,7 +192727,7 @@ class EditorPage {
             }
             return [{ key: "attachments", value: filePath }];
         };
-        this.verifyImageUploadOption = async ({ imageUrl, filePath, isButtonInMoreMenu, shouldRemoveImage = false, }) => {
+        this.verifyImageUploadOption = async ({ filePath, isButtonInMoreMenu, shouldRemoveImage = false, }) => {
             isButtonInMoreMenu && (await this.moreMenuSelector.click());
             await this.imageUploadOption.click();
             await test$1.expect(this.page.getByTestId(NEETO_IMAGE_UPLOADER_SELECTORS.restrictionMessage)).toBeVisible();
@@ -192741,7 +192748,7 @@ class EditorPage {
                     timeout: 15000,
                 });
             }
-            return [{ key: "image-upload", value: imageUrl }];
+            return [{ key: "image-upload", value: imagePath }];
         };
         this.verifyCannedResponseOption = async (isButtonInMoreMenu, cannedResponseSuccessMessage) => {
             isButtonInMoreMenu && (await this.moreMenuSelector.click());
@@ -192874,11 +192881,36 @@ class EditorPage {
                 await this.dynamicVariablesButton.click();
                 await test$1.expect(this.page.getByTestId(COMMON_SELECTORS.dropdownContainer)).toBeVisible();
                 await this.page
-                    .getByTestId(NEETO_EDITOR_SELECTORS.dynamicVariableSelector(key))
+                    .getByTestId(NEETO_EDITOR_SELECTORS.dynamicVariableList(key))
+                    .getByTestId(NEETO_EDITOR_SELECTORS.dynamicVariableSelector(value))
                     .click();
-                await test$1.expect(this.contentField.getByText(neetoCist.truncate(value, 25))).toBeVisible();
+                await test$1.expect(this.contentField.getByText(neetoCist.truncate(`${key}:${value}`, 25))).toBeVisible();
             }
         };
+        this.verifyCalloutSelector = async (isButtonInMoreMenu) => {
+            isButtonInMoreMenu && (await this.moreMenuSelector.click());
+            const calloutTypes = ["default", "info", "warning", "error", "success"];
+            const calloutContentField = this.contentField.locator(NEETO_EDITOR_SELECTORS.calloutContent);
+            const calloutTypeOption = this.page.locator(NEETO_EDITOR_SELECTORS.calloutTypeOption);
+            await this.moveCursorAtBottom();
+            for (const [index, type] of calloutTypes.entries()) {
+                await this.calloutSelector.click();
+                const calloutType = calloutTypeOption.filter({ hasText: type });
+                await test$1.expect(calloutType).toBeVisible({ timeout: 10000 });
+                await calloutType.click();
+                await Promise.all([
+                    test$1.expect(calloutTypeOption).toBeHidden(),
+                    test$1.expect(this.contentField.locator(NEETO_EDITOR_SELECTORS.dataEmojiType(type))).toBeVisible(),
+                ]);
+                const randomText = faker.faker.lorem.word(10);
+                await this.page.keyboard.type(randomText);
+                // The index is important here as it determines which callout content field to interact with
+                // eslint-disable-next-line playwright/no-nth-methods
+                await test$1.expect(calloutContentField.nth(index)).toContainText(randomText);
+                await this.moveCursorAtBottom();
+            }
+            return [{ key: "callout" }];
+        };
         this.buttonsAndVerifications = {
             "font-size": () => this.verifyFontSize(),
             emoji: isButtonInMoreMenu => this.verifyEmojiSelector(isButtonInMoreMenu),
@@ -192904,6 +192936,7 @@ class EditorPage {
             undo: isButtonInMoreMenu => this.verifyUndoSelector(isButtonInMoreMenu),
             redo: isButtonInMoreMenu => this.verifyRedoSelector(isButtonInMoreMenu),
             table: isButtonInMoreMenu => this.verifyTableSelector(isButtonInMoreMenu),
+            callout: isButtonInMoreMenu => this.verifyCalloutSelector(isButtonInMoreMenu),
             "video-upload": isButtonInMoreMenu => this.verifyVideoUploadOption({
                 filePath: this.videoPath,
                 isButtonInMoreMenu,
@@ -192980,6 +193013,7 @@ class EditorPage {
             .getByTestId(COMMON_SELECTORS.dropdownIcon);
         this.contentField = this.editorWrapper.getByTestId(NEETO_EDITOR_SELECTORS.contentField);
         this.dynamicVariablesButton = this.editorWrapper.getByTestId(NEETO_EDITOR_SELECTORS.dynamicVariablesButton);
+        this.calloutSelector = this.editorWrapper.getByTestId(NEETO_EDITOR_SELECTORS.calloutOption);
         this.undoSelector = this.editorWrapper.getByTestId(NEETO_EDITOR_SELECTORS.undoOption);
         this.redoSelector = this.editorWrapper.getByTestId(NEETO_EDITOR_SELECTORS.redoOption);
         this.tableOption = this.editorWrapper.getByTestId(NEETO_EDITOR_SELECTORS.tableOption);
@@ -199097,7 +199131,7 @@ const definePlaywrightConfig = (overrides) => {
         use: {
             baseURL: process.env.BASE_URL,
             testIdAttribute: "data-cy",
-            trace: "retain-on-failure",
+            trace: "on",
             screenshot: "only-on-failure",
             navigationTimeout: 35000,
             actionTimeout: 10 * 1000,