test(angular): migrate to playwright (#30594)

- Migrates Angular test app tests from Cypress to Playwright
- Resolves test TODOs with Angular 18
- Resolves nav TODO by adding in standalone components
- Updates browserslist to remove warnings

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

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

@@ -87,7 +87,7 @@ export class ProvidersComponent {
     });
     const firstQuery = platform.getQueryParam('firstParam');
     const secondQuery = platform.getQueryParam('secondParam');
-    this.queryParams = `firstParam: ${firstQuery}, firstParam: ${secondQuery}`;
+    this.queryParams = `firstParam: ${firstQuery}, secondParam: ${secondQuery}`;
 
     this.isDesktop = platform.is('desktop');
     this.isMobile = platform.is('mobile');

packages/angular/test/base/src/app/standalone/nav/nav.component.ts

@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
 import { IonNav } from '@ionic/angular/standalone';
-import { AngularDelegate } from '@ionic/angular/common';
 
 import { PageOneComponent } from './page-one.component';
 

packages/angular/test/base/src/app/standalone/nav/page-one.component.ts

@@ -1,21 +1,28 @@
-/**
- * TODO: Update the template to use `ion-nav-link` once it's implemented
- * as a standalone component.
- * 
- * It is recommended to also wait for the following components to be implemented
- * as standalone components:
- * `ion-header`, `ion-toolbar`, `ion-title`, `ion-content`,
- * `ion-button`, `ion-buttons`, `ion-back-button`
- */
-
 import { Component } from '@angular/core';
+import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonNavLink, IonToolbar, IonTitle } from '@ionic/angular/standalone';
+import { PageTwoComponent } from './page-two.component';
 
 @Component({
   selector: 'app-page-one',
   template: `
-    <div>
-      <p>Page One</p>
-    </div>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button defaultHref="/standalone"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Page One</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <h1>Page One</h1>
+      <ion-nav-link router-direction="forward" [component]="component">
+        <ion-button>Go to Page Two</ion-button>
+      </ion-nav-link>
+    </ion-content>
   `,
+  standalone: true,
+  imports: [IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonNavLink, IonToolbar, IonTitle],
 })
-export class PageOneComponent {}
+export class PageOneComponent {
+  component = PageTwoComponent;
+}

packages/angular/test/base/src/app/standalone/nav/page-three.component.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { IonButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-page-one',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-button (click)="goBack()">
+            Back
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Page Three</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page Three</h1>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class PageThreeComponent {
+  // TODO: This is a workaround to have a working back button.
+  // For some reason the back button is not working in this test,
+  // possibly because the nav is nested in a router-outlet.
+  async goBack() {
+    const nav = document.querySelector('ion-nav');
+    if (nav) {
+      const canGoBack = await nav.canGoBack();
+      if (canGoBack) {
+        await nav.pop();
+      }
+    }
+  }
+}

packages/angular/test/base/src/app/standalone/nav/page-two.component.ts

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import { IonButton, IonButtons, IonContent, IonHeader, IonNavLink, IonToolbar, IonTitle } from '@ionic/angular/standalone';
+import { PageThreeComponent } from './page-three.component';
+
+@Component({
+  selector: 'app-page-two',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-button (click)="goBack()">
+            Back
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Page Two</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <h2>Page Two</h2>
+      <ion-nav-link router-direction="forward" [component]="component">
+        <ion-button>Go to Page Three</ion-button>
+      </ion-nav-link>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [IonButton, IonButtons, IonHeader, IonNavLink, IonToolbar, IonTitle, IonContent],
+})
+export class PageTwoComponent {
+  component = PageThreeComponent;
+
+  // TODO: This is a workaround to have a working back button.
+  // For some reason the back button is not working in this test,
+  // possibly because the nav is nested in a router-outlet.
+  async goBack() {
+    const nav = document.querySelector('ion-nav');
+    if (nav) {
+      const canGoBack = await nav.canGoBack();
+      if (canGoBack) {
+        await nav.pop();
+      }
+    }
+  }
+}

packages/angular/test/base/src/app/standalone/programmatic-modal/modal/modal.component.ts

@@ -1,10 +1,8 @@
 import { Component } from '@angular/core';
-import { IonButton } from "@ionic/angular/standalone";
 
 @Component({
   selector: 'app-modal',
   templateUrl: './modal.component.html',
-  imports: [IonButton],
   standalone: true,
 })
 export class ModalComponent  {