rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-02-12 19:35:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

test: add tests

Browse Source
This commit is contained in:
mathuo 2024-11-10 10:58:21 +00:00
parent c9e90168a4
commit 02d0ad8634
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
1 changed files with 345 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5354,169 +5354,378 @@ describe('dockviewComponent', () => {
}); });
}); });
test('that setVisible toggles visiblity', () => { describe('panel visibility', () => {
const container = document.createElement('div'); test('that setVisible toggles visiblity', () => {
const container = document.createElement('div');
const dockview = new DockviewComponent(container, { const dockview = new DockviewComponent(container, {
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
return new PanelContentPartTest( return new PanelContentPartTest(
options.id, options.id,
options.name options.name
); );
default: default:
throw new Error(`unsupported`); throw new Error(`unsupported`);
} }
}, },
}); });
const api = new DockviewApi(dockview); const api = new DockviewApi(dockview);
dockview.layout(1000, 1000); dockview.layout(1000, 1000);
const panel1 = api.addPanel({ const panel1 = api.addPanel({
id: 'panel1', id: 'panel1',
component: 'default', component: 'default',
}); });
const panel2 = api.addPanel({ const panel2 = api.addPanel({
id: 'panel2', id: 'panel2',
component: 'default', component: 'default',
position: { referencePanel: panel1, direction: 'within' }, position: { referencePanel: panel1, direction: 'within' },
});
const panel3 = api.addPanel({
id: 'panel3',
component: 'default',
position: { referencePanel: panel1, direction: 'right' },
});
const panel4 = api.addPanel({
id: 'panel4',
component: 'default',
position: { referencePanel: panel3, direction: 'within' },
});
expect(api.groups.length).toBe(2);
expect(panel1.group).toBe(panel2.group);
expect(panel3.group).toBe(panel4.group);
expect(panel1.group.api.isVisible).toBeTruthy();
expect(panel2.group.api.isVisible).toBeTruthy();
expect(panel3.group.api.isVisible).toBeTruthy();
expect(panel4.group.api.isVisible).toBeTruthy();
expect(panel1.api.isVisible).toBeFalsy();
expect(panel2.api.isVisible).toBeTruthy();
expect(panel3.api.isVisible).toBeFalsy();
expect(panel4.api.isVisible).toBeTruthy();
// case #1
panel1.group.api.setVisible(false);
expect(panel1.group.api.isVisible).toBeFalsy();
expect(panel2.group.api.isVisible).toBeFalsy();
expect(panel3.group.api.isVisible).toBeTruthy();
expect(panel4.group.api.isVisible).toBeTruthy();
expect(panel1.api.isVisible).toBeFalsy();
expect(panel2.api.isVisible).toBeFalsy();
expect(panel3.api.isVisible).toBeFalsy();
expect(panel4.api.isVisible).toBeTruthy();
// case #2
panel3.group.api.setVisible(false);
expect(panel1.group.api.isVisible).toBeFalsy();
expect(panel2.group.api.isVisible).toBeFalsy();
expect(panel3.group.api.isVisible).toBeFalsy();
expect(panel4.group.api.isVisible).toBeFalsy();
expect(panel1.api.isVisible).toBeFalsy();
expect(panel2.api.isVisible).toBeFalsy();
expect(panel3.api.isVisible).toBeFalsy();
expect(panel4.api.isVisible).toBeFalsy();
// case #2
panel3.group.api.setVisible(true);
expect(panel1.group.api.isVisible).toBeFalsy();
expect(panel2.group.api.isVisible).toBeFalsy();
expect(panel3.group.api.isVisible).toBeTruthy();
expect(panel4.group.api.isVisible).toBeTruthy();
expect(panel1.api.isVisible).toBeFalsy();
expect(panel2.api.isVisible).toBeFalsy();
expect(panel3.api.isVisible).toBeFalsy();
expect(panel4.api.isVisible).toBeTruthy();
// case #2
panel1.group.api.setVisible(true);
expect(panel1.group.api.isVisible).toBeTruthy();
expect(panel2.group.api.isVisible).toBeTruthy();
expect(panel3.group.api.isVisible).toBeTruthy();
expect(panel4.group.api.isVisible).toBeTruthy();
expect(panel1.api.isVisible).toBeFalsy();
expect(panel2.api.isVisible).toBeTruthy();
expect(panel3.api.isVisible).toBeFalsy();
expect(panel4.api.isVisible).toBeTruthy();
}); });
const panel3 = api.addPanel({ test('setVisible #1', () => {
id: 'panel3', const container = document.createElement('div');
component: 'default',
position: { referencePanel: panel1, direction: 'right' }, const dockview = new DockviewComponent(container, {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
});
const api = new DockviewApi(dockview);
dockview.layout(1000, 1000);
const panel1 = api.addPanel({
id: 'panel1',
component: 'default',
});
const panel2 = api.addPanel({
id: 'panel2',
component: 'default',
position: { referencePanel: panel1, direction: 'below' },
});
const panel3 = api.addPanel({
id: 'panel3',
component: 'default',
position: { referencePanel: panel1, direction: 'below' },
});
expect(api.groups.length).toBe(3);
panel1.group.api.setVisible(false);
panel2.group.api.setVisible(false);
panel3.group.api.setVisible(false);
expect(panel1.group.api.isVisible).toBeFalsy();
expect(panel2.group.api.isVisible).toBeFalsy();
expect(panel3.group.api.isVisible).toBeFalsy();
panel1.group.api.setVisible(true);
expect(panel1.group.api.isVisible).toBeTruthy();
expect(panel2.group.api.isVisible).toBeFalsy();
expect(panel3.group.api.isVisible).toBeFalsy();
}); });
const panel4 = api.addPanel({ test('that watermark appears when all views are not visible', () => {
id: 'panel4', jest.useFakeTimers();
component: 'default', const container = document.createElement('div');
position: { referencePanel: panel3, direction: 'within' },
const dockview = new DockviewComponent(container, {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
});
const api = new DockviewApi(dockview);
dockview.layout(1000, 1000);
const panel1 = api.addPanel({
id: 'panel_1',
component: 'default',
});
const panel2 = api.addPanel({
id: 'panel_2',
component: 'default',
position: {
direction: 'right',
},
});
let query = queryByTestId(container, 'watermark-component');
expect(query).toBeFalsy();
panel1.group.api.setVisible(false);
jest.runAllTicks(); // visibility events check fires on microtask-queue
query = queryByTestId(container, 'watermark-component');
expect(query).toBeFalsy();
panel2.group.api.setVisible(false);
jest.runAllTicks(); // visibility events check fires on microtask-queue
query = queryByTestId(container, 'watermark-component');
expect(query).toBeTruthy();
panel1.group.api.setVisible(true);
jest.runAllTicks(); // visibility events check fires on microtask-queue
query = queryByTestId(container, 'watermark-component');
expect(query).toBeFalsy();
}); });
expect(api.groups.length).toBe(2); test('setVisible on floating group', () => {
expect(panel1.group).toBe(panel2.group); const container = document.createElement('div');
expect(panel3.group).toBe(panel4.group);
expect(panel1.group.api.isVisible).toBeTruthy(); const dockview = new DockviewComponent(container, {
expect(panel2.group.api.isVisible).toBeTruthy(); createComponent(options) {
expect(panel3.group.api.isVisible).toBeTruthy(); switch (options.name) {
expect(panel4.group.api.isVisible).toBeTruthy(); case 'default':
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
});
const api = new DockviewApi(dockview);
expect(panel1.api.isVisible).toBeFalsy(); dockview.layout(1000, 1000);
expect(panel2.api.isVisible).toBeTruthy();
expect(panel3.api.isVisible).toBeFalsy();
expect(panel4.api.isVisible).toBeTruthy();
// case #1 const panel1 = api.addPanel({
panel1.group.api.setVisible(false); id: 'panel1',
component: 'default',
});
const panel2 = api.addPanel({
id: 'panel2',
component: 'default',
position: { referencePanel: panel1, direction: 'below' },
});
expect(panel1.group.api.isVisible).toBeFalsy(); const panel3 = api.addPanel({
expect(panel2.group.api.isVisible).toBeFalsy(); id: 'panel3',
expect(panel3.group.api.isVisible).toBeTruthy(); component: 'default',
expect(panel4.group.api.isVisible).toBeTruthy(); position: { referencePanel: panel1, direction: 'below' },
});
expect(panel1.api.isVisible).toBeFalsy(); api.addFloatingGroup(panel2);
expect(panel2.api.isVisible).toBeFalsy(); expect(panel2.api.location.type).toBe('floating');
expect(panel3.api.isVisible).toBeFalsy();
expect(panel4.api.isVisible).toBeTruthy();
// case #2 panel2.api.group.setVisible(false);
expect(panel2.api.isVisible).toBeFalsy();
expect(panel2.api.group.api.isVisible).toBeFalsy();
panel3.group.api.setVisible(false); panel2.api.group.setVisible(true);
expect(panel2.api.isVisible).toBeTruthy();
expect(panel2.api.group.api.isVisible).toBeTruthy();
expect(panel1.group.api.isVisible).toBeFalsy(); panel2.api.group.setVisible(false);
expect(panel2.group.api.isVisible).toBeFalsy(); expect(panel2.api.isVisible).toBeFalsy();
expect(panel3.group.api.isVisible).toBeFalsy(); expect(panel2.api.group.api.isVisible).toBeFalsy();
expect(panel4.group.api.isVisible).toBeFalsy();
expect(panel1.api.isVisible).toBeFalsy(); panel2.api.group.api.moveTo({
expect(panel2.api.isVisible).toBeFalsy(); group: panel1.group,
expect(panel3.api.isVisible).toBeFalsy(); position: 'left',
expect(panel4.api.isVisible).toBeFalsy(); });
expect(api.groups.length).toBe(3);
expect(panel2.api.isVisible).toBeFalsy();
expect(panel2.api.group.api.isVisible).toBeFalsy();
// case #2 panel2.api.group.setVisible(true);
expect(panel2.api.isVisible).toBeTruthy();
panel3.group.api.setVisible(true); expect(panel2.api.group.api.isVisible).toBeTruthy();
expect(panel1.group.api.isVisible).toBeFalsy();
expect(panel2.group.api.isVisible).toBeFalsy();
expect(panel3.group.api.isVisible).toBeTruthy();
expect(panel4.group.api.isVisible).toBeTruthy();
expect(panel1.api.isVisible).toBeFalsy();
expect(panel2.api.isVisible).toBeFalsy();
expect(panel3.api.isVisible).toBeFalsy();
expect(panel4.api.isVisible).toBeTruthy();
// case #2
panel1.group.api.setVisible(true);
expect(panel1.group.api.isVisible).toBeTruthy();
expect(panel2.group.api.isVisible).toBeTruthy();
expect(panel3.group.api.isVisible).toBeTruthy();
expect(panel4.group.api.isVisible).toBeTruthy();
expect(panel1.api.isVisible).toBeFalsy();
expect(panel2.api.isVisible).toBeTruthy();
expect(panel3.api.isVisible).toBeFalsy();
expect(panel4.api.isVisible).toBeTruthy();
});
test('setVisible #1', () => {
const container = document.createElement('div');
const dockview = new DockviewComponent(container, {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
});
const api = new DockviewApi(dockview);
dockview.layout(1000, 1000);
const panel1 = api.addPanel({
id: 'panel1',
component: 'default',
});
const panel2 = api.addPanel({
id: 'panel2',
component: 'default',
position: { referencePanel: panel1, direction: 'below' },
}); });
const panel3 = api.addPanel({ test('setVisible on popout group should have no effect', async () => {
id: 'panel3', window.open = () => setupMockWindow();
component: 'default',
position: { referencePanel: panel1, direction: 'below' }, const container = document.createElement('div');
const dockview = new DockviewComponent(container, {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
});
const api = new DockviewApi(dockview);
dockview.layout(1000, 1000);
const panel1 = api.addPanel({
id: 'panel1',
component: 'default',
});
const panel2 = api.addPanel({
id: 'panel2',
component: 'default',
position: { referencePanel: panel1, direction: 'below' },
});
const panel3 = api.addPanel({
id: 'panel3',
component: 'default',
position: { referencePanel: panel1, direction: 'below' },
});
await api.addPopoutGroup(panel2);
expect(panel2.api.location.type).toBe('popout');
expect(panel2.api.group.api.isVisible).toBeTruthy();
panel2.api.group.api.setVisible(false);
expect(panel2.api.group.api.isVisible).toBeTruthy();
}); });
expect(api.groups.length).toBe(3); test('opening a popout group from a group that is non visible should automatically make it visible', async () => {
window.open = () => setupMockWindow();
panel1.group.api.setVisible(false); const container = document.createElement('div');
panel2.group.api.setVisible(false);
panel3.group.api.setVisible(false);
expect(panel1.group.api.isVisible).toBeFalsy(); const dockview = new DockviewComponent(container, {
expect(panel2.group.api.isVisible).toBeFalsy(); createComponent(options) {
expect(panel3.group.api.isVisible).toBeFalsy(); switch (options.name) {
case 'default':
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
});
const api = new DockviewApi(dockview);
panel1.group.api.setVisible(true); dockview.layout(1000, 1000);
expect(panel1.group.api.isVisible).toBeTruthy(); const panel1 = api.addPanel({
expect(panel2.group.api.isVisible).toBeFalsy(); id: 'panel1',
expect(panel3.group.api.isVisible).toBeFalsy(); component: 'default',
});
const panel2 = api.addPanel({
id: 'panel2',
component: 'default',
position: { referencePanel: panel1, direction: 'below' },
});
const panel3 = api.addPanel({
id: 'panel3',
component: 'default',
position: { referencePanel: panel1, direction: 'below' },
});
panel2.api.group.api.setVisible(false);
await api.addPopoutGroup(panel2);
expect(panel2.api.location.type).toBe('popout');
expect(panel2.api.group.api.isVisible).toBeTruthy();
});
}); });
describe('addPanel', () => { describe('addPanel', () => {
@ -5939,58 +6148,6 @@ describe('dockviewComponent', () => {
expect(api.groups.length).toBe(3); expect(api.groups.length).toBe(3);
}); });
test('that watermark appears when all views are not visible', () => {
jest.useFakeTimers();
const container = document.createElement('div');
const dockview = new DockviewComponent(container, {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
});
const api = new DockviewApi(dockview);
dockview.layout(1000, 1000);
const panel1 = api.addPanel({
id: 'panel_1',
component: 'default',
});
const panel2 = api.addPanel({
id: 'panel_2',
component: 'default',
position: {
direction: 'right',
},
});
let query = queryByTestId(container, 'watermark-component');
expect(query).toBeFalsy();
panel1.group.api.setVisible(false);
jest.runAllTicks(); // visibility events check fires on microtask-queue
query = queryByTestId(container, 'watermark-component');
expect(query).toBeFalsy();
panel2.group.api.setVisible(false);
jest.runAllTicks(); // visibility events check fires on microtask-queue
query = queryByTestId(container, 'watermark-component');
expect(query).toBeTruthy();
panel1.group.api.setVisible(true);
jest.runAllTicks(); // visibility events check fires on microtask-queue
query = queryByTestId(container, 'watermark-component');
expect(query).toBeFalsy();
});
describe('updateOptions', () => { describe('updateOptions', () => {
test('gap', () => { test('gap', () => {
const container = document.createElement('div'); const container = document.createElement('div');