@salesforcedevs/sfdocs-e2e 0.6.132-linkfix-alpha

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

@@ -0,0 +1,333 @@
+import GuidePage from '../pageobjects/guide.page';
+import OverviewPage from '../pageobjects/overview.page';
+import layoutTest from './layout-tests';
+
+let page: GuidePage;
+
+describe('Guides layout> ', () => {
+    beforeEach(async () => {
+        page = new GuidePage('/docs/service/vscode-maintainer/guide/vscode-overview.html');
+        page.open();
+        await page.waitPageLoad();
+    });
+
+    layoutTest(page, 'doc-header');
+
+    it('should have Guides tab as active', async () => {
+        const selectedHeaderNavItem = await page.getActiveNavTab();
+
+        expect(await selectedHeaderNavItem.getText()).toMatch('Guides');
+    });
+});
+
+describe('Test Guides page transition> ', () => {
+    it('Check overview to Guide page Transition', async () => {
+        const page = new OverviewPage('/docs/service/vscode-maintainer');
+        page.open();
+
+        await page.waitPageLoad();
+
+        const overviewContent = await $('>>>.overview-content > dx-group-text');
+
+        expect(await overviewContent.getAttribute('header')).toEqual('Visual Studio Code (VSCode)');
+
+        (await overviewContent.$('>>> dx-button')).click();
+        await (await $('>>> #overview')).waitForDisplayed();
+
+        expect(await (await $('>>> #overview')).getText()).toEqual('Overview');
+
+        const docHeaderNav = await $('>>> .header_l2_group-nav_overflow');
+        const headerNav = await docHeaderNav.$('>>> dx-header-nav');
+        const navItem = await headerNav.shadow$$('dx-tab');
+
+        expect(await navItem[0].getText()).toEqual('Overview');
+        expect(await navItem[1].getText()).toEqual('Guides');
+    });
+});
+
+describe('Test Guides page components functionality> ', () => {
+    beforeEach(async () => {
+        page = new GuidePage('/docs/service/vscode-maintainer/guide/vscode-overview.html');
+        page.open();
+
+        await page.waitPageLoad();
+    });
+
+    it('Check Left navigation Bar(LNB) options and move to another Guide page', async () => {
+        await (await $('>>> h1#overview')).waitForDisplayed();
+        await (await $('>>> div.flex.tile-expand-icon.tile-icon')).waitForDisplayed();
+
+        const navExpandsOption = await $$('>>> div.flex.tile-expand-icon.tile-icon');
+
+        expect(navExpandsOption.length).toEqual(2);
+
+        const sidebar = await (await $('doc-content-layout')).shadow$('div > dx-sidebar-old');
+        const sideBarContent = await sidebar.shadow$$('div.container div.sidebar-content dx-tree');
+
+        expect(sideBarContent.length).toEqual(4);
+
+        const nextStepOption = await (
+            await sideBarContent[3].shadow$('dx-tree-item')
+        ).shadow$('dx-tree-tile');
+
+        expect(nextStepOption.isExisting()).toBeTruthy();
+
+        const installVSCodeOptionTile = await (
+            await sideBarContent[1].shadow$('dx-tree-item')
+        ).shadow$('dx-tree-tile');
+
+        expect(installVSCodeOptionTile.isExisting()).toBeTruthy();
+
+        await (await sideBarContent[1].shadow$('dx-tree-item')).click();
+        await page.waitPageLoad();
+
+        const installVSCodeOption = await (
+            await sideBarContent[1].shadow$('dx-tree-item')
+        ).shadow$$('dx-tree-item');
+
+        expect(installVSCodeOption.length).toEqual(3);
+
+        await installVSCodeOption[1].click();
+
+        const installOnWindows = await $('>>> #install-on-windows');
+
+        await installOnWindows.waitForDisplayed();
+
+        expect(await installOnWindows.getText()).toEqual('Install on Windows');
+    });
+
+    it('Check Right navigation bar actions', async () => {
+        page = new GuidePage(
+            '/docs/commerce/test-cc-orders-api/guide/build-deploy-apps.html#prepare-the-platform',
+        );
+        page.open();
+
+        await page.waitPageLoad();
+        await (await $('>>> a.content-button.selected')).waitForDisplayed();
+
+        const rightNavContent = await $$(
+            '>>> div.toc.toc_content > div.toc-items > a.content-button',
+        );
+
+        await rightNavContent[0].waitForClickable();
+        await rightNavContent[0].click();
+
+        expect(await rightNavContent[0].getText()).toEqual('Prerequisites');
+
+        const selectedElement = rightNavContent[0];
+
+        await browser.waitUntil(
+            async function () {
+                const className = await selectedElement.getAttribute('class');
+                return (
+                    className != null &&
+                    className.includes('content-button') &&
+                    className.includes('selected')
+                );
+            },
+            {
+                timeout: 5000,
+                timeoutMsg: 'Expecting element class to have `selected` value',
+            },
+        );
+
+        expect(await browser.getUrl()).toContain('build-deploy-apps.html#prerequisites');
+    });
+
+    it('Validate viewport scroll on right navigation bar actions', async () => {
+        page = new GuidePage(
+            '/docs/service/vscode-maintainer/guide/vscode-quickstart.html#helpful-resources',
+        );
+        page.open();
+
+        await page.waitPageLoad();
+
+        expect(await (await $('>>> h2#helpful-resources')).isDisplayedInViewport).toBeTruthy();
+    });
+
+    it('Check RNB is sticky when scrolling the content to the top', async () => {
+        const page = new GuidePage('/docs/service/vscode-maintainer/guide/vscode-quickstart.html');
+        page.open();
+        await page.waitPageLoad();
+
+        await (await $('>>> a.content-button.selected')).scrollIntoView();
+
+        const tocItem = await $('>>> div.toc.toc_content > div.toc-items > a.content-button');
+        await tocItem.waitForExist({ timeout: 2000 });
+        const isTocItemDisplayedInViewPort = await tocItem.isDisplayedInViewport();
+
+        expect(isTocItemDisplayedInViewPort).toBeTruthy();
+    });
+});
+
+describe('Validate guide breadcrumbs', () => {
+    it('Validate breadcrumbs on guide page', async () => {
+        const page = new GuidePage(
+            '/docs/service/vscode-maintainer/guide/vscode-authoring-kit-v1.html',
+        );
+        page.open();
+        await page.waitPageLoad();
+
+        const bcs = await $('>>>doc-breadcrumbs');
+        const anchorBreadcrumbs = await bcs.$$('>>>doc-breadcrumb-item');
+
+        expect(anchorBreadcrumbs.length > 1).toBeTruthy();
+
+        const bc0 = await anchorBreadcrumbs[0];
+        const bc1 = await anchorBreadcrumbs[1];
+
+        expect(await bc0.getText()).toMatch('Overview');
+        expect(await bc1.getText()).toMatch('Authoring Kit v1.0');
+    });
+});
+
+// TODO: Skipping these until we add the LWC repo to example repo post framework release.
+describe.skip('Tabset Plugin Scenarios ', () => {
+    const getQueryParam = async (param: string): Promise<any> => {
+        const searchParams = new URLSearchParams(new URL(await browser.getUrl()).search);
+        const paramValue = searchParams.get(param);
+
+        return paramValue;
+    };
+
+    const getActiveTabLabel = async (): Promise<any> => {
+        const activeTab = await $('>>>button.tab-active');
+        const activeTabTitle = await activeTab.getText();
+
+        return activeTabTitle;
+    };
+
+    beforeEach(async () => {
+        page = new GuidePage('/docs/plugin-development/guide/tab-plugin-usage.html');
+        page.open();
+        await page.waitPageLoad();
+    });
+
+    it('Tabset plugin should render tabs and its content', async () => {
+        const tabsetContent = await $('>>>dx-tab-panel-list.docs-tab');
+        expect(tabsetContent.isExisting()).toBeTruthy();
+    });
+
+    it('First tab should be active by default', async () => {
+        const activeTabTitle = await getActiveTabLabel();
+
+        expect(activeTabTitle).toEqual('Tab Plugin');
+        await browser.waitUntil(
+            async function () {
+                return (await getQueryParam('type')) === 'Tab Plugin';
+            },
+            {
+                timeout: 5000,
+                timeoutMsg: 'Expecting query param to be `Tab Plugin` value',
+            },
+        );
+    });
+
+    it('First tab content should be visible', async () => {
+        const firstTabContent = await $('>>>div.tabpanel-active');
+        expect(firstTabContent.isExisting()).toBeTruthy();
+    });
+
+    it('Should switch to the second tab when clicked', async () => {
+        const allTabs = await $$('>>>dx-tab-panel-item');
+        await allTabs[1].click();
+        await page.waitPageLoad();
+
+        const activeTabTitle = await getActiveTabLabel();
+
+        expect(activeTabTitle).toEqual('Usage');
+        await browser.waitUntil(
+            async function () {
+                return (await getQueryParam('type')) === 'Usage';
+            },
+            {
+                timeout: 5000,
+                timeoutMsg: 'Expecting query param to be `Usage` value',
+            },
+        );
+    });
+
+    it('Check the URL has correct active tab as param', async () => {
+        await browser.waitUntil(
+            async function () {
+                return (await getQueryParam('type')) === 'Tab Plugin';
+            },
+            {
+                timeout: 5000,
+                timeoutMsg: 'Expecting query param to be `Tab Plugin` value',
+            },
+        );
+    });
+});
+
+describe('Validate the URL Structure ', () => {
+    beforeEach(async () => {
+        const page = new GuidePage(
+            '/docs/commerce/test-cc-orders-api/guide/build-deploy-apps.html',
+        );
+        page.open();
+        await page.waitPageLoad();
+    });
+
+    it('Slug is not having special charcters', async () => {
+        await $('>>>div.toc.toc_content').$('=Prerequisites').click();
+
+        await expect((await browser.getUrl()).toString().endsWith('#prerequisites')).toBeTruthy();
+    });
+
+    it('Spaces in the slug is replaced with hypen character', async () => {
+        await $('>>>div.toc.toc_content').$('=Prepare the Platform').click();
+
+        await expect(
+            (await browser.getUrl()).toString().endsWith('#prepare-the-platform'),
+        ).toBeTruthy();
+    });
+});
+
+describe('Search guides', () => {
+    beforeEach(async () => {
+        page = new GuidePage(
+            '/docs/commerce/test-cc-orders-api/guide/commerce-cloud-api-overview.html',
+        );
+        page.open();
+        await page.waitPageLoad();
+    });
+
+    it('should display search results based on the search text', async () => {
+        await $('doc-content-layout')
+            .then((layout) => layout.shadow$('div > dx-sidebar-old'))
+            .then((sidebar) => sidebar.waitForDisplayed());
+        const sidebar = await (await $('doc-content-layout')).shadow$('div > dx-sidebar-old');
+        const dxInput = await sidebar.shadow$('div > div.sidebar-header > div.search > dx-input');
+        const searchBox = await dxInput.shadow$('input');
+        await searchBox.click();
+        await browser.keys('SFRA');
+
+        const trees = await sidebar.shadow$$('div.container div.sidebar-content dx-tree');
+        const servicesTree = await (await trees[0].shadow$('dx-tree-item')).shadow$('dx-tree-item');
+        const treeItem = await servicesTree.shadow$('dx-tree-item');
+        const item = await (await treeItem.shadow$('dx-tree-tile')).shadow$('span');
+        const itemText = await item.getText();
+        expect(itemText).toBe('Find SFRA Tools');
+    });
+
+    it('should filter and navigate to the filtered guide', async () => {
+        await $('doc-content-layout')
+            .then((layout) => layout.shadow$('div > dx-sidebar-old'))
+            .then((sidebar) => sidebar.waitForDisplayed());
+        const sidebar = await (await $('doc-content-layout')).shadow$('div > dx-sidebar-old');
+        const dxInput = await sidebar.shadow$('div > div.sidebar-header > div.search > dx-input');
+        const searchBox = await dxInput.shadow$('input');
+        await searchBox.click();
+        await browser.keys('SFRA');
+
+        const trees = await (await sidebar).shadow$$('div.container div.sidebar-content dx-tree');
+        const servicesTree = await (await trees[0].shadow$('dx-tree-item')).shadow$('dx-tree-item');
+        const treeItem = await servicesTree.shadow$('dx-tree-item');
+        await treeItem.click();
+        await page.waitPageLoad();
+        const header = await (await $('doc-content-layout')).$('h1');
+
+        expect(await header.getText()).toBe('Find SFRA Tools');
+    });
+});

package/src/shared/specs/layout-tests.ts

@@ -0,0 +1,38 @@
+import Page from '../pageobjects/page';
+
+/**
+ * This is an exported test whereever we want to test the basic layout of the page (chrome)
+ * We don't want to duplicate this in each page. Each page can have more tests as required apart
+ * from this chrome test.
+ * @param givenPage : This is the current page for which we need to test chrome.
+ */
+
+export default function layoutTest(givenPage: Page, headerTag = 'dx-header') {
+    let page: Page;
+    describe('Basic layout testing > ', () => {
+        beforeEach(async () => {
+            page = givenPage;
+        });
+
+        it('should display header', async () => {
+            const header = await $('hgf-c360contextnav');
+            await header.waitForDisplayed();
+            expect(await header.isDisplayed()).toBeTruthy();
+            expect(await header.getText()).toContain('Developers');
+        });
+
+        it.skip('should display global search box', async () => {
+            // should have search box
+            const searchBox = (await $(headerTag)).shadow$('dx-header-search');
+            await (await $(headerTag)).waitForDisplayed();
+            expect(await (await searchBox).isDisplayed()).toBeTruthy();
+        });
+
+        it('should display footer', async () => {
+            // should have footer
+            const footer = await $('>>>dx-footer');
+            await footer.waitForDisplayed();
+            expect(await footer.isDisplayed()).toBeTruthy();
+        });
+    });
+}

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

@@ -0,0 +1,82 @@
+import DocsApiPage from '../../portal/pageobjects/docs.apis.page';
+import OverviewPage from '../pageobjects/overview.page';
+import layoutTest from './layout-tests';
+
+let page: DocsApiPage;
+describe('/docs/api overview page > ', () => {
+    beforeEach(async () => {
+        page = new DocsApiPage('/docs/commerce/test-cc-orders-api/overview');
+        page.open();
+        await page.waitPageLoad();
+        (await $('dx-section')).waitForDisplayed();
+    });
+
+    layoutTest(page, 'doc-header');
+
+    it('should show Overview, Guides and Reference tabs and have Overview as active', async () => {
+        const overviewPageSection = await $('>>>.content-type-overview');
+        overviewPageSection.waitForDisplayed();
+
+        const docHeaderNav = await $('>>> .header_l2_group-nav_overflow');
+        const headerNav = await docHeaderNav.$('>>> dx-header-nav');
+        const navTabs = await headerNav.shadow$$('dx-tab');
+
+        expect(navTabs.length).toBeGreaterThanOrEqual(2);
+        expect(await navTabs[0].getText()).toEqual('Overview');
+        expect(await navTabs[1].getText()).toEqual('Guides');
+
+        const activeNavItem = await page.getActiveNavTab();
+        expect(await activeNavItem.getText()).toMatch('Overview');
+    });
+
+    it('should show Overview page with key features and correct header', async () => {
+        const overviewPage = await $('>>>.content-type-overview');
+        const grid = await overviewPage.$('dx-section > dx-grid');
+        const mainContent = await grid.$$('div');
+        const header1 = await mainContent[0].$('dx-group-text').shadow$('.title');
+        const header2 = await mainContent[1].$('dx-group-text').shadow$('.title');
+
+        expect(await header1.getText()).toBe('Commerce Cloud API Overview');
+        expect(await header2.getText()).toBe('Key Features');
+    });
+
+    it('Should land on Overview Page for default URL', async () => {
+        const overviewPage = new OverviewPage('/docs/commerce/test-cc-orders-api');
+        overviewPage.open();
+        await overviewPage.waitPageLoad();
+
+        const overviewContent = await $('>>>.overview-content');
+        await overviewContent.waitForDisplayed();
+        expect(await overviewContent.isDisplayed()).toBe(true);
+    });
+
+    it('should show overview header and CTA buttons on default URL', async () => {
+        const overviewPage = new OverviewPage('/docs/commerce/test-cc-orders-api');
+        overviewPage.open();
+        await overviewPage.waitPageLoad();
+
+        const overviewContent = await $('>>>.overview-content > dx-group-text');
+        const buttons = await overviewContent.shadow$$('dx-button');
+
+        expect(await overviewContent.getAttribute('header')).toEqual('Commerce Cloud API Overview');
+        expect(await buttons[0].getText()).toBe('Test custom external link');
+        expect(await buttons[1].getText()).toBe('Test internal Guide link');
+    });
+
+    it('should show Key Features list on overview page', async () => {
+        const overviewPage = new OverviewPage('/docs/commerce/test-cc-orders-api');
+        overviewPage.open();
+        await overviewPage.waitPageLoad();
+
+        const section = await $('dx-section');
+        const grid = await section.$('dx-grid');
+        const mainContent = await grid.$$('div');
+        const featuresList = await mainContent[1].$('dx-features-list');
+        const options = await featuresList.shadow$$('li.option');
+
+        expect(options.length).toBe(3);
+        expect(await (await options[0].$('div')).getText()).toBe('Update an Order');
+        expect(await (await options[1].$('div')).getText()).toBe('Update Order States');
+        expect(await (await options[2].$('div')).getText()).toBe('Change Shipping Address');
+    });
+});

package/src/shared/specs/page-title.test.ts

@@ -0,0 +1,12 @@
+import Page from '../pageobjects/page';
+
+describe('Homepage', () => {
+    beforeEach(async () => {
+        const page = new Page('/content-page');
+        page.open();
+    });
+
+    it('should have the right title', async () => {
+        expect(browser).toHaveTitle('Salesforce Developers');
+    });
+});

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

@@ -0,0 +1,170 @@
+import { it } from 'mocha';
+import RedocApisPage from '../pageobjects/api-redoc-reference.page';
+import OverviewPage from '../pageobjects/overview.page';
+import {
+    waitAndGetDocPhaseParentInRedocReferencesPage,
+    assertDocPhaseUnavailability,
+    assertDocPhaseElementsForRedoc,
+    phases,
+} from '../pageobjects/doc-phase-config';
+
+let page: RedocApisPage;
+describe('Redoc API Reference page', () => {
+    describe('check layouts', () => {
+        before(async () => {
+            page = new RedocApisPage('docs/service/single-oas-redoc/references/redoc-orders-api1');
+            page.open();
+            await page.waitPageLoad();
+        });
+
+        it('should have the right title', async () => {
+            await page.waitPageLoad();
+            expect(browser).toHaveTitle('Redoc UI Example');
+        });
+
+        it('should have the correct api info title', async () => {
+            const apiTitle = await page.getApiTitle();
+            const titleText = await apiTitle.getText();
+
+            expect(titleText).toMatch('Einstein Vision and Einstein Language');
+        });
+
+        it('should highlight Reference as a selected tab on nav', async () => {
+            const selectedHeaderNavItem = await page.getActiveNavTab();
+
+            expect(await selectedHeaderNavItem.getText()).toMatch('Reference');
+        });
+
+        it('should display footer', async () => {
+            const footer = await $('>>>dx-footer');
+            await footer.waitForDisplayed();
+            expect(await footer.isDisplayed()).toBeTruthy();
+        });
+    });
+
+    describe('Test Reference page transition> ', () => {
+        it('Check Overview to Reference page Transition', async () => {
+            const page = new OverviewPage('docs/service/single-oas-redoc/overview');
+            page.open();
+            await page.waitPageLoad();
+            const docHeaderNav = await $('>>> .header_l2_group-nav_overflow');
+            const headerNav = await docHeaderNav.$('>>> dx-header-nav');
+            const navItem = await headerNav.shadow$$('nav > ul > li');
+            expect(navItem.length).toEqual(2);
+            const dxHeaderNavOpt = await navItem[1].$('dx-tab');
+            const referenceAnchor = await dxHeaderNavOpt.shadow$('a');
+            expect(await referenceAnchor.getAttribute('href')).toContain(
+                '/docs/service/single-oas-redoc/references',
+            );
+            expect(await (await referenceAnchor.$('span')).getText()).toEqual('Reference');
+            await navItem[1].click();
+            const header = await $('>>>doc-header');
+            await header.waitForDisplayed();
+            expect(await referenceAnchor.getAttribute('class')).toContain(
+                'nav-list-item state-active',
+            );
+        });
+    });
+
+    describe('Doc Phase', () => {
+        it('should not render doc-phase when not configured', async () => {
+            page = new RedocApisPage('docs/service/single-oas-redoc/references/redoc-orders-api1');
+            page.open();
+            await page.waitPageLoad();
+
+            const sectionsContentLayout = await waitAndGetDocPhaseParentInRedocReferencesPage();
+
+            await assertDocPhaseUnavailability(sectionsContentLayout);
+        });
+
+        it('should render beta doc-phase config', async () => {
+            page = new RedocApisPage(
+                'docs/service/redoc-parent-banner/references/redoc-orders-api2',
+            );
+            page.open();
+            await page.waitPageLoad();
+
+            const sectionsContentLayout = await waitAndGetDocPhaseParentInRedocReferencesPage();
+
+            await assertDocPhaseElementsForRedoc(sectionsContentLayout, phases.beta);
+        });
+    });
+
+    describe('Redoc reference sidebar', () => {
+        before(async () => {
+            page = new RedocApisPage('docs/service/single-oas-redoc/references/redoc-orders-api1');
+            page.open();
+            await page.waitPageLoad();
+        });
+
+        it('should display the first item text correctly and expand the first item', async () => {
+            const firstItem = await page.getLnbItemByIndex(0);
+
+            expect(await (await firstItem.$('label')).getText()).toEqual('Check API Usage');
+
+            const expandFirstItem = await (await firstItem.$('label')).$('svg');
+            await expandFirstItem.click();
+
+            expect(await firstItem.getAttribute('aria-expanded')).toBe('true');
+        });
+
+        it('should update the URL hash to the item id and show the correct heading, when the item is clicked', async () => {
+            const fifthItem = await page.getLnbItemByIndex(4);
+            await fifthItem.click();
+
+            const dataItemId = await fifthItem.getAttribute('data-item-id');
+            expect(await browser.getUrl()).toContain(`#${dataItemId}`);
+
+            const content = await page.getContent();
+            const heading = await content.$(`div[data-section-id="${dataItemId}"] h2`);
+
+            expect(await heading.isDisplayedInViewport()).toBe(true);
+        });
+
+        it('should render the sticky searchbar when scroll to bottom', async () => {
+            const sidebar = await page.getSidebar();
+            const searchbar = sidebar.$('div[role="search"]');
+            const scrollbarContainer = await sidebar.$('.scrollbar-container');
+
+            const searchbarInitialPosition = await searchbar.getLocation('y');
+
+            // Scroll to the bottom of the sidebar
+            await browser.execute((element) => {
+                if ('scrollTop' in element && 'scrollHeight' in element) {
+                    element['scrollTop'] = element['scrollHeight'];
+                }
+            }, scrollbarContainer);
+
+            const searchbarFinalPosition = await searchbar.getLocation('y');
+
+            expect(searchbarInitialPosition).toEqual(searchbarFinalPosition);
+        });
+
+        it('should not display branding by redoc on LNB', async () => {
+            const sidebar = await page.getSidebar();
+            const scrollbarContainer = sidebar.$('.scrollbar-container');
+            const redocBrand = (await scrollbarContainer).$('a[href*="redocly.com/redoc"]');
+
+            expect(redocBrand).not.toBeDisplayed();
+        });
+    });
+
+    describe('Redoc reference bookmark url', () => {
+        before(async () => {
+            page = new RedocApisPage(
+                'docs/service/single-oas-redoc/references/redoc-orders-api1#tag/Vision-Models/operation/getTrainedModels_1',
+            );
+            page.open();
+            await page.waitPageLoad();
+        });
+
+        it('should display the correct heading, when hit the bookmark url', async () => {
+            const urlHash = (await browser.getUrl()).split('#')[1];
+
+            const content = await page.getContent();
+            const heading = await content.$(`div[data-section-id="${urlHash}"] h2`);
+
+            expect(await heading.isDisplayedInViewport()).toBe(true);
+        });
+    });
+});