@salesforcedevs/sfdocs-e2e 1.0.10 → 1.0.11-toolbar.1

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

@@ -1,5 +1,9 @@
+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';
 
 const EN_US_GUIDE_PATH = '/docs/service/vscode-maintainer/guide/vscode-overview.html';
 const EN_US_MARKDOWN_REFERENCE_PATH =
@@ -7,53 +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("Non-markdown reference shouldn't have 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 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));
+        }
+    });
+
+    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();
     });
 });