@salesforcedevs/sfdocs-e2e 1.0.12-fix-ver-picker → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/sfdocs-e2e",
-  "version": "1.0.12-fix-ver-picker",
+  "version": "1.0.12",
   "description": "E2E test suite for SFDocs static portal pages (SSG)",
   "license": "ISC",
   "bin": {

package/src/shared/pageobjects/content-action-toolbar.ts

@@ -0,0 +1,101 @@
+class ContentActionToolbar {
+    HOST_SELECTOR = 'doc-content-action-toolbar';
+    INLINE_BUTTON_SELECTOR = 'dx-button.toolbar-button';
+    MENU_TRIGGER_SELECTOR = 'dx-button.menu-trigger';
+    MENU_SELECTOR = 'dx-dropdown.toolbar-menu';
+    MENU_GROUP_SELECTOR = 'div.menu_option';
+    MENU_HEADING_SELECTOR = 'span.menu_heading';
+    MENU_OPTION_SELECTOR = 'dx-dropdown-option';
+    OPTION_LABEL_SELECTOR = 'div.option_label';
+    COPIED_TOOLTIP_SELECTOR = '[role="tooltip"].is-visible';
+
+    async get(): Promise<WebdriverIO.Element> {
+        const toolbar = await $(`>>>${this.HOST_SELECTOR}`);
+        await toolbar.waitForDisplayed();
+        return toolbar;
+    }
+
+    async isPresent(): Promise<boolean> {
+        return (await $(`>>>${this.HOST_SELECTOR}`)).isExisting();
+    }
+
+    async getInlineButtonLabels(toolbar: WebdriverIO.Element): Promise<string[]> {
+        const inlineButtons = await toolbar.shadow$$(this.INLINE_BUTTON_SELECTOR);
+        return Promise.all(inlineButtons.map(async (button) => (await button.getText()).trim()));
+    }
+
+    async openMoreActionsMenu(toolbar: WebdriverIO.Element): Promise<void> {
+        const trigger = await toolbar.shadow$(this.MENU_TRIGGER_SELECTOR);
+        await trigger.waitForClickable();
+        await trigger.click();
+    }
+
+    async getMenuOptionLabelsByGroup(
+        toolbar: WebdriverIO.Element,
+    ): Promise<Record<string, string[]>> {
+        const dropdown = await toolbar.shadow$(this.MENU_SELECTOR);
+        const groupContainers = await dropdown.shadow$$(this.MENU_GROUP_SELECTOR);
+
+        const labelsByGroup: Record<string, string[]> = {};
+        for (const group of groupContainers) {
+            const heading = (await (await group.$(this.MENU_HEADING_SELECTOR)).getText()).trim();
+            const options = await group.$$(this.MENU_OPTION_SELECTOR);
+            labelsByGroup[heading] = await Promise.all(
+                options.map(async (option) =>
+                    (await (await option.shadow$(this.OPTION_LABEL_SELECTOR)).getText()).trim(),
+                ),
+            );
+        }
+        return labelsByGroup;
+    }
+
+    async clickMenuOption(toolbar: WebdriverIO.Element, label: string): Promise<void> {
+        const dropdown = await toolbar.shadow$(this.MENU_SELECTOR);
+        const options = await dropdown.shadow$$(this.MENU_OPTION_SELECTOR);
+        for (const option of options) {
+            const optionLabel = (
+                await (await option.shadow$(this.OPTION_LABEL_SELECTOR)).getText()
+            ).trim();
+            if (optionLabel === label) {
+                await option.click();
+                return;
+            }
+        }
+        throw new Error(`Menu option "${label}" not found`);
+    }
+
+    async getUrlFromNewTab(action: () => Promise<void>): Promise<string> {
+        const originalHandle = await browser.getWindowHandle();
+        const handlesBefore = await browser.getWindowHandles();
+
+        await action();
+
+        await browser.waitUntil(
+            async (): Promise<boolean> =>
+                (await browser.getWindowHandles()).length > handlesBefore.length,
+            {
+                timeout: 10000,
+                timeoutMsg: 'Expected a new browser tab to open',
+            },
+        );
+
+        const handlesAfter = await browser.getWindowHandles();
+        const newHandle = handlesAfter.find((handle) => !handlesBefore.includes(handle));
+        if (!newHandle) {
+            throw new Error('New browser tab opened but its handle could not be resolved');
+        }
+        await browser.switchToWindow(newHandle);
+        const url = await browser.getUrl();
+
+        await browser.closeWindow();
+        await browser.switchToWindow(originalHandle);
+        return url;
+    }
+
+    async getVisibleCopiedTooltipLabel(): Promise<string> {
+        const tooltip = await $(`>>>${this.COPIED_TOOLTIP_SELECTOR}`);
+        return (await tooltip.getAttribute('aria-label'))?.trim() ?? '';
+    }
+}
+
+export default new ContentActionToolbar();

package/src/shared/pageobjects/reference.page.ts

@@ -28,7 +28,6 @@ export class ReferencePage extends Page {
         const versionPicker = await this.getVersionPickerBtn();
         await versionPicker.click();
         const versionOptions = await $$('>>>doc-version-picker dx-dropdown-option');
-        await versionOptions[1].waitForClickable();
         await versionOptions[1].click();
     }
 

package/src/shared/specs/contentActionToolbar.test.ts

@@ -1,6 +1,7 @@
 import DocsPage from '../pageobjects/docs.page';
 import GuidePage from '../pageobjects/guide.page';
 import { ReferencePage } from '../pageobjects/reference.page';
+import contentActionToolbar from '../pageobjects/content-action-toolbar';
 
 const DOCS_MARKDOWN_PATH = '/docs/docs-content-type-example/get-started.html';
 
@@ -10,63 +11,154 @@ const EN_US_MARKDOWN_REFERENCE_PATH =
 const NON_MARKDOWN_REFERENCE_PATH = '/docs/test-metamind-oas-api/references/1mkfx9?meta=Summary';
 const NON_EN_US_MARKDOWN_REFERENCE_PATH =
     '/docs/commerce/ja-jp/flex-references-loc/references/manual-ref/commerce-cloud-api-overview.html';
-
-async function expectToolbarButtons(toolbar: WebdriverIO.Element): Promise<void> {
-    const toolbarButtons = await toolbar.shadow$$('dx-button.toolbar-button');
-    expect(toolbarButtons.length).toBe(3);
-
-    const labels = await Promise.all(
-        toolbarButtons.map(async (button) => (await button.getText()).trim()),
-    );
-    expect(labels).toEqual(
-        expect.arrayContaining(['Copy as Markdown', 'View as Markdown', 'Copy URL to Markdown']),
-    );
-}
+const INLINE_MARKDOWN_LABELS = ['Copy as Markdown', 'View as Markdown', 'View llms.txt'];
+const MENU_GROUPS = {
+    'This Page': [
+        'Copy as Markdown',
+        'View as Markdown',
+        'Copy URL to Markdown',
+        'Open in ChatGPT',
+        'Open in Claude',
+        'Open in Perplexity',
+    ],
+    'All Documentation': ['View llms.txt', 'Copy URL to llms.txt'],
+};
+const AI_ASSISTANTS = [
+    { label: 'Open in ChatGPT', host: 'chatgpt.com' },
+    { label: 'Open in Claude', host: 'claude.ai' },
+    { label: 'Open in Perplexity', host: 'www.perplexity.ai' },
+];
+const LLMS_TXT_PATH = '/docs/llms.txt';
+const COPIED_TOOLTIP_LABEL = 'Copied!';
 
 describe('Content action toolbar scenarios', () => {
-    it('Markdown guide should have the toolbar', async () => {
+    it('should show the inline markdown actions when opening a markdown guide', async () => {
         const page = new GuidePage(EN_US_GUIDE_PATH);
         page.open();
         await page.waitPageLoad();
 
-        const toolbar = await $('>>>doc-content-action-toolbar');
-        await toolbar.waitForDisplayed();
-        await expectToolbarButtons(toolbar);
+        const toolbar = await contentActionToolbar.get();
+        expect(await contentActionToolbar.getInlineButtonLabels(toolbar)).toEqual(
+            expect.arrayContaining(INLINE_MARKDOWN_LABELS),
+        );
     });
 
-    it('Markdown reference should have the toolbar', async () => {
+    it('should show the inline markdown actions when opening a markdown reference', async () => {
         const referencePage = new ReferencePage(EN_US_MARKDOWN_REFERENCE_PATH);
         referencePage.open();
         await referencePage.waitForMarkdownBasedReferencePageLoad();
 
-        const toolbar = await $('>>>doc-content-action-toolbar');
-        await toolbar.waitForDisplayed();
-        await expectToolbarButtons(toolbar);
+        const toolbar = await contentActionToolbar.get();
+        expect(await contentActionToolbar.getInlineButtonLabels(toolbar)).toEqual(
+            expect.arrayContaining(INLINE_MARKDOWN_LABELS),
+        );
     });
 
-    it('Markdown docs page should have the toolbar', async () => {
+    it('should show the inline markdown actions when opening a markdown docs page', async () => {
         const page = new DocsPage(DOCS_MARKDOWN_PATH);
         page.open();
         await page.waitPageLoad();
 
-        const toolbar = await $('>>>doc-content-action-toolbar');
-        await toolbar.waitForDisplayed();
-        await expectToolbarButtons(toolbar);
+        const toolbar = await contentActionToolbar.get();
+        expect(await contentActionToolbar.getInlineButtonLabels(toolbar)).toEqual(
+            expect.arrayContaining(INLINE_MARKDOWN_LABELS),
+        );
+    });
+
+    it('should expose the full grouped action set through the More actions menu on a markdown page', async () => {
+        const page = new GuidePage(EN_US_GUIDE_PATH);
+        page.open();
+        await page.waitPageLoad();
+
+        const toolbar = await contentActionToolbar.get();
+        await contentActionToolbar.openMoreActionsMenu(toolbar);
+
+        const labelsByGroup = await contentActionToolbar.getMenuOptionLabelsByGroup(toolbar);
+        expect(Object.keys(labelsByGroup)).toEqual(
+            expect.arrayContaining(Object.keys(MENU_GROUPS)),
+        );
+        for (const [group, expectedLabels] of Object.entries(MENU_GROUPS)) {
+            expect(labelsByGroup[group]).toEqual(expect.arrayContaining(expectedLabels));
+        }
     });
 
-    it("Non-markdown reference shouldn't have toolbar", async () => {
+    AI_ASSISTANTS.forEach(({ label, host }) => {
+        it(`should open ${host} with the page context when selecting ${label}`, async () => {
+            const page = new GuidePage(EN_US_GUIDE_PATH);
+            page.open();
+            await page.waitPageLoad();
+
+            const toolbar = await contentActionToolbar.get();
+            await contentActionToolbar.openMoreActionsMenu(toolbar);
+
+            const url = await contentActionToolbar.getUrlFromNewTab(() =>
+                contentActionToolbar.clickMenuOption(toolbar, label),
+            );
+            expect(url).toContain(host);
+        });
+    });
+
+    it('should open the markdown version of the page in a new tab when selecting View as Markdown', async () => {
+        const page = new GuidePage(EN_US_GUIDE_PATH);
+        page.open();
+        await page.waitPageLoad();
+
+        const toolbar = await contentActionToolbar.get();
+        await contentActionToolbar.openMoreActionsMenu(toolbar);
+
+        const url = await contentActionToolbar.getUrlFromNewTab(() =>
+            contentActionToolbar.clickMenuOption(toolbar, 'View as Markdown'),
+        );
+        expect(url.endsWith('.md')).toBe(true);
+    });
+
+    it('should open the site llms.txt in a new tab when selecting View llms.txt', async () => {
+        const page = new GuidePage(EN_US_GUIDE_PATH);
+        page.open();
+        await page.waitPageLoad();
+
+        const toolbar = await contentActionToolbar.get();
+        await contentActionToolbar.openMoreActionsMenu(toolbar);
+
+        const url = await contentActionToolbar.getUrlFromNewTab(() =>
+            contentActionToolbar.clickMenuOption(toolbar, 'View llms.txt'),
+        );
+        expect(url.endsWith(LLMS_TXT_PATH)).toBe(true);
+    });
+
+    it('should flash the Copied! tooltip when selecting Copy URL to Markdown', async () => {
+        const page = new GuidePage(EN_US_GUIDE_PATH);
+        page.open();
+        await page.waitPageLoad();
+
+        const toolbar = await contentActionToolbar.get();
+        await contentActionToolbar.openMoreActionsMenu(toolbar);
+        await contentActionToolbar.clickMenuOption(toolbar, 'Copy URL to Markdown');
+
+        await browser.waitUntil(
+            async () =>
+                (await contentActionToolbar.getVisibleCopiedTooltipLabel()) ===
+                COPIED_TOOLTIP_LABEL,
+            {
+                timeout: 5000,
+                timeoutMsg: 'Expected the menu tooltip to flash "Copied!"',
+            },
+        );
+    });
+
+    it('should not show the toolbar on a non-markdown reference', async () => {
         const referencePage = new ReferencePage(NON_MARKDOWN_REFERENCE_PATH);
         referencePage.open();
         await referencePage.waitForSpecBasedReferencePageLoad();
 
-        const toolbar = await $('>>>doc-content-action-toolbar');
-        expect(await toolbar.isExisting()).toBeFalsy();
+        expect(await contentActionToolbar.isPresent()).toBeFalsy();
     });
 
-    it("Non en-us locale page shouldn't have toolbar", async () => {
+    it('should not show the toolbar on a non en-us page', async () => {
         const nonEnUsReferencePage = new ReferencePage(NON_EN_US_MARKDOWN_REFERENCE_PATH);
         nonEnUsReferencePage.open();
         await nonEnUsReferencePage.waitForMarkdownBasedReferencePageLoad();
-        expect(await (await $('>>>doc-content-action-toolbar')).isExisting()).toBeFalsy();
+
+        expect(await contentActionToolbar.isPresent()).toBeFalsy();
     });
 });

package/src/shared/specs/reference.test.ts

@@ -109,8 +109,6 @@ describe('Reference Versioning', () => {
         const versionOptions = await $$('>>>doc-version-picker dx-dropdown-option');
 
         expect(versionOptions.length).toEqual(2);
-        await versionOptions[0].waitForClickable();
-        await versionOptions[1].waitForClickable();
         expect(await (await versionOptions[0].shadow$('div>div')).getText()).toEqual('0.1.3');
         expect(await (await versionOptions[1].shadow$('div>div')).getText()).toEqual('0.1.2');
     });
@@ -153,8 +151,6 @@ describe('Reference Versioning', () => {
         await versionPicker.click();
 
         const versionOptions = await $$('>>>doc-version-picker dx-dropdown-option');
-
-        await versionOptions[1].waitForClickable();
         const selectedVersionText = await (await versionOptions[1].shadow$('div>div')).getText();
 
         await versionOptions[1].click();