CoCalc -- gridview.test.ts

GitHub Repository: microsoft/vscode
Path: blob/main/src/vs/base/test/browser/ui/grid/gridview.test.ts
³²⁹⁶ views
1
/*---------------------------------------------------------------------------------------------
2
 *  Copyright (c) Microsoft Corporation. All rights reserved.
3
 *  Licensed under the MIT License. See License.txt in the project root for license information.
4
 *--------------------------------------------------------------------------------------------*/
5

6
import assert from 'assert';
7
import { $ } from '../../../../browser/dom.js';
8
import { GridView, IView, Orientation, Sizing } from '../../../../browser/ui/grid/gridview.js';
9
import { nodesToArrays, TestView } from './util.js';
10
import { ensureNoDisposablesAreLeakedInTestSuite } from '../../../common/utils.js';
11

12
suite('Gridview', function () {
13

14
	const store = ensureNoDisposablesAreLeakedInTestSuite();
15

16
	function createGridView(): GridView {
17
		const gridview = store.add(new GridView());
18
		const container = $('.container');
19

20
		container.style.position = 'absolute';
21
		container.style.width = `${200}px`;
22
		container.style.height = `${200}px`;
23
		container.appendChild(gridview.element);
24

25
		return gridview;
26
	}
27

28
	test('empty gridview is empty', function () {
29
		const gridview = createGridView();
30
		assert.deepStrictEqual(nodesToArrays(gridview.getView()), []);
31
	});
32

33
	test('gridview addView', function () {
34
		const gridview = createGridView();
35

36
		const view = store.add(new TestView(20, 20, 20, 20));
37
		assert.throws(() => gridview.addView(view, 200, []), 'empty location');
38
		assert.throws(() => gridview.addView(view, 200, [1]), 'index overflow');
39
		assert.throws(() => gridview.addView(view, 200, [0, 0]), 'hierarchy overflow');
40

41
		const views = [
42
			store.add(new TestView(20, 20, 20, 20)),
43
			store.add(new TestView(20, 20, 20, 20)),
44
			store.add(new TestView(20, 20, 20, 20))
45
		];
46

47
		gridview.addView(views[0], 200, [0]);
48
		gridview.addView(views[1], 200, [1]);
49
		gridview.addView(views[2], 200, [2]);
50

51
		assert.deepStrictEqual(nodesToArrays(gridview.getView()), views);
52
	});
53

54
	test('gridview addView nested', function () {
55
		const gridview = createGridView();
56

57
		const views = [
58
			store.add(new TestView(20, 20, 20, 20)),
59
			[
60
				store.add(new TestView(20, 20, 20, 20)),
61
				store.add(new TestView(20, 20, 20, 20))
62
			]
63
		];
64

65
		gridview.addView(views[0] as IView, 200, [0]);
66
		gridview.addView((views[1] as TestView[])[0] as IView, 200, [1]);
67
		gridview.addView((views[1] as TestView[])[1] as IView, 200, [1, 1]);
68

69
		assert.deepStrictEqual(nodesToArrays(gridview.getView()), views);
70
	});
71

72
	test('gridview addView deep nested', function () {
73
		const gridview = createGridView();
74

75
		const view1 = store.add(new TestView(20, 20, 20, 20));
76
		gridview.addView(view1 as IView, 200, [0]);
77
		assert.deepStrictEqual(nodesToArrays(gridview.getView()), [view1]);
78

79
		const view2 = store.add(new TestView(20, 20, 20, 20));
80
		gridview.addView(view2 as IView, 200, [1]);
81
		assert.deepStrictEqual(nodesToArrays(gridview.getView()), [view1, view2]);
82

83
		const view3 = store.add(new TestView(20, 20, 20, 20));
84
		gridview.addView(view3 as IView, 200, [1, 0]);
85
		assert.deepStrictEqual(nodesToArrays(gridview.getView()), [view1, [view3, view2]]);
86

87
		const view4 = store.add(new TestView(20, 20, 20, 20));
88
		gridview.addView(view4 as IView, 200, [1, 0, 0]);
89
		assert.deepStrictEqual(nodesToArrays(gridview.getView()), [view1, [[view4, view3], view2]]);
90

91
		const view5 = store.add(new TestView(20, 20, 20, 20));
92
		gridview.addView(view5 as IView, 200, [1, 0]);
93
		assert.deepStrictEqual(nodesToArrays(gridview.getView()), [view1, [view5, [view4, view3], view2]]);
94

95
		const view6 = store.add(new TestView(20, 20, 20, 20));
96
		gridview.addView(view6 as IView, 200, [2]);
97
		assert.deepStrictEqual(nodesToArrays(gridview.getView()), [view1, [view5, [view4, view3], view2], view6]);
98

99
		const view7 = store.add(new TestView(20, 20, 20, 20));
100
		gridview.addView(view7 as IView, 200, [1, 1]);
101
		assert.deepStrictEqual(nodesToArrays(gridview.getView()), [view1, [view5, view7, [view4, view3], view2], view6]);
102

103
		const view8 = store.add(new TestView(20, 20, 20, 20));
104
		gridview.addView(view8 as IView, 200, [1, 1, 0]);
105
		assert.deepStrictEqual(nodesToArrays(gridview.getView()), [view1, [view5, [view8, view7], [view4, view3], view2], view6]);
106
	});
107

108
	test('simple layout', function () {
109
		const gridview = createGridView();
110
		gridview.layout(800, 600);
111

112
		const view1 = store.add(new TestView(50, Number.POSITIVE_INFINITY, 50, Number.POSITIVE_INFINITY));
113
		gridview.addView(view1, 200, [0]);
114
		assert.deepStrictEqual(view1.size, [800, 600]);
115
		assert.deepStrictEqual(gridview.getViewSize([0]), { width: 800, height: 600 });
116

117
		const view2 = store.add(new TestView(50, Number.POSITIVE_INFINITY, 50, Number.POSITIVE_INFINITY));
118
		gridview.addView(view2, 200, [0]);
119
		assert.deepStrictEqual(view1.size, [800, 400]);
120
		assert.deepStrictEqual(gridview.getViewSize([1]), { width: 800, height: 400 });
121
		assert.deepStrictEqual(view2.size, [800, 200]);
122
		assert.deepStrictEqual(gridview.getViewSize([0]), { width: 800, height: 200 });
123

124
		const view3 = store.add(new TestView(50, Number.POSITIVE_INFINITY, 50, Number.POSITIVE_INFINITY));
125
		gridview.addView(view3, 200, [1, 1]);
126
		assert.deepStrictEqual(view1.size, [600, 400]);
127
		assert.deepStrictEqual(gridview.getViewSize([1, 0]), { width: 600, height: 400 });
128
		assert.deepStrictEqual(view2.size, [800, 200]);
129
		assert.deepStrictEqual(gridview.getViewSize([0]), { width: 800, height: 200 });
130
		assert.deepStrictEqual(view3.size, [200, 400]);
131
		assert.deepStrictEqual(gridview.getViewSize([1, 1]), { width: 200, height: 400 });
132

133
		const view4 = store.add(new TestView(50, Number.POSITIVE_INFINITY, 50, Number.POSITIVE_INFINITY));
134
		gridview.addView(view4, 200, [0, 0]);
135
		assert.deepStrictEqual(view1.size, [600, 400]);
136
		assert.deepStrictEqual(gridview.getViewSize([1, 0]), { width: 600, height: 400 });
137
		assert.deepStrictEqual(view2.size, [600, 200]);
138
		assert.deepStrictEqual(gridview.getViewSize([0, 1]), { width: 600, height: 200 });
139
		assert.deepStrictEqual(view3.size, [200, 400]);
140
		assert.deepStrictEqual(gridview.getViewSize([1, 1]), { width: 200, height: 400 });
141
		assert.deepStrictEqual(view4.size, [200, 200]);
142
		assert.deepStrictEqual(gridview.getViewSize([0, 0]), { width: 200, height: 200 });
143

144
		const view5 = store.add(new TestView(50, Number.POSITIVE_INFINITY, 50, Number.POSITIVE_INFINITY));
145
		gridview.addView(view5, 100, [1, 0, 1]);
146
		assert.deepStrictEqual(view1.size, [600, 300]);
147
		assert.deepStrictEqual(gridview.getViewSize([1, 0, 0]), { width: 600, height: 300 });
148
		assert.deepStrictEqual(view2.size, [600, 200]);
149
		assert.deepStrictEqual(gridview.getViewSize([0, 1]), { width: 600, height: 200 });
150
		assert.deepStrictEqual(view3.size, [200, 400]);
151
		assert.deepStrictEqual(gridview.getViewSize([1, 1]), { width: 200, height: 400 });
152
		assert.deepStrictEqual(view4.size, [200, 200]);
153
		assert.deepStrictEqual(gridview.getViewSize([0, 0]), { width: 200, height: 200 });
154
		assert.deepStrictEqual(view5.size, [600, 100]);
155
		assert.deepStrictEqual(gridview.getViewSize([1, 0, 1]), { width: 600, height: 100 });
156
	});
157

158
	test('simple layout with automatic size distribution', function () {
159
		const gridview = createGridView();
160
		gridview.layout(800, 600);
161

162
		const view1 = store.add(new TestView(50, Number.POSITIVE_INFINITY, 50, Number.POSITIVE_INFINITY));
163
		gridview.addView(view1, Sizing.Distribute, [0]);
164
		assert.deepStrictEqual(view1.size, [800, 600]);
165
		assert.deepStrictEqual(gridview.getViewSize([0]), { width: 800, height: 600 });
166

167
		const view2 = store.add(new TestView(50, Number.POSITIVE_INFINITY, 50, Number.POSITIVE_INFINITY));
168
		gridview.addView(view2, Sizing.Distribute, [0]);
169
		assert.deepStrictEqual(view1.size, [800, 300]);
170
		assert.deepStrictEqual(view2.size, [800, 300]);
171

172
		const view3 = store.add(new TestView(50, Number.POSITIVE_INFINITY, 50, Number.POSITIVE_INFINITY));
173
		gridview.addView(view3, Sizing.Distribute, [1, 1]);
174
		assert.deepStrictEqual(view1.size, [400, 300]);
175
		assert.deepStrictEqual(view2.size, [800, 300]);
176
		assert.deepStrictEqual(view3.size, [400, 300]);
177

178
		const view4 = store.add(new TestView(50, Number.POSITIVE_INFINITY, 50, Number.POSITIVE_INFINITY));
179
		gridview.addView(view4, Sizing.Distribute, [0, 0]);
180
		assert.deepStrictEqual(view1.size, [400, 300]);
181
		assert.deepStrictEqual(view2.size, [400, 300]);
182
		assert.deepStrictEqual(view3.size, [400, 300]);
183
		assert.deepStrictEqual(view4.size, [400, 300]);
184

185
		const view5 = store.add(new TestView(50, Number.POSITIVE_INFINITY, 50, Number.POSITIVE_INFINITY));
186
		gridview.addView(view5, Sizing.Distribute, [1, 0, 1]);
187
		assert.deepStrictEqual(view1.size, [400, 150]);
188
		assert.deepStrictEqual(view2.size, [400, 300]);
189
		assert.deepStrictEqual(view3.size, [400, 300]);
190
		assert.deepStrictEqual(view4.size, [400, 300]);
191
		assert.deepStrictEqual(view5.size, [400, 150]);
192
	});
193

194
	test('addviews before layout call 1', function () {
195
		const gridview = createGridView();
196

197
		const view1 = store.add(new TestView(50, Number.POSITIVE_INFINITY, 50, Number.POSITIVE_INFINITY));
198
		gridview.addView(view1, 200, [0]);
199

200
		const view2 = store.add(new TestView(50, Number.POSITIVE_INFINITY, 50, Number.POSITIVE_INFINITY));
201
		gridview.addView(view2, 200, [0]);
202

203
		const view3 = store.add(new TestView(50, Number.POSITIVE_INFINITY, 50, Number.POSITIVE_INFINITY));
204
		gridview.addView(view3, 200, [1, 1]);
205

206
		gridview.layout(800, 600);
207

208
		assert.deepStrictEqual(view1.size, [400, 300]);
209
		assert.deepStrictEqual(view2.size, [800, 300]);
210
		assert.deepStrictEqual(view3.size, [400, 300]);
211
	});
212

213
	test('addviews before layout call 2', function () {
214
		const gridview = createGridView();
215
		const view1 = store.add(new TestView(50, Number.POSITIVE_INFINITY, 50, Number.POSITIVE_INFINITY));
216
		gridview.addView(view1, 200, [0]);
217

218
		const view2 = store.add(new TestView(50, Number.POSITIVE_INFINITY, 50, Number.POSITIVE_INFINITY));
219
		gridview.addView(view2, 200, [0]);
220

221
		const view3 = store.add(new TestView(50, Number.POSITIVE_INFINITY, 50, Number.POSITIVE_INFINITY));
222
		gridview.addView(view3, 200, [0, 0]);
223

224
		gridview.layout(800, 600);
225

226
		assert.deepStrictEqual(view1.size, [800, 300]);
227
		assert.deepStrictEqual(view2.size, [400, 300]);
228
		assert.deepStrictEqual(view3.size, [400, 300]);
229
	});
230

231
	test('flipping orientation should preserve absolute offsets', function () {
232
		const gridview = createGridView();
233
		const view1 = store.add(new TestView(50, Number.POSITIVE_INFINITY, 50, Number.POSITIVE_INFINITY));
234
		gridview.addView(view1, 200, [0]);
235

236
		const view2 = store.add(new TestView(50, Number.POSITIVE_INFINITY, 50, Number.POSITIVE_INFINITY));
237
		gridview.addView(view2, 200, [1]);
238

239
		gridview.layout(800, 600, 100, 200);
240

241
		assert.deepStrictEqual([view1.top, view1.left], [100, 200]);
242
		assert.deepStrictEqual([view2.top, view2.left], [100 + 300, 200]);
243

244
		gridview.orientation = Orientation.HORIZONTAL;
245

246
		assert.deepStrictEqual([view1.top, view1.left], [100, 200]);
247
		assert.deepStrictEqual([view2.top, view2.left], [100, 200 + 400]);
248
	});
249
});
250

251
Product

Resources

Company
