fix(resizer): resize without container (#1117)

* fix(resizeservice): initial size without container this makes sure that the grid gets a proper initial size rendered even if autoResize options container isn't set #ghiscoding/Angular-Slickgrid#1266 make sure that example02 does not define an autoresize.container, and show off that a min height is set
ghiscoding · Sep 23, 2023 · 9013522 · 9013522
1 parent c6a0957
commit 9013522
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 2 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example02.ts b/examples/vite-demo-vanilla-bundle/src/examples/example02.ts
@@ -182,7 +182,6 @@ export default class Example2 {
 
     this.gridOptions = {
       autoResize: {
-        container: '.demo-container',
         bottomPadding: 30,
         rightPadding: 10
       },

diff --git a/packages/common/src/services/__tests__/resizer.service.spec.ts b/packages/common/src/services/__tests__/resizer.service.spec.ts
@@ -298,6 +298,22 @@ describe('Resizer Service', () => {
       expect(serviceCalculateSpy).toReturnWith({ height: fixedHeight, width: fixedWidth });
     });
 
+    it('should calculate new dimensions even when no container element is defined', () => {
+      const newHeight = 440;
+      const fixedWidth = 800;
+      mockGridOptions.gridWidth = fixedWidth;
+      mockGridOptions.autoResize!.container = undefined;
+      service.init(gridStub, divContainer);
+      const serviceCalculateSpy = jest.spyOn(service, 'calculateGridNewDimensions');
+
+      Object.defineProperty(window, 'innerHeight', { writable: true, configurable: true, value: newHeight });
+      window.dispatchEvent(new Event('resize'));
+      service.calculateGridNewDimensions(mockGridOptions);
+
+      // same comment as previous test, the height dimension will work because calculateGridNewDimensions() uses "window.innerHeight"
+      expect(serviceCalculateSpy).toReturnWith({ height: (newHeight - DATAGRID_BOTTOM_PADDING), width: fixedWidth });
+    });
+
     it('should calculate new dimensions when calculateGridNewDimensions is called', () => {
       const newHeight = 440;
       const fixedWidth = 800;

diff --git a/packages/common/src/services/resizer.service.ts b/packages/common/src/services/resizer.service.ts
@@ -214,7 +214,7 @@ export class ResizerService {
     const autoResizeOptions = gridOptions?.autoResize ?? {};
     const gridElmOffset = getHtmlElementOffset(this._gridDomElm);
 
-    if (!window || this._pageContainerElm === undefined || gridElmOffset === undefined) {
+    if (!window || gridElmOffset === undefined) {
       return null;
     }
 

diff --git a/test/cypress/e2e/example02.cy.ts b/test/cypress/e2e/example02.cy.ts
@@ -11,6 +11,12 @@ describe('Example 02 - Grouping & Aggregators', { retries: 1 }, () => {
     cy.get('h3 span.subtitle').should('contain', '(with Material Theme)');
   });
 
+  it('should have a min size, to verify that autoResize works properly', () => {
+    cy.get('.grid2')
+      .invoke('width')
+      .should('be.gt', 10);
+  });
+
   it('should have exact column titles on 1st grid', () => {
     cy.get('.grid2')
       .find('.slick-header-columns')