dimsum-e2e-tests 3.80.0-next.4 → 3.80.0-next.40

package/ds-banner/DSBannerCO.js

@@ -2,6 +2,12 @@ import { PATH_E2E_BANNER } from '../paths';
 import { PageObject, Urlbuilder } from '../helpers';
 
 export default class DSBannerCO extends PageObject {
+  // label/body rendered by the AriaLive* and RoleAlert E2E stories
+  static ANNOUNCEMENT_TITLE = 'Information: Read-only mode';
+
+  static ANNOUNCEMENT_BODY =
+    'You are viewing this page in read-only mode. Editing is currently disabled for your role.';
+
   static basicURL = new Urlbuilder(PATH_E2E_BANNER, 'basic-test');
 
   static infoURL = new Urlbuilder(PATH_E2E_BANNER, 'info-test');
@@ -36,6 +42,32 @@ export default class DSBannerCO extends PageObject {
 
   static roleRegionTest = new Urlbuilder(PATH_E2E_BANNER, 'role-region-test');
 
+  static roleRegionNoAnnouncementTest = new Urlbuilder(PATH_E2E_BANNER, 'role-region-no-announcement-test');
+
+  static regionAccessibleNameTest = new Urlbuilder(PATH_E2E_BANNER, 'region-accessible-name-test');
+
+  static bannerIdsTest = new Urlbuilder(PATH_E2E_BANNER, 'banner-ids-test');
+
+  static liveRegionLangDirTest = new Urlbuilder(PATH_E2E_BANNER, 'live-region-lang-dir-test');
+
+  // each banner in RegionAccessibleNameTest is wrapped in a div with a per-case data-testid
+  static async getRegionByCase(caseTestId) {
+    return $(`[data-testid="${caseTestId}"] [role="region"]`);
+  }
+
+  static async getRegionNameAttributes(caseTestId) {
+    const region = await this.getRegionByCase(caseTestId);
+    return {
+      ariaLabel: await region.getAttribute('aria-label'),
+      ariaLabelledby: await region.getAttribute('aria-labelledby'),
+    };
+  }
+
+  // located by its parent slot, not by tag (the title tag is changing, PUI-19231)
+  static async getRegionTitleByCase(caseTestId) {
+    return $(`[data-testid="${caseTestId}"] [data-dimsum-parent-slot="dsBannerTitle"]`);
+  }
+
   static async getButton() {
     return $('[data-testid="ds-button"]');
   }
@@ -43,6 +75,8 @@ export default class DSBannerCO extends PageObject {
   static async openBanner() {
     const button = await this.getButton();
     await button.click();
+    // the banner slides down for 500 ms, the callers (visual snapshots included) expect it settled
+    await this.waitForSlideToEnd();
   }
 
   static async closeBanner() {
@@ -50,6 +84,73 @@ export default class DSBannerCO extends PageObject {
     await closeBtn.click();
   }
 
+  static async getPushedContent() {
+    return $('[data-testid="banner-pushed-content"]');
+  }
+
+  static async getPushedContentTop() {
+    return browser.execute(
+      () => document.querySelector('[data-testid="banner-pushed-content"]').getBoundingClientRect().top,
+    );
+  }
+
+  // resolves once no banner has a running animation/transition (the slide down) or is in the DOM
+  static async waitForSlideToEnd() {
+    await browser.waitUntil(
+      async () =>
+        browser.execute(() =>
+          Array.from(document.querySelectorAll('[data-testid="ds-banner-container"]')).every(
+            (container) => container.getAnimations().length === 0,
+          ),
+        ),
+      { timeoutMsg: 'the banner slide did not end' },
+    );
+  }
+
+  // Samples, on every animation frame and from the page (so the webdriver latency does not matter), the height of the
+  // banner container and the top of the content pushed by it. The click is triggered from the page right after the
+  // first sample, so the very first frames after it are recorded. action: 'open' | 'close'.
+  static async sampleSlide(action, durationMs = 1200) {
+    await browser.execute(
+      (actionToRun, duration) => {
+        const samples = [];
+        window.bannerSlideSampler = { samples, done: false };
+        const startedAt = performance.now();
+        const sample = () => {
+          const container = document.querySelector('[data-testid="ds-banner-container"]');
+          const pushed = document.querySelector('[data-testid="banner-pushed-content"]');
+          samples.push({
+            t: Math.round(performance.now() - startedAt),
+            height: container ? container.getBoundingClientRect().height : null,
+            pushedTop: pushed.getBoundingClientRect().top,
+            inert: container ? container.hasAttribute('inert') : null,
+            ariaHidden: container ? container.getAttribute('aria-hidden') : null,
+            focusInside: container ? container.contains(document.activeElement) : false,
+          });
+        };
+        sample();
+        if (actionToRun === 'open') document.querySelector('[data-testid="ds-button"]').click();
+        else {
+          const closeButton = document.querySelector('[data-testid="ds-banner-close-button"]');
+          closeButton.focus();
+          closeButton.click();
+        }
+        const tick = () => {
+          sample();
+          if (performance.now() - startedAt < duration) requestAnimationFrame(tick);
+          else window.bannerSlideSampler.done = true;
+        };
+        requestAnimationFrame(tick);
+      },
+      action,
+      durationMs,
+    );
+    await browser.waitUntil(async () => browser.execute(() => window.bannerSlideSampler.done), {
+      timeoutMsg: 'the slide sampler did not finish',
+    });
+    return browser.execute(() => window.bannerSlideSampler.samples);
+  }
+
   static async getCloseButton() {
     return $('[data-testid="ds-banner-close-button"]');
   }
@@ -75,7 +176,7 @@ export default class DSBannerCO extends PageObject {
   }
 
   static async getActionLinkSlotByIndex(index = 0) {
-    return $$('[data-dimsum-slot="dsBannerActionLink"]')[index];
+    return $$('[data-dimsum-parent-slot="dsBannerActionLink"]')[index];
   }
 
   static async getTitleSlotByIndex(index = 0) {
@@ -90,10 +191,44 @@ export default class DSBannerCO extends PageObject {
     return $$('[data-dimsum-slot="dsButtonRoot"]')[index];
   }
 
+  static async getCloseButtonSlotByIndex(index = 0) {
+    return $$('[data-dimsum-parent-slot="dsBannerCloseButton"]')[index];
+  }
+
+  static async getLiveRegionPortal() {
+    return $('[data-testid="ds-banner-live-region-portal"]');
+  }
+
+  // the live region is visually hidden, so read textContent instead of the visible text
+  static async getLiveRegionText() {
+    const liveRegion = await this.getLiveRegionPortal();
+    return ((await liveRegion.getProperty('textContent')) || '').trim();
+  }
+
+  static async waitForLiveRegionText(expected) {
+    await browser.waitUntil(async () => (await this.getLiveRegionText()).includes(expected), {
+      timeoutMsg: `live region never contained "${expected}"`,
+    });
+  }
+
+  static async waitForLiveRegionCleared() {
+    await browser.waitUntil(async () => (await this.getLiveRegionText()) === '', {
+      timeoutMsg: 'live region was not cleared after closing the banner',
+    });
+  }
+
+  static async getActiveElementTestId() {
+    return browser.execute(() => document.activeElement?.getAttribute('data-testid') ?? null);
+  }
+
   static async getContainerSlotByIndex(index = 0) {
     return $$('[data-dimsum-slot="dsBannerContainer"]')[index];
   }
 
+  static async getBodySlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsBannerBody"]')[index];
+  }
+
   static async getLayoutSlotByIndex(index = 0) {
     return $$('[data-dimsum-slot="dsBannerLayout"]')[index];
   }
@@ -110,8 +245,58 @@ export default class DSBannerCO extends PageObject {
     return $$('[data-dimsum-slot="dsBannerLiveRegionPortal"]')[index];
   }
 
-  // Snapshots
-  static snapshotPath(example = 'basic') {
-    return PageObject.getSnapshotPathBuilder('DSBanner', example, 'ds-banner');
+  static async getTitle() {
+    return $('[data-testid="ds-banner-title"]');
+  }
+
+  // headings (native or by role) rendered inside the banners, the page outside them is not the banner's business
+  static async getHeadingsCountInBanners() {
+    return browser.execute(
+      () =>
+        document.querySelectorAll('[data-testid="ds-banner-container"] :is(h1, h2, h3, h4, h5, h6, [role="heading"])')
+          .length,
+    );
+  }
+
+  static async getLiveRegionPortalByIndex(index = 0) {
+    return $$('[data-testid="ds-banner-live-region-portal"]')[index];
+  }
+
+  // per banner (in page order): the ids of its parts and whether <base>-live-region is its live region portal
+  static async getBannerIds() {
+    return browser.execute(() =>
+      Array.from(document.querySelectorAll('[data-testid="ds-banner"]')).map((banner) => ({
+        base: banner.id,
+        title: banner.querySelector('[data-testid="ds-banner-title"]')?.id ?? null,
+        body: banner.querySelector('[data-dimsum-parent-slot="dsBannerSubtitle"]')?.id ?? null,
+        liveRegionTestId: document.getElementById(`${banner.id}-live-region`)?.getAttribute('data-testid') ?? null,
+      })),
+    );
+  }
+
+  // every id rendered by the banners (parts and live region portals), so duplicates among them can be detected
+  static async getAllBannerIds() {
+    return browser.execute(() => {
+      const selectors = [
+        '[data-testid="ds-banner-container"][id]',
+        '[data-testid="ds-banner-container"] [id]',
+        '[data-testid="ds-banner-live-region-portal"]',
+      ];
+      return Array.from(document.querySelectorAll(selectors.join(', '))).map((element) => element.id);
+    });
+  }
+
+  // what the action link of the banner at index points to with aria-describedby
+  static async getActionLinkDescription(index = 0) {
+    return browser.execute((position) => {
+      const link = document.querySelectorAll('[data-testid="ds-banner-action-link"]')[position];
+      const describedBy = link.getAttribute('aria-describedby');
+      const target = document.getElementById(describedBy);
+      return {
+        describedBy,
+        isInsideOwnBanner: Boolean(target && link.closest('[data-testid="ds-banner"]').contains(target)),
+        text: target ? target.textContent : null,
+      };
+    }, index);
   }
 }

package/ds-banner/aria-and-role/DSBanner.aria-and-role.func.spec.js

@@ -6,31 +6,76 @@ if (
     browser.capabilities.browserName === 'chrome') ||
   browser.capabilities.browserName === 'Chrome'
 ) {
+  // Announcement behaviour also covers PUI-17840 (banner announcement improvement)
   describe('PUI-17537 - Banner - Aria Assertive -Func', () => {
     before('loading page', async () => {
       const errorOnGo = await DSBannerCO.ariaLiveAssertiveTest.go();
       if (errorOnGo) throw errorOnGo;
     });
-    it('01: should have aria-live="assertive" attribute on banner after trigger', async () => {
+    it('01: should render an empty assertive live region before the banner opens', async () => {
+      const liveRegion = await DSBannerCO.getLiveRegionPortal();
+      await expect(liveRegion).toExist();
+      await expect(liveRegion).toHaveAttribute('aria-live', 'assertive');
+      await expect(liveRegion).toHaveAttribute('aria-atomic', 'true');
+      await expect(await DSBannerCO.getLiveRegionText()).toBe('');
+    });
+    it('02: should have aria-live="assertive" attribute on banner after trigger', async () => {
       const triggerButton = await DSBannerCO.getButton();
       await triggerButton.click();
       const banner = await DSBannerCO.getBannerLiveRegionPortalSlotByIndex();
       await banner.waitForDisplayed();
       await expect(banner).toHaveAttribute('aria-live', 'assertive');
     });
+    it('03: should announce title and body together without moving focus', async () => {
+      const liveRegion = await DSBannerCO.getLiveRegionPortal();
+      await DSBannerCO.waitForLiveRegionText(DSBannerCO.ANNOUNCEMENT_TITLE);
+      await expect(await DSBannerCO.getLiveRegionText()).toContain(DSBannerCO.ANNOUNCEMENT_BODY);
+      await expect(await liveRegion.$$('button, a').length).toBe(0);
+      const banner = await DSBannerCO.getBanner();
+      await expect(banner).not.toHaveAttribute('role');
+      await expect(await DSBannerCO.getActiveElementTestId()).toBe('ds-button');
+    });
+    it('04: should clear the live region on close and fill it again on reopen', async () => {
+      await DSBannerCO.closeBanner();
+      await DSBannerCO.waitForLiveRegionCleared();
+      await DSBannerCO.openBanner();
+      await DSBannerCO.waitForLiveRegionText(DSBannerCO.ANNOUNCEMENT_TITLE);
+    });
   });
   describe('PUI-17538 - Banner - Aria Polite -Func', () => {
     before('loading page', async () => {
       const errorOnGo = await DSBannerCO.ariaLivePoliteTest.go();
       if (errorOnGo) throw errorOnGo;
     });
-    it('01: should have aria-live="polite" attribute on banner after trigger', async () => {
+    it('01: should render an empty polite live region before the banner opens', async () => {
+      const liveRegion = await DSBannerCO.getLiveRegionPortal();
+      await expect(liveRegion).toExist();
+      await expect(liveRegion).toHaveAttribute('aria-live', 'polite');
+      await expect(liveRegion).toHaveAttribute('aria-atomic', 'true');
+      await expect(await DSBannerCO.getLiveRegionText()).toBe('');
+    });
+    it('02: should have aria-live="polite" attribute on banner after trigger', async () => {
       const triggerButton = await DSBannerCO.getButton();
       await triggerButton.click();
       const banner = await DSBannerCO.getBannerLiveRegionPortalSlotByIndex();
       await banner.waitForDisplayed();
       await expect(banner).toHaveAttribute('aria-live', 'polite');
     });
+    it('03: should announce title and body together without moving focus', async () => {
+      const liveRegion = await DSBannerCO.getLiveRegionPortal();
+      await DSBannerCO.waitForLiveRegionText(DSBannerCO.ANNOUNCEMENT_TITLE);
+      await expect(await DSBannerCO.getLiveRegionText()).toContain(DSBannerCO.ANNOUNCEMENT_BODY);
+      await expect(await liveRegion.$$('button, a').length).toBe(0);
+      const banner = await DSBannerCO.getBanner();
+      await expect(banner).not.toHaveAttribute('role');
+      await expect(await DSBannerCO.getActiveElementTestId()).toBe('ds-button');
+    });
+    it('04: should clear the live region on close and fill it again on reopen', async () => {
+      await DSBannerCO.closeBanner();
+      await DSBannerCO.waitForLiveRegionCleared();
+      await DSBannerCO.openBanner();
+      await DSBannerCO.waitForLiveRegionText(DSBannerCO.ANNOUNCEMENT_TITLE);
+    });
   });
   describe('PUI-17539 - Banner - Role Alert -Func', () => {
     before('loading page', async () => {
@@ -44,6 +89,15 @@ if (
       await banner.waitForDisplayed();
       await expect(banner).toHaveAttribute('role', 'alert');
     });
+    it('02: should announce title and body in the alert without moving focus', async () => {
+      const banner = await DSBannerCO.getBanner();
+      await expect(banner).toHaveText(expect.stringContaining(DSBannerCO.ANNOUNCEMENT_TITLE));
+      await expect(banner).toHaveText(expect.stringContaining(DSBannerCO.ANNOUNCEMENT_BODY));
+      await expect(await banner.$$('button, a').length).toBe(0);
+      const liveRegion = await DSBannerCO.getLiveRegionPortal();
+      await expect(liveRegion).not.toExist();
+      await expect(await DSBannerCO.getActiveElementTestId()).toBe('ds-button');
+    });
   });
   describe('PUI-17540 - Banner - Role Region and Alert -Func', () => {
     before('loading page', async () => {
@@ -60,4 +114,61 @@ if (
       await expect(banner).toHaveAttribute('role', 'alert');
     });
   });
+  // Documented action-link setup (isPageNotice + withLiveRegionAnnouncement="none"), PUI-17840
+  describe('PUI-19264 - DSBanner:: region without live announcement - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSBannerCO.roleRegionNoAnnouncementTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should render a page region that is not announced automatically', async () => {
+      const bannerContainer = await DSBannerCO.getBannerContainer();
+      await bannerContainer.waitForDisplayed();
+      await expect(bannerContainer).toHaveAttribute('role', 'region');
+      await expect(await $$('[role="alert"]').length).toBe(0);
+      const liveRegion = await DSBannerCO.getLiveRegionPortal();
+      await expect(liveRegion).not.toExist();
+      const actionLink = await DSBannerCO.getActionLink();
+      await expect(actionLink).toHaveAttribute('href');
+    });
+  });
+  // Tests for the fix introduced in PUI-19088 (isPageNotice region had no accessible name)
+  describe('PUI-19265 - DSBanner:: page notice region accessible name - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSBannerCO.regionAccessibleNameTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should name each page notice region from its title, its label or the consumer name', async () => {
+      const defaultRegion = await DSBannerCO.getRegionByCase('region-default-name');
+      await defaultRegion.waitForDisplayed();
+      const defaultTitle = await DSBannerCO.getRegionTitleByCase('region-default-name');
+      const defaultTitleId = await defaultTitle.getAttribute('id');
+      await expect(defaultTitleId).toBeTruthy();
+      await expect(defaultTitle).toHaveText('Default name from title');
+      await expect(await DSBannerCO.getRegionNameAttributes('region-default-name')).toEqual({
+        ariaLabel: null,
+        ariaLabelledby: defaultTitleId,
+      });
+
+      const secondTitle = await DSBannerCO.getRegionTitleByCase('region-second-default-name');
+      const secondTitleId = await secondTitle.getAttribute('id');
+      await expect(secondTitleId).not.toBe(defaultTitleId);
+      await expect(await DSBannerCO.getRegionNameAttributes('region-second-default-name')).toEqual({
+        ariaLabel: null,
+        ariaLabelledby: secondTitleId,
+      });
+
+      await expect(await DSBannerCO.getRegionNameAttributes('region-custom-body')).toEqual({
+        ariaLabel: 'Custom body label',
+        ariaLabelledby: null,
+      });
+      await expect(await DSBannerCO.getRegionNameAttributes('region-slot-name')).toEqual({
+        ariaLabel: 'Name from container slot',
+        ariaLabelledby: null,
+      });
+      await expect(await DSBannerCO.getRegionNameAttributes('region-container-props-name')).toEqual({
+        ariaLabel: 'Name from containerProps',
+        ariaLabelledby: null,
+      });
+    });
+  });
 }

package/ds-banner/ids/DSBanner.ids.func.spec.js

@@ -0,0 +1,66 @@
+import DSBannerCO from '../DSBannerCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  // Tests for the fix introduced in PUI-19089 (the body had the hardcoded id "ds-banner-body", repeated per banner)
+  describe('PUI-19271 - DSBanner:: per-instance ids and bannerId references - Func', () => {
+    const GENERATED_ONE = 0;
+    const GENERATED_TWO = 1;
+    const SAVED = 2;
+    const MAINTENANCE = 3;
+
+    let bannerIds;
+
+    before('loading page', async () => {
+      const errorOnGo = await DSBannerCO.bannerIdsTest.go();
+      if (errorOnGo) throw errorOnGo;
+      bannerIds = await DSBannerCO.getBannerIds();
+    });
+
+    it('01: should render unique ids derived from one base for banners without bannerId', async () => {
+      const allIds = await DSBannerCO.getAllBannerIds();
+      await expect(allIds.length).toBe(new Set(allIds).size);
+      await expect(allIds).not.toContain('ds-banner-body');
+
+      [GENERATED_ONE, GENERATED_TWO].forEach((index) => {
+        const { base, title, body, liveRegionTestId } = bannerIds[index];
+        expect(base).toMatch(/^[A-Za-z]/);
+        expect(title).toBe(`${base}-title`);
+        expect(body).toBe(`${base}-body`);
+        expect(liveRegionTestId).toBe('ds-banner-live-region-portal');
+      });
+      await expect(bannerIds[GENERATED_ONE].base).not.toBe(bannerIds[GENERATED_TWO].base);
+    });
+
+    it('02: should derive every id from the bannerId set by the consumer', async () => {
+      await expect(bannerIds[SAVED]).toEqual({
+        base: 'saved-banner',
+        title: 'saved-banner-title',
+        body: 'saved-banner-body',
+        liveRegionTestId: 'ds-banner-live-region-portal',
+      });
+      await expect(bannerIds[MAINTENANCE]).toEqual({
+        base: 'maintenance-banner',
+        title: 'maintenance-banner-title',
+        body: 'maintenance-banner-body',
+        liveRegionTestId: 'ds-banner-live-region-portal',
+      });
+    });
+
+    it('03: should describe each action link with the body of its own banner', async () => {
+      const savedDescription = await DSBannerCO.getActionLinkDescription(0);
+      await expect(savedDescription.describedBy).toBe('saved-banner-body');
+      await expect(savedDescription.isInsideOwnBanner).toBe(true);
+      await expect(savedDescription.text).toContain('Your settings were saved successfully.');
+
+      const maintenanceDescription = await DSBannerCO.getActionLinkDescription(1);
+      await expect(maintenanceDescription.describedBy).toBe('maintenance-banner-body');
+      await expect(maintenanceDescription.isInsideOwnBanner).toBe(true);
+      await expect(maintenanceDescription.text).toContain('A maintenance window starts tonight at 10 PM.');
+    });
+  });
+}

package/ds-banner/live-region-lang-dir/DSBanner.live-region-lang-dir.func.spec.js

@@ -0,0 +1,54 @@
+import DSBannerCO from '../DSBannerCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  // Tests for the fix introduced in PUI-19090 (the live region portal did not carry the lang and dir of the banner)
+  describe('PUI-19272 - DSBanner:: live region lang and dir - Func', () => {
+    const POLITE = 0;
+    const ASSERTIVE = 1;
+    const WITHOUT_LANG_DIR = 2;
+
+    before('loading page', async () => {
+      const errorOnGo = await DSBannerCO.liveRegionLangDirTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should carry the lang and dir of the banner in the polite and assertive live regions', async () => {
+      const politePortal = await DSBannerCO.getLiveRegionPortalByIndex(POLITE);
+      await expect(politePortal).toHaveAttribute('lang', 'fr');
+      await expect(politePortal).toHaveAttribute('dir', 'rtl');
+
+      const assertivePortal = await DSBannerCO.getLiveRegionPortalByIndex(ASSERTIVE);
+      await expect(assertivePortal).toHaveAttribute('lang', 'es');
+      await expect(assertivePortal).toHaveAttribute('dir', 'ltr');
+    });
+
+    it('02: should not render lang or dir in the live region of a banner that does not set them', async () => {
+      const portal = await DSBannerCO.getLiveRegionPortalByIndex(WITHOUT_LANG_DIR);
+      await expect(portal).not.toHaveAttribute('lang');
+      await expect(portal).not.toHaveAttribute('dir');
+    });
+
+    it('03: should keep lang and dir in the live regions after the banners are closed', async () => {
+      const toggleButton = await DSBannerCO.getButton();
+      await toggleButton.click();
+      await DSBannerCO.waitForLiveRegionCleared();
+
+      const politePortal = await DSBannerCO.getLiveRegionPortalByIndex(POLITE);
+      await expect(politePortal).toHaveAttribute('lang', 'fr');
+      await expect(politePortal).toHaveAttribute('dir', 'rtl');
+
+      const assertivePortal = await DSBannerCO.getLiveRegionPortalByIndex(ASSERTIVE);
+      await expect(assertivePortal).toHaveAttribute('lang', 'es');
+      await expect(assertivePortal).toHaveAttribute('dir', 'ltr');
+
+      const portalWithoutLangDir = await DSBannerCO.getLiveRegionPortalByIndex(WITHOUT_LANG_DIR);
+      await expect(portalWithoutLangDir).not.toHaveAttribute('lang');
+      await expect(portalWithoutLangDir).not.toHaveAttribute('dir');
+    });
+  });
+}

package/ds-banner/slide-animation/DSBanner.slide-animation.func.spec.js

@@ -0,0 +1,105 @@
+import DSBannerCO from '../DSBannerCO';
+
+// the samples come from the page (requestAnimationFrame), so these tolerances only absorb the machine speed
+const MOTION_MS = 500;
+const MIN_END_MS = MOTION_MS * 0.7;
+const MAX_END_MS = MOTION_MS * 2;
+const MIN_INTERMEDIATE_FRAMES = 5;
+const PX_TOLERANCE = 1;
+
+const isIntermediate = (height, fullHeight) => height > PX_TOLERANCE && height < fullHeight - PX_TOLERANCE;
+const heights = (samples) => samples.map(({ height }) => height).filter((height) => height !== null);
+// the frames of the motion: from the first one that is clearly collapsed. Some engines report, in the sampler's very
+//   first frame, the size of a layout flushed before their first rendering update (the banner never paints like that)
+const getMotionFrames = (samples, fullHeight) => {
+  const start = samples.findIndex(({ height }) => height !== null && height < fullHeight * 0.5);
+  return start === -1 ? [] : samples.slice(start);
+};
+const isMonotonic = (values, direction) =>
+  values.every((value, index) => index === 0 || (value - values[index - 1]) * direction >= -PX_TOLERANCE);
+
+// Banner spec v2, "Motion and Animation": the banner slides down (open) and up (close) in 500 ms, pushing the content
+//   below gradually. Tests for the fix introduced in PUI-19232 (the slide was not rendered).
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-19269 - Banner:: open and close slide animation (500 ms) - Func', () => {
+    let openSamples;
+    let openFrames;
+    let closeSamples;
+    let closedPushedTop;
+    let fullHeight;
+
+    before('loading page', async () => {
+      const errorOnGo = await DSBannerCO.pushesContentURL.go();
+      if (errorOnGo) throw errorOnGo;
+      closedPushedTop = await DSBannerCO.getPushedContentTop();
+    });
+
+    it('01: should grow the banner gradually from 0 to its full height when opening', async () => {
+      openSamples = await DSBannerCO.sampleSlide('open');
+      const withBanner = openSamples.filter(({ height }) => height !== null);
+      fullHeight = withBanner[withBanner.length - 1].height;
+      expect(fullHeight).toBeGreaterThan(50);
+      // not at full height from the start: there are frames in which the banner is (almost) collapsed
+      openFrames = getMotionFrames(openSamples, fullHeight);
+      expect(openFrames.length).toBeGreaterThan(0);
+      expect(openFrames[0].height).toBeLessThan(fullHeight * 0.25);
+      // several frames in between and never shrinking
+      expect(heights(openFrames).filter((height) => isIntermediate(height, fullHeight)).length).toBeGreaterThanOrEqual(
+        MIN_INTERMEDIATE_FRAMES,
+      );
+      expect(isMonotonic(heights(openFrames), 1)).toBe(true);
+    });
+
+    it('02: should take about 500 ms to reach the full height when opening', async () => {
+      const reached = openFrames.find(({ height }) => height >= fullHeight - PX_TOLERANCE);
+      expect(reached.t).toBeGreaterThanOrEqual(MIN_END_MS);
+      expect(reached.t).toBeLessThanOrEqual(MAX_END_MS);
+    });
+
+    it('03: should push the content below gradually and in sync with the banner when opening', async () => {
+      const pushedTops = openFrames.map(({ pushedTop }) => pushedTop);
+      expect(isMonotonic(pushedTops, 1)).toBe(true);
+      expect(
+        pushedTops.filter((top) => isIntermediate(top - closedPushedTop, fullHeight)).length,
+      ).toBeGreaterThanOrEqual(MIN_INTERMEDIATE_FRAMES);
+      openFrames.forEach(({ height, pushedTop }) => expect(pushedTop - closedPushedTop).toBeCloseTo(height, 0));
+    });
+
+    it('04: should keep the banner in the document, closed for everyone, while it slides up', async () => {
+      closeSamples = await DSBannerCO.sampleSlide('close');
+      // not removed on the first frame
+      expect(closeSamples.filter(({ height }) => height !== null).length).toBeGreaterThan(MIN_INTERMEDIATE_FRAMES);
+      expect(closeSamples[1].height).toBeGreaterThan(fullHeight * 0.5);
+      // from the first rendered frame after the click: not exposed and not interactive
+      const sliding = closeSamples.filter(({ height, t }) => height !== null && t > 0);
+      sliding.forEach(({ inert, ariaHidden }) => {
+        expect(inert).toBe(true);
+        expect(ariaHidden).toBe('true');
+      });
+      // the close button had focus: once inert the focus is not inside the banner anymore
+      closeSamples
+        .filter(({ height, t }) => height !== null && t > 100)
+        .forEach(({ focusInside }) => expect(focusInside).toBe(false));
+    });
+
+    it('05: should collapse gradually and be removed after about 500 ms when closing', async () => {
+      expect(isMonotonic(heights(closeSamples), -1)).toBe(true);
+      expect(
+        heights(closeSamples).filter((height) => isIntermediate(height, fullHeight)).length,
+      ).toBeGreaterThanOrEqual(MIN_INTERMEDIATE_FRAMES);
+      const removed = closeSamples.find(({ height }) => height === null);
+      expect(removed.t).toBeGreaterThanOrEqual(MIN_END_MS);
+      expect(removed.t).toBeLessThanOrEqual(MAX_END_MS);
+      await expect(await DSBannerCO.getBannerContainer()).not.toExist();
+    });
+
+    it('06: should move the content below back gradually when closing', async () => {
+      const pushedTops = closeSamples.map(({ pushedTop }) => pushedTop);
+      expect(isMonotonic(pushedTops, -1)).toBe(true);
+      expect(
+        pushedTops.filter((top) => isIntermediate(top - closedPushedTop, fullHeight)).length,
+      ).toBeGreaterThanOrEqual(MIN_INTERMEDIATE_FRAMES);
+      expect(pushedTops[pushedTops.length - 1]).toBeCloseTo(closedPushedTop, 0);
+    });
+  });
+}

package/ds-banner/slots/DSBanner.slots.axe-core.func.spec.js

@@ -0,0 +1,24 @@
+import DSBannerCO from '../DSBannerCO';
+import { axeCoreCheck } from '../../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  // Coverage for PUI-17935 (slots implementation and Dimsum slot compliance)
+  describe('PUI-19263 - DSBanner:: slots theming - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSBannerCO.slotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display the banners customized using slots and pass axecore test', async () => {
+      const banner = await DSBannerCO.getContainerSlotByIndex();
+      await banner.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}