From 35a97b742605de028da1693d758afba03fcb9f47 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sun, 11 Jun 2023 21:17:04 +0100 Subject: [PATCH] test: gridview tests --- .../src/__tests__/gridview/gridview.spec.ts | 574 ++++++++++++++++++ 1 file changed, 574 insertions(+) diff --git a/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts index 79cdd3de5..bb67ad2ea 100644 --- a/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts +++ b/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts @@ -18,6 +18,10 @@ class MockGridview implements IGridView { >().event; element: HTMLElement = document.createElement('div'); + constructor() { + this.element.className = 'mock-grid-view'; + } + layout(width: number, height: number): void { // } @@ -116,4 +120,574 @@ describe('gridview', () => { checkOrientationFlipsAtEachLevel((gridview as any).root as BranchNode); }); + + test('removeView: remove leaf from branch where branch becomes leaf and parent is root', () => { + const gridview = new Gridview( + false, + { separatorBorder: '' }, + Orientation.HORIZONTAL + ); + gridview.layout(1000, 1000); + + gridview.addView(new MockGridview(), Sizing.Distribute, [0]); + gridview.addView(new MockGridview(), Sizing.Distribute, [1]); + + gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0]); + + expect(gridview.serialize()).toEqual({ + height: 1000, + orientation: 'HORIZONTAL', + root: { + data: [ + { + data: {}, + size: 500, + type: 'leaf', + }, + { + data: [ + { + data: {}, + size: 500, + type: 'leaf', + }, + { + data: {}, + size: 500, + type: 'leaf', + }, + ], + size: 500, + type: 'branch', + }, + ], + size: 1000, + type: 'branch', + }, + width: 1000, + }); + expect( + gridview.element.querySelectorAll('.mock-grid-view').length + ).toBe(3); + + gridview.removeView([1, 0], Sizing.Distribute); + + expect(gridview.serialize()).toEqual({ + height: 1000, + orientation: 'HORIZONTAL', + root: { + data: [ + { + data: {}, + size: 500, + type: 'leaf', + }, + { + data: {}, + size: 500, + type: 'leaf', + }, + ], + size: 1000, + type: 'branch', + }, + width: 1000, + }); + expect( + gridview.element.querySelectorAll('.mock-grid-view').length + ).toBe(2); + }); + + test('removeView: remove leaf from branch where branch remains branch and parent is root', () => { + const gridview = new Gridview( + false, + { separatorBorder: '' }, + Orientation.HORIZONTAL + ); + gridview.layout(1000, 1000); + + gridview.addView(new MockGridview(), Sizing.Distribute, [0]); + gridview.addView(new MockGridview(), Sizing.Distribute, [1]); + + gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0]); + gridview.addView(new MockGridview(), Sizing.Distribute, [1, 1]); + + expect(gridview.serialize()).toEqual({ + height: 1000, + orientation: 'HORIZONTAL', + root: { + data: [ + { + data: {}, + size: 500, + type: 'leaf', + }, + { + data: [ + { + data: {}, + size: 333, + type: 'leaf', + }, + { + data: {}, + size: 333, + type: 'leaf', + }, + { + data: {}, + size: 334, + type: 'leaf', + }, + ], + size: 500, + type: 'branch', + }, + ], + size: 1000, + type: 'branch', + }, + width: 1000, + }); + expect( + gridview.element.querySelectorAll('.mock-grid-view').length + ).toBe(4); + + gridview.removeView([1, 0], Sizing.Distribute); + + expect(gridview.serialize()).toEqual({ + height: 1000, + orientation: 'HORIZONTAL', + root: { + data: [ + { + data: {}, + size: 500, + type: 'leaf', + }, + { + data: [ + { + data: {}, + size: 500, + type: 'leaf', + }, + { + data: {}, + size: 500, + type: 'leaf', + }, + ], + size: 500, + type: 'branch', + }, + ], + size: 1000, + type: 'branch', + }, + width: 1000, + }); + expect( + gridview.element.querySelectorAll('.mock-grid-view').length + ).toBe(3); + }); + + test('removeView: remove leaf where parent is root', () => { + const gridview = new Gridview( + false, + { separatorBorder: '' }, + Orientation.HORIZONTAL + ); + gridview.layout(1000, 1000); + + gridview.addView(new MockGridview(), Sizing.Distribute, [0]); + gridview.addView(new MockGridview(), Sizing.Distribute, [1]); + + gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0]); + + expect(gridview.serialize()).toEqual({ + height: 1000, + orientation: 'HORIZONTAL', + root: { + data: [ + { + data: {}, + size: 500, + type: 'leaf', + }, + { + data: [ + { + data: {}, + size: 500, + type: 'leaf', + }, + { + data: {}, + size: 500, + type: 'leaf', + }, + ], + size: 500, + type: 'branch', + }, + ], + size: 1000, + type: 'branch', + }, + width: 1000, + }); + expect( + gridview.element.querySelectorAll('.mock-grid-view').length + ).toBe(3); + + gridview.removeView([0], Sizing.Distribute); + + expect(gridview.serialize()).toEqual({ + height: 1000, + orientation: 'VERTICAL', + root: { + data: [ + { + data: {}, + size: 500, + type: 'leaf', + }, + { + data: {}, + size: 500, + type: 'leaf', + }, + ], + size: 1000, + type: 'branch', + }, + width: 1000, + }); + expect( + gridview.element.querySelectorAll('.mock-grid-view').length + ).toBe(2); + }); + + test('removeView: remove leaf from branch where branch becomes leaf and parent is not root', () => { + const gridview = new Gridview( + false, + { separatorBorder: '' }, + Orientation.HORIZONTAL + ); + gridview.layout(1000, 1000); + + gridview.addView(new MockGridview(), Sizing.Distribute, [0]); + gridview.addView(new MockGridview(), Sizing.Distribute, [1]); + + gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0]); + gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0, 0]); + + expect(gridview.serialize()).toEqual({ + height: 1000, + orientation: 'HORIZONTAL', + root: { + data: [ + { + data: {}, + size: 500, + type: 'leaf', + }, + { + data: [ + { + data: [ + { + data: {}, + size: 250, + type: 'leaf', + }, + { + data: {}, + size: 250, + type: 'leaf', + }, + ], + size: 500, + type: 'branch', + }, + { + data: {}, + size: 500, + type: 'leaf', + }, + ], + size: 500, + type: 'branch', + }, + ], + size: 1000, + type: 'branch', + }, + width: 1000, + }); + expect( + gridview.element.querySelectorAll('.mock-grid-view').length + ).toBe(4); + + gridview.removeView([1, 0, 0], Sizing.Distribute); + + expect(gridview.serialize()).toEqual({ + height: 1000, + orientation: 'HORIZONTAL', + root: { + data: [ + { + data: {}, + size: 500, + type: 'leaf', + }, + { + data: [ + { + data: {}, + size: 500, + type: 'leaf', + }, + { + data: {}, + size: 500, + type: 'leaf', + }, + ], + size: 500, + type: 'branch', + }, + ], + size: 1000, + type: 'branch', + }, + width: 1000, + }); + expect( + gridview.element.querySelectorAll('.mock-grid-view').length + ).toBe(3); + }); + + test('removeView: remove leaf from branch where branch remains branch and parent is not root', () => { + const gridview = new Gridview( + false, + { separatorBorder: '' }, + Orientation.HORIZONTAL + ); + gridview.layout(1000, 1000); + + gridview.addView(new MockGridview(), Sizing.Distribute, [0]); + gridview.addView(new MockGridview(), Sizing.Distribute, [1]); + + gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0]); + gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0, 0]); + gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0, 1]); + + expect(gridview.serialize()).toEqual({ + height: 1000, + orientation: 'HORIZONTAL', + root: { + data: [ + { + data: {}, + size: 500, + type: 'leaf', + }, + { + data: [ + { + data: [ + { + data: {}, + size: 166, + type: 'leaf', + }, + { + data: {}, + size: 166, + type: 'leaf', + }, + { + data: {}, + size: 168, + type: 'leaf', + }, + ], + size: 500, + type: 'branch', + }, + { + data: {}, + size: 500, + type: 'leaf', + }, + ], + size: 500, + type: 'branch', + }, + ], + size: 1000, + type: 'branch', + }, + width: 1000, + }); + expect( + gridview.element.querySelectorAll('.mock-grid-view').length + ).toBe(5); + + gridview.removeView([1, 0, 1], Sizing.Distribute); + + expect(gridview.serialize()).toEqual({ + height: 1000, + orientation: 'HORIZONTAL', + root: { + data: [ + { + data: {}, + size: 500, + type: 'leaf', + }, + { + data: [ + { + data: [ + { + data: {}, + size: 250, + type: 'leaf', + }, + { + data: {}, + size: 250, + type: 'leaf', + }, + ], + size: 500, + type: 'branch', + }, + { + data: {}, + size: 500, + type: 'leaf', + }, + ], + size: 500, + type: 'branch', + }, + ], + size: 1000, + type: 'branch', + }, + width: 1000, + }); + expect( + gridview.element.querySelectorAll('.mock-grid-view').length + ).toBe(4); + }); + + test('removeView: remove leaf where parent is root', () => { + const gridview = new Gridview( + false, + { separatorBorder: '' }, + Orientation.HORIZONTAL + ); + gridview.layout(1000, 1000); + + gridview.addView(new MockGridview(), Sizing.Distribute, [0]); + gridview.addView(new MockGridview(), Sizing.Distribute, [1]); + + gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0]); + gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0, 0]); + gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0, 1]); + + expect(gridview.serialize()).toEqual({ + height: 1000, + orientation: 'HORIZONTAL', + root: { + data: [ + { + data: {}, + size: 500, + type: 'leaf', + }, + { + data: [ + { + data: [ + { + data: {}, + size: 166, + type: 'leaf', + }, + { + data: {}, + size: 166, + type: 'leaf', + }, + { + data: {}, + size: 168, + type: 'leaf', + }, + ], + size: 500, + type: 'branch', + }, + { + data: {}, + size: 500, + type: 'leaf', + }, + ], + size: 500, + type: 'branch', + }, + ], + size: 1000, + type: 'branch', + }, + width: 1000, + }); + expect( + gridview.element.querySelectorAll('.mock-grid-view').length + ).toBe(5); + + gridview.removeView([1, 1], Sizing.Distribute); + + expect(gridview.serialize()).toEqual({ + height: 1000, + orientation: 'HORIZONTAL', + root: { + data: [ + { + data: {}, + size: 500, + type: 'leaf', + }, + { + data: {}, + size: 166, + type: 'leaf', + }, + { + data: {}, + size: 166, + type: 'leaf', + }, + { + data: {}, + size: 168, + type: 'leaf', + }, + ], + size: 1000, + type: 'branch', + }, + width: 1000, + }); + expect( + gridview.element.querySelectorAll('.mock-grid-view').length + ).toBe(4); + }); });