chore(core): type checking for unit tests (#28529)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Type checking inside of the Stencil unit tests have been disabled for a
long time. This has resulted in a difficult developer experience and
numerous issues (both types and implementation) within our unit tests.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Type checking is now enabled for all Stencil unit tests
- Tests have been updated to resolve type errors and implementation
errors
- Many `as any` casts were introduced, as many legacy tests test invalid
configurations of functions that require it (for example passing
`undefined` to an argument that cannot be `undefined`).

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

To test this PR you can checkout the branch locally. Install
dependencies in the `/core` directory to make sure you are on at least
`@stencil/core@4.7.2`.

Opening either a `.spec.ts` or `.spec.tsx` file, validate that your IDE
detects types and can provide auto completions for jest global types.

If you desire, you can provide an invalid type and try building the
project - you will observe the build will fail due to the invalid type.

core/src/components/popover/test/basic/popover.spec.tsx

@@ -7,10 +7,10 @@ describe('popover: htmlAttributes inheritance', () => {
   it('should correctly inherit attributes on host', async () => {
     const page = await newSpecPage({
       components: [Popover],
-      template: () => <ion-popover htmlAttributes={{ 'data-testid': 'basic-popover' }}></ion-popover>,
+      template: () => <ion-popover overlayIndex={1} htmlAttributes={{ 'data-testid': 'basic-popover' }}></ion-popover>,
     });
 
-    const popover = page.body.querySelector('ion-popover');
+    const popover = page.body.querySelector('ion-popover')!;
 
     await expect(popover.getAttribute('data-testid')).toBe('basic-popover');
   });

core/src/components/popover/test/util.spec.ts

@@ -17,20 +17,20 @@ describe('isTriggerElement', () => {
 
 describe('getIndexOfItem', () => {
   it('should return the correct index in an array of ion-items', () => {
-    const array = createArrayOfElements(['ion-item', 'ion-item', 'ion-item']);
+    const array = createArrayOfElements(['ion-item', 'ion-item', 'ion-item']) as HTMLIonItemElement[];
 
     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']);
+    const array = createArrayOfElements(['ion-item', 'ion-item']) as HTMLIonItemElement[];
 
     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']);
+    const array = createArrayOfElements(['ion-item', 'div', 'ion-item']) as HTMLIonItemElement[];
 
     expect(getIndexOfItem(array, array[1])).toEqual(-1);
   });
@@ -38,24 +38,24 @@ describe('getIndexOfItem', () => {
 
 describe('getNextItem', () => {
   it('should get the next item in an array of ion-items', () => {
-    const array = createArrayOfElements(['ion-item', 'ion-item', 'ion-item']);
+    const array = createArrayOfElements(['ion-item', 'ion-item', 'ion-item']) as HTMLIonItemElement[];
     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']);
+    const array = createArrayOfElements(['ion-item', 'ion-item', 'ion-item']) as HTMLIonItemElement[];
     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']);
+    const array = createArrayOfElements(['ion-item', 'ion-item', 'ion-item']) as HTMLIonItemElement[];
     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']);
+    const array = createArrayOfElements(['ion-item', 'ion-item', 'ion-item']) as HTMLIonItemElement[];
     expect(getPrevItem(array, array[0])).toEqual(undefined);
   });
 });