tests: fix tests

packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelMode.ts

@@ -0,0 +1,39 @@
+import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel';
+import { GroupPanel } from '../../groupview/groupviewPanel';
+import {
+    GroupPanelPartInitParameters,
+    GroupPanelUpdateEvent,
+    IContentRenderer,
+    ITabRenderer,
+} from '../../groupview/types';
+
+export class DockviewPanelModelMock implements IDockviewPanelModel {
+    constructor(
+        readonly contentComponent: string,
+        readonly content: IContentRenderer,
+        readonly tabComponent?: string,
+        readonly tab?: ITabRenderer
+    ) {
+        //
+    }
+
+    init(params: GroupPanelPartInitParameters): void {
+        //
+    }
+
+    update(event: GroupPanelUpdateEvent): void {
+        //
+    }
+
+    layout(width: number, height: number): void {
+        //
+    }
+
+    updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void {
+        //
+    }
+
+    dispose(): void {
+        //
+    }
+}

packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts

@@ -13,8 +13,6 @@ import {
     GroupviewPanelState,
     IGroupPanelInitParameters,
 } from '../../groupview/types';
-import { IGroupPanelView } from '../../dockview/defaultGroupPanelView';
-import { DefaultTab } from '../../dockview/components/tab/defaultTab';
 import { Emitter } from '../../events';
 import { IDockviewPanel } from '../../dockview/dockviewPanel';
 import {
@@ -22,6 +20,9 @@ import {
     DockviewPanelApiImpl,
 } from '../../api/dockviewPanelApi';
 import { DefaultDockviewDeserialzier } from '../../dockview/deserializer';
+import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel';
+import { DockviewPanelModelMock } from '../__mocks__/mockDockviewPanelMode';
+import { DefaultTab } from '../../dockview/components/tab/defaultTab';
 
 class PanelContentPartTest implements IContentRenderer {
     element: HTMLElement = document.createElement('div');
@@ -93,10 +94,6 @@ class PanelTabPartTest implements ITabRenderer {
         //noop
     }
 
-    toJSON(): object {
-        return { id: this.id };
-    }
-
     focus(): void {
         //noop
     }
@@ -107,43 +104,11 @@ class PanelTabPartTest implements ITabRenderer {
     }
 }
 
-class TestGroupPanelView implements IGroupPanelView {
-    readonly tab: ITabRenderer = new DefaultTab();
-
-    constructor(public readonly content: IContentRenderer) {
-        //
-    }
-
-    update(event: GroupPanelUpdateEvent): void {
-        //
-    }
-
-    layout(width: number, height: number): void {
-        //
-    }
-
-    init(params: GroupPanelPartInitParameters): void {
-        //
-    }
-
-    updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void {
-        //
-    }
-
-    toJSON(): {} {
-        return {};
-    }
-
-    dispose(): void {
-        //
-    }
-}
-
 class TestGroupPanel implements IDockviewPanel {
     private _group: GroupPanel | undefined;
 
-    readonly view: IGroupPanelView;
     readonly api: DockviewPanelApi;
+    readonly view: IDockviewPanelModel;
 
     constructor(
         public readonly id: string,
@@ -152,8 +117,11 @@ class TestGroupPanel implements IDockviewPanel {
     ) {
         this.api = new DockviewPanelApiImpl(this, this._group!);
         this._group = new GroupPanel(accessor, id, {});
-        this.view = new TestGroupPanelView(
+        this.view = new DockviewPanelModelMock(
-            new PanelContentPartTest(id, 'component')
+            'component',
+            new PanelContentPartTest(id, 'component'),
+            'tabComponent',
+            new DefaultTab()
         );
     }
 
@@ -562,27 +530,27 @@ describe('dockviewComponent', () => {
             panels: {
                 panel1: {
                     id: 'panel1',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel1',
                 },
                 panel2: {
                     id: 'panel2',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel2',
                 },
                 panel3: {
                     id: 'panel3',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel3',
                 },
                 panel4: {
                     id: 'panel4',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel4',
                 },
                 panel5: {
                     id: 'panel5',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel5',
                 },
             },
@@ -647,27 +615,27 @@ describe('dockviewComponent', () => {
             panels: {
                 panel1: {
                     id: 'panel1',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel1',
                 },
                 panel2: {
                     id: 'panel2',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel2',
                 },
                 panel3: {
                     id: 'panel3',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel3',
                 },
                 panel4: {
                     id: 'panel4',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel4',
                 },
                 panel5: {
                     id: 'panel5',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel5',
                 },
             },
@@ -1098,17 +1066,14 @@ describe('dockviewComponent', () => {
                 view_1: {
                     id: 'view_1',
                     title: 'view_1_title',
-                    view: {},
                 },
                 view_2: {
                     id: 'view_2',
                     title: 'view_2_title',
-                    view: {},
                 },
                 view_3: {
                     id: 'view_3',
                     title: 'view_3_title',
-                    view: {},
                 },
             },
             options: {},
@@ -1602,27 +1567,27 @@ describe('dockviewComponent', () => {
             panels: {
                 panel1: {
                     id: 'panel1',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel1',
                 },
                 panel2: {
                     id: 'panel2',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel2',
                 },
                 panel3: {
                     id: 'panel3',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel3',
                 },
                 panel4: {
                     id: 'panel4',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel4',
                 },
                 panel5: {
                     id: 'panel5',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel5',
                 },
             },
@@ -1736,30 +1701,28 @@ describe('dockviewComponent', () => {
             panels: {
                 panel1: {
                     id: 'panel1',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel1',
                 },
                 panel2: {
                     id: 'panel2',
-                    view: {
+                    contentComponent: 'default',
-                        content: { id: 'default' },
+                    tabComponent: '__non__existant_tab__',
-                        tab: { id: '__non__existant_tab__' },
-                    },
                     title: 'panel2',
                 },
                 panel3: {
                     id: 'panel3',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel3',
                 },
                 panel4: {
                     id: 'panel4',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel4',
                 },
                 panel5: {
                     id: 'panel5',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel5',
                 },
             },
@@ -1863,15 +1826,13 @@ describe('dockviewComponent', () => {
             panels: {
                 panel1: {
                     id: 'panel1',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel1',
                 },
                 panel2: {
                     id: 'panel2',
-                    view: {
+                    contentComponent: 'default',
-                        content: { id: 'default' },
+                    tabComponent: 'test_tab_id',
-                        tab: { id: 'test_tab_id' },
-                    },
                     title: 'panel2',
                 },
             },
@@ -1926,20 +1887,18 @@ describe('dockviewComponent', () => {
             panels: {
                 panel1: {
                     id: 'panel1',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel1',
                 },
                 panel2: {
                     id: 'panel2',
-                    view: {
+                    contentComponent: 'default',
-                        content: { id: 'default' },
+                    tabComponent: 'test_tab_id',
-                        tab: { id: 'test_tab_id' },
-                    },
                     title: 'panel2',
                 },
                 panel3: {
                     id: 'panel3',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel3',
                 },
             },
@@ -1959,7 +1918,7 @@ describe('dockviewComponent', () => {
         expect(viewQuery2.length).toBe(1);
 
         const viewQuery3 = group.element.querySelectorAll(
-            '.groupview > .tabs-and-actions-container > .tabs-container > .tab > .panel-tab-part-test_tab_id'
+            '.groupview > .tabs-and-actions-container > .tabs-container > .tab > .panel-tab-part-panel2'
         );
         expect(viewQuery3.length).toBe(1);
     });
@@ -2009,7 +1968,7 @@ describe('dockviewComponent', () => {
             panels: {
                 panel1: {
                     id: 'panel1',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel1',
                 },
             },
@@ -2061,12 +2020,12 @@ describe('dockviewComponent', () => {
             panels: {
                 panel1: {
                     id: 'panel1',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel1',
                 },
                 panel2: {
                     id: 'panel2',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel2',
                 },
             },
@@ -2124,12 +2083,12 @@ describe('dockviewComponent', () => {
             panels: {
                 panel1: {
                     id: 'panel1',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel1',
                 },
                 panel2: {
                     id: 'panel2',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel2',
                 },
             },
@@ -2196,18 +2155,18 @@ describe('dockviewComponent', () => {
             panels: {
                 panel1: {
                     id: 'panel1',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel1',
                 },
 
                 panel2: {
                     id: 'panel2',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel2',
                 },
                 panel3: {
                     id: 'panel3',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel3',
                 },
             },
@@ -2256,7 +2215,7 @@ describe('dockviewComponent', () => {
             panels: {
                 panel1: {
                     id: 'panel1',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel1',
                 },
             },
@@ -2325,17 +2284,17 @@ describe('dockviewComponent', () => {
             panels: {
                 panel1: {
                     id: 'panel1',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel1',
                 },
                 panel2: {
                     id: 'panel2',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel2',
                 },
                 panel3: {
                     id: 'panel3',
-                    view: { content: { id: 'default' } },
+                    contentComponent: 'default',
                     title: 'panel3',
                 },
             },

packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts

@@ -1,8 +1,8 @@
 import { DockviewComponent } from '../../dockview/dockviewComponent';
 import { DockviewApi } from '../../api/component.api';
-import { IGroupPanelView } from '../../dockview/defaultGroupPanelView';
 import { DockviewPanel } from '../../dockview/dockviewPanel';
 import { GroupPanel } from '../../groupview/groupviewPanel';
+import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel';
 
 describe('dockviewPanel', () => {
     test('update title', () => {
@@ -17,10 +17,19 @@ describe('dockviewPanel', () => {
         const groupMock = jest.fn<GroupPanel, []>(() => {
             return {} as any;
         });
+        const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
+            return {
+                update: jest.fn(),
+                init: jest.fn(),
+            };
+        });
+
         const api = new dockviewApiMock();
         const accessor = new accessorMock();
         const group = new groupMock();
-        const cut = new DockviewPanel('fake-id', accessor, api, group);
+        const model = <IDockviewPanelModel>new panelModelMock();
+
+        const cut = new DockviewPanel('fake-id', accessor, api, group, model);
 
         let latestTitle: string | undefined = undefined;
 
@@ -30,7 +39,7 @@ describe('dockviewPanel', () => {
 
         expect(cut.title).toBe('');
 
-        cut.init({ title: 'new title', params: {}, view: null });
+        cut.init({ title: 'new title', params: {} });
         expect(latestTitle).toBe('new title');
         expect(cut.title).toBe('new title');
 
@@ -51,26 +60,26 @@ describe('dockviewPanel', () => {
         const groupMock = jest.fn<GroupPanel, []>(() => {
             return {} as any;
         });
+        const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
+            return {
+                update: jest.fn(),
+                init: jest.fn(),
+                dispose: jest.fn(),
+            };
+        });
+
         const api = new dockviewApiMock();
         const accessor = new accessorMock();
         const group = new groupMock();
+        const model = <IDockviewPanelModel>new panelModelMock();
 
-        const cut = new DockviewPanel('fake-id', accessor, api, group);
+        const cut = new DockviewPanel('fake-id', accessor, api, group, model);
 
-        const viewMock = jest.fn<IGroupPanelView, []>(() => {
+        cut.init({ params: {}, title: 'title' });
-            return {
-                init: jest.fn(),
-                dispose: jest.fn(),
-                update: jest.fn(),
-            } as any;
-        });
-        const view = new viewMock();
-
-        cut.init({ params: {}, view, title: 'title' });
 
         cut.dispose();
 
-        expect(view.dispose).toHaveBeenCalled();
+        expect(model.dispose).toHaveBeenCalled();
     });
 
     test('get params', () => {
@@ -83,10 +92,20 @@ describe('dockviewPanel', () => {
         const groupMock = jest.fn<GroupPanel, []>(() => {
             return {} as any;
         });
+        const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
+            return {
+                update: jest.fn(),
+                init: jest.fn(),
+                dispose: jest.fn(),
+            };
+        });
+
         const api = new dockviewApiMock();
         const accessor = new accessorMock();
         const group = new groupMock();
-        const cut = new DockviewPanel('fake-id', accessor, api, group);
+        const model = <IDockviewPanelModel>new panelModelMock();
+
+        const cut = new DockviewPanel('fake-id', accessor, api, group, model);
 
         expect(cut.params).toEqual(undefined);
 
@@ -109,10 +128,20 @@ describe('dockviewPanel', () => {
                 },
             } as any;
         });
+        const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
+            return {
+                update: jest.fn(),
+                init: jest.fn(),
+                dispose: jest.fn(),
+            };
+        });
+
         const api = new dockviewApiMock();
         const accessor = new accessorMock();
         const group = new groupMock();
-        const cut = new DockviewPanel('fake-id', accessor, api, group);
+        const model = <IDockviewPanelModel>new panelModelMock();
+
+        const cut = new DockviewPanel('fake-id', accessor, api, group, model);
 
         cut.api.setSize({ height: 123, width: 456 });
 

packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts

@@ -1,5 +1,8 @@
-import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
+import {
-import { GroupPanel } from '../../groupview/groupviewPanel';
+    DockviewComponent,
+    IDockviewComponent,
+} from '../../dockview/dockviewComponent';
+import { DockviewPanelModel } from '../../dockview/dockviewPanelModel';
 import { IContentRenderer, ITabRenderer } from '../../groupview/types';
 
 describe('dockviewGroupPanel', () => {
@@ -20,19 +23,30 @@ describe('dockviewGroupPanel', () => {
             return partial as IContentRenderer;
         });
 
-        const content = new contentMock();
+        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
-        const tab = new tabMock();
+            return {
-
+                options: {
-        const cut = new DockviewGroupPanel({
+                    components: {
-            content,
+                        contentComponent: contentMock,
-            tab,
+                    },
-            contentComponent: 'contentComponent',
+                    tabComponents: {
+                        tabComponent: tabMock,
+                    },
+                },
+            };
         });
 
+        const cut = new DockviewPanelModel(
+            <IDockviewComponent>new accessorMock(),
+            'id',
+            'contentComponent',
+            'tabComponent'
+        );
+
         cut.dispose();
 
-        expect(content.dispose).toHaveBeenCalled();
+        expect(cut.content.dispose).toHaveBeenCalled();
-        expect(tab.dispose).toHaveBeenCalled();
+        expect(cut.tab.dispose).toHaveBeenCalled();
     });
 
     test('that update is called on content and tab renderers when present', () => {
@@ -52,24 +66,34 @@ describe('dockviewGroupPanel', () => {
             return partial as IContentRenderer;
         });
 
-        const content = new contentMock();
+        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
-        const tab = new tabMock();
+            return {
-
+                options: {
-        const cut = new DockviewGroupPanel({
+                    components: {
-            content,
+                        contentComponent: contentMock,
-            tab,
+                    },
-            contentComponent: 'contentComponent',
+                    tabComponents: {
+                        tabComponent: tabMock,
+                    },
+                },
+            };
         });
+        const cut = new DockviewPanelModel(
+            <IDockviewComponent>new accessorMock(),
+            'id',
+            'contentComponent',
+            'tabComponent'
+        );
 
         cut.update({
             params: {},
         });
 
-        expect(content.update).toHaveBeenCalled();
+        expect(cut.content.update).toHaveBeenCalled();
-        expect(tab.update).toHaveBeenCalled();
+        expect(cut.tab.update).toHaveBeenCalled();
     });
 
-    test('test1', () => {
+    test('that events are fired', () => {
         const contentMock = jest.fn<IContentRenderer, []>(() => {
             const partial: Partial<IContentRenderer> = {
                 element: document.createElement('div'),
@@ -88,44 +112,60 @@ describe('dockviewGroupPanel', () => {
             return partial as IContentRenderer;
         });
 
-        const content = new contentMock();
+        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
-        const tab = new tabMock();
+            return {
-
+                options: {
-        let cut = new DockviewGroupPanel({
+                    components: {
-            content,
+                        contentComponent: contentMock,
-            tab,
+                    },
-            contentComponent: 'contentComponent',
+                    tabComponents: {
+                        tabComponent: tabMock,
+                    },
+                },
+            };
         });
+        const cut = new DockviewPanelModel(
+            <IDockviewComponent>new accessorMock(),
+            'id',
+            'contentComponent',
+            'tabComponent'
+        );
 
         const group1 = jest.fn() as any;
         const group2 = jest.fn() as any;
-        cut.updateParentGroup(group1 as GroupPanel, false);
+        cut.updateParentGroup(group1, false);
 
-        expect(content.onGroupChange).toHaveBeenNthCalledWith(1, group1);
+        expect(cut.content.onGroupChange).toHaveBeenNthCalledWith(1, group1);
-        expect(tab.onGroupChange).toHaveBeenNthCalledWith(1, group1);
+        expect(cut.tab.onGroupChange).toHaveBeenNthCalledWith(1, group1);
-        expect(content.onPanelVisibleChange).toHaveBeenNthCalledWith(1, false);
+        expect(cut.content.onPanelVisibleChange).toHaveBeenNthCalledWith(
-        expect(tab.onPanelVisibleChange).toHaveBeenNthCalledWith(1, false);
+            1,
-        expect(content.onGroupChange).toHaveBeenCalledTimes(1);
+            false
-        expect(tab.onGroupChange).toHaveBeenCalledTimes(1);
+        );
-        expect(content.onPanelVisibleChange).toHaveBeenCalledTimes(1);
+        expect(cut.tab.onPanelVisibleChange).toHaveBeenNthCalledWith(1, false);
-        expect(tab.onPanelVisibleChange).toHaveBeenCalledTimes(1);
+        expect(cut.content.onGroupChange).toHaveBeenCalledTimes(1);
+        expect(cut.tab.onGroupChange).toHaveBeenCalledTimes(1);
+        expect(cut.content.onPanelVisibleChange).toHaveBeenCalledTimes(1);
+        expect(cut.tab.onPanelVisibleChange).toHaveBeenCalledTimes(1);
 
-        cut.updateParentGroup(group1 as GroupPanel, true);
+        cut.updateParentGroup(group1, true);
 
-        expect(content.onPanelVisibleChange).toHaveBeenNthCalledWith(2, true);
+        expect(cut.content.onPanelVisibleChange).toHaveBeenNthCalledWith(
-        expect(tab.onPanelVisibleChange).toHaveBeenNthCalledWith(2, true);
+            2,
-        expect(content.onGroupChange).toHaveBeenCalledTimes(1);
+            true
-        expect(tab.onGroupChange).toHaveBeenCalledTimes(1);
+        );
-        expect(content.onPanelVisibleChange).toHaveBeenCalledTimes(2);
+        expect(cut.tab.onPanelVisibleChange).toHaveBeenNthCalledWith(2, true);
-        expect(tab.onPanelVisibleChange).toHaveBeenCalledTimes(2);
+        expect(cut.content.onGroupChange).toHaveBeenCalledTimes(1);
+        expect(cut.tab.onGroupChange).toHaveBeenCalledTimes(1);
+        expect(cut.content.onPanelVisibleChange).toHaveBeenCalledTimes(2);
+        expect(cut.tab.onPanelVisibleChange).toHaveBeenCalledTimes(2);
 
-        cut.updateParentGroup(group2 as GroupPanel, true);
+        cut.updateParentGroup(group2, true);
 
-        expect(content.onGroupChange).toHaveBeenNthCalledWith(2, group2);
+        expect(cut.content.onGroupChange).toHaveBeenNthCalledWith(2, group2);
-        expect(tab.onGroupChange).toHaveBeenNthCalledWith(2, group2);
+        expect(cut.tab.onGroupChange).toHaveBeenNthCalledWith(2, group2);
-        expect(content.onGroupChange).toHaveBeenCalledTimes(2);
+        expect(cut.content.onGroupChange).toHaveBeenCalledTimes(2);
-        expect(tab.onGroupChange).toHaveBeenCalledTimes(2);
+        expect(cut.tab.onGroupChange).toHaveBeenCalledTimes(2);
-        expect(content.onPanelVisibleChange).toHaveBeenCalledTimes(2);
+        expect(cut.content.onPanelVisibleChange).toHaveBeenCalledTimes(2);
-        expect(tab.onPanelVisibleChange).toHaveBeenCalledTimes(2);
+        expect(cut.tab.onPanelVisibleChange).toHaveBeenCalledTimes(2);
     });
 });

packages/dockview-core/src/__tests__/groupview/groupview.spec.ts

@@ -1,5 +1,6 @@
 import { DockviewComponent } from '../../dockview/dockviewComponent';
 import {
+    GroupPanelUpdateEvent,
     GroupviewPanelState,
     IGroupPanelInitParameters,
 } from '../../groupview/types';
@@ -11,16 +12,16 @@ import {
 } from '../../groupview/types';
 import { PanelUpdateEvent } from '../../panel/types';
 import { GroupOptions, Groupview } from '../../groupview/groupview';
-import {
-    DefaultGroupPanelView,
-    IGroupPanelView,
-} from '../../dockview/defaultGroupPanelView';
 import { GroupPanel } from '../../groupview/groupviewPanel';
 import { fireEvent } from '@testing-library/dom';
 import { LocalSelectionTransfer, PanelTransfer } from '../../dnd/dataTransfer';
 import { CompositeDisposable } from '../../lifecycle';
 import { DockviewPanelApi } from '../../api/dockviewPanelApi';
 import { IDockviewPanel } from '../../dockview/dockviewPanel';
+import {
+    IDockviewPanelModel,
+    DockviewPanelModel,
+} from '../../dockview/dockviewPanelModel';
 
 enum GroupChangeKind2 {
     ADD_PANEL,
@@ -28,6 +29,38 @@ enum GroupChangeKind2 {
     PANEL_ACTIVE,
 }
 
+class TestModel implements IDockviewPanelModel {
+    readonly content: IContentRenderer;
+    readonly contentComponent: string;
+    readonly tab: ITabRenderer;
+
+    constructor(id: string) {
+        this.content = new TestHeaderPart(id);
+        this.contentComponent = id;
+        this.tab = new TestContentPart(id);
+    }
+
+    update(event: GroupPanelUpdateEvent): void {
+        //
+    }
+
+    layout(width: number, height: number): void {
+        //
+    }
+
+    init(params: GroupPanelPartInitParameters): void {
+        //
+    }
+
+    updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void {
+        //
+    }
+
+    dispose(): void {
+        //
+    }
+}
+
 class Watermark implements IWatermarkRenderer {
     public readonly element = document.createElement('div');
 
@@ -140,9 +173,9 @@ class TestHeaderPart implements ITabRenderer {
 }
 
 export class TestPanel implements IDockviewPanel {
-    private _view: IGroupPanelView | undefined;
     private _group: GroupPanel | undefined;
     private _params: IGroupPanelInitParameters;
+    readonly view: IDockviewPanelModel;
 
     get title() {
         return '';
@@ -152,28 +185,19 @@ export class TestPanel implements IDockviewPanel {
         return this._group!;
     }
 
-    get view() {
-        return this._view;
-    }
-
     get params(): Record<string, any> {
         return {};
     }
 
     constructor(public readonly id: string, public api: DockviewPanelApi) {
+        this.view = new TestModel(id);
         this.init({
-            view: new DefaultGroupPanelView({
-                tab: new TestHeaderPart(id),
-                content: new TestContentPart(id),
-            }),
             title: `${id}`,
             params: {},
         });
     }
 
     init(params: IGroupPanelInitParameters) {
-        this._view = params.view;
-
         this._params = params;
     }
 
@@ -196,7 +220,6 @@ export class TestPanel implements IDockviewPanel {
     toJSON(): GroupviewPanelState {
         return {
             id: this.id,
-            view: this._view?.toJSON(),
             title: this._params?.title,
         };
     }
@@ -236,31 +259,6 @@ describe('groupview', () => {
         groupview.initialize();
     });
 
-    test('serialized layout shows active panel', () => {
-        const panel1 = new TestPanel('panel1', jest.fn() as any);
-        const panel2 = new TestPanel('panel2', jest.fn() as any);
-        const panel3 = new TestPanel('panel3', jest.fn() as any);
-
-        const groupview2 = new GroupPanel(dockview, 'groupview-2', {
-            tabHeight: 25,
-            panels: [panel1, panel2, panel3],
-            activePanel: panel2,
-        });
-        groupview2.initialize();
-
-        expect(groupview2.model.activePanel).toBe(panel2);
-
-        expect(
-            groupview2.element.querySelector('.content-part-panel1')
-        ).toBeFalsy();
-        expect(
-            groupview2.element.querySelector('.content-part-panel2')
-        ).toBeTruthy();
-        expect(
-            groupview2.element.querySelector('.content-part-panel3')
-        ).toBeFalsy();
-    });
-
     test('panel events are captured during de-serialization', () => {
         const panel1 = new TestPanel('panel1', jest.fn() as any);
         const panel2 = new TestPanel('panel2', jest.fn() as any);

packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts

@@ -7,9 +7,9 @@ import {
 } from '../../../groupview/types';
 import { CompositeDisposable } from '../../../lifecycle';
 import { PanelUpdateEvent } from '../../../panel/types';
-import { IGroupPanelView } from '../../../dockview/defaultGroupPanelView';
 import { GroupPanel } from '../../../groupview/groupviewPanel';
 import { IDockviewPanel } from '../../../dockview/dockviewPanel';
+import { IDockviewPanelModel } from '../../../dockview/dockviewPanelModel';
 
 class TestContentRenderer
     extends CompositeDisposable
@@ -77,7 +77,7 @@ describe('contentContainer', () => {
         const panel = {
             view: {
                 content: contentRenderer,
-            } as Partial<IGroupPanelView>,
+            } as Partial<IDockviewPanelModel>,
         } as Partial<IDockviewPanel>;
 
         cut.openPanel(panel as IDockviewPanel);
@@ -111,7 +111,7 @@ describe('contentContainer', () => {
         const panel2 = {
             view: {
                 content: contentRenderer2,
-            } as Partial<IGroupPanelView>,
+            } as Partial<IDockviewPanelModel>,
         } as Partial<IDockviewPanel>;
 
         cut.openPanel(panel2 as IDockviewPanel);

packages/dockview-core/src/groupview/types.ts

@@ -94,5 +94,5 @@ export interface GroupviewPanelState {
     tabComponent?: string;
     title?: string;
     params?: { [key: string]: any };
-    view: SerializedGroupPanelView; // depreciated
+    view?: SerializedGroupPanelView; // depreciated
 }

packages/dockview/src/__tests__/react/dockview/reactHeaderPart.spec.ts

@@ -1,24 +0,0 @@
-import { DEFAULT_TAB_IDENTIFIER } from 'dockview-core';
-import { ReactPanelHeaderPart } from '../../../dockview/reactHeaderPart';
-
-describe('reactHeaderPart', () => {
-    test('that tab id is present in toJSON when not the default tab', () => {
-        const cut = new ReactPanelHeaderPart(
-            'test-id',
-            jest.fn(),
-            <any>jest.fn()
-        );
-
-        expect(cut.toJSON()).toEqual({ id: 'test-id' });
-    });
-
-    test('that tab id is not present in the toJSON when is default tab', () => {
-        const cut = new ReactPanelHeaderPart(
-            DEFAULT_TAB_IDENTIFIER,
-            jest.fn(),
-            <any>jest.fn()
-        );
-
-        expect(cut.toJSON()).toEqual({});
-    });
-});