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/lazy/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('/lazy/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/lazy/app-lazy/app.module.ts

@@ -29,6 +29,9 @@ import { AccordionComponent } from '../accordion/accordion.component';
 import { AccordionModalComponent } from '../accordion/accordion-modal/accordion-modal.component';
 import { TabsBasicComponent } from '../tabs-basic/tabs-basic.component';
 import { TemplateFormComponent } from '../template-form/template-form.component';
+import { SwipeGestureDisabledComponent } from '../swipe-gesture-disabled/swipe-gesture-disabled.component';
+import { SwipeGestureDisabledMainComponent } from '../swipe-gesture-disabled/swipe-gesture-disabled-main.component';
+import { SwipeGestureDisabledDetailsComponent } from '../swipe-gesture-disabled/swipe-gesture-disabled-details.component';
 
 @NgModule({
   declarations: [
@@ -55,7 +58,10 @@ import { TemplateFormComponent } from '../template-form/template-form.component'
     AccordionComponent,
     AccordionModalComponent,
     TabsBasicComponent,
-    TemplateFormComponent
+    TemplateFormComponent,
+    SwipeGestureDisabledComponent,
+    SwipeGestureDisabledMainComponent,
+    SwipeGestureDisabledDetailsComponent
   ],
   imports: [
     CommonModule,

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

@@ -20,6 +20,9 @@ import { AlertComponent } from '../alert/alert.component';
 import { AccordionComponent } from '../accordion/accordion.component';
 import { TabsBasicComponent } from '../tabs-basic/tabs-basic.component';
 import { TemplateFormComponent } from '../template-form/template-form.component';
+import { SwipeGestureDisabledComponent } from '../swipe-gesture-disabled/swipe-gesture-disabled.component';
+import { SwipeGestureDisabledMainComponent } from '../swipe-gesture-disabled/swipe-gesture-disabled-main.component';
+import { SwipeGestureDisabledDetailsComponent } from '../swipe-gesture-disabled/swipe-gesture-disabled-details.component';
 
 export const routes: Routes = [
   {
@@ -88,6 +91,20 @@ export const routes: Routes = [
       {
         path: 'form-controls/range',
         loadChildren: () => import('../form-controls/range/range.module').then(m => m.RangeModule)
+      },
+      {
+        path: 'swipe-gesture-disabled',
+        component: SwipeGestureDisabledComponent,
+        children: [
+          {
+            path: '',
+            component: SwipeGestureDisabledMainComponent
+          },
+          {
+            path: 'details',
+            component: SwipeGestureDisabledDetailsComponent
+          }
+        ]
       }
     ]
   },

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

@@ -85,5 +85,10 @@
         Popovers
       </ion-label>
     </ion-item>
+    <ion-item routerLink="/lazy/swipe-gesture-disabled">
+      <ion-label>
+        Swipe Gesture Disabled
+      </ion-label>
+    </ion-item>
   </ion-list>
 </ion-content>

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

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-swipe-gesture-disabled-details',
+    template: `
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button defaultHref="/lazy/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: false
+})
+export class SwipeGestureDisabledDetailsComponent {}

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

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-swipe-gesture-disabled-main',
+    template: `
+      <ion-content>
+        <ion-item routerLink="/lazy/swipe-gesture-disabled/details" id="swipe-disabled-details">
+          <ion-label>Details</ion-label>
+        </ion-item>
+      </ion-content>
+    `,
+    standalone: false
+})
+export class SwipeGestureDisabledMainComponent {}

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

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-swipe-gesture-disabled',
+    template: `
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button defaultHref="/lazy"></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: false
+})
+export class SwipeGestureDisabledComponent {}