genesys-spark-components 4.82.0 → 4.83.1

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-dropdown/tests/gux-form-field-dropdown.e2e.js

@@ -1,196 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { newSparkE2EPage, a11yCheck } from "../../../../../../test/e2eTestUtils";
-const axeExclusions = [];
-async function newNonrandomE2EPage({ html }) {
-    const page = await newE2EPage();
-    await page.evaluateOnNewDocument(() => {
-        Math.random = () => 0.5;
-    });
-    await page.setContent(html);
-    await page.waitForChanges();
-    return page;
-}
-describe('gux-form-field-dropdown', () => {
-    describe('#render', () => {
-        describe('help', () => {
-            const html = `
-      <gux-form-field-dropdown>
-      <gux-dropdown>
-        <gux-listbox>
-          <gux-option value="a" disabled>Ant<span slot="subtext">Small</span></gux-option>
-          <gux-option value="b">Bat</gux-option>
-          <gux-option value="c">Cat</gux-option>
-        </gux-listbox>
-      </gux-dropdown>
-      <label slot="label">Default</label>
-      <span slot="help">This is a help message</span>
-    </gux-form-field-dropdown>
-      `;
-            it('should render component as expected', async () => {
-                const page = await newNonrandomE2EPage({ html });
-                const element = await page.find('gux-form-field-dropdown');
-                const elementShadowDom = await element.find('pierce/.gux-form-field-fieldset-container');
-                expect(element.outerHTML).toMatchSnapshot();
-                expect(elementShadowDom).toMatchSnapshot();
-            });
-            it('should be accessible', async () => {
-                const page = await newSparkE2EPage({ html });
-                await a11yCheck(page, axeExclusions);
-            });
-        });
-        describe('single select dropdown', () => {
-            describe('label-position', () => {
-                [
-                    '',
-                    'label-position="above"',
-                    'label-position="beside"',
-                    'label-position="screenreader"'
-                ].forEach((componentAttribute, index) => {
-                    const html = `
-            <gux-form-field-dropdown ${componentAttribute}>
-              <gux-dropdown>
-                <gux-listbox>
-                  <gux-option value="a" disabled>Ant</gux-option>
-                  <gux-option value="b">Bat</gux-option>
-                  <gux-option value="c">Cat<span slot="subtext">Medium</span></gux-option>
-                </gux-listbox>
-              </gux-dropdown>
-              <label slot="label">Default</label>
-              <span slot="error">This is an error message</span>
-            </gux-form-field-dropdown>
-          `;
-                    it(`should render component as expected (${index + 1})`, async () => {
-                        const page = await newNonrandomE2EPage({ html });
-                        const element = await page.find('gux-form-field-dropdown');
-                        const elementShadowDom = await element.find('pierce/.gux-form-field-fieldset-container');
-                        expect(element.outerHTML).toMatchSnapshot();
-                        expect(elementShadowDom).toMatchSnapshot();
-                    });
-                    it(`should show error style`, async () => {
-                        const page = await newNonrandomE2EPage({ html });
-                        const element = await page.find('gux-form-field-dropdown');
-                        const dropdownElement = await element.find('gux-dropdown');
-                        const popupElement = await dropdownElement.find('pierce/gux-popup');
-                        const targetElement = await popupElement.find('.gux-target-container-collapsed');
-                        expect(targetElement).toHaveClass('gux-error');
-                    });
-                    it(`should be accessible (${index + 1})`, async () => {
-                        const page = await newSparkE2EPage({ html });
-                        await a11yCheck(page, axeExclusions);
-                    });
-                });
-            });
-            describe('input attributes', () => {
-                ['', 'disabled', 'required'].forEach((inputAttribute, index) => {
-                    const html = `
-          <gux-form-field-dropdown>
-            <gux-dropdown ${inputAttribute}>
-              <gux-listbox>
-                <gux-option value="a" disabled>Ant</gux-option>
-                <gux-option value="b">Bat</gux-option>
-                <gux-option value="c">Cat<span slot="subtext">Medium</span></gux-option>
-              </gux-listbox>
-            </gux-dropdown>
-            <label slot="label">This will be read by a screen reader</label>
-          </gux-form-field-dropdown>
-          `;
-                    it(`should render component as expected (${index + 1})`, async () => {
-                        const page = await newNonrandomE2EPage({ html });
-                        const element = await page.find('gux-form-field-dropdown');
-                        const elementShadowDom = await element.find('pierce/.gux-form-field-fieldset-container');
-                        expect(element.outerHTML).toMatchSnapshot();
-                        expect(elementShadowDom).toMatchSnapshot();
-                    });
-                    it(`should not show error style`, async () => {
-                        const page = await newNonrandomE2EPage({ html });
-                        const element = await page.find('gux-form-field-dropdown');
-                        const dropdownElement = await element.find('gux-dropdown');
-                        const popupElement = await dropdownElement.find('pierce/gux-popup');
-                        const targetElement = await popupElement.find('.gux-target-container-collapsed');
-                        expect(targetElement).not.toHaveClass('gux-error');
-                    });
-                    it(`should be accessible (${index + 1})`, async () => {
-                        const page = await newSparkE2EPage({ html });
-                        await a11yCheck(page, axeExclusions);
-                    });
-                });
-            });
-        });
-        describe('multi select dropdown', () => {
-            describe('label-position', () => {
-                [
-                    '',
-                    'label-position="above"',
-                    'label-position="beside"',
-                    'label-position="screenreader"'
-                ].forEach((componentAttribute, index) => {
-                    const html = `
-            <gux-form-field-dropdown ${componentAttribute}>
-              <gux-dropdown-multi>
-                <gux-listbox-multi>
-                  <gux-option-multi value="a" disabled>Ant</gux-option-multi>
-                  <gux-option-multi value="b">Bat</gux-option-multi>
-                  <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
-                </gux-listbox-multi>
-              </gux-dropdown-multi>
-              <label slot="label">Default</label>
-              <span slot="error">This is an error message</span>
-            </gux-form-field-dropdown>
-          `;
-                    it(`should render component as expected (${index + 1})`, async () => {
-                        const page = await newNonrandomE2EPage({ html });
-                        const element = await page.find('gux-form-field-dropdown');
-                        const elementShadowDom = await element.find('pierce/.gux-form-field-fieldset-container');
-                        expect(element.outerHTML).toMatchSnapshot();
-                        expect(elementShadowDom).toMatchSnapshot();
-                    });
-                    it(`should show error style`, async () => {
-                        const page = await newNonrandomE2EPage({ html });
-                        const element = await page.find('gux-form-field-dropdown');
-                        const dropdownElement = await element.find('gux-dropdown-multi');
-                        const popupElement = await dropdownElement.find('pierce/gux-popup');
-                        const targetElement = await popupElement.find('.gux-target-container-collapsed');
-                        expect(targetElement).toHaveClass('gux-error');
-                    });
-                    it(`should be accessible (${index + 1})`, async () => {
-                        const page = await newSparkE2EPage({ html });
-                        await a11yCheck(page, axeExclusions);
-                    });
-                });
-            });
-            ['', 'disabled', 'required'].forEach((inputAttribute, index) => {
-                const html = `
-          <gux-form-field-dropdown>
-            <gux-dropdown-multi ${inputAttribute}>
-              <gux-listbox-multi>
-                <gux-option-multi value="a" disabled>Ant</gux-option-multi>
-                <gux-option-multi value="b">Bat</gux-option-multi>
-                <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
-              </gux-listbox-multi>
-            </gux-dropdown-multi>
-            <label slot="label">Default</label>
-          </gux-form-field-dropdown>
-        `;
-                it(`should render component as expected (${index + 1})`, async () => {
-                    const page = await newNonrandomE2EPage({ html });
-                    const element = await page.find('gux-form-field-dropdown');
-                    const elementShadowDom = await element.find('pierce/.gux-form-field-fieldset-container');
-                    expect(element.outerHTML).toMatchSnapshot();
-                    expect(elementShadowDom).toMatchSnapshot();
-                });
-                it(`should not show error style`, async () => {
-                    const page = await newNonrandomE2EPage({ html });
-                    const element = await page.find('gux-form-field-dropdown');
-                    const dropdownElement = await element.find('gux-dropdown-multi');
-                    const popupElement = await dropdownElement.find('pierce/gux-popup');
-                    const targetElement = await popupElement.find('.gux-target-container-collapsed');
-                    expect(targetElement).not.toHaveClass('gux-error');
-                });
-                it(`should be accessible (${index + 1})`, async () => {
-                    const page = await newSparkE2EPage({ html });
-                    await a11yCheck(page, axeExclusions);
-                });
-            });
-        });
-    });
-});

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-dropdown/tests/gux-form-field-dropdown.spec.js

@@ -1,270 +0,0 @@
-import { newSpecPage } from "../../../../../../test/specTestUtils";
-import { GuxFormFieldDropdown } from "../gux-form-field-dropdown";
-import { GuxDropdown } from "../../../../gux-dropdown/gux-dropdown";
-import { GuxDropdownMulti } from "../../../../gux-dropdown-multi/gux-dropdown-multi";
-import { GuxListbox } from "../../../../gux-listbox/gux-listbox";
-import { GuxListboxMulti } from "../../../../gux-listbox-multi/gux-listbox-multi";
-import { GuxOption } from "../../../../gux-listbox/options/gux-option/gux-option";
-import { GuxOptionMulti } from "../../../../gux-listbox-multi/gux-option-multi/gux-option-multi";
-const components = [
-    GuxFormFieldDropdown,
-    GuxDropdown,
-    GuxDropdownMulti,
-    GuxListbox,
-    GuxListboxMulti,
-    GuxOption,
-    GuxOptionMulti
-];
-const language = 'en';
-describe('gux-form-field-dropdown', () => {
-    describe('single select dropdown', () => {
-        it('should build', async () => {
-            const html = `
-      <gux-form-field-dropdown>
-        <gux-dropdown>
-          <gux-listbox>
-            <gux-option value="a" disabled>Ant</gux-option>
-            <gux-option value="b">Bat</gux-option>
-            <gux-option value="c">Cat<span slot="subtext">Medium</span></gux-option>
-          </gux-listbox>
-        </gux-dropdown>
-        <label slot="label">Default</label>
-      </gux-form-field-dropdown>
-      `;
-            const page = await newSpecPage({ components, html, language });
-            expect(page.rootInstance).toBeInstanceOf(GuxFormFieldDropdown);
-        });
-        describe('#render', () => {
-            describe('label-position', () => {
-                [
-                    '',
-                    'label-position="above"',
-                    'label-position="beside"',
-                    'label-position="screenreader"'
-                ].forEach((componentAttribute, index) => {
-                    it(`should render component as expected (${index + 1})`, async () => {
-                        const html = `
-            <gux-form-field-dropdown ${componentAttribute}>
-              <gux-dropdown>
-                <gux-listbox>
-                  <gux-option value="a" disabled>Ant</gux-option>
-                  <gux-option value="b">Bat</gux-option>
-                  <gux-option value="c">Cat<span slot="subtext">Medium</span></gux-option>
-                </gux-listbox>
-              </gux-dropdown>
-              <label slot="label">Default</label>
-            </gux-form-field-dropdown>
-            `;
-                        const page = await newSpecPage({ components, html, language });
-                        expect(page.root).toMatchSnapshot();
-                    });
-                });
-            });
-            describe('input attributes', () => {
-                ['', 'disabled', 'required'].forEach((inputAttribute, index) => {
-                    it(`should render component as expected (${index + 1})`, async () => {
-                        const html = `
-            <gux-form-field-dropdown>
-              <gux-dropdown ${inputAttribute}>
-                <gux-listbox>
-                  <gux-option value="a" disabled>Ant</gux-option>
-                  <gux-option value="b">Bat</gux-option>
-                  <gux-option value="c">Cat<span slot="subtext">Medium</span></gux-option>
-                </gux-listbox>
-              </gux-dropdown>
-              <label slot="label">Default</label>
-            </gux-form-field-dropdown>
-            `;
-                        const page = await newSpecPage({ components, html, language });
-                        expect(page.root).toMatchSnapshot();
-                    });
-                });
-            });
-            describe('indicator marks', () => {
-                ['', 'indicator-mark="optional"', 'indicator-mark="required"'].forEach((indicatorMark, index) => {
-                    it(`should render component as expected optional dropdown (${index + 1})`, async () => {
-                        const html = `
-                <gux-form-field-dropdown ${indicatorMark}>
-                    <gux-dropdown>
-                      <gux-listbox>
-                        <gux-option value="a" disabled>Ant</gux-option>
-                        <gux-option value="b">Bat</gux-option>
-                        <gux-option value="c">Cat<span slot="subtext">Medium</span></gux-option>
-                      </gux-listbox>
-                    </gux-dropdown>
-                    <label slot="label">Default</label>
-                  </gux-form-field-dropdown>
-              `;
-                        const page = await newSpecPage({ components, html, language });
-                        expect(page.root).toMatchSnapshot();
-                    });
-                });
-            });
-        });
-    });
-    describe('multi select dropdown', () => {
-        it('should build', async () => {
-            const html = `
-      <gux-form-field-dropdown>
-        <gux-dropdown-multi>
-          <gux-listbox-multi>
-            <gux-option-multi value="a" disabled>Ant</gux-option-multi>
-            <gux-option-multi value="b">Bat</gux-option-multi>
-            <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
-          </gux-listbox-multi>
-        </gux-dropdown-multi>
-        <label slot="label">Default</label>
-      </gux-form-field-dropdown>
-      `;
-            const page = await newSpecPage({ components, html, language });
-            expect(page.rootInstance).toBeInstanceOf(GuxFormFieldDropdown);
-        });
-        describe('#render', () => {
-            describe('label-position', () => {
-                [
-                    '',
-                    'label-position="above"',
-                    'label-position="beside"',
-                    'label-position="screenreader"'
-                ].forEach((componentAttribute, index) => {
-                    it(`should render component as expected (${index + 1})`, async () => {
-                        const html = `
-              <gux-form-field-dropdown ${componentAttribute}>
-                <gux-dropdown-multi>
-                  <gux-listbox-multi>
-                    <gux-option-multi value="a" disabled>Ant</gux-option-multi>
-                    <gux-option-multi value="b">Bat</gux-option-multi>
-                    <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
-                  </gux-listbox-multi>
-                </gux-dropdown-multi>
-                <label slot="label">Default</label>
-              </gux-form-field-dropdown>
-            `;
-                        const page = await newSpecPage({ components, html, language });
-                        expect(page.root).toMatchSnapshot();
-                    });
-                });
-            });
-            describe('input attributes', () => {
-                ['', 'disabled', 'required'].forEach((inputAttribute, index) => {
-                    it(`should render component as expected (${index + 1})`, async () => {
-                        const html = `
-            <gux-form-field-dropdown>
-              <gux-dropdown-multi ${inputAttribute}>
-                <gux-listbox-multi>
-                  <gux-option-multi value="a" disabled>Ant</gux-option-multi>
-                  <gux-option-multi value="b">Bat</gux-option-multi>
-                  <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
-                </gux-listbox-multi>
-              </gux-dropdown-multi>
-              <label slot="label">Default</label>
-            </gux-form-field-dropdown>
-            `;
-                        const page = await newSpecPage({ components, html, language });
-                        expect(page.root).toMatchSnapshot();
-                    });
-                });
-            });
-            describe('help', () => {
-                it('should render component as expected', async () => {
-                    const html = `
-          <gux-form-field-dropdown>
-          <gux-dropdown-multi>
-            <gux-listbox-multi>
-              <gux-option-multi value="a" disabled>Ant</gux-option-multi>
-              <gux-option-multi value="b">Bat</gux-option-multi>
-              <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
-            </gux-listbox-multi>
-          </gux-dropdown-multi>
-          <label slot="label">Default</label>
-          <span slot="help">This is a help message</span>
-        </gux-form-field-dropdown>
-          `;
-                    const page = await newSpecPage({ components, html, language });
-                    expect(page.root).toMatchSnapshot();
-                });
-            });
-            describe('help multi select', () => {
-                it('should render component as expected', async () => {
-                    const html = `
-          <gux-form-field-dropdown>
-          <gux-dropdown-multi>
-            <gux-listbox-multi>
-              <gux-option-multi value="a" disabled>Ant</gux-option-multi>
-              <gux-option-multi value="b">Bat</gux-option-multi>
-              <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
-            </gux-listbox-multi>
-          </gux-dropdown-multi>
-          <label slot="label">Default</label>
-          <span slot="help">This is a help message</span>
-        </gux-form-field-dropdown>
-          `;
-                    const page = await newSpecPage({ components, html, language });
-                    expect(page.root).toMatchSnapshot();
-                });
-            });
-            describe('multi label-info', () => {
-                it('should render component as expected', async () => {
-                    const html = `
-            <gux-form-field-dropdown>
-              <gux-dropdown-multi>
-                <gux-listbox-multi>
-                  <gux-option-multi value="a" disabled>Ant</gux-option-multi>
-                  <gux-option-multi value="b">Bat</gux-option-multi>
-                  <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
-                </gux-listbox-multi>
-              </gux-dropdown-multi>
-              <label slot="label">Default</label>
-              <gux-label-info-beta slot="label-info">
-                <span slot="content">This is some tooltip text</span>
-              </gux-label-info-beta>
-            </gux-form-field-dropdown>
-          `;
-                    const page = await newSpecPage({ components, html, language });
-                    expect(page.root).toMatchSnapshot();
-                });
-            });
-            describe('help multi select', () => {
-                it('should render component as expected', async () => {
-                    const html = `
-          <gux-form-field-dropdown>
-          <gux-dropdown-multi>
-            <gux-listbox-multi>
-              <gux-option-multi value="a" disabled>Ant</gux-option-multi>
-              <gux-option-multi value="b">Bat</gux-option-multi>
-              <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
-            </gux-listbox-multi>
-          </gux-dropdown-multi>
-          <label slot="label">Default</label>
-          <gux-label-info-beta slot="label-info">
-            <span slot="content">This is some tooltip text</span>
-          </gux-label-info-beta>
-        </gux-form-field-dropdown>
-          `;
-                    const page = await newSpecPage({ components, html, language });
-                    expect(page.root).toMatchSnapshot();
-                });
-            });
-            describe('multi indicator marks', () => {
-                ['', 'indicator-mark="optional"', 'indicator-mark="required"'].forEach((indicatorMark, index) => {
-                    it(`should render component as expected optional dropdown (${index + 1})`, async () => {
-                        const html = `
-                <gux-form-field-dropdown ${indicatorMark}>
-                    <gux-dropdown-multi>
-                      <gux-listbox-multi>
-                        <gux-option-multi value="a" disabled>Ant</gux-option-multi>
-                        <gux-option-multi value="b">Bat</gux-option-multi>
-                        <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
-                      </gux-listbox-multi>
-                    </gux-dropdown-multi>
-                    <label slot="label">Default</label>
-                  </gux-form-field-dropdown>
-              `;
-                        const page = await newSpecPage({ components, html, language });
-                        expect(page.root).toMatchSnapshot();
-                    });
-                });
-            });
-        });
-    });
-});

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-file/tests/gux-form-field-file.e2e.js

@@ -1,102 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { newSparkE2EPage, a11yCheck } from "../../../../../../test/e2eTestUtils";
-const axeExclusions = [];
-async function newNonrandomE2EPage({ html }) {
-    const page = await newE2EPage();
-    await page.evaluateOnNewDocument(() => {
-        Math.random = () => 0.5;
-    });
-    await page.setContent(html);
-    await page.waitForChanges();
-    return page;
-}
-describe('gux-form-field-file', () => {
-    describe('#render', () => {
-        describe('label-position', () => {
-            [
-                '',
-                'label-position="above"',
-                'label-position="beside"',
-                'label-position="screenreader"'
-            ].forEach((componentAttribute, index) => {
-                const html = `
-        <gux-form-field-file ${componentAttribute}>
-        <label slot="label">Upload a profile picture</label>
-        <input
-          type="file"
-          id="avatar"
-          name="avatar"
-          accept="image/png, image/jpeg"
-          slot="input"
-        />
-      </gux-form-field-file>
-        `;
-                it(`should render component as expected (${index + 1})`, async () => {
-                    const page = await newNonrandomE2EPage({ html });
-                    const element = await page.find('gux-form-field-file');
-                    const elementShadowDom = await element.find('pierce/.gux-form-field-container');
-                    expect(element.outerHTML).toMatchSnapshot();
-                    expect(elementShadowDom).toMatchSnapshot();
-                });
-                it(`should be accessible (${index + 1})`, async () => {
-                    const page = await newSparkE2EPage({ html });
-                    await a11yCheck(page, axeExclusions);
-                });
-            });
-        });
-        describe('input attributes', () => {
-            ['', 'disabled', 'required'].forEach((inputAttribute, index) => {
-                const html = `
-        <gux-form-field-file>
-        <label slot="label">Upload a profile picture</label>
-        <input
-          slot="input"
-          type="file"
-          id="avatar"
-          name="avatar"
-          accept="image/png, image/jpeg"
-          ${inputAttribute}
-        />
-      </gux-form-field-file>
-        `;
-                it(`should render component as expected (${index + 1})`, async () => {
-                    const page = await newNonrandomE2EPage({ html });
-                    const element = await page.find('gux-form-field-file');
-                    const elementShadowDom = await element.find('pierce/.gux-form-field-container');
-                    expect(element.outerHTML).toMatchSnapshot();
-                    expect(elementShadowDom).toMatchSnapshot();
-                });
-                it(`should be accessible (${index + 1})`, async () => {
-                    const page = await newSparkE2EPage({ html });
-                    await a11yCheck(page, axeExclusions);
-                });
-            });
-        });
-        describe('help', () => {
-            const html = `
-      <gux-form-field-file>
-      <label slot="label">Upload a profile picture</label>
-      <input
-        slot="input"
-        type="file"
-        id="avatar"
-        name="avatar"
-        accept="image/png, image/jpeg"
-      />
-      <span slot="help">This is a help message </span>
-    </gux-form-field-file>
-      `;
-            it('should render component as expected', async () => {
-                const page = await newNonrandomE2EPage({ html });
-                const element = await page.find('gux-form-field-file');
-                const elementShadowDom = await element.find('pierce/.gux-form-field-container');
-                expect(element.outerHTML).toMatchSnapshot();
-                expect(elementShadowDom).toMatchSnapshot();
-            });
-            it('should be accessible', async () => {
-                const page = await newSparkE2EPage({ html });
-                await a11yCheck(page, axeExclusions);
-            });
-        });
-    });
-});