mirror of
https://github.com/mathuo/dockview
synced 2025-02-13 11:55:45 +00:00
test: gridview tests
This commit is contained in:
mathuo
parent
54bc30c1aa
commit
35a97b7426
@ -18,6 +18,10 @@ class MockGridview implements IGridView {
|
|||||||
>().event;
|
>().event;
|
||||||
element: HTMLElement = document.createElement('div');
|
element: HTMLElement = document.createElement('div');
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.element.className = 'mock-grid-view';
|
||||||
|
}
|
||||||
|
|
||||||
layout(width: number, height: number): void {
|
layout(width: number, height: number): void {
|
||||||
//
|
//
|
||||||
}
|
}
|
||||||
@ -116,4 +120,574 @@ describe('gridview', () => {
|
|||||||
|
|
||||||
checkOrientationFlipsAtEachLevel((gridview as any).root as BranchNode);
|
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);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user