@ionic/core 7.5.6-dev.11700168085.18cb70d3 → 7.5.6-dev.11700492285.1581ed02

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

@@ -0,0 +1,222 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { clampDate, getPartsFromCalendarDay, parseAmPm, parseDate, parseMinParts, parseMaxParts } from "../utils/parse";
+describe('getPartsFromCalendarDay()', () => {
+  it('should extract DatetimeParts from a calendar day element', () => {
+    const div = document.createElement('div');
+    div.setAttribute('data-month', '4');
+    div.setAttribute('data-day', '15');
+    div.setAttribute('data-year', '2010');
+    div.setAttribute('data-day-of-week', '5');
+    expect(getPartsFromCalendarDay(div)).toEqual({
+      day: 15,
+      month: 4,
+      year: 2010,
+      dayOfWeek: 5,
+    });
+  });
+});
+describe('parseDate()', () => {
+  it('should return undefined when passed undefined', () => {
+    expect(parseDate(undefined)).toStrictEqual(undefined);
+  });
+  it('should return undefined when passed null', () => {
+    expect(parseDate(null)).toStrictEqual(undefined);
+  });
+  it('should return the correct date object when passed a date', () => {
+    expect(parseDate('2022-12-15T13:47')).toEqual({
+      ampm: 'pm',
+      day: 15,
+      hour: 13,
+      minute: 47,
+      month: 12,
+      year: 2022,
+    });
+  });
+  /**
+   * Note: As Ionic v7 datetime no longer parses time zone information/
+   * See https://github.com/ionic-team/ionic-framework/commit/3fb4caf21ffac12f765c4c80bf1850e05d211c6a
+   */
+  it('should return the correct time zone offset', () => {
+    var _a;
+    // Casting as any since `tzOffset` does not exist on DatetimeParts
+    expect((_a = parseDate('2022-12-15T13:47:30-02:00')) === null || _a === void 0 ? void 0 : _a.tzOffset).toEqual(undefined);
+  });
+  it('should parse an array of dates', () => {
+    expect(parseDate(['2022-12-15T13:47', '2023-03-23T20:19:33.517Z'])).toEqual([
+      {
+        ampm: 'pm',
+        day: 15,
+        hour: 13,
+        minute: 47,
+        month: 12,
+        year: 2022,
+      },
+      {
+        ampm: 'pm',
+        day: 23,
+        hour: 20,
+        minute: 19,
+        month: 3,
+        year: 2023,
+      },
+    ]);
+  });
+});
+describe('clampDate()', () => {
+  const minParts = {
+    year: 2021,
+    month: 6,
+    day: 5,
+  };
+  const maxParts = {
+    year: 2021,
+    month: 8,
+    day: 19,
+  };
+  it('should return the max month when the value is greater than the max', () => {
+    const dateParts = {
+      year: 2022,
+      month: 5,
+      day: 24,
+    };
+    const value = clampDate(dateParts, minParts, maxParts);
+    expect(value).toStrictEqual(maxParts);
+  });
+  it('should return the min month when the value is less than the min', () => {
+    const dateParts = {
+      year: 2020,
+      month: 5,
+      day: 24,
+    };
+    const value = clampDate(dateParts, minParts, maxParts);
+    expect(value).toStrictEqual(minParts);
+  });
+  it('should return the value when the value is greater than the min and less than the max', () => {
+    const dateParts = {
+      year: 2021,
+      month: 7,
+      day: 10,
+    };
+    const value = clampDate(dateParts, minParts, maxParts);
+    expect(value).toStrictEqual(dateParts);
+  });
+});
+describe('parseAmPm()', () => {
+  it('should return pm when the hour is greater than or equal to 12', () => {
+    expect(parseAmPm(12)).toEqual('pm');
+    expect(parseAmPm(13)).toEqual('pm');
+  });
+  it('should return am when the hour is less than 12', () => {
+    expect(parseAmPm(11)).toEqual('am');
+  });
+});
+describe('parseMinParts()', () => {
+  it('should fill in missing information when not provided', () => {
+    const today = {
+      day: 14,
+      month: 3,
+      year: 2022,
+      minute: 4,
+      hour: 2,
+    };
+    expect(parseMinParts('2012', today)).toEqual({
+      month: 1,
+      day: 1,
+      year: 2012,
+      hour: 0,
+      minute: 0,
+    });
+  });
+  it('should default to current year when only given HH:mm', () => {
+    const today = {
+      day: 14,
+      month: 3,
+      year: 2022,
+      minute: 4,
+      hour: 2,
+    };
+    expect(parseMinParts('04:30', today)).toEqual({
+      month: 1,
+      day: 1,
+      year: 2022,
+      hour: 4,
+      minute: 30,
+    });
+  });
+  it('should return undefined when given invalid info', () => {
+    const today = {
+      day: 14,
+      month: 3,
+      year: 2022,
+      minute: 4,
+      hour: 2,
+    };
+    expect(parseMinParts(undefined, today)).toEqual(undefined);
+    expect(parseMinParts(null, today)).toEqual(undefined);
+    expect(parseMinParts('foo', today)).toEqual(undefined);
+  });
+});
+describe('parseMaxParts()', () => {
+  it('should fill in missing information when not provided', () => {
+    const today = {
+      day: 14,
+      month: 3,
+      year: 2022,
+      minute: 4,
+      hour: 2,
+    };
+    expect(parseMaxParts('2012', today)).toEqual({
+      month: 12,
+      day: 31,
+      year: 2012,
+      hour: 23,
+      minute: 59,
+    });
+  });
+  it('should default to current year when only given HH:mm', () => {
+    const today = {
+      day: 14,
+      month: 3,
+      year: 2022,
+      minute: 4,
+      hour: 2,
+    };
+    expect(parseMaxParts('04:30', today)).toEqual({
+      month: 12,
+      day: 31,
+      year: 2022,
+      hour: 4,
+      minute: 30,
+    });
+  });
+  it('should fill in correct day during a leap year', () => {
+    const today = {
+      day: 14,
+      month: 3,
+      year: 2022,
+      minute: 4,
+      hour: 2,
+    };
+    expect(parseMaxParts('2012-02', today)).toEqual({
+      month: 2,
+      day: 29,
+      year: 2012,
+      hour: 23,
+      minute: 59,
+    });
+  });
+  it('should return undefined when given invalid info', () => {
+    const today = {
+      day: 14,
+      month: 3,
+      year: 2022,
+      minute: 4,
+      hour: 2,
+    };
+    expect(parseMaxParts(undefined, today)).toEqual(undefined);
+    expect(parseMaxParts(null, today)).toEqual(undefined);
+    expect(parseMaxParts('foo', today)).toEqual(undefined);
+  });
+});

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');
+  });
+});