@salesforcedevs/sfdocs-e2e 1.0.7-liquid-alpha.2 → 1.0.8-alpha

package/common-wdio.conf.js

@@ -196,9 +196,9 @@ exports.config = {
     ...(isGithubActions
         ? {
               protocol: 'http',
-              hostname: '127.0.0.1',
+              hostname: 'localhost',
               port: 4444,
-              path: '/wd/hub',
+              path: '/',
           }
         : {}),
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/sfdocs-e2e",
-  "version": "1.0.7-liquid-alpha.2",
+  "version": "1.0.8-alpha",
   "description": "E2E test suite for SFDocs static portal pages (SSG)",
   "license": "ISC",
   "bin": {

package/portal-wdio.conf.js

@@ -4,5 +4,4 @@ exports.config = {
     ...BASE_CONFIG.config,
     baseUrl: process.env.E2E_BASE_URL || 'http://localhost:3001',
     specs: ['./src/portal/specs/**/*.test.ts', './src/shared/specs/*.test.ts'],
-    exclude: ['./src/shared/specs/contentActionToolbar.test.ts'],
 };

package/src/content-repo/specs/homepage.test.ts

@@ -13,7 +13,7 @@ describe('Homepage', () => {
     it('should show the expected number of projects', async () => {
         const projectCards = await HomePage.projectCards;
 
-        expect(projectCards.length).toEqual(21);
+        expect(projectCards.length).toEqual(20);
     });
 
     // it('is accessible', () => {

package/src/shared/pageobjects/api-redoc-reference.page.ts

@@ -35,11 +35,6 @@ class ApiRedocReferencePage extends Page {
         const lnbItems = await scrollbarContainer.$$('ul[role="menu"] > li');
         return lnbItems[index];
     }
-
-    async getProjectHeader(): Promise<WebdriverIO.Element> {
-        const sidebar = await this.getSidebar();
-        return sidebar.$('div.redoc-project-header');
-    }
 }
 
 export default ApiRedocReferencePage;

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

@@ -38,13 +38,4 @@ export class ReferencePage extends Page {
     async getSidebarContent(): Promise<WebdriverIO.Element> {
         return $('>>>div .sidebar-item-selected');
     }
-
-    async getSidebar(): Promise<WebdriverIO.Element> {
-        return (await $('>>>doc-content-layout')).shadow$('div > dx-sidebar-old');
-    }
-
-    async getSidebarItems(): Promise<WebdriverIO.ElementArray> {
-        const sidebar = await this.getSidebar();
-        return sidebar.shadow$$('div.container div.sidebar-content dx-tree');
-    }
 }

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

@@ -64,7 +64,7 @@ describe('Test Guides page components functionality> ', () => {
         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(6);
+        expect(sideBarContent.length).toEqual(4);
 
         const nextStepOption = await (
             await sideBarContent[3].shadow$('dx-tree-item')

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

@@ -6,14 +6,56 @@ let liquidEnabled = false;
 describe('Liquid Template Rendering', () => {
     before(async () => {
         try {
+            // Check frontmatter to determine if Liquid is enabled
+            let frontmatterCheckSucceeded = false;
+
+            try {
+                const fs = require('fs');
+                const path = require('path');
+                const matter = require('gray-matter');
+
+                const contentPath = path.resolve(
+                    __dirname,
+                    '../../../../example-repository/content/en-us/liquid-project/guides/liquid-quickstart.md',
+                );
+
+                if (fs.existsSync(contentPath)) {
+                    const fileContent = fs.readFileSync(contentPath, 'utf-8');
+                    const { data: frontmatter } = matter(fileContent);
+                    liquidEnabled = frontmatter?.liquid?.enabled === true;
+                    frontmatterCheckSucceeded = true;
+                }
+            } catch (frontmatterError) {
+                // Frontmatter check failed (file not found or gray-matter not available)
+                // Fall back to checking rendered output
+                frontmatterCheckSucceeded = false;
+            }
+
+            // Initialize page for tests
             page = new GuidePage('/docs/liquid-project/guide/liquid-quickstart.html');
-            await browser.url(page.path);
+            page.open();
             await page.waitPageLoad();
 
-            const content = await $('>>>doc-content-layout');
-            const text = await content.getText();
-
-            liquidEnabled = text.includes('Hello from data.yaml');
+            // Fallback: If frontmatter check didn't succeed, check rendered output
+            if (!frontmatterCheckSucceeded) {
+                const content = await $('>>>doc-content-layout');
+                const text = await content.getText();
+                const html = await content.getHTML();
+
+                const hasLiquidOutput = text.includes('Hello from data.yaml');
+                const hasRawSyntax =
+                    html.includes('{{ data.greeting }}') ||
+                    html.includes('{{ topic }}') ||
+                    (html.includes('{{') && html.includes('{%'));
+
+                if (hasRawSyntax) {
+                    liquidEnabled = false;
+                } else if (hasLiquidOutput) {
+                    liquidEnabled = true;
+                } else {
+                    liquidEnabled = false;
+                }
+            }
         } catch (e) {
             liquidEnabled = false;
         }
@@ -22,7 +64,7 @@ describe('Liquid Template Rendering', () => {
     beforeEach(async () => {
         if (liquidEnabled) {
             page = new GuidePage('/docs/liquid-project/guide/liquid-quickstart.html');
-            await browser.url(page.path);
+            page.open();
             await page.waitPageLoad();
         }
     });
@@ -37,6 +79,10 @@ describe('Liquid Template Rendering', () => {
 
         expect(text.includes('GitHub for writers')).toBeTruthy();
         expect(text.includes('Hello from data.yaml')).toBeTruthy();
+
+        const html = await content.getHTML();
+        expect(html.includes('{{ topic }}')).toBeFalsy();
+        expect(html.includes('{{ data.greeting }}')).toBeFalsy();
     });
 
     it('Should render included templates from shared directory', async function () {
@@ -59,14 +105,19 @@ describe('Liquid Template Rendering', () => {
         }
 
         const content = await $('>>>doc-content-layout');
+        const html = await content.getHTML();
         const text = await content.getText();
 
-        expect(text.includes('AccountId')).toBeTruthy();
-        expect(text.includes('Type:')).toBeTruthy();
-        expect(text.includes('Properties:')).toBeTruthy();
+        expect(text.includes('create()')).toBeTruthy();
+        expect(text.includes('query()')).toBeTruthy();
+        expect(text.includes('update()')).toBeTruthy();
 
         const listItems = await content.$$('li');
         expect(listItems.length).toBeGreaterThan(5);
+
+        expect(html.includes('{% for')).toBeFalsy();
+        expect(html.includes('{%- for')).toBeFalsy();
+        expect(html.includes('{% endfor')).toBeFalsy();
     });
 
     it('Should not process Liquid syntax inside code blocks', async function () {
@@ -75,14 +126,15 @@ describe('Liquid Template Rendering', () => {
         }
 
         const content = await $('>>>doc-content-layout');
-        const codeBlock = await content.$('dx-code-block');
+        const html = await content.getHTML();
+        const codeBlock = await content.$('code');
 
         expect(await codeBlock.isExisting()).toBeTruthy();
 
-        const codeBlockAttr = await codeBlock.getAttribute('code-block');
-        expect(codeBlockAttr.includes('{{ data.greeting }}')).toBeTruthy();
-        expect(codeBlockAttr.includes('{{ topic }}')).toBeTruthy();
-        expect(codeBlockAttr.includes('{% for item in items %}')).toBeTruthy();
+        const codeHtml = await codeBlock.getHTML();
+        expect(codeHtml.includes('{{ data.greeting }}')).toBeTruthy();
+        expect(codeHtml.includes('{{ topic }}')).toBeTruthy();
+        expect(codeHtml.includes('{% for item in items %}')).toBeTruthy();
 
         const text = await content.getText();
         expect(text.includes('Visit')).toBeTruthy();
@@ -108,66 +160,7 @@ describe('Liquid Template Rendering', () => {
         expect(html.includes('{{ id2 }}')).toBeFalsy();
     });
 
-    it('Should render englishonly block content in production', async function () {
-        if (!liquidEnabled) {
-            this.skip();
-        }
-
-        const content = await $('>>>doc-content-layout');
-        const text = await content.getText();
-        const html = await content.getHTML();
-
-        expect(text.includes('This feature is currently only available in English')).toBeTruthy();
-        expect(html.includes('{% englishonly')).toBeFalsy();
-        expect(html.includes('{% endenglishonly')).toBeFalsy();
-    });
-
-    it('Should render liquid.data string format — single YAML file on root context', async function () {
-        if (!liquidEnabled) {
-            this.skip();
-        }
-
-        const content = await $('>>>doc-content-layout');
-        const text = await content.getText();
-
-        expect(text.includes('Hello from data.yaml')).toBeTruthy();
-    });
-
-    it('Should render liquid.data object format — multiple YAML files each under a named key', async function () {
-        if (!liquidEnabled) {
-            this.skip();
-        }
-
-        const multiDataPage = new GuidePage('/docs/liquid-project/guide/multi-data.html');
-        await browser.url(multiDataPage.path);
-        await multiDataPage.waitPageLoad();
-
-        const content = await $('>>>doc-content-layout');
-        const text = await content.getText();
-        const html = await content.getHTML();
-
-        expect(text.includes('Sample data file to check the multi-include')).toBeTruthy();
-        expect(html.includes('{{ two.summary }}')).toBeFalsy();
-        expect(html.includes('{{ data.one.summary }}')).toBeFalsy();
-    });
-
-    it('Should render the englishonly topic page', async function () {
-        if (!liquidEnabled) {
-            this.skip();
-        }
-
-        const englishOnlyPage = new GuidePage('/docs/liquid-project/guide/english-only-topic.html');
-        await browser.url(englishOnlyPage.path);
-        await englishOnlyPage.waitPageLoad();
-
-        const content = await $('>>>doc-content-layout');
-        const text = await content.getText();
-
-        expect(text.includes('English-Only Topic')).toBeTruthy();
-        expect(text.includes('filters: [englishonly]')).toBeTruthy();
-    });
-
-    it('Should not render raw Liquid syntax when Liquid processing is disabled', async function () {
+    it('Should not process Liquid when frontmatter has liquid.enabled as false', async function () {
         if (!liquidEnabled) {
             this.skip();
         }
@@ -175,7 +168,7 @@ describe('Liquid Template Rendering', () => {
         const disabledPage = new GuidePage(
             '/docs/liquid-project/guide/liquid-learning-resources.html',
         );
-        await browser.url(disabledPage.path);
+        disabledPage.open();
         await disabledPage.waitPageLoad();
 
         const content = await $('>>>doc-content-layout');

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

@@ -1,7 +1,6 @@
 import { it } from 'mocha';
 import RedocApisPage from '../pageobjects/api-redoc-reference.page';
 import OverviewPage from '../pageobjects/overview.page';
-import { ReferencePage } from '../pageobjects/reference.page';
 import {
     waitAndGetDocPhaseParentInRedocReferencesPage,
     assertDocPhaseUnavailability,
@@ -10,7 +9,6 @@ import {
 } from '../pageobjects/doc-phase-config';
 
 let page: RedocApisPage;
-let refPage: ReferencePage;
 describe('Redoc API Reference page', () => {
     describe('check layouts', () => {
         before(async () => {
@@ -169,145 +167,4 @@ describe('Redoc API Reference page', () => {
             expect(await heading.isDisplayedInViewport()).toBe(true);
         });
     });
-
-    describe('Flexible References with Redoc Rendering', () => {
-        describe('All references view', () => {
-            before(async () => {
-                refPage = new ReferencePage('docs/service/multi-oas-redoc/references');
-                refPage.open();
-
-                await refPage.waitForMarkdownBasedReferencePageLoad();
-            });
-
-            it('should display all reference titles in LNB', async () => {
-                const treeItems = await refPage.getSidebarItems();
-
-                expect(treeItems.length).toEqual(3);
-            });
-
-            it('should show arrow button after OAS reference titles', async () => {
-                const sideBarContent = await refPage.getSidebarItems();
-
-                const secondItem = sideBarContent[1];
-                const treeItem = await secondItem.shadow$('dx-tree-item');
-                const treeTile = await treeItem.shadow$('a > dx-tree-tile');
-                const arrowIcon = await treeTile.shadow$(
-                    'a > div[role="heading"] > div.tile-forward-arrow',
-                );
-
-                expect(await arrowIcon.isExisting()).toBeTruthy();
-            });
-        });
-
-        describe('Navigation and content verification', () => {
-            it('should display markdown content when first reference is clicked', async () => {
-                const sideBarContent = await refPage.getSidebarItems();
-                const firstItem = sideBarContent[0];
-                const treeItem = await firstItem.shadow$('dx-tree-item');
-                await treeItem.click();
-
-                const contentLayout = await $('>>>doc-content-layout');
-                await contentLayout.waitForDisplayed();
-
-                expect(await contentLayout.isDisplayed()).toBeTruthy();
-
-                const heading = await $('>>>h1');
-                const headingText = await heading.getText();
-
-                expect(headingText).toEqual('Metamind API references');
-            });
-
-            it('should display Redoc UI when OAS reference is clicked', async () => {
-                await browser.url('/docs/service/multi-oas-redoc/references');
-                await refPage.waitForMarkdownBasedReferencePageLoad();
-
-                const sideBarContent = await refPage.getSidebarItems();
-                const secondItem = sideBarContent[1];
-                const treeItem = await secondItem.shadow$('dx-tree-item');
-                await treeItem.click();
-
-                const redocContainer = await $('doc-redoc-reference > .redoc-container');
-                await redocContainer.waitForDisplayed({ timeout: 30000 });
-
-                expect(await redocContainer.isDisplayed()).toBeTruthy();
-
-                page = new RedocApisPage(
-                    'docs/service/multi-oas-redoc/references/redoc-orders-multiple',
-                );
-            });
-
-            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 display current reference title and "All References" with back arrow in LNB', async () => {
-                const projectHeaderContainer = await page.getProjectHeader();
-
-                const backButton = await projectHeaderContainer.$('a.redoc-project-back');
-                const allReference = await backButton.$('span.redoc-project-title');
-                const specTitle = await projectHeaderContainer.$('h2.redoc-spec-title');
-
-                expect(await allReference.getText()).toEqual('All Reference');
-                expect(await backButton.isExisting()).toBeTruthy();
-                expect(await specTitle.getText()).toEqual('Orders API');
-            });
-        });
-
-        describe('Navigation back to all references', () => {
-            before(async () => {
-                page = new RedocApisPage(
-                    'docs/service/multi-oas-redoc/references/redoc-orders-multiple',
-                );
-                page.open();
-                await page.waitPageLoad();
-            });
-
-            it('should navigate back to main URL when back arrow is clicked', async () => {
-                const projectHeaderContainer = await page.getProjectHeader();
-                const backButton = await projectHeaderContainer.$('a.redoc-project-back');
-
-                await backButton.click();
-
-                const contentLayout = await $('>>>doc-content-layout');
-                await contentLayout.waitForDisplayed();
-
-                const currentUrl = await browser.getUrl();
-
-                expect(currentUrl).toContain('/docs/service/multi-oas-redoc/references');
-                expect(currentUrl).not.toContain('redoc-orders-multiple');
-            });
-
-            it('should display all references in LNB after navigating back', async () => {
-                refPage = new ReferencePage('/docs/service/multi-oas-redoc/references');
-                const treeItems = await refPage.getSidebarItems();
-
-                expect(treeItems.length).toEqual(3);
-            });
-
-            it('should navigate to third reference when clicked', async () => {
-                const sideBarContent = await refPage.getSidebarItems();
-                const thirdItem = sideBarContent[2];
-                const treeItem = await thirdItem.shadow$('dx-tree-item');
-                await treeItem.click();
-
-                const redocContainer = await $('doc-redoc-reference > .redoc-container');
-                await redocContainer.waitForDisplayed({ timeout: 30000 });
-
-                expect(await redocContainer.isDisplayed()).toBeTruthy();
-                expect(await browser.getUrl()).toContain('redoc-quip-admin-api');
-
-                page = new RedocApisPage(
-                    'docs/service/multi-oas-redoc/references/redoc-quip-admin-api',
-                );
-
-                const apiTitle = await page.getApiTitle();
-                const titleText = await apiTitle.getText();
-
-                expect(titleText).toMatch('Quip Admin API');
-            });
-        });
-    });
 });

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

@@ -24,11 +24,8 @@ describe('Video Plugin Scenarios ', () => {
         expect(await videoTitle?.getText()).toBe('Video from YouTube');
         const videoContainer = await videoRootElement?.$('.video-plugin-container');
         const iframeElement = await videoContainer?.$('iframe');
-        // The video plugin normalizes the YouTube host to www.youtube.com to
-        // avoid a cross-origin redirect that would drop the iframe's fullscreen
-        // grant (W-23222416). The authored src is `https://youtube.com/...`.
         expect(await iframeElement?.getAttribute('src')).toBe(
-            'https://www.youtube.com/embed/di6iwHhrH6s',
+            'https://youtube.com/embed/di6iwHhrH6s',
         );
     });
 });

package/static-dsc-portal-wdio.conf.js

@@ -18,7 +18,6 @@ exports.config = {
 
     // Exclude tests that require dynamic server features or pages not in static build
     exclude: [
-        // './src/shared/specs/liquid.test.ts',
         './src/portal/specs/docs.api.test.ts',
         './src/portal/specs/docs.test.ts',
         './src/shared/specs/banner.test.ts',

package/static-portal-wdio.conf.js

@@ -18,8 +18,6 @@ exports.config = {
 
     // Exclude tests that require dynamic server features or pages not in static build
     exclude: [
-        // Advanced liquid tests require previewFuture, variables — not in static build
-        './src/shared/specs/liquid-advanced.test.ts',
         // /docs/apis landing page doesn't exist in static builds
         './src/portal/specs/docs.api.test.ts',
         // /docs landing page doesn't exist in static builds

package/wdio.conf.js

@@ -3,5 +3,4 @@ const BASE_CONFIG = require('./common-wdio.conf');
 exports.config = {
     ...BASE_CONFIG.config,
     specs: ['./src/content-repo/specs/**/*.test.ts', './src/shared/specs/*.test.ts'],
-    exclude: ['./src/shared/specs/contentActionToolbar.test.ts'],
 };

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

@@ -1,59 +0,0 @@
-import GuidePage from '../pageobjects/guide.page';
-import { ReferencePage } from '../pageobjects/reference.page';
-
-const EN_US_GUIDE_PATH = '/docs/service/vscode-maintainer/guide/vscode-overview.html';
-const EN_US_MARKDOWN_REFERENCE_PATH =
-    '/docs/commerce/flexible-references/references/shopper-manual-ref/quick-start.html';
-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']),
-    );
-}
-
-describe('Content action toolbar scenarios', () => {
-    it('Markdown guide should have the toolbar', 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);
-    });
-
-    it('Markdown reference should have the toolbar', 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);
-    });
-
-    it("Non-markdown reference shouldn't have toolbar", 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();
-    });
-
-    it("Non en-us locale page shouldn't have toolbar", 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();
-    });
-});

package/src/shared/specs/liquid-advanced.test.ts

@@ -1,71 +0,0 @@
-import GuidePage from '../pageobjects/guide.page';
-
-let page: GuidePage;
-let liquidEnabled = false;
-
-describe('Liquid Template Rendering — Advanced', () => {
-    before(async () => {
-        try {
-            page = new GuidePage('/docs/liquid-project/guide/liquid-quickstart.html');
-            await browser.url(page.path);
-            await page.waitPageLoad();
-
-            const content = await $('>>>doc-content-layout');
-            const text = await content.getText();
-
-            liquidEnabled = text.includes('Hello from data.yaml');
-        } catch (e) {
-            liquidEnabled = false;
-        }
-    });
-
-    beforeEach(async () => {
-        if (liquidEnabled) {
-            page = new GuidePage('/docs/liquid-project/guide/liquid-quickstart.html');
-            await browser.url(page.path);
-            await page.waitPageLoad();
-        }
-    });
-
-    it('Should render repository-level variables from content-config.yml', async function () {
-        if (!liquidEnabled) {
-            this.skip();
-        }
-
-        const content = await $('>>>doc-content-layout');
-        const text = await content.getText();
-        const html = await content.getHTML();
-
-        expect(text.includes('Salesforce Platform')).toBeTruthy();
-        expect(text.includes('62.0')).toBeTruthy();
-        expect(text.includes('sf')).toBeTruthy();
-        expect(html.includes('{{ variables.platform')).toBeFalsy();
-    });
-
-    it('Should render future block content when previewFuture is enabled', async function () {
-        if (!liquidEnabled) {
-            this.skip();
-        }
-
-        const content = await $('>>>doc-content-layout');
-        const text = await content.getText();
-
-        expect(text.includes('Coming Soon')).toBeTruthy();
-    });
-
-    it('Should render the future topic page when previewFuture is enabled', async function () {
-        if (!liquidEnabled) {
-            this.skip();
-        }
-
-        const futurePage = new GuidePage('/docs/liquid-project/guide/future-topic.html');
-        await browser.url(futurePage.path);
-        await futurePage.waitPageLoad();
-
-        const content = await $('>>>doc-content-layout');
-        const text = await content.getText();
-
-        expect(text.includes('Future Feature')).toBeTruthy();
-        expect(text.includes('previewFuture')).toBeTruthy();
-    });
-});