test(angular): adding more dedicated testing around swipe gesture property

Author: ShaneK

packages/angular/test/base/e2e/src/lazy/routing.spec.ts

@@ -19,22 +19,6 @@ test.describe('Routing', () => {
     await expect(page.locator('app-router-link-page')).toHaveAttribute('class', 'ion-page can-go-back');
   });
 
-  test('should not swipe back when swipeGesture is false', async ({ page }) => {
-    await page.locator('#routerLink').click();
-
-    await ionPageHidden(page, 'app-router-link');
-    await ionPageVisible(page, 'app-router-link-page');
-
-    await page.locator('ion-router-outlet').evaluate((el: any) => {
-      el.swipeGesture = false;
-    });
-
-    await ionSwipeToGoBack(page, true);
-
-    await ionPageVisible(page, 'app-router-link-page');
-    await ionPageHidden(page, 'app-router-link');
-  });
-
   test('should swipe and go back', async ({ page }) => {
     await page.locator('#routerLink').click();
 

packages/angular/test/base/e2e/src/standalone/swipe-gesture-disabled.spec.ts

@@ -0,0 +1,22 @@
+import { test } from '@playwright/test';
+import { ionSwipeToGoBack } from '../../utils/drag-utils';
+import { ionPageVisible, ionPageHidden } from '../../utils/test-utils';
+
+test.describe('Swipe Gesture Disabled', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/standalone/swipe-gesture-disabled?ionic:mode=ios');
+  });
+
+  test('should not swipe back when swipeGesture is false', async ({ page }) => {
+    await ionPageVisible(page, 'app-swipe-gesture-disabled-main');
+
+    await page.locator('#swipe-disabled-details').click();
+    await ionPageVisible(page, 'app-swipe-gesture-disabled-details');
+    await ionPageHidden(page, 'app-swipe-gesture-disabled-main');
+
+    await ionSwipeToGoBack(page, true);
+
+    await ionPageVisible(page, 'app-swipe-gesture-disabled-details');
+    await ionPageHidden(page, 'app-swipe-gesture-disabled-main');
+  });
+});

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

@@ -53,6 +53,14 @@ export const routes: Routes = [
         ]
       },
       { path: 'tabs-basic', loadComponent: () => import('../tabs-basic/tabs-basic.component').then(c => c.TabsBasicComponent) },
+      {
+        path: 'swipe-gesture-disabled',
+        loadComponent: () => import('../swipe-gesture-disabled/swipe-gesture-disabled.component').then(c => c.SwipeGestureDisabledComponent),
+        children: [
+          { path: '', loadComponent: () => import('../swipe-gesture-disabled/swipe-gesture-disabled-main.component').then(c => c.SwipeGestureDisabledMainComponent) },
+          { path: 'details', loadComponent: () => import('../swipe-gesture-disabled/swipe-gesture-disabled-details.component').then(c => c.SwipeGestureDisabledDetailsComponent) }
+        ]
+      },
       {
         path: 'validation',
         children: [

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

@@ -74,6 +74,11 @@
         Tabs Basic Test
       </ion-label>
     </ion-item>
+    <ion-item routerLink="/standalone/swipe-gesture-disabled">
+      <ion-label>
+        Swipe Gesture Disabled Test
+      </ion-label>
+    </ion-item>
   </ion-list>
 
   <ion-list>

packages/angular/test/base/src/app/standalone/swipe-gesture-disabled/swipe-gesture-disabled-details.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-swipe-gesture-disabled-details',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button defaultHref="/standalone/swipe-gesture-disabled"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Details</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div>Details (swipe disabled)</div>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar]
+})
+export class SwipeGestureDisabledDetailsComponent {}

packages/angular/test/base/src/app/standalone/swipe-gesture-disabled/swipe-gesture-disabled-main.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { IonContent, IonItem, IonLabel, IonRouterLink } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-swipe-gesture-disabled-main',
+  template: `
+    <ion-content>
+      <ion-item routerLink="/standalone/swipe-gesture-disabled/details" id="swipe-disabled-details">
+        <ion-label>Details</ion-label>
+      </ion-item>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [IonContent, IonItem, IonLabel, IonRouterLink, RouterModule]
+})
+export class SwipeGestureDisabledMainComponent {}

packages/angular/test/base/src/app/standalone/swipe-gesture-disabled/swipe-gesture-disabled.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonRouterOutlet, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-swipe-gesture-disabled',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button defaultHref="/standalone"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Swipe Gesture Disabled</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-router-outlet [swipeGesture]="false"></ion-router-outlet>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonRouterOutlet, IonTitle, IonToolbar]
+})
+export class SwipeGestureDisabledComponent {}