Skip to content

Commit

Permalink
test: add tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@mathuo
mathuo committed Oct 26, 2024
1 parent 3c680b2 commit f557e90
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 40 deletions.
35 changes: 35 additions & 0 deletions packages/dockview-core/src/__tests__/__mocks__/mockWindow.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { fromPartial } from "@total-typescript/shoehorn";

export function setupMockWindow() {
const listeners: Record<string, (() => void)[]> = {};

let width = 1000;
let height = 2000;

return fromPartial<Window>({
addEventListener: (type: string, listener: () => void) => {
if (!listeners[type]) {
listeners[type] = [];
}
listeners[type].push(listener);
if (type === 'load') {
listener();
}
},
dispatchEvent: (event: Event) => {
const items = listeners[event.type];
if (!items) {
return;
}
items.forEach((item) => item());
},
document: document,
close: jest.fn(),
get innerWidth() {
return width++;
},
get innerHeight() {
return height++;
},
});
}
38 changes: 33 additions & 5 deletions packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import {
import { fromPartial } from '@total-typescript/shoehorn';
import { DockviewApi } from '../../api/component.api';
import { DockviewDndOverlayEvent } from '../../dockview/options';
import { SizeEvent } from '../../api/gridviewPanelApi';
import { setupMockWindow } from '../__mocks__/mockWindow';

class PanelContentPartTest implements IContentRenderer {
element: HTMLElement = document.createElement('div');
Expand Down Expand Up @@ -115,7 +117,7 @@ describe('dockviewComponent', () => {
},
});

window.open = jest.fn(); // not implemented by jest
window.open = jest.fn();
});

test('update className', () => {
Expand Down Expand Up @@ -4817,6 +4819,8 @@ describe('dockviewComponent', () => {
test('add a popout group', async () => {
const container = document.createElement('div');

window.open = () => setupMockWindow();

const dockview = new DockviewComponent(container, {
createComponent(options) {
switch (options.name) {
Expand Down Expand Up @@ -4848,12 +4852,36 @@ describe('dockviewComponent', () => {
expect(dockview.groups.length).toBe(1);
expect(dockview.panels.length).toBe(2);

await dockview.addPopoutGroup(panel2.group);
const events: SizeEvent[] = [];

panel2.api.onDidDimensionsChange((event) => {
events.push(event);
});

const originalGroup = panel2.group;

expect(await dockview.addPopoutGroup(panel2.group)).toBeTruthy();

expect(events).toEqual([{ height: 2000, width: 1000 }]);

expect(originalGroup.api.location.type).toBe('grid');
expect(originalGroup.api.isVisible).toBeFalsy();

expect(panel1.group.api.location.type).toBe('popout');
expect(panel2.group.api.location.type).toBe('popout');
expect(dockview.groups.length).toBe(2);
expect(dockview.panels.length).toBe(2);

if (panel2.api.location.type !== 'popout') {
fail('unexpected');
}
const alternativeWindow = panel2.api.location.getWindow();
alternativeWindow.dispatchEvent(new Event('resize'));

expect(events).toEqual([
{ height: 2000, width: 1000 },
{ height: 2001, width: 1001 },
]);
});

test('remove all panels from popout group', async () => {
Expand Down Expand Up @@ -4892,7 +4920,7 @@ describe('dockviewComponent', () => {
position: { referencePanel: panel2 },
});

await dockview.addPopoutGroup(panel2.group);
expect(await dockview.addPopoutGroup(panel2.group)).toBeTruthy();

expect(panel1.group.api.location.type).toBe('grid');
expect(panel2.group.api.location.type).toBe('popout');
Expand Down Expand Up @@ -4934,7 +4962,7 @@ describe('dockviewComponent', () => {
component: 'default',
});

await dockview.addPopoutGroup(panel1);
expect(await dockview.addPopoutGroup(panel1)).toBeTruthy();

expect(dockview.panels.length).toBe(1);
expect(dockview.groups.length).toBe(2);
Expand Down Expand Up @@ -4989,7 +5017,7 @@ describe('dockviewComponent', () => {
expect(dockview.groups.length).toBe(2);
expect(dockview.panels.length).toBe(3);

await dockview.addPopoutGroup(panel2.group);
expect(await dockview.addPopoutGroup(panel2.group)).toBeTruthy();

expect(panel1.group.api.location.type).toBe('popout');
expect(panel2.group.api.location.type).toBe('popout');
Expand Down
2 changes: 1 addition & 1 deletion packages/dockview-core/src/api/component.api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -913,7 +913,7 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
onDidOpen?: (event: { id: string; window: Window }) => void;
onWillClose?: (event: { id: string; window: Window }) => void;
}
): Promise<void> {
): Promise<boolean> {
return this.component.addPopoutGroup(item, options);
}

Expand Down
29 changes: 19 additions & 10 deletions packages/dockview-core/src/dockview/dockviewComponent.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
onDidOpen?: (event: { id: string; window: Window }) => void;
onWillClose?: (event: { id: string; window: Window }) => void;
}
): Promise<void>;
): Promise<boolean>;
}

export class DockviewComponent
Expand Down Expand Up @@ -548,7 +548,7 @@ export class DockviewComponent
onWillClose?: (event: { id: string; window: Window }) => void;
overridePopoutGroup?: DockviewGroupPanel;
}
): Promise<void> {
): Promise<boolean> {
if (
itemToPopout instanceof DockviewPanel &&
itemToPopout.group.size === 1
Expand Down Expand Up @@ -579,10 +579,6 @@ export class DockviewComponent
const groupId =
options?.overridePopoutGroup?.id ?? this.getNextGroupId();

if (itemToPopout.api.location.type === 'grid') {
itemToPopout.api.setVisible(false);
}

const _window = new PopoutWindow(
`${this.id}-${groupId}`, // unique id
theme ?? '',
Expand All @@ -608,12 +604,12 @@ export class DockviewComponent
.open()
.then((popoutContainer) => {
if (_window.isDisposed) {
return;
return false;
}

if (popoutContainer === null) {
popoutWindowDisposable.dispose();
return;
return false;
}

const gready = document.createElement('div');
Expand All @@ -635,7 +631,10 @@ export class DockviewComponent
options?.overridePopoutGroup ??
this.createGroup({ id: groupId });
group.model.renderContainer = overlayRenderContainer;
group.layout(_window.window!.innerWidth, _window.window!.innerHeight);
group.layout(
_window.window!.innerWidth,
_window.window!.innerHeight
);

if (!options?.overridePopoutGroup) {
this._onDidAddGroup.fire(group);
Expand Down Expand Up @@ -677,6 +676,10 @@ export class DockviewComponent
getWindow: () => _window.window!,
};

if (itemToPopout.api.location.type === 'grid') {
itemToPopout.api.setVisible(false);
}

this.doSetGroupAndPanelActive(group);

popoutWindowDisposable.addDisposables(
Expand Down Expand Up @@ -716,7 +719,10 @@ export class DockviewComponent
_window.window!,
'resize',
() => {
group.layout(_window.window!.innerWidth, _window.window!.innerHeight);
group.layout(
_window.window!.innerWidth,
_window.window!.innerHeight
);
}
),
overlayRenderContainer,
Expand Down Expand Up @@ -753,9 +759,12 @@ export class DockviewComponent

this._popoutGroups.push(value);
this.updateWatermark();

return true;
})
.catch((err) => {
console.error('dockview: failed to create popout window', err);
return false;
});
}

Expand Down
53 changes: 29 additions & 24 deletions packages/dockview-core/src/popoutWindow.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export class PopoutWindow extends CompositeDisposable {
window: externalWindow,
});

return new Promise<HTMLElement | null>((resolve) => {
return new Promise<HTMLElement | null>((resolve, reject) => {
externalWindow.addEventListener('unload', (e) => {
// if page fails to load before unloading
// this.close();
Expand All @@ -135,29 +135,34 @@ export class PopoutWindow extends CompositeDisposable {
* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
*/

const externalDocument = externalWindow.document;
externalDocument.title = document.title;

externalDocument.body.appendChild(container);

addStyles(externalDocument, window.document.styleSheets);

/**
* beforeunload must be registered after load for reasons I could not determine
* otherwise the beforeunload event will not fire when the window is closed
*/
addDisposableWindowListener(
externalWindow,
'beforeunload',
() => {
/**
* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
*/
this.close();
}
);

resolve(container);
try {
const externalDocument = externalWindow.document;
externalDocument.title = document.title;

externalDocument.body.appendChild(container);

addStyles(externalDocument, window.document.styleSheets);

/**
* beforeunload must be registered after load for reasons I could not determine
* otherwise the beforeunload event will not fire when the window is closed
*/
addDisposableWindowListener(
externalWindow,
'beforeunload',
() => {
/**
* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
*/
this.close();
}
);

resolve(container);
} catch (err) {
// only except this is the DOM isn't setup. e.g. in a in correctly configured test
reject(err);
}
});
});
}
Expand Down

0 comments on commit f557e90

Please sign in to comment.