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

.github/workflows/actions/test-angular-e2e/action.yml

@@ -37,7 +37,7 @@ runs:
       shell: bash
       working-directory: ./angular/test
     - name: Install Dependencies
-      run: npm install
+      run: npm install --legacy-peer-deps
       shell: bash
       working-directory: ./angular/test/build/${{ inputs.app }}
     - name: Sync Built Changes

.github/workflows/build.yml

@@ -145,7 +145,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng12, ng13, ng14]
+        apps: [ng12, ng13, ng14, ng15]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:

angular/test/apps/ng12/src/app/form/form.component.ts

@@ -30,7 +30,7 @@ export class FormComponent {
     formControl.markAsTouched();
   }
 
-  onSubmit(_ev) {
+  onSubmit() {
     this.submitted = 'true';
   }
 

angular/test/apps/ng13/src/app/form/form.component.ts

@@ -30,7 +30,7 @@ export class FormComponent {
     formControl.markAsTouched();
   }
 
-  onSubmit(_ev) {
+  onSubmit() {
     this.submitted = 'true';
   }
 

angular/test/apps/ng15/e2e/src/standalone-routing.spec.ts

@@ -0,0 +1,9 @@
+describe('Routing with Standalone Components', () => {
+  beforeEach(() => {
+    cy.visit('/version-test/standalone');
+  });
+
+  it('should render the component', () => {
+    cy.get('ion-content').contains('This is a standalone component rendered from a route.');
+  });
+});

angular/test/apps/ng15/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "ionic-angular-test-app",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "sync:build": "sh scripts/build-ionic.sh",
+    "sync": "sh scripts/sync.sh",
+    "build": "ng build --configuration production --no-progress",
+    "lint": "ng lint",
+    "postinstall": "ngcc",
+    "serve:ssr": "node dist/test-app/server/main.js",
+    "build:ssr": "ng build --prod && ng run test-app:server:production",
+    "dev:ssr": "ng run test-app:serve-ssr",
+    "prerender": "ng run test-app:prerender",
+    "cy.open": "cypress open",
+    "cy.run": "cypress run",
+    "test": "concurrently \"npm run start -- --configuration production\" \"wait-on http-get://localhost:4200 && npm run cy.run\" --kill-others --success first",
+    "test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
+  },
+  "dependencies": {
+    "@angular/animations": "^15.0.0-rc.1",
+    "@angular/common": "^15.0.0-rc.1",
+    "@angular/compiler": "^15.0.0-rc.1",
+    "@angular/core": "^15.0.0-rc.1",
+    "@angular/forms": "^15.0.0-rc.1",
+    "@angular/platform-browser": "^15.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "^15.0.0-rc.1",
+    "@angular/platform-server": "^15.0.0-rc.1",
+    "@angular/router": "^15.0.0-rc.1",
+    "@ionic/angular": "^6.1.15",
+    "@ionic/angular-server": "^6.1.15",
+    "@nguniversal/express-engine": "^14.0.3",
+    "angular-in-memory-web-api": "^0.11.0",
+    "core-js": "^2.6.11",
+    "express": "^4.15.2",
+    "rxjs": "~7.5.0",
+    "tslib": "^2.3.0",
+    "typescript-eslint-language-service": "^4.1.5",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^15.0.0-rc.1",
+    "@angular-eslint/builder": "^14.0.2",
+    "@angular-eslint/eslint-plugin": "^14.0.2",
+    "@angular-eslint/eslint-plugin-template": "^14.0.2",
+    "@angular-eslint/schematics": "^14.0.2",
+    "@angular-eslint/template-parser": "^14.0.2",
+    "@angular/cli": "^15.0.0-rc.1",
+    "@angular/compiler-cli": "^15.0.0-rc.1",
+    "@angular/language-service": "^15.0.0-rc.1",
+    "@nguniversal/builders": "^15.0.0-next.0",
+    "@types/express": "^4.17.7",
+    "@types/node": "^12.12.54",
+    "@typescript-eslint/eslint-plugin": "4.28.2",
+    "@typescript-eslint/parser": "4.28.2",
+    "concurrently": "^6.0.0",
+    "cypress": "^10.2.0",
+    "eslint": "^7.26.0",
+    "ts-loader": "^6.2.2",
+    "ts-node": "^8.3.0",
+    "typescript": "~4.8.4",
+    "wait-on": "^5.2.1",
+    "webpack": "^5.61.0",
+    "webpack-cli": "^4.9.2"
+  }
+}

angular/test/apps/ng15/src/app/app.component.html

@@ -0,0 +1,3 @@
+<ion-app>
+  <ion-router-outlet [environmentInjector]="environmentInjector"></ion-router-outlet>
+</ion-app>

angular/test/apps/ng15/src/app/app.component.ts

@@ -0,0 +1,11 @@
+import { Component, EnvironmentInjector } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+
+  constructor(public environmentInjector: EnvironmentInjector) { }
+}

angular/test/apps/ng15/src/app/version-test/standalone/standalone.component.html

@@ -0,0 +1,4 @@
+<ion-content>
+  <p>This is a standalone component rendered from a route.</p>
+  <ion-button routerLink="/">Return home</ion-button>
+</ion-content>

angular/test/apps/ng15/src/app/version-test/standalone/standalone.component.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+import { RouterModule } from "@angular/router";
+
+import { IonicModule } from '@ionic/angular';
+
+@Component({
+  selector: 'app-standalone',
+  templateUrl: './standalone.component.html',
+  standalone: true,
+  imports: [IonicModule, RouterModule]
+})
+export class StandaloneComponent { }

angular/test/apps/ng15/src/app/version-test/version-test-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: 'standalone',
+        loadComponent: () => import('./standalone/standalone.component').then(m => m.StandaloneComponent)
+      }
+    ])
+  ],
+  exports: [RouterModule]
+})
+export class VersionTestRoutingModule { }

angular/test/apps/ng15/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "es2020",
+    "emitDecoratorMetadata": true,
+    "typeRoots": ["node_modules/@types"],
+    "lib": ["es2020", "dom"],
+    "plugins": [
+      {
+        "name": "typescript-eslint-language-service"
+      }
+    ],
+    "useDefineForClassFields": false
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

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';
+  datetime? = '1994-03-15';
-  input = 'some text';
+  input? = 'some text';
   checkbox = true;
   toggle = true;
-  select = 'nes';
+  select? = 'nes';
-  range = 10;
+  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;
+  isTesting?: boolean = undefined;
-  isDesktop: boolean = undefined;
+  isDesktop?: boolean = undefined;
-  isMobile: 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(IonSlides, { static: true }) slides!: IonSlides;
-  @ViewChild(IonButton, { static: true }) button: IonButton;
+  @ViewChild(IonButton, { static: true }) button!: IonButton;
-  @ViewChild(IonTabs, { static: true }) tabs: IonTabs;
+  @ViewChild(IonTabs, { static: true }) tabs!: IonTabs;
-  @ViewChild('div', { static: true }) div: ElementRef;
+  @ViewChild('div', { static: true }) div!: ElementRef;
-  @ViewChild('slide', { static: true }) slide: IonSlide;
+  @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() {