npm - @bigbinary/neeto-playwright-commons - Versions diffs - 1.8.35 → 1.8.36 - Mend

@bigbinary/neeto-playwright-commons 1.8.35 → 1.8.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/index.cjs.js CHANGED Viewed

@@ -171,8 +171,10 @@ const skipTest = {
 const shouldSkipSetupAndTeardown = () => { var _a; return ((_a = getGlobalUserState()) === null || _a === void 0 ? void 0 : _a.isLoggedIn) && process.env.SKIP_SETUP === "true"; };
 // trims and replaces multiple whitespace characters in a string with a single space
 const squish = (text) => text.trim().replace(/\s+/g, " ");
+const toCamelCase = (string) => string.toLowerCase().replace(/( \w)/g, letter => letter[1].toUpperCase());
 const COMMON_SELECTORS = {
+    copyButton: "copy-button",
     spinner: ".neeto-ui-spinner",
     subheaderText: "subheader-left",
     alertTitle: "alert-title",
@@ -187,6 +189,7 @@ const COMMON_SELECTORS = {
     paneHeader: "pane-header",
     profileSidebar: "profile-section",
     selectOption: (label) => `${hyphenize(label)}-select-option`,
+    radioLabel: (embedLabel) => `${hyphenize(embedLabel)}-radio-label`,
     toastMessage: "toastr-message-container",
     toastCloseButton: "toastr-close-button",
     windowAlert: "#alert-box",
@@ -12293,6 +12296,210 @@ const i18nFixture = {
     },
 };
+const EMBED_SELECTORS = {
+    iframe: (appName) => `#${appName}-iframe`,
+    modal: (appName) => `#${appName}-modal`,
+    close: (appName) => `#close-${appName}`,
+    loader: (appName) => `#${appName}-loader`,
+    inlineHeightInput: "inline-height-input-field",
+    inlineWidthInput: "inline-width-input-field",
+    inlineElementIdInput: "inline-element-id-input-field",
+    codeBlock: "code-block",
+    previewTab: "preview-tab",
+    htmlTab: "html-tab",
+    buttonTextInput: "button-text-input-field",
+    buttonPositionSelectContainer: "button-position-select-value-container",
+    buttonPositionSelectMenu: "button-position-select-menu",
+    buttonColorLabel: "button-color-label",
+    buttonTextColorLabel: "button-text-color-label",
+    colorPickerTarget: "color-picker-target",
+    colorpickerEditableInput: "colorpicker-editable-input",
+    showIconCheckbox: "show-icon-checkbox",
+    elementIdInput: "element-id-input-field",
+    previewElementPopupButton: "preview-element-popup-button",
+};
+const basicHTMLContent = (content) => `
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+  </head>
+  <body>
+    ${content}
+  </body>
+</html>`;
+const hexToRGB = (hex) => {
+    let r = "", g = "", b = "";
+    if (hex.length === 4) {
+        r = `0x${hex[1]}${hex[1]}`;
+        g = `0x${hex[2]}${hex[2]}`;
+        b = `0x${hex[3]}${hex[3]}`;
+    }
+    else if (hex.length === 7) {
+        r = `0x${hex[1]}${hex[2]}`;
+        g = `0x${hex[3]}${hex[4]}`;
+        b = `0x${hex[5]}${hex[6]}`;
+    }
+    return `rgb(${Number(r)}, ${Number(g)}, ${Number(b)})`;
+};
+class EmbedBase {
+    constructor({ context, page, neetoPlaywrightUtilities, appName, }) {
+        this.initializeEmbedPage = async ({ embedType, embedCode, customElementText = "Click here", }) => {
+            this.embedTestPage = await this.context.newPage();
+            this.embedTestPageType = embedType;
+            const fileContent = basicHTMLContent(this.embedTestPageType === "elementClick"
+                ? `${embedCode}<a href='#' id='open-popup-button'>${customElementText}</a>`
+                : embedCode);
+            this.filePath = `tmp/${faker.faker.word.noun()}.html`;
+            fs$d.writeFileSync(this.filePath, fileContent, "utf8");
+            await this.embedTestPage.goto(`file://${Path__default["default"].resolve(this.filePath)}`);
+            await this.embedTestPage.waitForLoadState("load");
+            this.embeddedFrame = this.embedTestPage.frameLocator(this.embedTestPageType === "inline"
+                ? "iframe"
+                : EMBED_SELECTORS.iframe(this.appName));
+            return this.embedTestPage;
+        };
+        this.closeEmbedModalAndPage = async () => {
+            if (this.embedTestPageType !== "inline") {
+                await this.embedTestPage
+                    .locator(EMBED_SELECTORS.close(this.appName))
+                    .click();
+                await test$1.expect(this.embedTestPage.locator(EMBED_SELECTORS.modal(this.appName))).toBeHidden();
+            }
+            await this.embedTestPage.close();
+            await this.context.close();
+            fs$d.unlinkSync(this.filePath);
+        };
+        this.clickOnPopupButton = async (popUpButtonSelectorOptions) => {
+            const popUpButton = this.embedTestPage.getByRole(this.embedTestPageType === "floatingPopup" ? "button" : "link", popUpButtonSelectorOptions);
+            await test$1.expect(popUpButton).toBeVisible();
+            await popUpButton.click();
+            await test$1.expect(this.embedTestPage.locator(EMBED_SELECTORS.loader(this.appName))).toBeHidden({
+                timeout: 10000,
+            });
+        };
+        this.copyEmbedScript = async ({ embedLabel }) => {
+            await this.page
+                .getByTestId(COMMON_SELECTORS.radioLabel(embedLabel))
+                .check();
+            await this.page.getByTestId(COMMON_SELECTORS.copyButton).click();
+            return await this.page.evaluate(() => navigator.clipboard.readText());
+        };
+        this.selectEmbedType = async (embedLabel) => {
+            await this.page.getByTestId(EMBED_SELECTORS.htmlTab).click();
+            await this.page
+                .getByTestId(COMMON_SELECTORS.radioLabel(embedLabel))
+                .check();
+        };
+        this.verifyInlineCustomization = async ({ headingTestId, inlineEmbedInterceptParams, customizationOptions, }) => {
+            const embedHeightPercentage = `${customizationOptions.embedHeight}%`;
+            const embedWidthPercentage = `${customizationOptions.embedWidth}%`;
+            await this.page
+                .getByTestId(EMBED_SELECTORS.inlineHeightInput)
+                .fill(customizationOptions.embedHeight);
+            await this.page
+                .getByTestId(EMBED_SELECTORS.inlineWidthInput)
+                .fill(customizationOptions.embedWidth);
+            await this.page
+                .getByTestId(EMBED_SELECTORS.inlineElementIdInput)
+                .fill(customizationOptions.embedDivContainerId);
+            await this.expectMultipleTextsInCodeblock([
+                RegExp(`<div .* id="${customizationOptions.embedDivContainerId}">`),
+                `elementSelector: "#${customizationOptions.embedDivContainerId}"`,
+                `height: "${embedHeightPercentage}"`,
+                `width: "${embedWidthPercentage}"`,
+            ]);
+            const inlineEmbedPromise = this.neetoPlaywrightUtilities.interceptMultipleResponses(inlineEmbedInterceptParams);
+            await this.previewTab.click();
+            await inlineEmbedPromise;
+            const iframe = this.page.locator("iframe");
+            await iframe.waitFor({ state: "visible" });
+            await test$1.expect(this.page.frameLocator("iframe").getByTestId(headingTestId)).toBeVisible({ timeout: 10000 });
+            const iframeHeight = await iframe.evaluate(node => node.getAttribute("height"));
+            const iframeWidth = await iframe.evaluate(node => node.getAttribute("width"));
+            test$1.expect(iframeHeight).toStrictEqual(embedHeightPercentage);
+            test$1.expect(iframeWidth).toStrictEqual(embedWidthPercentage);
+        };
+        this.verifyFloatingPopupCustomization = async (customizationOptions) => {
+            await this.page
+                .getByTestId(EMBED_SELECTORS.buttonTextInput)
+                .fill(customizationOptions.buttonText);
+            await this.page
+                .getByTestId(EMBED_SELECTORS.buttonPositionSelectContainer)
+                .click();
+            await this.page
+                .getByTestId(EMBED_SELECTORS.buttonPositionSelectMenu)
+                .getByText(customizationOptions.buttonPosition)
+                .click();
+            await test$1.expect(this.page.getByTestId(EMBED_SELECTORS.buttonPositionSelectContainer)).toContainText(customizationOptions.buttonPosition);
+            const buttonColorLabel = this.page.getByTestId(EMBED_SELECTORS.buttonColorLabel);
+            await buttonColorLabel
+                .getByTestId(EMBED_SELECTORS.colorPickerTarget)
+                .click();
+            await this.page
+                .getByTestId(EMBED_SELECTORS.colorpickerEditableInput)
+                .getByRole("textbox")
+                .fill(customizationOptions.buttonColorHex);
+            const buttonTextColorLabel = this.page.getByTestId(EMBED_SELECTORS.buttonTextColorLabel);
+            // This additional click is to close the previously opened color picker for buttonColor.
+            await buttonTextColorLabel
+                .getByTestId(EMBED_SELECTORS.colorPickerTarget)
+                .click();
+            await buttonTextColorLabel
+                .getByTestId(EMBED_SELECTORS.colorPickerTarget)
+                .click();
+            await this.page
+                .getByTestId(EMBED_SELECTORS.colorpickerEditableInput)
+                .getByRole("textbox")
+                .fill(customizationOptions.buttonTextColorHex);
+            await this.page.getByTestId(EMBED_SELECTORS.showIconCheckbox).click();
+            await this.expectMultipleTextsInCodeblock([
+                `btnColor: "${customizationOptions.buttonColorHex}"`,
+                `btnTextColor: "${customizationOptions.buttonTextColorHex}"`,
+                `btnPosition: "${toCamelCase(customizationOptions.buttonPosition)}"`,
+                `btnText: "${customizationOptions.buttonText}"`,
+                "showIcon: false",
+            ]);
+            await this.previewTab.click();
+            const floatingButton = this.page.getByRole("button", {
+                name: customizationOptions.buttonText,
+            });
+            await test$1.expect(floatingButton).toHaveCSS("color", hexToRGB(customizationOptions.buttonTextColorHex));
+            await test$1.expect(floatingButton).toHaveCSS("background-color", hexToRGB(customizationOptions.buttonColorHex));
+            const classRegExp = customizationOptions.buttonPosition
+                .toLocaleLowerCase()
+                .replace(" ", ".*");
+            await test$1.expect(floatingButton).toHaveClass(RegExp(classRegExp));
+            await test$1.expect(floatingButton.locator("svg")).toBeHidden();
+        };
+        this.verifyElementClickCustomization = async (customizationOptions) => {
+            await this.page
+                .getByTestId(EMBED_SELECTORS.elementIdInput)
+                .fill(customizationOptions.customId);
+            await test$1.expect(this.codeBlock).toContainText(`elementSelector: "#${customizationOptions.customId}"`);
+            await this.previewTab.click();
+            await test$1.expect(this.page.getByTestId(EMBED_SELECTORS.previewElementPopupButton)).toBeVisible();
+            await test$1.expect(this.page.locator(`#${customizationOptions.customId}`)).toBeVisible();
+        };
+        this.expectMultipleTextsInCodeblock = async (containTextOptions) => {
+            const codeBlock = this.page.getByTestId(EMBED_SELECTORS.codeBlock);
+            for (const containTextOption of containTextOptions) {
+                await test$1.expect(codeBlock).toContainText(containTextOption);
+            }
+        };
+        this.context = context;
+        this.page = page;
+        this.neetoPlaywrightUtilities = neetoPlaywrightUtilities;
+        this.appName = appName;
+        this.t = playwrightI18nextFixture.getI18nInstance().t;
+        this.codeBlock = this.page.getByTestId(EMBED_SELECTORS.codeBlock);
+        this.previewTab = this.page.getByTestId(EMBED_SELECTORS.previewTab);
+    }
+}
 const BASE_URL = "/api/v1";
 const NEETO_AUTH_BASE_URL = (subdomain = "app") => `https://${subdomain}.neetoauth.net`;
 const ROUTES = {
@@ -146687,6 +146894,7 @@ exports.COMMON_SELECTORS = COMMON_SELECTORS;
 exports.CREDENTIALS = CREDENTIALS;
 exports.CustomCommands = CustomCommands;
 exports.ENVIRONMENT = ENVIRONMENT;
+exports.EmbedBase = EmbedBase;
 exports.GLOBAL_TRANSLATIONS_PATTERN = GLOBAL_TRANSLATIONS_PATTERN;
 exports.HELP_CENTER_SELECTORS = HELP_CENTER_SELECTORS;
 exports.HelpAndProfilePage = HelpAndProfilePage;
@@ -146748,6 +146956,7 @@ exports.skipTest = skipTest;
 exports.squish = squish;
 exports.stealthTest = stealth;
 exports.tableUtils = tableUtils;
+exports.toCamelCase = toCamelCase;
 exports.updateCredentials = updateCredentials;
 exports.writeDataToFile = writeDataToFile;
 //# sourceMappingURL=index.cjs.js.map