genesys-spark-components 4.82.0 → 4.83.0

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

@@ -1,198 +0,0 @@
-import { newSpecPage } from "../../../../test/specTestUtils";
-import { GuxContentSearch } from "../gux-content-search";
-const components = [GuxContentSearch];
-const language = 'en';
-describe('gux-content-search', () => {
-    describe('#render', () => {
-        [
-            {
-                description: 'should render default control no props',
-                html: '<gux-content-search><input type="text"/></gux-content-search>'
-            },
-            {
-                description: 'should render default control no props With placeholder',
-                html: '<gux-content-search><input type="text" placeholder="Search"/></gux-content-search>'
-            },
-            {
-                description: 'should render default control with all props',
-                html: `<gux-content-search current-match="1"match-count="10">
-          <input type="text" placeholder="Search" value="Default Search Text"/>
-        </gux-content-search>`
-            },
-            {
-                description: 'should render default control with all props with no match',
-                html: `<gux-content-search current-match="0" match-count="0">
-          <input type="text" placeholder="Search" value="Default Search Text"/>
-        </gux-content-search>`
-            },
-            {
-                description: 'should render default control with all props with long text no match',
-                html: `<gux-content-search current-match="0" match-count="0">
-          <input type="text" placeholder="Search" value="Lorem ipsum dolor sit amet, lacinia blandit ultricies lorem aliquam, dui quam a viverra vivamus pellentesque, rhoncus aliquet proin eleifend."/>
-         </gux-content-search>`
-            },
-            {
-                description: 'should render default control with all props with long text 1 match',
-                html: `<gux-content-search current-match="1" match-count="1">
-          <input type="text" placeholder="Search" value="Lorem ipsum dolor sit amet, lacinia blandit ultricies lorem aliquam, dui quam a viverra vivamus pellentesque, rhoncus aliquet proin eleifend."/>
-        </gux-content-search>`
-            },
-            {
-                description: 'should render default control with all props with short text 100000 match',
-                html: `<gux-content-search current-match="1000" match-count="100000">
-          <input type="text" placeholder="Search" value="Lorem ipsum dolor "/>
-        </gux-content-search>`
-            },
-            {
-                description: 'should render default control with all props with long text 100000 match',
-                html: `<gux-content-search current-match="1000" match-count="100000">
-          <input type="text" placeholder="Search" value="Lorem ipsum dolor sit amet, lacinia blandit ultricies lorem aliquam, dui quam a viverra vivamus pellentesque, rhoncus aliquet proin eleifend."/>
-        </gux-content-search>`
-            },
-            {
-                description: 'should render default control with all props with invalid  match count',
-                html: `<gux-content-search current-match="1000" match-count="abc">
-          <input type="text" placeholder="Search" value="Lorem ipsum dolor sit amet, lacinia blandit ultricies lorem aliquam, dui quam a viverra vivamus pellentesque, rhoncus aliquet proin eleifend."/>
-        </gux-content-search>`
-            },
-            {
-                description: 'should render default control with all props with invalid current match',
-                html: `<gux-content-search current-match="100000" match-count="100">
-          <input type="text" placeholder="Search" value="Lorem ipsum dolor sit amet, lacinia blandit ultricies lorem aliquam, dui quam a viverra vivamus pellentesque, rhoncus aliquet proin eleifend."/>
-        </gux-content-search>`
-            },
-            {
-                description: 'should render default control with all props in disable mode',
-                html: `<gux-content-search current-match="10" match-count="10">
-          <input type="text" disabled="true" placeholder="Search" value="Search Disabled"/>
-        </gux-content-search>`
-            },
-            {
-                description: 'should render default control with all props in disable mode with no match',
-                html: `<gux-content-search current-match="0" match-count="0">
-          <input type="text" disabled="true" placeholder="Search" value="Search Disabled with no Match"/>
-        </gux-content-search>`
-            },
-            {
-                description: 'should render default control with all props in disable mode with 1 match',
-                html: `<gux-content-search current-match="1" match-count="1">
-          <input type="text" disabled="true" placeholder="Search" value="Search Disabled with 1 match"/>
-        </gux-content-search>`
-            },
-            {
-                description: 'should render default control with all props in disable mode with 100000000 match',
-                html: `<gux-content-search current-match="10000" match-count="100000000">
-          <input type="text" disabled="true" placeholder="Search" value="Search Disabled with big match"/>
-        </gux-content-search>`
-            },
-            {
-                description: 'should render default control with all props in disable mode with long value',
-                html: `<gux-content-search current-match="1" match-count="1">
-          <input type="text" disabled="true" placeholder="Search" value="Lorem ipsum dolor sit amet, lacinia blandit ultricies lorem aliquam, dui quam a viverra vivamus pellentesque, rhoncus aliquet proin eleifend."/>
-        </gux-content-search>`
-            },
-            {
-                description: 'should render default control with all props in disable mode with long value with 100000000 match',
-                html: `<gux-content-search current-match="1100" match-count="100000001">
-          <input type="text" disabled="true" placeholder="Search" value="Lorem ipsum dolor sit amet, lacinia blandit ultricies lorem aliquam, dui quam a viverra vivamus pellentesque, rhoncus aliquet proin eleifend."/>
-        </gux-content-search>`
-            }
-        ].forEach(({ description, html }) => {
-            it(description, async () => {
-                const page = await newSpecPage({ components, html, language });
-                const component = page.rootInstance;
-                expect(component).toBeInstanceOf(GuxContentSearch);
-                expect(page.root).toMatchSnapshot();
-            });
-        });
-    });
-    describe('Class Logic', () => {
-        let component;
-        beforeEach(async () => {
-            const page = await newSpecPage({
-                components: [GuxContentSearch],
-                html: `<gux-content-search current-match="1" match-count="10"><input type="text" placeholder="Search" value="Default Search Text"/></gux-content-search>`,
-                language: 'en'
-            });
-            component = page.rootInstance;
-        });
-        it('builds', async () => {
-            await component.componentWillLoad();
-            component.render();
-            expect(component).toBeTruthy();
-        });
-        it('componentWillLoad with invalid match value', async () => {
-            component.matchCount = -1;
-            await component.componentWillLoad();
-            component.render();
-            expect(component.matchCount).toBe(-1);
-        });
-        it('componentWillLoad with invalid currentMatch', async () => {
-            component.currentMatch = -1;
-            component.matchCount = 1;
-            await component.componentWillLoad();
-            component.render();
-            expect(component.matchCount).toBe(1);
-            expect(component.currentMatch).toBe(-1);
-        });
-        it('componentWillLoad with invalid currentMatch & matchCount', async () => {
-            component.currentMatch = -1;
-            component.matchCount = -1;
-            await component.componentWillLoad();
-            component.render();
-            expect(component.matchCount).toBe(-1);
-            expect(component.currentMatch).toBe(-1);
-        });
-        it('componentWillLoad with currentMatch greater than matchCount', async () => {
-            component.currentMatch = 11;
-            component.matchCount = 10;
-            await component.componentWillLoad();
-            component.render();
-            expect(component.matchCount).toBe(10);
-            expect(component.currentMatch).toBe(11);
-        });
-        it('componentDidLoad with currentMatch when matchCount is 0', async () => {
-            component.currentMatch = 11;
-            component.matchCount = 0;
-            await component.componentWillLoad();
-            component.render();
-            expect(component.matchCount).toBe(0);
-            expect(component.currentMatch).toBe(11);
-        });
-        describe('methods', () => {
-            it('clear', async () => {
-                const InputEventSpy = jest.fn();
-                global.InputEvent = InputEventSpy;
-                const guxCurrentMatchChangedSpy = jest.fn();
-                component.guxcurrentmatchchanged = {
-                    emit: guxCurrentMatchChangedSpy
-                };
-                component.matchCount = 100;
-                component.currentMatch = 3;
-                await component.clear();
-                expect(component.matchCount).toEqual(0);
-                expect(component.currentMatch).toEqual(0);
-                expect(component.guxcurrentmatchchanged.emit).toHaveBeenCalledWith(0);
-                expect(InputEventSpy).toHaveBeenCalledTimes(2);
-            });
-            it('clear when disable is true', async () => {
-                const page = await newSpecPage({
-                    components: [GuxContentSearch],
-                    html: `<gux-content-search current-match="1" match-count="10"><input disabled="true" type="text" placeholder="Search" value="Default Search Text"/></gux-content-search>`,
-                    language: 'en'
-                });
-                component = page.rootInstance;
-                const guxCurrentMatchChangedSpy = jest.fn();
-                component.guxcurrentmatchchanged = {
-                    emit: guxCurrentMatchChangedSpy
-                };
-                component.matchCount = 100;
-                component.currentMatch = 3;
-                await component.clear();
-                expect(component.matchCount).not.toEqual(0);
-                expect(component.currentMatch).not.toEqual(0);
-                expect(component.guxcurrentmatchchanged.emit).not.toHaveBeenCalledWith(0);
-            });
-        });
-    });
-});

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

@@ -1,79 +0,0 @@
-import { a11yCheck, newSparkE2EPage } from "../../../../test/e2eTestUtils";
-const axeExclusions = [];
-const html = `
-<gux-context-menu>
-  <gux-list-item id="list-item-1" onclick="notify(event)">Test 1</gux-list-item>
-  <gux-list-item id="list-item-2" onclick="notify(event)">Test 2</gux-list-item>
-  <gux-list-item id="list-item-3" onclick="notify(event)">Test 3</gux-list-item>
-</gux-context-menu>
-`;
-const guxListSelector = 'pierce/gux-list';
-const buttonSelector = 'pierce/gux-button-slot button';
-describe('gux-context-menu', () => {
-    let page;
-    beforeEach(async () => {
-        page = await newSparkE2EPage({ html });
-    });
-    it('renders', async () => {
-        const element = await page.find('gux-context-menu');
-        expect(element).toHaveAttribute('hydrated');
-    });
-    it('should be a11y compliant', async () => {
-        const element = await page.find('gux-context-menu');
-        await a11yCheck(page, axeExclusions, 'before opening context menu');
-        await element.click();
-        await page.waitForChanges();
-        await a11yCheck(page, axeExclusions, 'after opening context menu');
-    });
-    it('should focus first item in list on click', async () => {
-        const element = await page.find('gux-context-menu');
-        const expectedElementWithFocus = await page.find('gux-list-item:first-of-type');
-        await element.click();
-        await page.waitForChanges();
-        const actualElementWithFocus = await element.find(':focus');
-        const isMenuVisible = await (await page.find(guxListSelector)).isVisible();
-        expect(isMenuVisible).toBe(true);
-        expect(actualElementWithFocus.id).toEqual(expectedElementWithFocus.id);
-    });
-    it('should focus last item in list on ArrowUp keypress', async () => {
-        const button = await page.find(buttonSelector);
-        const expectedElementWithFocus = await page.find('gux-list-item:last-of-type');
-        await button.press('ArrowUp');
-        await page.waitForChanges();
-        const actualElementWithFocus = await page.find(':focus');
-        const isMenuVisible = await (await page.find(guxListSelector)).isVisible();
-        expect(isMenuVisible).toBe(true);
-        expect(actualElementWithFocus.id).toEqual(expectedElementWithFocus.id);
-    });
-    ['Enter', 'ArrowDown', ' '].forEach(key => {
-        it(`should open menu and focus first item in list on keypress: ${key}`, async () => {
-            const button = await page.find(buttonSelector);
-            const expectedElementWithFocus = await page.find('gux-list-item:first-of-type');
-            await button.press(key);
-            await page.waitForChanges();
-            const actualElementWithFocus = await page.find(':focus');
-            const isMenuVisible = await (await page.find(guxListSelector)).isVisible();
-            expect(isMenuVisible).toBe(true);
-            expect(actualElementWithFocus.id).toEqual(expectedElementWithFocus.id);
-        });
-    });
-    it('should close menu and move focus to button on Escape', async () => {
-        await (await page.find('gux-context-menu')).click();
-        const list = await page.find(guxListSelector);
-        expect(await list.isVisible()).toBe(true);
-        await list.press('Escape');
-        await page.waitForChanges();
-        const actualElementWithFocus = await page.find(':focus');
-        expect(await list.isVisible()).toBe(false);
-        expect(actualElementWithFocus.nodeName).toEqual('GUX-CONTEXT-MENU');
-    });
-    it('should close menu on Tab keypress', async () => {
-        const element = await page.find('gux-context-menu');
-        const list = await element.find(guxListSelector);
-        await element.click();
-        expect(await list.isVisible()).toBe(true);
-        await element.press('Tab');
-        await page.waitForChanges();
-        expect(await list.isVisible()).toBe(false);
-    });
-});

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

@@ -1,44 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { GuxList } from "../../gux-list/gux-list";
-import { GuxListItem } from "../../gux-list/gux-list-item/gux-list-item";
-import { GuxButton } from "../../../stable/gux-button/gux-button";
-import { GuxContextMenu } from "../gux-context-menu";
-const components = [GuxContextMenu, GuxButton, GuxList, GuxListItem];
-const html = `
-<gux-context-menu>
-  <gux-list-item onclick="notify(event)">Test 1</gux-list-item>
-  <gux-list-item onclick="notify(event)">Test 2</gux-list-item>
-  <gux-list-item onclick="notify(event)">Test 3</gux-list-item>
-</gux-context-menu>
-`;
-describe('gux-context-menu', () => {
-    let page;
-    let component;
-    beforeEach(async () => {
-        page = await newSpecPage({
-            components,
-            html,
-            language: 'en'
-        });
-        component = page.rootInstance;
-    });
-    it('should build', async () => {
-        expect(component).toBeInstanceOf(GuxContextMenu);
-    });
-    it('renders', async () => {
-        expect(page.root).toMatchSnapshot();
-    });
-    // Mouse events
-    it('should display the menu and focus on first list item on click', () => {
-        const focusFirstListItemSpy = jest.spyOn(component, 'focusFirstListItem');
-        expect(component.isOpen).toBe(false);
-        component.button.click();
-        expect(focusFirstListItemSpy).toHaveBeenCalledTimes(1);
-        expect(component.isOpen).toBe(true);
-    });
-    it('should hide on click outside the component', () => {
-        component.button.click();
-        page.body.click();
-        expect(component.isOpen).toBe(false);
-    });
-});

package/dist/collection/components/stable/gux-copy-to-clipboard/tests/gux-copy-to-clipboard.e2e.js

@@ -1,23 +0,0 @@
-import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
-const html = `
-  <gux-copy-to-clipboard lang="en">
-    <div slot="content>Test</div>
-  </gux-copy-to-clipboard>
-`;
-describe('gux-copy-to-clipboard', () => {
-    it('renders', async () => {
-        const page = await newSparkE2EPage({ html });
-        const element = await page.find('gux-copy-to-clipboard');
-        await a11yCheck(page);
-        expect(element).toHaveAttribute('hydrated');
-    });
-    it('renders tooltip on hover', async () => {
-        const page = await newSparkE2EPage({ html });
-        const element = await page.find('gux-copy-to-clipboard');
-        await element.hover();
-        await page.waitForChanges();
-        const tooltip = await element.find('pierce/gux-tooltip');
-        await a11yCheck(page);
-        expect(tooltip.textContent).toEqual('Click to Copy');
-    });
-});

package/dist/collection/components/stable/gux-copy-to-clipboard/tests/gux-copy-to-clipboard.spec.js

@@ -1,44 +0,0 @@
-import { newSpecPage } from "../../../../test/specTestUtils";
-import { GuxCopyToClipboard } from "../gux-copy-to-clipboard";
-const components = [GuxCopyToClipboard];
-const language = 'en';
-const html = `
-  <gux-copy-to-clipboard>
-    <div slot="content">Test</div>
-  </gux-copy-to-clipboard>
-`;
-describe('gux-copy-to-clipboard', () => {
-    describe('#render', () => {
-        it('should render copy to clipboard', async () => {
-            const page = await newSpecPage({ components, html, language });
-            expect(page.rootInstance).toBeInstanceOf(GuxCopyToClipboard);
-            expect(page.root).toMatchSnapshot();
-        });
-    });
-    describe('private', () => {
-        it('should copy to clipboard successfully', async () => {
-            const component = new GuxCopyToClipboard();
-            Object.assign(window.navigator, {
-                clipboard: {
-                    writeText: jest.fn().mockImplementation(() => Promise.resolve())
-                }
-            });
-            await component.onCopyToClipboard();
-            expect(component.tooltipContent).toEqual('copySuccess');
-            expect(window.navigator.clipboard.writeText).toHaveBeenCalled();
-        });
-        it('should copy to clipboard with error', async () => {
-            const component = new GuxCopyToClipboard();
-            Object.assign(window.navigator, {
-                clipboard: {
-                    writeText: jest
-                        .fn()
-                        .mockImplementation(() => Promise.reject(new Error()))
-                }
-            });
-            await component.onCopyToClipboard();
-            expect(component.tooltipContent).toEqual('copyFailure');
-            expect(window.navigator.clipboard.writeText).toHaveBeenCalled();
-        });
-    });
-});

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

@@ -1,124 +0,0 @@
-import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
-const axeExclusions = [
-    {
-        issueId: 'target-size',
-        target: 'gux-datepicker,.gux-calendar-toggle-button',
-        exclusionReason: 'COMUI-2946 Fix any of the following: Target has insufficient size (16px by 18px, should be at least 24px by 24px); Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 16px instead of at least 24px.'
-    },
-    {
-        issueId: 'target-size',
-        target: 'gux-datepicker,.gux-datepicker-field:nth-child(1) > .gux-datepicker-field-input > .gux-datepicker-field-text-input > .gux-calendar-toggle-button[aria-label="Toggle calendar view"]',
-        exclusionReason: 'COMUI-2946 Fix any of the following: Target has insufficient size (16px by 18px, should be at least 24px by 24px); Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 16px instead of at least 24px.'
-    },
-    {
-        issueId: 'target-size',
-        target: 'gux-datepicker,.gux-datepicker-field:nth-child(2) > .gux-datepicker-field-input > .gux-datepicker-field-text-input > .gux-calendar-toggle-button[aria-label="Toggle calendar view"]',
-        exclusionReason: 'COMUI-2946 Fix any of the following: Target has insufficient size (16px by 18px, should be at least 24px by 24px); Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 16px instead of at least 24px.'
-    }
-];
-describe('gux-datepicker', () => {
-    it('renders', async () => {
-        const page = await newSparkE2EPage({
-            html: `<gux-datepicker lang="en"></gux-datepicker>`
-        });
-        const element = await page.find('gux-datepicker');
-        expect(element).toHaveAttribute('hydrated');
-    });
-    it('renders a datepicker for range of dates', async () => {
-        const page = await newSparkE2EPage({
-            html: `<gux-datepicker
-        mode="range"
-        value="2019-11-25/2019-12-02"
-        number-of-months="2"
-        ></gux-datepicker>`
-        });
-        const element = await page.find('gux-datepicker');
-        expect(element).toHaveAttribute('hydrated');
-    });
-    it('updates the text input state when the datepicker’s value property is set', async () => {
-        const page = await newSparkE2EPage({
-            html: `<gux-datepicker lang="en"></gux-datepicker>`
-        });
-        const element = await page.find('gux-datepicker');
-        element.setProperty('value', '1985-12-01');
-        await page.waitForChanges();
-        const input = await element.find('pierce/input');
-        const value = await input.getProperty('value');
-        await a11yCheck(page, axeExclusions);
-        expect(value).toBe('12/01/1985');
-    });
-    it('opens the calendar when the input is clicked', async () => {
-        const page = await newSparkE2EPage({
-            html: `<gux-datepicker lang="en"></gux-datepicker>`
-        });
-        const datepicker = await page.find('gux-datepicker');
-        const datepickerContainer = await datepicker.find('pierce/.gux-datepicker');
-        const input = await datepickerContainer.find('input');
-        await input.click();
-        await page.waitForChanges();
-        await a11yCheck(page, axeExclusions);
-        expect(datepickerContainer.className).toContain('gux-active');
-    });
-    it('opens and closes the calendar when the button is clicked', async () => {
-        const page = await newSparkE2EPage({
-            html: `<gux-datepicker lang="en"></gux-datepicker>`
-        });
-        const datepicker = await page.find('gux-datepicker');
-        const datepickerContainer = await datepicker.find('pierce/.gux-datepicker');
-        const input = await datepicker.find('pierce/input');
-        await input.click();
-        await page.waitForChanges();
-        expect(datepickerContainer.className).toContain('gux-active');
-        const button = await datepicker.find('pierce/.gux-calendar-toggle-button');
-        await button.click();
-        await page.waitForChanges();
-        expect(datepickerContainer.className).not.toContain('gux-active');
-    });
-    it('should not open the calendar when the input or button is clicked when disabled', async () => {
-        const page = await newSparkE2EPage({
-            html: `<gux-datepicker lang="en" disabled></gux-datepicker>`
-        });
-        const datepicker = await page.find('gux-datepicker');
-        const datepickerContainer = await datepicker.find('pierce/.gux-datepicker');
-        const input = await datepicker.find('pierce/input');
-        await input.click();
-        await page.waitForChanges();
-        expect(datepickerContainer.className).not.toContain('gux-active');
-        const button = await datepicker.find('pierce/.gux-calendar-toggle-button');
-        await button.click();
-        await page.waitForChanges();
-        expect(datepickerContainer.className).not.toContain('gux-active');
-    });
-    it('provides the correct label in single date mode', async () => {
-        const page = await newSparkE2EPage({
-            html: `<gux-datepicker lang="en"></gux-datepicker>`
-        });
-        const element = await page.find('gux-datepicker');
-        const labels = await page.findAll('pierce/.gux-datepicker-field-label');
-        await a11yCheck(page, axeExclusions);
-        expect(labels.length).toBe(1);
-        expect(labels[0].textContent).toEqual('Date');
-        expect(labels[0].className).toContain('gux-sr-only');
-        element.setAttribute('label', 'test');
-        await page.waitForChanges();
-        await a11yCheck(page, axeExclusions);
-        expect(labels[0].textContent).toEqual('test');
-        expect(labels[0].className).not.toContain('gux-sr-only');
-    });
-    it('provides the correct labels in date range mode', async () => {
-        const page = await newSparkE2EPage({
-            html: `<gux-datepicker
-      mode="range"
-      value="2019-11-25/2019-12-02"
-      number-of-months="2"
-      ></gux-datepicker>`
-        });
-        const labels = await page.findAll('pierce/.gux-datepicker-field-label');
-        await page.waitForChanges();
-        await a11yCheck(page, axeExclusions);
-        expect(labels.length).toBe(2);
-        expect(labels[0].textContent).toBe('Start');
-        expect(labels[0].className).not.toContain('gux-sr-only');
-        expect(labels[1].textContent).toBe('End');
-    });
-});