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

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

@@ -0,0 +1,126 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxToggle } from "../gux-toggle";
+import { GuxToggleSlider } from "../gux-toggle-slider/gux-toggle-slider";
+const components = [GuxToggle, GuxToggleSlider];
+const language = 'en';
+describe('gux-toggle', () => {
+  it('should build', async () => {
+    const page = await newSpecPage({
+      components,
+      html: `<gux-toggle></gux-toggle>`,
+      language
+    });
+    expect(page.rootInstance).toBeInstanceOf(GuxToggle);
+  });
+  describe('#render', () => {
+    [
+      '<gux-toggle></gux-toggle>',
+      '<gux-toggle checked></gux-toggle>',
+      '<gux-toggle checked disabled></gux-toggle>',
+      '<gux-toggle checked-label="On" unchecked-label="Off"></gux-toggle>',
+      '<gux-toggle checked checked-label="on" unchecked-label="off"></gux-toggle>',
+      `<gux-toggle
+        checked-label="On"
+        unchecked-label="Off"
+        label-position="left"
+      ></gux-toggle>`,
+      `<gux-toggle
+        checked
+        checked-label="on"
+        unchecked-label="off"
+        label-position="right"
+      ></gux-toggle>`,
+      `<gux-toggle
+        checked-label="This is a long label for the toggle to test how it works"
+        unchecked-label="This is another long label for the toggle to test how it works"
+        label-position="left"
+      ></gux-toggle>`,
+      `<gux-toggle
+        checked
+        checked-label="This is a long label for the toggle to test how it works"
+        unchecked-label="This is another long label for the toggle to test how it works"
+        label-position="right"
+      ></gux-toggle>`
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+  describe('User Interactions', () => {
+    [
+      {
+        name: 'clicked',
+        userInteraction: (element) => element.click()
+      },
+      {
+        name: 'Enter is pressed',
+        userInteraction: (element) => element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
+      },
+      {
+        name: 'Space is pressed',
+        userInteraction: (element) => element.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }))
+      }
+    ].forEach(({ name, userInteraction }) => {
+      describe(name, () => {
+        it(`should not fire a check event when an enabled toggle is disabled and ${name}`, async () => {
+          const html = '<gux-toggle disabled checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newSpecPage({ components, html, language });
+          const element = page.root;
+          const checkSpy = jest.fn();
+          element.addEventListener('check', checkSpy);
+          userInteraction(element);
+          await page.waitForChanges();
+          expect(checkSpy).not.toHaveBeenCalled();
+        });
+        it(`should fire a check event when an enabled toggle is ${name}`, async () => {
+          const html = '<gux-toggle checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newSpecPage({ components, html, language });
+          const element = page.root;
+          const checkSpy = jest.fn();
+          element.addEventListener('check', checkSpy);
+          userInteraction(element);
+          await page.waitForChanges();
+          expect(checkSpy).toHaveBeenCalled();
+        });
+        it(`should check an unchecked toggle when ${name}`, async () => {
+          const html = '<gux-toggle checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newSpecPage({ components, html, language });
+          const element = page.root;
+          expect(element.checked).toBe(false);
+          userInteraction(element);
+          await page.waitForChanges();
+          expect(element.checked).toBe(true);
+        });
+        it(`should uncheck a checked toggle when ${name}`, async () => {
+          const html = '<gux-toggle checked checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newSpecPage({ components, html, language });
+          const element = page.root;
+          expect(element.checked).toBe(true);
+          userInteraction(element);
+          await page.waitForChanges();
+          expect(element.checked).toBe(false);
+        });
+        it(`should not check an unchecked toggle when disabled and ${name}`, async () => {
+          const html = '<gux-toggle disabled checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newSpecPage({ components, html, language });
+          const element = page.root;
+          expect(element.checked).toBe(false);
+          userInteraction(element);
+          await page.waitForChanges();
+          expect(element.checked).toBe(false);
+        });
+        it(`should not uncheck a checked toggle when disabled and ${name}`, async () => {
+          const html = '<gux-toggle checked disabled checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newSpecPage({ components, html, language });
+          const element = page.root;
+          expect(element.checked).toBe(true);
+          userInteraction(element);
+          await page.waitForChanges();
+          expect(element.checked).toBe(true);
+        });
+      });
+    });
+  });
+});

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

@@ -32,8 +32,8 @@
   display: none;
   width: max-content;
   max-width: 250px;
-  opacity: 0;
   box-shadow: var(--gse-ui-tooltip-boxShadow-x) var(--gse-ui-tooltip-boxShadow-y) var(--gse-ui-tooltip-boxShadow-blur) var(--gse-ui-tooltip-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color);
+  opacity: 0;
 }
 
 :host(.gux-show) {
@@ -45,22 +45,22 @@
 }
 
 .gux-container {
+  box-sizing: border-box;
   display: flex;
   flex-direction: row;
-  justify-content: flex-start;
-  align-content: center;
   gap: var(--gse-ui-tooltip-gap);
-  box-sizing: border-box;
+  align-content: center;
+  justify-content: flex-start;
   padding: var(--gse-ui-tooltip-padding);
-  pointer-events: none;
-  border-radius: var(--gse-ui-tooltip-borderRadius);
   font-family: var(--gse-ui-tooltip-text-fontFamily);
+  font-size: var(--gse-ui-tooltip-text-fontSize);
   font-weight: var(--gse-ui-tooltip-text-fontWeight);
   line-height: var(--gse-ui-tooltip-text-lineHeight);
-  font-size: var(--gse-ui-tooltip-text-fontSize);
+  color: var(--gse-ui-tooltip-light-foregroundColor);
+  pointer-events: none;
   background-color: var(--gse-ui-tooltip-light-backgroundColor);
   border: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
-  color: var(--gse-ui-tooltip-light-foregroundColor);
+  border-radius: var(--gse-ui-tooltip-borderRadius);
 }
 .gux-container[data-placement=bottom] .gux-arrow, .gux-container[data-placement=bottom-start] .gux-arrow, .gux-container[data-placement=bottom-end] .gux-arrow {
   border-top: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
@@ -82,19 +82,19 @@
   position: absolute;
   width: 13px;
   height: 13px;
-  border-radius: var(--gse-ui-tooltip-borderRadius);
   background: inherit;
+  border-radius: var(--gse-ui-tooltip-borderRadius);
 }
 .gux-container ::slotted(gux-icon) {
+  align-self: center;
   width: var(--gse-ui-icon-size-sm);
   height: var(--gse-ui-icon-size-sm);
   color: var(--gse-ui-tooltip-light-iconColor);
-  align-self: center;
 }
 .gux-container.gux-dark {
+  color: var(--gse-ui-tooltip-dark-foregroundColor);
   background-color: var(--gse-ui-tooltip-dark-backgroundColor);
   border-color: var(--gse-ui-tooltip-dark-border-color);
-  color: var(--gse-ui-tooltip-dark-foregroundColor);
 }
 .gux-container.gux-dark[data-placement=bottom] .gux-arrow, .gux-container.gux-dark[data-placement=bottom-start] .gux-arrow, .gux-container.gux-dark[data-placement=bottom-end] .gux-arrow {
   border-top: var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);
@@ -113,10 +113,10 @@
   border-left: var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);
 }
 .gux-container.gux-dark ::slotted(gux-icon) {
+  align-self: center;
   width: var(--gse-ui-icon-size-sm);
   height: var(--gse-ui-icon-size-sm);
   color: var(--gse-ui-tooltip-dark-iconColor);
-  align-self: center;
 }
 
 @keyframes fade-in {

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

@@ -1,9 +1,9 @@
-import { h, Host } from '@stencil/core';
-import { autoUpdate, computePosition, flip, offset, shift, arrow } from '@floating-ui/dom';
-import { randomHTMLId } from '@utils/dom/random-html-id';
-import { trackComponent } from '@utils/tracking/usage';
-import { findElementById } from '@utils/dom/find-element-by-id';
-import { afterNextRender } from '@utils/dom/after-next-render';
+import { h, Host } from "@stencil/core";
+import { autoUpdate, computePosition, flip, offset, shift, arrow } from "@floating-ui/dom";
+import { randomHTMLId } from "../../../utils/dom/random-html-";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { findElementById } from "../../../utils/dom/find-element-by-";
+import { afterNextRender } from "../../../utils/dom/after-next-render";
 /**
  * @slot - Content of the tooltip
  */
@@ -188,7 +188,8 @@ export class GuxTooltip {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "@floating-ui/dom"
+              "path": "@floating-ui/dom",
+              "id": ""
             }
           }
         },
@@ -211,7 +212,8 @@ export class GuxTooltip {
           "references": {
             "GuxTooltipAccent": {
               "location": "import",
-              "path": "./gux-tooltip-types"
+              "path": "./gux-tooltip-types",
+              "id": "src/components/stable/gux-tooltip/gux-tooltip-types.ts::GuxTooltipAccent"
             }
           }
         },
@@ -258,7 +260,8 @@ export class GuxTooltip {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -274,7 +277,8 @@ export class GuxTooltip {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

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

@@ -0,0 +1,33 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-tooltip', () => {
+  describe('#render', () => {
+    [
+      `
+        <div id="element" lang="en">
+          <div>Element</div>
+          <gux-tooltip>Tooltip</gux-tooltip>
+        </div>
+      `,
+      `
+        <div lang="en">
+          <div id="element">Element</div>
+          <gux-tooltip for="element">Tooltip</gux-tooltip>
+        </div>
+      `
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('#element');
+        const tooltip = await page.find('gux-tooltip');
+        expect(tooltip.className.split(' ')).not.toContain('gux-show');
+        await element.hover();
+        await page.waitForChanges();
+        await a11yCheck(page);
+        expect(element.getAttribute('aria-describedby')).toBe(tooltip.id);
+        expect(tooltip.className.split(' ')).toContain('gux-show');
+        expect(tooltip.getAttribute('data-placement')).toBe('bottom-start');
+        expect(tooltip).toHaveAttribute('hydrated');
+      });
+    });
+  });
+});

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

@@ -0,0 +1,55 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxTooltip } from "../gux-tooltip";
+const components = [GuxTooltip];
+const language = 'en';
+describe('gux-tooltip', () => {
+  it('should build', async () => {
+    const html = '<gux-tooltip></gux-tooltip>';
+    const page = await newSpecPage({ components, html, language });
+    expect(page.rootInstance).toBeInstanceOf(GuxTooltip);
+  });
+  describe('#render', () => {
+    [
+      `
+        <div>
+          <div>Element</div>
+          <gux-tooltip>Tooltip</gux-tooltip>
+        </div>
+      `,
+      `
+        <div>
+          <div id="element">Element</div>
+          <gux-tooltip for="element">Tooltip</gux-tooltip>
+        </div>
+      `
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.body).toMatchSnapshot();
+      });
+    });
+  });
+  describe('#remove', () => {
+    [
+      `
+        <div>
+          <div>Element</div>
+          <gux-tooltip>Tooltip</gux-tooltip>
+        </div>
+      `,
+      `
+        <div>
+          <div id="element">Element</div>
+          <gux-tooltip for="element">Tooltip</gux-tooltip>
+        </div>
+      `
+    ].forEach((html, index) => {
+      it(`should remove component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({ components, html, language });
+        page.root.remove();
+        await page.waitForChanges();
+        expect(page.body).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-tooltip-title/gux-tooltip-title.js

@@ -8,10 +8,10 @@ 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 { logWarn } from '../../../utils/error/log-error';
-import { OnMutation } from '../../../utils/decorator/on-mutation';
-import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
+import { h } from "@stencil/core";
+import { logWarn } from "../../../utils/error/log-error";
+import { OnMutation } from "../../../utils/decorator/on-mutation";
+import { afterNextRenderTimeout } from "../../../utils/dom/after-next-render";
 export class GuxTooltipTitle {
   constructor() {
     this.hasTooltip = false;
@@ -157,7 +157,8 @@ export class GuxTooltipTitle {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -173,7 +174,8 @@ export class GuxTooltipTitle {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

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

@@ -8,10 +8,10 @@ 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 { OnMutation } from '../../../utils/decorator/on-mutation';
-import { OnResize } from '../../../utils/decorator/on-resize';
-import { getTextContentFromNodes } from '../../../utils/dom/get-text-content-from-nodes';
+import { forceUpdate, h } from "@stencil/core";
+import { OnMutation } from "../../../utils/decorator/on-mutation";
+import { OnResize } from "../../../utils/decorator/on-resize";
+import { getTextContentFromNodes } from "../../../utils/dom/get-text-content-from-nodes";
 /**
  * @slot - text node or element containing text to truncate
  */
@@ -94,7 +94,8 @@ export class GuxTruncate {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -110,7 +111,8 @@ export class GuxTruncate {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

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

@@ -0,0 +1,32 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { a11yCheck } from "../../../../test/e2eTestUtils";
+async function newNonrandomE2EPage({ html }, lang = 'en') {
+  const page = await newE2EPage();
+  await page.evaluateOnNewDocument(() => {
+    Math.random = () => 0.5;
+  });
+  await page.setContent(`<div lang=${lang}>${html}</div>`);
+  await page.waitForChanges();
+  await page.addScriptTag({
+    path: '../../node_modules/axe-core/axe.min.js'
+  });
+  await page.waitForChanges();
+  return page;
+}
+describe('gux-truncate', () => {
+  describe('#render', () => {
+    [
+      '<gux-truncate style="width: 40px">Some text to truncate</gux-truncate>',
+      '<gux-truncate style="width: 40px"><span>Some text to truncate in a span</span></gux-truncate>',
+      '<gux-truncate style="width: 40px"><div>Div <span>with a span</span> inside</div></gux-truncate>',
+      '<gux-truncate style="width: 40px" max-lines="3">This is a long text that should be truncated after three lines of wrapped text</gux-truncate>'
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newNonrandomE2EPage({ html });
+        const element = await page.find('gux-truncate');
+        await a11yCheck(page);
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+});

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

@@ -0,0 +1,27 @@
+jest.mock('../../../../utils/decorator/on-resize', () => ({
+  __esModule: true,
+  OnResize: jest.fn()
+}));
+import MutationObserver from "mutation-observer";
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxTruncate } from "../gux-truncate";
+const components = [GuxTruncate];
+const language = 'en';
+describe('gux-truncate', () => {
+  beforeEach(async () => {
+    global.MutationObserver = MutationObserver;
+  });
+  describe('#render', () => {
+    [
+      '<gux-truncate>Some text to truncate</gux-truncate>',
+      '<gux-truncate><span>Some text to truncate in a span</span></gux-truncate>',
+      '<gux-truncate><div>Div <span>with a span</span> inside</div></gux-truncate>',
+      '<gux-truncate>This is a long text that should be truncated after three lines of wrapped text</gux-truncate>'
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/i18n/DateTimeFormatter.js

@@ -1,4 +1,4 @@
-import locales from './locales.json';
+import locales from "./locales.json";
 /**
  * @class A class that implements the method needed to format dates and times depending on locales
  */

package/dist/collection/i18n/fetchResources.js

@@ -1,4 +1,4 @@
-import { getAssetPath } from '@stencil/core';
+import { getAssetPath } from "@stencil/core";
 const resourceCache = {};
 export const determineFetchUrl = (locale = 'en') => getAssetPath(`i18n/genesys-webcomponents.i18n.${locale}.json`);
 export const fetchResources = async (componentName, locale) => {

package/dist/collection/i18n/index.js

@@ -1,9 +1,9 @@
-import IntlMessageFormat from 'intl-messageformat';
-import { fetchResources } from './fetchResources';
+import IntlMessageFormat from "intl-messageformat";
+import { fetchResources } from "./fetchResources";
 // If this import is failing, you should run the i18n script to generate the list of locales
-import locales from './locales.json';
-import startOfWeekDataUntyped from './start-of-week.json';
-import { getClosestElement } from '../utils/dom/get-closest-element';
+import locales from "./locales.json";
+import startOfWeekDataUntyped from "./start-of-week.json";
+import { getClosestElement } from "../utils/dom/get-closest-element";
 const DEFAULT_LOCALE = 'en';
 export async function buildI18nForComponent(component, defaultResources, parentComponent) {
   let resources = defaultResources;

package/dist/collection/test/e2eTestUtils.js

@@ -1,5 +1,5 @@
-import { newE2EPage } from '@stencil/core/testing';
-import { axeConfig } from './axeConfig';
+import { newE2EPage } from "@stencil/core/testing";
+import { axeConfig } from "./axeConfig";
 export async function a11yCheck(page, axeExclusions = [], axeScanContext = '') {
   const axeScanDetails = {
     axeExclusions,

package/dist/collection/test/specTestUtils.js

@@ -0,0 +1,8 @@
+import { newSpecPage as stencilSpecPage } from "@stencil/core/testing";
+import MutationObserver from "mutation-observer";
+export async function newSpecPage(opts) {
+  global.MutationObserver = MutationObserver;
+  global.InputEvent = Event;
+  const page = await stencilSpecPage(opts);
+  return page;
+}

package/dist/collection/utils/date/from-iso-time-string.spec.js

@@ -0,0 +1,13 @@
+import { fromIsoTime } from "./from-iso-time-string";
+describe('#fromIsoTime', () => {
+  [{ input: '01:02:03', expectedOutput: [1, 2, 3] }].forEach(({ input, expectedOutput }, index) => {
+    it(`should work as expected (${index + 1})`, () => {
+      const [expectedHours, expectedMinutes, expectedSeconds] = expectedOutput;
+      const output = fromIsoTime(input);
+      expect(output.getUTCHours()).toBe(expectedHours);
+      expect(output.getUTCMinutes()).toBe(expectedMinutes);
+      expect(output.getUTCSeconds()).toBe(expectedSeconds);
+      expect(output.getUTCMilliseconds()).toBe(0);
+    });
+  });
+});

package/dist/collection/utils/date/get-valid-timezone.js

@@ -1,4 +1,4 @@
-import { timeZoneIdentifiers } from '../../i18n/time-zone/identifiers';
+import { timeZoneIdentifiers } from "../../i18n/time-zone/identifiers";
 export function getValidTimezone(input, fallback) {
   if (timeZoneIdentifiers.includes(input)) {
     return input;

package/dist/collection/utils/date/get-valid-timezone.spec.js

@@ -0,0 +1,38 @@
+import { getValidTimezone } from "./get-valid-timezone";
+import { timeZoneIdentifiers } from "../../i18n/time-zone/identifiers";
+describe('#getValidTimezone', () => {
+  const validTimeZoneIdentifiers = timeZoneIdentifiers;
+  const invalidTimeZoneIdentifiers = ['invalid', '', null, undefined];
+  describe('Valid Timezones', () => {
+    validTimeZoneIdentifiers.forEach((timeZoneIdentifier, index) => {
+      it(`should work as expected (${index + 1})`, () => {
+        const output = getValidTimezone(timeZoneIdentifier);
+        expect(output).toBe(timeZoneIdentifier);
+      });
+    });
+  });
+  describe('Valid Timezones with a fallback', () => {
+    validTimeZoneIdentifiers.forEach((timeZoneIdentifier, index) => {
+      it(`should work as expected (${index + 1})`, () => {
+        const output = getValidTimezone(timeZoneIdentifier, 'UTC');
+        expect(output).toBe(timeZoneIdentifier);
+      });
+    });
+  });
+  describe('Invalid Timezones', () => {
+    invalidTimeZoneIdentifiers.forEach((timeZoneIdentifier, index) => {
+      it(`should work as expected (${index + 1})`, () => {
+        const output = getValidTimezone(timeZoneIdentifier);
+        expect(output).not.toBeDefined();
+      });
+    });
+  });
+  describe('Invalid Timezones with a fallback', () => {
+    invalidTimeZoneIdentifiers.forEach((timeZoneIdentifier, index) => {
+      it(`should work as expected (${index + 1})`, () => {
+        const output = getValidTimezone(timeZoneIdentifier, 'UTC');
+        expect(output).toBe('UTC');
+      });
+    });
+  });
+});