genesys-spark-components 4.82.0 → 4.83.0

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

@@ -1,301 +0,0 @@
-import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
-describe('gux-modal-legacy', () => {
-    describe('#render', () => {
-        [
-            {
-                description: 'should render small modal',
-                html: `
-          <gux-modal-legacy lang="en" size="small">
-            <div slot="title">Modal Title</div>
-            <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
-            </div>
-            <div slot="right-align-buttons">
-              <gux-button accent="primary">Accept</gux-button>
-            </div>
-          </gux-modal-legacy>
-        `
-            },
-            {
-                description: 'should render medium modal',
-                html: `
-          <gux-modal-legacy lang="en" size="medium">
-            <div slot="title">Modal Title</div>
-            <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
-            </div>
-            <div slot="right-align-buttons">
-              <gux-button accent="primary">Accept</gux-button>
-            </div>
-          </gux-modal-legacy>
-        `
-            },
-            {
-                description: 'should render large modal',
-                html: `
-          <gux-modal-legacy lang="en" size="large">
-            <div slot="title">Modal Title</div>
-            <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
-            </div>
-            <div slot="right-align-buttons">
-              <gux-button accent="primary">Accept</gux-button>
-            </div>
-          </gux-modal-legacy>
-        `
-            },
-            {
-                description: 'should render modal without a title',
-                html: `
-          <gux-modal-legacy lang="en" size="large">
-            <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
-            </div>
-            <div slot="right-align-buttons">
-              <gux-button accent="primary">Accept</gux-button>
-            </div>
-          </gux-modal-legacy>
-        `
-            },
-            {
-                description: 'should render modal without buttons',
-                html: `
-          <gux-modal-legacy lang="en" size="small">
-            <div slot="title">Modal Title</div>
-            <div slot="content">This contains the modal content.</div>
-          </gux-modal-legacy>
-        `
-            },
-            {
-                description: 'should render modal with just left align buttons',
-                html: `
-          <gux-modal-legacy lang="en" size="small">
-            <div slot="title">Modal Title</div>
-            <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
-            </div>
-          </gux-modal-legacy>
-        `
-            },
-            {
-                description: 'should render modal with just right align buttons',
-                html: `
-          <gux-modal-legacy lang="en" size="small">
-            <div slot="title">Modal Title</div>
-            <div slot="content">This contains the modal content.</div>
-            <div slot="right-align-buttons">
-              <gux-button accent="primary">Accept</gux-button>
-            </div>
-          </gux-modal-legacy>
-        `
-            },
-            {
-                description: 'should render small modal by default',
-                html: `
-          <gux-modal-legacy lang="en">
-            <div slot="title">Modal Title</div>
-            <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
-            </div>
-            <div slot="right-align-buttons">
-              <gux-button accent="primary">Accept</gux-button>
-            </div>
-          </gux-modal-legacy>
-        `
-            }
-        ].forEach(({ description, html }) => {
-            it(description, async () => {
-                const page = await newSparkE2EPage({ html });
-                const element = await page.find('gux-modal-legacy');
-                expect(element.outerHTML).toMatchSnapshot();
-                element.setAttribute('hidden', true);
-                await page.waitForChanges();
-                await a11yCheck(page);
-                expect(element.outerHTML).toMatchSnapshot();
-            });
-        });
-    });
-    describe('dismiss', () => {
-        it('click dismiss button', async () => {
-            const html = `
-        <gux-modal-legacy lang="en" size="small">
-          <div slot="title">Modal Title</div>
-          <div slot="content">This contains the modal content.</div>
-          <div slot="left-align-buttons">
-              <gux-button>Cancel</gux-button>
-          </div>
-          <div slot="right-align-buttons">
-            <gux-button accent="primary">Accept</gux-button>
-          </div>
-        </gux-modal-legacy>
-      `;
-            const page = await newSparkE2EPage({ html });
-            const element = await page.find('gux-modal-legacy');
-            const dismissButtonElement = await element.find('pierce/gux-dismiss-button');
-            const dismissButton = await dismissButtonElement.find('pierce/button');
-            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-modal-legacy')).not.toBeNull();
-            await dismissButton.click();
-            await page.waitForChanges();
-            expect(guxdismissSpy).toHaveReceivedEvent();
-            expect(clickSpy).not.toHaveReceivedEvent();
-            expect(await page.find('gux-modal-legacy')).toBeNull();
-        });
-        it('click dismiss button and prevent default', async () => {
-            const html = `
-        <gux-modal-legacy lang="en" size="small">
-          <div slot="title">Modal Title</div>
-          <div slot="content">This contains the modal content.</div>
-          <div slot="left-align-buttons">
-              <gux-button>Cancel</gux-button>
-          </div>
-          <div slot="right-align-buttons">
-            <gux-button accent="primary">Accept</gux-button>
-          </div>
-        </gux-modal-legacy>
-      `;
-            const page = await newSparkE2EPage({ html });
-            const element = await page.find('gux-modal-legacy');
-            const dismissButtonElement = await element.find('pierce/gux-dismiss-button');
-            const dismissButton = await dismissButtonElement.find('pierce/button');
-            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-modal-legacy')).not.toBeNull();
-            await dismissButton.click();
-            await page.waitForChanges();
-            expect(guxdismissSpy).toHaveReceivedEvent();
-            expect(clickSpy).not.toHaveReceivedEvent();
-            expect(await page.find('gux-modal-legacy')).not.toBeNull();
-        });
-        it('escape key dismiss', async () => {
-            const html = `
-        <gux-modal-legacy lang="en" size="small">
-          <div slot="title">Modal Title</div>
-          <div slot="content">This contains the modal content.</div>
-          <div slot="left-align-buttons">
-              <gux-button>Cancel</gux-button>
-          </div>
-          <div slot="right-align-buttons">
-            <gux-button accent="primary">Accept</gux-button>
-          </div>
-        </gux-modal-legacy>
-      `;
-            const page = await newSparkE2EPage({ html });
-            const modalEl = await page.find('gux-modal-legacy');
-            const guxdismissSpy = await page.spyOnEvent('guxdismiss');
-            expect(guxdismissSpy).not.toHaveReceivedEvent();
-            expect(modalEl).not.toBeNull();
-            await page.keyboard.down('Escape');
-            await page.waitForChanges();
-            expect(guxdismissSpy).toHaveReceivedEvent();
-            expect(await page.find('gux-modal-legacy')).toBeNull();
-        });
-    });
-    describe('focus', () => {
-        const focusModalHtml = (props = '') => `
-      <gux-modal-legacy lang="en" size="small" trap-focus="true" ${props}>
-        <div slot="title">Modal Title</div>
-        <div slot="content">This contains the modal content.</div>
-        <div slot="left-align-buttons">
-            <gux-button id="cancel-button">Cancel</gux-button>
-        </div>
-        <div slot="right-align-buttons">
-          <gux-button id="accept-button" accent="primary">Accept</gux-button>
-        </div>
-      </gux-modal-legacy>
-    `;
-        const modalContainerHtml = `
-      <div id="modal-container"></div>
-      <button id="other-button">Do Nothing</button>
-      <button id="modal-trigger">Open Modal</button>
-    `;
-        const setupContainerPage = async (modalHtml) => {
-            const page = await newSparkE2EPage({ html: modalContainerHtml });
-            await page.evaluate(html => {
-                var _a;
-                (_a = document
-                    .getElementById('modal-trigger')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
-                    if (document.getElementById('modal-container'))
-                        document.getElementById('modal-container').innerHTML = html;
-                });
-            }, modalHtml);
-            return page;
-        };
-        const getFocusedElementText = (page) => page.evaluate(() => document.activeElement.textContent);
-        const getFocusedShadowElementText = (page) => page.evaluate(() => document.querySelector('gux-modal-legacy').shadowRoot.activeElement
-            .textContent);
-        const getFocusedShadowElementTagName = (page) => page.evaluate(() => document.querySelector('gux-modal-legacy').shadowRoot.activeElement
-            .tagName);
-        it('focuses the dismiss button by defualt', async () => {
-            const page = await setupContainerPage(focusModalHtml());
-            await page.click('#modal-trigger');
-            await page.waitForChanges();
-            expect(await page.find('gux-modal-legacy')).not.toBeNull();
-            expect(await getFocusedShadowElementText(page)).toBe('');
-            expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
-        });
-        test('can focus a specific focusable element', async () => {
-            const page = await setupContainerPage(focusModalHtml('initial-focus="#accept-button"'));
-            await page.click('#modal-trigger');
-            await page.waitForChanges();
-            expect(await page.find('gux-modal-legacy')).not.toBeNull();
-            expect(await getFocusedElementText(page)).toBe('Accept');
-        });
-        test('focuses the dismiss button if there are no other focusable elements', async () => {
-            const page = await setupContainerPage(`
-        <gux-modal-legacy lang="en" size="small">
-          <div slot="content">This contains the modal content.</div>
-        </gux-modal-legacy>
-      `);
-            await page.click('#modal-trigger');
-            await page.waitForChanges();
-            expect(await page.find('gux-modal-legacy')).not.toBeNull();
-            expect(await getFocusedShadowElementText(page)).toBe('');
-            expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
-        });
-        test('traps focus in the modal', async () => {
-            const page = await setupContainerPage(focusModalHtml());
-            await page.click('#modal-trigger');
-            await page.waitForChanges();
-            expect(await getFocusedShadowElementText(page)).toBe('');
-            expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
-            await page.keyboard.press('Tab');
-            expect(await getFocusedElementText(page)).toBe('Cancel');
-            await page.keyboard.press('Tab');
-            expect(await getFocusedElementText(page)).toBe('Accept');
-            await page.keyboard.press('Tab');
-            expect(await getFocusedShadowElementText(page)).toBe('');
-            expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
-            await page.keyboard.down('Shift');
-            await page.keyboard.press('Tab');
-            expect(await getFocusedShadowElementText(page)).toBe('');
-            expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
-        });
-        test('returns focus to the originally focused element when the modal closes', async () => {
-            const page = await setupContainerPage(focusModalHtml());
-            await page.click('#modal-trigger');
-            await page.waitForChanges();
-            expect(await getFocusedShadowElementText(page)).toBe('');
-            expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
-            await page.keyboard.down('Escape');
-            await page.waitForChanges();
-            expect(await getFocusedElementText(page)).toBe('Open Modal');
-        });
-    });
-});

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

@@ -1,200 +0,0 @@
-import { newSpecPage } from "../../../../test/specTestUtils";
-import { GuxButton } from "../../../stable/gux-button/gux-button";
-import { GuxModalLegacy } from "../gux-modal-legacy";
-import { GuxDismissButton } from "../../../stable/gux-dismiss-button/gux-dismiss-button";
-const components = [GuxButton, GuxModalLegacy, GuxDismissButton];
-const language = 'en';
-describe('gux-modal-legacy', () => {
-    describe('#render', () => {
-        [
-            {
-                description: 'should render small modal',
-                html: `
-          <gux-modal-legacy size="small">
-            <div slot="title">Modal Title</div>
-            <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
-            </div>
-            <div slot="right-align-buttons">
-              <gux-button accent='primary'>Accept</gux-button>
-            </div>
-          </gux-modal-legacy>
-        `
-            },
-            {
-                description: 'should render medium modal',
-                html: `
-          <gux-modal-legacy size="medium">
-            <div slot="title">Modal Title</div>
-            <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
-            </div>
-            <div slot="right-align-buttons">
-              <gux-button accent='primary'>Accept</gux-button>
-            </div>
-          </gux-modal-legacy>
-        `
-            },
-            {
-                description: 'should render large modal',
-                html: `
-          <gux-modal-legacy size="large">
-            <div slot="title">Modal Title</div>
-            <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
-            </div>
-            <div slot="right-align-buttons">
-              <gux-button accent='primary'>Accept</gux-button>
-            </div>
-          </gux-modal-legacy>
-        `
-            },
-            {
-                description: 'should render modal without a title',
-                html: `
-          <gux-modal-legacy size="large">
-            <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
-            </div>
-            <div slot="right-align-buttons">
-              <gux-button accent='primary'>Accept</gux-button>
-            </div>
-          </gux-modal-legacy>
-        `
-            },
-            {
-                description: 'should render modal without buttons',
-                html: `
-          <gux-modal-legacy size="small">
-            <div slot="title">Modal Title</div>
-            <div slot="content">This contains the modal content.</div>
-          </gux-modal-legacy>
-        `
-            },
-            {
-                description: 'should render modal with just left align buttons',
-                html: `
-          <gux-modal-legacy size="small">
-            <div slot="title">Modal Title</div>
-            <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
-            </div>
-          </gux-modal-legacy>
-        `
-            },
-            {
-                description: 'should render modal with just right align buttons',
-                html: `
-          <gux-modal-legacy size="small">
-            <div slot="title">Modal Title</div>
-            <div slot="content">This contains the modal content.</div>
-            <div slot="right-align-buttons">
-              <gux-button accent='primary'>Accept</gux-button>
-            </div>
-          </gux-modal-legacy>
-        `
-            },
-            {
-                description: 'should render modal with a specified initial focus element',
-                html: `
-          <gux-modal-legacy initial-focus="#cancelButton">
-            <div slot="title">Modal Title</div>
-            <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button id="cancelButton">Cancel</gux-button>
-            </div>
-            <div slot="right-align-buttons">
-              <gux-button accent='primary'>Accept</gux-button>
-            </div>
-          </gux-modal-legacy>
-        `
-            },
-            {
-                description: 'should render small modal by default',
-                html: `
-          <gux-modal-legacy>
-            <div slot="title">Modal Title</div>
-            <div slot="content">This contains the modal content.</div>
-            <div slot="left-align-buttons">
-                <gux-button>Cancel</gux-button>
-            </div>
-            <div slot="right-align-buttons">
-              <gux-button accent='primary'>Accept</gux-button>
-            </div>
-          </gux-modal-legacy>
-        `
-            }
-        ].forEach(({ description, html }) => {
-            it(description, async () => {
-                const page = await newSpecPage({ components, html, language });
-                expect(page.rootInstance).toBeInstanceOf(GuxModalLegacy);
-                expect(page.root).toMatchSnapshot();
-                page.rootInstance.hidden = true;
-                await page.waitForChanges();
-                expect(page.root).toMatchSnapshot();
-                // Disconnect so that the focus trap is properly cleaned up
-                page.root.remove();
-            });
-        });
-    });
-    describe('dismiss', () => {
-        it('click dismiss button', async () => {
-            const html = `
-        <gux-modal-legacy size="small">
-          <div slot="title">Modal Title</div>
-          <div slot="content">This contains the modal content.</div>
-          <div slot="left-align-buttons">
-              <gux-button>Cancel</gux-button>
-          </div>
-          <div slot="right-align-buttons">
-            <gux-button accent='primary'>Accept</gux-button>
-          </div>
-        </gux-modal-legacy>
-      `;
-            const page = await newSpecPage({ components, html, language });
-            const element = page.root;
-            const dismissButton = page.root.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();
-            page.root.remove();
-        });
-        it('click dismiss button and prevent default', async () => {
-            const html = `
-        <gux-modal-legacy size="small">
-          <div slot="title">Modal Title</div>
-          <div slot="content">This contains the modal content.</div>
-          <div slot="left-align-buttons">
-              <gux-button>Cancel</gux-button>
-          </div>
-          <div slot="right-align-buttons">
-            <gux-button accent='primary'>Accept</gux-button>
-          </div>
-        </gux-modal-legacy>
-      `;
-            const page = await newSpecPage({ components, html, language });
-            const element = page.root;
-            const dismissButton = page.root.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();
-            page.root.remove();
-        });
-    });
-});

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

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