@spectrum-web-components/textfield 0.46.0 → 0.47.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +8 -8
  2. package/test/textfield.test.js +319 -430
  3. package/test/textfield.test.js.map +2 -2
package/test/textfield.test.js CHANGED
@@ -13,36 +13,28 @@ import {
13
13
  import { fixture } from "../../../test/testing-helpers.js";
14
14
  describe("Textfield", () => {
15
15
  testForLitDevWarnings(
16
- async () => await litFixture(
17
- html`
18
- <sp-textfield label="Enter Your Name"></sp-textfield>
19
- `
20
- )
16
+ async () => await litFixture(html`
17
+ <sp-textfield label="Enter Your Name"></sp-textfield>
18
+ `)
21
19
  );
22
20
  it("loads default textfield accessibly", async () => {
23
- const el = await litFixture(
24
- html`
25
- <sp-textfield label="Enter Your Name"></sp-textfield>
26
- `
27
- );
21
+ const el = await litFixture(html`
22
+ <sp-textfield label="Enter Your Name"></sp-textfield>
23
+ `);
28
24
  await elementUpdated(el);
29
25
  await expect(el).to.be.accessible();
30
26
  });
31
27
  it("loads multiline textfield accessibly", async () => {
32
- const el = await litFixture(
33
- html`
34
- <sp-textfield label="Enter your name" multiline></sp-textfield>
35
- `
36
- );
28
+ const el = await litFixture(html`
29
+ <sp-textfield label="Enter your name" multiline></sp-textfield>
30
+ `);
37
31
  await elementUpdated(el);
38
32
  await expect(el).to.be.accessible();
39
33
  });
40
34
  it("manages tabIndex while disabled", async () => {
41
- const el = await litFixture(
42
- html`
43
- <sp-textfield placeholder="Enter Your Name"></sp-textfield>
44
- `
45
- );
35
+ const el = await litFixture(html`
36
+ <sp-textfield placeholder="Enter Your Name"></sp-textfield>
37
+ `);
46
38
  await elementUpdated(el);
47
39
  expect(el.tabIndex).to.equal(0);
48
40
  el.disabled = true;
@@ -63,11 +55,9 @@ describe("Textfield", () => {
63
55
  });
64
56
  it("loads", async () => {
65
57
  const testPlaceholder = "Enter your name";
66
- const el = await litFixture(
67
- html`
68
- <sp-textfield placeholder=${testPlaceholder}></sp-textfield>
69
- `
70
- );
58
+ const el = await litFixture(html`
59
+ <sp-textfield placeholder=${testPlaceholder}></sp-textfield>
60
+ `);
71
61
  expect(el).to.not.equal(void 0);
72
62
  const input = el.shadowRoot ? el.shadowRoot.querySelector("input") : null;
73
63
  expect(input).to.not.be.null;
@@ -75,28 +65,24 @@ describe("Textfield", () => {
75
65
  expect(placeholder).to.equal(testPlaceholder);
76
66
  });
77
67
  it("multiline", async () => {
78
- const el = await litFixture(
79
- html`
80
- <sp-textfield
81
- placeholder="Enter your name"
82
- multiline
83
- ></sp-textfield>
84
- `
85
- );
68
+ const el = await litFixture(html`
69
+ <sp-textfield
70
+ placeholder="Enter your name"
71
+ multiline
72
+ ></sp-textfield>
73
+ `);
86
74
  expect(el).to.not.equal(void 0);
87
75
  const input = el.shadowRoot ? el.shadowRoot.querySelector("textarea") : null;
88
76
  expect(input).to.not.be.null;
89
77
  });
90
78
  it("multiline with rows", async () => {
91
- const el = await litFixture(
92
- html`
93
- <sp-textfield
94
- placeholder="Enter your name"
95
- multiline
96
- rows="5"
97
- ></sp-textfield>
98
- `
99
- );
79
+ const el = await litFixture(html`
80
+ <sp-textfield
81
+ placeholder="Enter your name"
82
+ multiline
83
+ rows="5"
84
+ ></sp-textfield>
85
+ `);
100
86
  expect(el).to.not.equal(void 0);
101
87
  const input = el.shadowRoot ? el.shadowRoot.querySelector("textarea") : null;
102
88
  expect(input).to.not.be.null;
@@ -104,27 +90,23 @@ describe("Textfield", () => {
104
90
  });
105
91
  it("multiline with 1 row has smaller height than multiline without explicit rows", async () => {
106
92
  var _a;
107
- const oneRowEl = await litFixture(
108
- html`
109
- <sp-textfield
110
- placeholder="Enter your name"
111
- multiline
112
- rows="1"
113
- ></sp-textfield>
114
- `
115
- );
93
+ const oneRowEl = await litFixture(html`
94
+ <sp-textfield
95
+ placeholder="Enter your name"
96
+ multiline
97
+ rows="1"
98
+ ></sp-textfield>
99
+ `);
116
100
  expect(oneRowEl).to.not.equal(void 0);
117
101
  const oneRowTextarea = oneRowEl.shadowRoot ? oneRowEl.shadowRoot.querySelector("textarea") : null;
118
102
  expect(oneRowTextarea).to.not.be.null;
119
103
  expect(oneRowTextarea == null ? void 0 : oneRowTextarea.getAttribute("rows")).to.equal("1");
120
- const defaultEL = await litFixture(
121
- html`
122
- <sp-textfield
123
- placeholder="Enter your name"
124
- multiline
125
- ></sp-textfield>
126
- `
127
- );
104
+ const defaultEL = await litFixture(html`
105
+ <sp-textfield
106
+ placeholder="Enter your name"
107
+ multiline
108
+ ></sp-textfield>
109
+ `);
128
110
  expect(defaultEL).to.not.equal(void 0);
129
111
  const defaultTextarea = oneRowEl.shadowRoot ? defaultEL.shadowRoot.querySelector("textarea") : null;
130
112
  expect(defaultTextarea).to.not.be.null;
@@ -136,16 +118,14 @@ describe("Textfield", () => {
136
118
  );
137
119
  });
138
120
  it("multiline with rows does not resize", async () => {
139
- const el = await litFixture(
140
- html`
141
- <sp-textfield
142
- multiline
143
- rows="5"
144
- label="No resize control"
145
- placeholder="No resize control"
146
- ></sp-textfield>
147
- `
148
- );
121
+ const el = await litFixture(html`
122
+ <sp-textfield
123
+ multiline
124
+ rows="5"
125
+ label="No resize control"
126
+ placeholder="No resize control"
127
+ ></sp-textfield>
128
+ `);
149
129
  const sizedElement = el.focusElement;
150
130
  const startBounds = sizedElement.getBoundingClientRect();
151
131
  await sendMouse({
@@ -174,15 +154,13 @@ describe("Textfield", () => {
174
154
  if (isWebKit()) {
175
155
  this.skip();
176
156
  }
177
- const el = await fixture(
178
- html`
179
- <sp-textfield
180
- multiline
181
- label="No resize control"
182
- placeholder="No resize control"
183
- ></sp-textfield>
184
- `
185
- );
157
+ const el = await fixture(html`
158
+ <sp-textfield
159
+ multiline
160
+ label="No resize control"
161
+ placeholder="No resize control"
162
+ ></sp-textfield>
163
+ `);
186
164
  const sizedElement = el.focusElement;
187
165
  const startBounds = sizedElement.getBoundingClientRect();
188
166
  await sendMouse({
@@ -208,16 +186,14 @@ describe("Textfield", () => {
208
186
  expect(endBounds.width).to.be.greaterThan(startBounds.width);
209
187
  });
210
188
  it("accepts resize styling", async () => {
211
- const el = await litFixture(
212
- html`
213
- <sp-textfield
214
- multiline
215
- style="resize: none;"
216
- label="No resize control"
217
- placeholder="No resize control"
218
- ></sp-textfield>
219
- `
220
- );
189
+ const el = await litFixture(html`
190
+ <sp-textfield
191
+ multiline
192
+ style="resize: none;"
193
+ label="No resize control"
194
+ placeholder="No resize control"
195
+ ></sp-textfield>
196
+ `);
221
197
  const startBounds = el.getBoundingClientRect();
222
198
  await sendMouse({
223
199
  steps: [
@@ -242,44 +218,38 @@ describe("Textfield", () => {
242
218
  expect(endBounds.height).equals(startBounds.height);
243
219
  });
244
220
  it("grows", async () => {
245
- const el = await litFixture(
246
- html`
247
- <sp-textfield
248
- placeholder="Enter your name"
249
- multiline
250
- grows
251
- ></sp-textfield>
252
- `
253
- );
221
+ const el = await litFixture(html`
222
+ <sp-textfield
223
+ placeholder="Enter your name"
224
+ multiline
225
+ grows
226
+ ></sp-textfield>
227
+ `);
254
228
  expect(el).to.not.equal(void 0);
255
229
  const sizer = el.shadowRoot ? el.shadowRoot.querySelector("#sizer") : null;
256
230
  expect(sizer).to.not.be.null;
257
231
  });
258
232
  it("multiline with rows and grows does not grow", async () => {
259
- const el = await litFixture(
260
- html`
261
- <sp-textfield
262
- placeholder="Enter your name"
263
- multiline
264
- grows
265
- rows="5"
266
- ></sp-textfield>
267
- `
268
- );
233
+ const el = await litFixture(html`
234
+ <sp-textfield
235
+ placeholder="Enter your name"
236
+ multiline
237
+ grows
238
+ rows="5"
239
+ ></sp-textfield>
240
+ `);
269
241
  expect(el).to.not.equal(void 0);
270
242
  const sizer = el.shadowRoot ? el.shadowRoot.querySelector("#sizer") : null;
271
243
  expect(sizer).to.be.null;
272
244
  });
273
245
  it("multiline with grows actually grow", async () => {
274
- const el = await litFixture(
275
- html`
276
- <sp-textfield
277
- placeholder="Enter your name"
278
- multiline
279
- grows
280
- ></sp-textfield>
281
- `
282
- );
246
+ const el = await litFixture(html`
247
+ <sp-textfield
248
+ placeholder="Enter your name"
249
+ multiline
250
+ grows
251
+ ></sp-textfield>
252
+ `);
283
253
  expect(el).to.not.equal(void 0);
284
254
  const textArea = el.shadowRoot.querySelector("textarea");
285
255
  expect(textArea).to.not.be.null;
@@ -298,137 +268,119 @@ describe("Textfield", () => {
298
268
  }
299
269
  });
300
270
  it("valid", async () => {
301
- const el = await litFixture(
302
- html`
303
- <sp-textfield
304
- placeholder="Enter your number"
305
- pattern="[\\d]+"
306
- value="123"
307
- required
308
- ></sp-textfield>
309
- `
310
- );
271
+ const el = await litFixture(html`
272
+ <sp-textfield
273
+ placeholder="Enter your number"
274
+ pattern="[\\d]+"
275
+ value="123"
276
+ required
277
+ ></sp-textfield>
278
+ `);
311
279
  await elementUpdated(el);
312
280
  expect(el).to.not.equal(void 0);
313
281
  const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
314
282
  expect(input).to.not.be.null;
315
283
  });
316
284
  it("handles `name` attribute", async () => {
317
- const el = await litFixture(
318
- html`
319
- <sp-textfield placeholder="Enter your name"></sp-textfield>
320
- `
321
- );
285
+ const el = await litFixture(html`
286
+ <sp-textfield placeholder="Enter your name"></sp-textfield>
287
+ `);
322
288
  expect(el).to.not.equal(void 0);
323
289
  expect(el.name).to.be.undefined;
324
290
  el.setAttribute("name", "test");
325
291
  expect(el.name).to.be.equal("test");
326
292
  });
327
293
  it("handles `name` attribute with multiline", async () => {
328
- const el = await litFixture(
329
- html`
330
- <sp-textfield
331
- name="name"
332
- placeholder="Enter your name"
333
- multiline
334
- ></sp-textfield>
335
- `
336
- );
294
+ const el = await litFixture(html`
295
+ <sp-textfield
296
+ name="name"
297
+ placeholder="Enter your name"
298
+ multiline
299
+ ></sp-textfield>
300
+ `);
337
301
  expect(el).to.not.equal(void 0);
338
302
  const input = el.shadowRoot ? el.shadowRoot.querySelector("textarea") : null;
339
303
  expect(input == null ? void 0 : input.name).to.equal("name");
340
304
  });
341
305
  it("valid - multiline", async () => {
342
- const el = await litFixture(
343
- html`
344
- <sp-textfield
345
- placeholder="Enter your number"
346
- pattern="[\\d]+"
347
- value="123"
348
- required
349
- multiline
350
- ></sp-textfield>
351
- `
352
- );
306
+ const el = await litFixture(html`
307
+ <sp-textfield
308
+ placeholder="Enter your number"
309
+ pattern="[\\d]+"
310
+ value="123"
311
+ required
312
+ multiline
313
+ ></sp-textfield>
314
+ `);
353
315
  await elementUpdated(el);
354
316
  expect(el).to.not.equal(void 0);
355
317
  const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
356
318
  expect(input).to.not.be.null;
357
319
  });
358
320
  it("valid - required", async () => {
359
- const el = await litFixture(
360
- html`
361
- <sp-textfield
362
- placeholder="Enter your number"
363
- value="123"
364
- required
365
- ></sp-textfield>
366
- `
367
- );
321
+ const el = await litFixture(html`
322
+ <sp-textfield
323
+ placeholder="Enter your number"
324
+ value="123"
325
+ required
326
+ ></sp-textfield>
327
+ `);
368
328
  await elementUpdated(el);
369
329
  expect(el).to.not.equal(void 0);
370
330
  const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
371
331
  expect(input).to.not.be.null;
372
332
  });
373
333
  it("valid - multiline - required", async () => {
374
- const el = await litFixture(
375
- html`
376
- <sp-textfield
377
- placeholder="Enter your number"
378
- value="123"
379
- required
380
- multiline
381
- ></sp-textfield>
382
- `
383
- );
334
+ const el = await litFixture(html`
335
+ <sp-textfield
336
+ placeholder="Enter your number"
337
+ value="123"
338
+ required
339
+ multiline
340
+ ></sp-textfield>
341
+ `);
384
342
  await elementUpdated(el);
385
343
  expect(el).to.not.equal(void 0);
386
344
  const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
387
345
  expect(input).to.not.be.null;
388
346
  });
389
347
  it("valid - boundary-type assertions", async () => {
390
- const el = await litFixture(
391
- html`
392
- <sp-textfield
393
- placeholder="Enter your number"
394
- pattern="^[\\d]+$"
395
- value="123"
396
- required
397
- ></sp-textfield>
398
- `
399
- );
348
+ const el = await litFixture(html`
349
+ <sp-textfield
350
+ placeholder="Enter your number"
351
+ pattern="^[\\d]+$"
352
+ value="123"
353
+ required
354
+ ></sp-textfield>
355
+ `);
400
356
  await elementUpdated(el);
401
357
  expect(el).to.not.equal(void 0);
402
358
  const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
403
359
  expect(input).to.not.be.null;
404
360
  });
405
361
  it("valid - multiline - boundary-type assertions", async () => {
406
- const el = await litFixture(
407
- html`
408
- <sp-textfield
409
- placeholder="Enter your number"
410
- pattern="^[\\d]+$"
411
- value="123"
412
- required
413
- multiline
414
- ></sp-textfield>
415
- `
416
- );
362
+ const el = await litFixture(html`
363
+ <sp-textfield
364
+ placeholder="Enter your number"
365
+ pattern="^[\\d]+$"
366
+ value="123"
367
+ required
368
+ multiline
369
+ ></sp-textfield>
370
+ `);
417
371
  await elementUpdated(el);
418
372
  expect(el).to.not.equal(void 0);
419
373
  const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
420
374
  expect(input).to.not.be.null;
421
375
  });
422
376
  it("valid - boundary-type assertions and title", async () => {
423
- const el = await litFixture(
424
- html`
425
- <sp-textfield
426
- placeholder="Enter your number"
427
- pattern="^[\\d]+$"
428
- value="123"
429
- ></sp-textfield>
430
- `
431
- );
377
+ const el = await litFixture(html`
378
+ <sp-textfield
379
+ placeholder="Enter your number"
380
+ pattern="^[\\d]+$"
381
+ value="123"
382
+ ></sp-textfield>
383
+ `);
432
384
  await elementUpdated(el);
433
385
  expect(el).to.not.equal(void 0);
434
386
  const input = el.shadowRoot.querySelector("#valid");
@@ -436,16 +388,14 @@ describe("Textfield", () => {
436
388
  expect(el.focusElement).to.not.have.attribute("title");
437
389
  });
438
390
  it("valid - multiline - boundary-type assertions and title", async () => {
439
- const el = await litFixture(
440
- html`
441
- <sp-textfield
442
- multiline
443
- placeholder="Enter your number"
444
- pattern="^[\\d]+$"
445
- value="123"
446
- ></sp-textfield>
447
- `
448
- );
391
+ const el = await litFixture(html`
392
+ <sp-textfield
393
+ multiline
394
+ placeholder="Enter your number"
395
+ pattern="^[\\d]+$"
396
+ value="123"
397
+ ></sp-textfield>
398
+ `);
449
399
  await elementUpdated(el);
450
400
  expect(el).to.not.equal(void 0);
451
401
  const input = el.shadowRoot.querySelector("#valid");
@@ -453,162 +403,142 @@ describe("Textfield", () => {
453
403
  expect(el.focusElement).to.not.have.attribute("title");
454
404
  });
455
405
  it("valid - unicode", async () => {
456
- const el = await litFixture(
457
- html`
458
- <sp-textfield
459
- placeholder="Enter your name"
460
- pattern="\\p{L}{4,8}"
461
- value="你的名字"
462
- required
463
- ></sp-textfield>
464
- `
465
- );
406
+ const el = await litFixture(html`
407
+ <sp-textfield
408
+ placeholder="Enter your name"
409
+ pattern="\\p{L}{4,8}"
410
+ value="你的名字"
411
+ required
412
+ ></sp-textfield>
413
+ `);
466
414
  await elementUpdated(el);
467
415
  expect(el).to.not.equal(void 0);
468
416
  const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
469
417
  expect(input).to.not.be.null;
470
418
  });
471
419
  it("valid - multiline - unicode", async () => {
472
- const el = await litFixture(
473
- html`
474
- <sp-textfield
475
- placeholder="Enter your name"
476
- pattern="\\p{L}{4,8}"
477
- value="你的名字"
478
- required
479
- multiline
480
- ></sp-textfield>
481
- `
482
- );
420
+ const el = await litFixture(html`
421
+ <sp-textfield
422
+ placeholder="Enter your name"
423
+ pattern="\\p{L}{4,8}"
424
+ value="你的名字"
425
+ required
426
+ multiline
427
+ ></sp-textfield>
428
+ `);
483
429
  await elementUpdated(el);
484
430
  expect(el).to.not.equal(void 0);
485
431
  const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
486
432
  expect(input).to.not.be.null;
487
433
  });
488
434
  it("invalid", async () => {
489
- const el = await litFixture(
490
- html`
491
- <sp-textfield
492
- placeholder="Enter your number"
493
- pattern="[\\d]+"
494
- value="123 not valid"
495
- required
496
- ></sp-textfield>
497
- `
498
- );
435
+ const el = await litFixture(html`
436
+ <sp-textfield
437
+ placeholder="Enter your number"
438
+ pattern="[\\d]+"
439
+ value="123 not valid"
440
+ required
441
+ ></sp-textfield>
442
+ `);
499
443
  await elementUpdated(el);
500
444
  expect(el).to.not.equal(void 0);
501
445
  const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
502
446
  expect(input).to.not.be.null;
503
447
  });
504
448
  it("invalid - multiline", async () => {
505
- const el = await litFixture(
506
- html`
507
- <sp-textfield
508
- placeholder="Enter your number"
509
- pattern="[\\d]+"
510
- value="123 not valid"
511
- required
512
- multiline
513
- ></sp-textfield>
514
- `
515
- );
449
+ const el = await litFixture(html`
450
+ <sp-textfield
451
+ placeholder="Enter your number"
452
+ pattern="[\\d]+"
453
+ value="123 not valid"
454
+ required
455
+ multiline
456
+ ></sp-textfield>
457
+ `);
516
458
  await elementUpdated(el);
517
459
  expect(el).to.not.equal(void 0);
518
460
  const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
519
461
  expect(input).to.not.be.null;
520
462
  });
521
463
  it("invalid - required", async () => {
522
- const el = await litFixture(
523
- html`
524
- <sp-textfield
525
- placeholder="Enter your number"
526
- value=""
527
- required
528
- ></sp-textfield>
529
- `
530
- );
464
+ const el = await litFixture(html`
465
+ <sp-textfield
466
+ placeholder="Enter your number"
467
+ value=""
468
+ required
469
+ ></sp-textfield>
470
+ `);
531
471
  await elementUpdated(el);
532
472
  expect(el).to.not.equal(void 0);
533
473
  const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
534
474
  expect(input).to.not.be.null;
535
475
  });
536
476
  it("invalid - multiline - required", async () => {
537
- const el = await litFixture(
538
- html`
539
- <sp-textfield
540
- placeholder="Enter your number"
541
- value=""
542
- required
543
- multiline
544
- ></sp-textfield>
545
- `
546
- );
477
+ const el = await litFixture(html`
478
+ <sp-textfield
479
+ placeholder="Enter your number"
480
+ value=""
481
+ required
482
+ multiline
483
+ ></sp-textfield>
484
+ `);
547
485
  await elementUpdated(el);
548
486
  expect(el).to.not.equal(void 0);
549
487
  const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
550
488
  expect(input).to.not.be.null;
551
489
  });
552
490
  it("invalid - unicode", async () => {
553
- const el = await litFixture(
554
- html`
555
- <sp-textfield
556
- placeholder="Enter your number"
557
- pattern="\\p{N}+"
558
- value="123 not valid"
559
- required
560
- ></sp-textfield>
561
- `
562
- );
491
+ const el = await litFixture(html`
492
+ <sp-textfield
493
+ placeholder="Enter your number"
494
+ pattern="\\p{N}+"
495
+ value="123 not valid"
496
+ required
497
+ ></sp-textfield>
498
+ `);
563
499
  await elementUpdated(el);
564
500
  expect(el).to.not.equal(void 0);
565
501
  const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
566
502
  expect(input).to.not.be.null;
567
503
  });
568
504
  it("invalid - multiline - unicode", async () => {
569
- const el = await litFixture(
570
- html`
571
- <sp-textfield
572
- placeholder="Enter your number"
573
- pattern="\\p{N}+"
574
- value="123 not valid"
575
- required
576
- multiline
577
- ></sp-textfield>
578
- `
579
- );
505
+ const el = await litFixture(html`
506
+ <sp-textfield
507
+ placeholder="Enter your number"
508
+ pattern="\\p{N}+"
509
+ value="123 not valid"
510
+ required
511
+ multiline
512
+ ></sp-textfield>
513
+ `);
580
514
  await elementUpdated(el);
581
515
  expect(el).to.not.equal(void 0);
582
516
  const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
583
517
  expect(input).to.not.be.null;
584
518
  });
585
519
  it("invalid - boundary-type assertions", async () => {
586
- const el = await litFixture(
587
- html`
588
- <sp-textfield
589
- placeholder="Enter your number"
590
- pattern="^\\p{N}+$"
591
- value="123 not valid"
592
- required
593
- ></sp-textfield>
594
- `
595
- );
520
+ const el = await litFixture(html`
521
+ <sp-textfield
522
+ placeholder="Enter your number"
523
+ pattern="^\\p{N}+$"
524
+ value="123 not valid"
525
+ required
526
+ ></sp-textfield>
527
+ `);
596
528
  await elementUpdated(el);
597
529
  expect(el).to.not.equal(void 0);
598
530
  const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
599
531
  expect(input).to.not.be.null;
600
532
  });
601
533
  it("invalid - boundary-type assertions and title", async () => {
602
- const el = await litFixture(
603
- html`
604
- <sp-textfield
605
- placeholder="Enter your number"
606
- type="url"
607
- value="invalid-email"
608
- invalid
609
- ></sp-textfield>
610
- `
611
- );
534
+ const el = await litFixture(html`
535
+ <sp-textfield
536
+ placeholder="Enter your number"
537
+ type="url"
538
+ value="invalid-email"
539
+ invalid
540
+ ></sp-textfield>
541
+ `);
612
542
  await elementUpdated(el);
613
543
  expect(el).to.not.equal(void 0);
614
544
  const input = el.shadowRoot.querySelector("#invalid");
@@ -616,17 +546,15 @@ describe("Textfield", () => {
616
546
  expect(el.focusElement).to.have.attribute("title");
617
547
  });
618
548
  it("invalid - multiline - boundary-type assertions and title", async () => {
619
- const el = await litFixture(
620
- html`
621
- <sp-textfield
622
- multiline
623
- placeholder="Enter your number"
624
- type="url"
625
- value="invalid-email"
626
- invalid
627
- ></sp-textfield>
628
- `
629
- );
549
+ const el = await litFixture(html`
550
+ <sp-textfield
551
+ multiline
552
+ placeholder="Enter your number"
553
+ type="url"
554
+ value="invalid-email"
555
+ invalid
556
+ ></sp-textfield>
557
+ `);
630
558
  await elementUpdated(el);
631
559
  expect(el).to.not.equal(void 0);
632
560
  const input = el.shadowRoot.querySelector("#invalid");
@@ -634,17 +562,15 @@ describe("Textfield", () => {
634
562
  expect(el.focusElement).to.have.attribute("title");
635
563
  });
636
564
  it("invalid - multiline - boundary-type assertions", async () => {
637
- const el = await litFixture(
638
- html`
639
- <sp-textfield
640
- placeholder="Enter your number"
641
- pattern="^\\p{N}+$"
642
- value="123 not valid"
643
- required
644
- multiline
645
- ></sp-textfield>
646
- `
647
- );
565
+ const el = await litFixture(html`
566
+ <sp-textfield
567
+ placeholder="Enter your number"
568
+ pattern="^\\p{N}+$"
569
+ value="123 not valid"
570
+ required
571
+ multiline
572
+ ></sp-textfield>
573
+ `);
648
574
  await elementUpdated(el);
649
575
  expect(el).to.not.equal(void 0);
650
576
  const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
@@ -657,11 +583,9 @@ describe("Textfield", () => {
657
583
  activeElement = path[0];
658
584
  };
659
585
  document.addEventListener("focusin", onFocusIn);
660
- const el = await litFixture(
661
- html`
662
- <sp-textfield placeholder="Enter your name"></sp-textfield>
663
- `
664
- );
586
+ const el = await litFixture(html`
587
+ <sp-textfield placeholder="Enter your name"></sp-textfield>
588
+ `);
665
589
  await elementUpdated(el);
666
590
  el.focus();
667
591
  await elementUpdated(el);
@@ -675,14 +599,9 @@ describe("Textfield", () => {
675
599
  activeElement = path[0];
676
600
  };
677
601
  document.addEventListener("focusin", onFocusIn);
678
- const el = await litFixture(
679
- html`
680
- <sp-textfield
681
- disabled
682
- placeholder="Enter your name"
683
- ></sp-textfield>
684
- `
685
- );
602
+ const el = await litFixture(html`
603
+ <sp-textfield disabled placeholder="Enter your name"></sp-textfield>
604
+ `);
686
605
  await elementUpdated(el);
687
606
  el.focus();
688
607
  await elementUpdated(el);
@@ -697,11 +616,9 @@ describe("Textfield", () => {
697
616
  });
698
617
  it("accepts input", async () => {
699
618
  const testValue = "Test Name";
700
- const el = await litFixture(
701
- html`
702
- <sp-textfield placeholder="Enter your name"></sp-textfield>
703
- `
704
- );
619
+ const el = await litFixture(html`
620
+ <sp-textfield placeholder="Enter your name"></sp-textfield>
621
+ `);
705
622
  await elementUpdated(el);
706
623
  el.focusElement.value = testValue;
707
624
  el.focusElement.dispatchEvent(new Event("input"));
@@ -709,11 +626,9 @@ describe("Textfield", () => {
709
626
  });
710
627
  it("selects", async () => {
711
628
  const testValue = "Test Name";
712
- const el = await litFixture(
713
- html`
714
- <sp-textfield value=${testValue}></sp-textfield>
715
- `
716
- );
629
+ const el = await litFixture(html`
630
+ <sp-textfield value=${testValue}></sp-textfield>
631
+ `);
717
632
  await elementUpdated(el);
718
633
  expect(el.value).to.equal(testValue);
719
634
  el.focus();
@@ -723,11 +638,9 @@ describe("Textfield", () => {
723
638
  });
724
639
  it("setSelectionRange", async () => {
725
640
  const testValue = "Test Name";
726
- const el = await litFixture(
727
- html`
728
- <sp-textfield value=${testValue}></sp-textfield>
729
- `
730
- );
641
+ const el = await litFixture(html`
642
+ <sp-textfield value=${testValue}></sp-textfield>
643
+ `);
731
644
  await elementUpdated(el);
732
645
  expect(el.value).to.equal(testValue);
733
646
  el.focus();
@@ -736,11 +649,9 @@ describe("Textfield", () => {
736
649
  expect(el.value).to.equal("Name");
737
650
  });
738
651
  it("handles minlength with required", async () => {
739
- const el = await litFixture(
740
- html`
741
- <sp-textfield required minlength="3"></sp-textfield>
742
- `
743
- );
652
+ const el = await litFixture(html`
653
+ <sp-textfield required minlength="3"></sp-textfield>
654
+ `);
744
655
  el.focus();
745
656
  await sendKeys({
746
657
  type: "ab"
@@ -756,16 +667,14 @@ describe("Textfield", () => {
756
667
  expect(el.checkValidity()).to.be.true;
757
668
  });
758
669
  it("accepts maxlength", async () => {
759
- const el = await litFixture(
760
- html`
761
- <sp-textfield
762
- placeholder="Enter your name"
763
- maxlength="3"
764
- minlength="2"
765
- required
766
- ></sp-textfield>
767
- `
768
- );
670
+ const el = await litFixture(html`
671
+ <sp-textfield
672
+ placeholder="Enter your name"
673
+ maxlength="3"
674
+ minlength="2"
675
+ required
676
+ ></sp-textfield>
677
+ `);
769
678
  await elementUpdated(el);
770
679
  el.focus();
771
680
  await sendKeys({
@@ -811,14 +720,12 @@ describe("Textfield", () => {
811
720
  const onChange = (event) => {
812
721
  eventSource = event.composedPath()[0];
813
722
  };
814
- const el = await litFixture(
815
- html`
816
- <sp-textfield
817
- placeholder="Enter your name"
818
- @change=${onChange}
819
- ></sp-textfield>
820
- `
821
- );
723
+ const el = await litFixture(html`
724
+ <sp-textfield
725
+ placeholder="Enter your name"
726
+ @change=${onChange}
727
+ ></sp-textfield>
728
+ `);
822
729
  await elementUpdated(el);
823
730
  el.focusElement.value = testValue;
824
731
  el.focusElement.dispatchEvent(new Event("input"));
@@ -828,22 +735,18 @@ describe("Textfield", () => {
828
735
  expect(testSource).to.equal(el);
829
736
  });
830
737
  it("passes through `autocomplete` attribute", async () => {
831
- let el = await litFixture(
832
- html`
833
- <sp-textfield autocomplete="off"></sp-textfield>
834
- `
835
- );
738
+ let el = await litFixture(html`
739
+ <sp-textfield autocomplete="off"></sp-textfield>
740
+ `);
836
741
  await elementUpdated(el);
837
742
  let input = el.shadowRoot ? el.shadowRoot.querySelector("input") : null;
838
743
  expect(input).to.exist;
839
744
  if (input) {
840
745
  expect(input.getAttribute("autocomplete")).to.equal("off");
841
746
  }
842
- el = await litFixture(
843
- html`
844
- <sp-textfield></sp-textfield>
845
- `
846
- );
747
+ el = await litFixture(html`
748
+ <sp-textfield></sp-textfield>
749
+ `);
847
750
  await elementUpdated(el);
848
751
  input = el.shadowRoot ? el.shadowRoot.querySelector("input") : null;
849
752
  expect(input).to.exist;
@@ -852,11 +755,9 @@ describe("Textfield", () => {
852
755
  }
853
756
  });
854
757
  it("tests on `required` changes", async () => {
855
- const el = await litFixture(
856
- html`
857
- <sp-textfield value=""></sp-textfield>
858
- `
859
- );
758
+ const el = await litFixture(html`
759
+ <sp-textfield value=""></sp-textfield>
760
+ `);
860
761
  await elementUpdated(el);
861
762
  expect(el.invalid).to.be.false;
862
763
  el.required = true;
@@ -864,11 +765,9 @@ describe("Textfield", () => {
864
765
  expect(el.invalid).to.be.true;
865
766
  });
866
767
  it("manages `allowed-keys`", async () => {
867
- const el = await litFixture(
868
- html`
869
- <sp-textfield allowed-keys="asdf"></sp-textfield>
870
- `
871
- );
768
+ const el = await litFixture(html`
769
+ <sp-textfield allowed-keys="asdf"></sp-textfield>
770
+ `);
872
771
  await elementUpdated(el);
873
772
  expect(el.value).to.equal("");
874
773
  const inputElement = el.focusElement;
@@ -899,49 +798,39 @@ describe("Textfield", () => {
899
798
  "password"
900
799
  ];
901
800
  for await (const t of types) {
902
- const el = await litFixture(
903
- html`
904
- <sp-textfield type=${t}></sp-textfield>
905
- `
906
- );
801
+ const el = await litFixture(html`
802
+ <sp-textfield type=${t}></sp-textfield>
803
+ `);
907
804
  expect(el.type).equals(t);
908
805
  el.setAttribute("type", "url");
909
806
  expect(el.type).equals("url");
910
807
  }
911
808
  });
912
809
  it('represents invalid and missing attributes as "text"', async () => {
913
- const el1 = await litFixture(
914
- html`
915
- <sp-textfield></sp-textfield>
916
- `
917
- );
918
- const el2 = await litFixture(
919
- html`
920
- <sp-textfield type="time"></sp-textfield>
921
- `
922
- );
810
+ const el1 = await litFixture(html`
811
+ <sp-textfield></sp-textfield>
812
+ `);
813
+ const el2 = await litFixture(html`
814
+ <sp-textfield type="time"></sp-textfield>
815
+ `);
923
816
  expect(el1.type).equals("text");
924
817
  expect(el2.type).equals("text");
925
818
  el1.setAttribute("type", "submit");
926
819
  expect(el1.type).equals("text");
927
820
  });
928
821
  it("reflects valid property assignments", async () => {
929
- const el = await litFixture(
930
- html`
931
- <sp-textfield type="url"></sp-textfield>
932
- `
933
- );
822
+ const el = await litFixture(html`
823
+ <sp-textfield type="url"></sp-textfield>
824
+ `);
934
825
  el.type = "email";
935
826
  await elementUpdated(el);
936
827
  expect(el.getAttribute("type")).equals("email");
937
828
  expect(el.type).equals("email");
938
829
  });
939
830
  it('reflects invalid assignments but sets state to "text"', async () => {
940
- const el = await litFixture(
941
- html`
942
- <sp-textfield type="url"></sp-textfield>
943
- `
944
- );
831
+ const el = await litFixture(html`
832
+ <sp-textfield type="url"></sp-textfield>
833
+ `);
945
834
  el.type = "range";
946
835
  await elementUpdated(el);
947
836
  expect(el.getAttribute("type")).equals("range");