fix(addons): onGroupChanged callback should be executed with Draggable

- add E2E tests for the real fix that was applied in Slickgrid-Universal [PR](ghiscoding/slickgrid-universal#826)

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>

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

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');
+    });
   });
 });