From c29e82ba06815d4685a4a95b3e14ef6c012b14ba Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Wed, 30 Nov 2022 22:12:35 -0500
Subject: [PATCH] fix(addons): onGroupChanged callback should be executed with
 Draggable - add E2E tests for the real fix that was applied in
 Slickgrid-Universal
 [PR](https://github.com/ghiscoding/slickgrid-universal/pull/826)

---
 src/examples/slickgrid/example18.html |  2 +-
 src/examples/slickgrid/example18.ts   |  2 +-
 test/cypress/e2e/example18.cy.js      | 21 ++++++++++++++++++++-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/examples/slickgrid/example18.html b/src/examples/slickgrid/example18.html
index c87e61edd..86fd802f5 100644
--- a/src/examples/slickgrid/example18.html
+++ b/src/examples/slickgrid/example18.html
@@ -70,7 +70,7 @@ <h2>
         <div class="form-row">
           <div class="row form-group">
             <label for="field1" class="col-sm-3 mb-2">Group by field(s)</label>
-            <div class="form-group col-md-3" repeat.for="groupField of selectedGroupingFields">
+            <div class="form-group col-md-3 grouping-selects" repeat.for="groupField of selectedGroupingFields">
               <select class="form-select" change.delegate="groupByFieldName(column.id, $index)"
                       value.bind="selectedGroupingFields[$index]">
                 <option model.bind="''">...</option>
diff --git a/src/examples/slickgrid/example18.ts b/src/examples/slickgrid/example18.ts
index 9190d7d8c..b48bf405c 100644
--- a/src/examples/slickgrid/example18.ts
+++ b/src/examples/slickgrid/example18.ts
@@ -307,7 +307,7 @@ export class Example18 {
 
   groupByDuration() {
     this.clearGrouping();
-    if (this.draggableGroupingPlugin && this.draggableGroupingPlugin.setDroppedGroups) {
+    if (this.draggableGroupingPlugin?.setDroppedGroups) {
       this.showPreHeader();
       this.draggableGroupingPlugin.setDroppedGroups('duration');
       this.gridObj.invalidate(); // invalidate all rows and re-render
diff --git a/test/cypress/e2e/example18.cy.js b/test/cypress/e2e/example18.cy.js
index 57d3a23c8..797ff52d3 100644
--- a/test/cypress/e2e/example18.cy.js
+++ b/test/cypress/e2e/example18.cy.js
@@ -22,6 +22,9 @@ describe('Example 18 - Draggable Grouping & Aggregators', { retries: 1 }, () =>
       cy.get('[data-test="group-duration-sort-value-btn"]').click();
       cy.get('[data-test="collapse-all-btn"]').click();
 
+      cy.get('.grouping-selects select:nth(0)').should('have.value', 'Duration');
+      cy.get('.grouping-selects select:nth(1)').should('not.have.value');
+      cy.get('.grouping-selects select:nth(2)').should('not.have.value');
       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');
 
@@ -45,6 +48,9 @@ describe('Example 18 - Draggable Grouping & Aggregators', { retries: 1 }, () =>
 
     it('should show 1 column title (Duration) shown in the pre-header section', () => {
       cy.get('.slick-dropped-grouping:nth(0) div').contains('Duration');
+      cy.get('.grouping-selects select:nth(0)').should('have.value', 'Duration');
+      cy.get('.grouping-selects select:nth(1)').should('not.have.value');
+      cy.get('.grouping-selects select:nth(2)').should('not.have.value');
     });
 
     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', () => {
@@ -60,9 +66,12 @@ describe('Example 18 - Draggable Grouping & Aggregators', { retries: 1 }, () =>
       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', () => {
+    it('should show 2 column titles (Duration, Effort-Driven) shown in the pre-header section & same select dropdown', () => {
       cy.get('.slick-dropped-grouping:nth(0) div').contains('Duration');
       cy.get('.slick-dropped-grouping:nth(1) div').contains('Effort-Driven');
+      cy.get('.grouping-selects select:nth(0)').should('have.value', 'Duration');
+      cy.get('.grouping-selects select:nth(1)').should('have.value', 'Effort-Driven');
+      cy.get('.grouping-selects select:nth(2)').should('not.have.value');
     });
 
     it('should be able to drag and swap grouped column titles inside the pre-header', () => {
@@ -72,6 +81,9 @@ describe('Example 18 - Draggable Grouping & Aggregators', { retries: 1 }, () =>
 
       cy.get('.slick-dropped-grouping:nth(0) div').contains('Effort-Driven');
       cy.get('.slick-dropped-grouping:nth(1) div').contains('Duration');
+      cy.get('.grouping-selects select:nth(0)').should('have.value', 'Effort-Driven');
+      cy.get('.grouping-selects select:nth(1)').should('have.value', 'Duration');
+      cy.get('.grouping-selects select:nth(2)').should('not.have.value');
     });
 
     it('should expect the grouping to be swapped as well in the grid', () => {
@@ -179,5 +191,12 @@ describe('Example 18 - Draggable Grouping & Aggregators', { retries: 1 }, () =>
       cy.get('.right-footer')
         .contains('500 of 500 items');
     });
+
+    it('should clear all grouping and expect all select dropdown to be cleared too', () => {
+      cy.get('[data-test="clear-grouping-btn"]').click();
+      cy.get('.grouping-selects select:nth(0)').should('not.have.value');
+      cy.get('.grouping-selects select:nth(1)').should('not.have.value');
+      cy.get('.grouping-selects select:nth(2)').should('not.have.value');
+    });
   });
 });