test(angular): copying new lazy tests to standalone, fixing react route tab issue

Author: ShaneK

packages/angular/test/base/e2e/src/standalone/modal-dynamic-wrapper.spec.ts

@@ -0,0 +1,38 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Modals: Dynamic Wrapper (standalone)', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/standalone/modal-dynamic-wrapper');
+  });
+
+  test('should render dynamic component inside modal', async ({ page }) => {
+    await page.locator('#open-dynamic-modal').click();
+
+    await expect(page.locator('ion-modal')).toBeVisible();
+    await expect(page.locator('#dynamic-component-loaded')).toBeVisible();
+  });
+
+  test('should allow interacting with background content while sheet is open', async ({ page }) => {
+    await page.locator('#open-dynamic-modal').click();
+
+    await expect(page.locator('ion-modal')).toBeVisible();
+
+    await page.locator('#background-action').click();
+
+    await expect(page.locator('#background-action-count')).toHaveText('1');
+  });
+
+  test('should prevent interacting with background content when focus is trapped', async ({ page }) => {
+    await page.locator('#open-focused-modal').click();
+
+    await expect(page.locator('ion-modal')).toBeVisible();
+
+    // Attempt to click the background button via coordinates; click should be intercepted by backdrop
+    const box = await page.locator('#background-action').boundingBox();
+    if (box) {
+      await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
+    }
+
+    await expect(page.locator('#background-action-count')).toHaveText('0');
+  });
+});

packages/angular/test/base/e2e/src/standalone/modal-sheet-inline.spec.ts

@@ -0,0 +1,34 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Modals: Inline Sheet (standalone)', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/standalone/modal-sheet-inline');
+  });
+
+  test('should open inline sheet modal', async ({ page }) => {
+    await page.locator('#present-inline-sheet-modal').click();
+
+    await expect(page.locator('ion-modal')).toBeVisible();
+    await expect(page.locator('#current-breakpoint')).toHaveText('0.2');
+    await expect(page.locator('ion-modal ion-item')).toHaveCount(4);
+  });
+
+  test('should expand to 0.75 breakpoint when searchbar is clicked', async ({ page }) => {
+    await page.locator('#present-inline-sheet-modal').click();
+    await expect(page.locator('#current-breakpoint')).toHaveText('0.2');
+
+    await page.locator('ion-modal ion-searchbar').click();
+
+    await expect(page.locator('#current-breakpoint')).toHaveText('0.75');
+  });
+
+  test('should allow interacting with background content while sheet is open', async ({ page }) => {
+    await page.locator('#present-inline-sheet-modal').click();
+
+    await expect(page.locator('ion-modal')).toBeVisible();
+
+    await page.locator('#background-action').click();
+
+    await expect(page.locator('#background-action-count')).toHaveText('1');
+  });
+});

packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts

@@ -11,6 +11,8 @@ export const routes: Routes = [
       { path: 'action-sheet-controller', loadComponent: () => import('../action-sheet-controller/action-sheet-controller.component').then(c => c.ActionSheetControllerComponent) },
       { path: 'popover', loadComponent: () => import('../popover/popover.component').then(c => c.PopoverComponent) },
       { path: 'modal', loadComponent: () => import('../modal/modal.component').then(c => c.ModalComponent) },
+      { path: 'modal-sheet-inline', loadComponent: () => import('../modal-sheet-inline/modal-sheet-inline.component').then(c => c.ModalSheetInlineComponent) },
+      { path: 'modal-dynamic-wrapper', loadComponent: () => import('../modal-dynamic-wrapper/modal-dynamic-wrapper.component').then(c => c.ModalDynamicWrapperComponent) },
       { path: 'programmatic-modal', loadComponent: () => import('../programmatic-modal/programmatic-modal.component').then(c => c.ProgrammaticModalComponent) },
       { path: 'router-outlet', loadComponent: () => import('../router-outlet/router-outlet.component').then(c => c.RouterOutletComponent) },
       { path: 'back-button', loadComponent: () => import('../back-button/back-button.component').then(c => c.BackButtonComponent) },

packages/angular/test/base/src/app/standalone/home-page/home-page.component.html

@@ -90,6 +90,16 @@
         Modal Test
       </ion-label>
     </ion-item>
+    <ion-item routerLink="/standalone/modal-sheet-inline">
+      <ion-label>
+        Modal Sheet Inline Test
+      </ion-label>
+    </ion-item>
+    <ion-item routerLink="/standalone/modal-dynamic-wrapper">
+      <ion-label>
+        Modal Dynamic Wrapper Test
+      </ion-label>
+    </ion-item>
     <ion-item routerLink="/standalone/programmatic-modal">
       <ion-label>
         Programmatic Modal Test

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

@@ -0,0 +1,27 @@
+import { Component, ComponentRef, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import { IonContent } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-dynamic-component-wrapper',
+  template: `
+    <ion-content>
+      <ng-container #container></ng-container>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [IonContent],
+})
+export class DynamicComponentWrapperComponent implements OnInit, OnDestroy {
+  @Input() componentRef?: ComponentRef<unknown>;
+  @ViewChild('container', { read: ViewContainerRef, static: true }) container!: ViewContainerRef;
+
+  ngOnInit(): void {
+    if (this.componentRef) {
+      this.container.insert(this.componentRef.hostView);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.componentRef?.destroy();
+  }
+}

packages/angular/test/base/src/app/standalone/modal-dynamic-wrapper/dynamic-modal-content.component.ts

@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import {
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-dynamic-modal-content',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Dynamic Sheet Content</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <p id="dynamic-component-loaded">Dynamic component rendered inside wrapper.</p>
+      <ion-button id="dismiss-dynamic-modal" (click)="dismiss.emit()">Close</ion-button>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [IonButton, IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class DynamicModalContentComponent {
+  @Output() dismiss = new EventEmitter<void>();
+}

packages/angular/test/base/src/app/standalone/modal-dynamic-wrapper/modal-dynamic-wrapper.component.html

@@ -0,0 +1,8 @@
+<ion-button id="open-dynamic-modal" (click)="openModal()">Open Dynamic Sheet Modal</ion-button>
+<ion-button id="open-focused-modal" color="primary" (click)="openFocusedModal()">Open Focus-Trapped Sheet Modal</ion-button>
+<ion-button id="background-action" (click)="onBackgroundActionClick()">Background Action</ion-button>
+<p>
+  Background action count: <span id="background-action-count">{{ backgroundActionCount }}</span>
+</p>
+
+<ng-template #modalHost></ng-template>

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

@@ -0,0 +1,103 @@
+import { CommonModule } from '@angular/common';
+import { Component, ComponentRef, OnDestroy, ViewChild, ViewContainerRef } from '@angular/core';
+import { IonButton, ModalController } from '@ionic/angular/standalone';
+
+import { DynamicComponentWrapperComponent } from './dynamic-component-wrapper.component';
+import { DynamicModalContentComponent } from './dynamic-modal-content.component';
+
+@Component({
+  selector: 'app-modal-dynamic-wrapper',
+  templateUrl: './modal-dynamic-wrapper.component.html',
+  standalone: true,
+  imports: [CommonModule, IonButton],
+})
+export class ModalDynamicWrapperComponent implements OnDestroy {
+  @ViewChild('modalHost', { read: ViewContainerRef, static: true }) modalHost!: ViewContainerRef;
+
+  backgroundActionCount = 0;
+
+  private currentModal?: HTMLIonModalElement;
+  private currentComponentRef?: ComponentRef<DynamicModalContentComponent>;
+
+  constructor(private modalCtrl: ModalController) {}
+
+  async openModal() {
+    await this.closeModal();
+
+    const componentRef = this.modalHost.createComponent(DynamicModalContentComponent);
+    this.modalHost.detach();
+    componentRef.instance.dismiss.subscribe(() => this.closeModal());
+
+    this.currentComponentRef = componentRef;
+
+    const modal = await this.modalCtrl.create({
+      component: DynamicComponentWrapperComponent,
+      componentProps: {
+        componentRef,
+      },
+      breakpoints: [0, 0.2, 0.75, 1],
+      initialBreakpoint: 0.2,
+      backdropDismiss: false,
+      focusTrap: false,
+      handleBehavior: 'cycle',
+    });
+
+    this.currentModal = modal;
+
+    modal.onWillDismiss().then(() => this.destroyComponent());
+
+    await modal.present();
+  }
+
+  async openFocusedModal() {
+    await this.closeModal();
+
+    const componentRef = this.modalHost.createComponent(DynamicModalContentComponent);
+    this.modalHost.detach();
+    componentRef.instance.dismiss.subscribe(() => this.closeModal());
+
+    this.currentComponentRef = componentRef;
+
+    const modal = await this.modalCtrl.create({
+      component: DynamicComponentWrapperComponent,
+      componentProps: {
+        componentRef,
+      },
+      breakpoints: [0, 0.25, 0.5, 0.75, 1],
+      initialBreakpoint: 0.5,
+      backdropDismiss: false,
+      focusTrap: true,
+      handleBehavior: 'cycle',
+    });
+
+    this.currentModal = modal;
+
+    modal.onWillDismiss().then(() => this.destroyComponent());
+
+    await modal.present();
+  }
+
+  async closeModal() {
+    if (this.currentModal) {
+      await this.currentModal.dismiss();
+      this.currentModal = undefined;
+    }
+
+    this.destroyComponent();
+  }
+
+  private destroyComponent() {
+    if (this.currentComponentRef) {
+      this.currentComponentRef.destroy();
+      this.currentComponentRef = undefined;
+    }
+  }
+
+  onBackgroundActionClick() {
+    this.backgroundActionCount++;
+  }
+
+  ngOnDestroy(): void {
+    this.destroyComponent();
+  }
+}

packages/angular/test/base/src/app/standalone/modal-sheet-inline/modal-sheet-inline.component.html

@@ -0,0 +1,46 @@
+<ion-button id="present-inline-sheet-modal" (click)="presentInlineSheetModal()">
+  Present Inline Sheet Modal
+</ion-button>
+
+<p>
+  Current breakpoint: <span id="current-breakpoint">{{ currentBreakpoint }}</span>
+</p>
+
+<ion-button id="background-action" (click)="onBackgroundActionClick()">
+  Background Action
+</ion-button>
+
+<p>
+  Background action count: <span id="background-action-count">{{ backgroundActionCount }}</span>
+</p>
+
+<ion-modal
+  #inlineSheetModal
+  mode="md"
+  [isOpen]="isSheetOpen"
+  [initialBreakpoint]="0.2"
+  [breakpoints]="breakpoints"
+  [backdropDismiss]="false"
+  [backdropBreakpoint]="0.5"
+  [focusTrap]="false"
+  handleBehavior="cycle"
+  (ionBreakpointDidChange)="onSheetBreakpointDidChange($event)"
+  (didDismiss)="onSheetDidDismiss()"
+>
+  <ng-template>
+    <ion-content>
+      <ion-searchbar placeholder="Search" (click)="expandInlineSheet()"></ion-searchbar>
+      <ion-list>
+        <ion-item *ngFor="let contact of contacts">
+          <ion-avatar slot="start">
+            <ion-img [src]="contact.avatar"></ion-img>
+          </ion-avatar>
+          <ion-label>
+            <h2>{{ contact.name }}</h2>
+            <p>{{ contact.title }}</p>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ng-template>
+</ion-modal>