test(angular): ng15 test infrastructure (#26197)

angular/test/base/src/app/accordion/accordion-modal/accordion-modal.component.ts

@@ -5,7 +5,7 @@ import { Component } from '@angular/core';
   templateUrl: './accordion-modal.component.html',
 })
 export class AccordionModalComponent {
-  modal: HTMLIonModalElement;
+  modal!: HTMLIonModalElement;
 
   constructor() {}
 }

angular/test/base/src/app/form/form.component.html

@@ -7,7 +7,7 @@
 </ion-header>
 
 <ion-content>
-  <form [formGroup]="profileForm" (ngSubmit)="onSubmit($event)">
+  <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
     <ion-list>
 
       <ion-item>

angular/test/base/src/app/form/form.component.ts

@@ -27,10 +27,12 @@ export class FormComponent {
 
   setTouched() {
     const formControl = this.profileForm.get('input');
-    formControl.markAsTouched();
+    if (formControl) {
+      formControl.markAsTouched();
+    }
   }
 
-  onSubmit(_ev) {
+  onSubmit() {
     this.submitted = 'true';
   }
 

angular/test/base/src/app/inputs/inputs.component.ts

@@ -6,12 +6,12 @@ import { Component } from '@angular/core';
 })
 export class InputsComponent {
 
-  datetime = '1994-03-15';
-  input = 'some text';
+  datetime? = '1994-03-15';
+  input? = 'some text';
   checkbox = true;
   toggle = true;
-  select = 'nes';
-  range = 10;
+  select? = 'nes';
+  range? = 10;
   changes = 0;
 
   setValues() {

angular/test/base/src/app/modal-example/modal-example.component.ts

@@ -8,7 +8,7 @@ import { ModalController, NavParams, IonNav, ViewWillLeave, ViewDidEnter, ViewDi
 })
 export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnter, ViewWillLeave, ViewDidLeave {
 
-  @Input() value: string;
+  @Input() value?: string;
 
   form = new UntypedFormGroup({
     select: new UntypedFormControl([])
@@ -21,7 +21,7 @@ export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnte
   willLeave = 0;
   didLeave = 0;
 
-  modal: HTMLElement;
+  modal!: HTMLElement;
 
   constructor(
     private modalCtrl: ModalController,

angular/test/base/src/app/popover-inline/popover-inline.component.ts

@@ -1,5 +1,7 @@
 import { Component } from "@angular/core";
 
+import { IonPopover } from "@ionic/angular";
+
 /**
  * Validates that inline popovers will correctly display
  * dynamic contents that are updated after the modal is
@@ -13,7 +15,7 @@ export class PopoverInlineComponent {
 
   items: string[] = [];
 
-  openPopover(popover: HTMLIonPopoverElement) {
+  openPopover(popover: IonPopover) {
     popover.present();
 
     setTimeout(() => {

angular/test/base/src/app/providers/providers.component.ts

@@ -16,9 +16,9 @@ export class ProvidersComponent {
   isResumed = false;
   isPaused = false;
   isResized = false;
-  isTesting: boolean = undefined;
-  isDesktop: boolean = undefined;
-  isMobile: boolean = undefined;
+  isTesting?: boolean = undefined;
+  isDesktop?: boolean = undefined;
+  isMobile?: boolean = undefined;
   keyboardHeight = 0;
   queryParams = '';
 

angular/test/base/src/app/router-link-page/router-link-page.component.ts

@@ -12,7 +12,7 @@ export class RouterLinkPageComponent implements OnInit, ViewWillLeave, ViewDidEn
   didEnter = 0;
   willLeave = 0;
   didLeave = 0;
-  canGoBack: boolean = null;
+  canGoBack: boolean | null | undefined = null;
 
   constructor(
     private ionRouterOutlet: IonRouterOutlet

angular/test/base/src/app/slides/slides.component.ts

@@ -6,11 +6,11 @@ import { IonSlides } from '@ionic/angular';
   templateUrl: './slides.component.html',
 })
 export class SlidesComponent implements AfterViewInit {
-  @ViewChild(IonSlides, { static: true }) slides: IonSlides;
+  @ViewChild(IonSlides, { static: true }) slides!: IonSlides;
 
   slideIndex = 0;
   slideIndex2 = 0;
-  slidesData = [];
+  slidesData: string[] = [];
 
   constructor() { }
 

angular/test/base/src/app/tabs-tab1-nested/tabs-tab1-nested.component.ts

@@ -7,7 +7,7 @@ import { NavController } from '@ionic/angular';
   templateUrl: './tabs-tab1-nested.component.html',
 })
 export class TabsTab1NestedComponent implements OnInit {
-  id = '';
+  id: string | null = '';
   constructor(
     private route: ActivatedRoute,
     public navCtrl: NavController
@@ -18,6 +18,9 @@ export class TabsTab1NestedComponent implements OnInit {
   }
 
   next() {
+    if (this.id === null) {
+      return '1';
+    }
     return parseInt(this.id, 10) + 1;
   }
 

angular/test/base/src/app/tabs/tabs.component.ts

@@ -9,13 +9,13 @@ import { IonTabBar } from '@ionic/angular';
 export class TabsComponent {
   tabsDidChangeCounter = 0;
   tabsDidChangeEvent = '';
-  tabsDidChangeSelectedTab = '';
+  tabsDidChangeSelectedTab? = '';
 
   tabsWillChangeCounter = 0;
   tabsWillChangeEvent = '';
-  tabsWillChangeSelectedTab = '';
+  tabsWillChangeSelectedTab? = '';
 
-  @ViewChild(IonTabBar) tabBar: IonTabBar;
+  @ViewChild(IonTabBar) tabBar!: IonTabBar;
 
   tabChanged(ev: { tab: string }) {
     console.log('ionTabsDidChange', this.tabBar.selectedTab);

angular/test/base/src/app/view-child/view-child.component.ts

@@ -7,11 +7,11 @@ import { IonTabs, IonButton, IonSlides, IonSlide } from '@ionic/angular';
 })
 export class ViewChildComponent implements AfterViewInit {
 
-  @ViewChild(IonSlides, { static: true }) slides: IonSlides;
-  @ViewChild(IonButton, { static: true }) button: IonButton;
-  @ViewChild(IonTabs, { static: true }) tabs: IonTabs;
-  @ViewChild('div', { static: true }) div: ElementRef;
-  @ViewChild('slide', { static: true }) slide: IonSlide;
+  @ViewChild(IonSlides, { static: true }) slides!: IonSlides;
+  @ViewChild(IonButton, { static: true }) button!: IonButton;
+  @ViewChild(IonTabs, { static: true }) tabs!: IonTabs;
+  @ViewChild('div', { static: true }) div!: ElementRef;
+  @ViewChild('slide', { static: true }) slide!: IonSlide;
 
   ngAfterViewInit() {
     const loaded = !!(this.slides && this.button && this.tabs && this.div && this.slide);

angular/test/base/src/app/virtual-scroll-detail/virtual-scroll-detail.component.ts

@@ -14,7 +14,7 @@ export class VirtualScrollDetailComponent implements OnInit, ViewWillEnter, View
   willLeave = 0;
   didLeave = 0;
 
-  itemNu = 'none';
+  itemNu: string | null = 'none';
 
   constructor(private route: ActivatedRoute) {}
 

angular/test/base/src/app/virtual-scroll-inner/virtual-scroll-inner.component.ts

@@ -6,7 +6,7 @@ import { Component, OnInit, NgZone, Input } from '@angular/core';
 })
 export class VirtualScrollInnerComponent implements OnInit {
 
-  @Input() value: string;
+  @Input() value?: string;
   onInit = 0;
 
   ngOnInit() {

angular/test/base/src/app/virtual-scroll/virtual-scroll.component.ts

@@ -8,7 +8,7 @@ import { IonVirtualScroll } from '@ionic/angular';
 })
 export class VirtualScrollComponent {
 
-  @ViewChild(IonVirtualScroll, { static: true }) virtualScroll: IonVirtualScroll;
+  @ViewChild(IonVirtualScroll, { static: true }) virtualScroll!: IonVirtualScroll;
 
   items = Array.from({length: 100}, (_, i) => ({ name: `${i}`, checked: true}));
 
@@ -18,12 +18,14 @@ export class VirtualScrollComponent {
     if ((index % 10) === 0) {
       return `Header ${index}`;
     }
+    return '';
   }
 
   myFooterFn: HeaderFn = (_, index) => {
     if ((index % 5) === 0) {
       return `Footer ${index}`;
     }
+    return '';
   }
 
   addItems() {