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

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

@@ -0,0 +1,55 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { mockWindow } from "@stencil/core/testing";
+import { findChainForSegments, findChainForIDs } from "../utils/matching";
+import { readRoutes } from "../utils/parser";
+import { chainToSegments, generatePath, parsePath } from "../utils/path";
+import { mockRouteElement } from "./parser.spec";
+describe('ionic-conference-app', () => {
+  it('should match conference-app routing', () => {
+    const root = conferenceAppRouting();
+    const routes = readRoutes(root);
+    expect(getRouteIDs('/', routes)).toEqual(['page-tabs', 'tab-schedule', 'page-schedule']);
+    expect(getRouteIDs('/speaker', routes)).toEqual(['page-tabs', 'tab-speaker', 'page-speaker-list']);
+    expect(getRouteIDs('/map', routes)).toEqual(['page-tabs', 'page-map']);
+    expect(getRouteIDs('/about', routes)).toEqual(['page-tabs', 'page-about']);
+    expect(getRouteIDs('/tutorial', routes)).toEqual(['page-tutorial']);
+    expect(getRoutePath([{ id: 'PAGE-TABS' }, { id: 'tab-schedule' }, { id: 'page-schedule' }], routes)).toEqual('/');
+    expect(getRoutePath([{ id: 'page-tabs' }, { id: 'TAB-SPEAKER' }], routes)).toEqual('/speaker');
+    expect(getRoutePath([{ id: 'page-tabs' }, { id: 'TAB-SPEAKER' }, { id: 'page-speaker-list' }], routes)).toEqual('/speaker');
+    expect(getRoutePath([{ id: 'page-tabs' }, { id: 'PAGE-MAP' }], routes)).toEqual('/map');
+    expect(getRoutePath([{ id: 'page-tabs' }, { id: 'page-about' }], routes)).toEqual('/about');
+    expect(getRoutePath([{ id: 'page-tutorial' }], routes)).toEqual('/tutorial');
+  });
+  let win;
+  beforeEach(() => {
+    win = mockWindow();
+  });
+  function conferenceAppRouting() {
+    const p2 = mockRouteElement(win, '/', 'tab-schedule');
+    const p3 = mockRouteElement(win, '/', 'PAGE-SCHEDULE');
+    p2.appendChild(p3);
+    const p4 = mockRouteElement(win, '/speaker', 'tab-speaker');
+    const p5 = mockRouteElement(win, '/', 'page-speaker-list');
+    p4.appendChild(p5);
+    const p6 = mockRouteElement(win, '/map', 'page-map');
+    const p7 = mockRouteElement(win, '/about', 'page-about');
+    const p1 = mockRouteElement(win, '/', 'page-tabs');
+    p1.appendChild(p2);
+    p1.appendChild(p4);
+    p1.appendChild(p6);
+    p1.appendChild(p7);
+    const p8 = mockRouteElement(win, '/tutorial', 'page-tutorial');
+    const container = win.document.createElement('div');
+    container.appendChild(p1);
+    container.appendChild(p8);
+    return container;
+  }
+});
+function getRouteIDs(path, routes) {
+  return findChainForSegments(parsePath(path).segments, routes).map((r) => r.id);
+}
+function getRoutePath(ids, routes) {
+  return generatePath(chainToSegments(findChainForIDs(ids, routes)));
+}

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

@@ -0,0 +1,15 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Searchbar } from "../searchbar";
+describe('searchbar: rendering', () => {
+  it('should inherit attributes', async () => {
+    const page = await newSpecPage({
+      components: [Searchbar],
+      html: '<ion-searchbar name="search"></ion-searchbar>',
+    });
+    const nativeEl = page.body.querySelector('ion-searchbar input');
+    expect(nativeEl.getAttribute('name')).toBe('search');
+  });
+});

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

@@ -0,0 +1,37 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { SegmentButton } from "../../segment-button/segment-button";
+import { Segment } from "../segment";
+it('should disable segment buttons added to disabled segment async', async () => {
+  const page = await newSpecPage({
+    components: [Segment, SegmentButton],
+    html: `<ion-segment disabled="true"></ion-segment>`,
+  });
+  const segment = page.body.querySelector('ion-segment');
+  segment.innerHTML = `
+    <ion-segment-button>
+      <ion-label>Segment Button</ion-label>
+    </ion-segment-button>`;
+  await page.waitForChanges();
+  const segmentButton = page.body.querySelector('ion-segment-button');
+  expect(segmentButton.disabled).toBe(true);
+});
+it('should set checked state when value is set asynchronously', async () => {
+  const page = await newSpecPage({
+    components: [Segment, SegmentButton],
+    html: `
+      <ion-segment value="first">
+        <ion-segment-button>
+          <ion-label>First</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+    `,
+  });
+  const segmentButton = page.body.querySelector('ion-segment-button');
+  expect(segmentButton.classList.contains('segment-button-checked')).toBe(false);
+  segmentButton.value = 'first';
+  await page.waitForChanges();
+  expect(segmentButton.classList.contains('segment-button-checked')).toBe(true);
+});

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

@@ -0,0 +1,59 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { Select } from "../select";
+describe('ion-select', () => {
+  it('should render hidden input for form validation', async () => {
+    const page = await newSpecPage({
+      components: [Select],
+      template: () => h("ion-select", { value: "my value", name: "my name", disabled: true }),
+    });
+    const select = page.body.querySelector('ion-select');
+    const hiddenInput = select.querySelector('input[type="hidden"]');
+    expect(hiddenInput).not.toBe(null);
+    expect(hiddenInput.value).toBe('my value');
+    expect(hiddenInput.disabled).toBe(true);
+    expect(hiddenInput.name).toBe('my name');
+  });
+  it('should render label prop if only prop provided', async () => {
+    const page = await newSpecPage({
+      components: [Select],
+      html: `
+        <ion-select label="Label Prop Text"></ion-select>
+      `,
+    });
+    const select = page.body.querySelector('ion-select');
+    const propEl = select.shadowRoot.querySelector('.label-text');
+    const slotEl = select.shadowRoot.querySelector('slot[name="label"]');
+    expect(propEl).not.toBe(null);
+    expect(slotEl).toBe(null);
+  });
+  it('should render label slot if only slot provided', async () => {
+    const page = await newSpecPage({
+      components: [Select],
+      html: `
+        <ion-select><div slot="label">Label Prop Slot</div></ion-select>
+      `,
+    });
+    const select = page.body.querySelector('ion-select');
+    const propEl = select.shadowRoot.querySelector('.label-text');
+    const slotEl = select.shadowRoot.querySelector('slot[name="label"]');
+    expect(propEl).toBe(null);
+    expect(slotEl).not.toBe(null);
+  });
+  it('should render label prop if both prop and slot provided', async () => {
+    const page = await newSpecPage({
+      components: [Select],
+      html: `
+        <ion-select label="Label Prop Text"><div slot="label">Label Prop Slot</div></ion-select>
+      `,
+    });
+    const select = page.body.querySelector('ion-select');
+    const propEl = select.shadowRoot.querySelector('.label-text');
+    const slotEl = select.shadowRoot.querySelector('slot[name="label"]');
+    expect(propEl).not.toBe(null);
+    expect(slotEl).toBe(null);
+  });
+});

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

@@ -0,0 +1,59 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Textarea } from "../textarea";
+it('should inherit attributes', async () => {
+  const page = await newSpecPage({
+    components: [Textarea],
+    html: '<ion-textarea title="my title" tabindex="-1" data-form-type="password"></ion-textarea>',
+  });
+  const nativeEl = page.body.querySelector('ion-textarea textarea');
+  expect(nativeEl.getAttribute('title')).toBe('my title');
+  expect(nativeEl.getAttribute('tabindex')).toBe('-1');
+  expect(nativeEl.getAttribute('data-form-type')).toBe('password');
+});
+/**
+ * Textarea uses emulated slots, so the internal
+ * behavior will not exactly match IonSelect's slots.
+ * For example, Textarea 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 Textarea is updated to use Shadow DOM (and therefore native slots),
+ * then we can update these tests to more closely match the Select tests.
+ **/
+describe('textarea: label rendering', () => {
+  it('should render label prop if only prop provided', async () => {
+    const page = await newSpecPage({
+      components: [Textarea],
+      html: `
+        <ion-textarea label="Label Prop Text"></ion-textarea>
+      `,
+    });
+    const textarea = page.body.querySelector('ion-textarea');
+    const labelText = textarea.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: [Textarea],
+      html: `
+        <ion-textarea><div slot="label">Label Prop Slot</div></ion-textarea>
+      `,
+    });
+    const textarea = page.body.querySelector('ion-textarea');
+    const labelText = textarea.querySelector('.label-text-wrapper');
+    expect(labelText.textContent).toBe('Label Prop Slot');
+  });
+  it('should render label prop if both prop and slot provided', async () => {
+    const page = await newSpecPage({
+      components: [Textarea],
+      html: `
+        <ion-textarea label="Label Prop Text"><div slot="label">Label Prop Slot</div></ion-textarea>
+      `,
+    });
+    const textarea = page.body.querySelector('ion-textarea');
+    const labelText = textarea.querySelector('.label-text-wrapper');
+    expect(labelText.textContent).toBe('Label Prop Text');
+  });
+});

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

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

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

@@ -0,0 +1,120 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { config } from "../../../global/config";
+import { Toast } from "../toast";
+describe('toast: custom html', () => {
+  it('should not allow for custom html by default', async () => {
+    const page = await newSpecPage({
+      components: [Toast],
+      html: `<ion-toast message="<button class='custom-html'>Custom Text</button>"></ion-toast>`,
+    });
+    const toast = page.body.querySelector('ion-toast');
+    const content = toast.shadowRoot.querySelector('.toast-message');
+    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: [Toast],
+      html: `<ion-toast message="<button class='custom-html'>Custom Text</button>"></ion-toast>`,
+    });
+    const toast = page.body.querySelector('ion-toast');
+    const content = toast.shadowRoot.querySelector('.toast-message');
+    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: [Toast],
+      html: `<ion-toast message="<button class='custom-html'>Custom Text</button>"></ion-toast>`,
+    });
+    const toast = page.body.querySelector('ion-toast');
+    const content = toast.shadowRoot.querySelector('.toast-message');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).toBe(null);
+  });
+});
+/**
+ * These tests check if the aria-hidden attributes are being
+ * removed on present. Without this functionality, screen readers
+ * would not announce toast content correctly.
+ */
+describe('toast: a11y smoke test', () => {
+  it('should have aria-hidden content when dismissed', async () => {
+    const page = await newSpecPage({
+      components: [Toast],
+      html: `<ion-toast message="Message" header="Header"></ion-toast>`,
+    });
+    const toast = page.body.querySelector('ion-toast');
+    const header = toast.shadowRoot.querySelector('.toast-header');
+    const message = toast.shadowRoot.querySelector('.toast-message');
+    expect(header.getAttribute('aria-hidden')).toBe('true');
+    expect(message.getAttribute('aria-hidden')).toBe('true');
+  });
+  it('should not have aria-hidden content when presented', async () => {
+    const page = await newSpecPage({
+      components: [Toast],
+      html: `
+        <ion-app>
+          <ion-toast animated="false" message="Message" header="Header"></ion-toast>
+        </ion-app>
+      `,
+    });
+    const toast = page.body.querySelector('ion-toast');
+    /**
+     * Wait for present method to resolve
+     * and for state change to take effect.
+     */
+    await toast.present();
+    await page.waitForChanges();
+    const header = toast.shadowRoot.querySelector('.toast-header');
+    const message = toast.shadowRoot.querySelector('.toast-message');
+    expect(header.getAttribute('aria-hidden')).toBe(null);
+    expect(message.getAttribute('aria-hidden')).toBe(null);
+  });
+});
+describe('toast: duration config', () => {
+  it('should have duration set to 0', async () => {
+    const page = await newSpecPage({
+      components: [Toast],
+      html: `<ion-toast></ion-toast>`,
+    });
+    const toast = page.body.querySelector('ion-toast');
+    expect(toast.duration).toBe(0);
+  });
+  it('should have duration set to 5000', async () => {
+    config.reset({ toastDuration: 5000 });
+    const page = await newSpecPage({
+      components: [Toast],
+      html: `<ion-toast></ion-toast>`,
+    });
+    const toast = page.body.querySelector('ion-toast');
+    expect(toast.duration).toBe(5000);
+  });
+});
+describe('toast: htmlAttributes', () => {
+  it('should correctly inherit attributes on host', async () => {
+    const page = await newSpecPage({
+      components: [Toast],
+      template: () => h("ion-toast", { overlayIndex: 1, htmlAttributes: { 'data-testid': 'basic-toast' } }),
+    });
+    const toast = page.body.querySelector('ion-toast');
+    await expect(toast.getAttribute('data-testid')).toBe('basic-toast');
+  });
+});
+describe('toast: button cancel', () => {
+  it('should render the cancel button with part button-cancel', async () => {
+    const page = await newSpecPage({
+      components: [Toast],
+      template: () => h("ion-toast", { overlayIndex: 1, buttons: [{ text: 'Cancel', role: 'cancel' }] }),
+    });
+    const toast = page.body.querySelector('ion-toast');
+    const buttonCancel = toast.shadowRoot.querySelector('.toast-button-cancel');
+    expect(buttonCancel.getAttribute('part')).toBe('button cancel');
+  });
+});

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

@@ -0,0 +1,55 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { config } from "../../../global/config";
+import { Toggle } from "../toggle";
+describe('toggle', () => {
+  beforeEach(() => {
+    config.reset({});
+  });
+  const newToggle = async () => {
+    const { rootInstance } = await newSpecPage({
+      components: [Toggle],
+      html: `<ion-toggle></ion-toggle>`,
+    });
+    return rootInstance;
+  };
+  describe('enableOnOffLabels', () => {
+    it('should disable on/off labels when setting to false on component', async () => {
+      const t = await newToggle();
+      t.enableOnOffLabels = false;
+      config.reset({
+        toggleOnOffLabels: true,
+      });
+      expect(t.enableOnOffLabels).toBe(false);
+    });
+    it('should enable on/off labels when setting to true on global config', async () => {
+      config.reset({
+        toggleOnOffLabels: true,
+      });
+      const t = await newToggle();
+      expect(t.enableOnOffLabels).toBe(true);
+    });
+    it('should enable on/off labels when setting to true on component', async () => {
+      const t = await newToggle();
+      t.enableOnOffLabels = true;
+      expect(t.enableOnOffLabels).toBe(true);
+    });
+  });
+});
+describe('ion-toggle: disabled', () => {
+  it('clicking disabled toggle should not toggle checked state', async () => {
+    const page = await newSpecPage({
+      components: [Toggle],
+      html: `
+        <ion-toggle disabled="true">Toggle</ion-toggle>
+      `,
+    });
+    const toggle = page.body.querySelector('ion-toggle');
+    expect(toggle.checked).toBe(false);
+    toggle.click();
+    await page.waitForChanges();
+    expect(toggle.checked).toBe(false);
+  });
+});

package/dist/collection/global/test/config-controller.spec.js

@@ -0,0 +1,77 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { Config } from "../config";
+describe('Config', () => {
+  it('should get a value from the config', () => {
+    const config = new Config();
+    config.reset({ mode: 'ios' });
+    expect(config.get('mode')).toEqual('ios');
+    expect(config.getBoolean('mode')).toBe(false);
+  });
+  it('should get a boolean value', () => {
+    const config = new Config();
+    config.reset({
+      bool0: false,
+      bool1: 'false',
+      bool2: true,
+      bool3: 'true',
+      bool4: 'hola',
+      bool5: 0,
+      bool6: 1,
+    });
+    expect(config.getBoolean('bool0')).toEqual(false);
+    expect(config.getBoolean('bool1')).toEqual(false);
+    expect(config.getBoolean('bool2')).toEqual(true);
+    expect(config.getBoolean('bool3')).toEqual(true);
+    expect(config.getBoolean('bool4')).toEqual(false);
+    expect(config.getBoolean('bool5')).toEqual(false);
+    expect(config.getBoolean('bool6')).toEqual(true);
+  });
+  it('should get a number value', () => {
+    const config = new Config();
+    config.reset({
+      nu0: 0,
+      nu1: -1,
+      nu2: '200',
+      nu3: '2.3',
+      nu4: -100.2,
+    });
+    expect(config.getNumber('nu0')).toEqual(0);
+    expect(config.getNumber('nu1')).toEqual(-1);
+    expect(config.getNumber('nu2')).toEqual(200);
+    expect(config.getNumber('nu3')).toEqual(2.3);
+    expect(config.getNumber('nu4')).toEqual(-100.2);
+  });
+  it('should not get fallback', () => {
+    const config = new Config();
+    config.reset({
+      text0: '',
+      text1: 'hola',
+      bool0: false,
+      bool1: 0,
+      nu0: '0',
+      nu1: 0,
+      nu2: 10,
+    });
+    expect(config.get('text0', 'HEY')).toEqual('');
+    expect(config.get('text1', 'HEY')).toEqual('hola');
+    expect(config.getBoolean('bool0', true)).toEqual(false);
+    expect(config.getBoolean('bool1', true)).toEqual(false);
+    expect(config.getNumber('nu0', 100)).toEqual(0);
+    expect(config.getNumber('nu1', 100)).toEqual(0);
+    expect(config.getNumber('nu2', 100)).toEqual(10);
+  });
+  it('should get fallback', () => {
+    const config = new Config();
+    expect(config.get('text0', 'HEY')).toEqual('HEY');
+    expect(config.getBoolean('bool0', true)).toEqual(true);
+    expect(config.getNumber('nu0', 100)).toEqual(100);
+  });
+  it('should set value', () => {
+    const config = new Config();
+    expect(config.get('text0', 'HEY')).toEqual('HEY');
+    config.set('text0', 'hola');
+    expect(config.get('text0', 'HEY')).toEqual('hola');
+  });
+});