genesys-spark-components 4.0.0-beta.35 → 4.0.0-beta.37

package/dist/collection/components/stable/gux-pagination/gux-pagination-items-per-page/tests/gux-pagination-items-per-page.spec.js

@@ -0,0 +1,37 @@
+import { newSpecPage } from "../../../../../test/specTestUtils";
+import MutationObserver from "mutation-observer";
+import { GuxPaginationItemsPerPage } from "../gux-pagination-items-per-page";
+import { GuxDropdown } from "../../../gux-dropdown/gux-dropdown";
+import { GuxListbox } from "../../../gux-listbox/gux-listbox";
+import { GuxOption } from "../../../gux-listbox/options/gux-option/gux-option";
+const components = [
+  GuxPaginationItemsPerPage,
+  GuxDropdown,
+  GuxListbox,
+  GuxOption
+];
+const language = 'en';
+describe('gux-pagination-items-per-page', () => {
+  beforeEach(async () => {
+    global.MutationObserver = MutationObserver;
+  });
+  describe('#render', () => {
+    [
+      { itemsPerPage: 25 },
+      { itemsPerPage: 50 },
+      { itemsPerPage: 75 },
+      { itemsPerPage: 100 }
+    ].forEach(({ itemsPerPage }, index) => {
+      it(`should render as expected (${index + 1})`, async () => {
+        const html = `
+          <gux-pagination-items-per-page
+            items-per-page="${itemsPerPage}">
+          </gux-pagination-items-per-page>
+        `;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxPaginationItemsPerPage);
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-pagination/gux-pagination.css

@@ -19,10 +19,10 @@
   flex: 0 1 auto;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
   align-content: stretch;
   align-items: center;
   align-self: auto;
-  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
   justify-content: flex-start;
   order: 0;
 }

package/dist/collection/components/stable/gux-pagination/gux-pagination.js

@@ -1,6 +1,6 @@
-import { h, readTask } from '@stencil/core';
-import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
-import { trackComponent } from '@utils/tracking/usage';
+import { h, readTask } from "@stencil/core";
+import { afterNextRenderTimeout } from "../../../utils/dom/after-next-render";
+import { trackComponent } from "../../../utils/tracking/usage";
 const minAdvancedSpacerWidth = 24;
 export class GuxPagination {
   constructor() {
@@ -108,7 +108,8 @@ export class GuxPagination {
           "references": {
             "GuxPaginationLayout": {
               "location": "import",
-              "path": "./gux-pagination.types"
+              "path": "./gux-pagination.types",
+              "id": "src/components/stable/gux-pagination/gux-pagination.types.ts::GuxPaginationLayout"
             }
           }
         },
@@ -167,7 +168,8 @@ export class GuxPagination {
           "references": {
             "GuxItemsPerPage": {
               "location": "import",
-              "path": "../../legacy/gux-pagination-legacy/gux-pagination.types"
+              "path": "../../legacy/gux-pagination-legacy/gux-pagination.types",
+              "id": "src/components/legacy/gux-pagination-legacy/gux-pagination.types.ts::GuxItemsPerPage"
             }
           }
         },
@@ -206,7 +208,8 @@ export class GuxPagination {
           "references": {
             "GuxPaginationState": {
               "location": "import",
-              "path": "../../legacy/gux-pagination-legacy/gux-pagination.types"
+              "path": "../../legacy/gux-pagination-legacy/gux-pagination.types",
+              "id": "src/components/legacy/gux-pagination-legacy/gux-pagination.types.ts::GuxPaginationState"
             }
           }
         }

package/dist/collection/components/stable/gux-pagination/tests/gux-pagination.e2e.js

@@ -0,0 +1,97 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { a11yCheck } from "../../../../test/e2eTestUtils";
+const axeExclusions = [
+  {
+    issueId: 'duplicate-id',
+    exclusionReason: 'Test uses seeded value for Math.random, so duplicate ids are expected'
+  }
+];
+async function newNonrandomE2EPage({ html }) {
+  const page = await newE2EPage();
+  await page.evaluateOnNewDocument(() => {
+    Math.random = () => 0.5;
+  });
+  await page.setContent(html);
+  await page.waitForChanges();
+  await page.addScriptTag({
+    path: '../../node_modules/axe-core/axe.min.js'
+  });
+  await page.waitForChanges();
+  return page;
+}
+describe('gux-pagination', () => {
+  describe('#render', () => {
+    [
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 25,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 50,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 75,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 100,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 25,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 10,
+        totalItems: 1000,
+        itemsPerPage: 25,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 10,
+        totalItems: 1000,
+        itemsPerPage: 50,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 10,
+        totalItems: 1000,
+        itemsPerPage: 75,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 10,
+        totalItems: 1000,
+        itemsPerPage: 100,
+        layout: 'advanced'
+      },
+      { currentPage: 1, totalItems: 1000, itemsPerPage: 25, layout: 'simple' }
+    ].forEach(({ currentPage, totalItems, itemsPerPage, layout }, index) => {
+      it(`should render as expected (${index + 1})`, async () => {
+        const html = `
+          <gux-pagination lang="en"
+            current-page="${currentPage}"
+            total-items="${totalItems}"
+            items-per-page="${itemsPerPage}"
+            layout="${layout}"
+          ></gux-pagination>
+        `;
+        const page = await newNonrandomE2EPage({ html });
+        const element = await page.find('gux-pagination');
+        await a11yCheck(page, axeExclusions);
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-pagination/tests/gux-pagination.spec.js

@@ -0,0 +1,116 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxPagination } from "../gux-pagination";
+import { GuxButton } from "../../gux-button/gux-button";
+import { GuxDropdown } from "../../gux-dropdown/gux-dropdown";
+import { GuxListbox } from "../../gux-listbox/gux-listbox";
+import { GuxOption } from "../../gux-listbox/options/gux-option/gux-option";
+import { GuxPaginationButtons } from "../gux-pagination-buttons/gux-pagination-buttons";
+import { GuxPaginationItemCounts } from "../gux-pagination-item-counts/gux-pagination-item-counts";
+import { GuxPaginationItemsPerPage } from "../gux-pagination-items-per-page/gux-pagination-items-per-page";
+const components = [
+  GuxButton,
+  GuxDropdown,
+  GuxListbox,
+  GuxOption,
+  GuxOption,
+  GuxPagination,
+  GuxPaginationButtons,
+  GuxPaginationItemCounts,
+  GuxPaginationItemsPerPage
+];
+const language = 'en';
+describe('gux-pagination', () => {
+  describe('#render', () => {
+    [
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 25,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 50,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 75,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 100,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 25,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 10,
+        totalItems: 1000,
+        itemsPerPage: 25,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 10,
+        totalItems: 1000,
+        itemsPerPage: 50,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 10,
+        totalItems: 1000,
+        itemsPerPage: 75,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 10,
+        totalItems: 1000,
+        itemsPerPage: 100,
+        layout: 'advanced'
+      },
+      { currentPage: 1, totalItems: 1000, itemsPerPage: 25, layout: 'simple' },
+      {
+        currentPage: -3,
+        totalItems: 1000,
+        itemsPerPage: 25,
+        layout: 'advanced'
+      },
+      { currentPage: -3, totalItems: 0, itemsPerPage: 25, layout: 'advanced' }
+    ].forEach(({ currentPage, totalItems, itemsPerPage, layout }, index) => {
+      it(`should render as expected (${index + 1})`, async () => {
+        const html = `
+          <gux-pagination
+            current-page="${currentPage}"
+            total-items="${totalItems}"
+            items-per-page="${itemsPerPage}"
+            layout="${layout}"
+          ></gux-pagination>
+        `;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxPagination);
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+    it(`should render current page as 1 when total items is 0`, async () => {
+      const html = `
+      <gux-pagination
+      current-page="1"
+      total-items="0"
+      items-per-page="25"
+      layout="full"
+    ></gux-pagination>
+      `;
+      const page = await newSpecPage({ components, html, language });
+      expect(page.rootInstance).toBeInstanceOf(GuxPagination);
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+});

package/dist/collection/components/stable/gux-pagination-cursor/gux-pagination-cursor.css

@@ -6,27 +6,27 @@
   align-items: flex-start;
   justify-content: space-between;
   padding: var(--gse-ui-dataTableItems-tablePagination-padding);
-  border-top: var(--gse-ui-dataTableItems-tablePagination-divider-width) var(--gse-ui-dataTableItems-tablePagination-divider-style) var(--gse-ui-dataTableItems-tablePagination-divider-color);
-  background-color: var(--gse-ui-dataTableItems-tablePagination-defaultBackgroundColor);
-  color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
   font-family: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);
-  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
   font-size: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);
   font-weight: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontWeight);
+  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
+  color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
+  background-color: var(--gse-ui-dataTableItems-tablePagination-defaultBackgroundColor);
+  border-top: var(--gse-ui-dataTableItems-tablePagination-divider-width) var(--gse-ui-dataTableItems-tablePagination-divider-style) var(--gse-ui-dataTableItems-tablePagination-divider-color);
 }
 :host .gux-pagination-button-container {
   display: flex;
   flex-wrap: nowrap;
-  align-content: center;
   gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
+  align-content: center;
 }
 :host .gux-button-align-content {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-button-gap);
   align-content: center;
   align-items: center;
-  gap: var(--gse-ui-button-gap);
 }
 :host .gux-button-align-content > * {
   flex: 0 1 auto;

package/dist/collection/components/stable/gux-pagination-cursor/gux-pagination-cursor.js

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
-import { buildI18nForComponent } from '../../../i18n';
-import translationResources from './i18n/en.json';
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { buildI18nForComponent } from "../../../i18n";
+import translationResources from "./i18n/en.json";
 export class GuxPaginationCursor {
   constructor() {
     this.hasPrevious = false;
@@ -101,7 +101,8 @@ export class GuxPaginationCursor {
           "references": {
             "GuxItemsPerPage": {
               "location": "import",
-              "path": "../../legacy/gux-pagination-legacy/gux-pagination.types"
+              "path": "../../legacy/gux-pagination-legacy/gux-pagination.types",
+              "id": "src/components/legacy/gux-pagination-legacy/gux-pagination.types.ts::GuxItemsPerPage"
             }
           }
         },
@@ -151,7 +152,8 @@ export class GuxPaginationCursor {
           "references": {
             "GuxPaginationCursorDetail": {
               "location": "import",
-              "path": "./gux-pagination-cursor.types"
+              "path": "./gux-pagination-cursor.types",
+              "id": "src/components/stable/gux-pagination-cursor/gux-pagination-cursor.types.ts::GuxPaginationCursorDetail"
             }
           }
         }

package/dist/collection/components/stable/gux-pagination-cursor/tests/gux-pagination-cursor.e2e.js

@@ -0,0 +1,66 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+async function clickButton(page, buttonToClick) {
+  await page.evaluate(button => {
+    const element = document.querySelector('gux-pagination-cursor');
+    const [previousButton, nextButton] = Array.from(element.shadowRoot.querySelectorAll('button'));
+    if (button === 'next') {
+      nextButton.click();
+    }
+    else {
+      previousButton.click();
+    }
+  }, buttonToClick);
+}
+describe('gux-pagination-cursor', () => {
+  describe('#render', () => {
+    [
+      '<gux-pagination-cursor lang="en"></gux-pagination-cursor>',
+      '<gux-pagination-cursor lang="en" has-next></gux-pagination-cursor>',
+      '<gux-pagination-cursor lang="en" has-previous has-next></gux-pagination-cursor>',
+      '<gux-pagination-cursor lang="en" has-previous></gux-pagination-cursor>',
+      '<gux-pagination-cursor lang="en" layout="advanced"></gux-pagination-cursor>'
+    ].forEach((html, index) => {
+      it(`should render as expected (${index + 1})`, async () => {
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-pagination-cursor');
+        await a11yCheck(page);
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+  describe('guxPaginationCursorchange', () => {
+    it('should fire guxPaginationCursorchange(previous) event when enabled previous button is clicked', async () => {
+      const html = '<gux-pagination-cursor lang="en" has-previous></gux-pagination-cursor>';
+      const page = await newSparkE2EPage({ html });
+      const guxPaginationCursorchangeSpy = await page.spyOnEvent('guxPaginationCursorchange');
+      await clickButton(page, 'previous');
+      await page.waitForChanges();
+      expect(guxPaginationCursorchangeSpy).toHaveReceivedEventDetail('previous');
+    });
+    it('should fire guxPaginationCursorchange(next) event when enabled next button is clicked', async () => {
+      const html = '<gux-pagination-cursor lang="en" has-next></gux-pagination-cursor>';
+      const page = await newSparkE2EPage({ html });
+      const guxPaginationCursorchangeSpy = await page.spyOnEvent('guxPaginationCursorchange');
+      await clickButton(page, 'next');
+      await page.waitForChanges();
+      expect(guxPaginationCursorchangeSpy).toHaveReceivedEventDetail('next');
+    });
+    it('should not fire guxPaginationCursorchange(previous) event when disabled previous button is clicked', async () => {
+      const html = '<gux-pagination-cursor lang="en"></gux-pagination-cursor>';
+      const page = await newSparkE2EPage({ html });
+      const guxPaginationCursorchangeSpy = await page.spyOnEvent('guxPaginationCursorchange');
+      await clickButton(page, 'previous');
+      await page.waitForChanges();
+      await page.waitForChanges();
+      expect(guxPaginationCursorchangeSpy).not.toHaveReceivedEvent();
+    });
+    it('should not fire guxPaginationCursorchange(next) event when disabled next button is clicked', async () => {
+      const html = '<gux-pagination-cursor lang="en"></gux-pagination-cursor>';
+      const page = await newSparkE2EPage({ html });
+      const guxPaginationCursorchangeSpy = await page.spyOnEvent('guxPaginationCursorchange');
+      await clickButton(page, 'next');
+      await page.waitForChanges();
+      expect(guxPaginationCursorchangeSpy).not.toHaveReceivedEvent();
+    });
+  });
+});

package/dist/collection/components/stable/gux-pagination-cursor/tests/gux-pagination-cursor.spec.js

@@ -0,0 +1,67 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxPaginationCursor } from "../gux-pagination-cursor";
+const components = [GuxPaginationCursor];
+const language = 'en';
+describe('gux-pagination-cursor', () => {
+  describe('#render', () => {
+    [
+      '<gux-pagination-cursor></gux-pagination-cursor>',
+      '<gux-pagination-cursor has-next></gux-pagination-cursor>',
+      '<gux-pagination-cursor has-previous has-next></gux-pagination-cursor>',
+      '<gux-pagination-cursor has-previous></gux-pagination-cursor>',
+      '<gux-pagination-cursor layout="advanced"></gux-pagination-cursor>'
+    ].forEach((html, index) => {
+      it(`should render as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxPaginationCursor);
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+  describe('guxPaginationCursorchange', () => {
+    it('should fire guxPaginationCursorchange(previous) event when enabled previous button is clicked', async () => {
+      const html = '<gux-pagination-cursor has-previous></gux-pagination-cursor>';
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const [previousButton] = Array.from(element.shadowRoot.querySelectorAll('button'));
+      const guxPaginationCursorchangeSpy = jest.fn();
+      page.win.addEventListener('guxPaginationCursorchange', guxPaginationCursorchangeSpy);
+      previousButton.click();
+      await page.waitForChanges();
+      expect(guxPaginationCursorchangeSpy).toHaveBeenCalledWith(expect.objectContaining({ detail: 'previous' }));
+    });
+    it('should fire guxPaginationCursorchange(next) event when enabled next button is clicked', async () => {
+      const html = '<gux-pagination-cursor has-next></gux-pagination-cursor>';
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const [, nextButton] = Array.from(element.shadowRoot.querySelectorAll('button'));
+      const guxPaginationCursorchangeSpy = jest.fn();
+      page.win.addEventListener('guxPaginationCursorchange', guxPaginationCursorchangeSpy);
+      nextButton.click();
+      await page.waitForChanges();
+      expect(guxPaginationCursorchangeSpy).toHaveBeenCalledWith(expect.objectContaining({ detail: 'next' }));
+    });
+    it('should not fire guxPaginationCursorchange(previous) event when disabled previous button is clicked', async () => {
+      const html = '<gux-pagination-cursor></gux-pagination-cursor>';
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const [previousButton] = Array.from(element.shadowRoot.querySelectorAll('button'));
+      const guxPaginationCursorchangeSpy = jest.fn();
+      page.win.addEventListener('guxPaginationCursorchange', guxPaginationCursorchangeSpy);
+      previousButton.click();
+      await page.waitForChanges();
+      expect(guxPaginationCursorchangeSpy).not.toHaveBeenCalled();
+    });
+    it('should not fire guxPaginationCursorchange(next) event when disabled next button is clicked', async () => {
+      const html = '<gux-pagination-cursor></gux-pagination-cursor>';
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const [, nextButton] = Array.from(element.shadowRoot.querySelectorAll('button'));
+      const guxPaginationCursorchangeSpy = jest.fn();
+      page.win.addEventListener('guxPaginationCursorchange', guxPaginationCursorchangeSpy);
+      nextButton.click();
+      await page.waitForChanges();
+      expect(guxPaginationCursorchangeSpy).not.toHaveBeenCalled();
+    });
+  });
+});

package/dist/collection/components/stable/gux-popover/gux-popover.css

@@ -2,9 +2,9 @@
   position: absolute;
   top: 0;
   left: 0;
-  min-width: 280px;
   z-index: var(--gux-zindex-popover, 2);
   display: inline-block;
+  min-width: 280px;
   padding: var(--gse-ui-popover-gap);
   background-color: var(--gse-ui-popover-backgroundColor);
   border-radius: var(--gse-ui-popover-borderRadius);
@@ -20,17 +20,17 @@
   background: var(--gse-ui-popover-backgroundColor);
 }
 .gux-popover-wrapper .gux-popover-header {
-  font-family: var(--gse-ui-popover-title-text-fontFamily);
-  font-size: var(--gse-ui-popover-title-text-fontSize);
-  font-weight: var(--gse-ui-popover-title-text-fontWeight);
-  line-height: var(--gse-ui-popover-title-text-lineHeight);
-  color: --gse-ui-popover-headerColor;
   display: flex;
   flex-direction: row;
   align-content: center;
   align-items: center;
   justify-content: space-between;
   padding-bottom: var(--gse-ui-popover-gap);
+  font-family: var(--gse-ui-popover-title-text-fontFamily);
+  font-size: var(--gse-ui-popover-title-text-fontSize);
+  font-weight: var(--gse-ui-popover-title-text-fontWeight);
+  line-height: var(--gse-ui-popover-title-text-lineHeight);
+  color: --gse-ui-popover-headercolor;
 }
 .gux-popover-wrapper gux-dismiss-button {
   float: right;

package/dist/collection/components/stable/gux-popover/gux-popover.js

@@ -8,12 +8,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h } from '@stencil/core';
-import { autoUpdate, computePosition, arrow, flip, offset, shift } from '@floating-ui/dom';
-import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
-import { trackComponent } from '@utils/tracking/usage';
-import { getSlot } from '@utils/dom/get-slot';
-import { findElementById } from '@utils/dom/find-element-by-id';
+import { h } from "@stencil/core";
+import { autoUpdate, computePosition, arrow, flip, offset, shift } from "@floating-ui/dom";
+import { OnClickOutside } from "../../../utils/decorator/on-click-outside";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { getSlot } from "../../../utils/dom/get-slot";
+import { findElementById } from "../../../utils/dom/find-element-by-";
 /**
  * @slot - popover content
  * @slot title - Slot for popover title
@@ -173,7 +173,8 @@ export class GuxPopover {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "@floating-ui/dom"
+              "path": "@floating-ui/dom",
+              "id": ""
             }
           }
         },

package/dist/collection/components/stable/gux-popover/tests/gux-popover.e2e.js

@@ -0,0 +1,60 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-popover', () => {
+  it('renders', async () => {
+    const page = await newSparkE2EPage({
+      html: `
+      <div lang="en">
+        <div id="popover-target">
+          Example Element
+        </div>
+        <gux-popover position="top" for="popover-target">
+          <span slot="title">Title</span>
+          <div>popover content</div>
+        </gux-popover>
+      </div>
+      `
+    });
+    const element = await page.find('gux-popover');
+    await a11yCheck(page);
+    expect(element).toHaveAttribute('hydrated');
+  });
+  it('should trigger guxdismiss event on popover dismiss button click', async () => {
+    const page = await newSparkE2EPage({
+      html: `
+      <div lang="en">
+        <div id="popover-target">
+          Example Element
+        </div>
+        <gux-popover position="top" for="popover-target" display-dismiss-button is-open>
+          <div>popover content</div>
+        </gux-popover>
+      </div>
+      `
+    });
+    const component = await page.find('gux-popover');
+    const guxdismiss = await component.spyOnEvent('guxdismiss');
+    const button = await page.find('pierce/gux-dismiss-button');
+    await button.click();
+    expect(guxdismiss).toHaveReceivedEvent();
+  });
+  it('Supports hiding the close button', async () => {
+    const page = await newSparkE2EPage({
+      html: `
+      <div lang="en">
+        <div id="popover-target">
+          Example Element
+        </div>
+        <gux-popover position="top" for="popover-target">
+          <div>popover content</div>
+        </gux-popover>
+      </div>
+      `
+    });
+    const component = await page.find('gux-popover');
+    component.setProperty('displayDismissDutton', false);
+    await page.waitForChanges();
+    const button = await page.find('pierce/gux-dismiss-button');
+    await a11yCheck(page);
+    expect(button).toBeNull();
+  });
+});