@ionic/core 8.2.3-dev.11718879673.1a3f486b → 8.2.3-dev.11719439159.152ff050

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

@@ -1,123 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import AxeBuilder from "@axe-core/playwright";
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], palettes: ['dark'] }).forEach(({ config, screenshot, title }) => {
-    test.describe(title('item: dark palette'), () => {
-        /**
-         * This test was originally created to ensure the item border has sufficient
-         * contrast. We don't use an Axe test here because Axe not warn about color
-         * contrast on the item borders.
-         */
-        test('borders should have sufficient contrast', async ({ page }) => {
-            test.info().annotations.push({
-                type: 'issue',
-                description: 'https://github.com/ionic-team/ionic-framework/issues/29386',
-            });
-            await page.setContent(`
-        <ion-list>
-          <ion-item>Item</ion-item>
-          <ion-item>Item</ion-item>
-        </ion-list>
-      `, config);
-            const list = page.locator('ion-list');
-            await expect(list).toHaveScreenshot(screenshot(`item-dark`));
-        });
-    });
-});
-configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
-    test.describe(title('item: axe'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.goto(`/src/components/item/test/a11y`, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-        test('should reflect aria-label', async ({ page }) => {
-            await page.setContent(`
-        <ion-item id="item-1" aria-label="test"></ion-item>
-        <ion-item id="item-2" aria-label="test" button="true"></ion-item>
-      `, config);
-            const item1 = page.locator('#item-1 .item-native');
-            const item2 = page.locator('#item-2 .item-native');
-            expect(await item1.getAttribute('aria-label')).toEqual('test');
-            expect(await item2.getAttribute('aria-label')).toEqual('test');
-        });
-    });
-    test.describe(title('item: font scaling'), () => {
-        test('should scale text on larger font sizes', async ({ page }) => {
-            await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-item>
-          <ion-label>Item</ion-label>
-        </ion-item>
-      `, config);
-            const item = page.locator('ion-item');
-            await expect(item).toHaveScreenshot(screenshot(`item-scale`));
-        });
-        test('should scale slotted icons on larger font sizes', async ({ page }) => {
-            await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-item>
-          <ion-icon slot="start" name="star"></ion-icon>
-          <ion-label>Item</ion-label>
-          <ion-icon slot="end" name="flag"></ion-icon>
-        </ion-item>
-      `, config);
-            const item = page.locator('ion-item');
-            await expect(item).toHaveScreenshot(screenshot(`item-icons-scale`));
-        });
-        test('should scale detail icon on larger font sizes', async ({ page }) => {
-            await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-item detail="true">
-          <ion-label>Item</ion-label>
-        </ion-item>
-      `, config);
-            const item = page.locator('ion-item');
-            await expect(item).toHaveScreenshot(screenshot(`item-detail-icon-scale`));
-        });
-        test('should scale buttons in an item on larger font sizes', async ({ page }) => {
-            await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-list>
-          <ion-item>
-            <ion-label>Item</ion-label>
-            <ion-button>Default</ion-button>
-          </ion-item>
-          <ion-item>
-            <ion-label>Item</ion-label>
-            <ion-button size="small">Small</ion-button>
-          </ion-item>
-          <ion-item>
-            <ion-label>Item</ion-label>
-            <ion-button size="large">Large</ion-button>
-          </ion-item>
-        </ion-list>
-      `, config);
-            const list = page.locator('ion-list');
-            await expect(list).toHaveScreenshot(screenshot(`item-buttons-scale`));
-        });
-    });
-});

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

@@ -1,48 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { newSpecPage } from "@stencil/core/testing";
-import { List } from "../../../list/list";
-import { RadioGroup } from "../../../radio-group/radio-group";
-import { Radio } from "../../../radio/radio";
-import { Item } from "../../item";
-describe('ion-item', () => {
-    it('should not have a role when used without list', async () => {
-        const page = await newSpecPage({
-            components: [Item],
-            html: `<ion-item>Hello World</ion-item>`,
-        });
-        const item = page.body.querySelector('ion-item');
-        expect(item.getAttribute('role')).toBe(null);
-    });
-    it('should have a listitem role when used inside list', async () => {
-        const page = await newSpecPage({
-            components: [Item, List],
-            html: `
-        <ion-list>
-          <ion-item>
-            Hello World
-          </ion-item>
-        </ion-list>
-      `,
-        });
-        const item = page.body.querySelector('ion-item');
-        expect(item.getAttribute('role')).toBe('listitem');
-    });
-    it('should not have a role when used inside radio group and list', async () => {
-        const page = await newSpecPage({
-            components: [Radio, RadioGroup, Item, List],
-            html: `
-        <ion-list>
-          <ion-radio-group value="a">
-            <ion-item>
-              <ion-radio value="other-value" aria-label="my radio"></ion-radio>
-            </ion-item>
-          </ion-radio-group>
-        </ion-list>
-      `,
-        });
-        const item = page.body.querySelector('ion-item');
-        expect(item.getAttribute('role')).toBe(null);
-    });
-});

package/dist/collection/components/item/test/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/alignment`, config);
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`item-alignment-diff`));
-        });
-    });
-});

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

@@ -1,35 +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: basic'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto(`/src/components/item/test/basic`, config);
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`item-diff`));
-        });
-        /**
-         * This behavior needs to be tested for all modes & directions
-         * Safe padding should stay on the same side when the direction changes
-         */
-        test('should have safe area padding', async ({ page }) => {
-            await page.setContent(`
-        <style>
-          :root {
-            --ion-safe-area-left: 40px;
-            --ion-safe-area-right: 20px;
-          }
-        </style>
-        <ion-list>
-          <ion-item>
-            <ion-label class="ion-text-nowrap"> Single line text that should have ellipses when it doesn't all fit in the item</ion-label>
-          </ion-item>
-        </ion-list>
-      `, config);
-            const list = page.locator('ion-list');
-            await expect(list).toHaveScreenshot(screenshot('item-safe-area'));
-        });
-    });
-});

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

@@ -1,45 +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: buttons'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            /**
-             * This test validates that in iOS mode the arrow indicators are
-             * added to the end of the ion-item row.
-             *
-             * In MD mode, these arrow indicators are not present.
-             */
-            await page.goto(`/src/components/item/test/buttons`, config);
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`item-buttons-diff`));
-        });
-    });
-});
-configs({ directions: ['ltr'], palettes: ['dark'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('item: buttons dark'), () => {
-        test('should not have visual regressions in dark', async ({ page }) => {
-            test.info().annotations.push({
-                type: 'issue',
-                description: 'https://github.com/ionic-team/ionic-framework/issues/27130',
-            });
-            await page.setContent(`
-        <ion-list>
-          <ion-item button="true">
-            <ion-label>Button Item</ion-label>
-          </ion-item>
-          <ion-item button="true" class="ion-activated">
-            <ion-label>Activated Button Item</ion-label>
-          </ion-item>
-          <ion-item button="true" class="ion-focused">
-            <ion-label>Focused Button Item</ion-label>
-          </ion-item>
-        </ion-list>
-      `, config);
-            const list = page.locator('ion-list');
-            await expect(list).toHaveScreenshot(screenshot(`item-buttons-dark-diff`));
-        });
-    });
-});

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

@@ -1,17 +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 directions
- */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('item: colors'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto(`/src/components/item/test/colors`, config);
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`item-colors-diff`));
-        });
-    });
-});

package/dist/collection/components/item/test/css-variables/item.e2e.js

@@ -1,17 +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 directions
- */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('item: CSS variables'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto(`/src/components/item/test/css-variables`, config);
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`item-css-vars-diff`));
-        });
-    });
-});

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

@@ -1,17 +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 directions
- */
-configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('item: disabled state'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto(`/src/components/item/test/disabled`, config);
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`item-disabled-diff`));
-        });
-    });
-});

package/dist/collection/components/item/test/dividers/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: dividers'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto(`/src/components/item/test/dividers`, config);
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`item-dividers-diff`));
-        });
-    });
-});

package/dist/collection/components/item/test/groups/item.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('item: groups'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto(`/src/components/item/test/groups`, config);
-            // Since the list is dynamically created, we need to wait for it to be rendered
-            await page.waitForChanges();
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`item-groups-diff`));
-        });
-    });
-});

package/dist/collection/components/item/test/icons/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: icons'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto(`/src/components/item/test/icons`, config);
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`item-icons-diff`));
-        });
-    });
-});

package/dist/collection/components/item/test/images/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: images'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto(`/src/components/item/test/images`, config);
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`item-images-diff`));
-        });
-    });
-});

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

@@ -1,199 +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: inputs'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto(`/src/components/item/test/inputs`, config);
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`item-inputs`));
-        });
-    });
-});
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('disabled state rendering'), () => {
-        let ionPopoverDidPresent;
-        let ionPopoverDidDismiss;
-        let popover;
-        test.beforeEach(async ({ page }) => {
-            await page.goto(`/src/components/item/test/inputs`, config);
-            ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
-            ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
-            popover = page.locator('ion-popover#optionsPopover');
-        });
-        test('disabled controls should not have visual regressions', async ({ page }) => {
-            await page.click('#popover-trigger');
-            await ionPopoverDidPresent.next();
-            await page.click('#btnDisabled');
-            await page.waitForChanges();
-            await popover.evaluateHandle((el) => el.dismiss());
-            await ionPopoverDidDismiss.next();
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`item-inputs-disabled`));
-        });
-    });
-});
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-    test.describe(title('form data'), () => {
-        let ionPopoverDidPresent;
-        let ionPopoverDidDismiss;
-        let formData;
-        let popover;
-        test.beforeEach(async ({ page }) => {
-            await page.goto(`/src/components/item/test/inputs`, config);
-            ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
-            ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
-            formData = await page.spyOnEvent('formData');
-            popover = page.locator('ion-popover#optionsPopover');
-        });
-        test('initial form data should be empty', async ({ page }) => {
-            await page.click('#submit');
-            await formData.next();
-            expect(formData).toHaveReceivedEventDetail({
-                input: '',
-                textarea: '',
-                toggle: '',
-                checkbox: '',
-                select: '',
-                datetime: '2022-04-01T10:00',
-                range: '10',
-            });
-        });
-        test('form controls have some value', async ({ page }) => {
-            await page.click('#popover-trigger');
-            await ionPopoverDidPresent.next();
-            await page.click('#btnSomeValue');
-            await page.waitForChanges();
-            await popover.evaluateHandle((el) => el.dismiss());
-            await ionPopoverDidDismiss.next();
-            await page.click('#submit');
-            await formData.next();
-            expect(formData).toHaveReceivedEventDetail({
-                input: 'Some value',
-                textarea: 'Some value',
-                toggle: 'on',
-                checkbox: 'on',
-                select: '2',
-                datetime: '2022-04-01T10:00',
-                range: '20',
-            });
-        });
-        test('form control values set to be empty', async ({ page }) => {
-            await page.click('#popover-trigger');
-            await ionPopoverDidPresent.next();
-            await page.click('#btnEmptyValue');
-            await page.waitForChanges();
-            await popover.evaluateHandle((el) => el.dismiss());
-            await ionPopoverDidDismiss.next();
-            await page.click('#submit');
-            await formData.next();
-            expect(formData).toHaveReceivedEventDetail({
-                input: '',
-                textarea: '',
-                toggle: '',
-                checkbox: '',
-                select: '',
-                datetime: '',
-                range: '0',
-            });
-        });
-        test('form control values set to null', async ({ page }) => {
-            await page.click('#popover-trigger');
-            await ionPopoverDidPresent.next();
-            await page.click('#btnNullValue');
-            await page.waitForChanges();
-            await popover.evaluateHandle((el) => el.dismiss());
-            await ionPopoverDidDismiss.next();
-            await page.click('#submit');
-            await formData.next();
-            expect(formData).toHaveReceivedEventDetail({
-                input: '',
-                textarea: '',
-                toggle: '',
-                checkbox: '',
-                select: '',
-                datetime: '',
-                range: '0',
-            });
-        });
-        test('form control values set to undefined', async ({ page }) => {
-            await page.click('#popover-trigger');
-            await ionPopoverDidPresent.next();
-            await page.click('#btnUndefinedValue');
-            await page.waitForChanges();
-            await popover.evaluateHandle((el) => el.dismiss());
-            await ionPopoverDidDismiss.next();
-            await page.click('#submit');
-            await formData.next();
-            expect(formData).toHaveReceivedEventDetail({
-                input: '',
-                textarea: '',
-                toggle: '',
-                checkbox: '',
-                select: '',
-                datetime: '',
-                range: '0',
-            });
-        });
-        test('should not have form data when controls are disabled', async ({ page }) => {
-            await page.click('#popover-trigger');
-            await ionPopoverDidPresent.next();
-            await page.click('#btnSomeValue');
-            await page.click('#btnDisabled');
-            await page.waitForChanges();
-            await popover.evaluateHandle((el) => el.dismiss());
-            await ionPopoverDidDismiss.next();
-            await page.click('#submit');
-            await formData.next();
-            expect(formData).toHaveReceivedEventDetail({});
-        });
-    });
-});
-/**
- * This behavior does not vary across directions
- */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('item: inputs'), () => {
-        test('should not shrink the width of a div next to a checkbox, radio, select or toggle', async ({ page, }, testInfo) => {
-            testInfo.annotations.push({
-                type: 'issue',
-                description: 'https://github.com/ionic-team/ionic-framework/issues/29319',
-            });
-            await page.setContent(`
-        <style>
-          .box {
-            background: lightgreen;
-
-            width: 60px;
-            height: 60px;
-          }
-        </style>
-
-        <ion-list lines="none">
-          <ion-item>
-            <div class="box"></div>
-            <ion-checkbox>Checkbox</ion-checkbox>
-          </ion-item>
-          <ion-item>
-            <div class="box"></div>
-            <ion-radio>Radio</ion-radio>
-          </ion-item>
-          <ion-item>
-            <div class="box"></div>
-            <ion-select label="Select">
-              <ion-select-option>Option</ion-select-option>
-            </ion-select>
-          </ion-item>
-          <ion-item>
-            <div class="box"></div>
-            <ion-toggle>Toggle</ion-toggle>
-          </ion-item>
-        </ion-list>
-      `, config);
-            const list = page.locator('ion-list');
-            await expect(list).toHaveScreenshot(screenshot(`item-inputs-div-with-inputs`));
-        });
-    });
-});

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

@@ -1,20 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
-import { Item } from "../item";
-describe('item', () => {
-    it('should change focusable option after switching button option status', async () => {
-        const page = await newSpecPage({
-            components: [Item],
-            template: () => h("ion-item", { button: false }),
-        });
-        const item = page.body.querySelector('ion-item');
-        // Change button attribute to true
-        item.setAttribute('button', 'true');
-        await page.waitForChanges();
-        // Check if it has the expected class that gives the focused styles to the item element
-        expect(item).toHaveClass('ion-focusable');
-    });
-});

package/dist/collection/components/item/test/lines/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: lines'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto(`/src/components/item/test/lines`, config);
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`item-lines-diff`));
-        });
-    });
-});

package/dist/collection/components/item/test/media/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: media'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto(`/src/components/item/test/media`, config);
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`item-media-diff`));
-        });
-    });
-});

package/dist/collection/components/item/test/reorder/item.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('item: reorder'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto(`/src/components/item/test/reorder`, config);
-            await page.setIonViewport();
-            await page.click('text=Edit');
-            await page.waitForChanges();
-            await expect(page).toHaveScreenshot(screenshot(`item-reorder-diff`));
-        });
-    });
-});