test: react component init sizing

packages/dockview/jest.config.js

@@ -19,6 +19,7 @@ module.exports = {
     coveragePathIgnorePatterns: ['/node_modules/'],
     modulePathIgnorePatterns: [
         '<rootDir>/packages/dockview/src/__tests__/__mocks__',
+        '<rootDir>/packages/dockview/src/__tests__/__test_utils__',
     ],
     coverageDirectory: '<rootDir>/packages/dockview/coverage/',
     testResultsProcessor: 'jest-sonar-reporter',

packages/dockview/src/__tests__/__test_utils__/utils.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+export function setMockRefElement(node: Partial<HTMLElement>): void {
+    const mockRef = {
+        get current() {
+            return node;
+        },
+        set current(_value) {
+            //noop
+        },
+    };
+
+    jest.spyOn(React, 'useRef').mockReturnValue(mockRef);
+}

packages/dockview/src/__tests__/react/dockview/dockview.spec.tsx

@@ -7,7 +7,7 @@ import {
     DockviewReadyEvent,
 } from '../../../react/dockview/dockview';
 import { PanelCollection } from '../../../react/types';
-import { Orientation } from '../../../splitview/core/splitview';
+import { setMockRefElement } from '../../__test_utils__/utils';
 
 describe('gridview react', () => {
     let components: PanelCollection<IDockviewPanelProps>;
@@ -31,4 +31,22 @@ describe('gridview react', () => {
 
         expect(api).toBeTruthy();
     });
+
+    test('is sized to container', () => {
+        setMockRefElement({
+            clientHeight: 450,
+            clientWidth: 650,
+            appendChild: jest.fn(),
+        });
+        let api: DockviewApi | undefined;
+
+        const onReady = (event: DockviewReadyEvent) => {
+            api = event.api;
+        };
+
+        render(<DockviewReact components={components} onReady={onReady} />);
+
+        expect(api.width).toBe(650);
+        expect(api.height).toBe(450);
+    });
 });

packages/dockview/src/__tests__/react/gridview/gridview.spec.tsx

@@ -8,6 +8,7 @@ import {
 } from '../../../react/gridview/gridview';
 import { PanelCollection } from '../../../react/types';
 import { Orientation } from '../../../splitview/core/splitview';
+import { setMockRefElement } from '../../__test_utils__/utils';
 
 describe('gridview react', () => {
     let components: PanelCollection<IGridviewPanelProps>;
@@ -37,4 +38,28 @@ describe('gridview react', () => {
 
         expect(api).toBeTruthy();
     });
+
+    test('is sized to container', () => {
+        setMockRefElement({
+            clientHeight: 450,
+            clientWidth: 650,
+            appendChild: jest.fn(),
+        });
+        let api: GridviewApi | undefined;
+
+        const onReady = (event: GridviewReadyEvent) => {
+            api = event.api;
+        };
+
+        render(
+            <GridviewReact
+                orientation={Orientation.VERTICAL}
+                components={components}
+                onReady={onReady}
+            />
+        );
+
+        expect(api.width).toBe(650);
+        expect(api.height).toBe(450);
+    });
 });

packages/dockview/src/__tests__/react/paneview/paneview.spec.tsx

@@ -7,6 +7,7 @@ import {
     PaneviewReadyEvent,
 } from '../../../react/paneview/paneview';
 import { PanelCollection } from '../../../react/types';
+import { setMockRefElement } from '../../__test_utils__/utils';
 
 describe('gridview react', () => {
     let components: PanelCollection<IPaneviewPanelProps>;
@@ -30,4 +31,22 @@ describe('gridview react', () => {
 
         expect(api).toBeTruthy();
     });
+
+    test('is sized to container', () => {
+        setMockRefElement({
+            clientHeight: 450,
+            clientWidth: 650,
+            appendChild: jest.fn(),
+        });
+        let api: PaneviewApi | undefined;
+
+        const onReady = (event: PaneviewReadyEvent) => {
+            api = event.api;
+        };
+
+        render(<PaneviewReact components={components} onReady={onReady} />);
+
+        expect(api.width).toBe(650);
+        expect(api.height).toBe(450);
+    });
 });

packages/dockview/src/__tests__/react/splitview/splitview.spec.tsx

@@ -8,6 +8,7 @@ import {
 } from '../../../react/splitview/splitview';
 import { PanelCollection } from '../../../react/types';
 import { Orientation } from '../../../splitview/core/splitview';
+import { setMockRefElement } from '../../__test_utils__/utils';
 
 describe('splitview react', () => {
     let components: PanelCollection<ISplitviewPanelProps>;
@@ -37,4 +38,28 @@ describe('splitview react', () => {
 
         expect(api).toBeTruthy();
     });
+
+    test('is sized to container', () => {
+        setMockRefElement({
+            clientHeight: 450,
+            clientWidth: 650,
+            appendChild: jest.fn(),
+        });
+        let api: SplitviewApi | undefined;
+
+        const onReady = (event: SplitviewReadyEvent) => {
+            api = event.api;
+        };
+
+        render(
+            <SplitviewReact
+                orientation={Orientation.VERTICAL}
+                components={components}
+                onReady={onReady}
+            />
+        );
+
+        expect(api.width).toBe(650);
+        expect(api.height).toBe(450);
+    });
 });

packages/dockview/src/api/component.api.ts

@@ -109,6 +109,14 @@ export class SplitviewApi {
 }
 
 export class PaneviewApi {
+    get width() {
+        return this.component.width;
+    }
+
+    get height() {
+        return this.component.height;
+    }
+
     get minimumSize() {
         return this.component.minimumSize;
     }
@@ -165,6 +173,14 @@ export class PaneviewApi {
 }
 
 export class GridviewApi {
+    get width() {
+        return this.component.width;
+    }
+
+    get height() {
+        return this.component.height;
+    }
+
     get minimumHeight() {
         return this.component.minimumHeight;
     }
@@ -252,6 +268,14 @@ export class GridviewApi {
 }
 
 export class DockviewApi {
+    get width() {
+        return this.component.width;
+    }
+
+    get height() {
+        return this.component.height;
+    }
+
     get minimumHeight() {
         return this.component.minimumHeight;
     }

packages/dockview/src/gridview/baseComponentGridview.ts

@@ -46,6 +46,8 @@ export interface IGridPanelView extends IGridView, IPanel {
 export interface IBaseGrid<T extends IGridPanelView> {
     readonly element: HTMLElement;
     readonly id: string;
+    readonly width: number;
+    readonly height: number;
     readonly minimumHeight: number;
     readonly maximumHeight: number;
     readonly minimumWidth: number;

packages/dockview/src/paneview/paneviewComponent.ts

@@ -120,6 +120,8 @@ export interface AddPaneviewCompponentOptions {
 }
 
 export interface IPaneviewComponent extends IDisposable {
+    readonly width: number;
+    readonly height: number;
     readonly minimumSize: number;
     readonly maximumSize: number;
     addPanel(options: AddPaneviewCompponentOptions): IDisposable;