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

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-calendar.js

@@ -1,9 +1,9 @@
-import { h } from '@stencil/core';
-import { buildI18nForComponent, getDesiredLocale } from '../../../../i18n';
-import simulateNativeEvent from '../../../../utils/dom/simulate-native-event';
-import { afterNextRender } from '../../../../utils/dom/after-next-render';
-import { getISOYearMonth, getCurrentISOYearMonth, getYearMonthObject } from '../../../../utils/date/year-month-values';
-import translationResources from './i18n/en.json';
+import { h } from "@stencil/core";
+import { buildI18nForComponent, getDesiredLocale } from "../../../../i18n";
+import simulateNativeEvent from "../../../../utils/dom/simulate-native-event";
+import { afterNextRender } from "../../../../utils/dom/after-next-render";
+import { getISOYearMonth, getCurrentISOYearMonth, getYearMonthObject } from "../../../../utils/date/year-month-values";
+import translationResources from "./i18n/en.json";
 export class GuxMonthCalendar {
   constructor() {
     this.value = undefined;
@@ -146,7 +146,8 @@ export class GuxMonthCalendar {
           "references": {
             "GuxISOYearMonth": {
               "location": "import",
-              "path": "../../../../utils/date/year-month-values"
+              "path": "../../../../utils/date/year-month-values",
+              "id": "src/utils/date/year-month-values.ts::GuxISOYearMonth"
             }
           }
         },
@@ -168,7 +169,8 @@ export class GuxMonthCalendar {
           "references": {
             "GuxISOYearMonth": {
               "location": "import",
-              "path": "../../../../utils/date/year-month-values"
+              "path": "../../../../utils/date/year-month-values",
+              "id": "src/utils/date/year-month-values.ts::GuxISOYearMonth"
             }
           }
         },
@@ -190,7 +192,8 @@ export class GuxMonthCalendar {
           "references": {
             "GuxISOYearMonth": {
               "location": "import",
-              "path": "../../../../utils/date/year-month-values"
+              "path": "../../../../utils/date/year-month-values",
+              "id": "src/utils/date/year-month-values.ts::GuxISOYearMonth"
             }
           }
         },
@@ -222,14 +225,17 @@ export class GuxMonthCalendar {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "GuxISOYearMonth": {
               "location": "import",
-              "path": "../../../../utils/date/year-month-values"
+              "path": "../../../../utils/date/year-month-values",
+              "id": "src/utils/date/year-month-values.ts::GuxISOYearMonth"
             },
             "HTMLButtonElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLButtonElement"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item.css

@@ -11,8 +11,8 @@
 }
 
 .gux-container {
-  padding-left: var(--gse-ui-calendarMenu-monthBody-gap);
   padding-right: var(--gse-ui-calendarMenu-monthBody-gap);
+  padding-left: var(--gse-ui-calendarMenu-monthBody-gap);
 }
 .gux-container button {
   all: unset;
@@ -31,14 +31,14 @@
   background: var(--gse-ui-calendarMenu-month-selected-backgroundColor);
 }
 .gux-container button:focus-visible:not(:disabled) {
+  border-radius: var(--gse-ui-calendarMenu-month-focusBorderRadius);
   outline: var(--gse-ui-monthPicker-calendarStates-focus-border-width) var(--gse-ui-monthPicker-calendarStates-focus-border-style) var(--gse-ui-monthPicker-calendarStates-focus-border-color);
   outline-offset: var(--gse-semantic-focusRing-offset);
-  border-radius: var(--gse-ui-calendarMenu-month-focusBorderRadius);
 }
 .gux-container button:hover:not(:disabled) {
   background: var(--gse-ui-calendarMenu-month-hover-backgroundColor);
 }
 .gux-container button:disabled {
-  opacity: var(--gse-ui-calendarMenu-disabled-opacity);
   cursor: default;
+  opacity: var(--gse-ui-calendarMenu-disabled-opacity);
 }

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item.js

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-import { getClosestElement } from '../../../../../../utils/dom/get-closest-element';
+import { h, Host } from "@stencil/core";
+import { getClosestElement } from "../../../../../../utils/dom/get-closest-element";
 export class GuxMonthListItem {
   constructor() {
     this.value = undefined;
@@ -46,7 +46,8 @@ export class GuxMonthListItem {
           "references": {
             "GuxISOYearMonth": {
               "location": "import",
-              "path": "../../../../../../utils/date/year-month-values"
+              "path": "../../../../../../utils/date/year-month-values",
+              "id": "src/utils/date/year-month-values.ts::GuxISOYearMonth"
             }
           }
         },

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list.js

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-import { first, focusMove, last, next, previous } from '../../../../stable/gux-list/gux-list.service';
+import { h, Host } from "@stencil/core";
+import { first, focusMove, last, next, previous } from "../../../../stable/gux-list/gux-list.service";
 const validFocusableItems = ['gux-month-list-item'];
 /**
  * @slot - month name
@@ -64,7 +64,8 @@ export class GuxMonthList {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/beta/gux-month-picker/gux-month-picker.css

@@ -4,17 +4,17 @@
 
 .gux-target {
   display: inline-flex;
-  cursor: pointer;
-  padding: var(--gse-ui-formControl-textarea-padding);
   gap: var(--gse-ui-formControl-input-gap);
+  padding: var(--gse-ui-formControl-textarea-padding);
+  cursor: pointer;
   background-color: var(--gse-ui-calendarMenu-backgroundColor);
   border: var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
 .gux-target:focus-within {
-  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
   border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
+  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
 }
 .gux-target .gux-display {
   display: inline-flex;
@@ -22,8 +22,8 @@
   padding-right: var(--gse-ui-formControl-input-gap);
   font-family: var(--gse-ui-formControl-label-text-fontFamily);
   font-size: var(--gse-ui-formControl-label-text-fontSize);
-  line-height: var(--gse-ui-formControl-label-text-lineHeight);
   font-weight: var(--gse-ui-formControl-label-text-fontWeight);
+  line-height: var(--gse-ui-formControl-label-text-lineHeight);
   color: var(--gse-ui-formControl-label-labelColor);
 }
 .gux-target .gux-display .gux-spinner {
@@ -42,9 +42,9 @@
   border: none;
 }
 .gux-target .gux-popup-toggle:focus-visible {
+  border-radius: 2px;
   outline: var(--gse-ui-monthPicker-calendarStates-focus-border-width) var(--gse-ui-monthPicker-calendarStates-focus-border-style) var(--gse-ui-monthPicker-calendarStates-focus-border-color);
   outline-offset: var(--gse-semantic-focusRing-offset);
-  border-radius: 2px;
 }
 .gux-target .gux-popup-toggle:not(:disabled):hover {
   color: var(--gse-ui-monthPicker-calendarStates-hoverColor);

package/dist/collection/components/beta/gux-month-picker/gux-month-picker.js

@@ -9,14 +9,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import { h } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
-import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
-import { buildI18nForComponent, getDesiredLocale } from '../../../i18n';
-import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
-import { afterNextRender } from '../../../utils/dom/after-next-render';
-import { getCurrentISOYearMonth, getISOYearMonth, getYearMonthObject } from '../../../utils/date/year-month-values';
-import translationResources from './i18n/en.json';
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { OnClickOutside } from "../../../utils/decorator/on-click-outside";
+import { buildI18nForComponent, getDesiredLocale } from "../../../i18n";
+import simulateNativeEvent from "../../../utils/dom/simulate-native-event";
+import { afterNextRender } from "../../../utils/dom/after-next-render";
+import { getCurrentISOYearMonth, getISOYearMonth, getYearMonthObject } from "../../../utils/date/year-month-values";
+import translationResources from "./i18n/en.json";
 const DateTimeFormats = { year: 'numeric', month: 'long' };
 const YearFirstLocales = ['ar', 'he', 'ja', 'ko', 'zh-cn', 'zh-tw'];
 export class GuxMonthPicker {
@@ -212,7 +212,8 @@ export class GuxMonthPicker {
           "references": {
             "GuxISOYearMonth": {
               "location": "import",
-              "path": "../../../utils/date/year-month-values"
+              "path": "../../../utils/date/year-month-values",
+              "id": "src/utils/date/year-month-values.ts::GuxISOYearMonth"
             }
           }
         },
@@ -234,7 +235,8 @@ export class GuxMonthPicker {
           "references": {
             "GuxISOYearMonth": {
               "location": "import",
-              "path": "../../../utils/date/year-month-values"
+              "path": "../../../utils/date/year-month-values",
+              "id": "src/utils/date/year-month-values.ts::GuxISOYearMonth"
             }
           }
         },
@@ -256,7 +258,8 @@ export class GuxMonthPicker {
           "references": {
             "GuxISOYearMonth": {
               "location": "import",
-              "path": "../../../utils/date/year-month-values"
+              "path": "../../../utils/date/year-month-values",
+              "id": "src/utils/date/year-month-values.ts::GuxISOYearMonth"
             }
           }
         },

package/dist/collection/components/beta/gux-month-picker/tests/gux-month-picker.e2e.js

@@ -0,0 +1,18 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+const axeExclusions = [];
+describe('gux-month-picker-beta', () => {
+  it('renders with value set', async () => {
+    const html = '<gux-month-picker-beta value=2022-01></gux-month-picker-beta>';
+    const page = await newSparkE2EPage({ html });
+    const element = await page.find('gux-month-picker-beta');
+    await a11yCheck(page, axeExclusions);
+    expect(element.innerHTML).toMatchSnapshot();
+  });
+  it('renders with no value set', async () => {
+    const html = '<gux-month-picker-beta></gux-month-picker-beta>';
+    const page = await newSparkE2EPage({ html });
+    const element = await page.find('gux-month-picker-beta');
+    await a11yCheck(page, axeExclusions);
+    expect(element.innerHTML).toMatchSnapshot();
+  });
+});

package/dist/collection/components/beta/gux-month-picker/tests/gux-month-picker.spec.js

@@ -0,0 +1,27 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxMonthPicker } from "../gux-month-picker";
+import { GuxMonthCalendar } from "../gux-month-calendar/gux-month-calendar";
+import { GuxMonthList } from "../gux-month-calendar/gux-month-list/gux-month-list";
+import { GuxMonthListItem } from "../gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item";
+const components = [
+  GuxMonthPicker,
+  GuxMonthCalendar,
+  GuxMonthList,
+  GuxMonthListItem
+];
+const language = 'en';
+describe('gux-month-picker-beta', () => {
+  it('should build', async () => {
+    const html = '<gux-month-picker-beta value=2022-01></gux-month-picker-beta>';
+    const page = await newSpecPage({ components, language, html });
+    const component = page.rootInstance;
+    expect(component).toBeInstanceOf(GuxMonthPicker);
+  });
+  describe('#render', () => {
+    it(`should render the component as expected`, async () => {
+      const html = '<gux-month-picker-beta value=2022-01></gux-month-picker-beta>';
+      const page = await newSpecPage({ components, language, html });
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+});

package/dist/collection/components/beta/gux-phone-input/components/gux-region-icon/gux-region-icon.js

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
-import { spritesheetDataUrl } from './sprite-utils/generate-sprites';
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../../../utils/tracking/usage";
+import { spritesheetDataUrl } from "./sprite-utils/sprites.generated";
 export class GuxRegionIcon {
   constructor() {
     this.region = undefined;

package/dist/collection/components/beta/gux-phone-input/components/gux-region-icon/gux-region-select.service.js

@@ -1,4 +1,4 @@
-import { getAssetPath } from '@stencil/core';
+import { getAssetPath } from "@stencil/core";
 const imgSrcCache = new Map();
 async function fetchImage(imgName) {
   const imgResponse = await fetch(getAssetPath(`./assets/region-flags/${imgName}.png`));

package/dist/collection/components/beta/gux-phone-input/gux-phone-input.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);
-}
-
 :host {
   display: block;
   color: #2e394c;
@@ -81,9 +42,7 @@
   border-color: #ea0b0b;
 }
 .target-container: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: var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);
   outline-offset: var(--gse-semantic-focusRing-offset);
 }
 
@@ -154,9 +113,7 @@
   outline: inherit;
 }
 .gux-field-button: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: var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);
   outline-offset: var(--gse-semantic-focusRing-offset);
 }
 

package/dist/collection/components/beta/gux-phone-input/gux-phone-input.js

@@ -8,16 +8,16 @@ 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 { forceUpdate, h } from '@stencil/core';
-import libphonenumber, { PhoneNumberFormat } from 'google-libphonenumber';
-import { trackComponent } from '@utils/tracking/usage';
-import { regionCountryCodeMap } from './services/RegionCountryCodeMap';
-import { buildI18nForComponent, getDesiredLocale } from '../../../i18n';
-import countryResources from './i18n/en.json';
-import { OnClickOutside } from '@utils/decorator/on-click-outside';
-import { getRegionObjects } from './services/region-map.service';
-import { preventBrowserValidationStyling } from '@utils/dom/prevent-browser-validation-styling';
-import { logWarn } from '@utils/error/log-error';
+import { forceUpdate, h } from "@stencil/core";
+import libphonenumber, { PhoneNumberFormat } from "google-libphonenumber";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { regionCountryCodeMap } from "./services/RegionCountryCodeMap";
+import { buildI18nForComponent, getDesiredLocale } from "../../../i18n";
+import countryResources from "./i18n/en.json";
+import { OnClickOutside } from "../../../utils/decorator/on-click-outside";
+import { getRegionObjects } from "./services/region-map.service";
+import { preventBrowserValidationStyling } from "../../../utils/dom/prevent-browser-validation-styling";
+import { logWarn } from "../../../utils/error/log-error";
 export class GuxPhoneInput {
   constructor() {
     this.phoneUtil = libphonenumber.PhoneNumberUtil.getInstance();
@@ -316,7 +316,8 @@ export class GuxPhoneInput {
           "references": {
             "RegionCodes": {
               "location": "import",
-              "path": "./services/RegionCountryCodeMap"
+              "path": "./services/RegionCountryCodeMap",
+              "id": "src/components/beta/gux-phone-input/services/RegionCountryCodeMap.ts::RegionCodes"
             }
           }
         },

package/dist/collection/components/beta/gux-phone-input/services/region-map.service.js

@@ -1,4 +1,4 @@
-import { regionCountryCodeMap } from './RegionCountryCodeMap';
+import { regionCountryCodeMap } from "./RegionCountryCodeMap";
 export function getRegionObjects(locale, i18n, phoneUtil) {
   let regionObjects = [];
   for (const [key, val] of Object.entries(regionCountryCodeMap)) {

package/dist/collection/components/beta/gux-phone-input/tests/gux-phone-input.e2e.js

@@ -0,0 +1,88 @@
+import { a11yCheck, newSparkE2EPage } from "../../../../test/e2eTestUtils";
+describe('gux-phone-input', () => {
+  describe('#render', () => {
+    [
+      {
+        description: 'should render phone-input',
+        html: `
+        <gux-phone-input-beta></gux-phone-input-beta>
+        `
+      },
+      {
+        description: 'should render with default region',
+        html: `<gux-phone-input-beta default-region="US"></gux-phone-input-beta>`
+      },
+      {
+        description: 'should render with value',
+        html: `<gux-phone-input-beta value="+13175971660"></gux-phone-input-beta>`
+      },
+      {
+        description: 'should render with format',
+        html: `<gux-phone-input-beta phone-number-format="E164"></gux-phone-input-beta>`
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-phone-input-beta');
+        expect(element.outerHTML).toMatchSnapshot();
+        await a11yCheck(page);
+      });
+    });
+    it('open country dropdown and select option', async () => {
+      const page = await newSparkE2EPage({
+        html: `<gux-phone-input-beta></gux-phone-input-beta>`
+      });
+      const dropdownButton = await page.find('pierce/.gux-field-button');
+      const inputField = await page.find('pierce/#tel-input');
+      const inputEventSpy = await page.spyOnEvent('input');
+      await dropdownButton.press('Enter');
+      expect(dropdownButton.getAttribute('aria-expanded')).toBe('true');
+      await page.waitForChanges();
+      await a11yCheck(page);
+      await page.keyboard.press('ArrowDown');
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+      expect(await inputField.getProperty('value')).toBe('+93');
+      expect(inputEventSpy).toHaveReceivedEventDetail('+93');
+      expect(dropdownButton.getAttribute('aria-expanded')).toBe('false');
+    });
+  });
+  it('region is set when initialized with value', async () => {
+    const page = await newSparkE2EPage({
+      html: `<gux-phone-input-beta value="+13175971660"></gux-phone-input-beta>`
+    });
+    const dropdownButton = await page.find('pierce/.gux-field-button');
+    await dropdownButton.click();
+    await page.waitForChanges();
+    const selected = await page.find('pierce/.gux-selected');
+    expect(selected.textContent).toEqual('United States+1');
+  });
+  it('region is set when typing in country code', async () => {
+    const page = await newSparkE2EPage({
+      html: `<gux-phone-input-beta></gux-phone-input-beta>`
+    });
+    const dropdownButton = await page.find('pierce/.gux-field-button');
+    const inputField = await page.find('pierce/#tel-input');
+    await inputField.type('+41');
+    await page.waitForChanges();
+    await dropdownButton.click();
+    await page.waitForChanges();
+    const selected = await page.find('pierce/.gux-selected');
+    expect(selected.textContent).toEqual('Switzerland+41');
+  });
+  it('phone validation error is sent as true', async () => {
+    const page = await newSparkE2EPage({
+      html: `<gux-phone-input-beta></gux-phone-input-beta>
+            <input type="text" id="focus-input">`
+    });
+    const element = await page.find('gux-phone-input-beta');
+    const inputField = await page.find('pierce/#tel-input');
+    const validationEventSpy = await page.spyOnEvent('phoneValidationError');
+    await inputField.focus();
+    await inputField.type('+1317');
+    await page.waitForChanges();
+    element.triggerEvent('focusout');
+    await page.waitForChanges();
+    expect(validationEventSpy).toHaveReceivedEventDetail(true);
+  });
+});

package/dist/collection/components/beta/gux-screen-reader/gux-screen-reader.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";
 /**
  * @slot - text
  */

package/dist/collection/components/beta/gux-screen-reader/tests/gux-screen-reader.e2e.js

@@ -0,0 +1,16 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-screen-reader-beta', () => {
+  describe('#render', () => {
+    it('should render component as expected', async () => {
+      const html = `
+        <gux-screen-reader-beta>
+          This is content
+        </gux-screen-reader-beta>
+      `;
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-screen-reader-beta');
+      await a11yCheck(page);
+      expect(element.outerHTML).toMatchSnapshot();
+    });
+  });
+});

package/dist/collection/components/beta/gux-screen-reader/tests/gux-screen-reader.spec.js

@@ -0,0 +1,17 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxScreenReader } from "../gux-screen-reader";
+const components = [GuxScreenReader];
+const language = 'en';
+describe('gux-screen-reader-beta', () => {
+  describe('#render', () => {
+    it('should render component as expected', async () => {
+      const html = `
+        <gux-screen-reader-beta>
+          This is content
+        </gux-screen-reader-beta>
+      `;
+      const page = await newSpecPage({ components, html, language });
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+});