chore: add server delay input to speed up Row Detail Cypress tests

Author: ghiscoding

src/app/examples/grid-rowdetail.component.html

@@ -33,6 +33,15 @@ <h2>
         <button class="btn btn-outline-secondary btn-xs btn-icon" (click)="changeDetailViewRowCount()" data-test="set-count-btn">
           Set
         </button>
+        <label for="serverdelay" class="ms-2">Server Delay: </label>
+        <input
+          id="serverdelay"
+          [(ngModel)]="serverWaitDelay"
+          type="number"
+          data-test="server-delay"
+          style="height: 26px; width: 55px"
+          title="input a fake timer delay to simulate slow server response"
+        />
       </span>
     </div>
     <div class="alert alert-{{ flashAlertType }} col-sm-6" *ngIf="message" data-test="flash-msg">

src/app/examples/grid-rowdetail.component.ts

@@ -12,6 +12,7 @@ import {
 import { RowDetailViewComponent } from './rowdetail-view.component';
 import { RowDetailPreloadComponent } from './rowdetail-preload.component';
 
+const FAKE_SERVER_DELAY = 250;
 const NB_ITEMS = 1000;
 
 @Component({
@@ -36,6 +37,7 @@ export class GridRowDetailComponent implements OnDestroy, OnInit {
   detailViewRowCount = 9;
   flashAlertType = 'info';
   message = '';
+  serverWaitDelay = FAKE_SERVER_DELAY;
 
   angularGridReady(angularGrid: AngularGridInstance) {
     this.angularGrid = angularGrid;
@@ -297,7 +299,7 @@ export class GridRowDetailComponent implements OnDestroy, OnInit {
 
         // resolve the data after delay specified
         resolve(itemDetail);
-      }, 1000);
+      }, this.serverWaitDelay);
     });
   }
 

test/cypress/e2e/example21.cy.ts

@@ -13,6 +13,11 @@ describe('Example 21 - Row Detail View', () => {
       .each(($child, index) => expect($child.text()).to.eq(titles[index]));
   });
 
+  it('should change server delay to 40ms for faster testing', () => {
+    cy.get('[data-test="set-count-btn"]').click();
+    cy.get('[data-test="server-delay"]').type('{backspace}');
+  });
+
   it('should display first few rows of Task 0 to 5', () => {
     const expectedTasks = ['Task 0', 'Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5'];