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

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

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
 export class GuxPaginationLegacy {
   constructor() {
     this.currentPage = 1;
@@ -119,7 +119,8 @@ export class GuxPaginationLegacy {
           "references": {
             "GuxItemsPerPage": {
               "location": "import",
-              "path": "./gux-pagination.types"
+              "path": "./gux-pagination.types",
+              "id": "src/components/legacy/gux-pagination-legacy/gux-pagination.types.ts::GuxItemsPerPage"
             }
           }
         },
@@ -142,7 +143,8 @@ export class GuxPaginationLegacy {
           "references": {
             "GuxPaginationLayout": {
               "location": "import",
-              "path": "./gux-pagination.types"
+              "path": "./gux-pagination.types",
+              "id": "src/components/legacy/gux-pagination-legacy/gux-pagination.types.ts::GuxPaginationLayout"
             }
           }
         },
@@ -180,7 +182,8 @@ export class GuxPaginationLegacy {
           "references": {
             "GuxPaginationState": {
               "location": "import",
-              "path": "./gux-pagination.types"
+              "path": "./gux-pagination.types",
+              "id": "src/components/legacy/gux-pagination-legacy/gux-pagination.types.ts::GuxPaginationState"
             }
           }
         }

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

@@ -0,0 +1,53 @@
+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-legacy', () => {
+  describe('#render', () => {
+    [
+      { currentPage: 1, totalItems: 1000, itemsPerPage: 25, layout: 'full' },
+      { currentPage: 1, totalItems: 1000, itemsPerPage: 50, layout: 'full' },
+      { currentPage: 1, totalItems: 1000, itemsPerPage: 75, layout: 'full' },
+      { currentPage: 1, totalItems: 1000, itemsPerPage: 100, layout: 'full' },
+      { currentPage: 1, totalItems: 1000, itemsPerPage: 25, layout: 'full' },
+      { currentPage: 10, totalItems: 1000, itemsPerPage: 25, layout: 'full' },
+      { currentPage: 10, totalItems: 1000, itemsPerPage: 50, layout: 'full' },
+      { currentPage: 10, totalItems: 1000, itemsPerPage: 75, layout: 'full' },
+      { currentPage: 10, totalItems: 1000, itemsPerPage: 100, layout: 'full' },
+      { currentPage: 1, totalItems: 1000, itemsPerPage: 25, layout: 'small' },
+      { currentPage: 1, totalItems: 1000, itemsPerPage: 25, layout: 'expanded' }
+    ].forEach(({ currentPage, totalItems, itemsPerPage, layout }, index) => {
+      it(`should render as expected (${index + 1})`, async () => {
+        const html = `
+          <gux-pagination-legacy lang="en"
+            current-page="${currentPage}"
+            total-items="${totalItems}"
+            items-per-page="${itemsPerPage}"
+            layout="${layout}"
+          ></gux-pagination-legacy>
+        `;
+        const page = await newNonrandomE2EPage({ html });
+        const element = await page.find('gux-pagination-legacy');
+        await a11yCheck(page, axeExclusions);
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+});

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

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

package/dist/collection/components/legacy/gux-simple-toast-legacy/gux-simple-toast.js

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
+import { h, Host } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
 /**
  * @slot icon - Required slot for gux-icon
  * @slot message - Required slot for the simple toast message
@@ -44,7 +44,8 @@ export class GuxSimpleToast {
           "references": {
             "GuxSimpleToastAccent": {
               "location": "import",
-              "path": "./gux-simple-toast.types"
+              "path": "./gux-simple-toast.types",
+              "id": "src/components/legacy/gux-simple-toast-legacy/gux-simple-toast.types.ts::GuxSimpleToastAccent"
             }
           }
         },

package/dist/collection/components/legacy/gux-simple-toast-legacy/tests/gux-simple-toast.e2e.js

@@ -0,0 +1,103 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+async function clickDismissButton(page) {
+  await page.evaluate(async () => {
+    const element = document.querySelector('gux-simple-toast-legacy');
+    const dismissButtonElement = element.shadowRoot.querySelector('gux-dismiss-button');
+    const button = dismissButtonElement.shadowRoot.querySelector('button');
+    button.click();
+  });
+}
+describe('gux-simple-toast-legacy', () => {
+  describe('#render', () => {
+    [
+      {
+        description: 'should render neutral simple toast',
+        html: `
+          <gux-simple-toast-legacy lang="en" accent="neutral">
+            <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+            <div slot="message">This is the message</div>
+          </gux-simple-toast-legacy>
+        `
+      },
+      {
+        description: 'should render positive simple toast',
+        html: `
+          <gux-simple-toast-legacy lang="en" accent="positive">
+            <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+            <div slot="message">This is the message</div>
+          </gux-simple-toast-legacy>
+        `
+      },
+      {
+        description: 'should render alert simple toast',
+        html: `
+          <gux-simple-toast-legacy lang="en" accent="alert">
+            <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+            <div slot="message">This is the message</div>
+          </gux-simple-toast-legacy>
+        `
+      },
+      {
+        description: 'should render warning simple toast',
+        html: `
+          <gux-simple-toast-legacy lang="en" accent="warning">
+            <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+            <div slot="message">This is the message</div>
+          </gux-simple-toast-legacy>
+        `
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-simple-toast-legacy');
+        await a11yCheck(page);
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+  describe('dismiss', () => {
+    it('click dismiss button', async () => {
+      const html = `
+        <gux-simple-toast-legacy lang="en" accent="neutral">
+          <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+          <div slot="message">This is the message</div>
+        </gux-simple-toast-legacy>
+      `;
+      const page = await newSparkE2EPage({ html });
+      const guxdismissSpy = await page.spyOnEvent('guxdismiss');
+      const clickSpy = await page.spyOnEvent('click');
+      expect(guxdismissSpy).not.toHaveReceivedEvent();
+      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(await page.find('gux-simple-toast-legacy')).not.toBeNull();
+      await clickDismissButton(page);
+      await page.waitForChanges();
+      expect(guxdismissSpy).toHaveReceivedEvent();
+      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(await page.find('gux-simple-toast-legacy')).toBeNull();
+    });
+    it('click dismiss button and prevent default', async () => {
+      const html = `
+        <gux-simple-toast-legacy lang="en" accent="neutral">
+          <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+          <div slot="message">This is the message</div>
+        </gux-simple-toast-legacy>
+      `;
+      const page = await newSparkE2EPage({ html });
+      const guxdismissSpy = await page.spyOnEvent('guxdismiss');
+      const clickSpy = await page.spyOnEvent('click');
+      await page.evaluate(() => {
+        document.addEventListener('guxdismiss', event => {
+          event.preventDefault();
+        });
+      });
+      expect(guxdismissSpy).not.toHaveReceivedEvent();
+      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(await page.find('gux-simple-toast-legacy')).not.toBeNull();
+      await clickDismissButton(page);
+      await page.waitForChanges();
+      expect(guxdismissSpy).toHaveReceivedEvent();
+      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(await page.find('gux-simple-toast-legacy')).not.toBeNull();
+    });
+  });
+});

package/dist/collection/components/legacy/gux-simple-toast-legacy/tests/gux-simple-toast.spec.js

@@ -0,0 +1,93 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxSimpleToast } from "../gux-simple-toast";
+const components = [GuxSimpleToast];
+const language = 'en';
+describe('gux-simple-toast-legacy', () => {
+  describe('#render', () => {
+    [
+      {
+        description: 'should render neutral simple toast',
+        html: `
+          <gux-simple-toast-legacy accent="neutral">
+            <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+            <div slot="message">This is the message</div>
+          </gux-simple-toast-legacy>
+        `
+      },
+      {
+        description: 'should render positive simple toast',
+        html: `
+          <gux-simple-toast-legacy accent="positive">
+            <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+            <div slot="message">This is the message</div>
+          </gux-simple-toast-legacy>
+        `
+      },
+      {
+        description: 'should render alert simple toast',
+        html: `
+          <gux-simple-toast-legacy accent="alert">
+            <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+            <div slot="message">This is the message</div>
+          </gux-simple-toast-legacy>
+        `
+      },
+      {
+        description: 'should render warning simple toast',
+        html: `
+          <gux-simple-toast-legacy accent="warning">
+            <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+            <div slot="message">This is the message</div>
+          </gux-simple-toast-legacy>
+        `
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxSimpleToast);
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+  describe('dismiss', () => {
+    it('click dismiss button', async () => {
+      const html = `
+        <gux-simple-toast-legacy accent="neutral">
+          <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+          <div slot="message">This is the message</div>
+        </gux-simple-toast-legacy>
+      `;
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const dismissButton = element.shadowRoot.querySelector('gux-dismiss-button');
+      const guxdismissSpy = jest.fn();
+      const clickSpy = jest.fn();
+      const elementRemoveSpy = jest.spyOn(element, 'remove');
+      page.win.addEventListener('guxdismiss', guxdismissSpy);
+      page.win.addEventListener('click', clickSpy);
+      dismissButton.click();
+      await page.waitForChanges();
+      expect(guxdismissSpy).toHaveBeenCalled();
+      expect(clickSpy).not.toHaveBeenCalled();
+      expect(elementRemoveSpy).toBeCalledWith();
+    });
+    it('click dismiss button and prevent default', async () => {
+      const html = `
+        <gux-simple-toast-legacy accent="neutral">
+          <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+          <div slot="message">This is the message</div>
+        </gux-simple-toast-legacy>
+      `;
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const dismissButton = element.shadowRoot.querySelector('gux-dismiss-button');
+      const elementRemoveSpy = jest.spyOn(element, 'remove');
+      page.win.addEventListener('guxdismiss', (event) => {
+        event.preventDefault();
+      });
+      dismissButton.click();
+      await page.waitForChanges();
+      expect(elementRemoveSpy).not.toBeCalled();
+    });
+  });
+});

package/dist/collection/components/legacy/gux-switch-legacy/gux-switch-item/gux-switch-item.css

@@ -1,42 +1,3 @@
-.gux-focus-ring-focused:focus {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-focused-within:focus-within {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-focused-visible:focus-visible {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-small-focused:focus {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-.gux-focus-ring-small-focused-within:focus-within {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-.gux-focus-ring-small-focused-visible:focus-visible {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
 /*
  * Typography styles and mixins.
  */
@@ -44,10 +5,6 @@
 /* Base typography */
 /* Headings */
 /* Anchor */
-.gux-icon-anchor gux-icon {
-  padding-right: var(--gse-ui-links-inLine-padding);
-}
-
 /* Custom Styles */
 gux-switch-item > .gux-switch-item {
   font-family: var(--gse-core-fontFamily-body), sans-serif;

package/dist/collection/components/legacy/gux-switch-legacy/gux-switch-item/gux-switch-item.js

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 /**
  * @slot - text
  */

package/dist/collection/components/legacy/gux-switch-legacy/gux-switch.js

@@ -1,6 +1,6 @@
-import { h, Host } from '@stencil/core';
-import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
-import { trackComponent } from '@utils/tracking/usage';
+import { h, Host } from "@stencil/core";
+import simulateNativeEvent from "../../../utils/dom/simulate-native-event";
+import { trackComponent } from "../../../utils/tracking/usage";
 /**
  * @slot - list of gux-switch-item elements
  */
@@ -73,7 +73,8 @@ export class GuxSwitch {
           "references": {
             "GuxSwitchAllowedLayouts": {
               "location": "import",
-              "path": "./gux-switch.types"
+              "path": "./gux-switch.types",
+              "id": "src/components/legacy/gux-switch-legacy/gux-switch.types.ts::GuxSwitchAllowedLayouts"
             }
           }
         },

package/dist/collection/components/legacy/gux-switch-legacy/tests/gux-switch.e2e.js

@@ -0,0 +1,87 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-switch-legacy', () => {
+  const html = `
+  <gux-switch-legacy lang-"en" layout="small" value="day">
+    <gux-switch-item value="month">Month</gux-switch-item>
+    <gux-switch-item value="week">Week</gux-switch-item>
+    <gux-switch-item value="day">Day</gux-switch-item>
+    <gux-switch-item value="hour" disabled>Hour</gux-switch-item>
+    <gux-switch-item value="minute">Minute</gux-switch-item>
+  </gux-switch-legacy>
+`;
+  describe('#render', () => {
+    it(`should render as expected`, async () => {
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-switch-legacy');
+      await a11yCheck(page);
+      expect(element.outerHTML).toMatchSnapshot();
+    });
+  });
+  describe('#interactions', () => {
+    it(`should change value on gux-switch-item click`, async () => {
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-switch-legacy');
+      const guxSwitchItemMinute = await page.find('gux-switch-item[value=minute]');
+      expect(await element.getProperty('value')).toBe('day');
+      await guxSwitchItemMinute.click();
+      await page.waitForChanges();
+      expect(await element.getProperty('value')).toBe(await guxSwitchItemMinute.getProperty('value'));
+    });
+    it(`should not change value on gux-switch-item click if it is disabled`, async () => {
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-switch-legacy');
+      const guxSwitchItemHour = await page.find('gux-switch-item[value=hour]');
+      const currentValue = await element.getProperty('value');
+      expect(currentValue).toBe('day');
+      await guxSwitchItemHour.click();
+      await page.waitForChanges();
+      expect(await element.getProperty('value')).toBe(currentValue);
+    });
+    it(`should emit a 'change' and 'input' event when a new item is selected`, async () => {
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-switch-legacy');
+      const guxSwitchItemMinute = await page.find('gux-switch-item[value=minute]');
+      const spyOnInputEvent = await element.spyOnEvent('input');
+      const spyOnChangeEvent = await element.spyOnEvent('change');
+      await guxSwitchItemMinute.click();
+      await page.waitForChanges();
+      expect(spyOnInputEvent.length).toBe(1);
+      expect(spyOnChangeEvent.length).toBe(1);
+    });
+    it(`should not emit a 'change' or 'input' event when a disabled item is selected`, async () => {
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-switch-legacy');
+      const guxSwitchItemHour = await page.find('gux-switch-item[value=hour]');
+      const spyOnInputEvent = await element.spyOnEvent('input');
+      const spyOnChangeEvent = await element.spyOnEvent('change');
+      await guxSwitchItemHour.click();
+      await page.waitForChanges();
+      expect(spyOnInputEvent.length).toBe(0);
+      expect(spyOnChangeEvent.length).toBe(0);
+    });
+  });
+  describe('onSlotchange', () => {
+    it(`should set selected item as expected`, async () => {
+      const page = await newSparkE2EPage({
+        html: `
+        <gux-switch-legacy lang-"en" layout="small" value="month">
+          <gux-switch-item value="week">Week</gux-switch-item>
+          <gux-switch-item value="day">Day</gux-switch-item>
+          <gux-switch-item value="hour" disabled>Hour</gux-switch-item>
+          <gux-switch-item value="minute">Minute</gux-switch-item>
+        </gux-switch-legacy>
+      `
+      });
+      const element = await page.find('gux-switch-legacy');
+      await page.evaluate(() => {
+        const weekElement = document.querySelector('gux-switch-item[value=week]');
+        const monthElement = document.createElement('gux-switch-item');
+        monthElement.appendChild(document.createTextNode('Month'));
+        monthElement.setAttribute('value', 'month');
+        weekElement.insertAdjacentElement('beforebegin', monthElement);
+      });
+      await page.waitForChanges();
+      expect(element.outerHTML).toMatchSnapshot();
+    });
+  });
+});

package/dist/collection/components/legacy/gux-switch-legacy/tests/gux-switch.spec.js

@@ -0,0 +1,116 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxSwitch } from "../gux-switch";
+import { GuxSwitchItem } from "../gux-switch-item/gux-switch-item";
+const components = [GuxSwitch, GuxSwitchItem];
+const html = `
+  <gux-switch-legacy layout="small" value="day">
+    <gux-switch-item value="month">Month</gux-switch-item>
+    <gux-switch-item value="week">Week</gux-switch-item>
+    <gux-switch-item value="day">Day</gux-switch-item>
+    <gux-switch-item value="hour" disabled>Hour</gux-switch-item>
+    <gux-switch-item value="minute">Minute</gux-switch-item>
+  </gux-switch-legacy>
+`;
+const language = 'en';
+describe('gux-switch-legacy', () => {
+  describe('#render', () => {
+    it(`should render as expected`, async () => {
+      const page = await newSpecPage({ components, html, language });
+      expect(page.rootInstance).toBeInstanceOf(GuxSwitch);
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+  describe('#interactions', () => {
+    it(`should change value on gux-switch-item click`, async () => {
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const guxSwitchItemMinute = page.root.querySelector('gux-switch-item[value=minute]');
+      expect(element.value).toBe('day');
+      guxSwitchItemMinute.click();
+      await page.waitForChanges();
+      expect(element.value).toBe(guxSwitchItemMinute.value);
+    });
+    it(`should not change value on gux-switch-item click if it is disabled`, async () => {
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const guxSwitchItemHour = page.root.querySelector('gux-switch-item[value=hour]');
+      const currentValue = element.value;
+      expect(currentValue).toBe('day');
+      guxSwitchItemHour.click();
+      await page.waitForChanges();
+      expect(element.value).toBe(currentValue);
+    });
+    it(`should emit a 'change' and 'input' event when a new item is selected`, async () => {
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const guxSwitchItemMinute = page.root.querySelector('gux-switch-item[value=minute]');
+      const changeEventSpy = jest.fn();
+      const inputEventSpy = jest.fn();
+      element.addEventListener('change', () => {
+        changeEventSpy();
+      });
+      element.addEventListener('input', () => {
+        inputEventSpy();
+      });
+      guxSwitchItemMinute.click();
+      await page.waitForChanges();
+      expect(changeEventSpy).toHaveBeenCalledWith();
+      expect(inputEventSpy).toHaveBeenCalledWith();
+    });
+    it(`should not emit a 'change' and 'input' event when the selected item is reselected`, async () => {
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const guxSwitchItemDay = page.root.querySelector('gux-switch-item[value=day]');
+      const changeEventSpy = jest.fn();
+      const inputEventSpy = jest.fn();
+      element.addEventListener('change', () => {
+        changeEventSpy();
+      });
+      element.addEventListener('input', () => {
+        inputEventSpy();
+      });
+      guxSwitchItemDay.click();
+      await page.waitForChanges();
+      expect(changeEventSpy).not.toHaveBeenCalled();
+      expect(inputEventSpy).not.toHaveBeenCalled();
+    });
+    it(`should not emit a 'change' or 'input' event when a disabled item is selected`, async () => {
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const guxSwitchItemHour = page.root.querySelector('gux-switch-item[value=hour]');
+      const changeEventSpy = jest.fn();
+      const inputEventSpy = jest.fn();
+      element.addEventListener('change', () => {
+        changeEventSpy();
+      });
+      element.addEventListener('input', () => {
+        inputEventSpy();
+      });
+      guxSwitchItemHour.click();
+      await page.waitForChanges();
+      expect(changeEventSpy).not.toHaveBeenCalled();
+      expect(inputEventSpy).not.toHaveBeenCalled();
+    });
+  });
+  describe('onSlotchange', () => {
+    it(`should set selected items as expected`, async () => {
+      const page = await newSpecPage({ components, html, language });
+      const element = document.querySelector('gux-switch-legacy');
+      const newItem = document.createElement('gux-switch-item');
+      newItem.appendChild(document.createTextNode('Second'));
+      newItem.setAttribute('value', 'second');
+      element.appendChild(newItem);
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+    // onSlotchange is not getting called as expected in the unit tests so it tested manually below
+    it('manually call onSlotchange methods', async () => {
+      const page = await newSpecPage({ components, html, language });
+      const elementController = page.rootInstance;
+      expect(elementController.switchItems).toHaveLength(0);
+      elementController.slotChanged();
+      elementController.componentWillRender();
+      expect(elementController.switchItems).toHaveLength(5);
+    });
+  });
+});