voyager-ionic-core 7.7.3 → 8.0.0-beta.1

package/dist/collection/components/input/test/item/input.spec.js

@@ -1,24 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { newSpecPage } from "@stencil/core/testing";
-import { Item } from "../../../item/item";
-import { Input } from "../../input";
-it('should render as modern when label is set asynchronously', async () => {
-    const page = await newSpecPage({
-        components: [Item, Input],
-        html: `
-      <ion-item>
-        <ion-input></ion-input>
-      </ion-item>
-    `,
-    });
-    const input = page.body.querySelector('ion-input');
-    // Template should be modern
-    expect(input.classList.contains('legacy-input')).toBe(false);
-    // Update the input label
-    input.label = 'New label';
-    await page.waitForChanges();
-    // Template should still be modern
-    expect(input.classList.contains('legacy-input')).toBe(false);
-});

package/dist/collection/components/input/test/legacy/a11y/input.e2e.js

@@ -1,28 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
-    test.describe(title('input: a11y'), () => {
-        test('does not set a default aria-labelledby when there is not a neighboring ion-label', async ({ page }) => {
-            await page.setContent('<ion-input legacy="true"></ion-input>', config);
-            const input = page.locator('ion-input > input');
-            const ariaLabelledBy = await input.getAttribute('aria-labelledby');
-            await expect(ariaLabelledBy).toBe(null);
-        });
-        test('set a default aria-labelledby when a neighboring ion-label exists', async ({ page }) => {
-            await page.setContent(`
-          <ion-item>
-            <ion-label>A11y Test</ion-label>
-            <ion-input></ion-input>
-          </ion-item>
-        `, config);
-            const label = page.locator('ion-label');
-            const input = page.locator('ion-input > input');
-            const ariaLabelledBy = await input.getAttribute('aria-labelledby');
-            const labelId = await label.getAttribute('id');
-            await expect(ariaLabelledBy).toBe(labelId);
-        });
-    });
-});

package/dist/collection/components/input/test/legacy/basic/input.e2e.js

@@ -1,181 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../../utils/test/playwright/index";
-configs().forEach(({ title, screenshot, config }) => {
-    test.describe(title('input: basic'), () => {
-        test.describe('input with overflow', () => {
-            test('should not have visual regressions', async ({ page }) => {
-                await page.setContent(`
-          <ion-content>
-            <ion-list>
-              <ion-item>
-                <ion-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges" legacy="true"></ion-input>
-              </ion-item>
-            </ion-list>
-          </ion-content>
-        `, config);
-                const item = page.locator('ion-item');
-                // Validates the display of an input where text extends off the edge of the component.
-                await expect(item).toHaveScreenshot(screenshot(`input-with-text-overflow`));
-            });
-        });
-        test.describe('input with placeholder', () => {
-            test('should not have visual regressions', async ({ page }) => {
-                await page.setContent(`
-        <ion-content>
-          <ion-list>
-            <ion-item>
-              <ion-input placeholder="Placeholder" legacy="true"></ion-input>
-            </ion-item>
-          </ion-list>
-        </ion-content>
-        `, config);
-                const item = page.locator('ion-item');
-                // Validates the display of an input with a placeholder.
-                await expect(item).toHaveScreenshot(screenshot(`input-with-placeholder`));
-            });
-        });
-        test.describe('input disabled', () => {
-            test('should not have visual regressions', async ({ page }) => {
-                await page.setContent(`
-        <ion-content>
-          <ion-list>
-            <ion-item>
-              <ion-input value="Input disabled" disabled legacy="true"></ion-input>
-            </ion-item>
-          </ion-list>
-        </ion-content>
-        `, config);
-                const item = page.locator('ion-item');
-                // Validates the display of an input in a disabled state.
-                await expect(item).toHaveScreenshot(screenshot(`input-disabled`));
-            });
-        });
-        test.describe('input with lines="full"', () => {
-            test('should not have visual regressions', async ({ page }) => {
-                await page.setContent(`
-        <ion-content>
-          <ion-list>
-            <ion-item lines="full">
-              <ion-input placeholder="Full" legacy="true"></ion-input>
-            </ion-item>
-          </ion-list>
-        </ion-content>
-        `, config);
-                const item = page.locator('ion-item');
-                const input = page.locator('ion-input');
-                // Validates the display of an input with an ion-item using lines="full".
-                await expect(item).toHaveScreenshot(screenshot(`input-with-lines-full`));
-                await input.click();
-                // Verifies that the parent item receives .item-has-focus when the input is focused.
-                await expect(item).toHaveClass(/item-has-focus/);
-                // Validates the display of an input with an ion-item using lines="full" when focused.
-                await expect(item).toHaveScreenshot(screenshot(`input-with-lines-full-focused`));
-            });
-        });
-        test.describe('input with lines="inset"', () => {
-            test('should not have visual regressions', async ({ page }) => {
-                await page.setContent(`
-        <ion-content>
-          <ion-list>
-            <ion-item lines="inset">
-              <ion-input placeholder="Inset" legacy="true"></ion-input>
-            </ion-item>
-          </ion-list>
-        </ion-content>
-        `, config);
-                const item = page.locator('ion-item');
-                const input = page.locator('ion-input');
-                // Validates the display of an input with an ion-item using lines="inset".
-                await expect(item).toHaveScreenshot(screenshot(`input-with-lines-inset`));
-                await input.click();
-                // Verifies that the parent item receives .item-has-focus when the input is focused.
-                await expect(item).toHaveClass(/item-has-focus/);
-                // Validates the display of an input with an ion-item using lines="inset" when focused.
-                await expect(item).toHaveScreenshot(screenshot(`input-with-lines-inset-focused`));
-            });
-        });
-        test.describe('input with lines="none"', () => {
-            test('should not have visual regressions', async ({ page }) => {
-                await page.setContent(`
-        <ion-content>
-          <ion-list>
-            <ion-item lines="none">
-              <ion-input placeholder="None" legacy="true"></ion-input>
-            </ion-item>
-          </ion-list>
-        </ion-content>
-        `, config);
-                const item = page.locator('ion-item');
-                const input = page.locator('ion-input');
-                // Validates the display of an input with an ion-item using lines="none".
-                await expect(item).toHaveScreenshot(screenshot(`input-with-lines-none`));
-                await input.click();
-                // Verifies that the parent item receives .item-has-focus when the input is focused.
-                await expect(item).toHaveClass(/item-has-focus/);
-                // Validates the display of an input with an ion-item using lines="none" when focused.
-                await expect(item).toHaveScreenshot(screenshot(`input-with-lines-none-focused`));
-            });
-        });
-        test.describe('input with clear button', () => {
-            test('should not have visual regressions', async ({ page }) => {
-                await page.setContent(`
-        <ion-content>
-          <ion-list>
-            <ion-item>
-              <ion-label>Clear Input</ion-label>
-              <ion-input
-                clear-input
-                value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"
-                legacy="true"
-              ></ion-input>
-            </ion-item>
-          </ion-list>
-        </ion-content>
-        `, config);
-                const item = page.locator('ion-item');
-                // Validates the display of an input with a clear button.
-                await expect(item).toHaveScreenshot(screenshot(`input-with-clear-button`));
-            });
-        });
-    });
-});
-/**
- * This behavior does not vary across modes/directions.
- */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-    test.describe(title('input: clear button'), () => {
-        test('should clear the input when pressed', async ({ page }) => {
-            await page.setContent(`
-        <ion-input value="abc" clear-input="true" legacy="true"></ion-input>
-      `, config);
-            const input = page.locator('ion-input');
-            const clearButton = input.locator('.input-clear-icon');
-            await expect(input).toHaveJSProperty('value', 'abc');
-            await clearButton.click();
-            await page.waitForChanges();
-            await expect(input).toHaveJSProperty('value', '');
-        });
-        /**
-         * Note: This only tests the desktop focus behavior.
-         * Mobile browsers have different restrictions around
-         * focusing inputs, so these platforms should always
-         * be tested when making changes to the focus behavior.
-         */
-        test('should keep the input focused when the clear button is pressed', async ({ page }) => {
-            await page.setContent(`
-        <ion-input value="abc" clear-input="true" legacy="true"></ion-input>
-      `, config);
-            const input = page.locator('ion-input');
-            const nativeInput = input.locator('input');
-            const clearButton = input.locator('.input-clear-icon');
-            await input.click();
-            await expect(nativeInput).toBeFocused();
-            await clearButton.click();
-            await page.waitForChanges();
-            await expect(nativeInput).toBeFocused();
-        });
-    });
-});

package/dist/collection/components/input/test/legacy/clear-on-edit/input.e2e.js

@@ -1,55 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../../utils/test/playwright/index";
-/**
- * This behavior does not vary across modes/directions
- */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-    test.describe(title('input: clearOnEdit'), () => {
-        test('should clear the input on first keystroke of input being focused', async ({ page }) => {
-            await page.setContent(`<ion-input value="some value" clear-on-edit="true"></ion-input>`, config);
-            const input = page.locator('ion-input');
-            await input.click();
-            await input.type('h');
-            expect(await input.evaluate((el) => el.value)).toBe('h');
-            await input.type('ello world');
-            expect(await input.evaluate((el) => el.value)).toBe('hello world');
-        });
-        test('should not clear the input when pressing Enter', async ({ page }) => {
-            await page.setContent(`<ion-input value="some value" clear-on-edit="true"></ion-input>`, config);
-            const input = page.locator('ion-input');
-            await input.click();
-            await page.keyboard.press('Enter');
-            expect(await input.evaluate((el) => el.value)).toBe('some value');
-        });
-        test('should not clear the input if it does not have an initial value when typing', async ({ page }) => {
-            await page.setContent(`<ion-input value="" clear-on-edit="true"></ion-input>`, config);
-            const input = page.locator('ion-input');
-            await input.click();
-            await input.type('hello world');
-            expect(await input.evaluate((el) => el.value)).toBe('hello world');
-        });
-        test('should emit ionChange once on blur', async ({ page }, testInfo) => {
-            testInfo.annotations.push({
-                type: 'issue',
-                description: 'https://ionic-cloud.atlassian.net/browse/FW-2315',
-            });
-            await page.setContent(`<ion-input placeholder="input" clear-on-edit="true"></ion-input>`, config);
-            const ionChangeSpy = await page.spyOnEvent('ionChange');
-            const ionInputSpy = await page.spyOnEvent('ionInput');
-            const input = page.locator('ion-input');
-            const nativeInput = input.locator('input');
-            await nativeInput.type('123', { delay: 100 });
-            expect(ionInputSpy).toHaveReceivedEventTimes(3);
-            await nativeInput.evaluate((el) => el.blur());
-            expect(ionChangeSpy).toHaveReceivedEventTimes(1);
-            await nativeInput.type('a');
-            expect(await input.evaluate((el) => el.value)).toBe('a');
-            await nativeInput.evaluate((el) => el.blur());
-            expect(ionInputSpy).toHaveReceivedEventTimes(5);
-            expect(ionChangeSpy).toHaveReceivedEventTimes(2);
-        });
-    });
-});

package/dist/collection/components/input/test/legacy/input-events.e2e.js

@@ -1,71 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
-    test.describe(title('input: events: ionChange'), () => {
-        test.describe('when the input is blurred', () => {
-            test.describe('should emit', () => {
-                test('if the value has changed', async ({ page }) => {
-                    await page.setContent(`<ion-input></ion-input>`, config);
-                    const nativeInput = page.locator('ion-input input');
-                    const ionChangeSpy = await page.spyOnEvent('ionChange');
-                    await nativeInput.type('new value', { delay: 100 });
-                    // Value change is not emitted until the control is blurred.
-                    await nativeInput.evaluate((e) => e.blur());
-                    await ionChangeSpy.next();
-                    expect(ionChangeSpy).toHaveReceivedEventDetail({ value: 'new value', event: { isTrusted: true } });
-                });
-            });
-            test.describe('should not emit', () => {
-                test('if the value has not changed', async ({ page }) => {
-                    await page.setContent(`<ion-input value="" clear-input="true"></ion-input>`, config);
-                    const ionChangeSpy = await page.spyOnEvent('ionChange');
-                    const nativeInput = page.locator('ion-input input');
-                    await nativeInput.type('new value', { delay: 100 });
-                    await page.click('ion-input .input-clear-icon');
-                    await nativeInput.evaluate((e) => e.blur());
-                    expect(ionChangeSpy.events.length).toBe(0);
-                });
-                test('if the value is set programmatically', async ({ page }) => {
-                    await page.setContent(`<ion-input></ion-input>`, config);
-                    const input = page.locator('ion-input');
-                    const ionChangeSpy = await page.spyOnEvent('ionChange');
-                    await input.evaluate((el) => {
-                        el.value = 'new value';
-                    });
-                    expect(ionChangeSpy.events.length).toBe(0);
-                    // Update the value again to make sure it doesn't emit a second time
-                    await input.evaluate((el) => {
-                        el.value = 'new value 2';
-                    });
-                    expect(ionChangeSpy.events.length).toBe(0);
-                });
-            });
-        });
-    });
-});
-/**
- * This behavior does not vary across modes/directions
- */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-    test.describe(title('input: events: ionInput'), () => {
-        test('should emit when the input is cleared', async ({ page }) => {
-            await page.setContent(`<ion-input value="some value" clear-input="true"></ion-input>`, config);
-            const ionInputSpy = await page.spyOnEvent('ionInput');
-            await page.click('ion-input .input-clear-icon');
-            expect(ionInputSpy).toHaveReceivedEventDetail({ value: '', event: { isTrusted: true } });
-        });
-        test('should emit when the input is cleared from the keyboard', async ({ page }) => {
-            await page.setContent(`<ion-input value="some value" clear-on-edit="true"></ion-input>`, config);
-            const input = page.locator('ion-input');
-            const ionInputSpy = await page.spyOnEvent('ionInput');
-            await input.click();
-            await page.keyboard.press('Backspace');
-            expect(await input.evaluate((el) => el.value)).toBe('');
-            expect(ionInputSpy).toHaveReceivedEventTimes(1);
-            expect(ionInputSpy).toHaveReceivedEventDetail({ value: '', event: { isTrusted: true } });
-        });
-    });
-});

package/dist/collection/components/input/test/legacy/masking/input.e2e.js

@@ -1,26 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../../utils/test/playwright/index";
-/**
- * This behavior does not vary across modes/directions
- */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-    test.describe(title('input: masking'), () => {
-        test.beforeEach(async ({ page }) => {
-            await page.goto('/src/components/input/test/legacy/masking', config);
-        });
-        test('should filter out spaces', async ({ page }) => {
-            const ionInput = await page.spyOnEvent('ionInput');
-            const input = page.locator('#inputTrimmed');
-            await input.click();
-            // Playwright types this in one character at a time.
-            await page.keyboard.type('A B C', { delay: 100 });
-            await ionInput.next();
-            // ionInput is called for each character.
-            await expect(ionInput).toHaveReceivedEventTimes(5);
-            await expect(input).toHaveJSProperty('value', 'ABC');
-        });
-    });
-});

package/dist/collection/components/input/test/legacy/spec/input.e2e.js

@@ -1,16 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../../utils/test/playwright/index";
-configs().forEach(({ title, screenshot, config }) => {
-    test.describe(title('input: spec'), () => {
-        test.beforeEach(async ({ page }) => {
-            await page.goto('/src/components/input/test/legacy/spec', config);
-        });
-        test('should not have visual regressions', async ({ page }) => {
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`input-spec-diff`));
-        });
-    });
-});

package/dist/collection/components/item/test/counter/item.e2e.js

@@ -1,49 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-configs().forEach(({ title, screenshot, config }) => {
-    test.describe(title('counter: rendering'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto('/src/components/item/test/counter', config);
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`item-counter-diff`));
-        });
-    });
-});
-/**
- * This behavior does not vary across modes/directions
- */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-    test.describe(title('item: counter'), () => {
-        test.describe('custom formatter', () => {
-            test.beforeEach(async ({ page }) => {
-                await page.goto('/src/components/item/test/counter', config);
-            });
-            test('should format on load', async ({ page }) => {
-                const itemCounter = page.locator('#customFormatter .item-counter');
-                expect(await itemCounter.textContent()).toBe('20 characters left');
-            });
-            test('should format on input', async ({ page }) => {
-                const input = page.locator('#customFormatter ion-input');
-                await page.click('#customFormatter ion-input input');
-                await input.type('abcde');
-                await page.waitForChanges();
-                const itemCounter = page.locator('#customFormatter .item-counter');
-                expect(await itemCounter.textContent()).toBe('15 characters left');
-            });
-            test('should format after changing the counterFormatter', async ({ page }) => {
-                const itemCounter = page.locator('#customFormatter .item-counter');
-                expect(await itemCounter.textContent()).toBe('20 characters left');
-                await page.$eval('#customFormatter', (el) => {
-                    el.counterFormatter = () => {
-                        return 'test label';
-                    };
-                });
-                await page.waitForChanges();
-                expect(await itemCounter.textContent()).toBe('test label');
-            });
-        });
-    });
-});

package/dist/collection/components/item/test/highlight/item.e2e.js

@@ -1,14 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-configs().forEach(({ title, screenshot, config }) => {
-    test.describe(title('item: highlight'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto(`/src/components/item/test/highlight`, config);
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`item-highlight-diff`));
-        });
-    });
-});

package/dist/collection/components/item/test/legacy/alignment/item.e2e.js

@@ -1,14 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../../utils/test/playwright/index";
-configs().forEach(({ title, screenshot, config }) => {
-    test.describe(title('item: alignment'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto(`/src/components/item/test/legacy/alignment`, config);
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`item-alignment-diff`));
-        });
-    });
-});

package/dist/collection/components/item/test/legacy/fill/item.e2e.js

@@ -1,14 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../../utils/test/playwright/index";
-configs().forEach(({ title, screenshot, config }) => {
-    test.describe(title('item: fill'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto(`/src/components/item/test/legacy/fill`, config);
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`item-fill-diff`));
-        });
-    });
-});

package/dist/collection/components/item/test/legacy/form/item.e2e.js

@@ -1,14 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../../utils/test/playwright/index";
-configs().forEach(({ title, screenshot, config }) => {
-    test.describe(title('item: form'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto(`/src/components/item/test/legacy/form`, config);
-            await page.setIonViewport({ resizeViewportWidth: true });
-            await expect(page).toHaveScreenshot(screenshot(`item-form-diff`));
-        });
-    });
-});

package/dist/collection/components/modal/test/a11y/modal.spec.js

@@ -1,22 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { newSpecPage } from "@stencil/core/testing";
-import { Modal } from "../../modal";
-describe('modal: a11y', () => {
-    it('should allow for custom role', async () => {
-        /**
-         * Note: This example should not be used in production.
-         * This only serves to check that `role` can be customized.
-         */
-        const page = await newSpecPage({
-            components: [Modal],
-            html: `
-        <ion-modal role="alertdialog"></ion-modal>
-      `,
-        });
-        const modal = page.body.querySelector('ion-modal');
-        const modalWrapper = modal.shadowRoot.querySelector('.modal-wrapper');
-        await expect(modalWrapper.getAttribute('role')).toBe('alertdialog');
-    });
-});