@epa-wg/custom-element-dist 0.0.22 → 0.0.23

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 (79) hide show
  1. package/.idea/.gitignore +8 -0
  2. package/README.md +4 -4
  3. package/coverage/coverage-final.json +13 -15
  4. package/coverage/index.html +30 -30
  5. package/coverage/src/custom-element/coverage.svg +1 -1
  6. package/coverage/src/custom-element/custom-element.js.html +72 -72
  7. package/coverage/src/custom-element/http-request.js.html +10 -10
  8. package/coverage/src/custom-element/index.html +10 -40
  9. package/coverage/src/custom-element/local-storage.js.html +5 -5
  10. package/coverage/src/custom-element/location-element.js.html +1 -1
  11. package/coverage/src/index.html +1 -1
  12. package/coverage/src/mocks/handlers.ts.html +1 -1
  13. package/coverage/src/mocks/index.html +1 -1
  14. package/coverage/src/stories/attributes.test.stories.ts/coverage.svg +1 -1
  15. package/coverage/src/stories/attributes.test.stories.ts.html +85 -91
  16. package/coverage/src/stories/coverage.svg +1 -1
  17. package/coverage/src/stories/css.test.stories.ts/coverage.svg +1 -1
  18. package/coverage/src/stories/css.test.stories.ts.html +75 -78
  19. package/coverage/src/stories/dom-merge.test.stories.ts/coverage.svg +1 -1
  20. package/coverage/src/stories/dom-merge.test.stories.ts.html +74 -74
  21. package/coverage/src/stories/external-template.test.stories.ts/coverage.svg +1 -1
  22. package/coverage/src/stories/external-template.test.stories.ts.html +154 -154
  23. package/coverage/src/stories/form.test.stories.ts/coverage.svg +1 -1
  24. package/coverage/src/stories/form.test.stories.ts.html +83 -86
  25. package/coverage/src/stories/http-request.stories.ts.html +1 -1
  26. package/coverage/src/stories/index.html +104 -104
  27. package/coverage/src/stories/local-storage.test.stories.ts/coverage.svg +1 -1
  28. package/coverage/src/stories/local-storage.test.stories.ts.html +444 -444
  29. package/coverage/src/stories/location-element.test.stories.ts/coverage.svg +1 -1
  30. package/coverage/src/stories/location-element.test.stories.ts.html +96 -96
  31. package/coverage/src/stories/slice-events.test.stories.ts/coverage.svg +1 -1
  32. package/coverage/src/stories/slice-events.test.stories.ts.html +141 -141
  33. package/coverage/src/stories/slots.test.stories.ts/coverage.svg +1 -1
  34. package/coverage/src/stories/slots.test.stories.ts.html +120 -123
  35. package/coverage/src/stories/{renderPlay.ts.html → testStoryBook.ts.html} +43 -22
  36. package/coverage/src/sum.ts.html +1 -1
  37. package/package.json +3 -3
  38. package/src/custom-element/demo/form.html +91 -44
  39. package/src/custom-element/demo/s.xml +9 -17
  40. package/src/custom-element/ide/web-types-dce.json +1 -1
  41. package/src/custom-element/ide/web-types-xsl.json +1 -1
  42. package/src/stories/attributes.test.stories.ts +9 -11
  43. package/src/stories/css.test.stories.ts +6 -7
  44. package/src/stories/dom-merge.test.stories.ts +6 -6
  45. package/src/stories/external-template.test.stories.ts +6 -6
  46. package/src/stories/form.test.stories.ts +6 -7
  47. package/src/stories/local-storage.test.stories.ts +7 -7
  48. package/src/stories/location-element.test.stories.ts +6 -6
  49. package/src/stories/slice-events.test.stories.ts +6 -6
  50. package/src/stories/slots.test.stories.ts +6 -7
  51. package/src/stories/testStoryBook.ts +28 -0
  52. package/storybook-static/assets/{Color-PRSJMWNM-e4s261EJ.js → Color-PRSJMWNM-BD_Ds9NW.js} +1 -1
  53. package/storybook-static/assets/{Configure-DWut7txe.js → Configure-70I_VApa.js} +1 -1
  54. package/storybook-static/assets/{DocsRenderer-K4EAMTCU-CaXVGjCl.js → DocsRenderer-K4EAMTCU-9dn0-HCP.js} +2 -2
  55. package/storybook-static/assets/{WithTooltip-KJL26V4Q--B8vdnMi.js → WithTooltip-KJL26V4Q-C6g5GOU9.js} +1 -1
  56. package/storybook-static/assets/{attributes.test.stories-IuwazrdL.js → attributes.test.stories-BEOraI4E.js} +2 -1
  57. package/storybook-static/assets/{formatter-2WMMO6ZP-SJtgH3vM.js → formatter-2WMMO6ZP-6IvBq34u.js} +1 -1
  58. package/storybook-static/assets/{iframe-CM82WlGY.js → iframe-zdt9kuj6.js} +2 -2
  59. package/storybook-static/assets/{index-DNL-IEpS.js → index-B3oZkK3F.js} +1 -1
  60. package/storybook-static/assets/{index-CEZitmnt.js → index-C30JwJMK.js} +5 -5
  61. package/storybook-static/assets/{index-D1MP-Zis.js → index-DhXZyjEd.js} +1 -1
  62. package/storybook-static/assets/{preview-5Y0XiZgz.js → preview-D0eCfQft.js} +2 -2
  63. package/storybook-static/assets/{syntaxhighlighter-BP7B2CQK-BWFH_0wQ.js → syntaxhighlighter-BP7B2CQK-DpPBKyTO.js} +1 -1
  64. package/storybook-static/iframe.html +1 -1
  65. package/storybook-static/project.json +1 -1
  66. package/tsconfig.json +31 -21
  67. package/yarn.lock +10242 -0
  68. package/.vscode/settings.json +0 -24
  69. package/coverage/src/custom-element/custom-element1-1.js/coverage.svg +0 -10
  70. package/coverage/src/custom-element/custom-element1-1.js.html +0 -2374
  71. package/coverage/src/custom-element/custom-element1.js/coverage.svg +0 -10
  72. package/coverage/src/custom-element/custom-element1.js.html +0 -2374
  73. package/src/custom-element/custom-element1-1.js +0 -763
  74. package/src/custom-element/custom-element1.js +0 -763
  75. package/src/custom-element/custom-element1.js0 +0 -750
  76. package/src/custom-element/custom-element2.js0 +0 -759
  77. package/src/custom-element/custom-element3.js0 +0 -763
  78. package/src/stories/renderPlay.ts +0 -21
  79. /package/coverage/src/stories/{renderPlay.ts → testStoryBook.ts}/coverage.svg +0 -0
package/coverage/src/stories/slots.test.stories.ts.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">100% </span>
26
+ <span class="strong">25% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>64/64</span>
28
+ <span class='fraction'>16/64</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
33
  <span class="strong">100% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>1/1</span>
35
+ <span class='fraction'>3/3</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">100% </span>
40
+ <span class="strong">22.22% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>9/9</span>
42
+ <span class='fraction'>2/9</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">100% </span>
47
+ <span class="strong">23.8% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>63/63</span>
49
+ <span class='fraction'>15/63</span>
50
50
  </div>
51
51
 
52
52
 
@@ -61,7 +61,7 @@
61
61
  </div>
62
62
  </template>
63
63
  </div>
64
- <div class='status-line high'></div>
64
+ <div class='status-line low'></div>
65
65
  <pre><table class="coverage">
66
66
  <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
67
  <a name='L2'></a><a href='#L2'>2</a>
@@ -280,8 +280,7 @@
280
280
  <a name='L215'></a><a href='#L215'>215</a>
281
281
  <a name='L216'></a><a href='#L216'>216</a>
282
282
  <a name='L217'></a><a href='#L217'>217</a>
283
- <a name='L218'></a><a href='#L218'>218</a>
284
- <a name='L219'></a><a href='#L219'>219</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
283
+ <a name='L218'></a><a href='#L218'>218</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
285
284
  <span class="cline-any cline-neutral">&nbsp;</span>
286
285
  <span class="cline-any cline-neutral">&nbsp;</span>
287
286
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -324,13 +323,13 @@
324
323
  <span class="cline-any cline-neutral">&nbsp;</span>
325
324
  <span class="cline-any cline-neutral">&nbsp;</span>
326
325
  <span class="cline-any cline-neutral">&nbsp;</span>
327
- <span class="cline-any cline-yes">1x</span>
328
- <span class="cline-any cline-yes">1x</span>
329
- <span class="cline-any cline-yes">1x</span>
330
- <span class="cline-any cline-yes">1x</span>
326
+ <span class="cline-any cline-no">&nbsp;</span>
327
+ <span class="cline-any cline-no">&nbsp;</span>
328
+ <span class="cline-any cline-no">&nbsp;</span>
329
+ <span class="cline-any cline-no">&nbsp;</span>
331
330
  <span class="cline-any cline-neutral">&nbsp;</span>
332
- <span class="cline-any cline-yes">1x</span>
333
- <span class="cline-any cline-yes">1x</span>
331
+ <span class="cline-any cline-no">&nbsp;</span>
332
+ <span class="cline-any cline-no">&nbsp;</span>
334
333
  <span class="cline-any cline-neutral">&nbsp;</span>
335
334
  <span class="cline-any cline-neutral">&nbsp;</span>
336
335
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -344,12 +343,12 @@
344
343
  <span class="cline-any cline-neutral">&nbsp;</span>
345
344
  <span class="cline-any cline-neutral">&nbsp;</span>
346
345
  <span class="cline-any cline-neutral">&nbsp;</span>
347
- <span class="cline-any cline-yes">1x</span>
348
- <span class="cline-any cline-yes">1x</span>
349
- <span class="cline-any cline-yes">1x</span>
350
- <span class="cline-any cline-yes">1x</span>
351
- <span class="cline-any cline-yes">1x</span>
352
- <span class="cline-any cline-yes">1x</span>
346
+ <span class="cline-any cline-no">&nbsp;</span>
347
+ <span class="cline-any cline-no">&nbsp;</span>
348
+ <span class="cline-any cline-no">&nbsp;</span>
349
+ <span class="cline-any cline-no">&nbsp;</span>
350
+ <span class="cline-any cline-no">&nbsp;</span>
351
+ <span class="cline-any cline-no">&nbsp;</span>
353
352
  <span class="cline-any cline-neutral">&nbsp;</span>
354
353
  <span class="cline-any cline-neutral">&nbsp;</span>
355
354
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -363,12 +362,12 @@
363
362
  <span class="cline-any cline-neutral">&nbsp;</span>
364
363
  <span class="cline-any cline-neutral">&nbsp;</span>
365
364
  <span class="cline-any cline-neutral">&nbsp;</span>
366
- <span class="cline-any cline-yes">1x</span>
367
- <span class="cline-any cline-yes">1x</span>
368
- <span class="cline-any cline-yes">1x</span>
369
- <span class="cline-any cline-yes">1x</span>
370
- <span class="cline-any cline-yes">1x</span>
371
- <span class="cline-any cline-yes">1x</span>
365
+ <span class="cline-any cline-no">&nbsp;</span>
366
+ <span class="cline-any cline-no">&nbsp;</span>
367
+ <span class="cline-any cline-no">&nbsp;</span>
368
+ <span class="cline-any cline-no">&nbsp;</span>
369
+ <span class="cline-any cline-no">&nbsp;</span>
370
+ <span class="cline-any cline-no">&nbsp;</span>
372
371
  <span class="cline-any cline-neutral">&nbsp;</span>
373
372
  <span class="cline-any cline-neutral">&nbsp;</span>
374
373
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -382,13 +381,13 @@
382
381
  <span class="cline-any cline-neutral">&nbsp;</span>
383
382
  <span class="cline-any cline-neutral">&nbsp;</span>
384
383
  <span class="cline-any cline-neutral">&nbsp;</span>
385
- <span class="cline-any cline-yes">1x</span>
386
- <span class="cline-any cline-yes">1x</span>
387
- <span class="cline-any cline-yes">1x</span>
388
- <span class="cline-any cline-yes">1x</span>
389
- <span class="cline-any cline-yes">1x</span>
390
- <span class="cline-any cline-yes">1x</span>
391
- <span class="cline-any cline-yes">1x</span>
384
+ <span class="cline-any cline-no">&nbsp;</span>
385
+ <span class="cline-any cline-no">&nbsp;</span>
386
+ <span class="cline-any cline-no">&nbsp;</span>
387
+ <span class="cline-any cline-no">&nbsp;</span>
388
+ <span class="cline-any cline-no">&nbsp;</span>
389
+ <span class="cline-any cline-no">&nbsp;</span>
390
+ <span class="cline-any cline-no">&nbsp;</span>
392
391
  <span class="cline-any cline-neutral">&nbsp;</span>
393
392
  <span class="cline-any cline-neutral">&nbsp;</span>
394
393
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -402,13 +401,13 @@
402
401
  <span class="cline-any cline-neutral">&nbsp;</span>
403
402
  <span class="cline-any cline-neutral">&nbsp;</span>
404
403
  <span class="cline-any cline-neutral">&nbsp;</span>
405
- <span class="cline-any cline-yes">1x</span>
406
- <span class="cline-any cline-yes">1x</span>
407
- <span class="cline-any cline-yes">1x</span>
408
- <span class="cline-any cline-yes">1x</span>
409
- <span class="cline-any cline-yes">1x</span>
410
- <span class="cline-any cline-yes">1x</span>
411
- <span class="cline-any cline-yes">1x</span>
404
+ <span class="cline-any cline-no">&nbsp;</span>
405
+ <span class="cline-any cline-no">&nbsp;</span>
406
+ <span class="cline-any cline-no">&nbsp;</span>
407
+ <span class="cline-any cline-no">&nbsp;</span>
408
+ <span class="cline-any cline-no">&nbsp;</span>
409
+ <span class="cline-any cline-no">&nbsp;</span>
410
+ <span class="cline-any cline-no">&nbsp;</span>
412
411
  <span class="cline-any cline-neutral">&nbsp;</span>
413
412
  <span class="cline-any cline-neutral">&nbsp;</span>
414
413
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -421,12 +420,12 @@
421
420
  <span class="cline-any cline-neutral">&nbsp;</span>
422
421
  <span class="cline-any cline-neutral">&nbsp;</span>
423
422
  <span class="cline-any cline-neutral">&nbsp;</span>
424
- <span class="cline-any cline-yes">1x</span>
425
- <span class="cline-any cline-yes">1x</span>
426
- <span class="cline-any cline-yes">1x</span>
427
- <span class="cline-any cline-yes">1x</span>
428
- <span class="cline-any cline-yes">1x</span>
429
- <span class="cline-any cline-yes">1x</span>
423
+ <span class="cline-any cline-no">&nbsp;</span>
424
+ <span class="cline-any cline-no">&nbsp;</span>
425
+ <span class="cline-any cline-no">&nbsp;</span>
426
+ <span class="cline-any cline-no">&nbsp;</span>
427
+ <span class="cline-any cline-no">&nbsp;</span>
428
+ <span class="cline-any cline-no">&nbsp;</span>
430
429
  <span class="cline-any cline-neutral">&nbsp;</span>
431
430
  <span class="cline-any cline-neutral">&nbsp;</span>
432
431
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -476,25 +475,24 @@
476
475
  <span class="cline-any cline-neutral">&nbsp;</span>
477
476
  <span class="cline-any cline-neutral">&nbsp;</span>
478
477
  <span class="cline-any cline-neutral">&nbsp;</span>
479
- <span class="cline-any cline-yes">1x</span>
480
- <span class="cline-any cline-yes">1x</span>
481
- <span class="cline-any cline-yes">1x</span>
482
- <span class="cline-any cline-yes">1x</span>
483
- <span class="cline-any cline-yes">1x</span>
484
- <span class="cline-any cline-yes">1x</span>
485
- <span class="cline-any cline-yes">1x</span>
486
- <span class="cline-any cline-yes">1x</span>
487
- <span class="cline-any cline-yes">1x</span>
488
- <span class="cline-any cline-yes">1x</span>
478
+ <span class="cline-any cline-no">&nbsp;</span>
479
+ <span class="cline-any cline-no">&nbsp;</span>
480
+ <span class="cline-any cline-no">&nbsp;</span>
481
+ <span class="cline-any cline-no">&nbsp;</span>
482
+ <span class="cline-any cline-no">&nbsp;</span>
483
+ <span class="cline-any cline-no">&nbsp;</span>
484
+ <span class="cline-any cline-no">&nbsp;</span>
485
+ <span class="cline-any cline-no">&nbsp;</span>
486
+ <span class="cline-any cline-no">&nbsp;</span>
487
+ <span class="cline-any cline-no">&nbsp;</span>
489
488
  <span class="cline-any cline-neutral">&nbsp;</span>
490
489
  <span class="cline-any cline-neutral">&nbsp;</span>
491
490
  <span class="cline-any cline-neutral">&nbsp;</span>
492
- <span class="cline-any cline-yes">1x</span>
493
491
  <span class="cline-any cline-neutral">&nbsp;</span>
492
+ <span class="cline-any cline-yes">1x</span>
494
493
  <span class="cline-any cline-neutral">&nbsp;</span>
495
494
  <span class="cline-any cline-neutral">&nbsp;</span>
496
495
  <span class="cline-any cline-yes">1x</span>
497
- <span class="cline-any cline-neutral">&nbsp;</span>
498
496
  <span class="cline-any cline-yes">1x</span>
499
497
  <span class="cline-any cline-yes">1x</span>
500
498
  <span class="cline-any cline-yes">1x</span>
@@ -540,15 +538,15 @@ export const Regular:Story =
540
538
  , slot: `Hello World`
541
539
  , payload: `🍋`
542
540
  }
543
- , play: async ({canvasElement}) =&gt;
541
+ , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
544
542
  {
545
- const titleText = Regular.args!.title as string;
546
- const canvas = within(canvasElement);
547
- await canvas.findByText(titleText);
548
- const el = canvasElement;
543
+ const titleText = <span class="cstat-no" title="statement not covered" >Regular.args!.title as string;</span>
544
+ const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
545
+ <span class="cstat-no" title="statement not covered" > await canvas.findByText(titleText);</span>
546
+ const el = <span class="cstat-no" title="statement not covered" >canvasElement;</span>
549
547
  &nbsp;
550
- expect(el.querySelectorAll('my-component').length).to.equal(1);
551
- expect(el.querySelector('my-component').innerHTML).to.include(`Hello World`);
548
+ <span class="cstat-no" title="statement not covered" > expect(el.querySelectorAll('my-component').length).to.equal(1);</span>
549
+ <span class="cstat-no" title="statement not covered" > expect(el.querySelector('my-component').innerHTML).to.include(`Hello World`);</span>
552
550
  }
553
551
  };
554
552
  &nbsp;
@@ -560,14 +558,14 @@ export const NamedSlot:Story =
560
558
  , slot: `&lt;slot name="slot1"&gt; 🥦&lt;/slot&gt;`
561
559
  , payload: `&lt;i slot="slot1"&gt;🥕&lt;/i&gt;`
562
560
  }
563
- , play: async ({canvasElement}) =&gt;
561
+ , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
564
562
  {
565
- const titleText = NamedSlot.args!.title as string;
566
- const canvas = within(canvasElement);
567
- await canvas.findByText(titleText);
568
- const el = canvasElement;
569
- expect(el.querySelectorAll('dce-1-slot').length).to.equal(1);
570
- expect(el.querySelector('dce-1-slot').innerText).to.equal(`🥕`);
563
+ const titleText = <span class="cstat-no" title="statement not covered" >NamedSlot.args!.title as string;</span>
564
+ const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
565
+ <span class="cstat-no" title="statement not covered" > await canvas.findByText(titleText);</span>
566
+ const el = <span class="cstat-no" title="statement not covered" >canvasElement;</span>
567
+ <span class="cstat-no" title="statement not covered" > expect(el.querySelectorAll('dce-1-slot').length).to.equal(1);</span>
568
+ <span class="cstat-no" title="statement not covered" > expect(el.querySelector('dce-1-slot').innerText).to.equal(`🥕`);</span>
571
569
  }
572
570
  };
573
571
  &nbsp;
@@ -579,14 +577,14 @@ export const DoubleSlot:Story =
579
577
  , slot: `&lt;slot name="slot2"&gt; 😃&lt;/slot&gt; and again: &lt;slot name="slot2"&gt; 😃&lt;/slot&gt;`
580
578
  , payload: `&lt;i slot="slot2"&gt;🥕&lt;/i&gt;`
581
579
  }
582
- , play: async ({canvasElement}) =&gt;
580
+ , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
583
581
  {
584
- const titleText = DoubleSlot.args!.title as string;
585
- const canvas = within(canvasElement);
586
- await canvas.findByText(titleText);
587
- const el = canvasElement;
588
- expect(el.querySelectorAll('dce-2-slots').length).to.equal(1);
589
- expect(el.querySelector('dce-2-slots').innerText).to.equal(`🥕 and again: 🥕`);
582
+ const titleText = <span class="cstat-no" title="statement not covered" >DoubleSlot.args!.title as string;</span>
583
+ const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
584
+ <span class="cstat-no" title="statement not covered" > await canvas.findByText(titleText);</span>
585
+ const el = <span class="cstat-no" title="statement not covered" >canvasElement;</span>
586
+ <span class="cstat-no" title="statement not covered" > expect(el.querySelectorAll('dce-2-slots').length).to.equal(1);</span>
587
+ <span class="cstat-no" title="statement not covered" > expect(el.querySelector('dce-2-slots').innerText).to.equal(`🥕 and again: 🥕`);</span>
590
588
  }
591
589
  };
592
590
  &nbsp;
@@ -598,15 +596,15 @@ export const NamedUnnamedDefaultSlot:Story =
598
596
  #2 &lt;slot&gt; 😃&lt;/slot&gt;`
599
597
  , payload: `&lt;i slot=""&gt;🥕&lt;/i&gt;`
600
598
  }
601
- , play: async ({canvasElement}) =&gt;
599
+ , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
602
600
  {
603
- const titleText = NamedUnnamedDefaultSlot.args!.title as string;
604
- const canvas = within(canvasElement);
605
- await canvas.findByText(titleText);
606
- const el = canvasElement;
607
- expect(el.querySelectorAll('dce-4-slot').length).to.equal(1);
608
- expect(el.querySelector('dce-4-slot').innerText).to.include(`#1 🥕`);
609
- expect(el.querySelector('dce-4-slot').innerText).to.include(`#2 🥕`);
601
+ const titleText = <span class="cstat-no" title="statement not covered" >NamedUnnamedDefaultSlot.args!.title as string;</span>
602
+ const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
603
+ <span class="cstat-no" title="statement not covered" > await canvas.findByText(titleText);</span>
604
+ const el = <span class="cstat-no" title="statement not covered" >canvasElement;</span>
605
+ <span class="cstat-no" title="statement not covered" > expect(el.querySelectorAll('dce-4-slot').length).to.equal(1);</span>
606
+ <span class="cstat-no" title="statement not covered" > expect(el.querySelector('dce-4-slot').innerText).to.include(`#1 🥕`);</span>
607
+ <span class="cstat-no" title="statement not covered" > expect(el.querySelector('dce-4-slot').innerText).to.include(`#2 🥕`);</span>
610
608
  }
611
609
  };
612
610
  &nbsp;
@@ -618,15 +616,15 @@ export const NamedDefaultSlot:Story =
618
616
  #2 &lt;slot name=""&gt; 😃&lt;/slot&gt;`
619
617
  , payload: `&lt;i slot=""&gt;🥕&lt;/i&gt;`
620
618
  }
621
- , play: async ({canvasElement}) =&gt;
619
+ , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
622
620
  {
623
- const titleText = NamedDefaultSlot.args!.title as string;
624
- const canvas = within(canvasElement);
625
- await canvas.findByText(titleText);
626
- const el = canvasElement;
627
- expect(el.querySelectorAll('dce-3-slot').length).to.equal(1);
628
- expect(el.querySelector('dce-3-slot').innerText).to.include(`#1 🥕`);
629
- expect(el.querySelector('dce-3-slot').innerText).to.include(`#2 🥕`);
621
+ const titleText = <span class="cstat-no" title="statement not covered" >NamedDefaultSlot.args!.title as string;</span>
622
+ const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
623
+ <span class="cstat-no" title="statement not covered" > await canvas.findByText(titleText);</span>
624
+ const el = <span class="cstat-no" title="statement not covered" >canvasElement;</span>
625
+ <span class="cstat-no" title="statement not covered" > expect(el.querySelectorAll('dce-3-slot').length).to.equal(1);</span>
626
+ <span class="cstat-no" title="statement not covered" > expect(el.querySelector('dce-3-slot').innerText).to.include(`#1 🥕`);</span>
627
+ <span class="cstat-no" title="statement not covered" > expect(el.querySelector('dce-3-slot').innerText).to.include(`#2 🥕`);</span>
630
628
  }
631
629
  };
632
630
  &nbsp;
@@ -637,14 +635,14 @@ export const DefaultSlot:Story =
637
635
  , slot: `&lt;slot&gt; Hello &lt;/slot&gt; World!`
638
636
  , payload: `👋`
639
637
  }
640
- , play: async ({canvasElement}) =&gt;
638
+ , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
641
639
  {
642
- const titleText = DefaultSlot.args!.title as string;
643
- const canvas = within(canvasElement);
644
- await canvas.findByText(titleText);
645
- const el = canvasElement;
646
- expect(el.querySelectorAll('greet-element').length).to.equal(1);
647
- expect(el.querySelector('greet-element').innerText).to.include(`👋 World!`);
640
+ const titleText = <span class="cstat-no" title="statement not covered" >DefaultSlot.args!.title as string;</span>
641
+ const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
642
+ <span class="cstat-no" title="statement not covered" > await canvas.findByText(titleText);</span>
643
+ const el = <span class="cstat-no" title="statement not covered" >canvasElement;</span>
644
+ <span class="cstat-no" title="statement not covered" > expect(el.querySelectorAll('greet-element').length).to.equal(1);</span>
645
+ <span class="cstat-no" title="statement not covered" > expect(el.querySelector('greet-element').innerText).to.include(`👋 World!`);</span>
648
646
  }
649
647
  };
650
648
  &nbsp;
@@ -692,30 +690,29 @@ export const TemplateWithAttributesAndCondition:Story =
692
690
  &lt;/ul&gt;
693
691
  `
694
692
  }
695
- , play: async ({canvasElement}) =&gt;
693
+ , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
696
694
  {
697
- const titleText = TemplateWithAttributesAndCondition.args!.title as string;
698
- const canvas = within(canvasElement);
699
- await canvas.findByText(titleText);
700
- const el = canvasElement;
701
- expect(el.querySelectorAll('pokemon-tile').length).to.equal(1);
702
- const p = el.querySelector('pokemon-tile');
703
- expect(p.querySelector('img').src).to.equal('https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/1.svg');
704
- expect(p.querySelector('h3').innerText).to.equal('bulbasaur');
705
- expect(p.innerText).to.include('Smile as: 👼');
706
- expect(p.querySelector('[slot="description"]').innerText).to.include('Bulbasaur is a cute Pokémon');
695
+ const titleText = <span class="cstat-no" title="statement not covered" >TemplateWithAttributesAndCondition.args!.title as string;</span>
696
+ const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
697
+ <span class="cstat-no" title="statement not covered" > await canvas.findByText(titleText);</span>
698
+ const el = <span class="cstat-no" title="statement not covered" >canvasElement;</span>
699
+ <span class="cstat-no" title="statement not covered" > expect(el.querySelectorAll('pokemon-tile').length).to.equal(1);</span>
700
+ const p = <span class="cstat-no" title="statement not covered" >el.querySelector('pokemon-tile');</span>
701
+ <span class="cstat-no" title="statement not covered" > expect(p.querySelector('img').src).to.equal('https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/1.svg');</span>
702
+ <span class="cstat-no" title="statement not covered" > expect(p.querySelector('h3').innerText).to.equal('bulbasaur');</span>
703
+ <span class="cstat-no" title="statement not covered" > expect(p.innerText).to.include('Smile as: 👼');</span>
704
+ <span class="cstat-no" title="statement not covered" > expect(p.querySelector('[slot="description"]').innerText).to.include('Bulbasaur is a cute Pokémon');</span>
707
705
  }
708
706
  };
709
707
  &nbsp;
710
- const TestStories = {Regular, NamedSlot, DoubleSlot, NamedUnnamedDefaultSlot, NamedDefaultSlot
711
- , DefaultSlot, TemplateWithAttributesAndCondition};
712
- &nbsp;
713
708
  /* istanbul ignore else -- @preserve */
714
- if( 'test' === import.meta.env.MODE )
709
+ if( 'test' === import.meta.env.MODE &amp;&amp;
710
+ !import.meta.url.includes('skiptest') )
715
711
  {
716
- const {playStories} = await import('./renderPlay');
717
- const {describe} = await import('vitest')
718
- describe('slots', () =&gt; playStories( TestStories, meta ) );
712
+ const mod = await import('./slots.test.stories.ts?skiptest');
713
+ const { testStoryBook } = await import('./testStoryBook')
714
+ const { describe } = await import('vitest')
715
+ describe(meta.title, () =&gt; testStoryBook( mod, meta ) );
719
716
  }
720
717
  &nbsp;</pre></td></tr></table></pre>
721
718
 
@@ -724,7 +721,7 @@ if( 'test' === import.meta.env.MODE )
724
721
  <div class='footer quiet pad2 space-top1 center small'>
725
722
  Code coverage generated by
726
723
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
727
- at 2024-06-25T03:55:40.964Z
724
+ at 2024-06-27T03:24:38.495Z
728
725
  </div>
729
726
  <script src="../../prettify.js"></script>
730
727
  <script>
package/coverage/src/stories/{renderPlay.ts.html → testStoryBook.ts.html} RENAMED
@@ -3,7 +3,7 @@
3
3
  <html lang="en">
4
4
 
5
5
  <head>
6
- <title>Code coverage report for src/stories/renderPlay.ts</title>
6
+ <title>Code coverage report for src/stories/testStoryBook.ts</title>
7
7
  <meta charset="utf-8" />
8
8
  <link rel="stylesheet" href="../../prettify.css" />
9
9
  <link rel="stylesheet" href="../../base.css" />
@@ -19,34 +19,34 @@
19
19
  <body>
20
20
  <div class='wrapper'>
21
21
  <div class='pad1'>
22
- <h1><a href="../../index.html">All files</a> / <a href="index.html">src/stories</a> renderPlay.ts</h1>
22
+ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/stories</a> testStoryBook.ts</h1>
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
26
  <span class="strong">100% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>8/8</span>
28
+ <span class='fraction'>14/14</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
33
  <span class="strong">100% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>0/0</span>
35
+ <span class='fraction'>2/2</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
40
  <span class="strong">100% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>5/5</span>
42
+ <span class='fraction'>8/8</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
47
  <span class="strong">100% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>6/6</span>
49
+ <span class='fraction'>11/11</span>
50
50
  </div>
51
51
 
52
52
 
@@ -84,9 +84,14 @@
84
84
  <a name='L19'></a><a href='#L19'>19</a>
85
85
  <a name='L20'></a><a href='#L20'>20</a>
86
86
  <a name='L21'></a><a href='#L21'>21</a>
87
- <a name='L22'></a><a href='#L22'>22</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
88
- <span class="cline-any cline-neutral">&nbsp;</span>
89
- <span class="cline-any cline-neutral">&nbsp;</span>
87
+ <a name='L22'></a><a href='#L22'>22</a>
88
+ <a name='L23'></a><a href='#L23'>23</a>
89
+ <a name='L24'></a><a href='#L24'>24</a>
90
+ <a name='L25'></a><a href='#L25'>25</a>
91
+ <a name='L26'></a><a href='#L26'>26</a>
92
+ <a name='L27'></a><a href='#L27'>27</a>
93
+ <a name='L28'></a><a href='#L28'>28</a>
94
+ <a name='L29'></a><a href='#L29'>29</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
90
95
  <span class="cline-any cline-neutral">&nbsp;</span>
91
96
  <span class="cline-any cline-neutral">&nbsp;</span>
92
97
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -94,7 +99,6 @@
94
99
  <span class="cline-any cline-yes">43x</span>
95
100
  <span class="cline-any cline-yes">43x</span>
96
101
  <span class="cline-any cline-neutral">&nbsp;</span>
97
- <span class="cline-any cline-neutral">&nbsp;</span>
98
102
  <span class="cline-any cline-yes">43x</span>
99
103
  <span class="cline-any cline-yes">43x</span>
100
104
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -103,28 +107,45 @@
103
107
  <span class="cline-any cline-neutral">&nbsp;</span>
104
108
  <span class="cline-any cline-neutral">&nbsp;</span>
105
109
  <span class="cline-any cline-yes">9x</span>
110
+ <span class="cline-any cline-neutral">&nbsp;</span>
111
+ <span class="cline-any cline-neutral">&nbsp;</span>
112
+ <span class="cline-any cline-yes">9x</span>
113
+ <span class="cline-any cline-neutral">&nbsp;</span>
114
+ <span class="cline-any cline-yes">52x</span>
115
+ <span class="cline-any cline-yes">52x</span>
116
+ <span class="cline-any cline-yes">9x</span>
106
117
  <span class="cline-any cline-yes">43x</span>
107
118
  <span class="cline-any cline-neutral">&nbsp;</span>
108
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import type {StoryObj} from '@storybook/web-components';
119
+ <span class="cline-any cline-neutral">&nbsp;</span>
120
+ <span class="cline-any cline-yes">9x</span>
121
+ <span class="cline-any cline-neutral">&nbsp;</span>
122
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import type {StoryObj, Meta} from '@storybook/web-components';
109
123
  import {it} from 'vitest';
110
124
  &nbsp;
111
- &nbsp;
112
- export async function renderPlay&lt;TProps&gt;(story: StoryObj, meta:{render: (args: TProps)=&gt;string })
125
+ async function playStory( story: StoryObj, meta: Meta )
113
126
  {
114
- // @ts-ignore
115
127
  document.body.innerHTML = meta.render(story.args);
116
- await new Promise(resolve =&gt; setTimeout(async () =&gt;
128
+ await new Promise( (resolve) =&gt; setTimeout(async ()=&gt;
117
129
  {
118
- // @ts-ignore
119
- await story.play({canvasElement: document.body.firstElementChild as HTMLElement});
130
+ await story.play({canvasElement: document.body.lastElementChild});
120
131
  resolve(0);
121
- }, 0));
132
+ },0))
122
133
  }
123
134
  &nbsp;
124
- export function playStories&lt;TProps&gt;( Stories: any, meta:{ render: (args: TProps)=&gt;string } )
135
+ export async function testStoryBook&lt;TProps&gt;( mod: Record&lt;string, StoryObj&gt;, meta: Meta )
125
136
  {
126
- for ( let story of Object.values(Stories) as StoryObj[] )
127
- it( story.args!.title, async () =&gt; renderPlay(story, meta) );
137
+ const {describe, it } = await import('vitest');
138
+ function playStories( mod: Record&lt;string, StoryObj&gt;, meta: Meta )
139
+ {
140
+ Object.keys(mod).map(name=&gt;
141
+ {
142
+ const story = mod[name];
143
+ if( !story.play )
144
+ return;
145
+ it( name, async()=&gt;playStory(story,meta));
146
+ })
147
+ }
148
+ describe( meta.title, async () =&gt; playStories(mod, meta) )
128
149
  }
129
150
  &nbsp;</pre></td></tr></table></pre>
130
151
 
@@ -133,7 +154,7 @@ export function playStories&lt;TProps&gt;( Stories: any, meta:{ render: (args: T
133
154
  <div class='footer quiet pad2 space-top1 center small'>
134
155
  Code coverage generated by
135
156
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
136
- at 2024-06-25T03:55:40.964Z
157
+ at 2024-06-27T03:24:38.495Z
137
158
  </div>
138
159
  <script src="../../prettify.js"></script>
139
160
  <script>
package/coverage/src/sum.ts.html CHANGED
@@ -79,7 +79,7 @@ export function sum(a: number, b: number) {
79
79
  <div class='footer quiet pad2 space-top1 center small'>
80
80
  Code coverage generated by
81
81
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
82
- at 2024-06-25T03:55:40.964Z
82
+ at 2024-06-27T03:24:38.495Z
83
83
  </div>
84
84
  <script src="../prettify.js"></script>
85
85
  <script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@epa-wg/custom-element-dist",
3
- "version": "0.0.22",
3
+ "version": "0.0.23",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "vite",
@@ -14,10 +14,10 @@
14
14
  "test:watch": "vitest --inspect-brk --no-file-parallelism --browser.headless=false --test-timeout=0",
15
15
  "test:storybook": "test-storybook",
16
16
  "sb": "yarn storybook",
17
- "t": "vitest --no-file-parallelism --watch --browser.headless=false src/stories/slots.test.stories.ts"
17
+ "t": "vitest --no-file-parallelism --watch --browser.headless=false src/stories/attributes.test.stories.ts"
18
18
  },
19
19
  "dependencies": {
20
- "@epa-wg/custom-element": "0.0.22"
20
+ "@epa-wg/custom-element": "0.0.23"
21
21
  },
22
22
  "devDependencies": {
23
23
  "@chromatic-com/storybook": "^1.3.3",