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

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

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

package/dist/collection/components/picker-column/test/picker-column-aria.spec.js

@@ -0,0 +1,35 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { PickerColumnCmp } from "../picker-column";
+/**
+ * Stencil has an issue where having multiple spec tests in the same file,
+ * will cause an exception to be thrown. This test is located in a separate file
+ * to avoid this issue: https://github.com/ionic-team/stencil/issues/4053
+ */
+describe('picker-column', () => {
+  it('should add aria-label to the picker column option', async () => {
+    const col = {
+      options: [
+        {
+          text: 'C#',
+          ariaLabel: 'C Sharp',
+        },
+        {
+          text: 'Java',
+        },
+      ],
+      name: 'programmingLanguages',
+    };
+    const page = await newSpecPage({
+      components: [PickerColumnCmp],
+      template: () => h("ion-picker-column", { col: col }),
+    });
+    const firstOption = page.body.querySelector('ion-picker-column .picker-opt:nth-child(1)');
+    const secondOption = page.body.querySelector('ion-picker-column .picker-opt:nth-child(2)');
+    expect(firstOption.getAttribute('aria-label')).toBe('C Sharp');
+    expect(secondOption.getAttribute('aria-label')).toBe(null);
+  });
+});

package/dist/collection/components/picker-column/test/picker-column-dynamic.spec.js

@@ -0,0 +1,29 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { PickerColumnCmp } from "../picker-column";
+describe('picker-column: dynamic options', () => {
+  /**
+   * Issue: https://github.com/ionic-team/ionic-framework/issues/21763
+   */
+  it('should add an option', async () => {
+    const defaultOptions = [
+      { text: 'Dog', value: 'dog' },
+      { text: 'Cat', value: 'cat' },
+    ];
+    const page = await newSpecPage({
+      components: [PickerColumnCmp],
+      template: () => h("ion-picker-column", { col: { options: defaultOptions, name: 'animals' } }),
+    });
+    const pickerCol = page.body.querySelector('ion-picker-column');
+    pickerCol.col = {
+      options: [...defaultOptions, { text: 'Carrot', value: 'carrot' }],
+      name: 'vegetables',
+    };
+    await page.waitForChanges();
+    const pickerOpt = pickerCol.querySelector('.picker-opt:nth(2)');
+    expect(pickerOpt.getAttribute('style')).toContain('transform');
+  });
+});

package/dist/collection/components/picker-column/test/picker-column.spec.js

@@ -0,0 +1,17 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { PickerColumnCmp } from "../picker-column";
+describe('picker-column', () => {
+  it('should add class to host of component', async () => {
+    const col = { cssClass: 'test-class', options: [], name: 'col' };
+    const page = await newSpecPage({
+      components: [PickerColumnCmp],
+      template: () => h("ion-picker-column", { col: col }),
+    });
+    const pickerCol = page.body.querySelector('ion-picker-column');
+    expect(pickerCol.classList.contains('test-class')).toBe(true);
+  });
+});

package/dist/collection/components/popover/test/basic/popover.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 { Popover } from "../../popover";
+describe('popover: htmlAttributes inheritance', () => {
+  it('should correctly inherit attributes on host', async () => {
+    const page = await newSpecPage({
+      components: [Popover],
+      template: () => h("ion-popover", { overlayIndex: 1, htmlAttributes: { 'data-testid': 'basic-popover' } }),
+    });
+    const popover = page.body.querySelector('ion-popover');
+    await expect(popover.getAttribute('data-testid')).toBe('basic-popover');
+  });
+});

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

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

package/dist/collection/components/popover/test/util.spec.js

@@ -0,0 +1,53 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { isTriggerElement, getIndexOfItem, getNextItem, getPrevItem } from "../utils";
+describe('isTriggerElement', () => {
+  it('should return true is element is a trigger', () => {
+    const el = document.createElement('div');
+    el.setAttribute('data-ion-popover-trigger', 'true');
+    expect(isTriggerElement(el)).toEqual(true);
+  });
+  it('should return false is element is not a trigger', () => {
+    const el = document.createElement('div');
+    expect(isTriggerElement(el)).toEqual(false);
+  });
+});
+describe('getIndexOfItem', () => {
+  it('should return the correct index in an array of ion-items', () => {
+    const array = createArrayOfElements(['ion-item', 'ion-item', 'ion-item']);
+    expect(getIndexOfItem(array, array[1])).toEqual(1);
+  });
+  it('should return -1 when ion-item not found', () => {
+    const el = document.createElement('ion-item');
+    const array = createArrayOfElements(['ion-item', 'ion-item']);
+    expect(getIndexOfItem(array, el)).toEqual(-1);
+  });
+  it('should return -1 if a non-ion-item is passed in', () => {
+    const array = createArrayOfElements(['ion-item', 'div', 'ion-item']);
+    expect(getIndexOfItem(array, array[1])).toEqual(-1);
+  });
+});
+describe('getNextItem', () => {
+  it('should get the next item in an array of ion-items', () => {
+    const array = createArrayOfElements(['ion-item', 'ion-item', 'ion-item']);
+    expect(getNextItem(array, array[1])).toEqual(array[2]);
+  });
+  it('should return undefined if there is no next item', () => {
+    const array = createArrayOfElements(['ion-item', 'ion-item', 'ion-item']);
+    expect(getNextItem(array, array[2])).toEqual(undefined);
+  });
+});
+describe('getPrevItem', () => {
+  it('should get the previous item in an array of ion-items', () => {
+    const array = createArrayOfElements(['ion-item', 'ion-item', 'ion-item']);
+    expect(getPrevItem(array, array[1])).toEqual(array[0]);
+  });
+  it('should return undefined if there is no previous item', () => {
+    const array = createArrayOfElements(['ion-item', 'ion-item', 'ion-item']);
+    expect(getPrevItem(array, array[0])).toEqual(undefined);
+  });
+});
+const createArrayOfElements = (tags) => {
+  return tags.map((tag) => document.createElement(tag));
+};

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

@@ -0,0 +1,46 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { RadioGroup } from "../../radio-group/radio-group";
+import { Radio } from "../radio";
+describe('ion-radio', () => {
+  it('should set a default value', async () => {
+    const radio = new Radio();
+    await radio.connectedCallback();
+    expect(radio.value).toEqual('ion-rb-0');
+  });
+  it('should update the checked state when updating the value', async () => {
+    const page = await newSpecPage({
+      components: [Radio, RadioGroup],
+      html: `
+        <ion-radio-group value="a">
+          <ion-radio value="other-value"></ion-radio>
+        </ion-radio-group>
+      `,
+    });
+    const radio = page.body.querySelector('ion-radio');
+    expect(radio.classList.contains('radio-checked')).toBe(false);
+    radio.value = 'a';
+    await page.waitForChanges();
+    expect(radio.classList.contains('radio-checked')).toBe(true);
+  });
+});
+describe('ion-radio: disabled', () => {
+  it('clicking disabled radio should not set checked state', async () => {
+    const page = await newSpecPage({
+      components: [Radio, RadioGroup],
+      html: `
+        <ion-radio-group>
+          <ion-radio disabled="true" value="a">Radio</ion-radio>
+        </ion-radio-group>
+      `,
+    });
+    const radio = page.body.querySelector('ion-radio');
+    const radioGroup = page.body.querySelector('ion-radio-group');
+    expect(radioGroup.value).toBe(undefined);
+    radio.click();
+    await page.waitForChanges();
+    expect(radioGroup.value).toBe(undefined);
+  });
+});

package/dist/collection/components/range/test/label/range.spec.js

@@ -0,0 +1,23 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Range } from "../../range";
+describe('range: label', () => {
+  it('should prioritize the label prop over the slot', async () => {
+    var _a, _b;
+    const page = await newSpecPage({
+      components: [Range],
+      html: `
+        <ion-range label="Label prop">
+          <div slot="label">Label slot</div>
+        </ion-range>
+      `,
+    });
+    const range = page.body.querySelector('ion-range');
+    const propEl = (_a = range === null || range === void 0 ? void 0 : range.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.label-text');
+    const slotEl = (_b = range === null || range === void 0 ? void 0 : range.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="label"]');
+    expect(propEl).not.toBeNull();
+    expect(slotEl).toBeNull();
+  });
+});

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

@@ -0,0 +1,205 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Item } from "../../item/item";
+import { Range } from "../range";
+let sharedRange;
+describe('Range', () => {
+  beforeEach(() => {
+    sharedRange = new Range();
+  });
+  describe('ensureValueInBounds()', () => {
+    it('should return the clamped value for a range single knob component', () => {
+      sharedRange.min = 0;
+      sharedRange.max = 100;
+      const valueTests = [
+        [50, 50],
+        [-100, 0],
+        [1000, 100],
+        [0, 0],
+        [100, 100],
+      ];
+      valueTests.forEach((test) => {
+        // Casting as any since we are accessing a private API on the range component
+        expect(sharedRange.ensureValueInBounds(test[0])).toBe(test[1]);
+      });
+    });
+    it('should return the clamped value for a range dual knob component', () => {
+      sharedRange.min = 0;
+      sharedRange.max = 100;
+      sharedRange.dualKnobs = true;
+      const valueTests = [
+        [
+          { lower: 0, upper: 0 },
+          { lower: 0, upper: 0 },
+        ],
+        [
+          { lower: -100, upper: 0 },
+          { lower: 0, upper: 0 },
+        ],
+        [
+          { lower: 0, upper: 10000 },
+          { lower: 0, upper: 100 },
+        ],
+        [
+          { lower: -100, upper: 200 },
+          { lower: 0, upper: 100 },
+        ],
+        [
+          { lower: 0, upper: 100 },
+          { lower: 0, upper: 100 },
+        ],
+        [
+          { lower: 200, upper: -100 },
+          { lower: 100, upper: 0 },
+        ],
+      ];
+      valueTests.forEach((test) => {
+        // Casting as any since we are accessing a private API on the range component
+        expect(sharedRange.ensureValueInBounds(test[0])).toEqual(test[1]);
+      });
+    });
+  });
+});
+describe('range id', () => {
+  it('should render custom id if passed', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range id="my-custom-range">
+        <div slot="label">Range</div>
+      </ion-range>`,
+    });
+    const range = page.body.querySelector('ion-range');
+    expect(range.getAttribute('id')).toBe('my-custom-range');
+  });
+});
+describe('range: item adjustments', () => {
+  it('should add start and end adjustment with no content', async () => {
+    const page = await newSpecPage({
+      components: [Item, Range],
+      html: `
+        <ion-item>
+          <ion-range aria-label="Range"></ion-range>
+        </ion-item>
+      `,
+    });
+    const range = page.body.querySelector('ion-range');
+    expect(range.classList.contains('range-item-start-adjustment')).toBe(true);
+    expect(range.classList.contains('range-item-end-adjustment')).toBe(true);
+  });
+  it('should add start adjustment with end label and no adornments', async () => {
+    const page = await newSpecPage({
+      components: [Item, Range],
+      html: `
+        <ion-item>
+          <ion-range label="Range" label-placement="end"></ion-range>
+        </ion-item>
+      `,
+    });
+    const range = page.body.querySelector('ion-range');
+    expect(range.classList.contains('range-item-start-adjustment')).toBe(true);
+    expect(range.classList.contains('range-item-end-adjustment')).toBe(false);
+  });
+  it('should add end adjustment with start label and no adornments', async () => {
+    const page = await newSpecPage({
+      components: [Item, Range],
+      html: `
+        <ion-item>
+          <ion-range label="Range" label-placement="start"></ion-range>
+        </ion-item>
+      `,
+    });
+    const range = page.body.querySelector('ion-range');
+    expect(range.classList.contains('range-item-start-adjustment')).toBe(false);
+    expect(range.classList.contains('range-item-end-adjustment')).toBe(true);
+  });
+  it('should add end adjustment with fixed label and no adornments', async () => {
+    const page = await newSpecPage({
+      components: [Item, Range],
+      html: `
+        <ion-item>
+          <ion-range label="Range" label-placement="fixed"></ion-range>
+        </ion-item>
+      `,
+    });
+    const range = page.body.querySelector('ion-range');
+    expect(range.classList.contains('range-item-start-adjustment')).toBe(false);
+    expect(range.classList.contains('range-item-end-adjustment')).toBe(true);
+  });
+  it('should add start adjustment with floating label', async () => {
+    const page = await newSpecPage({
+      components: [Item, Range],
+      html: `
+        <ion-item>
+          <ion-range label="Range" label-placement="floating"></ion-range>
+        </ion-item>
+      `,
+    });
+    const range = page.body.querySelector('ion-range');
+    expect(range.classList.contains('range-item-start-adjustment')).toBe(true);
+    expect(range.classList.contains('range-item-end-adjustment')).toBe(true);
+  });
+  it('should add start adjustment with stacked label', async () => {
+    const page = await newSpecPage({
+      components: [Item, Range],
+      html: `
+        <ion-item>
+          <ion-range label="Range" label-placement="stacked"></ion-range>
+        </ion-item>
+      `,
+    });
+    const range = page.body.querySelector('ion-range');
+    expect(range.classList.contains('range-item-start-adjustment')).toBe(true);
+    expect(range.classList.contains('range-item-end-adjustment')).toBe(true);
+  });
+  it('should not add adjustment when not in an item', async () => {
+    const page = await newSpecPage({
+      components: [Item, Range],
+      html: `
+        <ion-range label="Range" label-placement="stacked"></ion-range>
+      `,
+    });
+    const range = page.body.querySelector('ion-range');
+    expect(range.classList.contains('range-item-start-adjustment')).toBe(false);
+    expect(range.classList.contains('range-item-end-adjustment')).toBe(false);
+  });
+  // TODO FW-2997 remove this
+  it('should not add adjustment with legacy syntax', async () => {
+    const page = await newSpecPage({
+      components: [Item, Range],
+      html: `
+        <ion-range legacy="true"></ion-range>
+      `,
+    });
+    const range = page.body.querySelector('ion-range');
+    expect(range.classList.contains('range-item-start-adjustment')).toBe(false);
+    expect(range.classList.contains('range-item-end-adjustment')).toBe(false);
+  });
+  it('should not add start adjustment when with start adornment', async () => {
+    const page = await newSpecPage({
+      components: [Item, Range],
+      html: `
+        <ion-range label="Range" label-placement="end">
+          <div slot="start">Start Content</div>
+        </ion-range>
+      `,
+    });
+    const range = page.body.querySelector('ion-range');
+    expect(range.classList.contains('range-item-start-adjustment')).toBe(false);
+    expect(range.classList.contains('range-item-end-adjustment')).toBe(false);
+  });
+  it('should not add end adjustment when with end adornment', async () => {
+    const page = await newSpecPage({
+      components: [Item, Range],
+      html: `
+        <ion-range label="Range" label-placement="start">
+          <div slot="end">Start Content</div>
+        </ion-range>
+      `,
+    });
+    const range = page.body.querySelector('ion-range');
+    expect(range.classList.contains('range-item-start-adjustment')).toBe(false);
+    expect(range.classList.contains('range-item-end-adjustment')).toBe(false);
+  });
+});

package/dist/collection/components/refresher-content/test/refresher-content.spec.js

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