refactor(header): re-create header also after closing grid menu

ghiscoding · Jun 18, 2020 · e63faad · e63faad
1 parent bbc8b90
commit e63faad
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 11 deletions.
diff --git a/packages/common/src/services/__tests__/groupingAndColspan.service.spec.ts b/packages/common/src/services/__tests__/groupingAndColspan.service.spec.ts
@@ -78,7 +78,6 @@ const template =
 describe('GroupingAndColspanService', () => {
   let service: GroupingAndColspanService;
   let slickgridEventHandler: SlickEventHandler;
-  let slickgridEvent;
 
   beforeEach(() => {
     const div = document.createElement('div');
@@ -87,14 +86,12 @@ describe('GroupingAndColspanService', () => {
 
     service = new GroupingAndColspanService(mockExtensionUtility, extensionServiceStub);
     slickgridEventHandler = service.eventHandler;
-    slickgridEvent = new Slick.Event();
   });
 
   afterEach(() => {
     jest.clearAllMocks();
     service.dispose();
     gridStub.getOptions = () => gridOptionMock;
-    slickgridEvent.unsubscribe();
   });
 
   it('should create the service', () => {
@@ -208,13 +205,15 @@ describe('GroupingAndColspanService', () => {
 
     it('should call the "renderPreHeaderRowGroupingTitles" after changing column visibility from column picker', () => {
       const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
-      const instanceMock = { onColumnsChanged: slickgridEvent };
+      const slickEvent1 = new Slick.Event();
+      const slickEvent2 = new Slick.Event();
+      const instanceMock = { onColumnsChanged: slickEvent1, onMenuClose: slickEvent2 };
       const columnsMock = [{ id: 'field1', field: 'field1', width: 100, cssClass: 'red' }] as Column[];
       const extensionMock = { name: ExtensionName.columnPicker, addon: instanceMock, instance: instanceMock as SlickColumnPicker, class: null };
       jest.spyOn(extensionServiceStub, 'getExtensionByName').mockReturnValue(extensionMock);
-      service.init(gridStub);
 
-      slickgridEvent.notify({ columns: columnsMock }, new Slick.EventData(), gridStub);
+      service.init(gridStub);
+      slickEvent1.notify({ columns: columnsMock }, new Slick.EventData(), gridStub);
       jest.runAllTimers(); // fast-forward timer
 
       expect(spy).toHaveBeenCalledTimes(3);
@@ -224,20 +223,40 @@ describe('GroupingAndColspanService', () => {
 
     it('should call the "renderPreHeaderRowGroupingTitles" after changing column visibility from grid menu', () => {
       const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
-      const instanceMock = { onColumnsChanged: slickgridEvent };
+      const slickEvent1 = new Slick.Event();
+      const slickEvent2 = new Slick.Event();
+      const instanceMock = { onColumnsChanged: slickEvent1, onMenuClose: slickEvent2 };
       const columnsMock = [{ id: 'field1', field: 'field1', width: 100, cssClass: 'red' }] as Column[];
       const extensionMock = { name: ExtensionName.columnPicker, addon: instanceMock, instance: instanceMock as SlickGridMenu, class: null };
       jest.spyOn(extensionServiceStub, 'getExtensionByName').mockReturnValue(extensionMock);
-      service.init(gridStub);
 
-      slickgridEvent.notify({ columns: columnsMock }, new Slick.EventData(), gridStub);
+      service.init(gridStub);
+      slickEvent1.notify({ columns: columnsMock }, new Slick.EventData(), gridStub);
       jest.runAllTimers(); // fast-forward timer
 
       expect(spy).toHaveBeenCalledTimes(3);
       expect(setTimeout).toHaveBeenCalledTimes(1);
       expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 75);
     });
 
+    it('should call the "renderPreHeaderRowGroupingTitles" after changing column visibility & closing the grid menu', () => {
+      const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
+      const slickEvent1 = new Slick.Event();
+      const slickEvent2 = new Slick.Event();
+      const instanceMock = { onColumnsChanged: slickEvent1, onMenuClose: slickEvent2 };
+      const columnsMock = [{ id: 'field1', field: 'field1', width: 100, cssClass: 'red' }] as Column[];
+      const extensionMock = { name: ExtensionName.columnPicker, addon: instanceMock, instance: instanceMock as SlickGridMenu, class: null };
+      jest.spyOn(extensionServiceStub, 'getExtensionByName').mockReturnValue(extensionMock);
+
+      service.init(gridStub);
+      slickEvent2.notify({ allColumns: columnsMock }, new Slick.EventData(), gridStub);
+      jest.runAllTimers(); // fast-forward timer
+
+      expect(spy).toHaveBeenCalledTimes(2);
+      expect(setTimeout).toHaveBeenCalledTimes(1);
+      expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 75);
+    });
+
     it('should call the "renderPreHeaderRowGroupingTitles" after calling the "translateGroupingAndColSpan" method', () => {
       gridOptionMock.enableTranslate = true;
       const renderSpy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');

diff --git a/packages/common/src/services/groupingAndColspan.service.ts b/packages/common/src/services/groupingAndColspan.service.ts
@@ -69,9 +69,10 @@ export class GroupingAndColspanService {
           this._eventHandler.subscribe(columnPickerExtension.instance.onColumnsChanged, () => this.renderPreHeaderRowGroupingTitles());
         }
 
-        const gridMenuExtension = this.extensionService.getExtensionByName<SlickGridMenu>(ExtensionName.gridMenu);
-        if (gridMenuExtension?.instance?.onColumnsChanged) {
+        const gridMenuExtension = this.extensionService.getExtensionByName(ExtensionName.gridMenu);
+        if (gridMenuExtension && gridMenuExtension.instance && gridMenuExtension.instance.onColumnsChanged && gridMenuExtension.instance.onMenuClose) {
           this._eventHandler.subscribe(gridMenuExtension.instance.onColumnsChanged, () => this.renderPreHeaderRowGroupingTitles());
+          this._eventHandler.subscribe(gridMenuExtension.instance.onMenuClose, () => this.renderPreHeaderRowGroupingTitles());
         }
 
         // we also need to re-create after a grid resize