Skip to content

Commit 9908429

Browse files
mathuomathuo
committed
2 parents c0d17de + 53e869e commit 9908429

File tree

24 files changed

+2344
-935
lines changed

24 files changed

+2344
-935
lines changed

‎packages/dockview-vue/jest.config.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ const config: JestConfigWithTsJest = {
1010
'<rootDir>/packages/dockview-vue/src/**/*.{js,jsx,ts,tsx}',
1111
],
1212
setupFiles: [
13-
// '<rootDir>/packages/dockview-vue/src/__tests__/__mocks__/resizeObserver.js',
13+
'<rootDir>/packages/dockview-vue/src/__tests__/__mocks__/resizeObserver.js',
1414
],
1515
setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
1616
coveragePathIgnorePatterns: ['/node_modules/'],
1717
modulePathIgnorePatterns: [
18-
// '<rootDir>/packages/dockview-vue/src/__tests__/__mocks__',
19-
// '<rootDir>/packages/dockview-vue/src/__tests__/__test_utils__',
18+
'<rootDir>/packages/dockview-vue/src/__tests__/__mocks__',
19+
'<rootDir>/packages/dockview-vue/src/__tests__/__test_utils__',
2020
],
2121
coverageDirectory: '<rootDir>/packages/dockview-vue/coverage/',
2222
testResultsProcessor: 'jest-sonar-reporter',

‎packages/dockview-vue/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,5 +57,9 @@
5757
},
5858
"peerDependencies": {
5959
"vue": "^3.4.0"
60+
},
61+
"devDependencies": {
62+
"@vue/test-utils": "^2.4.0-alpha.2",
63+
"@vue/vue3-jest": "^29.2.6"
6064
}
6165
}

‎packages/dockview-vue/src/__tests__/__mocks__/resizeObserver.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
global.ResizeObserver = jest.fn().mockImplementation(() => ({
2+
observe: jest.fn(),
3+
unobserve: jest.fn(),
4+
disconnect: jest.fn(),
5+
}));

‎packages/dockview-vue/src/__tests__/__test_utils__/utils.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { ComponentInternalInstance, getCurrentInstance } from 'vue';
2+
3+
export function setMockRefElement() {
4+
const mockElement = document.createElement('div');
5+
mockElement.style.width = '1000px';
6+
mockElement.style.height = '800px';
7+
8+
Object.defineProperty(mockElement, 'clientWidth', {
9+
configurable: true,
10+
value: 1000,
11+
});
12+
Object.defineProperty(mockElement, 'clientHeight', {
13+
configurable: true,
14+
value: 800,
15+
});
16+
Object.defineProperty(mockElement, 'offsetWidth', {
17+
configurable: true,
18+
value: 1000,
19+
});
20+
Object.defineProperty(mockElement, 'offsetHeight', {
21+
configurable: true,
22+
value: 800,
23+
});
24+
25+
return mockElement;
26+
}
27+
28+
export function createMockVueInstance(): ComponentInternalInstance {
29+
return {
30+
appContext: {
31+
app: {} as any,
32+
config: {} as any,
33+
mixins: [],
34+
components: {
35+
'test-component': {
36+
props: { params: Object, api: Object, containerApi: Object },
37+
template: '<div>Test Component</div>'
38+
}
39+
},
40+
directives: {},
41+
provides: {},
42+
globalProperties: {},
43+
},
44+
parent: null,
45+
components: {
46+
'test-component': {
47+
props: { params: Object, api: Object, containerApi: Object },
48+
template: '<div>Test Component</div>'
49+
}
50+
},
51+
provides: {},
52+
} as any;
53+
}

‎packages/dockview-vue/src/__tests__/dockview.spec.ts‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { createDockview, PROPERTY_KEYS_DOCKVIEW } from 'dockview-core';
2+
3+
describe('DockviewVue Component', () => {
4+
test('should export component types', () => {
5+
const types = require('../dockview/types');
6+
7+
expect(types).toBeDefined();
8+
expect(typeof types).toBe('object');
9+
});
10+
11+
test('should export dockview-core functionality', () => {
12+
expect(createDockview).toBeDefined();
13+
expect(PROPERTY_KEYS_DOCKVIEW).toBeDefined();
14+
expect(Array.isArray(PROPERTY_KEYS_DOCKVIEW)).toBe(true);
15+
});
16+
17+
test('should have correct dockview properties', () => {
18+
expect(PROPERTY_KEYS_DOCKVIEW).toContain('disableAutoResizing');
19+
expect(PROPERTY_KEYS_DOCKVIEW).toContain('hideBorders');
20+
expect(PROPERTY_KEYS_DOCKVIEW).toContain('theme');
21+
expect(PROPERTY_KEYS_DOCKVIEW).toContain('singleTabMode');
22+
});
23+
24+
test('should create dockview instance with DOM element', () => {
25+
const element = document.createElement('div');
26+
document.body.appendChild(element);
27+
28+
const mockRenderer = {
29+
element: document.createElement('div'),
30+
dispose: () => {},
31+
update: () => {},
32+
init: () => {}
33+
};
34+
35+
const api = createDockview(element, {
36+
disableAutoResizing: true,
37+
hideBorders: false,
38+
createComponent: () => mockRenderer
39+
});
40+
41+
expect(api).toBeDefined();
42+
expect(typeof api.layout).toBe('function');
43+
expect(typeof api.dispose).toBe('function');
44+
expect(typeof api.addPanel).toBe('function');
45+
expect(typeof api.updateOptions).toBe('function');
46+
47+
api.dispose();
48+
document.body.removeChild(element);
49+
});
50+
51+
test('should handle framework component creation', () => {
52+
const element = document.createElement('div');
53+
document.body.appendChild(element);
54+
55+
let createdComponent: any;
56+
57+
const api = createDockview(element, {
58+
createComponent: (options) => {
59+
createdComponent = {
60+
element: document.createElement('div'),
61+
dispose: jest.fn(),
62+
update: jest.fn(),
63+
init: jest.fn()
64+
};
65+
return createdComponent;
66+
}
67+
});
68+
69+
// Add a panel to trigger component creation
70+
api.addPanel({
71+
id: 'test-panel',
72+
component: 'test-component',
73+
title: 'Test Panel'
74+
});
75+
76+
expect(createdComponent).toBeDefined();
77+
expect(createdComponent.element).toBeInstanceOf(HTMLElement);
78+
79+
api.dispose();
80+
document.body.removeChild(element);
81+
});
82+
83+
test('should handle option updates', () => {
84+
const element = document.createElement('div');
85+
document.body.appendChild(element);
86+
87+
const mockRenderer = {
88+
element: document.createElement('div'),
89+
dispose: () => {},
90+
update: () => {},
91+
init: () => {}
92+
};
93+
94+
const api = createDockview(element, {
95+
disableAutoResizing: false,
96+
hideBorders: false,
97+
createComponent: () => mockRenderer
98+
});
99+
100+
// Update options
101+
api.updateOptions({
102+
disableAutoResizing: true,
103+
hideBorders: true
104+
});
105+
106+
// Test passes if no errors are thrown
107+
expect(true).toBe(true);
108+
109+
api.dispose();
110+
document.body.removeChild(element);
111+
});
112+
});

‎packages/dockview-vue/src/__tests__/empty.spec.ts‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎packages/dockview-vue/src/__tests__/gridview.spec.ts‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
import { createGridview, PROPERTY_KEYS_GRIDVIEW, Orientation } from 'dockview-core';
2+
import { VueGridviewPanelView } from '../gridview/view';
3+
4+
describe('GridviewVue Component', () => {
5+
test('should export component types', () => {
6+
const types = require('../gridview/types');
7+
8+
expect(types).toBeDefined();
9+
expect(typeof types).toBe('object');
10+
});
11+
12+
test('should export dockview-core functionality', () => {
13+
const dockviewCore = require('dockview-core');
14+
15+
expect(dockviewCore.createGridview).toBeDefined();
16+
expect(dockviewCore.PROPERTY_KEYS_GRIDVIEW).toBeDefined();
17+
});
18+
19+
test('should have correct gridview properties', () => {
20+
expect(PROPERTY_KEYS_GRIDVIEW).toContain('proportionalLayout');
21+
expect(PROPERTY_KEYS_GRIDVIEW).toContain('hideBorders');
22+
expect(PROPERTY_KEYS_GRIDVIEW).toContain('disableAutoResizing');
23+
});
24+
25+
test('should create gridview instance with DOM element', () => {
26+
const element = document.createElement('div');
27+
document.body.appendChild(element);
28+
29+
const api = createGridview(element, {
30+
orientation: Orientation.HORIZONTAL,
31+
proportionalLayout: true,
32+
hideBorders: false,
33+
createComponent: () => new VueGridviewPanelView('test', 'test-component', { template: '<div>Test</div>' } as any, {} as any)
34+
});
35+
36+
expect(api).toBeDefined();
37+
expect(typeof api.layout).toBe('function');
38+
expect(typeof api.dispose).toBe('function');
39+
expect(typeof api.addPanel).toBe('function');
40+
expect(typeof api.updateOptions).toBe('function');
41+
42+
api.dispose();
43+
document.body.removeChild(element);
44+
});
45+
46+
test('should handle proportional layout changes', () => {
47+
const element = document.createElement('div');
48+
document.body.appendChild(element);
49+
50+
const api = createGridview(element, {
51+
orientation: Orientation.HORIZONTAL,
52+
proportionalLayout: false,
53+
createComponent: () => new VueGridviewPanelView('test', 'test-component', { template: '<div>Test</div>' } as any, {} as any)
54+
});
55+
56+
// Update proportional layout
57+
api.updateOptions({ proportionalLayout: true });
58+
59+
// Test passes if no errors are thrown
60+
expect(true).toBe(true);
61+
62+
api.dispose();
63+
document.body.removeChild(element);
64+
});
65+
66+
test('should add and manage grid panels', () => {
67+
const element = document.createElement('div');
68+
document.body.appendChild(element);
69+
70+
const api = createGridview(element, {
71+
orientation: Orientation.HORIZONTAL,
72+
proportionalLayout: true,
73+
createComponent: (options) => new VueGridviewPanelView(options.id, options.name, { template: '<div>Test</div>' } as any, {} as any)
74+
});
75+
76+
// Add a panel
77+
api.addPanel({
78+
id: 'grid-panel-1',
79+
component: 'test-component'
80+
});
81+
82+
expect(api.panels.length).toBe(1);
83+
expect(api.panels[0].id).toBe('grid-panel-1');
84+
85+
// Remove the panel
86+
api.removePanel(api.panels[0]);
87+
expect(api.panels.length).toBe(0);
88+
89+
api.dispose();
90+
document.body.removeChild(element);
91+
});
92+
});
93+
94+
describe('VueGridviewPanelView', () => {
95+
let mockVueInstance: any;
96+
let mockVueComponent: any;
97+
let panelView: VueGridviewPanelView;
98+
99+
beforeEach(() => {
100+
mockVueInstance = {
101+
appContext: { components: {} },
102+
components: {},
103+
parent: null,
104+
};
105+
106+
mockVueComponent = {
107+
props: { params: Object, api: Object, containerApi: Object },
108+
template: '<div>Test Gridview Panel</div>',
109+
};
110+
111+
panelView = new VueGridviewPanelView(
112+
'gridview-test-id',
113+
'gridview-test-component',
114+
mockVueComponent as any,
115+
mockVueInstance
116+
);
117+
});
118+
119+
test('should create panel view with correct properties', () => {
120+
expect(panelView.id).toBe('gridview-test-id');
121+
expect(panelView.element).toBeInstanceOf(HTMLElement);
122+
expect(panelView.element.style.height).toBe('100%');
123+
expect(panelView.element.style.width).toBe('100%');
124+
expect(panelView.element.style.overflow).toBe('hidden');
125+
});
126+
127+
test('should implement GridviewPanel interface', () => {
128+
expect(panelView.api).toBeDefined();
129+
expect(typeof panelView.getComponent).toBe('function');
130+
expect(panelView.element).toBeInstanceOf(HTMLElement);
131+
});
132+
133+
test('should create framework part when getComponent is called', () => {
134+
// Mock _params to avoid accessor error
135+
(panelView as any)._params = {
136+
params: {},
137+
accessor: { id: 'test-accessor' }
138+
};
139+
140+
const component = panelView.getComponent();
141+
expect(component).toBeDefined();
142+
expect(component.constructor.name).toBe('VuePart');
143+
});
144+
145+
test('should handle empty params', () => {
146+
// Mock _params to avoid accessor error
147+
(panelView as any)._params = {
148+
params: {},
149+
accessor: { id: 'test-accessor' }
150+
};
151+
152+
const component = panelView.getComponent();
153+
expect(component).toBeDefined();
154+
});
155+
});

0 commit comments

Comments
 (0)