feat(tests): add more Cypress E2E tests for grouping (#584)

* feat(tests): add more Cypress E2E tests for grouping
ghiscoding · Sep 18, 2020 · 90d47e6 · 90d47e6
1 parent 18289d3
commit 90d47e6
Show file tree

Hide file tree

Showing 7 changed files with 204 additions and 34 deletions.
diff --git a/src/app/examples/grid-draggrouping.component.html b/src/app/examples/grid-draggrouping.component.html
@@ -4,19 +4,19 @@ <h2>{{title}}</h2>
 
   <form>
     <div class="row col-sm-12">
-      <button class="btn btn-default btn-xs" (click)="loadData(500)">
+      <button class="btn btn-default btn-xs" data-test="add-500-rows-btn" (click)="loadData(500)">
         500 rows
       </button>
-      <button class="btn btn-default btn-xs" (click)="loadData(50000)">
+      <button class="btn btn-default btn-xs" data-test="add-50k-rows-btn" (click)="loadData(50000)">
         50k rows
       </button>
-      <button class="btn btn-default btn-xs" (click)="clearGroupsAndSelects()">
+      <button class="btn btn-default btn-xs" data-test="clear-grouping-btn" (click)="clearGroupsAndSelects()">
         <i class="fa fa-times"></i> Clear grouping
       </button>
-      <button class="btn btn-default btn-xs" (click)="collapseAllGroups()">
+      <button class="btn btn-default btn-xs" data-test="collapse-all-btn" (click)="collapseAllGroups()">
         <i class="fa fa-compress"></i> Collapse all groups
       </button>
-      <button class="btn btn-default btn-xs" (click)="expandAllGroups()">
+      <button class="btn btn-default btn-xs" data-test="expand-all-btn" (click)="expandAllGroups()">
         <i class="fa fa-expand"></i> Expand all groups
       </button>
       <button class="btn btn-default btn-xs" (click)="toggleDraggableGroupingRow()">
@@ -28,13 +28,16 @@ <h2>{{title}}</h2>
     </div>
 
     <div class="row col-sm-12">
-      <button class="btn btn-default btn-xs" (click)="groupByDurationOrderByCount(false)">
+      <button class="btn btn-default btn-xs" data-test="group-duration-sort-value-btn"
+              (click)="groupByDurationOrderByCount(false)">
         Group by duration &amp; sort groups by value
       </button>
-      <button class="btn btn-default btn-xs" (click)="groupByDurationOrderByCount(true)">
+      <button class="btn btn-default btn-xs" data-test="group-duration-sort-count-btn"
+              (click)="groupByDurationOrderByCount(true)">
         Group by duration &amp; sort groups by count
       </button>
-      <button class="btn btn-default btn-xs" (click)="groupByDurationEffortDriven()">
+      <button class="btn btn-default btn-xs" data-test="group-duration-effort-btn"
+              (click)="groupByDurationEffortDriven()">
         Group by Duration then Effort-Driven
       </button>
       |
@@ -52,9 +55,9 @@ <h2>{{title}}</h2>
       <div class="form-group">
         <label for="field1" class="col-sm-2 control-label">Group by field(s)</label>
         <div class="col-sm-3"
-          *ngFor="let groupField of selectedGroupingFields; let i = index; trackBy: selectTrackByFn">
+             *ngFor="let groupField of selectedGroupingFields; let i = index; trackBy: selectTrackByFn">
           <select class="form-control col-sm-6" name="groupField{{i}}" [(ngModel)]="selectedGroupingFields[i]"
-            (ngModelChange)="groupByFieldName($event, i)">
+                  (ngModelChange)="groupByFieldName($event, i)">
             <option value=""></option>
             <option [ngValue]="field.id" *ngFor="let field of columnDefinitions">{{field.name}}</option>
           </select>
@@ -68,6 +71,6 @@ <h2>{{title}}</h2>
   </div>
 
   <angular-slickgrid gridId="grid19" [dataset]="dataset" [columnDefinitions]="columnDefinitions"
-    [gridOptions]="gridOptions" (onAngularGridCreated)="angularGridReady($event)">
+                     [gridOptions]="gridOptions" (onAngularGridCreated)="angularGridReady($event)">
   </angular-slickgrid>
 </div>
diff --git a/src/app/examples/grid-draggrouping.component.ts b/src/app/examples/grid-draggrouping.component.ts
@@ -116,7 +116,7 @@ export class GridDraggableGroupingComponent implements OnInit {
         groupTotalsFormatter: GroupTotalFormatters.avgTotalsPercentage,
         grouping: {
           getter: 'percentComplete',
-          formatter: (g) => `% Complete:  ${g.value}  <span style="color:green">(${g.count} items)</span>`,
+          formatter: (g) => `% Complete: ${g.value}  <span style="color:green">(${g.count} items)</span>`,
           aggregators: [
             new Aggregators.Sum('cost')
           ],

diff --git a/src/app/examples/grid-grouping.component.html b/src/app/examples/grid-grouping.component.html
@@ -2,57 +2,56 @@
   <h2>{{title}}</h2>
   <div class="subtitle" [innerHTML]="subTitle"></div>
   <div class="row col-sm-12">
-    <button class="btn btn-default btn-xs" (click)="loadData(500)">
+    <button class="btn btn-default btn-xs" data-test="add-500-rows-btn" (click)="loadData(500)">
       500 rows
     </button>
-    <button class="btn btn-default btn-xs" (click)="loadData(50000)">
+    <button class="btn btn-default btn-xs" data-test="add-50k-rows-btn" (click)="loadData(50000)">
       50k rows
     </button>
-    <button class="btn btn-default btn-xs" (click)="clearGrouping()">
+    <button class="btn btn-default btn-xs" data-test="clear-grouping-btn" (click)="clearGrouping()">
       <i class="fa fa-times"></i> Clear grouping
     </button>
-    <button class="btn btn-default btn-xs" (click)="collapseAllGroups()">
+    <button class="btn btn-default btn-xs" data-test="collapse-all-btn" (click)="collapseAllGroups()">
       <i class="fa fa-compress"></i> Collapse all groups
     </button>
-    <button class="btn btn-default btn-xs" (click)="expandAllGroups()">
+    <button class="btn btn-default btn-xs" data-test="expand-all-btn" (click)="expandAllGroups()">
       <i class="fa fa-expand"></i> Expand all groups
     </button>
-    <button class="btn btn-default btn-xs" (click)="exportToExcel()">
+    <button class="btn btn-default btn-xs" data-test="export-excel-btn" (click)="exportToExcel()">
       <i class="fa fa-file-excel-o text-success"></i> Export to Excel
     </button>
   </div>
   <hr />
   <div class="row col-sm-12">
-    <button class="btn btn-default btn-xs" (click)="groupByDuration()">
+    <button class="btn btn-default btn-xs" data-test="group-duration-sort-value-btn" (click)="groupByDuration()">
       Group by duration &amp; sort groups by value
     </button>
-    <button class="btn btn-default btn-xs" (click)="groupByDurationOrderByCount(false)">
+    <button class="btn btn-default btn-xs" data-test="group-duration-sort-count-btn"
+            (click)="groupByDurationOrderByCount(false)">
       Group by duration &amp; sort groups by count
     </button>
   </div>
   <div class="row col-sm-12">
-    <button class="btn btn-default btn-xs" (click)="groupByDurationOrderByCount(true)">
+    <button class="btn btn-default btn-xs" data-test="group-duration-sort-count-collapse-btn"
+            (click)="groupByDurationOrderByCount(true)">
       Group by duration &amp; sort groups by count, aggregate collapsed
     </button>
-    <button class="btn btn-default btn-xs" (click)="groupByDurationEffortDriven()">
+    <button class="btn btn-default btn-xs" data-test="group-duration-effort-btn"
+            (click)="groupByDurationEffortDriven()">
       Group by duration then effort-driven
     </button>
-    <button class="btn btn-default btn-xs" (click)="groupByDurationEffortDrivenPercent()">
+    <button class="btn btn-default btn-xs" data-test="group-duration-effort-percent-btn"
+            (click)="groupByDurationEffortDrivenPercent()">
       Group by duration then effort-driven then percent.
     </button>
     <span [hidden]="!processing">
       <i class="fa fa-refresh fa-spin fa-lg fa-fw"></i>
     </span>
   </div>
 
-  <angular-slickgrid gridId="grid2"
-                     [dataset]="dataset"
-                     [columnDefinitions]="columnDefinitions"
-                     [gridOptions]="gridOptions"
-                     (onGridBeforeExportToFile)="processing = true"
-                     (onGridAfterExportToFile)="processing = false"
-                     (onGridBeforeExportToExcel)="processing = true"
-                     (onGridAfterExportToExcel)="processing = false"
-                     (onAngularGridCreated)="angularGridReady($event)">
+  <angular-slickgrid gridId="grid14" [dataset]="dataset" [columnDefinitions]="columnDefinitions"
+                     [gridOptions]="gridOptions" (onGridBeforeExportToFile)="processing = true"
+                     (onGridAfterExportToFile)="processing = false" (onGridBeforeExportToExcel)="processing = true"
+                     (onGridAfterExportToExcel)="processing = false" (onAngularGridCreated)="angularGridReady($event)">
   </angular-slickgrid>
 </div>
diff --git a/src/app/examples/grid-grouping.component.ts b/src/app/examples/grid-grouping.component.ts
@@ -20,7 +20,7 @@ import {
   templateUrl: './grid-grouping.component.html'
 })
 export class GridGroupingComponent implements OnInit {
-  title = 'Example 14: Grouping';
+  title = 'Example 14: Grouping & Aggregators';
   subTitle = `
   (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Grouping-&-Aggregators" target="_blank">Wiki docs</a>)
   <ul>

diff --git a/test/cypress/integration/example14.spec.js b/test/cypress/integration/example14.spec.js
@@ -0,0 +1,78 @@
+/// <reference types="cypress" />
+
+describe('Example 14 - Grouping & Aggregators', () => {
+  const fullTitles = ['#', 'Title', 'Duration', '% Complete', 'Start', 'Finish', 'Cost', 'Effort Driven'];
+  const GRID_ROW_HEIGHT = 35;
+
+  it('should display Example title', () => {
+    cy.visit(`${Cypress.config('baseExampleUrl')}/grouping`);
+    cy.get('h2').should('contain', 'Example 14: Grouping & Aggregators');
+  });
+
+  it('should have exact column titles on 1st grid', () => {
+    cy.get('#grid14')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  describe('Grouping Tests', () => {
+    it('should "Group by Duration & sort groups by value" then Collapse All and expect only group titles', () => {
+      cy.get('[data-test="add-50k-rows-btn"]').click();
+      cy.get('[data-test="group-duration-sort-value-btn"]').click();
+      cy.get('[data-test="collapse-all-btn"]').click();
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 1');
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 2');
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 3');
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 4');
+    });
+
+    it('should click on Expand All columns and expect 1st row as grouping title and 2nd row as a regular row', () => {
+      cy.get('[data-test="add-50k-rows-btn"]').click();
+      cy.get('[data-test="group-duration-sort-value-btn"]').click();
+      cy.get('[data-test="expand-all-btn"]').click();
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'Task');
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', '0');
+    });
+
+    it('should "Group by Duration then Effort-Driven" and expect 1st row to be expanded, 2nd row to be collapsed and 3rd row to have group totals', () => {
+      cy.get('[data-test="group-duration-effort-btn"]').click();
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1);
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: False');
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1);
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: True');
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"].slick-group-totals.slick-group-level-0 .slick-cell:nth(2)`).should('contain', 'Total: 0');
+    });
+
+    it('should "Group by Duration then Effort-Driven then Percent" and expect fist 2 rows to be expanded, 3rd row to be collapsed then 4th row to have group total', () => {
+      cy.get('[data-test="group-duration-effort-percent-btn"]').click();
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1);
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: False');
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"].slick-group-level-2 .slick-group-toggle.collapsed`).should('have.length', 1);
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"].slick-group-level-2 .slick-group-title`).contains(/^% Complete: [0-9]/);
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"].slick-group-totals.slick-group-level-2 .slick-cell:nth(3)`).contains(/^Avg: [0-9]\%$/);
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"].slick-group-totals.slick-group-level-2`)
+        .find('.slick-cell:nth(3)').contains('Avg: ');
+    });
+  });
+});
diff --git a/test/cypress/integration/example19.spec.js b/test/cypress/integration/example19.spec.js
@@ -0,0 +1,90 @@
+/// <reference types="cypress" />
+
+describe('Example 19 - Draggable Grouping & Aggregators', () => {
+  const fullTitles = ['Title', 'Duration', '% Complete', 'Start', 'Finish', 'Cost', 'Effort Driven'];
+  const GRID_ROW_HEIGHT = 35;
+
+  it('should display Example title', () => {
+    cy.visit(`${Cypress.config('baseExampleUrl')}/draggrouping`);
+    cy.get('h2').should('contain', 'Example 19: Draggable Grouping & Aggregators');
+  });
+
+  it('should have exact column titles on 1st grid', () => {
+    cy.get('#grid19')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  describe('Grouping Tests', () => {
+    it('should "Group by Duration & sort groups by value" then Collapse All and expect only group titles', () => {
+      cy.get('[data-test="add-50k-rows-btn"]').click();
+      cy.get('[data-test="group-duration-sort-value-btn"]').click();
+      cy.get('[data-test="collapse-all-btn"]').click();
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 1');
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 2');
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 3');
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 4');
+    });
+
+    it('should click on Expand All columns and expect 1st row as grouping title and 2nd row as a regular row', () => {
+      cy.get('[data-test="add-50k-rows-btn"]').click();
+      cy.get('[data-test="group-duration-sort-value-btn"]').click();
+      cy.get('[data-test="expand-all-btn"]').click();
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'Task');
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', '0');
+    });
+
+    it('should show 1 column title (Duration) shown in the pre-header section', () => {
+      cy.get('.slick-dropped-grouping:nth(0) div').contains('Duration');
+    });
+
+    it('should "Group by Duration then Effort-Driven" and expect 1st row to be expanded, 2nd row to be expanded and 3rd row to be a regular row', () => {
+      cy.get('[data-test="group-duration-effort-btn"]').click();
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1);
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: False');
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'Task');
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', '0');
+    });
+
+    it('should show 2 column titles (Duration, Effort Driven) shown in the pre-header section', () => {
+      cy.get('.slick-dropped-grouping:nth(0) div').contains('Duration');
+      cy.get('.slick-dropped-grouping:nth(1) div').contains('Effort Driven');
+    });
+
+    it('should be able to drag and swap grouped column titles inside the pre-header', () => {
+      cy.get('.slick-dropped-grouping:nth(0) div')
+        .contains('Duration')
+        .trigger('mousedown', 'bottom', { which: 1 });
+
+      cy.get('.slick-dropped-grouping:nth(1) div')
+        .contains('Effort Driven')
+        .trigger('mousemove', 'bottomRight')
+        .trigger('mouseup', 'bottomRight', { force: true });
+    });
+
+    it('should expect the grouping to be swapped as well in the grid', () => {
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven: False');
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1);
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-title`).should('contain', 'Duration: 0');
+
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'Task');
+      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', '0');
+    });
+  });
+});
diff --git a/test/cypress/package.json b/test/cypress/package.json
@@ -11,7 +11,7 @@
   "author": "Ghislain B.",
   "license": "MIT",
   "devDependencies": {
-    "cypress": "^5.1.0",
+    "cypress": "^5.2.0",
     "mocha": "^5.2.0",
     "mochawesome": "^3.1.2",
     "mochawesome-merge": "^1.0.7",