From 2c4c100354465e9898db40310c2a6d15f790b5b2 Mon Sep 17 00:00:00 2001 From: Mikel Hamer Date: Fri, 19 Jul 2024 00:51:07 -0400 Subject: [PATCH 01/10] test(alert): move htmlAttributes id test to alert-id.spec.tsx --- .../components/alert/test/alert-id.spec.ts | 41 -------------- .../components/alert/test/alert-id.spec.tsx | 55 +++++++++++++++++++ .../test/{alert.spec.tsx => alert.spec.ts} | 11 ---- 3 files changed, 55 insertions(+), 52 deletions(-) delete mode 100644 core/src/components/alert/test/alert-id.spec.ts create mode 100644 core/src/components/alert/test/alert-id.spec.tsx rename core/src/components/alert/test/{alert.spec.tsx => alert.spec.ts} (80%) diff --git a/core/src/components/alert/test/alert-id.spec.ts b/core/src/components/alert/test/alert-id.spec.ts deleted file mode 100644 index 25c1427b1bc..00000000000 --- a/core/src/components/alert/test/alert-id.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { newSpecPage } from '@stencil/core/testing'; - -import { Alert } from '../alert'; - -it('alert should be assigned an incrementing id', async () => { - const page = await newSpecPage({ - components: [Alert], - html: ``, - }); - let alert: HTMLIonAlertElement; - - alert = page.body.querySelector('ion-alert')!; - - expect(alert).not.toBe(null); - expect(alert.getAttribute('id')).toBe('ion-overlay-1'); - - // Remove the alert from the DOM - alert.remove(); - await page.waitForChanges(); - - // Create a new alert to verify the id is incremented - alert = document.createElement('ion-alert'); - alert.isOpen = true; - page.body.appendChild(alert); - await page.waitForChanges(); - - alert = page.body.querySelector('ion-alert')!; - - expect(alert.getAttribute('id')).toBe('ion-overlay-2'); - - // Presenting the same alert again should reuse the existing id - - alert.isOpen = false; - await page.waitForChanges(); - alert.isOpen = true; - await page.waitForChanges(); - - alert = page.body.querySelector('ion-alert')!; - - expect(alert.getAttribute('id')).toBe('ion-overlay-2'); -}); diff --git a/core/src/components/alert/test/alert-id.spec.tsx b/core/src/components/alert/test/alert-id.spec.tsx new file mode 100644 index 00000000000..b20c8b7b23e --- /dev/null +++ b/core/src/components/alert/test/alert-id.spec.tsx @@ -0,0 +1,55 @@ +import {newSpecPage} from '@stencil/core/testing'; + +import {Alert} from '../alert'; +import {h} from '@stencil/core'; + +describe('alert: id', () => { + it('alert should be assigned an incrementing id', async () => { + const page = await newSpecPage({ + components: [Alert], + html: ``, + }); + let alert: HTMLIonAlertElement; + + alert = page.body.querySelector('ion-alert')!; + + expect(alert).not.toBe(null); + expect(alert.getAttribute('id')).toBe('ion-overlay-1'); + + // Remove the alert from the DOM + alert.remove(); + await page.waitForChanges(); + + // Create a new alert to verify the id is incremented + alert = document.createElement('ion-alert'); + alert.isOpen = true; + page.body.appendChild(alert); + await page.waitForChanges(); + + alert = page.body.querySelector('ion-alert')!; + + expect(alert.getAttribute('id')).toBe('ion-overlay-2'); + + // Presenting the same alert again should reuse the existing id + + alert.isOpen = false; + await page.waitForChanges(); + alert.isOpen = true; + await page.waitForChanges(); + + alert = page.body.querySelector('ion-alert')!; + + expect(alert.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: [Alert], + template: () => , + }); + + const alert = page.body.querySelector('ion-alert')!; + expect(alert.id).toBe(id); + }); +}); diff --git a/core/src/components/alert/test/alert.spec.tsx b/core/src/components/alert/test/alert.spec.ts similarity index 80% rename from core/src/components/alert/test/alert.spec.tsx rename to core/src/components/alert/test/alert.spec.ts index 31c3872e6c9..30a3b0bfe6d 100644 --- a/core/src/components/alert/test/alert.spec.tsx +++ b/core/src/components/alert/test/alert.spec.ts @@ -2,7 +2,6 @@ import { newSpecPage } from '@stencil/core/testing'; import { config } from '../../../global/config'; import { Alert } from '../alert'; -import { h } from '@stencil/core'; describe('alert: custom html', () => { it('should not allow for custom html by default', async () => { @@ -40,14 +39,4 @@ describe('alert: custom html', () => { expect(content.querySelector('button.custom-html')).toBe(null); }); - it('should not overwrite the id set in htmlAttributes', async () => { - const id = 'custom-id'; - const page = await newSpecPage({ - components: [Alert], - template: () => , - }); - - const alert = page.body.querySelector('ion-alert')!; - expect(alert.id).toBe(id); - }); }); From e293dfc3bd1ff88055dbccfaa1346ece981d267d Mon Sep 17 00:00:00 2001 From: Mikel Hamer Date: Fri, 19 Jul 2024 00:51:07 -0400 Subject: [PATCH 02/10] test(alert): move htmlAttributes id test to alert-id.spec.tsx --- .../components/alert/test/alert-id.spec.ts | 41 -------------- .../components/alert/test/alert-id.spec.tsx | 55 +++++++++++++++++++ .../test/{alert.spec.tsx => alert.spec.ts} | 11 ---- 3 files changed, 55 insertions(+), 52 deletions(-) delete mode 100644 core/src/components/alert/test/alert-id.spec.ts create mode 100644 core/src/components/alert/test/alert-id.spec.tsx rename core/src/components/alert/test/{alert.spec.tsx => alert.spec.ts} (80%) diff --git a/core/src/components/alert/test/alert-id.spec.ts b/core/src/components/alert/test/alert-id.spec.ts deleted file mode 100644 index 25c1427b1bc..00000000000 --- a/core/src/components/alert/test/alert-id.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { newSpecPage } from '@stencil/core/testing'; - -import { Alert } from '../alert'; - -it('alert should be assigned an incrementing id', async () => { - const page = await newSpecPage({ - components: [Alert], - html: ``, - }); - let alert: HTMLIonAlertElement; - - alert = page.body.querySelector('ion-alert')!; - - expect(alert).not.toBe(null); - expect(alert.getAttribute('id')).toBe('ion-overlay-1'); - - // Remove the alert from the DOM - alert.remove(); - await page.waitForChanges(); - - // Create a new alert to verify the id is incremented - alert = document.createElement('ion-alert'); - alert.isOpen = true; - page.body.appendChild(alert); - await page.waitForChanges(); - - alert = page.body.querySelector('ion-alert')!; - - expect(alert.getAttribute('id')).toBe('ion-overlay-2'); - - // Presenting the same alert again should reuse the existing id - - alert.isOpen = false; - await page.waitForChanges(); - alert.isOpen = true; - await page.waitForChanges(); - - alert = page.body.querySelector('ion-alert')!; - - expect(alert.getAttribute('id')).toBe('ion-overlay-2'); -}); diff --git a/core/src/components/alert/test/alert-id.spec.tsx b/core/src/components/alert/test/alert-id.spec.tsx new file mode 100644 index 00000000000..49b86d11635 --- /dev/null +++ b/core/src/components/alert/test/alert-id.spec.tsx @@ -0,0 +1,55 @@ +import { newSpecPage } from '@stencil/core/testing'; + +import { Alert } from '../alert'; +import { h } from '@stencil/core'; + +describe('alert: id', () => { + it('alert should be assigned an incrementing id', async () => { + const page = await newSpecPage({ + components: [Alert], + html: ``, + }); + let alert: HTMLIonAlertElement; + + alert = page.body.querySelector('ion-alert')!; + + expect(alert).not.toBe(null); + expect(alert.getAttribute('id')).toBe('ion-overlay-1'); + + // Remove the alert from the DOM + alert.remove(); + await page.waitForChanges(); + + // Create a new alert to verify the id is incremented + alert = document.createElement('ion-alert'); + alert.isOpen = true; + page.body.appendChild(alert); + await page.waitForChanges(); + + alert = page.body.querySelector('ion-alert')!; + + expect(alert.getAttribute('id')).toBe('ion-overlay-2'); + + // Presenting the same alert again should reuse the existing id + + alert.isOpen = false; + await page.waitForChanges(); + alert.isOpen = true; + await page.waitForChanges(); + + alert = page.body.querySelector('ion-alert')!; + + expect(alert.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: [Alert], + template: () => , + }); + + const alert = page.body.querySelector('ion-alert')!; + expect(alert.id).toBe(id); + }); +}); diff --git a/core/src/components/alert/test/alert.spec.tsx b/core/src/components/alert/test/alert.spec.ts similarity index 80% rename from core/src/components/alert/test/alert.spec.tsx rename to core/src/components/alert/test/alert.spec.ts index 31c3872e6c9..30a3b0bfe6d 100644 --- a/core/src/components/alert/test/alert.spec.tsx +++ b/core/src/components/alert/test/alert.spec.ts @@ -2,7 +2,6 @@ import { newSpecPage } from '@stencil/core/testing'; import { config } from '../../../global/config'; import { Alert } from '../alert'; -import { h } from '@stencil/core'; describe('alert: custom html', () => { it('should not allow for custom html by default', async () => { @@ -40,14 +39,4 @@ describe('alert: custom html', () => { expect(content.querySelector('button.custom-html')).toBe(null); }); - it('should not overwrite the id set in htmlAttributes', async () => { - const id = 'custom-id'; - const page = await newSpecPage({ - components: [Alert], - template: () => , - }); - - const alert = page.body.querySelector('ion-alert')!; - expect(alert.id).toBe(id); - }); }); From c8276a8ab07497dbd45066f36ee70f5b33d068f1 Mon Sep 17 00:00:00 2001 From: Mikel Hamer Date: Fri, 19 Jul 2024 01:24:26 -0400 Subject: [PATCH 03/10] fix(modal): do not overwrite id set in htmlAttributes --- core/src/components/modal/modal.tsx | 4 +- .../components/modal/test/modal-id.spec.ts | 41 -------------- .../components/modal/test/modal-id.spec.tsx | 55 +++++++++++++++++++ 3 files changed, 58 insertions(+), 42 deletions(-) delete mode 100644 core/src/components/modal/test/modal-id.spec.ts create mode 100644 core/src/components/modal/test/modal-id.spec.tsx diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 7a3fd4b047e..bc8f6184f9a 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -415,7 +415,9 @@ export class Modal implements ComponentInterface, OverlayInterface { printIonWarning('Your breakpoints array must include the initialBreakpoint value.'); } - setOverlayId(el); + if (!this.htmlAttributes?.id) { + setOverlayId(this.el); + } } componentDidLoad() { diff --git a/core/src/components/modal/test/modal-id.spec.ts b/core/src/components/modal/test/modal-id.spec.ts deleted file mode 100644 index 4568aa6e1c5..00000000000 --- a/core/src/components/modal/test/modal-id.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -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: ``, - }); - let modal: HTMLIonModalElement; - - 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'); -}); diff --git a/core/src/components/modal/test/modal-id.spec.tsx b/core/src/components/modal/test/modal-id.spec.tsx new file mode 100644 index 00000000000..6db8d033b10 --- /dev/null +++ b/core/src/components/modal/test/modal-id.spec.tsx @@ -0,0 +1,55 @@ +import { newSpecPage } from '@stencil/core/testing'; + +import { Modal } from '../modal'; +import { h } from '@stencil/core'; + +describe('modal: id', () => { + it('modal should be assigned an incrementing id', async () => { + const page = await newSpecPage({ + components: [Modal], + html: ``, + }); + let modal: HTMLIonModalElement; + + 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'); + }); + + it('should not overwrite the id set in htmlAttributes', async () => { + const id = 'custom-id'; + const page = await newSpecPage({ + components: [Modal], + template: () => , + }); + + const alert = page.body.querySelector('ion-modal')!; + expect(alert.id).toBe(id); + }); +}); From b168ed49c23fc5498896436a8302fb9051a5e057 Mon Sep 17 00:00:00 2001 From: Mikel Hamer Date: Fri, 19 Jul 2024 01:34:21 -0400 Subject: [PATCH 04/10] fix(popover): do not overwrite id set in htmlAttributes --- core/src/components/popover/popover.tsx | 2 +- .../popover/test/popover-id.spec.ts | 41 -------------- .../popover/test/popover-id.spec.tsx | 56 +++++++++++++++++++ 3 files changed, 57 insertions(+), 42 deletions(-) delete mode 100644 core/src/components/popover/test/popover-id.spec.ts create mode 100644 core/src/components/popover/test/popover-id.spec.tsx diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index 4506e3b7caf..39b7e6e1e2c 100644 --- a/core/src/components/popover/popover.tsx +++ b/core/src/components/popover/popover.tsx @@ -365,7 +365,7 @@ export class Popover implements ComponentInterface, PopoverInterface { componentWillLoad() { const { el } = this; - const popoverId = setOverlayId(el); + const popoverId = this.htmlAttributes?.id || setOverlayId(el); this.parentPopover = el.closest(`ion-popover:not(#${popoverId})`) as HTMLIonPopoverElement | null; diff --git a/core/src/components/popover/test/popover-id.spec.ts b/core/src/components/popover/test/popover-id.spec.ts deleted file mode 100644 index fb42e12b40d..00000000000 --- a/core/src/components/popover/test/popover-id.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -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: ``, - }); - let popover: HTMLIonPopoverElement; - - 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'); -}); diff --git a/core/src/components/popover/test/popover-id.spec.tsx b/core/src/components/popover/test/popover-id.spec.tsx new file mode 100644 index 00000000000..08adb33b89e --- /dev/null +++ b/core/src/components/popover/test/popover-id.spec.tsx @@ -0,0 +1,56 @@ +import { newSpecPage } from '@stencil/core/testing'; + +import { Popover } from '../popover'; +import { h } from '@stencil/core'; + +describe('popover: id', () => { + it('popover should be assigned an incrementing id', async () => { + const page = await newSpecPage({ + components: [Popover], + html: ``, + }); + let popover: HTMLIonPopoverElement; + + 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'); + }); + + it('should not overwrite the id set in htmlAttributes', async () => { + const id = 'custom-id'; + const page = await newSpecPage({ + components: [Popover], + template: () => , + }); + + const alert = page.body.querySelector('ion-popover')!; + expect(alert.id).toBe(id); + }); + +}); From da481e5a60eed6e689b7bfcbb7c67020cb83fefa Mon Sep 17 00:00:00 2001 From: Mikel Hamer Date: Fri, 19 Jul 2024 01:37:37 -0400 Subject: [PATCH 05/10] fix(action-sheet): do not overwrite id set in htmlAttributes --- .../components/action-sheet/action-sheet.tsx | 4 +- .../action-sheet/test/action-sheet-id.spec.ts | 41 -------------- .../test/action-sheet-id.spec.tsx | 55 +++++++++++++++++++ 3 files changed, 58 insertions(+), 42 deletions(-) delete mode 100644 core/src/components/action-sheet/test/action-sheet-id.spec.ts create mode 100644 core/src/components/action-sheet/test/action-sheet-id.spec.tsx diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx index 12b803f5499..2d003a5dfc3 100644 --- a/core/src/components/action-sheet/action-sheet.tsx +++ b/core/src/components/action-sheet/action-sheet.tsx @@ -310,7 +310,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface { } componentWillLoad() { - setOverlayId(this.el); + if (!this.htmlAttributes?.id) { + setOverlayId(this.el); + } } componentDidLoad() { diff --git a/core/src/components/action-sheet/test/action-sheet-id.spec.ts b/core/src/components/action-sheet/test/action-sheet-id.spec.ts deleted file mode 100644 index e5503b7eb17..00000000000 --- a/core/src/components/action-sheet/test/action-sheet-id.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { newSpecPage } from '@stencil/core/testing'; - -import { ActionSheet } from '../action-sheet'; - -it('action sheet should be assigned an incrementing id', async () => { - const page = await newSpecPage({ - components: [ActionSheet], - html: ``, - }); - let actionSheet: HTMLIonActionSheetElement; - - actionSheet = page.body.querySelector('ion-action-sheet')!; - - expect(actionSheet).not.toBe(null); - expect(actionSheet.getAttribute('id')).toBe('ion-overlay-1'); - - // Remove the action sheet from the DOM - actionSheet.remove(); - await page.waitForChanges(); - - // Create a new action sheet to verify the id is incremented - actionSheet = document.createElement('ion-action-sheet'); - actionSheet.isOpen = true; - page.body.appendChild(actionSheet); - await page.waitForChanges(); - - actionSheet = page.body.querySelector('ion-action-sheet')!; - - expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2'); - - // Presenting the same action sheet again should reuse the existing id - - actionSheet.isOpen = false; - await page.waitForChanges(); - actionSheet.isOpen = true; - await page.waitForChanges(); - - actionSheet = page.body.querySelector('ion-action-sheet')!; - - expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2'); -}); diff --git a/core/src/components/action-sheet/test/action-sheet-id.spec.tsx b/core/src/components/action-sheet/test/action-sheet-id.spec.tsx new file mode 100644 index 00000000000..95d33254b78 --- /dev/null +++ b/core/src/components/action-sheet/test/action-sheet-id.spec.tsx @@ -0,0 +1,55 @@ +import { newSpecPage } from '@stencil/core/testing'; + +import { ActionSheet } from '../action-sheet'; +import { h } from '@stencil/core'; + +describe('action-sheet: id', () => { + it('action sheet should be assigned an incrementing id', async () => { + const page = await newSpecPage({ + components: [ActionSheet], + html: ``, + }); + let actionSheet: HTMLIonActionSheetElement; + + actionSheet = page.body.querySelector('ion-action-sheet')!; + + expect(actionSheet).not.toBe(null); + expect(actionSheet.getAttribute('id')).toBe('ion-overlay-1'); + + // Remove the action sheet from the DOM + actionSheet.remove(); + await page.waitForChanges(); + + // Create a new action sheet to verify the id is incremented + actionSheet = document.createElement('ion-action-sheet'); + actionSheet.isOpen = true; + page.body.appendChild(actionSheet); + await page.waitForChanges(); + + actionSheet = page.body.querySelector('ion-action-sheet')!; + + expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2'); + + // Presenting the same action sheet again should reuse the existing id + + actionSheet.isOpen = false; + await page.waitForChanges(); + actionSheet.isOpen = true; + await page.waitForChanges(); + + actionSheet = page.body.querySelector('ion-action-sheet')!; + + expect(actionSheet.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: [ActionSheet], + template: () => , + }); + + const alert = page.body.querySelector('ion-action-sheet')!; + expect(alert.id).toBe(id); + }); +}); From 8f4989ff3f61577c440b29636fa98d61b1903c16 Mon Sep 17 00:00:00 2001 From: Mikel Hamer Date: Fri, 19 Jul 2024 01:39:48 -0400 Subject: [PATCH 06/10] fix(loading): do not overwrite id set in htmlAttributes --- core/src/components/loading/loading.tsx | 4 +- .../loading/test/loading-id.spec.ts | 41 -------------- .../loading/test/loading-id.spec.tsx | 55 +++++++++++++++++++ 3 files changed, 58 insertions(+), 42 deletions(-) delete mode 100644 core/src/components/loading/test/loading-id.spec.ts create mode 100644 core/src/components/loading/test/loading-id.spec.tsx diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx index ceb2ae62a39..dac4cc5fafc 100644 --- a/core/src/components/loading/loading.tsx +++ b/core/src/components/loading/loading.tsx @@ -214,7 +214,9 @@ export class Loading implements ComponentInterface, OverlayInterface { const mode = getIonMode(this); this.spinner = config.get('loadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent')); } - setOverlayId(this.el); + if (!this.htmlAttributes?.id) { + setOverlayId(this.el); + } } componentDidLoad() { diff --git a/core/src/components/loading/test/loading-id.spec.ts b/core/src/components/loading/test/loading-id.spec.ts deleted file mode 100644 index f6b10e079b0..00000000000 --- a/core/src/components/loading/test/loading-id.spec.ts +++ /dev/null @@ -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: ``, - }); - 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'); -}); diff --git a/core/src/components/loading/test/loading-id.spec.tsx b/core/src/components/loading/test/loading-id.spec.tsx new file mode 100644 index 00000000000..6a203fffe84 --- /dev/null +++ b/core/src/components/loading/test/loading-id.spec.tsx @@ -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: ``, + }); + 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: () => , + }); + + const alert = page.body.querySelector('ion-loading')!; + expect(alert.id).toBe(id); + }); +}); From 4550041d734a8e3c0b2f1f26a573d4bf2478a436 Mon Sep 17 00:00:00 2001 From: Mikel Hamer Date: Fri, 19 Jul 2024 01:54:51 -0400 Subject: [PATCH 07/10] fix(picker): do not overwrite id set in htmlAttributes --- core/src/components/picker-legacy/picker.tsx | 4 +- .../picker-legacy/test/picker-id.spec.ts | 41 -------------- .../picker-legacy/test/picker-id.spec.tsx | 55 +++++++++++++++++++ 3 files changed, 58 insertions(+), 42 deletions(-) delete mode 100644 core/src/components/picker-legacy/test/picker-id.spec.ts create mode 100644 core/src/components/picker-legacy/test/picker-id.spec.tsx diff --git a/core/src/components/picker-legacy/picker.tsx b/core/src/components/picker-legacy/picker.tsx index d050714a711..cb6f1ba2d9e 100644 --- a/core/src/components/picker-legacy/picker.tsx +++ b/core/src/components/picker-legacy/picker.tsx @@ -199,7 +199,9 @@ export class Picker implements ComponentInterface, OverlayInterface { } componentWillLoad() { - setOverlayId(this.el); + if (!this.htmlAttributes?.id) { + setOverlayId(this.el); + } } componentDidLoad() { diff --git a/core/src/components/picker-legacy/test/picker-id.spec.ts b/core/src/components/picker-legacy/test/picker-id.spec.ts deleted file mode 100644 index d63fb65ce8a..00000000000 --- a/core/src/components/picker-legacy/test/picker-id.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -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: ``, - }); - let picker: HTMLIonPickerLegacyElement; - - picker = page.body.querySelector('ion-picker-legacy')!; - - 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-legacy'); - picker.isOpen = true; - page.body.appendChild(picker); - await page.waitForChanges(); - - picker = page.body.querySelector('ion-picker-legacy')!; - - 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-legacy')!; - - expect(picker.getAttribute('id')).toBe('ion-overlay-2'); -}); diff --git a/core/src/components/picker-legacy/test/picker-id.spec.tsx b/core/src/components/picker-legacy/test/picker-id.spec.tsx new file mode 100644 index 00000000000..55b89fdac2e --- /dev/null +++ b/core/src/components/picker-legacy/test/picker-id.spec.tsx @@ -0,0 +1,55 @@ +import { newSpecPage } from '@stencil/core/testing'; + +import { Picker } from '../picker'; +import { h } from '@stencil/core'; + +describe('picker: id', () => { + it('picker should be assigned an incrementing id', async () => { + const page = await newSpecPage({ + components: [Picker], + html: ``, + }); + let picker: HTMLIonPickerLegacyElement; + + picker = page.body.querySelector('ion-picker-legacy')!; + + 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-legacy'); + picker.isOpen = true; + page.body.appendChild(picker); + await page.waitForChanges(); + + picker = page.body.querySelector('ion-picker-legacy')!; + + 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-legacy')!; + + expect(picker.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: [Picker], + template: () => , + }); + + const alert = page.body.querySelector('ion-picker-legacy')!; + expect(alert.id).toBe(id); + }); +}); From 3753335b9f579db8cdb375aadc21660038f34663 Mon Sep 17 00:00:00 2001 From: Mikel Hamer Date: Fri, 19 Jul 2024 01:57:37 -0400 Subject: [PATCH 08/10] fix(toast): do not overwrite id set in htmlAttributes --- .../components/toast/test/toast-id.spec.ts | 41 -------------- .../components/toast/test/toast-id.spec.tsx | 55 +++++++++++++++++++ core/src/components/toast/toast.tsx | 4 +- 3 files changed, 58 insertions(+), 42 deletions(-) delete mode 100644 core/src/components/toast/test/toast-id.spec.ts create mode 100644 core/src/components/toast/test/toast-id.spec.tsx diff --git a/core/src/components/toast/test/toast-id.spec.ts b/core/src/components/toast/test/toast-id.spec.ts deleted file mode 100644 index 79364d56918..00000000000 --- a/core/src/components/toast/test/toast-id.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -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: ``, - }); - let toast: HTMLIonToastElement; - - 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'); -}); diff --git a/core/src/components/toast/test/toast-id.spec.tsx b/core/src/components/toast/test/toast-id.spec.tsx new file mode 100644 index 00000000000..5867e406ff6 --- /dev/null +++ b/core/src/components/toast/test/toast-id.spec.tsx @@ -0,0 +1,55 @@ +import { newSpecPage } from '@stencil/core/testing'; + +import { Toast } from '../toast'; +import { h } from '@stencil/core'; + +describe('toast: id', () => { + it('toast should be assigned an incrementing id', async () => { + const page = await newSpecPage({ + components: [Toast], + html: ``, + }); + let toast: HTMLIonToastElement; + + 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'); + }); + + it('should not overwrite the id set in htmlAttributes', async () => { + const id = 'custom-id'; + const page = await newSpecPage({ + components: [Toast], + template: () => , + }); + + const alert = page.body.querySelector('ion-toast')!; + expect(alert.id).toBe(id); + }); +}); diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index cf9bf1d77fd..d0064716181 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -321,7 +321,9 @@ export class Toast implements ComponentInterface, OverlayInterface { } componentWillLoad() { - setOverlayId(this.el); + if (!this.htmlAttributes?.id) { + setOverlayId(this.el); + } } componentDidLoad() { From cb02c3e8006c31e49cedea83fb9c80afc50df3aa Mon Sep 17 00:00:00 2001 From: Mikel Hamer <10012080+mikelhamer@users.noreply.github.com> Date: Fri, 19 Jul 2024 10:14:46 -0400 Subject: [PATCH 09/10] fix(popover): use nullish coalescing to ensure htmlAttributes id is not overwritten when it has an integer value of 0 Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> --- core/src/components/popover/popover.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index 39b7e6e1e2c..d1205ab2f6a 100644 --- a/core/src/components/popover/popover.tsx +++ b/core/src/components/popover/popover.tsx @@ -365,7 +365,7 @@ export class Popover implements ComponentInterface, PopoverInterface { componentWillLoad() { const { el } = this; - const popoverId = this.htmlAttributes?.id || setOverlayId(el); + const popoverId = this.htmlAttributes?.id ?? setOverlayId(el); this.parentPopover = el.closest(`ion-popover:not(#${popoverId})`) as HTMLIonPopoverElement | null; From ca2f6cdfe3ea5eec270b00a86f35b0d226565de1 Mon Sep 17 00:00:00 2001 From: Mikel Hamer Date: Fri, 19 Jul 2024 10:34:35 -0400 Subject: [PATCH 10/10] style(lint): fix lint issues --- core/src/components/action-sheet/test/action-sheet-id.spec.tsx | 2 +- core/src/components/alert/test/alert-id.spec.tsx | 2 +- core/src/components/alert/test/alert.spec.ts | 1 - core/src/components/loading/test/loading-id.spec.tsx | 2 +- core/src/components/modal/test/modal-id.spec.tsx | 2 +- core/src/components/picker-legacy/test/picker-id.spec.tsx | 2 +- core/src/components/popover/test/popover-id.spec.tsx | 3 +-- core/src/components/toast/test/toast-id.spec.tsx | 2 +- 8 files changed, 7 insertions(+), 9 deletions(-) diff --git a/core/src/components/action-sheet/test/action-sheet-id.spec.tsx b/core/src/components/action-sheet/test/action-sheet-id.spec.tsx index 95d33254b78..63e7e17b1ee 100644 --- a/core/src/components/action-sheet/test/action-sheet-id.spec.tsx +++ b/core/src/components/action-sheet/test/action-sheet-id.spec.tsx @@ -46,7 +46,7 @@ describe('action-sheet: id', () => { const id = 'custom-id'; const page = await newSpecPage({ components: [ActionSheet], - template: () => , + template: () => , }); const alert = page.body.querySelector('ion-action-sheet')!; diff --git a/core/src/components/alert/test/alert-id.spec.tsx b/core/src/components/alert/test/alert-id.spec.tsx index 49b86d11635..b6ff5372e06 100644 --- a/core/src/components/alert/test/alert-id.spec.tsx +++ b/core/src/components/alert/test/alert-id.spec.tsx @@ -46,7 +46,7 @@ describe('alert: id', () => { const id = 'custom-id'; const page = await newSpecPage({ components: [Alert], - template: () => , + template: () => , }); const alert = page.body.querySelector('ion-alert')!; diff --git a/core/src/components/alert/test/alert.spec.ts b/core/src/components/alert/test/alert.spec.ts index 30a3b0bfe6d..d7c8abb25ca 100644 --- a/core/src/components/alert/test/alert.spec.ts +++ b/core/src/components/alert/test/alert.spec.ts @@ -38,5 +38,4 @@ describe('alert: custom html', () => { expect(content.textContent).toContain('Custom Text'); expect(content.querySelector('button.custom-html')).toBe(null); }); - }); diff --git a/core/src/components/loading/test/loading-id.spec.tsx b/core/src/components/loading/test/loading-id.spec.tsx index 6a203fffe84..22e963e97a6 100644 --- a/core/src/components/loading/test/loading-id.spec.tsx +++ b/core/src/components/loading/test/loading-id.spec.tsx @@ -46,7 +46,7 @@ describe('loading: id', () => { const id = 'custom-id'; const page = await newSpecPage({ components: [Loading], - template: () => , + template: () => , }); const alert = page.body.querySelector('ion-loading')!; diff --git a/core/src/components/modal/test/modal-id.spec.tsx b/core/src/components/modal/test/modal-id.spec.tsx index 6db8d033b10..43f1a9eaa16 100644 --- a/core/src/components/modal/test/modal-id.spec.tsx +++ b/core/src/components/modal/test/modal-id.spec.tsx @@ -46,7 +46,7 @@ describe('modal: id', () => { const id = 'custom-id'; const page = await newSpecPage({ components: [Modal], - template: () => , + template: () => , }); const alert = page.body.querySelector('ion-modal')!; diff --git a/core/src/components/picker-legacy/test/picker-id.spec.tsx b/core/src/components/picker-legacy/test/picker-id.spec.tsx index 55b89fdac2e..6980cc347d5 100644 --- a/core/src/components/picker-legacy/test/picker-id.spec.tsx +++ b/core/src/components/picker-legacy/test/picker-id.spec.tsx @@ -46,7 +46,7 @@ describe('picker: id', () => { const id = 'custom-id'; const page = await newSpecPage({ components: [Picker], - template: () => , + template: () => , }); const alert = page.body.querySelector('ion-picker-legacy')!; diff --git a/core/src/components/popover/test/popover-id.spec.tsx b/core/src/components/popover/test/popover-id.spec.tsx index 08adb33b89e..05457fb1ddb 100644 --- a/core/src/components/popover/test/popover-id.spec.tsx +++ b/core/src/components/popover/test/popover-id.spec.tsx @@ -46,11 +46,10 @@ describe('popover: id', () => { const id = 'custom-id'; const page = await newSpecPage({ components: [Popover], - template: () => , + template: () => , }); const alert = page.body.querySelector('ion-popover')!; expect(alert.id).toBe(id); }); - }); diff --git a/core/src/components/toast/test/toast-id.spec.tsx b/core/src/components/toast/test/toast-id.spec.tsx index 5867e406ff6..e993cfc33ed 100644 --- a/core/src/components/toast/test/toast-id.spec.tsx +++ b/core/src/components/toast/test/toast-id.spec.tsx @@ -46,7 +46,7 @@ describe('toast: id', () => { const id = 'custom-id'; const page = await newSpecPage({ components: [Toast], - template: () => , + template: () => , }); const alert = page.body.querySelector('ion-toast')!;