dimsum-e2e-tests 3.62.1 → 3.70.0-alpha.11

package/ds-global-header/GlobalHeader.func.spec.js

@@ -1,7 +1,19 @@
 import { Key } from 'webdriverio';
 import GlobalHeader from './GlobalHeaderCO';
 
-if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+// Asserts the search-toggle spinbutton reflects the expected selected-result state.
+const expectSelectedResult = async (valuenow, valuetext) => {
+  const spinButton = await GlobalHeader.getSearchToggleSpinbutton();
+  await expect(spinButton).toHaveAttribute('aria-valuenow', valuenow);
+  await expect(spinButton).toHaveAttribute('aria-valuetext', valuetext);
+};
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
   describe('PUI-10036 - GlobalHeader: title and aria attributes', () => {
     before(async () => {
       const errorOnGo = await GlobalHeader.customAttributes.go();
@@ -80,4 +92,61 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(firstToolbarItem).not.toBeFocused();
     });
   });
+
+  // Tests for the fix in PUI-17974 (SearchToggle arrow navigation could not start with ArrowDown nor cycle)
+  describe('PUI-18772 - GlobalHeader: SearchToggle result navigation with ArrowDown -Func', () => {
+    before(async () => {
+      const errorOnGo = await GlobalHeader.withSearchToggleURL.go();
+      if (errorOnGo) throw errorOnGo;
+      await GlobalHeader.openAndPopulateSearchToggle();
+    });
+    it('01: should be idle (no result selected) before navigation starts', async () => {
+      await expectSelectedResult('0', '3 total results');
+    });
+    it('02: should start navigation on last result when pressing ArrowDown from idle', async () => {
+      await browser.keys(Key.ArrowDown);
+      await expectSelectedResult('3', 'result 3 of 3');
+    });
+    it('03: should move to the previous result on subsequent ArrowDown', async () => {
+      await browser.keys(Key.ArrowDown);
+      await expectSelectedResult('2', 'result 2 of 3');
+    });
+    it('04: should reach the first result on ArrowDown', async () => {
+      await browser.keys(Key.ArrowDown);
+      await expectSelectedResult('1', 'result 1 of 3');
+    });
+    it('05: should cycle from the first result back to the last on ArrowDown', async () => {
+      await browser.keys(Key.ArrowDown);
+      await expectSelectedResult('3', 'result 3 of 3');
+    });
+  });
+
+  // Tests for the fix in PUI-17974 (SearchToggle arrow navigation could not start with ArrowDown nor cycle)
+  describe('PUI-18773 - GlobalHeader: SearchToggle result navigation with ArrowUp -Func', () => {
+    // same setup as above; here the ArrowUp navigation is exercised from idle
+    before(async () => {
+      const errorOnGo = await GlobalHeader.withSearchToggleURL.go();
+      if (errorOnGo) throw errorOnGo;
+      await GlobalHeader.openAndPopulateSearchToggle();
+    });
+    it('01: should be idle (no result selected) before navigation starts', async () => {
+      await expectSelectedResult('0', '3 total results');
+    });
+    it('02: should start navigation on the first result when pressing ArrowUp from idle', async () => {
+      await browser.keys(Key.ArrowUp);
+      await expectSelectedResult('1', 'result 1 of 3');
+    });
+    it('03: should move to the next result on subsequent ArrowUp', async () => {
+      await browser.keys(Key.ArrowUp);
+      await expectSelectedResult('2', 'result 2 of 3');
+    });
+    it('04: should reach the last result on ArrowUp', async () => {
+      await browser.keys(Key.ArrowUp);
+      await expectSelectedResult('3', 'result 3 of 3');
+    });
+    it('05: should cycle from the last result back to the first on ArrowUp', async () => {
+      await browser.keys(Key.ArrowUp);
+      await expectSelectedResult('1', 'result 1 of 3');
+    });
+  });
 }

package/ds-global-header/GlobalHeader.visual.spec.js

@@ -164,4 +164,35 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(snapshot).toEqual(0);
     });
   });
+
+  describe('PUI-18378 - GlobalHeader: with SearchToggle -Visual', () => {
+    before(async () => {
+      const errorOnGo = await GlobalHeader.withSearchToggleURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display global header with expanded search toggle', async () => {
+      await browser.eyesOpen();
+      const searchToggleTrigger = await GlobalHeader.getGHToolbarItem(0);
+      await searchToggleTrigger.click();
+      const snapshot = await browser.eyesCheckSnapshot(GlobalHeader.snapshotPath('global-with-searchbox-open'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display global header with populated search toggle', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys('Labor');
+      const snapshot = await browser.eyesCheckSnapshot(GlobalHeader.snapshotPath('global-with-searchbox-populated'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: should display global header with focused spinbutton and highlighted result', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.ArrowUp);
+      const globalHeader = await GlobalHeader.getGlobalHeader();
+      await globalHeader.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(GlobalHeader.snapshotPath('global-with-searchbox-highlight'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
 }

package/ds-global-header/GlobalHeaderCO.js

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-relative-packages */
-import { PATH_E2E_GLOBAL_HEADER } from '../paths';
-import { PageObject, Urlbuilder } from '../helpers';
+import { PATH_E2E_GLOBAL_HEADER, PATH_E2E_GLOBAL_HEADER_PUI18647 } from '../paths';
+import { PageObject, Urlbuilder, getElementByIndex, type } from '../helpers';
 
 export default class GlobalHeader extends PageObject {
   static basicURL = new Urlbuilder(PATH_E2E_GLOBAL_HEADER, 'basic');
@@ -31,6 +31,19 @@ export default class GlobalHeader extends PageObject {
 
   static withLayoutProvider = new Urlbuilder(PATH_E2E_GLOBAL_HEADER, 'with-layout-provider');
 
+  // PUI-18647 — one story per out-of-the-box toolbar item type, each a minimal header carrying only
+  // that item with every injection point wired to data-public="true".
+  static appPickerPassthroughURL = new Urlbuilder(PATH_E2E_GLOBAL_HEADER_PUI18647, 'app-picker-contract-passthrough');
+
+  static iconButtonItemURL = new Urlbuilder(PATH_E2E_GLOBAL_HEADER_PUI18647, 'icon-button-item-attributes');
+
+  static popupMenuSlotSurfaceURL = new Urlbuilder(PATH_E2E_GLOBAL_HEADER_PUI18647, 'popup-menu-slot-surface');
+
+  static searchToggleSlotsURL = new Urlbuilder(
+    PATH_E2E_GLOBAL_HEADER_PUI18647,
+    'search-toggle-item-attributes-and-slots',
+  );
+
   // Selectors
   static async getGHBreadcrumbBtn(label) {
     return $(`//a[@data-testid="gh-breadcrumb-btn"]/span[contains(text(),"${label}")]/ancestor::a`);
@@ -84,6 +97,111 @@ export default class GlobalHeader extends PageObject {
     return $('button*=Skip');
   }
 
+  static async getSearchToggleInput() {
+    return $('[data-testid="ds-globalheader-searchtoggle-textinput"]');
+  }
+
+  static async getSearchToggleSpinbutton() {
+    return $('[data-testid="ds-globalheader-searchtoggle-spinbutton-text"]');
+  }
+
+  // Opens the search toggle, runs a query, and focuses the populated results spinbutton
+  // so result navigation can be exercised. Waits for results to load before returning.
+  static async openAndPopulateSearchToggle(searchText = 'Labor') {
+    const toggleSearch = await GlobalHeader.getGHToolbarItem(0);
+    await toggleSearch.click();
+    const searchInput = await GlobalHeader.getSearchToggleInput();
+    await searchInput.click();
+    await type(searchText);
+    const spinButton = await GlobalHeader.getSearchToggleSpinbutton();
+    await browser.waitUntil(async () => (await spinButton.getText()) !== 'n/a', {
+      timeout: 3000,
+      timeoutMsg: 'search results did not populate after typing',
+    });
+    await spinButton.click();
+  }
+
+  // PUI-18647 selectors
+
+  // Every element the stories wire to data-public="true". The assertions read this collection rather
+  // than probing one testid at a time: the contract under test is "the whole surface is reachable",
+  // so a slot silently dropping out has to fail the count, not slip through an unasserted gap.
+  static async getPublicNodes() {
+    return $$('[data-public="true"]');
+  }
+
+  static async getPublicNodeTestIds() {
+    const nodes = await GlobalHeader.getPublicNodes();
+    return Promise.all(Array.from({ length: nodes.length }, (_, index) => nodes[index].getAttribute('data-testid')));
+  }
+
+  // The stories render "Yes" here if any element in the page carries a type="ds-*" attribute. The
+  // toolbar `type` discriminator is internal routing and must never reach the DOM — `type` is a
+  // reserved HTML attribute.
+  static async getDsTypedItemExistFlag() {
+    return $('[data-testid="pui18647-ds-typed-item-exist"]');
+  }
+
+  static async getClickCount() {
+    return $('[data-testid="pui18647-click-count"]');
+  }
+
+  // A custom TriggerComponent handed to the app-picker item through componentProps. Its presence is
+  // what proves componentProps reaches DSAppPicker at all: it replaces the built-in trigger, so
+  // there is no `gh-toolbar-item` button in that story.
+  static async getAppPickerCustomTrigger() {
+    return $('[data-testid="pui18647-gh-apppicker-trigger-component"]');
+  }
+
+  // The popup-menu item's own root. Before PUI-18647 this element was an unstyled wrapper with no
+  // slot and no data-testid, so the item as a whole had no injection point.
+  static async getPopupMenuContainer() {
+    return $('[data-testid="ds-globalheader-menubar-item-popupmenu-container"]');
+  }
+
+  static async getPopupMenuItemButtons() {
+    return $$('[data-testid="ds-global-header-menubar-item-popupmenu-item-button"]');
+  }
+
+  static async getPopupMenuItemButtonByIndex(index = 0) {
+    return getElementByIndex(GlobalHeader.getPopupMenuItemButtons, index);
+  }
+
+  // The search-toggle item's root container. Item-level global attributes land HERE for this item
+  // type, not on the trigger button as with the sibling types.
+  static async getSearchToggleContainer() {
+    return $('[data-testid="ds-globalheader-menubar-item-searchtoggle-container"]');
+  }
+
+  static async getSearchTogglePrevButton() {
+    return $('[data-testid="ds-globalheader-searchtoggle-spinbutton-prev"]');
+  }
+
+  static async getSearchToggleNextButton() {
+    return $('[data-testid="ds-globalheader-searchtoggle-spinbutton-next"]');
+  }
+
+  // A neutral, non-focusable target outside any open overlay, used to assert that dismissing by
+  // pointer leaves focus where the click put it instead of yanking it back to the trigger.
+  // Anchored on a data-testid rather than on a tag: $('h1') matches Storybook's own hidden
+  // "No Preview" heading first, which is not clickable and is not part of the story at all.
+  static async getOutsideClickTarget() {
+    return GlobalHeader.getDsTypedItemExistFlag();
+  }
+
+  static async getSearchableRowByIndex(index = 0) {
+    return $(`[data-testid="pui18647-row-${index}"]`);
+  }
+
+  // The stories highlight the current result with an inline khaki background, so the selected row is
+  // read off the computed style rather than a semantic attribute — there is no semantic one to read.
+  // Matched on the rgb channels only: browsers disagree on whether to emit `rgb(...)` or `rgba(...,1)`
+  // and on internal spacing, and none of that is what the assertion is about.
+  static async isRowHighlighted(row) {
+    const { value } = await row.getCSSProperty('background-color');
+    return String(value).replace(/\s/g, '').includes('240,230,140');
+  }
+
   // Slots
 
   static async getGHBreadcrumbChevronlotByIndex(index = 0) {

package/ds-global-header/app-picker-passthrough/GlobalHeader.app-picker-passthrough.func.spec.js

@@ -0,0 +1,113 @@
+import { Key } from 'webdriverio';
+import GlobalHeaderCO from '../GlobalHeaderCO';
+import DSAppPickerCO from '../../ds-apppicker/DSAppPickerCO';
+
+// Tests for the fix in PUI-18647. Only a hand-maintained subset of props reached the out-of-the-box
+// GlobalHeader -> DSAppPicker item; the rest were silently dropped, so the item could not customise
+// the picker's slots at all. The reported symptom was `dsApppickerChip={{ 'data-public': true }}`
+// never arriving, leaving LogRocket masking the app icons and labels (blocks ENCW-136789).
+//
+// The hand-off is now a full contract passthrough, which this spec proves along three channels:
+//   1. the nine DSAppPicker slot props,
+//   2. non-slot members of the same contract — TriggerComponent, onOpen/onClose, id,
+//   3. GlobalHeader's own slots, which had to keep working across the refactor.
+//
+// Two a11y changes ride along and are pinned here because QA selectors depend on them: the trigger's
+// aria-haspopup is now "dialog" rather than "true", and it no longer carries aria-expanded (a dialog
+// announces its open state by being present). Open state is therefore asserted via the panel, never
+// via the attribute.
+//
+// Chrome only: DOM attributes plus programmatic focus landings, identical in every engine. The
+// `|| 'Chrome'` arm is mandatory (BrowserStack capitalises browserName; a lowercase-only guard
+// registers zero tests and still exits 0).
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-19015 - GlobalHeader:: app-picker componentProps contract passthrough - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await GlobalHeaderCO.appPickerPassthroughURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render the custom trigger handed through componentProps', async () => {
+      const trigger = await GlobalHeaderCO.getAppPickerCustomTrigger();
+      await trigger.waitForDisplayed();
+      await expect(trigger).toHaveText('Apps');
+
+      // componentProps.id reaches DSAppPicker and namespaces the generated trigger id.
+      await expect(await trigger.getAttribute('id')).toBe('pui18647-gh-apppicker-dialog-trigger-btn');
+
+      await expect(trigger).toHaveAttribute('aria-haspopup', 'dialog');
+      // Absent by design — asserting the panel is present is the supported way to read open state.
+      await expect(await trigger.getAttribute('aria-expanded')).toBe(null);
+
+      const dsTypedFlag = await GlobalHeaderCO.getDsTypedItemExistFlag();
+      await expect(dsTypedFlag).toHaveText('No');
+    });
+
+    it("02: should keep forwarding GlobalHeader's own slots while the picker is closed", async () => {
+      const publicTestIds = await GlobalHeaderCO.getPublicNodeTestIds();
+      await expect(publicTestIds).toEqual([
+        'ds-global-header',
+        'ds-global-header-logo-container',
+        'ds-global-header-menubar-container',
+        'ds-global-header-menubar-list',
+        'ds-global-header-menubar-item',
+      ]);
+    });
+
+    it('03: should forward every app-picker slot prop and the onOpen callback', async () => {
+      await (await GlobalHeaderCO.getAppPickerCustomTrigger()).click();
+      await (await DSAppPickerCO.getAppPickerRoot()).waitForDisplayed();
+
+      // The story's onOpen re-scans the document, so the table only grows if that callback arrived
+      // too — the count below is simultaneously the slot assertion and the onOpen assertion.
+      const publicTestIds = await GlobalHeaderCO.getPublicNodeTestIds();
+      const countOf = (testId) => publicTestIds.filter((id) => id === testId).length;
+
+      // Three apps, two custom apps, one separator between the two sections.
+      await expect(countOf('ds-apppicker-root')).toBe(1);
+      await expect(countOf('ds-apppicker-group')).toBe(2);
+      await expect(countOf('ds-apppicker-row')).toBe(3);
+      await expect(countOf('ds-apppicker-title')).toBe(2);
+      await expect(countOf('ds-apppicker-item')).toBe(5);
+      await expect(countOf('ds-apppicker-separator')).toBe(1);
+      await expect(countOf('ds-apppicker-floating-wrapper')).toBe(1);
+      // dsApppickerChip — the prop the defect was raised about. One tagged node per app.
+      await expect(countOf('app-picker__chip')).toBe(5);
+
+      // The panel is a dialog named by the custom trigger, so the widened contract did not cost the
+      // picker its ARIA pattern.
+      const dialog = await DSAppPickerCO.getFloatingWrapper();
+      await expect(dialog).toHaveAttribute('role', 'dialog');
+      await expect(await dialog.getAttribute('aria-labelledby')).toBe(
+        await (await GlobalHeaderCO.getAppPickerCustomTrigger()).getAttribute('id'),
+      );
+
+      const dsTypedFlag = await GlobalHeaderCO.getDsTypedItemExistFlag();
+      await expect(dsTypedFlag).toHaveText('No');
+    });
+
+    it('04: should open onto the selected app with ArrowDown and ArrowUp', async () => {
+      // The toolbar is a menubar, so it opts the picker into openAndFocusOnArrowKeys. 'Reports' is
+      // the third app, so "landed on the selected app" cannot be read as "landed on the first app".
+      await browser.keys(Key.Escape);
+      const trigger = await GlobalHeaderCO.getAppPickerCustomTrigger();
+      await expect(trigger).toBeFocused();
+
+      await browser.keys(Key.ArrowDown);
+      await (await DSAppPickerCO.getAppPickerRoot()).waitForDisplayed();
+      await expect(await DSAppPickerCO.getChipByLabel('Reports')).toBeFocused();
+
+      // ArrowUp opens nothing before this change; it now lands on the same selected app.
+      await browser.keys(Key.Escape);
+      await expect(trigger).toBeFocused();
+      await browser.keys(Key.ArrowUp);
+      await (await DSAppPickerCO.getAppPickerRoot()).waitForDisplayed();
+      await expect(await DSAppPickerCO.getChipByLabel('Reports')).toBeFocused();
+    });
+  });
+}

package/ds-global-header/popup-menu-focus/GlobalHeader.popup-menu-focus.func.spec.js

@@ -0,0 +1,63 @@
+import { Key } from 'webdriverio';
+import GlobalHeaderCO from '../GlobalHeaderCO';
+
+// Tests for the popup-menu focus fixes shipped with PUI-18647:
+//
+//  - (NEW) ArrowDown on the trigger opens onto the FIRST item; ArrowUp opens onto the LAST. ArrowUp
+//    did not open the menu at all before.
+//  - (FIX) Clicking outside no longer drags focus back to the trigger. It stays where the click put
+//    it, so focus is no longer lost arbitrarily on a pointer dismissal.
+//  - (unchanged) Escape still closes and returns focus to the trigger.
+//
+// Full browser matrix on purpose: pointer-driven dismissal and where focus settles afterwards is
+// precisely the behaviour engines implement differently.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-19018 - GlobalHeader:: popup-menu open and focus return paths - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await GlobalHeaderCO.popupMenuSlotSurfaceURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should open onto the first menu item with ArrowDown', async () => {
+      // Focused programmatically rather than by clicking: a click would open the menu, and closing it
+      // again to get back to "closed trigger, focused" makes the starting state depend on where a
+      // dismissal leaves focus, which varies by engine. The ArrowDown behaviour is the case here.
+      const trigger = await GlobalHeaderCO.getGHToolbarItem(0);
+      await trigger.waitForDisplayed();
+      await browser.execute((el) => el.focus(), trigger);
+      await expect(trigger).toBeFocused();
+
+      await browser.keys(Key.ArrowDown);
+      await (await GlobalHeaderCO.getPopupContent()).waitForDisplayed();
+
+      const firstItem = await GlobalHeaderCO.getPopupMenuItemButtonByIndex(0);
+      await expect(firstItem).toBeFocused();
+      await expect(firstItem).toHaveText('Preferences');
+    });
+
+    it('02: should close and return focus to the trigger on Escape', async () => {
+      await browser.keys(Key.Escape);
+
+      await expect(await GlobalHeaderCO.getPopupContent()).not.toBeDisplayed();
+      await expect(await GlobalHeaderCO.getGHToolbarItem(0)).toBeFocused();
+    });
+
+    it('03: should open onto the last menu item with ArrowUp', async () => {
+      await browser.keys(Key.ArrowUp);
+      await (await GlobalHeaderCO.getPopupContent()).waitForDisplayed();
+
+      const lastItem = await GlobalHeaderCO.getPopupMenuItemButtonByIndex(1);
+      await expect(lastItem).toBeFocused();
+      await expect(lastItem).toHaveText('Sign out');
+    });
+
+    it('04: should close without returning focus to the trigger on an outside click', async () => {
+      await (await GlobalHeaderCO.getOutsideClickTarget()).click();
+
+      await expect(await GlobalHeaderCO.getPopupContent()).not.toBeDisplayed();
+      // The heading is not focusable, so focus settles on the body. The point is only that it did
+      // NOT get pulled back to the trigger, which is what used to happen.
+      await expect(await GlobalHeaderCO.getGHToolbarItem(0)).not.toBeFocused();
+    });
+  });
+}

package/ds-global-header/popup-menu-slots/GlobalHeader.popup-menu-slots.func.spec.js

@@ -0,0 +1,70 @@
+import { Key } from 'webdriverio';
+import GlobalHeaderCO from '../GlobalHeaderCO';
+
+// Tests for the new slot introduced in PUI-18647. The ds-popup-menu item's outermost element used to
+// be an unstyled wrapper with no slot and no data-testid, so the item as a whole had no injection
+// point — nowhere to reach it, nowhere for xstyled props to land. It is now
+// `dsGlobalheaderMenubarItemPopupmenuContainer` / `ds-globalheader-menubar-item-popupmenu-container`.
+//
+// The change is additive: every pre-existing slot name and data-testid in this subtree is unchanged
+// and sits in the same DOM position, so no existing selector moves. Both the new and the pre-existing
+// slots are asserted here so a regression in either fails.
+//
+// Chrome only — pure DOM attribute assertions. The `|| 'Chrome'` arm is mandatory (BrowserStack
+// capitalises browserName; a lowercase-only guard silently registers zero tests and still exits 0).
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-19017 - GlobalHeader:: popup-menu item slot surface - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await GlobalHeaderCO.popupMenuSlotSurfaceURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should expose the new item container slot while the menu is closed', async () => {
+      const container = await GlobalHeaderCO.getPopupMenuContainer();
+      await container.waitForDisplayed();
+      await expect(container).toHaveAttribute('data-dimsum-slot', 'dsGlobalheaderMenubarItemPopupmenuContainer');
+
+      // Closed, the reachable surface is the item container plus the trigger button. Item-level
+      // attributes land on the TRIGGER for this item type, not on the container.
+      const publicTestIds = await GlobalHeaderCO.getPublicNodeTestIds();
+      await expect(publicTestIds).toEqual(['ds-globalheader-menubar-item-popupmenu-container', 'gh-toolbar-item']);
+
+      const dsTypedFlag = await GlobalHeaderCO.getDsTypedItemExistFlag();
+      await expect(dsTypedFlag).toHaveText('No');
+    });
+
+    it('02: should expose every popup-menu slot once the menu is open', async () => {
+      const trigger = await GlobalHeaderCO.getGHToolbarItem(0);
+      await trigger.click();
+      await (await GlobalHeaderCO.getPopupContent()).waitForDisplayed();
+
+      // Two options and one separator, so the per-item slots appear twice. The exact testid spelling
+      // is asserted rather than normalised: the container and the item label use `ds-globalheader-`
+      // while their siblings use `ds-global-header-`, and that inconsistency is what consumers'
+      // selectors have to match.
+      const publicTestIds = await GlobalHeaderCO.getPublicNodeTestIds();
+      await expect(publicTestIds).toEqual([
+        'ds-globalheader-menubar-item-popupmenu-container',
+        'gh-toolbar-item',
+        'ds-global-header-menubar-item-popupmenu-list',
+        'ds-global-header-menubar-item-popupmenu-item',
+        'ds-global-header-menubar-item-popupmenu-item-button',
+        'ds-globalheader-menubar-item-popupmenu-item-label',
+        'ds-global-header-menubar-item-popupmenu-separator',
+        'ds-global-header-menubar-item-popupmenu-item',
+        'ds-global-header-menubar-item-popupmenu-item-button',
+        'ds-globalheader-menubar-item-popupmenu-item-label',
+      ]);
+
+      const dsTypedFlag = await GlobalHeaderCO.getDsTypedItemExistFlag();
+      await expect(dsTypedFlag).toHaveText('No');
+
+      await browser.keys(Key.Escape);
+    });
+  });
+}

package/ds-global-header/search-toggle-slots/GlobalHeader.search-toggle-slots.func.spec.js

@@ -0,0 +1,118 @@
+import { Key } from 'webdriverio';
+import GlobalHeaderCO from '../GlobalHeaderCO';
+import { type } from '../../helpers';
+
+// Tests for the ds-search-toggle changes in PUI-18647:
+//
+//  - (NEW) item-level attributes now land on the item's ROOT CONTAINER, not on the trigger button as
+//    with the sibling item types. The type declared that surface on its configuration type and
+//    forwarded none of it, so data-public on a search-toggle entry appeared nowhere.
+//  - (RENAMED) that container's data-testid moved from `ds-global-header-menubar-item-searchtoggle-
+//    container` to `ds-globalheader-menubar-item-searchtoggle-container`. The element itself is
+//    unchanged; commit 295f110651c dropped its legacy override in constants/index.ts, so the
+//    auto-generated post-convention value now wins. Asserted as the DOM currently renders it — if
+//    the legacy override is restored, this expectation flips back to the hyphenated spelling.
+//  - (BREAKING) the two spinbutton result-navigation identifiers were INVERTED: the control that
+//    triggered NEXT was slotted as PREVIOUS and vice versa. The accessible names were always right,
+//    so testid and accessible name now agree. This is the one breaking change for QA here.
+//  - (FIX) Escape was handled twice — on the input and again on the container it bubbles to — so one
+//    press collapsed twice and called onClear three times. It now fires once.
+//
+// Chrome only: attribute assertions plus click-to-state-change, both engine-independent. The
+// `|| 'Chrome'` arm is mandatory (BrowserStack capitalises browserName; a lowercase-only guard
+// registers zero tests and still exits 0).
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-19019 - GlobalHeader:: search-toggle item slots and result controls - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await GlobalHeaderCO.searchToggleSlotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should forward item-level attributes to the new item container while collapsed', async () => {
+      const container = await GlobalHeaderCO.getSearchToggleContainer();
+      await container.waitForDisplayed();
+      await expect(container).toHaveAttribute('data-dimsum-slot', 'dsGlobalheaderMenubarItemSearchtoggleContainer');
+
+      const publicTestIds = await GlobalHeaderCO.getPublicNodeTestIds();
+      await expect(publicTestIds).toEqual(['ds-globalheader-menubar-item-searchtoggle-container', 'gh-toolbar-item']);
+
+      const dsTypedFlag = await GlobalHeaderCO.getDsTypedItemExistFlag();
+      await expect(dsTypedFlag).toHaveText('No');
+    });
+
+    it('02: should expose the full search-toggle slot surface once expanded', async () => {
+      await (await GlobalHeaderCO.getGHToolbarItem(0)).click();
+      await (await GlobalHeaderCO.getSearchToggleInput()).waitForDisplayed();
+
+      const publicTestIds = await GlobalHeaderCO.getPublicNodeTestIds();
+      await expect(publicTestIds).toEqual([
+        'ds-globalheader-menubar-item-searchtoggle-container',
+        'gh-toolbar-item',
+        'ds-globalheader-searchtoggle-expanded-content-wrapper',
+        'ds-globalheader-searchtoggle-textinput',
+        'ds-globalheader-searchtoggle-spinbutton-wrapper',
+        'ds-globalheader-searchtoggle-spinbutton-text',
+        'ds-globalheader-searchtoggle-spinbutton-separator',
+        'ds-globalheader-searchtoggle-spinbutton-next',
+        'ds-globalheader-searchtoggle-spinbutton-prev',
+      ]);
+    });
+
+    it('03: should match each spinbutton data-testid to its accessible name', async () => {
+      // The un-inversion. Note the DOM order is next-then-prev, which is what made the original
+      // swap easy to miss — so identity is read off the accessible name, never off position.
+      await expect(await GlobalHeaderCO.getSearchTogglePrevButton()).toHaveAttribute(
+        'aria-label',
+        'Previous search result',
+      );
+      await expect(await GlobalHeaderCO.getSearchToggleNextButton()).toHaveAttribute(
+        'aria-label',
+        'Next search result',
+      );
+    });
+
+    it('04: should navigate results forward with next and backward with prev', async () => {
+      const input = await GlobalHeaderCO.getSearchToggleInput();
+      await input.click();
+      await type('L');
+
+      const spinbuttonText = await GlobalHeaderCO.getSearchToggleSpinbutton();
+      await browser.waitUntil(async () => (await spinbuttonText.getText()) === '4', {
+        timeout: 3000,
+        timeoutMsg: 'search results did not populate after typing',
+      });
+
+      // Four rows match "L"; the first hit is row 0 and the last is row 4.
+      await (await GlobalHeaderCO.getSearchToggleNextButton()).click();
+      await expect(spinbuttonText).toHaveText('1 / 4');
+      const firstMatch = await GlobalHeaderCO.getSearchableRowByIndex(0);
+      await expect(await GlobalHeaderCO.isRowHighlighted(firstMatch)).toBe(true);
+
+      // Prev from the first result wraps to the last, proving the control moves backward.
+      await (await GlobalHeaderCO.getSearchTogglePrevButton()).click();
+      await expect(spinbuttonText).toHaveText('4 / 4');
+      const lastMatch = await GlobalHeaderCO.getSearchableRowByIndex(4);
+      await expect(await GlobalHeaderCO.isRowHighlighted(lastMatch)).toBe(true);
+    });
+
+    it('05: should collapse, clear and return focus on a single Escape', async () => {
+      await (await GlobalHeaderCO.getSearchToggleInput()).click();
+      await browser.keys(Key.Escape);
+
+      await expect(await GlobalHeaderCO.getSearchToggleInput()).not.toBeDisplayed();
+      await expect(await GlobalHeaderCO.getGHToolbarItem(0)).toBeFocused();
+
+      // Collapsing clears the query, so the highlight is gone and the reachable surface is back to
+      // the two collapsed-state nodes.
+      const lastMatch = await GlobalHeaderCO.getSearchableRowByIndex(4);
+      await expect(await GlobalHeaderCO.isRowHighlighted(lastMatch)).toBe(false);
+      const publicTestIds = await GlobalHeaderCO.getPublicNodeTestIds();
+      await expect(publicTestIds).toEqual(['ds-globalheader-menubar-item-searchtoggle-container', 'gh-toolbar-item']);
+    });
+  });
+}