test(angular): add reorder-group test

Author: brandyscarney

packages/angular/test/base/e2e/src/standalone/reorder-group.spec.ts

@@ -0,0 +1,25 @@
+import { expect } from '@playwright/test';
+import { test } from '@playwright/test';
+import { dragElementBy } from '../../utils/drag-element';
+
+test.describe('reorder-group: angular standalone', () => {
+  test('should reorder the items', async ({ page }) => {
+    await page.goto('/standalone/reorder-group');
+
+    // Get initial order
+    const initialItems = await page.locator('ion-item').allTextContents();
+    expect(initialItems).toEqual(['Item 1', 'Item 2', 'Item 3']);
+
+    const reorderGroup = page.locator('ion-reorder-group');
+
+    // Drag the first item down to move it to the end (below Item 3)
+    await dragElementBy(reorderGroup.locator('ion-reorder').first(), page, 0, 300);
+
+    // Wait for the reorder to complete
+    await page.waitForTimeout(500);
+
+    // Verify the new order - Item 1 should now be at the end
+    const finalItems = await page.locator('ion-item').allTextContents();
+    expect(finalItems).toEqual(['Item 2', 'Item 3', 'Item 1']);
+  });
+});

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

@@ -19,6 +19,7 @@ export const routes: Routes = [
       { path: 'providers', loadComponent: () => import('../providers/providers.component').then(c => c.ProvidersComponent) },
       { path: 'overlay-controllers', loadComponent: () => import('../overlay-controllers/overlay-controllers.component').then(c => c.OverlayControllersComponent) },
       { path: 'button', loadComponent: () => import('../button/button.component').then(c => c.ButtonComponent) },
+      { path: 'reorder-group', loadComponent: () => import('../reorder-group/reorder-group.component').then(c => c.ReorderGroupComponent) },
       { path: 'icon', loadComponent: () => import('../icon/icon.component').then(c => c.IconComponent) },
       { path: 'split-pane', redirectTo: '/standalone/split-pane/inbox', pathMatch: 'full' },
       {

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

@@ -28,6 +28,11 @@
         Icon Test
       </ion-label>
     </ion-item>
+    <ion-item routerLink="/standalone/reorder-group">
+      <ion-label>
+        Reorder Group Test
+      </ion-label>
+    </ion-item>
   </ion-list>
 
   <ion-list>

packages/angular/test/base/src/app/standalone/reorder-group/reorder-group.component.ts

@@ -0,0 +1,36 @@
+import { Component } from "@angular/core";
+import { IonItem, IonLabel, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
+import { ReorderEndCustomEvent } from "@ionic/angular";
+
+@Component({
+  selector: 'app-reorder-group',
+  template: `
+    <ion-reorder-group disabled="false" (ionReorderEnd)="onReorderEnd($event)">
+      <ion-item>
+        <ion-reorder slot="end"></ion-reorder>
+        <ion-label>Item 1</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-reorder slot="end"></ion-reorder>
+        <ion-label>Item 2</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-reorder slot="end"></ion-reorder>
+        <ion-label>Item 3</ion-label>
+      </ion-item>
+    </ion-reorder-group>
+  `,
+  standalone: true,
+  imports: [IonItem, IonLabel, IonReorder, IonReorderGroup]
+})
+export class ReorderGroupComponent {
+  onReorderEnd(event: ReorderEndCustomEvent) {
+    if (event.detail.from !== event.detail.to) {
+      console.log('ionReorderEnd: Dragged from index', event.detail.from, 'to', event.detail.to);
+    } else {
+      console.log('ionReorderEnd: No position change occurred');
+    }
+
+    event.detail.complete();
+  }
+}