@bigbinary/neeto-playwright-commons 1.5.1 → 1.6.0

package/index.cjs.js

@@ -170,24 +170,30 @@ const COMMON_SELECTORS = {
     subheader: "subheader",
     settingsLink: "Settings",
     ticketFieldTextInput: (label) => `${hyphenize(label)}-text-input`,
+    appSwitcherButton: "app-switcher-button",
+    appSwitcherWrapper: "switcher-wrapper",
+    tableSpinner: ".ant-spin",
 };
 
 class CustomCommands {
     constructor(page, request) {
-        this.interceptMultipleResponses = ({ responseUrl = "", times = 1, baseUrl, }) => Promise.all([...new Array(times)].map(() => this.page.waitForResponse((response) => {
-            var _a, _b, _c;
-            if (response.request().resourceType() === "xhr" &&
-                response.status() === 200 &&
-                response.url().includes(responseUrl) &&
-                response
-                    .url()
-                    .startsWith((_a = baseUrl !== null && baseUrl !== void 0 ? baseUrl : process.env.BASE_URL) !== null && _a !== void 0 ? _a : "") &&
-                !this.responses.includes((_b = response.headers()) === null || _b === void 0 ? void 0 : _b["x-request-id"])) {
-                this.responses.push((_c = response.headers()) === null || _c === void 0 ? void 0 : _c["x-request-id"]);
-                return true;
-            }
-            return false;
-        }, { timeout: 10000 })));
+        this.interceptMultipleResponses = ({ responseUrl = "", times = 1, baseUrl, customPageContext, timeout = 10000, } = {}) => {
+            const pageContext = customPageContext !== null && customPageContext !== void 0 ? customPageContext : this.page;
+            return Promise.all([...new Array(times)].map(() => pageContext.waitForResponse((response) => {
+                var _a, _b, _c;
+                if (response.request().resourceType() === "xhr" &&
+                    response.status() === 200 &&
+                    response.url().includes(responseUrl) &&
+                    response
+                        .url()
+                        .startsWith((_a = baseUrl !== null && baseUrl !== void 0 ? baseUrl : process.env.BASE_URL) !== null && _a !== void 0 ? _a : "") &&
+                    !this.responses.includes((_b = response.headers()) === null || _b === void 0 ? void 0 : _b["x-request-id"])) {
+                    this.responses.push((_c = response.headers()) === null || _c === void 0 ? void 0 : _c["x-request-id"]);
+                    return true;
+                }
+                return false;
+            }, { timeout })));
+        };
         this.recursiveMethod = async (callback, condition, timeout, startTime) => {
             if (Date.now() - timeout >= startTime) {
                 return false;
@@ -7160,10 +7166,14 @@ const i18nFixture = {
 };
 
 const BASE_URL = "/api/v1";
+const NEETO_AUTH_BASE_URL = (subdomain = "app") => `https://${subdomain}.neetoauth.net`;
 const ROUTES = {
-    neetoAuth: "https://app.neetoauth.net",
-    neetoAuthSignup: "https://app.neetoauth.net/signups/new",
+    neetoAuthSignup: `${NEETO_AUTH_BASE_URL()}/signups/new`,
+    neetoAuth: NEETO_AUTH_BASE_URL(),
+    loginLink: "/login",
     profile: "/profile",
+    myProfile: "/my/profile",
+    authSettings: "/settings",
     login: `${BASE_URL}/login`,
     signup: `${BASE_URL}/signups`,
     subdomainAvailability: `${BASE_URL}/subdomain_availability`,
@@ -7177,6 +7187,256 @@ const ROUTES = {
     },
 };
 
+const CHAT_WIDGET_TEXTS = {
+    newConversation: "New Conversation",
+    welcomeChatBubble: "Hi! I'm here to assist you with any questions you may have. What can I do for you?",
+};
+
+const HELP_CENTER_SELECTORS = {
+    helpButton: "help-button",
+    documentationButton: "help-link-help-center-button",
+    keyboardShortcutButton: "help-link-keyboard-shortcut-button",
+    chatButton: "help-link-live-chat-button",
+    whatsNewButton: "help-link-changelog-button",
+    whatsNewWidgetInfo: "h1",
+    whatsNewWidgetCloseButton: ".nc-widget-header__btn",
+    keyboardShortcutPaneHeading: "keyboard-shortcuts-pane-title",
+    keyboardShortcutPaneCrossIcon: "keyboard-shortcuts-pane-close-button",
+};
+
+const PROFILE_SECTION_SELECTORS = {
+    profileSectionButton: "profile-section",
+    myProfileButton: "my-profile-button",
+    profileOrganizationSettingsButton: "profile-organization-settings-button",
+    logoutButton: "profile-logout-button",
+};
+
+const CHAT_WIDGET_SELECTORS = {
+    iframe: "#neetochat-iframe",
+    spinner: ".neeto-chat-widget-spinner",
+    helpButton: "help-button",
+    preChatEmailInput: "neeto-chat-widget-input",
+    preChatSubmitButton: "neeto-chat-widget-pre-chat-submit-btn",
+    chatBubble: "neeto-chat-widget-chat-message-bubble",
+    closeChat: "neeto-chat-widget-close-btn",
+};
+const CHANGELOG_WIDGET_SELECTORS = {
+    changelogWrapper: ".nc-widget__wrapper",
+    closeButton: "nc-widget-close-btn",
+    publicUrlLink: "nc-widget-public-url",
+};
+const KEYBOARD_SHORTCUTS_SELECTORS = {
+    keyboardShortcutsPane: "keyboard-shortcuts-pane",
+    closePaneButton: "keyboard-shortcuts-pane-close-button",
+    hotKeyItem: "hotkey-item",
+};
+
+/* eslint-disable playwright/require-top-level-describe */
+class HelpAndProfilePage {
+    constructor({ page, neetoPlaywrightUtilities, chatApiBaseURL, kbDocsBaseURL, changelogBaseURL, }) {
+        this.openHelpCenter = async () => {
+            await test.expect(async () => {
+                const helpButton = this.page.getByTestId(CHAT_WIDGET_SELECTORS.helpButton);
+                await helpButton.scrollIntoViewIfNeeded();
+                await helpButton.hover();
+                await test.expect(this.page.getByTestId(HELP_CENTER_SELECTORS.chatButton)).toBeVisible();
+            }).toPass({ timeout: 15000 });
+        };
+        this.openLiveChatAndVerify = async () => {
+            await this.page.getByTestId(HELP_CENTER_SELECTORS.chatButton).click();
+            await test.expect(this.neetoChatWidget).toBeVisible();
+            await test.expect(this.neetoChatSpinner).toBeHidden();
+        };
+        this.openAndVerifyChatWidget = async () => {
+            await this.neetoPlaywrightUtilities.interceptMultipleResponses({
+                baseUrl: this.chatApiBaseURL,
+                times: 3,
+            });
+            await test.test.step("Step 1: Open Help Center links", this.openHelpCenter);
+            await test.test.step("Step 2: Open live chat and verify iframe", this.openLiveChatAndVerify);
+            await test.test.step("Step 3: Close and reopen live chat frame", async () => {
+                await this.page.getByTestId(CHAT_WIDGET_SELECTORS.closeChat).click();
+                await test.expect(this.neetoChatWidget).toBeHidden();
+                await this.openHelpCenter();
+                await this.openLiveChatAndVerify();
+            });
+            await test.test.step("Step 4: Start new conversation", async () => {
+                const newConversationButton = this.neetoChatFrame.getByRole("button", {
+                    name: CHAT_WIDGET_TEXTS.newConversation,
+                });
+                await test.expect(newConversationButton).toBeVisible(); // Adding additional toBeVisible to take advantage of the auto-retrying web-first assertion
+                await newConversationButton.click();
+                await test.expect(this.neetoChatSpinner).toBeHidden();
+            });
+            await test.test.step("Step 5: Fill and submit email", async () => {
+                var _a, _b;
+                await this.neetoChatFrame
+                    .getByTestId(CHAT_WIDGET_SELECTORS.preChatEmailInput)
+                    .fill((_b = (_a = readFileSyncIfExists()) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.email);
+                await this.neetoChatFrame
+                    .getByTestId(CHAT_WIDGET_SELECTORS.preChatSubmitButton)
+                    .getByRole("button")
+                    .click();
+                await test.expect(this.neetoChatSpinner).toBeHidden();
+            });
+            await test.test.step("Step 6: Verify conversation window", async () => {
+                await test.expect(this.neetoChatFrame.getByTestId(CHAT_WIDGET_SELECTORS.chatBubble)).toHaveText(CHAT_WIDGET_TEXTS.welcomeChatBubble);
+            });
+        };
+        this.openAndVerifyHelpArticles = async () => {
+            await test.test.step("Step 1: Open Help Center links", this.openHelpCenter);
+            await test.test.step("Step 2: Open and verify help articles link", async () => {
+                const helpArticlesPromise = this.page.waitForEvent("popup");
+                await this.page
+                    .getByTestId(HELP_CENTER_SELECTORS.documentationButton)
+                    .click();
+                const helpArticlesPage = await helpArticlesPromise;
+                await helpArticlesPage.waitForLoadState();
+                await test.expect(helpArticlesPage).toHaveURL(this.kbDocsBaseURL);
+                await helpArticlesPage.close();
+            });
+        };
+        this.openChangelogPane = async () => {
+            await this.page.getByTestId(HELP_CENTER_SELECTORS.whatsNewButton).click();
+            await test.expect(this.page.locator(CHANGELOG_WIDGET_SELECTORS.changelogWrapper)).toBeVisible();
+        };
+        this.openAndVerifyChangelog = async () => {
+            await test.test.step("Step 1: Open Help Center links", this.openHelpCenter);
+            await test.test.step("Step 2: Open and verify changelog pane", this.openChangelogPane);
+            await test.test.step("Step 3: Close and reopen changelog pane", async () => {
+                await this.page
+                    .getByTestId(CHANGELOG_WIDGET_SELECTORS.closeButton)
+                    .click();
+                await test.expect(this.page.locator(CHANGELOG_WIDGET_SELECTORS.changelogWrapper)).toBeHidden();
+                await this.openHelpCenter();
+                await this.openChangelogPane();
+            });
+            await test.test.step("Step 4: Open and verify public URL", async () => {
+                const changelogPagePromise = this.page.waitForEvent("popup");
+                await this.page
+                    .getByTestId(CHANGELOG_WIDGET_SELECTORS.publicUrlLink)
+                    .click();
+                const changelogPage = await changelogPagePromise;
+                await this.neetoPlaywrightUtilities.interceptMultipleResponses({
+                    customPageContext: changelogPage,
+                    baseUrl: this.changelogBaseURL.split("/site")[0],
+                    times: 3,
+                });
+                await test.expect(changelogPage).toHaveURL(this.changelogBaseURL);
+                await changelogPage.close();
+            });
+        };
+        this.formatKeyboardShortcut = (shortcut, osPlatform = "windows") => {
+            const formattedShortcut = shortcut
+                .replaceAll(" ", "then")
+                .replaceAll("+", "");
+            return osPlatform === "mac"
+                ? formattedShortcut.replace(/ctrl/g, "⌘")
+                : formattedShortcut;
+        };
+        this.openAndVerifyKeyboardShortcutsPane = async (productShortcuts, osPlatform = "windows") => {
+            const globalShortcuts = [
+                {
+                    description: this.t("neetoMolecules.keyboardShortcuts.global.openKeyboardShortcutsPane"),
+                    sequence: "shift+/",
+                },
+                {
+                    description: this.t("neetoMolecules.keyboardShortcuts.global.close"),
+                    sequence: "esc",
+                },
+                {
+                    description: this.t("neetoMolecules.keyboardShortcuts.global.submitForm"),
+                    sequence: "ctrl+enter",
+                },
+            ];
+            const shortcuts = [...globalShortcuts, ...productShortcuts];
+            await test.test.step("Step 1: Open Help Center", this.openHelpCenter);
+            await test.test.step("Step 2: Open and close keyboard shortcuts from UI", async () => {
+                await this.page
+                    .getByTestId(HELP_CENTER_SELECTORS.keyboardShortcutButton)
+                    .click();
+                await test.expect(this.page.getByTestId(KEYBOARD_SHORTCUTS_SELECTORS.keyboardShortcutsPane)).not.toHaveCSS("width", "1px");
+                await this.page
+                    .getByTestId(KEYBOARD_SHORTCUTS_SELECTORS.closePaneButton)
+                    .click();
+                await test.expect(this.page.getByTestId(KEYBOARD_SHORTCUTS_SELECTORS.keyboardShortcutsPane)).toHaveCSS("width", "1px");
+            });
+            await test.test.step("Step 3: Open and close keyboard shortcuts through shortcut", async () => {
+                await this.page.keyboard.press("Shift+/");
+                await test.expect(this.page.getByTestId(KEYBOARD_SHORTCUTS_SELECTORS.keyboardShortcutsPane)).not.toHaveCSS("width", "1px");
+                await this.page.keyboard.press("Escape");
+                await test.expect(this.page.getByTestId(KEYBOARD_SHORTCUTS_SELECTORS.keyboardShortcutsPane)).toHaveCSS("width", "1px");
+            });
+            await test.test.step("Step 4: Verify all displayed keyboard shortcuts", async () => {
+                await this.page.keyboard.press("Shift+/");
+                await test.expect(this.page.getByTestId(KEYBOARD_SHORTCUTS_SELECTORS.keyboardShortcutsPane)).not.toHaveCSS("width", "1px");
+                await test.expect(this.page
+                    .getByTestId(KEYBOARD_SHORTCUTS_SELECTORS.hotKeyItem)
+                    .locator("p")).toHaveText(shortcuts.map(shortcut => shortcut.description));
+                const formattedSequences = shortcuts.map(shortcut => this.formatKeyboardShortcut(shortcut.sequence, osPlatform));
+                await test.expect(this.page
+                    .getByTestId(KEYBOARD_SHORTCUTS_SELECTORS.hotKeyItem)
+                    .locator("div")).toHaveText(formattedSequences);
+            });
+        };
+        this.openAppSwitcherAndVerify = async () => {
+            const appSwitcher = this.page.getByTestId(COMMON_SELECTORS.appSwitcherButton);
+            await test.test.step("Step 1: Verify hovering over app switcher opens the app switcher drawer", () => test.expect(async () => {
+                await appSwitcher.scrollIntoViewIfNeeded();
+                await appSwitcher.hover();
+                await test.expect(this.page.getByTestId(COMMON_SELECTORS.appSwitcherWrapper)).toBeVisible();
+            }).toPass({ timeout: 15000 }));
+        };
+        this.openProfilePopup = () => test.expect(async () => {
+            await this.profileSectionButton.scrollIntoViewIfNeeded();
+            await this.profileSectionButton.hover();
+            await test.expect(this.profileSectionButton).toBeVisible();
+        }).toPass({ timeout: 15000 });
+        this.openAuthLinkAndVerify = async ({ linkSelector, redirectLink, }) => {
+            var _a, _b;
+            const profilePagePromise = this.page.waitForEvent("popup");
+            await this.page.getByTestId(linkSelector).click();
+            const profilePage = await profilePagePromise;
+            await profilePage.waitForLoadState();
+            await test.expect(profilePage).toHaveURL(new RegExp(NEETO_AUTH_BASE_URL((_b = (_a = readFileSyncIfExists()) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.subdomainName)));
+            await test.expect(profilePage).toHaveURL(new RegExp(redirectLink));
+            await profilePage.close();
+        };
+        this.verifyProfileAndOrganizationLinks = async () => {
+            await test.test.step("Step 1: Open Profile popup and verify", this.openProfilePopup);
+            await test.test.step("Step 2: Open My profile link and verify", async () => this.openAuthLinkAndVerify({
+                linkSelector: PROFILE_SECTION_SELECTORS.myProfileButton,
+                redirectLink: ROUTES.myProfile,
+            }));
+            await test.test.step("Step 3: Open Profile popup and verify", this.openProfilePopup);
+            await test.test.step("Step 4: Open My organization link and verify", async () => this.openAuthLinkAndVerify({
+                linkSelector: PROFILE_SECTION_SELECTORS.profileOrganizationSettingsButton,
+                redirectLink: ROUTES.authSettings,
+            }));
+        };
+        this.verifyLogout = async () => {
+            await test.test.step("Step 1: Open Profile popup and verify", this.openProfilePopup);
+            await test.test.step("Step 2: Click logout and verify", async () => {
+                await this.page
+                    .getByTestId(PROFILE_SECTION_SELECTORS.logoutButton)
+                    .click();
+                await test.expect(this.page).toHaveURL(NEETO_AUTH_BASE_URL());
+                await test.expect(this.page).toHaveURL(new RegExp(ROUTES.loginLink));
+            });
+        };
+        this.page = page;
+        this.neetoPlaywrightUtilities = neetoPlaywrightUtilities;
+        this.chatApiBaseURL = chatApiBaseURL;
+        this.kbDocsBaseURL = kbDocsBaseURL;
+        this.changelogBaseURL = changelogBaseURL;
+        this.neetoChatWidget = this.page.locator(CHAT_WIDGET_SELECTORS.iframe);
+        this.neetoChatFrame = this.neetoChatWidget.frameLocator(":scope"); // Converting locator to a framelocator
+        this.neetoChatSpinner = this.neetoChatFrame.locator(CHAT_WIDGET_SELECTORS.spinner);
+        this.profileSectionButton = this.page.getByTestId(PROFILE_SECTION_SELECTORS.profileSectionButton);
+        this.t = playwrightI18nextFixture.getI18nInstance().t;
+    }
+}
+
 const SIGNUP_SELECTORS = {
     emailTextField: "signup-email-text-field",
     firstNameTextField: "signup-profile-first-name-text-field",
@@ -7212,7 +7472,7 @@ class OrganizationPage {
             await this.page.getByTestId(SIGNUP_SELECTORS.emailTextField).fill(email);
             const signup = this.neetoPlaywrightUtilities.interceptMultipleResponses({
                 responseUrl: ROUTES.signup,
-                baseUrl: ROUTES.neetoAuth,
+                baseUrl: NEETO_AUTH_BASE_URL(),
             });
             await this.page.getByTestId(SIGNUP_SELECTORS.submitButton).click();
             await signup;
@@ -7247,7 +7507,7 @@ class OrganizationPage {
             await this.page.getByTestId(COMMON_SELECTORS.checkbox).click();
             const submitProfile = this.neetoPlaywrightUtilities.interceptMultipleResponses({
                 responseUrl: ROUTES.signup,
-                baseUrl: ROUTES.neetoAuth,
+                baseUrl: NEETO_AUTH_BASE_URL(),
             });
             await this.page.getByTestId(SIGNUP_SELECTORS.profileSubmitButton).click();
             await submitProfile;
@@ -7310,6 +7570,11 @@ class OrganizationPage {
     }
 }
 
+const USER_AGENTS = {
+    windows: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36",
+    mac: "Mozilla/5.0 (Macintosh; Intel Mac OS X 14_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+};
+
 const NEETO_EDITOR_SELECTORS = {
     boldOption: "neeto-editor-fixed-menu-bold-option",
     italicOption: "neeto-editor-fixed-menu-italic-option",
@@ -7347,25 +7612,6 @@ const NEETO_FILTERS_SELECTORS = {
     paneModalCrossIcon: "neeto-filters-close-button",
 };
 
-const HELP_CENTER_SELECTORS = {
-    helpButton: "help-button",
-    documentationButton: "help-link-help-center-button",
-    keyboardShortcutButton: "help-link-keyboard-shortcut-button",
-    chatButton: "help-link-live-chat-button",
-    whatsNewButton: "help-link-changelog-button",
-    whatsNewWidgetInfo: "h1",
-    whatsNewWidgetCloseButton: ".nc-widget-header__btn",
-    keyboardShortcutPaneHeading: "keyboard-shortcuts-pane-title",
-    keyboardShortcutPaneCrossIcon: "keyboard-shortcuts-pane-close-button",
-};
-const CHAT_WIDGET_SELECTORS = {
-    chatWidgetHomeCard: "neeto-chat-widget-cta-title",
-    widgetSubmitButton: "neeto-chat-widget-pre-chat-submit-btn",
-    chatBubbleMessage: "neeto-chat-widget-chat-message-bubble",
-    chatCloseButton: ".neeto-chat-widget-icon--close",
-    widgetIframe: "#neetochat-iframe",
-};
-
 const LOGIN_SELECTORS = {
     appleAuthenticationButton: "apple-authentication-button",
     emailTextField: "login-email-text-field",
@@ -7968,8 +8214,9 @@ main.expand = expand;
 
 // @ts-check
 var _a, _b;
+process.env.TEST_ENV = (_a = process.env.TEST_ENV) !== null && _a !== void 0 ? _a : ENVIRONMENT.development;
 const env = main$2.exports.config({
-    path: `./e2e/config/.env.${(_a = process.env.TEST_ENV) !== null && _a !== void 0 ? _a : "development"}`,
+    path: `./e2e/config/.env.${process.env.TEST_ENV}`,
 });
 main.expand(env);
 if (require$$0__namespace.existsSync("./e2e/config/.env.local")) {
@@ -8024,6 +8271,7 @@ const definePlaywrightConfig = (overrides) => {
 };
 
 exports.BASE_URL = BASE_URL;
+exports.CHANGELOG_WIDGET_SELECTORS = CHANGELOG_WIDGET_SELECTORS;
 exports.CHAT_WIDGET_SELECTORS = CHAT_WIDGET_SELECTORS;
 exports.COMMON_SELECTORS = COMMON_SELECTORS;
 exports.CREDENTIALS = CREDENTIALS;
@@ -8031,22 +8279,27 @@ exports.CustomCommands = CustomCommands;
 exports.ENVIRONMENT = ENVIRONMENT;
 exports.GLOBAL_TRANSLATIONS_PATTERN = GLOBAL_TRANSLATIONS_PATTERN;
 exports.HELP_CENTER_SELECTORS = HELP_CENTER_SELECTORS;
+exports.HelpAndProfilePage = HelpAndProfilePage;
 exports.IS_STAGING_ENV = IS_STAGING_ENV;
+exports.KEYBOARD_SHORTCUTS_SELECTORS = KEYBOARD_SHORTCUTS_SELECTORS;
 exports.LOGIN_SELECTORS = LOGIN_SELECTORS;
 exports.MEMBER_FORM_SELECTORS = MEMBER_FORM_SELECTORS;
 exports.MEMBER_SELECTORS = MEMBER_SELECTORS;
 exports.MERGE_TAGS_SELECTORS = MERGE_TAGS_SELECTORS;
 exports.MailosaurUtils = MailosaurUtils;
+exports.NEETO_AUTH_BASE_URL = NEETO_AUTH_BASE_URL;
 exports.NEETO_EDITOR_SELECTORS = NEETO_EDITOR_SELECTORS;
 exports.NEETO_FILTERS_SELECTORS = NEETO_FILTERS_SELECTORS;
 exports.OTP_EMAIL_PATTERN = OTP_EMAIL_PATTERN;
 exports.OrganizationPage = OrganizationPage;
+exports.PROFILE_SECTION_SELECTORS = PROFILE_SECTION_SELECTORS;
 exports.PROJECT_TRANSLATIONS_PATH = PROJECT_TRANSLATIONS_PATH;
 exports.ROLES_SELECTORS = ROLES_SELECTORS;
 exports.ROUTES = ROUTES;
 exports.SIGNUP_SELECTORS = SIGNUP_SELECTORS;
 exports.STORAGE_STATE = STORAGE_STATE;
 exports.TAGS_SELECTORS = TAGS_SELECTORS;
+exports.USER_AGENTS = USER_AGENTS;
 exports.clearCredentials = clearCredentials;
 exports.commands = commands;
 exports.definePlaywrightConfig = definePlaywrightConfig;