@bigbinary/neeto-playwright-commons 1.10.11 → 1.10.13

package/index.d.ts

@@ -73,6 +73,12 @@ interface SearchAndVerifyProps {
   searchInputSelector?: string;
   countText: string;
 }
+interface UploadFileViaDispatchProps {
+  fileNameWithType: string;
+  assetsPath?: string;
+  dispatchEvent?: string;
+  droppableZone?: Locator;
+}
 declare class CustomCommands {
   page: Page;
   responses: string[];
@@ -323,6 +329,33 @@ declare class CustomCommands {
    * @endexample
   */
   uploadImage: (localImagePath: string) => Promise<void>;
+  /**
+   *
+   * Function to upload a file by simulating a drop event onto a specified droppable zone on the page.
+   *
+   * React-dropzone, by default, uses File System API to upload files. Due to this we cannot use directly use waitForEvent("filechooser"). Ref: https://github.com/microsoft/playwright/issues/8850
+   *
+   * fileNameWithType: The name of the file to upload including its type extension (e.g., "images/example.png").
+   *
+   * assetsPath: The relative path to the assets directory where the file is located. Defaults to ../../../e2e/assets/.
+   *
+   * dispatchEvent: The type of event to dispatch to the droppable zone. Defaults to drop.
+   *
+   * droppableZone: The droppable zone element where the file will be dropped. Defaults to this.page.getByTestId("file-upload-body").
+   *
+   * @example 
+   *
+   * await uploadFileViaDispatch({
+   *   fileNameWithType: "files/sample.pdf",
+   * });
+   * @endexample
+  */
+  uploadFileViaDispatch: ({
+    fileNameWithType,
+    assetsPath,
+    dispatchEvent,
+    droppableZone
+  }: UploadFileViaDispatchProps) => Promise<void>;
   verifyTooltip: ({
     triggerElement,
     content
@@ -1144,6 +1177,7 @@ interface WebhooksPageParams {
 type CallbackFunction = (args: Record<string, unknown>) => void;
 interface VerifyWebhookResponseParams extends Record<string, unknown> {
   callback?: CallbackFunction;
+  parseFullResponseContent?: boolean;
   webhookToken: string;
 }
 interface VerifyWebhookDeliveriesParams extends Record<string, unknown> {
@@ -1204,6 +1238,8 @@ declare class WebhooksPage {
    *
    * webhookToken: Token of the webhook.
    *
+   * parseFullResponseContent: Option to pass the full response content to the callback function. Defaults to false.
+   *
    * Other parameters to be passed to the callback function.
    *
    * @example 
@@ -1217,6 +1253,7 @@ declare class WebhooksPage {
   verifyLatestWebhookResponse: ({
     callback,
     webhookToken,
+    parseFullResponseContent,
     ...otherParams
   }: VerifyWebhookResponseParams) => Promise<void>;
   /**
@@ -1391,7 +1428,6 @@ declare class ZapierPage extends IntegrationBase {
 interface VerifyDescriptionEditorParams {
   text: string;
   dynamicVariables?: string[];
-  defaultFontSizeOption?: string;
   linkUrl?: string;
   filePath?: string;
   imageUrl?: string;
@@ -1463,7 +1499,6 @@ declare class EditorPage {
   verifyDescriptionEditor: ({
     text,
     dynamicVariables,
-    defaultFontSizeOption,
     linkUrl,
     filePath,
     imageUrl,
@@ -2993,6 +3028,7 @@ declare const COMMON_SELECTORS: {
   submitButton: string;
   tableRow: string;
   navigationHeaderLeftBlock: string;
+  fileUploadBody: string;
 };
 /**
  *
@@ -3050,6 +3086,7 @@ declare const COMMON_SELECTORS: {
  *
 */
 declare const NEETO_EDITOR_SELECTORS: {
+  fontSize: string;
   boldOption: string;
   italicOption: string;
   underlineOption: string;
@@ -3073,7 +3110,6 @@ declare const NEETO_EDITOR_SELECTORS: {
   addLinkTextField: string;
   addURLTextField: string;
   submitLinkButton: string;
-  fontSizeDropdown: (currentOption: string) => string;
   fixedMenuArrow: string;
   cannedResponseOption: string;
   cannedResponseSelectContainer: string;

package/index.js

@@ -1,11 +1,11 @@
-import { execSync } from 'child_process';
 import * as fs$d from 'fs';
-import fs__default, { writeFileSync as writeFileSync$1, unlinkSync, readFileSync } from 'fs';
+import fs__default, { readFileSync, writeFileSync as writeFileSync$1, unlinkSync } from 'fs';
+import * as Path from 'path';
+import Path__default from 'path';
+import { execSync } from 'child_process';
 import test$1, { expect, test as test$2, defineConfig, devices } from '@playwright/test';
 import { curry, not, isEmpty as isEmpty$1, isNil, isNotNil, mergeDeepLeft, mergeAll } from 'ramda';
 import require$$0$1 from 'util';
-import * as Path from 'path';
-import Path__default from 'path';
 import { faker } from '@faker-js/faker';
 import MailosaurClient from 'mailosaur';
 import dayjs from 'dayjs';
@@ -331,6 +331,7 @@ const COMMON_SELECTORS = {
     submitButton: "submit-button",
     tableRow: ".ant-table-row",
     navigationHeaderLeftBlock: "navigation-header-left-block",
+    fileUploadBody: "file-upload-body",
 };
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -3579,9 +3580,25 @@ class CustomCommands {
             await uploadFile;
             await expect(this.page.getByTestId(NEETO_IMAGE_UPLOADER_SELECTORS.uploadedImage)).toHaveAttribute("src", new RegExp(imageName), { timeout: 20000 });
         };
+        this.uploadFileViaDispatch = async ({ fileNameWithType, assetsPath = "../../../e2e/assets/", dispatchEvent = "drop", droppableZone = this.page.getByTestId(COMMON_SELECTORS.fileUploadBody), }) => {
+            const filePath = Path__default.join(__dirname, `${assetsPath}/${fileNameWithType}`);
+            const buffer = readFileSync(filePath).toString("base64");
+            const dataTransfer = await droppableZone.evaluateHandle((_, { buffer, fileNameWithType }) => {
+                var _a;
+                const dataTransfer = new DataTransfer();
+                const fileName = (_a = fileNameWithType.split("/")) === null || _a === void 0 ? void 0 : _a[1];
+                const hexString = Uint8Array.from(atob(buffer), c => c.charCodeAt(0));
+                const file = new File([hexString], fileName);
+                dataTransfer.items.add(file);
+                return dataTransfer;
+            }, { buffer, fileNameWithType });
+            await droppableZone.dispatchEvent(dispatchEvent, { dataTransfer });
+        };
         this.verifyTooltip = async ({ triggerElement, content, }) => {
             await triggerElement.hover();
             await expect(this.page.getByTestId(COMMON_SELECTORS.tooltip)).toContainText(content);
+            await this.page.mouse.move(0, 0);
+            await expect(this.page.getByTestId(COMMON_SELECTORS.tooltip)).toBeHidden();
         };
         this.page = page;
         this.responses = [];
@@ -13469,14 +13486,16 @@ class WebhooksPage {
             await addWebhook;
             await expect(this.page.getByRole("row", { name: webhookSiteURL })).toBeVisible();
         };
-        this.verifyLatestWebhookResponse = async ({ callback = () => { }, webhookToken, ...otherParams }) => {
+        this.verifyLatestWebhookResponse = async ({ callback = () => { }, webhookToken, parseFullResponseContent = false, ...otherParams }) => {
             let response;
             await expect(async () => {
                 response = await this.request.get(`https://webhook.site/token/${webhookToken}/request/latest`);
                 expect(response.status()).toBe(200);
                 if (response.status() === 200) {
                     const { content } = await response.json();
-                    const parsedResponse = JSON.parse(content).webhook;
+                    const parsedResponse = parseFullResponseContent
+                        ? JSON.parse(content)
+                        : JSON.parse(content).webhook;
                     callback({ parsedResponse, ...otherParams });
                 }
             }).toPass({ timeout: 20000 });
@@ -13769,6 +13788,7 @@ const optionSelector = (option) => `neeto-editor-fixed-menu-${option}-option`;
 const fixedMenuSelector = (selector) => `neeto-editor-fixed-menu-${selector}`;
 
 const NEETO_EDITOR_SELECTORS = {
+    fontSize: optionSelector("font-size"),
     boldOption: optionSelector("bold"),
     italicOption: optionSelector("italic"),
     underlineOption: optionSelector("underline"),
@@ -13792,7 +13812,6 @@ const NEETO_EDITOR_SELECTORS = {
     addLinkTextField: "neeto-editor-add-link-text-input",
     addURLTextField: "neeto-editor-add-link-url-input",
     submitLinkButton: "neeto-editor-add-link",
-    fontSizeDropdown: (currentOption) => `${joinHyphenCase(currentOption)}-dropdown-icon`,
     fixedMenuArrow: fixedMenuSelector("arrow"),
     cannedResponseOption: optionSelector("canned-responses"),
     cannedResponseSelectContainer: "select-a-canned-response-select-container",
@@ -13855,10 +13874,9 @@ class EditorPage {
                 (await this.moreMenuSelector.click());
             return optionLocator.isVisible();
         };
-        this.verifyFontSize = async (defaultFontSizeOption) => {
-            await this.editorWrapper
-                .getByTestId(NEETO_EDITOR_SELECTORS.fontSizeDropdown(defaultFontSizeOption))
-                .click();
+        this.verifyFontSize = async () => {
+            const fontSizeDropdown = this.editorWrapper.getByTestId(NEETO_EDITOR_SELECTORS.fontSize);
+            await fontSizeDropdown.click();
             const fontSize = Object.keys(FONT_SIZE_SELECTORS);
             for (const font of fontSize) {
                 const fontKey = font;
@@ -13866,9 +13884,7 @@ class EditorPage {
                     .getByTestId(FONT_SIZE_SELECTORS[fontKey])
                     .click();
                 await expect(this.contentField.getByRole("heading", { level: Number(font.slice(1)) })).toBeVisible();
-                await this.editorWrapper
-                    .getByTestId(NEETO_EDITOR_SELECTORS.fontSizeDropdown(EXPANDED_FONT_SIZE[fontKey]))
-                    .click();
+                await fontSizeDropdown.click();
             }
         };
         this.verifyTextModifiers = async () => {
@@ -14028,9 +14044,9 @@ class EditorPage {
                 await expect(this.contentField.getByText(dynamicVariable)).toBeVisible();
             }
         };
-        this.verifyDescriptionEditor = async ({ text, dynamicVariables, defaultFontSizeOption = "Paragraph", linkUrl = faker.internet.url(), filePath = "../../../e2e/assets/images/BigBinary.png", imageUrl = "https://picsum.photos/200/300", videoUrl = "https://youtu.be/jNQXAC9IVRw", cannedResponseSuccessMessage, }) => {
+        this.verifyDescriptionEditor = async ({ text, dynamicVariables, linkUrl = faker.internet.url(), filePath = "../../../e2e/assets/images/BigBinary.png", imageUrl = "https://picsum.photos/200/300", videoUrl = "https://youtu.be/jNQXAC9IVRw", cannedResponseSuccessMessage, }) => {
             await this.contentField.fill(text);
-            await this.verifyFontSize(defaultFontSizeOption);
+            await this.verifyFontSize();
             if (await this.assertOptionVisibility(this.paragraphSelector)) {
                 await this.paragraphSelector.click();
                 const paragraphRole = DESCRIPTION_EDITOR_TEXTS.paragraphOption;