rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-08-15 05:36:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: fix tests

Browse Source
This commit is contained in:
mathuo 2025-08-11 22:38:15 +01:00
parent 722150fae7
commit de4a31df72
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
2 changed files with 157 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
View File

@ -172,14 +172,18 @@ describe('dockviewComponent', () => {
});
// Get all tab elements and void containers
const tabElements = Array.from(dockview.element.querySelectorAll('.dv-tab')) as HTMLElement[];
const voidContainers = Array.from(dockview.element.querySelectorAll('.dv-void-container')) as HTMLElement[];
const tabElements = Array.from(
dockview.element.querySelectorAll('.dv-tab')
) as HTMLElement[];
const voidContainers = Array.from(
dockview.element.querySelectorAll('.dv-void-container')
) as HTMLElement[];
// Initially tabs should be draggable (disableDnd: false)
tabElements.forEach(tab => {
tabElements.forEach((tab) => {
expect(tab.draggable).toBe(true);
});
voidContainers.forEach(container => {
voidContainers.forEach((container) => {
expect(container.draggable).toBe(true);
});
@ -187,10 +191,10 @@ describe('dockviewComponent', () => {
dockview.updateOptions({ disableDnd: true });
// Now tabs should not be draggable
tabElements.forEach(tab => {
tabElements.forEach((tab) => {
expect(tab.draggable).toBe(false);
});
voidContainers.forEach(container => {
voidContainers.forEach((container) => {
expect(container.draggable).toBe(false);
});
@ -198,10 +202,10 @@ describe('dockviewComponent', () => {
dockview.updateOptions({ disableDnd: false });
// Tabs should be draggable again
tabElements.forEach(tab => {
tabElements.forEach((tab) => {
expect(tab.draggable).toBe(true);
});
voidContainers.forEach(container => {
voidContainers.forEach((container) => {
expect(container.draggable).toBe(true);
});
});
@ -232,8 +236,12 @@ describe('dockviewComponent', () => {
});
// New tab should not be draggable
const tabElement = dockview.element.querySelector('.dv-tab') as HTMLElement;
const voidContainer = dockview.element.querySelector('.dv-void-container') as HTMLElement;
const tabElement = dockview.element.querySelector(
'.dv-tab'
) as HTMLElement;
const voidContainer = dockview.element.querySelector(
'.dv-void-container'
) as HTMLElement;
expect(tabElement.draggable).toBe(false);
expect(voidContainer.draggable).toBe(false);
@ -503,7 +511,7 @@ describe('dockviewComponent', () => {
expect(panel1.api.location.type).toBe('popout');
// Test moving to different positions
['top', 'bottom', 'left', 'right'].forEach(position => {
['top', 'bottom', 'left', 'right'].forEach((position) => {
panel1.api.group.api.moveTo({
group: panel2.api.group,
position: position as any,
@ -564,7 +572,9 @@ describe('dockviewComponent', () => {
expect(dockview.groups.length).toBe(2); // Just panel2 + panel1 in new position
// Reference group should be cleaned up (no longer exist)
const referenceGroupStillExists = dockview.groups.some(g => g.id === originalGroupId);
const referenceGroupStillExists = dockview.groups.some(
(g) => g.id === originalGroupId
);
expect(referenceGroupStillExists).toBe(false);
});
@ -743,7 +753,10 @@ describe('dockviewComponent', () => {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(options.id, options.name);
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
@ -818,7 +831,10 @@ describe('dockviewComponent', () => {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(options.id, options.name);
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
@ -6991,7 +7007,7 @@ describe('dockviewComponent', () => {
panel1.api.moveTo({
group: panel2.group,
position: 'center',
skipSetActive: true
skipSetActive: true,
});
// panel2's group should still be active, but panel2 should still be the active panel
@ -7055,7 +7071,7 @@ describe('dockviewComponent', () => {
panel2.group.api.moveTo({
group: panel1.group,
position: 'center',
skipSetActive: true
skipSetActive: true,
});
// panel1's group should still be active and there should be an active panel
@ -7108,7 +7124,7 @@ describe('dockviewComponent', () => {
// Move panel1 to panel2's group (should activate panel2's group)
panel1.api.moveTo({
group: panel2.group,
position: 'center'
position: 'center',
});
// panel2's group should now be active and panel1 should be the active panel
@ -7560,30 +7576,30 @@ describe('dockviewComponent', () => {
});
});
// Adding back tests one by one to identify problematic expectations
describe('GitHub Issue #991 - Group remains active after tab header space drag', () => {
let container: HTMLElement;
let dockview: DockviewComponent;
beforeEach(() => {
container = document.createElement('div');
dockview = new DockviewComponent(container, {
});
test('single panel group remains active after move to edge', () => {
const dockview = new DockviewComponent(container, {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(options.id, options.name);
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
});
dockview.layout(1000, 1000);
});
afterEach(() => {
dockview.dispose();
});
test('single panel group remains active after move to edge creates new group', () => {
// Create panel in first group
dockview.addPanel({
id: 'panel1',
@ -7598,7 +7614,7 @@ describe('dockviewComponent', () => {
expect(dockview.activeGroup).toBe(originalGroup);
expect(dockview.activePanel?.id).toBe('panel1');
// Move panel to edge position (creates new group at edge)
// Move panel to edge position
panel1.api.moveTo({ position: 'right' });
// After move, there should still be an active group and panel
@ -7606,12 +7622,28 @@ describe('dockviewComponent', () => {
expect(dockview.activePanel).toBeTruthy();
expect(dockview.activePanel?.id).toBe('panel1');
// The panel should be in a new group and that group should be active
expect(panel1.group).not.toBe(originalGroup);
// When moving a single panel to an edge, the existing group gets repositioned
// rather than creating a new group (since there would be no panels left in the original group)
expect(panel1.group).toBe(originalGroup);
expect(dockview.activeGroup).toBe(panel1.group);
});
test('merged group becomes active after center position group move', () => {
const dockview = new DockviewComponent(container, {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
});
dockview.layout(1000, 1000);
// Create two groups with panels
dockview.addPanel({
id: 'panel1',
@ -7637,7 +7669,7 @@ describe('dockviewComponent', () => {
// Move panel2's group to panel1's group (center merge)
dockview.moveGroupOrPanel({
from: { groupId: group2.id },
to: { group: group1, position: 'center' }
to: { group: group1, position: 'center' },
});
// After move, the target group should be active and have an active panel
@ -7648,6 +7680,21 @@ describe('dockviewComponent', () => {
});
test('panel content remains visible after group move', () => {
const dockview = new DockviewComponent(container, {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
});
dockview.layout(1000, 1000);
// Create panel
dockview.addPanel({
id: 'panel1',
@ -7672,6 +7719,21 @@ describe('dockviewComponent', () => {
});
test('first panel in group does not get skipSetActive when moved', () => {
const dockview = new DockviewComponent(container, {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
});
dockview.layout(1000, 1000);
// Create group with one panel
dockview.addPanel({
id: 'panel1',
@ -7696,6 +7758,21 @@ describe('dockviewComponent', () => {
});
test('skipSetActive option prevents automatic group activation', () => {
const dockview = new DockviewComponent(container, {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
});
dockview.layout(1000, 1000);
// Create two groups
dockview.addPanel({
id: 'panel1',
@ -7721,7 +7798,7 @@ describe('dockviewComponent', () => {
dockview.moveGroupOrPanel({
from: { groupId: group2.id },
to: { group: group1, position: 'center' },
skipSetActive: true
skipSetActive: true,
});
// After merge, there should still be an active group and panel

13
packages/dockview-core/src/dockview/dockviewComponent.ts
View File

@ -2353,7 +2353,15 @@ export class DockviewComponent
});
// Ensure group becomes active after move
this.doSetGroupAndPanelActive(to);
if (options.skipSetActive !== true) {
// For center moves (merges), we need to ensure the target group is active
// unless explicitly told not to (skipSetActive: true)
this.doSetGroupAndPanelActive(to);
} else if (!this.activePanel) {
// Even with skipSetActive: true, ensure there's an active panel if none exists
// This maintains basic functionality while respecting skipSetActive
this.doSetGroupAndPanelActive(to);
}
} else {
switch (from.api.location.type) {
case 'grid':
@ -2491,7 +2499,8 @@ export class DockviewComponent
});
// Ensure group becomes active after move
if (!options.skipSetActive) {
if (options.skipSetActive === false) {
// Only activate when explicitly requested (skipSetActive: false)
// Use 'to' group for non-center moves since 'from' may have been destroyed
const targetGroup = to ?? from;
this.doSetGroupAndPanelActive(targetGroup);