@spectrum-web-components/split-view 1.0.1 → 1.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (12) hide show
  1. package/package.json +3 -4
  2. package/LICENSE +0 -201
  3. package/stories/split-view.stories.js +0 -286
  4. package/stories/split-view.stories.js.map +0 -7
  5. package/test/benchmark/basic-test.js +0 -11
  6. package/test/benchmark/basic-test.js.map +0 -7
  7. package/test/split-view-memory.test.js +0 -8
  8. package/test/split-view-memory.test.js.map +0 -7
  9. package/test/split-view.test-vrt.js +0 -5
  10. package/test/split-view.test-vrt.js.map +0 -7
  11. package/test/split-view.test.js +0 -977
  12. package/test/split-view.test.js.map +0 -7
package/test/split-view.test.js DELETED
@@ -1,977 +0,0 @@
1
- "use strict";
2
- import {
3
- elementUpdated,
4
- expect,
5
- fixture,
6
- html,
7
- nextFrame
8
- } from "@open-wc/testing";
9
- import "@spectrum-web-components/split-view/sp-split-view.js";
10
- import {
11
- arrowDownEvent,
12
- arrowLeftEvent,
13
- arrowRightEvent,
14
- arrowUpEvent,
15
- endEvent,
16
- homeEvent,
17
- pageDownEvent,
18
- pageUpEvent,
19
- shiftTabEvent,
20
- testForLitDevWarnings
21
- } from "../../../test/testing-helpers.js";
22
- import { spy } from "sinon";
23
- describe("SplitView", () => {
24
- testForLitDevWarnings(
25
- async () => await fixture(
26
- html`
27
- <sp-split-view primary-size="100">
28
- <div>First panel</div>
29
- <div>Second panel</div>
30
- </sp-split-view>
31
- `
32
- )
33
- );
34
- it("loads default (horizontal) split-view accessibly", async () => {
35
- const el = await fixture(
36
- html`
37
- <sp-split-view primary-size="100">
38
- <div>First panel</div>
39
- <div>Second panel</div>
40
- </sp-split-view>
41
- `
42
- );
43
- await elementUpdated(el);
44
- await expect(el).to.be.accessible();
45
- expect(el.splitterPos || 0).to.equal(100);
46
- expect(el.resizable).to.be.false;
47
- expect(el.collapsible).to.be.false;
48
- const gripper = el.shadowRoot.querySelector(
49
- "#gripper"
50
- );
51
- expect(gripper).to.be.null;
52
- const splitter = el.shadowRoot.querySelector(
53
- "#splitter"
54
- );
55
- expect(getComputedStyle(splitter).cursor).to.equal("auto");
56
- });
57
- it("loads horizontal [resizable] split-view accessibly", async () => {
58
- const el = await fixture(
59
- html`
60
- <sp-split-view resizable primary-size="100px">
61
- <div>First panel</div>
62
- <div>Second panel</div>
63
- </sp-split-view>
64
- `
65
- );
66
- await elementUpdated(el);
67
- await expect(el).to.be.accessible();
68
- expect(el.splitterPos || 0).to.equal(100);
69
- const gripper = el.shadowRoot.querySelector(
70
- "#gripper"
71
- );
72
- await expect(gripper).to.be.accessible();
73
- const splitter = el.shadowRoot.querySelector(
74
- "#splitter"
75
- );
76
- expect(getComputedStyle(splitter).cursor).to.equal("ew-resize");
77
- });
78
- it("loads [vertical] split-view accessibly", async () => {
79
- const el = await fixture(
80
- html`
81
- <sp-split-view
82
- vertical
83
- primary-size="75%"
84
- style="height: 400px"
85
- >
86
- <div>First panel</div>
87
- <div>Second panel</div>
88
- </sp-split-view>
89
- `
90
- );
91
- await elementUpdated(el);
92
- await expect(el).to.be.accessible();
93
- expect(el.splitterPos || 0).to.equal(300);
94
- const splitter = el.shadowRoot.querySelector(
95
- "#splitter"
96
- );
97
- expect(getComputedStyle(splitter).cursor).to.equal("auto");
98
- });
99
- it("loads [vertical] [resizable] split-view accessibly", async () => {
100
- const el = await fixture(
101
- html`
102
- <sp-split-view vertical resizable style="height: 400px">
103
- <div>First panel</div>
104
- <div>Second panel</div>
105
- </sp-split-view>
106
- `
107
- );
108
- await elementUpdated(el);
109
- await expect(el).to.be.accessible();
110
- expect(el.splitterPos || 0).to.equal(200);
111
- const splitter = el.shadowRoot.querySelector(
112
- "#splitter"
113
- );
114
- expect(getComputedStyle(splitter).cursor).to.equal("ns-resize");
115
- });
116
- it("set all panel values", async () => {
117
- const splitTotalWidth = 400;
118
- const el = await fixture(
119
- html`
120
- <sp-split-view
121
- resizable
122
- primary-min="50"
123
- primary-max="300"
124
- secondary-min="50"
125
- style=${`height: 500px; width: ${splitTotalWidth}px;`}
126
- >
127
- <div>First panel</div>
128
- <div>Second panel</div>
129
- </sp-split-view>
130
- `
131
- );
132
- await elementUpdated(el);
133
- expect(el.resizable).to.be.true;
134
- expect(el.primaryMin).to.equal(50);
135
- expect(el.primaryMax).to.equal(300);
136
- expect(el.secondaryMin).to.equal(50);
137
- expect(el.secondaryMax).to.equal(3840);
138
- });
139
- it("use auto height in primary pane", async () => {
140
- const splitTotalWidth = 400;
141
- const el = await fixture(
142
- html`
143
- <sp-split-view
144
- resizable
145
- primary-size="auto"
146
- style=${`height: 500px; width: ${splitTotalWidth}px;`}
147
- >
148
- <div>
149
- First panel Lorem Ipsum is simply dummy text of the
150
- printing and typesetting industry. Lorem Ipsum has been
151
- the industry's standard dummy text ever since the 1500s,
152
- when an unknown printer took a galley of type and
153
- scrambled it to make a type specimen book. It has
154
- survived not only five centuries, but also the leap into
155
- electronic typesetting, remaining essentially unchanged.
156
- </div>
157
- <div>Second panel</div>
158
- </sp-split-view>
159
- `
160
- );
161
- await elementUpdated(el);
162
- expect(el.resizable).to.be.true;
163
- expect(el.primarySize).to.equal("auto");
164
- expect(el.splitterPos || 0).to.equal(398);
165
- });
166
- it("resizes when pointer moves and resizable is enabled [ltr]", async () => {
167
- let pointerId = -1;
168
- const splitTotalWidth = 400;
169
- const el = await fixture(
170
- html`
171
- <sp-split-view
172
- resizable
173
- primary-min="50"
174
- secondary-min="50"
175
- style=${`height: 200px; width: ${splitTotalWidth}px;`}
176
- >
177
- <div>First panel</div>
178
- <div>Second panel</div>
179
- </sp-split-view>
180
- `
181
- );
182
- await elementUpdated(el);
183
- expect(el.resizable).to.be.true;
184
- const splitter = el.shadowRoot.querySelector(
185
- "#splitter"
186
- );
187
- splitter.setPointerCapture = (id) => pointerId = id;
188
- splitter.releasePointerCapture = (id) => pointerId = id;
189
- let pos = el.splitterPos;
190
- expect(el.splitterPos).to.equal(200);
191
- splitter.dispatchEvent(
192
- new PointerEvent("pointerdown", { pointerId: 1 })
193
- );
194
- await elementUpdated(el);
195
- expect(pointerId).to.equal(1);
196
- pos -= 10;
197
- splitter.dispatchEvent(
198
- new PointerEvent("pointermove", {
199
- clientX: pos
200
- })
201
- );
202
- await elementUpdated(el);
203
- await nextFrame();
204
- expect(Math.round(el.splitterPos)).to.equal(
205
- pos - el.getBoundingClientRect().left
206
- );
207
- splitter.dispatchEvent(
208
- new PointerEvent("pointermove", {
209
- clientX: 0
210
- })
211
- );
212
- await elementUpdated(el);
213
- await nextFrame();
214
- expect(el.splitterPos).to.equal(el.primaryMin);
215
- expect(getComputedStyle(splitter).cursor).to.equal("e-resize");
216
- splitter.dispatchEvent(
217
- new PointerEvent("pointermove", {
218
- clientX: splitTotalWidth
219
- })
220
- );
221
- await elementUpdated(el);
222
- expect(el.splitterPos, "350 first time").to.equal(
223
- splitTotalWidth - el.secondaryMin
224
- );
225
- expect(getComputedStyle(splitter).cursor).to.equal("w-resize");
226
- splitter.dispatchEvent(new PointerEvent("pointerup"));
227
- await elementUpdated(el);
228
- splitter.dispatchEvent(
229
- new MouseEvent("pointerdown", { button: 2, cancelable: true })
230
- );
231
- await elementUpdated(el);
232
- splitter.dispatchEvent(
233
- new PointerEvent("pointermove", {
234
- clientX: 0
235
- })
236
- );
237
- expect(el.splitterPos, "350 second time, because right click").to.equal(
238
- splitTotalWidth - el.secondaryMin
239
- );
240
- });
241
- it("resizes when pointer moves and resizable is enabled [rtl]", async () => {
242
- let pointerId = -1;
243
- const splitTotalWidth = 400;
244
- const el = await fixture(
245
- html`
246
- <sp-split-view
247
- resizable
248
- primary-min="50"
249
- secondary-min="40"
250
- style=${`height: 200px; width: ${splitTotalWidth}px;`}
251
- dir="rtl"
252
- >
253
- <div>First panel</div>
254
- <div>Second panel</div>
255
- </sp-split-view>
256
- `
257
- );
258
- await elementUpdated(el);
259
- expect(el.resizable).to.be.true;
260
- const splitter = el.shadowRoot.querySelector(
261
- "#splitter"
262
- );
263
- splitter.setPointerCapture = (id) => pointerId = id;
264
- splitter.releasePointerCapture = (id) => pointerId = id;
265
- let pos = el.splitterPos || 0;
266
- splitter.dispatchEvent(
267
- new PointerEvent("pointerdown", { pointerId: 1 })
268
- );
269
- await elementUpdated(el);
270
- expect(pointerId).to.equal(1);
271
- pos = el.getBoundingClientRect().right - 100;
272
- splitter.dispatchEvent(
273
- new PointerEvent("pointermove", {
274
- clientX: pos
275
- })
276
- );
277
- await elementUpdated(el);
278
- await nextFrame();
279
- expect(Math.round(el.splitterPos || 0)).to.equal(
280
- el.getBoundingClientRect().right - pos
281
- );
282
- splitter.dispatchEvent(
283
- new PointerEvent("pointermove", {
284
- clientX: 0
285
- })
286
- );
287
- await elementUpdated(el);
288
- await nextFrame();
289
- expect(el.splitterPos || 0).to.equal(splitTotalWidth - el.secondaryMin);
290
- expect(getComputedStyle(splitter).cursor).to.equal("e-resize");
291
- splitter.dispatchEvent(
292
- new PointerEvent("pointermove", {
293
- clientX: el.getBoundingClientRect().right
294
- })
295
- );
296
- await elementUpdated(el);
297
- expect(el.splitterPos || 0).to.equal(el.primaryMin);
298
- expect(getComputedStyle(splitter).cursor).to.equal("w-resize");
299
- });
300
- it("resizes to start pos when pointer moves in horizontal splitview", async () => {
301
- let pointerId = -1;
302
- const el = await fixture(
303
- html`
304
- <sp-split-view
305
- resizable
306
- secondary-min="50"
307
- style="height: 200px; width: 400px;"
308
- >
309
- <div>First panel</div>
310
- <div>Second panel</div>
311
- </sp-split-view>
312
- `
313
- );
314
- await elementUpdated(el);
315
- const splitter = el.shadowRoot.querySelector(
316
- "#splitter"
317
- );
318
- splitter.setPointerCapture = (id) => pointerId = id;
319
- splitter.releasePointerCapture = (id) => pointerId = id;
320
- splitter.dispatchEvent(
321
- new PointerEvent("pointerdown", { pointerId: 1 })
322
- );
323
- await elementUpdated(el);
324
- expect(pointerId).to.equal(1);
325
- splitter.dispatchEvent(
326
- new PointerEvent("pointermove", {
327
- clientX: -10
328
- })
329
- );
330
- await elementUpdated(el);
331
- expect(el.splitterPos || 0).to.equal(0);
332
- splitter.dispatchEvent(new PointerEvent("pointerup"));
333
- await elementUpdated(el);
334
- expect(splitter.classList.contains("is-collapsed-start")).to.be.true;
335
- expect(getComputedStyle(splitter).cursor).to.equal("e-resize");
336
- });
337
- it("resizes to end pos when pointer moves in horizontal splitview", async () => {
338
- let pointerId = -1;
339
- const splitTotalWidth = 400;
340
- const el = await fixture(
341
- html`
342
- <sp-split-view
343
- resizable
344
- primary-min="50"
345
- style=${`height: 200px; width: ${splitTotalWidth}px;`}
346
- >
347
- <div>First panel</div>
348
- <div>Second panel</div>
349
- </sp-split-view>
350
- `
351
- );
352
- await elementUpdated(el);
353
- const splitter = el.shadowRoot.querySelector(
354
- "#splitter"
355
- );
356
- splitter.setPointerCapture = (id) => pointerId = id;
357
- splitter.releasePointerCapture = (id) => pointerId = id;
358
- expect(el.primaryMin).to.equal(50);
359
- expect(el.resizable).to.be.true;
360
- splitter.dispatchEvent(
361
- new PointerEvent("pointerdown", { pointerId: 1 })
362
- );
363
- await elementUpdated(el);
364
- expect(pointerId).to.equal(1);
365
- splitter.dispatchEvent(
366
- new PointerEvent("pointermove", {
367
- clientX: splitTotalWidth + 10
368
- })
369
- );
370
- await elementUpdated(el);
371
- expect(el.splitterPos || 0).to.equal(splitTotalWidth - el.splitterSize);
372
- splitter.dispatchEvent(new PointerEvent("pointerup"));
373
- await elementUpdated(el);
374
- expect(splitter.classList.contains("is-collapsed-end")).to.be.true;
375
- expect(getComputedStyle(splitter).cursor).to.equal("w-resize");
376
- });
377
- it("resizes to start pos when pointer moves in [vertical] splitview", async () => {
378
- let pointerId = -1;
379
- const el = await fixture(
380
- html`
381
- <sp-split-view
382
- vertical
383
- resizable
384
- primary-min="0"
385
- secondary-min="50"
386
- style="height: 400px; width: 200px;"
387
- >
388
- <div>First panel</div>
389
- <div>Second panel</div>
390
- </sp-split-view>
391
- `
392
- );
393
- await elementUpdated(el);
394
- const splitter = el.shadowRoot.querySelector(
395
- "#splitter"
396
- );
397
- splitter.setPointerCapture = (id) => pointerId = id;
398
- splitter.releasePointerCapture = (id) => pointerId = id;
399
- splitter.dispatchEvent(
400
- new PointerEvent("pointerdown", { pointerId: 1 })
401
- );
402
- await elementUpdated(el);
403
- expect(pointerId).to.equal(1);
404
- splitter.dispatchEvent(
405
- new PointerEvent("pointermove", {
406
- clientY: 0
407
- })
408
- );
409
- await elementUpdated(el);
410
- expect(el.splitterPos || 0).to.equal(0);
411
- splitter.dispatchEvent(new PointerEvent("pointerup"));
412
- await elementUpdated(el);
413
- expect(splitter.classList.contains("is-collapsed-start")).to.be.true;
414
- expect(getComputedStyle(splitter).cursor).to.equal("s-resize");
415
- });
416
- it("resizes to end pos when pointer moves in [vertical] splitview", async () => {
417
- let pointerId = -1;
418
- const splitTotalHeight = 400;
419
- const el = await fixture(
420
- html`
421
- <sp-split-view
422
- vertical
423
- resizable
424
- primary-min="50"
425
- style=${`height: ${splitTotalHeight}px; width: 200px;`}
426
- >
427
- <div>First panel</div>
428
- <div>Second panel</div>
429
- </sp-split-view>
430
- `
431
- );
432
- await elementUpdated(el);
433
- const splitter = el.shadowRoot.querySelector(
434
- "#splitter"
435
- );
436
- splitter.setPointerCapture = (id) => pointerId = id;
437
- splitter.releasePointerCapture = (id) => pointerId = id;
438
- expect(el.primaryMin).to.equal(50);
439
- expect(el.resizable).to.be.true;
440
- splitter.dispatchEvent(
441
- new PointerEvent("pointerdown", { pointerId: 1 })
442
- );
443
- await elementUpdated(el);
444
- expect(pointerId).to.equal(1);
445
- splitter.dispatchEvent(
446
- new PointerEvent("pointermove", {
447
- clientY: splitTotalHeight + 10
448
- })
449
- );
450
- await elementUpdated(el);
451
- expect(el.splitterPos || 0).to.equal(
452
- splitTotalHeight - el.splitterSize
453
- );
454
- splitter.dispatchEvent(new PointerEvent("pointerup"));
455
- await elementUpdated(el);
456
- expect(splitter.classList.contains("is-collapsed-end")).to.be.true;
457
- expect(getComputedStyle(splitter).cursor).to.equal("n-resize");
458
- });
459
- it("resizes and collapses when pointer moves in horizontal splitview", async () => {
460
- let pointerId = -1;
461
- const el = await fixture(
462
- html`
463
- <sp-split-view
464
- resizable
465
- collapsible
466
- primary-min="50"
467
- secondary-min="50"
468
- style="height: 200px; width: 400px;"
469
- >
470
- <div>First panel</div>
471
- <div>Second panel</div>
472
- </sp-split-view>
473
- `
474
- );
475
- await elementUpdated(el);
476
- expect(el.collapsible).to.be.true;
477
- const splitter = el.shadowRoot.querySelector(
478
- "#splitter"
479
- );
480
- splitter.setPointerCapture = (id) => pointerId = id;
481
- splitter.releasePointerCapture = (id) => pointerId = id;
482
- splitter.dispatchEvent(
483
- new PointerEvent("pointerdown", { pointerId: 1 })
484
- );
485
- await elementUpdated(el);
486
- expect(pointerId).to.equal(1);
487
- splitter.dispatchEvent(
488
- new PointerEvent("pointermove", {
489
- clientX: 40
490
- })
491
- );
492
- await elementUpdated(el);
493
- await nextFrame();
494
- expect(el.splitterPos || 0).to.equal(50);
495
- expect(splitter.classList.contains("is-collapsed-start")).to.be.false;
496
- expect(getComputedStyle(splitter).cursor).to.equal("ew-resize");
497
- splitter.dispatchEvent(
498
- new PointerEvent("pointermove", {
499
- clientX: -10
500
- })
501
- );
502
- await elementUpdated(el);
503
- await nextFrame();
504
- expect(el.splitterPos || 0).to.equal(0);
505
- expect(splitter.classList.contains("is-collapsed-start")).to.be.true;
506
- expect(getComputedStyle(splitter).cursor).to.equal("e-resize");
507
- splitter.dispatchEvent(
508
- new PointerEvent("pointermove", {
509
- clientX: el.getBoundingClientRect().right - 10
510
- })
511
- );
512
- await elementUpdated(el);
513
- await nextFrame();
514
- expect(el.splitterPos || 0).to.equal(350);
515
- expect(splitter.classList.contains("is-collapsed-end")).to.be.false;
516
- expect(getComputedStyle(splitter).cursor).to.equal("ew-resize");
517
- splitter.dispatchEvent(
518
- new PointerEvent("pointermove", {
519
- clientX: el.getBoundingClientRect().right
520
- })
521
- );
522
- await elementUpdated(el);
523
- expect(el.splitterPos || 0).to.equal(400 - el.splitterSize);
524
- splitter.dispatchEvent(new PointerEvent("pointerup"));
525
- await elementUpdated(el);
526
- expect(splitter.classList.contains("is-collapsed-end")).to.be.true;
527
- expect(getComputedStyle(splitter).cursor).to.equal("w-resize");
528
- });
529
- it("resizes and collapses when pointer moves in [vertical] splitview", async () => {
530
- let pointerId = -1;
531
- const splitTotalHeight = 400;
532
- const el = await fixture(
533
- html`
534
- <sp-split-view
535
- vertical
536
- resizable
537
- collapsible
538
- primary-min="50"
539
- secondary-min="50"
540
- style=${`height: ${splitTotalHeight}px; width: 200px;`}
541
- >
542
- <div>First panel</div>
543
- <div>Second panel</div>
544
- </sp-split-view>
545
- `
546
- );
547
- await elementUpdated(el);
548
- const splitter = el.shadowRoot.querySelector(
549
- "#splitter"
550
- );
551
- splitter.setPointerCapture = (id) => pointerId = id;
552
- splitter.releasePointerCapture = (id) => pointerId = id;
553
- splitter.dispatchEvent(
554
- new PointerEvent("pointerdown", { pointerId: 1 })
555
- );
556
- await elementUpdated(el);
557
- expect(pointerId).to.equal(1);
558
- splitter.dispatchEvent(
559
- new PointerEvent("pointermove", {
560
- clientY: 40
561
- })
562
- );
563
- await elementUpdated(el);
564
- await nextFrame();
565
- expect(el.splitterPos || 0).to.equal(50);
566
- expect(splitter.classList.contains("is-collapsed-start")).to.be.false;
567
- expect(getComputedStyle(splitter).cursor).to.equal("ns-resize");
568
- splitter.dispatchEvent(
569
- new PointerEvent("pointermove", {
570
- clientY: -10
571
- })
572
- );
573
- await elementUpdated(el);
574
- await nextFrame();
575
- expect(el.splitterPos || 0).to.equal(0);
576
- expect(splitter.classList.contains("is-collapsed-start")).to.be.true;
577
- expect(getComputedStyle(splitter).cursor).to.equal("s-resize");
578
- splitter.dispatchEvent(
579
- new PointerEvent("pointermove", {
580
- clientY: splitTotalHeight - 40
581
- })
582
- );
583
- await elementUpdated(el);
584
- await nextFrame();
585
- expect(el.splitterPos || 0).to.equal(splitTotalHeight - 50);
586
- expect(splitter.classList.contains("is-collapsed-end")).to.be.false;
587
- expect(getComputedStyle(splitter).cursor).to.equal("ns-resize");
588
- splitter.dispatchEvent(
589
- new PointerEvent("pointermove", {
590
- clientY: splitTotalHeight + 50
591
- })
592
- );
593
- await elementUpdated(el);
594
- expect(el.splitterPos || 0).to.equal(
595
- splitTotalHeight - el.splitterSize
596
- );
597
- splitter.dispatchEvent(new PointerEvent("pointerup"));
598
- await elementUpdated(el);
599
- expect(splitter.classList.contains("is-collapsed-end")).to.be.true;
600
- expect(getComputedStyle(splitter).cursor).to.equal("n-resize");
601
- });
602
- it("handles focus and keyboard inputs and resizes accordingly for horizontal splitviews [ltr]", async () => {
603
- const splitTotalWidth = 500;
604
- const el = await fixture(
605
- html`
606
- <sp-split-view
607
- resizable
608
- primary-min="50"
609
- secondary-min="50"
610
- style=${`height: 200px; width: ${splitTotalWidth}px;`}
611
- >
612
- <div>First panel</div>
613
- <div>Second panel</div>
614
- </sp-split-view>
615
- `
616
- );
617
- await elementUpdated(el);
618
- expect(el.resizable).to.be.true;
619
- const pos = el.splitterPos || 0;
620
- const splitter = el.shadowRoot.querySelector(
621
- "#splitter"
622
- );
623
- splitter.dispatchEvent(arrowLeftEvent());
624
- await elementUpdated(el);
625
- expect(el.splitterPos || 0).to.equal(pos - 10);
626
- splitter.dispatchEvent(arrowRightEvent());
627
- await elementUpdated(el);
628
- expect(el.splitterPos || 0).to.equal(pos);
629
- splitter.dispatchEvent(arrowUpEvent());
630
- await elementUpdated(el);
631
- expect(el.splitterPos || 0).to.equal(pos + 10);
632
- splitter.dispatchEvent(arrowDownEvent());
633
- await elementUpdated(el);
634
- expect(el.splitterPos || 0).to.equal(pos);
635
- splitter.dispatchEvent(pageUpEvent());
636
- await elementUpdated(el);
637
- expect(el.splitterPos || 0).to.equal(pos + 50);
638
- splitter.dispatchEvent(pageDownEvent());
639
- await elementUpdated(el);
640
- expect(el.splitterPos || 0).to.equal(pos);
641
- splitter.dispatchEvent(homeEvent());
642
- await elementUpdated(el);
643
- expect(el.splitterPos || 0).to.equal(50);
644
- splitter.dispatchEvent(arrowLeftEvent());
645
- await elementUpdated(el);
646
- expect(el.splitterPos || 0).to.equal(50);
647
- splitter.dispatchEvent(endEvent());
648
- await elementUpdated(el);
649
- expect(el.splitterPos || 0).to.equal(splitTotalWidth - 50);
650
- splitter.dispatchEvent(arrowRightEvent());
651
- await elementUpdated(el);
652
- expect(el.splitterPos || 0).to.equal(splitTotalWidth - 50);
653
- splitter.dispatchEvent(shiftTabEvent());
654
- await elementUpdated(el);
655
- const outsideFocused = document.activeElement;
656
- expect(typeof outsideFocused).not.to.equal(splitter);
657
- });
658
- it("handles focus and keyboard inputs and resizes accordingly for horizontal splitviews [rtl]", async () => {
659
- const splitTotalWidth = 500;
660
- const el = await fixture(
661
- html`
662
- <sp-split-view
663
- resizable
664
- style=${`height: 200px; width: ${splitTotalWidth}px;`}
665
- dir="rtl"
666
- >
667
- <div>First panel</div>
668
- <div>Second panel</div>
669
- </sp-split-view>
670
- `
671
- );
672
- await elementUpdated(el);
673
- expect(el.resizable).to.be.true;
674
- const pos = el.splitterPos || 0;
675
- const splitter = el.shadowRoot.querySelector(
676
- "#splitter"
677
- );
678
- splitter.dispatchEvent(arrowLeftEvent());
679
- await elementUpdated(el);
680
- expect(el.splitterPos || 0).to.equal(pos + 10);
681
- splitter.dispatchEvent(arrowRightEvent());
682
- await elementUpdated(el);
683
- expect(el.splitterPos || 0).to.equal(pos);
684
- splitter.dispatchEvent(arrowUpEvent());
685
- await elementUpdated(el);
686
- expect(el.splitterPos || 0).to.equal(pos + 10);
687
- splitter.dispatchEvent(arrowDownEvent());
688
- await elementUpdated(el);
689
- expect(el.splitterPos || 0).to.equal(pos);
690
- splitter.dispatchEvent(pageUpEvent());
691
- await elementUpdated(el);
692
- expect(el.splitterPos || 0).to.equal(pos + 50);
693
- splitter.dispatchEvent(pageDownEvent());
694
- await elementUpdated(el);
695
- expect(el.splitterPos || 0).to.equal(pos);
696
- splitter.dispatchEvent(homeEvent());
697
- await elementUpdated(el);
698
- expect(el.splitterPos || 0).to.equal(0);
699
- splitter.dispatchEvent(endEvent());
700
- await elementUpdated(el);
701
- expect(el.splitterPos || 0).to.equal(splitTotalWidth - el.splitterSize);
702
- splitter.dispatchEvent(shiftTabEvent());
703
- await elementUpdated(el);
704
- const outsideFocused = document.activeElement;
705
- expect(typeof outsideFocused).not.to.equal(splitter);
706
- });
707
- it("handles keyboard inputs and resizes accordingly for [vertical] splitviews", async () => {
708
- const splitTotalHeight = 500;
709
- const el = await fixture(
710
- html`
711
- <sp-split-view
712
- vertical
713
- resizable
714
- style=${`width: 200px; height: ${splitTotalHeight}px;`}
715
- >
716
- <div>First panel</div>
717
- <div>Second panel</div>
718
- </sp-split-view>
719
- `
720
- );
721
- await elementUpdated(el);
722
- expect(el.resizable).to.be.true;
723
- const pos = el.splitterPos || 0;
724
- const splitter = el.shadowRoot.querySelector(
725
- "#splitter"
726
- );
727
- splitter.dispatchEvent(arrowLeftEvent());
728
- await elementUpdated(el);
729
- expect(el.splitterPos || 0).to.equal(pos - 10);
730
- splitter.dispatchEvent(arrowRightEvent());
731
- await elementUpdated(el);
732
- expect(el.splitterPos || 0).to.equal(pos);
733
- splitter.dispatchEvent(arrowUpEvent());
734
- await elementUpdated(el);
735
- expect(el.splitterPos || 0).to.equal(pos - 10);
736
- splitter.dispatchEvent(arrowDownEvent());
737
- await elementUpdated(el);
738
- expect(el.splitterPos || 0).to.equal(pos);
739
- splitter.dispatchEvent(pageUpEvent());
740
- await elementUpdated(el);
741
- expect(el.splitterPos || 0).to.equal(pos - 50);
742
- splitter.dispatchEvent(pageDownEvent());
743
- await elementUpdated(el);
744
- expect(el.splitterPos || 0).to.equal(pos);
745
- splitter.dispatchEvent(homeEvent());
746
- await elementUpdated(el);
747
- expect(el.splitterPos || 0).to.equal(0);
748
- splitter.dispatchEvent(endEvent());
749
- await elementUpdated(el);
750
- expect(el.splitterPos || 0).to.equal(
751
- splitTotalHeight - el.splitterSize
752
- );
753
- splitter.dispatchEvent(shiftTabEvent());
754
- await elementUpdated(el);
755
- const outsideFocused = document.activeElement;
756
- expect(typeof outsideFocused).not.to.equal(splitter);
757
- });
758
- it("handles focus and keyboard inputs and resizes accordingly for collapsible horizontal splitviews", async () => {
759
- const splitTotalWidth = 500;
760
- const el = await fixture(
761
- html`
762
- <sp-split-view
763
- resizable
764
- collapsible
765
- primary-min="50"
766
- secondary-min="50"
767
- style=${`height: 200px; width: ${splitTotalWidth}px;`}
768
- >
769
- <div>First panel</div>
770
- <div>Second panel</div>
771
- </sp-split-view>
772
- `
773
- );
774
- await elementUpdated(el);
775
- expect(el.resizable).to.be.true;
776
- const splitter = el.shadowRoot.querySelector(
777
- "#splitter"
778
- );
779
- splitter.dispatchEvent(homeEvent());
780
- await elementUpdated(el);
781
- expect(el.splitterPos || 0).to.equal(0);
782
- splitter.dispatchEvent(endEvent());
783
- await elementUpdated(el);
784
- expect(el.splitterPos || 0).to.equal(splitTotalWidth - el.splitterSize);
785
- });
786
- it("does not resize when not resizable", async () => {
787
- const el = await fixture(
788
- html`
789
- <sp-split-view>
790
- <div>First panel</div>
791
- <div>Second panel</div>
792
- </sp-split-view>
793
- `
794
- );
795
- await elementUpdated(el);
796
- expect(el.resizable).to.be.false;
797
- const pos = el.splitterPos || 0;
798
- const splitter = el.shadowRoot ? el.shadowRoot.querySelector("#splitter") : el;
799
- splitter.dispatchEvent(new PointerEvent("pointerdown"));
800
- await elementUpdated(el);
801
- splitter.dispatchEvent(arrowLeftEvent());
802
- await elementUpdated(el);
803
- expect(el.splitterPos || 0).to.equal(pos);
804
- });
805
- it("renders no splitter if only one panel is provided", async () => {
806
- const el = await fixture(
807
- html`
808
- <sp-split-view style="width: 400px">
809
- <div id="primary" style="width: 200px">First panel</div>
810
- </sp-split-view>
811
- `
812
- );
813
- await elementUpdated(el);
814
- expect(el.resizable).to.be.false;
815
- const splitter = el.shadowRoot.querySelector(
816
- "#splitter"
817
- );
818
- expect(splitter).to.be.null;
819
- const slot = el.shadowRoot.querySelector("slot");
820
- expect(slot).to.exist;
821
- expect(slot.assignedElements().length).to.equal(1);
822
- const elPrim = slot.assignedElements()[0];
823
- expect(getComputedStyle(elPrim).width).to.equal("200px");
824
- });
825
- it("renders only 2 out of 3 panels", async () => {
826
- const el = await fixture(
827
- html`
828
- <sp-split-view>
829
- <div>First panel</div>
830
- <div>Second panel</div>
831
- <div id="testPanel">Third (invisible) panel</div>
832
- </sp-split-view>
833
- `
834
- );
835
- await elementUpdated(el);
836
- const testPanel = el.shadowRoot.querySelector(
837
- "#testPanel"
838
- );
839
- expect(testPanel).to.be.null;
840
- });
841
- it("allows a custom label when resizable if specified", async () => {
842
- const customLabel = "Resizable Split View Custom Label";
843
- const defaultLabel = "Resize the panels";
844
- let el = await fixture(
845
- html`
846
- <sp-split-view
847
- resizable
848
- label=${customLabel}
849
- primary-min="50"
850
- secondary-min="50"
851
- >
852
- <div>First panel</div>
853
- <div>Second panel</div>
854
- </sp-split-view>
855
- `
856
- );
857
- expect(el.label).to.equal(customLabel);
858
- let splitter = el.shadowRoot.querySelector(
859
- "#splitter"
860
- );
861
- expect(splitter.ariaLabel).to.equal(customLabel);
862
- el = await fixture(
863
- html`
864
- <sp-split-view resizable primary-min="50" secondary-min="50">
865
- <div>First panel</div>
866
- <div>Second panel</div>
867
- </sp-split-view>
868
- `
869
- );
870
- splitter = el.shadowRoot.querySelector("#splitter");
871
- expect(splitter.ariaLabel).to.equal(defaultLabel);
872
- });
873
- it("keeps the splitter pos when removing and re-adding a panel", async () => {
874
- var _a, _b;
875
- let pointerId = -1;
876
- const el = await fixture(
877
- html`
878
- <sp-split-view resizable style="width: 400px">
879
- <div id="primary">First panel</div>
880
- <div id="secondary">Second panel</div>
881
- </sp-split-view>
882
- `
883
- );
884
- await elementUpdated(el);
885
- expect(el.resizable).to.be.true;
886
- let splitter = el.shadowRoot.querySelector(
887
- "#splitter"
888
- );
889
- splitter.setPointerCapture = (id) => pointerId = id;
890
- splitter.releasePointerCapture = (id) => pointerId = id;
891
- let pos = el.splitterPos || 0;
892
- expect(pos).to.equal(200);
893
- splitter.dispatchEvent(
894
- new PointerEvent("pointerdown", { pointerId: 1 })
895
- );
896
- await elementUpdated(el);
897
- expect(pointerId).to.equal(1);
898
- pos -= 10;
899
- splitter.dispatchEvent(
900
- new PointerEvent("pointermove", {
901
- clientX: pos
902
- })
903
- );
904
- await elementUpdated(el);
905
- expect(Math.round(el.splitterPos || 0)).to.equal(
906
- pos - el.getBoundingClientRect().left
907
- );
908
- const secPanel = (_a = el.lastElementChild) == null ? void 0 : _a.cloneNode(true);
909
- expect(secPanel).not.to.be.null;
910
- (_b = el.lastElementChild) == null ? void 0 : _b.remove();
911
- await elementUpdated(el);
912
- let slot = el.shadowRoot.querySelector("slot");
913
- expect(slot).to.exist;
914
- expect(slot.assignedElements().length).to.equal(1);
915
- splitter = el.shadowRoot.querySelector("#splitter");
916
- expect(splitter).to.be.null;
917
- if (secPanel) {
918
- el.appendChild(secPanel);
919
- await elementUpdated(el);
920
- expect(Math.round(el.splitterPos || 0)).to.equal(
921
- pos - el.getBoundingClientRect().left
922
- );
923
- slot = el.shadowRoot.querySelector("slot");
924
- expect(slot).to.exist;
925
- expect(slot.assignedElements().length).to.equal(2);
926
- splitter = el.shadowRoot.querySelector(
927
- "#splitter"
928
- );
929
- await expect(splitter).to.be.accessible();
930
- }
931
- });
932
- it("announces when splitterPos moves", async () => {
933
- const changeSpy = spy();
934
- const el = await fixture(
935
- html`
936
- <sp-split-view
937
- resizable
938
- style=${`height: 200px; width: 500px;`}
939
- >
940
- <div>First panel</div>
941
- <div>Second panel</div>
942
- </sp-split-view>
943
- `
944
- );
945
- el.addEventListener("change", changeSpy);
946
- await elementUpdated(el);
947
- expect(el.resizable).to.be.true;
948
- const pos = el.splitterPos || 0;
949
- const splitter = el.shadowRoot.querySelector(
950
- "#splitter"
951
- );
952
- splitter.dispatchEvent(arrowLeftEvent());
953
- await elementUpdated(el);
954
- expect(el.splitterPos || 0).to.equal(pos - 10);
955
- expect(changeSpy.callCount).to.equal(1);
956
- });
957
- it("resizes when primarySize changes", async () => {
958
- const el = await fixture(
959
- html`
960
- <sp-split-view
961
- resizable
962
- primary-size="100"
963
- style=${`height: 200px; width: 500px;`}
964
- >
965
- <div>First panel</div>
966
- <div>Second panel</div>
967
- </sp-split-view>
968
- `
969
- );
970
- await elementUpdated(el);
971
- expect(el.splitterPos || 0).to.equal(100);
972
- el.primarySize = "300";
973
- await elementUpdated(el);
974
- expect(el.splitterPos || 0).to.equal(300);
975
- });
976
- });
977
- //# sourceMappingURL=split-view.test.js.map