@ionic/core 7.5.6-dev.11700169088.140f3e6a → 7.5.6-dev.11700492285.1581ed02

package/dist/collection/components/datetime/test/state.spec.js

@@ -0,0 +1,114 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { getCalendarDayState, isDayDisabled, isNextMonthDisabled, isPrevMonthDisabled } from "../utils/state";
+describe('getCalendarDayState()', () => {
+  it('should return correct state', () => {
+    const refA = { month: 1, day: 1, year: 2019 };
+    const refB = { month: 1, day: 1, year: 2021 };
+    const refC = { month: 1, day: 1, year: 2023 };
+    expect(getCalendarDayState('en-US', refA, refB, refC)).toEqual({
+      isActive: false,
+      isToday: false,
+      disabled: false,
+      ariaSelected: null,
+      ariaLabel: 'Tuesday, January 1',
+      text: '1',
+    });
+    expect(getCalendarDayState('en-US', refA, refA, refC)).toEqual({
+      isActive: true,
+      isToday: false,
+      disabled: false,
+      ariaSelected: 'true',
+      ariaLabel: 'Tuesday, January 1',
+      text: '1',
+    });
+    expect(getCalendarDayState('en-US', refA, refB, refA)).toEqual({
+      isActive: false,
+      isToday: true,
+      disabled: false,
+      ariaSelected: null,
+      ariaLabel: 'Today, Tuesday, January 1',
+      text: '1',
+    });
+    expect(getCalendarDayState('en-US', refA, refA, refA)).toEqual({
+      isActive: true,
+      isToday: true,
+      disabled: false,
+      ariaSelected: 'true',
+      ariaLabel: 'Today, Tuesday, January 1',
+      text: '1',
+    });
+    expect(getCalendarDayState('en-US', refA, refA, refA, undefined, undefined, [1])).toEqual({
+      isActive: true,
+      isToday: true,
+      disabled: false,
+      ariaSelected: 'true',
+      ariaLabel: 'Today, Tuesday, January 1',
+      text: '1',
+    });
+    expect(getCalendarDayState('en-US', refA, refA, refA, undefined, undefined, [2])).toEqual({
+      isActive: true,
+      isToday: true,
+      disabled: true,
+      ariaSelected: 'true',
+      ariaLabel: 'Today, Tuesday, January 1',
+      text: '1',
+    });
+  });
+});
+describe('isDayDisabled()', () => {
+  it('should correctly return whether or not a day is disabled', () => {
+    const refDate = { month: 5, day: 12, year: 2021 };
+    expect(isDayDisabled(refDate, undefined, undefined)).toEqual(false);
+    expect(isDayDisabled(refDate, { month: 5, day: 12, year: 2021 }, undefined)).toEqual(false);
+    expect(isDayDisabled(refDate, { month: 6, day: 12, year: 2021 }, undefined)).toEqual(true);
+    expect(isDayDisabled(refDate, { month: 5, day: 13, year: 2022 }, undefined)).toEqual(true);
+    expect(isDayDisabled(refDate, undefined, { month: 5, day: 12, year: 2021 })).toEqual(false);
+    expect(isDayDisabled(refDate, undefined, { month: 4, day: 12, year: 2021 })).toEqual(true);
+    expect(isDayDisabled(refDate, undefined, { month: 5, day: 11, year: 2021 })).toEqual(true);
+  });
+});
+describe('isPrevMonthDisabled()', () => {
+  it('should return true', () => {
+    // Date month is before min month, in the same year
+    expect(isPrevMonthDisabled({ month: 5, year: 2021, day: null }, { month: 6, year: 2021, day: null })).toEqual(true);
+    // Date month and year is the same as min month and year
+    expect(isPrevMonthDisabled({ month: 1, year: 2021, day: null }, { month: 1, year: 2021, day: null })).toEqual(true);
+    // Date year is the same as min year (month not provided)
+    expect(isPrevMonthDisabled({ month: 1, year: 2021, day: null }, { year: 2021, month: null, day: null })).toEqual(true);
+    // Date year is less than the min year (month not provided)
+    expect(isPrevMonthDisabled({ month: 5, year: 2021, day: null }, { year: 2022, month: null, day: null })).toEqual(true);
+    // Date is above the maximum bounds and the previous month does not does not fall within the
+    // min-max range.
+    expect(isPrevMonthDisabled({ month: 12, year: 2021, day: null }, { month: 9, year: 2021, day: null }, { month: 10, year: 2021, day: null })).toEqual(true);
+    // Date is above the maximum bounds and a year ahead of the max range. The previous month/year
+    // does not fall within the min-max range.
+    expect(isPrevMonthDisabled({ month: 1, year: 2022, day: null }, { month: 9, year: 2021, day: null }, { month: 10, year: 2021, day: null })).toEqual(true);
+  });
+  it('should return false', () => {
+    // No min range provided
+    expect(isPrevMonthDisabled({ month: 12, year: 2021, day: null })).toEqual(false);
+    // Date year is the same as min year,
+    // but can navigate to a previous month without reducing the year.
+    expect(isPrevMonthDisabled({ month: 12, year: 2021, day: null }, { year: 2021, month: null, day: null })).toEqual(false);
+    expect(isPrevMonthDisabled({ month: 2, year: 2021, day: null }, { year: 2021, month: null, day: null })).toEqual(false);
+  });
+});
+describe('isNextMonthDisabled()', () => {
+  it('should return true', () => {
+    // Date month is the same as max month (in the same year)
+    expect(isNextMonthDisabled({ month: 10, year: 2021, day: null }, { month: 10, year: 2021, day: null })).toEqual(true);
+    // Date month is after the max month (in the same year)
+    expect(isNextMonthDisabled({ month: 10, year: 2021, day: null }, { month: 9, year: 2021, day: null })).toEqual(true);
+    // Date year is after the max month and year
+    expect(isNextMonthDisabled({ month: 10, year: 2022, day: null }, { month: 12, year: 2021, day: null })).toEqual(true);
+  });
+  it('should return false', () => {
+    // No max range provided
+    expect(isNextMonthDisabled({ month: 10, year: 2021, day: null })).toBe(false);
+    // Date month is before max month and is the previous month,
+    // so that navigating the next month would re-enter the max range
+    expect(isNextMonthDisabled({ month: 10, year: 2021, day: null }, { month: 11, year: 2021, day: null })).toEqual(false);
+  });
+});

package/dist/collection/components/infinite-scroll-content/test/infinite-scroll-content.spec.js

@@ -0,0 +1,37 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { config } from "../../../global/config";
+import { InfiniteScrollContent } from "../infinite-scroll-content";
+describe('infinite-scroll-content: custom html', () => {
+  it('should not allow for custom html by default', async () => {
+    const page = await newSpecPage({
+      components: [InfiniteScrollContent],
+      html: `<ion-infinite-scroll-content loading-text="<button class='custom-html'>Custom Text</button>"></ion-infinite-scroll-content>`,
+    });
+    const content = page.body.querySelector('.infinite-loading-text');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).toBe(null);
+  });
+  it('should allow for custom html', async () => {
+    config.reset({ innerHTMLTemplatesEnabled: true });
+    const page = await newSpecPage({
+      components: [InfiniteScrollContent],
+      html: `<ion-infinite-scroll-content loading-text="<button class='custom-html'>Custom Text</button>"></ion-infinite-scroll-content>`,
+    });
+    const content = page.body.querySelector('.infinite-loading-text');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).not.toBe(null);
+  });
+  it('should not allow for custom html', async () => {
+    config.reset({ innerHTMLTemplatesEnabled: false });
+    const page = await newSpecPage({
+      components: [InfiniteScrollContent],
+      html: `<ion-infinite-scroll-content loading-text="<button class='custom-html'>Custom Text2</button>"></ion-infinite-scroll-content>`,
+    });
+    const content = page.body.querySelector('.infinite-loading-text');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).toBe(null);
+  });
+});

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

@@ -0,0 +1,85 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Input } from "../input";
+describe('input: rendering', () => {
+  it('should inherit attributes', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: '<ion-input title="my title" tabindex="-1" data-form-type="password"></ion-input>',
+    });
+    const nativeEl = page.body.querySelector('ion-input input');
+    expect(nativeEl.getAttribute('title')).toBe('my title');
+    expect(nativeEl.getAttribute('tabindex')).toBe('-1');
+    expect(nativeEl.getAttribute('data-form-type')).toBe('password');
+  });
+  it('should render bottom content when helper text is defined', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: `<ion-input label="Input" helper-text="Helper Text"></ion-input>`,
+    });
+    const bottomContent = page.body.querySelector('ion-input .input-bottom');
+    expect(bottomContent).not.toBe(null);
+  });
+  it('should render bottom content when helper text is undefined', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: `<ion-input label="Input"></ion-input>`,
+    });
+    const bottomContent = page.body.querySelector('ion-input .input-bottom');
+    expect(bottomContent).toBe(null);
+  });
+  it('should render bottom content when helper text is empty string', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: `<ion-input label="Input" helper-text=""></ion-input>`,
+    });
+    const bottomContent = page.body.querySelector('ion-input .input-bottom');
+    expect(bottomContent).toBe(null);
+  });
+});
+/**
+ * Input uses emulated slots, so the internal
+ * behavior will not exactly match Select's slots.
+ * For example, Input does not render an actual `<slot>` element
+ * internally, so we do not check for that here. Instead,
+ * we check to see which label text is being used.
+ * If Input is updated to use Shadow DOM (and therefore native slots),
+ * then we can update these tests to more closely match the Select tests.
+ **/
+describe('input: label rendering', () => {
+  it('should render label prop if only prop provided', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: `
+        <ion-input label="Label Prop Text"></ion-input>
+      `,
+    });
+    const input = page.body.querySelector('ion-input');
+    const labelText = input.querySelector('.label-text-wrapper');
+    expect(labelText.textContent).toBe('Label Prop Text');
+  });
+  it('should render label slot if only slot provided', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: `
+        <ion-input><div slot="label">Label Slot Text</div></ion-input>
+      `,
+    });
+    const input = page.body.querySelector('ion-input');
+    const labelText = input.querySelector('.label-text-wrapper');
+    expect(labelText.textContent).toBe('Label Slot Text');
+  });
+  it('should render label prop if both prop and slot provided', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: `
+        <ion-input label="Label Prop Text"><div slot="label">Label Slot Text</div></ion-input>
+      `,
+    });
+    const input = page.body.querySelector('ion-input');
+    const labelText = input.querySelector('.label-text-wrapper');
+    expect(labelText.textContent).toBe('Label Prop Text');
+  });
+});

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

@@ -0,0 +1,24 @@
+/*!
+ * (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/item/test/a11y/item.spec.js

@@ -0,0 +1,48 @@
+/*!
+ * (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/loading/test/basic/loading.spec.js

@@ -0,0 +1,16 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { Loading } from "../../loading";
+describe('loading: htmlAttributes inheritance', () => {
+  it('should correctly inherit attributes on host', async () => {
+    const page = await newSpecPage({
+      components: [Loading],
+      template: () => h("ion-loading", { overlayIndex: 1, htmlAttributes: { 'data-testid': 'basic-loading' } }),
+    });
+    const loading = page.body.querySelector('ion-loading');
+    await expect(loading.getAttribute('data-testid')).toBe('basic-loading');
+  });
+});

package/dist/collection/components/loading/test/loading-id.spec.js

@@ -0,0 +1,32 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Loading } from "../loading";
+it('loading should be assigned an incrementing id', async () => {
+  const page = await newSpecPage({
+    components: [Loading],
+    html: `<ion-loading is-open="true"></ion-loading>`,
+  });
+  let loading;
+  loading = page.body.querySelector('ion-loading');
+  expect(loading).not.toBe(null);
+  expect(loading.getAttribute('id')).toBe('ion-overlay-1');
+  // Remove the loading from the DOM
+  loading.remove();
+  await page.waitForChanges();
+  // Create a new loading to verify the id is incremented
+  loading = document.createElement('ion-loading');
+  loading.isOpen = true;
+  page.body.appendChild(loading);
+  await page.waitForChanges();
+  loading = page.body.querySelector('ion-loading');
+  expect(loading.getAttribute('id')).toBe('ion-overlay-2');
+  // Presenting the same loading again should reuse the existing id
+  loading.isOpen = false;
+  await page.waitForChanges();
+  loading.isOpen = true;
+  await page.waitForChanges();
+  loading = page.body.querySelector('ion-loading');
+  expect(loading.getAttribute('id')).toBe('ion-overlay-2');
+});

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

@@ -0,0 +1,37 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { config } from "../../../global/config";
+import { Loading } from "../loading";
+describe('loading: custom html', () => {
+  it('should not allow for custom html by default', async () => {
+    const page = await newSpecPage({
+      components: [Loading],
+      html: `<ion-loading message="<button class='custom-html'>Custom Text</button>"></ion-loading>`,
+    });
+    const content = page.body.querySelector('.loading-content');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).toBe(null);
+  });
+  it('should allow for custom html', async () => {
+    config.reset({ innerHTMLTemplatesEnabled: true });
+    const page = await newSpecPage({
+      components: [Loading],
+      html: `<ion-loading message="<button class='custom-html'>Custom Text</button>"></ion-loading>`,
+    });
+    const content = page.body.querySelector('.loading-content');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).not.toBe(null);
+  });
+  it('should not allow for custom html', async () => {
+    config.reset({ innerHTMLTemplatesEnabled: false });
+    const page = await newSpecPage({
+      components: [Loading],
+      html: `<ion-loading message="<button class='custom-html'>Custom Text</button>"></ion-loading>`,
+    });
+    const content = page.body.querySelector('.loading-content');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).toBe(null);
+  });
+});

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

@@ -0,0 +1,22 @@
+/*!
+ * (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');
+  });
+});

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

@@ -0,0 +1,16 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { Modal } from "../../modal";
+describe('modal: htmlAttributes inheritance', () => {
+  it('should correctly inherit attributes on host', async () => {
+    const page = await newSpecPage({
+      components: [Modal],
+      template: () => h("ion-modal", { htmlAttributes: { 'data-testid': 'basic-modal' }, overlayIndex: 1 }),
+    });
+    const modal = page.body.querySelector('ion-modal');
+    await expect(modal.getAttribute('data-testid')).toBe('basic-modal');
+  });
+});

package/dist/collection/components/modal/test/can-dismiss/modal.spec.js

@@ -0,0 +1,191 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h, setMode } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { Content } from "../../../content/content";
+import { Modal } from "../../modal";
+describe('modal: canDismiss', () => {
+  describe('modal: regular modal', () => {
+    it('should dismiss when canDismiss is true', async () => {
+      const page = await newSpecPage({
+        components: [Modal],
+        template: () => h("ion-modal", { overlayIndex: 1, animated: false, canDismiss: true }),
+      });
+      const modal = page.body.querySelector('ion-modal');
+      await modal.present();
+      await page.waitForChanges();
+      const returnValue = await modal.dismiss();
+      await expect(returnValue).toBe(true);
+    });
+    it('should not dismiss when canDismiss is false', async () => {
+      const page = await newSpecPage({
+        components: [Modal],
+        template: () => h("ion-modal", { overlayIndex: 1, animated: false, canDismiss: false }),
+      });
+      const modal = page.body.querySelector('ion-modal');
+      await modal.present();
+      await page.waitForChanges();
+      const returnValue = await modal.dismiss();
+      await expect(returnValue).toBe(false);
+    });
+    it('should dismiss when canDismiss is Promise<true>', async () => {
+      const page = await newSpecPage({
+        components: [Modal],
+        template: () => (h("ion-modal", { overlayIndex: 1, animated: false, canDismiss: () => {
+            return new Promise((resolve) => {
+              setTimeout(() => resolve(true), 50);
+            });
+          } })),
+      });
+      const modal = page.body.querySelector('ion-modal');
+      await modal.present();
+      await page.waitForChanges();
+      const returnValue = await modal.dismiss();
+      await expect(returnValue).toBe(true);
+    });
+    it('should not dismiss when canDismiss is Promise<false>', async () => {
+      const page = await newSpecPage({
+        components: [Modal],
+        template: () => (h("ion-modal", { overlayIndex: 1, animated: false, canDismiss: () => {
+            return new Promise((resolve) => {
+              setTimeout(() => resolve(false), 50);
+            });
+          } })),
+      });
+      const modal = page.body.querySelector('ion-modal');
+      await modal.present();
+      await page.waitForChanges();
+      const returnValue = await modal.dismiss();
+      await expect(returnValue).toBe(false);
+    });
+  });
+  describe('modal: card modal', () => {
+    beforeEach(() => {
+      /**
+       * Card modal is only available on iOS
+       */
+      setMode(() => 'ios');
+    });
+    it('should dismiss when canDismiss is true', async () => {
+      const page = await newSpecPage({
+        components: [Content, Modal],
+        template: () => (h("ion-modal", { overlayIndex: 1, presentingElement: document.createElement('div'), animated: false, canDismiss: true }, h("ion-content", null, "Test Content"))),
+      });
+      const modal = page.body.querySelector('ion-modal');
+      await modal.present();
+      await page.waitForChanges();
+      const returnValue = await modal.dismiss();
+      await expect(returnValue).toBe(true);
+    });
+    it('should not dismiss when canDismiss is false', async () => {
+      const page = await newSpecPage({
+        components: [Content, Modal],
+        template: () => (h("ion-modal", { overlayIndex: 1, presentingElement: document.createElement('div'), animated: false, canDismiss: false }, h("ion-content", null, "Test Content"))),
+      });
+      const modal = page.body.querySelector('ion-modal');
+      await modal.present();
+      await page.waitForChanges();
+      const returnValue = await modal.dismiss();
+      await expect(returnValue).toBe(false);
+    });
+    it('should dismiss when canDismiss is Promise<true>', async () => {
+      const page = await newSpecPage({
+        components: [Content, Modal],
+        template: () => (h("ion-modal", { overlayIndex: 1, presentingElement: document.createElement('div'), animated: false, canDismiss: () => {
+            return new Promise((resolve) => {
+              setTimeout(() => resolve(true), 50);
+            });
+          } }, h("ion-content", null, "Test Content"))),
+      });
+      const modal = page.body.querySelector('ion-modal');
+      await modal.present();
+      await page.waitForChanges();
+      const returnValue = await modal.dismiss();
+      await expect(returnValue).toBe(true);
+    });
+    it('should not dismiss when canDismiss is Promise<false>', async () => {
+      const page = await newSpecPage({
+        components: [Content, Modal],
+        template: () => (h("ion-modal", { overlayIndex: 1, presentingElement: document.createElement('div'), animated: false, canDismiss: () => {
+            return new Promise((resolve) => {
+              setTimeout(() => resolve(false), 50);
+            });
+          } }, h("ion-content", null, "Test Content"))),
+      });
+      const modal = page.body.querySelector('ion-modal');
+      await modal.present();
+      await page.waitForChanges();
+      const returnValue = await modal.dismiss();
+      await expect(returnValue).toBe(false);
+    });
+  });
+  describe('modal: sheet modal', () => {
+    it('should dismiss when canDismiss is true', async () => {
+      const page = await newSpecPage({
+        components: [Modal],
+        template: () => (h("ion-modal", { overlayIndex: 1, breakpoints: [0, 1], initialBreakpoint: 1, animated: false, canDismiss: true })),
+      });
+      const modal = page.body.querySelector('ion-modal');
+      await modal.present();
+      await page.waitForChanges();
+      const returnValue = await modal.dismiss();
+      await expect(returnValue).toBe(true);
+    });
+    it('should not dismiss when canDismiss is false', async () => {
+      const page = await newSpecPage({
+        components: [Modal],
+        template: () => (h("ion-modal", { overlayIndex: 1, breakpoints: [0, 1], initialBreakpoint: 1, animated: false, canDismiss: false })),
+      });
+      const modal = page.body.querySelector('ion-modal');
+      await modal.present();
+      await page.waitForChanges();
+      const returnValue = await modal.dismiss();
+      await expect(returnValue).toBe(false);
+    });
+    it('should dismiss when canDismiss is Promise<true>', async () => {
+      const page = await newSpecPage({
+        components: [Modal],
+        template: () => (h("ion-modal", { overlayIndex: 1, breakpoints: [0, 1], initialBreakpoint: 1, animated: false, canDismiss: () => {
+            return new Promise((resolve) => {
+              setTimeout(() => resolve(true), 50);
+            });
+          } })),
+      });
+      const modal = page.body.querySelector('ion-modal');
+      await modal.present();
+      await page.waitForChanges();
+      const returnValue = await modal.dismiss();
+      await expect(returnValue).toBe(true);
+    });
+    it('should not dismiss when canDismiss is Promise<false>', async () => {
+      const page = await newSpecPage({
+        components: [Modal],
+        template: () => (h("ion-modal", { overlayIndex: 1, breakpoints: [0, 1], initialBreakpoint: 1, animated: false, canDismiss: () => {
+            return new Promise((resolve) => {
+              setTimeout(() => resolve(false), 50);
+            });
+          } })),
+      });
+      const modal = page.body.querySelector('ion-modal');
+      await modal.present();
+      await page.waitForChanges();
+      const returnValue = await modal.dismiss();
+      await expect(returnValue).toBe(false);
+    });
+  });
+  describe('modal: data and role', () => {
+    test('should pass data and role when calling dismiss', async () => {
+      const canDismiss = jest.fn();
+      const page = await newSpecPage({
+        components: [Modal],
+        template: () => h("ion-modal", { overlayIndex: 1, animated: false, canDismiss: canDismiss }),
+      });
+      const modal = page.body.querySelector('ion-modal');
+      await modal.present();
+      await page.waitForChanges();
+      await modal.dismiss('my data', 'my role');
+      expect(canDismiss).toHaveBeenCalledWith('my data', 'my role');
+    });
+  });
+});

package/dist/collection/components/modal/test/modal-id.spec.js

@@ -0,0 +1,32 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Modal } from "../modal";
+it('modal should be assigned an incrementing id', async () => {
+  const page = await newSpecPage({
+    components: [Modal],
+    html: `<ion-modal is-open="true"></ion-modal>`,
+  });
+  let modal;
+  modal = page.body.querySelector('ion-modal');
+  expect(modal).not.toBe(null);
+  expect(modal.getAttribute('id')).toBe('ion-overlay-1');
+  // Remove the modal from the DOM
+  modal.remove();
+  await page.waitForChanges();
+  // Create a new modal to verify the id is incremented
+  modal = document.createElement('ion-modal');
+  modal.isOpen = true;
+  page.body.appendChild(modal);
+  await page.waitForChanges();
+  modal = page.body.querySelector('ion-modal');
+  expect(modal.getAttribute('id')).toBe('ion-overlay-2');
+  // Presenting the same modal again should reuse the existing id
+  modal.isOpen = false;
+  await page.waitForChanges();
+  modal.isOpen = true;
+  await page.waitForChanges();
+  modal = page.body.querySelector('ion-modal');
+  expect(modal.getAttribute('id')).toBe('ion-overlay-2');
+});