npm - @epa-wg/custom-element-dist - Versions diffs - 0.0.21 → 0.0.23 - Mend

@epa-wg/custom-element-dist 0.0.21 → 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 (174) hide show

package/coverage/src/stories/external-template.test.stories.ts/coverage.svg ADDED Viewed

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 140 32" height="20px" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        .heavy { font: bold 16px sans-serif; fill:white; }
+        .percent { font: bold 16px monotype; fill: white; }
+    </style>
+    <rect width="140" height="32" fill="#473" rx="4"/>
+    <rect width="88" height="32" fill="#534" rx="4"/>
+    <text x="8" y="21" class="heavy">coverage</text>
+    <text x="94" y="22" class="percent">11.76%</text>
+</svg>

package/coverage/src/stories/{external-template.stories.ts.html → external-template.test.stories.ts.html} RENAMED Viewed

@@ -3,7 +3,7 @@
 <html lang="en">
 <head>
-    <title>Code coverage report for src/stories/external-template.stories.ts</title>
+    <title>Code coverage report for src/stories/external-template.test.stories.ts</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="../../prettify.css" />
     <link rel="stylesheet" href="../../base.css" />
@@ -19,34 +19,34 @@
 <body>
 <div class='wrapper'>
     <div class='pad1'>
-        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/stories</a> external-template.stories.ts</h1>
+        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/stories</a> external-template.test.stories.ts</h1>
         <div class='clearfix'>
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">24.41% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>81/81</span>
+                <span class='fraction'>21/86</span>
             </div>
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/0</span>
+                <span class='fraction'>3/3</span>
             </div>
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">11.76% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>16/16</span>
+                <span class='fraction'>2/17</span>
             </div>
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">24.09% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>79/79</span>
+                <span class='fraction'>20/83</span>
             </div>
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line high'></div>
+    <div class='status-line low'></div>
     <pre><table class="coverage">
 <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
 <a name='L2'></a><a href='#L2'>2</a>
@@ -308,7 +308,17 @@
 <a name='L243'></a><a href='#L243'>243</a>
 <a name='L244'></a><a href='#L244'>244</a>
 <a name='L245'></a><a href='#L245'>245</a>
-<a name='L246'></a><a href='#L246'>246</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L246'></a><a href='#L246'>246</a>
+<a name='L247'></a><a href='#L247'>247</a>
+<a name='L248'></a><a href='#L248'>248</a>
+<a name='L249'></a><a href='#L249'>249</a>
+<a name='L250'></a><a href='#L250'>250</a>
+<a name='L251'></a><a href='#L251'>251</a>
+<a name='L252'></a><a href='#L252'>252</a>
+<a name='L253'></a><a href='#L253'>253</a>
+<a name='L254'></a><a href='#L254'>254</a>
+<a name='L255'></a><a href='#L255'>255</a>
+<a name='L256'></a><a href='#L256'>256</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -318,7 +328,8 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -351,12 +362,12 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -370,11 +381,11 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -393,12 +404,12 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -416,13 +427,13 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -435,14 +446,14 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -454,14 +465,14 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -473,9 +484,9 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -487,9 +498,9 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -501,11 +512,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -517,10 +527,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -531,11 +541,11 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -546,24 +556,35 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">// noinspection DuplicatedCode
 &nbsp;
 import type { StoryObj }             from '@storybook/web-components';
 import {expect, getByTestId, within} from '@storybook/test';
 &nbsp;
 import '../custom-element/custom-element.js';
+import {Demo, SrcAttribute}          from './location-element.test.stories';
 &nbsp;
 type TProps = { title: string; body:string};
 &nbsp;
 type Story = StoryObj&lt;TProps&gt;;
-function sleep(ms: number) {    return new Promise((resolve) =&gt; setTimeout(resolve, ms)); }
+function <span class="fstat-no" title="function not covered" >sleep(m</span>s: number) {    <span class="cstat-no" title="statement not covered" >return new Promise(<span class="fstat-no" title="function not covered" >(r</span>esolve) =&gt; <span class="cstat-no" title="statement not covered" >setTimeout(resolve, ms))</span>; }</span>
 &nbsp;
 function render(args: TProps)
 {
@@ -587,21 +608,21 @@ export const TemplateInPage:Story  =
     &lt;template id="template1"&gt;
     &lt;slot&gt;Hello&lt;/slot&gt; World!
     &lt;/template&gt;
+&nbsp;
     &lt;custom-element tag="dce-internal" src="#template1"&gt;&lt;/custom-element&gt;
     &lt;!-- no need for loading fallback as the template exists --&gt;
+&nbsp;
     &lt;dce-internal data-testid="slot-override"&gt;👋&lt;/dce-internal&gt;
     &lt;dce-internal  data-testid="slot-default"&gt;&lt;/dce-internal&gt;
 `}
-,   play: async ({canvasElement}) =&gt;
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
-        const canvas = within(canvasElement);
-        await canvas.findByText(TemplateInPage.args!.title as string);
-        const         val = (prop)=&gt; canvas.getByTestId(prop).textContent.trim();
+        const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
+<span class="cstat-no" title="statement not covered" >        await canvas.findByText(TemplateInPage.args!.title as string);</span>
+        const         val = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(p</span>rop)=&gt; <span class="cstat-no" title="statement not covered" >canvas.getByTestId(prop).textContent.trim();</span></span>
 &nbsp;
-        expect(val('slot-override')).toEqual('👋 World!');
-        expect(val('slot-default' )).toEqual('Hello World!');
+<span class="cstat-no" title="statement not covered" >        expect(val('slot-override')).toEqual('👋 World!');</span>
+<span class="cstat-no" title="statement not covered" >        expect(val('slot-default' )).toEqual('Hello World!');</span>
     },
 };
 &nbsp;
@@ -613,13 +634,13 @@ export const NoTag:Story  =
 &nbsp;
 &lt;custom-element src="#template2"&gt;&lt;/custom-element&gt;
 &lt;custom-element src="#template2"&gt;&lt;/custom-element&gt;`}
-,   play: async ({canvasElement}) =&gt;
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
-        const canvas = within(canvasElement);
-        await canvas.findByText(NoTag.args!.title as string);
+        const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
+<span class="cstat-no" title="statement not covered" >        await canvas.findByText(NoTag.args!.title as string);</span>
 &nbsp;
-        expect(canvasElement.querySelectorAll('custom-element')[0].textContent.trim()).toEqual('🏗️ construction');
-        expect(canvasElement.querySelectorAll('custom-element')[1].textContent.trim()).toEqual('🏗️ construction');
+<span class="cstat-no" title="statement not covered" >        expect(canvasElement.querySelectorAll('custom-element')[0].textContent.trim()).toEqual('🏗️ construction');</span>
+<span class="cstat-no" title="statement not covered" >        expect(canvasElement.querySelectorAll('custom-element')[1].textContent.trim()).toEqual('🏗️ construction');</span>
     },
 };
 &nbsp;
@@ -636,14 +657,14 @@ export const ExternalSvg:Story  =
         &lt;i&gt;fallback for missing image&lt;/i&gt;
     &lt;/custom-element&gt;
 `}
-,   play: async ({canvasElement}) =&gt;
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
-        const canvas = within(canvasElement);
-        await canvas.findByText(ExternalSvg.args!.title as string);
-        expect(canvasElement.querySelector('[src="confused.svg"]').innerHTML).to.include('loading from SVG ...');
-        await sleep(100);
-        expect(canvasElement.querySelector('dce-external').innerHTML).to.include('&lt;svg');
-        expect(canvasElement.querySelector('[src="no.svg"]').innerHTML).to.include('Vitest Browser Tester');
+        const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
+<span class="cstat-no" title="statement not covered" >        await canvas.findByText(ExternalSvg.args!.title as string);</span>
+<span class="cstat-no" title="statement not covered" >        expect(canvasElement.querySelector('[src="confused.svg"]').innerHTML).to.include('loading from SVG ...');</span>
+<span class="cstat-no" title="statement not covered" >        await sleep(100);</span>
+<span class="cstat-no" title="statement not covered" >        expect(canvasElement.querySelector('dce-external').innerHTML).to.include('&lt;svg');</span>
+<span class="cstat-no" title="statement not covered" >        expect(canvasElement.querySelector('[src="no.svg"]').innerHTML).to.include('Vitest Browser Tester');</span>
         // "fallback for missing image" is not shown in test as test does not return 404, see test on 404 instead
     },
 };
@@ -659,15 +680,15 @@ export const ExternalXsltFile:Story  =
         &lt;i&gt;inline DCE loading from XSLT ...&lt;/i&gt;
     &lt;/custom-element&gt;
 `}
-,   play: async ({canvasElement}) =&gt;
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
-        const canvas = within(canvasElement);
-        await canvas.findByText(ExternalXsltFile.args!.title as string);
-        expect(canvasElement.querySelector('dce-external-4').innerHTML).to.include('Hi');
-        expect(canvasElement.querySelector('[data-smile="👼"]').innerHTML).to.include('loading from XSLT ...');
-        await sleep(100);
-        expect(canvas.getByTestId('data-fruit').innerHTML).to.include('🍌');
-        expect(canvas.getByTestId('data-smile').innerHTML).to.include('👼');
+        const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
+<span class="cstat-no" title="statement not covered" >        await canvas.findByText(ExternalXsltFile.args!.title as string);</span>
+<span class="cstat-no" title="statement not covered" >        expect(canvasElement.querySelector('dce-external-4').innerHTML).to.include('Hi');</span>
+<span class="cstat-no" title="statement not covered" >        expect(canvasElement.querySelector('[data-smile="👼"]').innerHTML).to.include('loading from XSLT ...');</span>
+<span class="cstat-no" title="statement not covered" >        await sleep(100);</span>
+<span class="cstat-no" title="statement not covered" >        expect(canvas.getByTestId('data-fruit').innerHTML).to.include('🍌');</span>
+<span class="cstat-no" title="statement not covered" >        expect(canvas.getByTestId('data-smile').innerHTML).to.include('👼');</span>
     },
 };
 &nbsp;
@@ -678,16 +699,16 @@ export const ExternalHtmlFile:Story  =
             &lt;/custom-element&gt;
             &lt;dce-external-5 title="DCE with external XSLT template" data-fruit="🍌"&gt;Hi&lt;/dce-external-5&gt;
 `}
-,   play: async ({canvasElement}) =&gt;
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
-        const canvas = within(canvasElement);
-        await canvas.findByText(ExternalHtmlFile.args!.title as string);
-        await canvas.findByText('👋');
-        const t5 = canvasElement.querySelector('dce-external-5').innerHTML;
-        expect(t5).to.include('👋');
-        expect(t5).to.include('👌');
-        expect(t5).to.include('&lt;svg');
-        expect(t5).to.include('&lt;math');
+        const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
+<span class="cstat-no" title="statement not covered" >        await canvas.findByText(ExternalHtmlFile.args!.title as string);</span>
+<span class="cstat-no" title="statement not covered" >        await canvas.findByText('👋');</span>
+        const t5 = <span class="cstat-no" title="statement not covered" >canvasElement.querySelector('dce-external-5').innerHTML;</span>
+<span class="cstat-no" title="statement not covered" >        expect(t5).to.include('👋');</span>
+<span class="cstat-no" title="statement not covered" >        expect(t5).to.include('👌');</span>
+<span class="cstat-no" title="statement not covered" >        expect(t5).to.include('&lt;svg');</span>
+<span class="cstat-no" title="statement not covered" >        expect(t5).to.include('&lt;math');</span>
     },
 };
 &nbsp;
@@ -697,16 +718,16 @@ export const ExternalHtmlFileInline:Story  =
                 &lt;i&gt;inline DCE loading from HTML file ...&lt;/i&gt;
             &lt;/custom-element&gt;
 `}
-,   play: async ({canvasElement}) =&gt;
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
-        const canvas = within(canvasElement);
-        await canvas.findByText(ExternalHtmlFileInline.args!.title as string);
-        await canvas.findByText('👋');
-        const t5 = canvasElement.innerHTML;
-        expect(t5).to.include('👋');
-        expect(t5).to.include('👌');
-        expect(t5).to.include('&lt;svg');
-        expect(t5).to.include('&lt;math');
+        const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
+<span class="cstat-no" title="statement not covered" >        await canvas.findByText(ExternalHtmlFileInline.args!.title as string);</span>
+<span class="cstat-no" title="statement not covered" >        await canvas.findByText('👋');</span>
+        const t5 = <span class="cstat-no" title="statement not covered" >canvasElement.innerHTML;</span>
+<span class="cstat-no" title="statement not covered" >        expect(t5).to.include('👋');</span>
+<span class="cstat-no" title="statement not covered" >        expect(t5).to.include('👌');</span>
+<span class="cstat-no" title="statement not covered" >        expect(t5).to.include('&lt;svg');</span>
+<span class="cstat-no" title="statement not covered" >        expect(t5).to.include('&lt;math');</span>
     },
 };
 &nbsp;
@@ -716,11 +737,11 @@ export const HtmlWithinHtmlFile:Story  =
             &lt;template&gt;&lt;i&gt;loading HTML from templates file ...&lt;/i&gt;&lt;/template&gt;
         &lt;/custom-element&gt;
 `}
-,   play: async ({canvasElement}) =&gt;
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
-        const canvas = within(canvasElement);
-        await canvas.findByText(HtmlWithinHtmlFile.args!.title as string);
-        expect(await canvas.findByText('👋')).toBeInTheDocument();
+        const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
+<span class="cstat-no" title="statement not covered" >        await canvas.findByText(HtmlWithinHtmlFile.args!.title as string);</span>
+<span class="cstat-no" title="statement not covered" >        expect(await canvas.findByText('👋')).toBeInTheDocument();</span>
     },
 };
 &nbsp;
@@ -730,11 +751,11 @@ export const SvgWithinHtmlFile:Story  =
             &lt;template&gt;&lt;i&gt;loading  SVG from templates file ...&lt;/i&gt;&lt;/template&gt;
         &lt;/custom-element&gt;
 `}
-,   play: async ({canvasElement}) =&gt;
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
-        const canvas = within(canvasElement);
-        await canvas.findByText(SvgWithinHtmlFile.args!.title as string);
-        expect(await canvas.findByTestId('svg-test')).toBeInTheDocument();
+        const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
+<span class="cstat-no" title="statement not covered" >        await canvas.findByText(SvgWithinHtmlFile.args!.title as string);</span>
+<span class="cstat-no" title="statement not covered" >        expect(await canvas.findByTestId('svg-test')).toBeInTheDocument();</span>
     },
 };
 &nbsp;
@@ -744,13 +765,12 @@ export const MathMLWithinHtmlFile:Story  =
             &lt;template&gt;&lt;i&gt;loading MathML from HTML file ...&lt;/i&gt;&lt;/template&gt;
         &lt;/custom-element&gt;
 `}
-,   play: async ({canvasElement}) =&gt;
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
-        const canvas = within(canvasElement);
-        await canvas.findByText(MathMLWithinHtmlFile.args!.title as string);
-        const ml = await canvas.findByTestId('ml-test');
-        debugger;
-        expect(ml.firstElementChild.localName).toEqual('mrow');
+        const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
+<span class="cstat-no" title="statement not covered" >        await canvas.findByText(MathMLWithinHtmlFile.args!.title as string);</span>
+        const ml = <span class="cstat-no" title="statement not covered" >await canvas.findByTestId('ml-test');</span>
+<span class="cstat-no" title="statement not covered" >        expect(ml.firstElementChild.localName).toEqual('mrow');</span>
     },
 };
 &nbsp;
@@ -760,12 +780,12 @@ export const ByIdWithinXsltFile:Story  =
             &lt;template&gt;whole XSLT is  embedded into HTML body&lt;/template&gt;
         &lt;/custom-element&gt;
 `}
-,   play: async ({canvasElement}) =&gt;
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
-        const canvas = within(canvasElement);
-        await canvas.findByText(ByIdWithinXsltFile.args!.title as string);
-        const ml = await canvas.findByTestId('src');
-        expect(ml.textContent).to.include('/html-template.xhtml#embedded-xsl');
+        const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
+<span class="cstat-no" title="statement not covered" >        await canvas.findByText(ByIdWithinXsltFile.args!.title as string);</span>
+        const ml = <span class="cstat-no" title="statement not covered" >await canvas.findByTestId('src');</span>
+<span class="cstat-no" title="statement not covered" >        expect(ml.textContent).to.include('/html-template.xhtml#embedded-xsl');</span>
     },
 };
 export const MissingIdWithinXsltFile:Story  =
@@ -774,13 +794,13 @@ export const MissingIdWithinXsltFile:Story  =
         &lt;template&gt;&lt;i data-testid="no-id"&gt;element with id=none is missing in template&lt;/i&gt;&lt;/template&gt;
     &lt;/custom-element&gt;
 `}
-,   play: async ({canvasElement}) =&gt;
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
-        const canvas = within(canvasElement);
-        await canvas.findByText(MissingIdWithinXsltFile.args!.title as string);
-        await sleep(100);
-        const ml = await canvas.findByTestId('no-id');
-        expect(ml.textContent).to.include('element with id=none is missing in template');
+        const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
+<span class="cstat-no" title="statement not covered" >        await canvas.findByText(MissingIdWithinXsltFile.args!.title as string);</span>
+<span class="cstat-no" title="statement not covered" >        await sleep(100);</span>
+        const ml = <span class="cstat-no" title="statement not covered" >await canvas.findByTestId('no-id');</span>
+<span class="cstat-no" title="statement not covered" >        expect(ml.textContent).to.include('element with id=none is missing in template');</span>
     },
 };
 export const EmbeddingInAnotherFile:Story  =
@@ -789,15 +809,25 @@ export const EmbeddingInAnotherFile:Story  =
         loading from embed-1.html ...
     &lt;/custom-element&gt;
 `}
-,   play: async ({canvasElement}) =&gt;
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
-        const canvas = within(canvasElement);
-        await canvas.findByText(EmbeddingInAnotherFile.args!.title as string);
-        await sleep(100);
-        expect(await canvas.findByTestId('wave')).toBeInTheDocument();
-        expect(canvas.getByTestId('wave').innerHTML).toEqual('🖖');
+        const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
+<span class="cstat-no" title="statement not covered" >        await canvas.findByText(EmbeddingInAnotherFile.args!.title as string);</span>
+<span class="cstat-no" title="statement not covered" >        await sleep(100);</span>
+<span class="cstat-no" title="statement not covered" >        expect(await canvas.findByTestId('wave')).toBeInTheDocument();</span>
+<span class="cstat-no" title="statement not covered" >        expect(canvas.getByTestId('wave').innerHTML).toEqual('🖖');</span>
     },
 };
+&nbsp;
+/* istanbul ignore else -- @preserve */
+if(  'test' === import.meta.env.MODE &amp;&amp;
+    !import.meta.url.includes('skiptest') )
+{
+    const mod = await import('./external-template.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () =&gt; testStoryBook( mod, meta ) );
+}
 &nbsp;</pre></td></tr></table></pre>
                 <div class='push'></div><!-- for sticky footer -->
@@ -805,7 +835,7 @@ export const EmbeddingInAnotherFile:Story  =
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-05-13T06:00:45.582Z
+                at 2024-06-27T03:24:38.495Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/stories/form.test.stories.ts/coverage.svg ADDED Viewed

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 140 32" height="20px" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        .heavy { font: bold 16px sans-serif; fill:white; }
+        .percent { font: bold 16px monotype; fill: white; }
+    </style>
+    <rect width="140" height="32" fill="#473" rx="4"/>
+    <rect width="88" height="32" fill="#534" rx="4"/>
+    <text x="8" y="21" class="heavy">coverage</text>
+    <text x="94" y="22" class="percent">28.57%</text>
+</svg>