Merge branch 'main' into chore-sync-next-main

This commit is contained in:
Brandy Carney
2024-08-30 13:35:59 -04:00
184 changed files with 14650 additions and 12348 deletions

View File

@ -216,7 +216,9 @@ export class Loading implements ComponentInterface, OverlayInterface {
const theme = getIonTheme(this);
this.spinner = config.get('loadingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'crescent'));
}
setOverlayId(this.el);
if (!this.htmlAttributes?.id) {
setOverlayId(this.el);
}
}
componentDidLoad() {

View File

@ -1,41 +0,0 @@
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: HTMLIonLoadingElement;
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');
});

View File

@ -0,0 +1,55 @@
import { newSpecPage } from '@stencil/core/testing';
import { Loading } from '../loading';
import { h } from '@stencil/core';
describe('loading: id', () => {
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: HTMLIonLoadingElement;
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');
});
it('should not overwrite the id set in htmlAttributes', async () => {
const id = 'custom-id';
const page = await newSpecPage({
components: [Loading],
template: () => <ion-loading htmlAttributes={{ id }} overlayIndex={-1}></ion-loading>,
});
const alert = page.body.querySelector('ion-loading')!;
expect(alert.id).toBe(id);
});
});