@salesforcedevs/sfdocs-e2e 1.0.10-alpha → 1.0.11-toolbar.0

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

@@ -0,0 +1,110 @@
+import DocsPage from '../pageobjects/docs.page';
+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 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();
+    });
+});
+
+describe('Docs content type > future filter', () => {
+    let docsFutureEnabled = false;
+    const overviewPath = '/docs/docs-content-type-example/get-started.html';
+
+    before(async () => {
+        try {
+            const docsPage = new DocsPage(overviewPath);
+            docsPage.open();
+            await docsPage.waitPageLoad();
+
+            const content = await $('>>>doc-content-layout');
+            const text = await content.getText();
+
+            docsFutureEnabled = text.includes(
+                'hidden in production and excluded from localization unless',
+            );
+        } catch (e) {
+            docsFutureEnabled = false;
+        }
+    });
+
+    it('renders an inline future block when previewFuture is enabled', async function () {
+        if (!docsFutureEnabled) {
+            this.skip();
+        }
+
+        const docsPage = new DocsPage(overviewPath);
+        docsPage.open();
+        await docsPage.waitPageLoad();
+
+        const content = await $('>>>doc-content-layout');
+        const text = await content.getText();
+        const html = await content.getHTML();
+
+        expect(text).toContain('hidden in production and excluded from localization unless');
+        expect(html).not.toContain('{% future');
+    });
+
+    it('renders the future topic page when previewFuture is enabled', async function () {
+        if (!docsFutureEnabled) {
+            this.skip();
+        }
+
+        const docsPage = new DocsPage('/docs/docs-content-type-example/upcoming-graphql.html');
+        docsPage.open();
+        await docsPage.waitPageLoad();
+
+        expect(await (await docsPage.getContentHeading()).getText()).toContain(
+            'Upcoming: GraphQL API',
+        );
+    });
+});

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

@@ -7,7 +7,7 @@ describe('Liquid Template Rendering', () => {
     before(async () => {
         try {
             page = new GuidePage('/docs/liquid-project/guide/liquid-quickstart.html');
-            page.open();
+            await browser.url(page.path);
             await page.waitPageLoad();
 
             const content = await $('>>>doc-content-layout');
@@ -16,9 +16,9 @@ describe('Liquid Template Rendering', () => {
 
             const hasLiquidOutput = text.includes('Hello from data.yaml');
             const hasRawSyntax =
-                html.includes('{{ data.greeting }}') ||
-                html.includes('{{ topic }}') ||
-                (html.includes('{{') && html.includes('{%'));
+                html.includes('{% assign') ||
+                html.includes('{% include') ||
+                html.includes('{{ data.greeting }}');
 
             if (hasRawSyntax) {
                 liquidEnabled = false;
@@ -35,7 +35,7 @@ describe('Liquid Template Rendering', () => {
     beforeEach(async () => {
         if (liquidEnabled) {
             page = new GuidePage('/docs/liquid-project/guide/liquid-quickstart.html');
-            page.open();
+            await browser.url(page.path);
             await page.waitPageLoad();
         }
     });
@@ -50,10 +50,21 @@ describe('Liquid Template Rendering', () => {
 
         expect(text.includes('GitHub for writers')).toBeTruthy();
         expect(text.includes('Hello from data.yaml')).toBeTruthy();
+    });
 
+    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(html.includes('{{ topic }}')).toBeFalsy();
-        expect(html.includes('{{ data.greeting }}')).toBeFalsy();
+
+        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 included templates from shared directory', async function () {
@@ -86,27 +97,29 @@ describe('Liquid Template Rendering', () => {
         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();
+        expect(text.includes('supported_calls')).toBeFalsy();
+        expect(html.includes('for call in supported_calls')).toBeFalsy();
     });
 
-    it('Should not process Liquid syntax inside code blocks', async function () {
+    it('Should resolve {{ }} outputs inside code blocks but keep {% %} tags literal', async function () {
         if (!liquidEnabled) {
             this.skip();
         }
 
-        const content = await $('>>>doc-content-layout');
-        const html = await content.getHTML();
-        const codeBlock = await content.$('code');
+        const codeBlockElement = await $('>>>.code-block-content');
+        const codeBlock = await codeBlockElement.shadow$('code');
 
         expect(await codeBlock.isExisting()).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 codeText = await codeBlock.getText();
+        expect(codeText.includes('{{ data.greeting }}')).toBeFalsy();
+        expect(codeText.includes('{{ topic }}')).toBeFalsy();
+        expect(codeText.includes('Hello from data.yaml')).toBeTruthy();
+        expect(codeText.includes('GitHub for writers')).toBeTruthy();
+        expect(codeText.includes('{% for item in items %}')).toBeTruthy();
+        expect(codeText.includes('{{ item }}')).toBeTruthy();
 
+        const content = await $('>>>doc-content-layout');
         const text = await content.getText();
         expect(text.includes('Visit')).toBeTruthy();
     });
@@ -131,16 +144,76 @@ describe('Liquid Template Rendering', () => {
         expect(html.includes('{{ id2 }}')).toBeFalsy();
     });
 
-    it('Should not process Liquid when frontmatter has liquid.enabled as false', async function () {
+    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 disabledPage = new GuidePage(
+        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 render a file with no Liquid syntax as plain markdown', async function () {
+        if (!liquidEnabled) {
+            this.skip();
+        }
+
+        const plainPage = new GuidePage(
             '/docs/liquid-project/guide/liquid-learning-resources.html',
         );
-        disabledPage.open();
-        await disabledPage.waitPageLoad();
+
+        await browser.url(plainPage.path);
+        await plainPage.waitPageLoad();
 
         const content = await $('>>>doc-content-layout');
         const text = await content.getText();
@@ -149,3 +222,100 @@ describe('Liquid Template Rendering', () => {
         expect(text.includes('Liquid is a templating language supported in SFDocs')).toBeTruthy();
     });
 });
+
+describe('Liquid Template Rendering — Localized (ja-jp)', () => {
+    let jaLiquidEnabled = false;
+    const quickstartPath = '/docs/ja-jp/liquid-project/guide/liquid-quickstart.html';
+
+    before(async () => {
+        try {
+            page = new GuidePage(quickstartPath);
+            await browser.url(page.path);
+            await page.waitPageLoad();
+
+            const content = await $('>>>doc-content-layout');
+            const text = await content.getText();
+            const html = await content.getHTML();
+
+            const hasLiquidOutput = text.includes('data.yaml からこんにちは');
+            const hasRawSyntax =
+                html.includes('{% assign topic') || html.includes('{{ data.greeting }}');
+
+            jaLiquidEnabled = hasLiquidOutput && !hasRawSyntax;
+        } catch (e) {
+            jaLiquidEnabled = false;
+        }
+    });
+
+    beforeEach(async () => {
+        if (jaLiquidEnabled) {
+            page = new GuidePage(quickstartPath);
+            await browser.url(page.path);
+            await page.waitPageLoad();
+        }
+    });
+
+    it('Should render frontmatter assigns and data.yaml values in Japanese', async function () {
+        if (!jaLiquidEnabled) {
+            this.skip();
+        }
+
+        const content = await $('>>>doc-content-layout');
+        const text = await content.getText();
+
+        expect(text.includes('ライターのための GitHub')).toBeTruthy();
+        expect(text.includes('data.yaml からこんにちは')).toBeTruthy();
+    });
+
+    it('Should render repository-level variables in a localized topic', async function () {
+        if (!jaLiquidEnabled) {
+            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(html.includes('{{ variables.platform')).toBeFalsy();
+    });
+
+    it('Should render a loop and an included partial capture block in Japanese', async function () {
+        if (!jaLiquidEnabled) {
+            this.skip();
+        }
+
+        const content = await $('>>>doc-content-layout');
+        const text = await content.getText();
+        const html = await content.getHTML();
+
+        expect(text.includes('create()')).toBeTruthy();
+        expect(text.includes('再利用可能なヒント')).toBeTruthy();
+        expect(
+            text.includes('ウィジェットは Widgets API を通じて作成および管理されます'),
+        ).toBeTruthy();
+        // Dash-form tags are the fixture's real (resolved) tags; the bare "{% include %}"
+        // in the prose renders as literal inline code, so assert on the dash form only.
+        expect(html.includes('{%- include')).toBeFalsy();
+        expect(html.includes('{%- capture')).toBeFalsy();
+    });
+
+    it('Should render liquid.data object format in a localized topic', async function () {
+        if (!jaLiquidEnabled) {
+            this.skip();
+        }
+
+        const multiDataPage = new GuidePage('/docs/ja-jp/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('小売店舗や顧客サイト')).toBeTruthy();
+        expect(html.includes('{{ data.one.summary }}')).toBeFalsy();
+        expect(html.includes('{{ two.summary }}')).toBeFalsy();
+    });
+});

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

@@ -1,6 +1,7 @@
 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,
@@ -9,6 +10,7 @@ import {
 } from '../pageobjects/doc-phase-config';
 
 let page: RedocApisPage;
+let refPage: ReferencePage;
 describe('Redoc API Reference page', () => {
     describe('check layouts', () => {
         before(async () => {
@@ -167,4 +169,145 @@ 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,8 +24,11 @@ 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://youtube.com/embed/di6iwHhrH6s',
+            'https://www.youtube.com/embed/di6iwHhrH6s',
         );
     });
 });

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

@@ -21,6 +21,7 @@ exports.config = {
         './src/portal/specs/docs.api.test.ts',
         './src/portal/specs/docs.test.ts',
         './src/shared/specs/banner.test.ts',
+        './src/shared/specs/liquid-advanced.test.ts',
     ],
 
     // Output directory for static test results

package/static-portal-wdio.conf.js

@@ -18,6 +18,8 @@ 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,4 +3,5 @@ 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'],
 };