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

package/coverage/src/stories/dom-merge.test.stories.ts.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">27.5% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>40/40</span>
+                <span class='fraction'>11/40</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>1/1</span>
+                <span class='fraction'>3/3</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">33.33% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>6/6</span>
+                <span class='fraction'>2/6</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">26.31% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>38/38</span>
+                <span class='fraction'>10/38</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>
@@ -209,7 +209,7 @@
 <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">3x</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>
@@ -245,20 +245,20 @@
 <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-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-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>
@@ -296,19 +296,20 @@
 <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-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-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>
@@ -316,7 +317,6 @@
 <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-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -338,7 +338,7 @@ import {
 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)
 {
@@ -372,22 +372,22 @@ export const CharsCountInTextarea:Story  =
         &lt;/form&gt;
     &lt;/custom-element&gt;
 `}
-,   play: async ({canvasElement}) =&gt;
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
-        const titleText = CharsCountInTextarea.args!.title as string;
-        const canvas = within(canvasElement);
-        await canvas.findByText(titleText);
-        await sleep(100);
-        expect(await canvas.findByTestId('textarea-id')).toBeInTheDocument();
-        const textarea = canvas.getByTestId('textarea-id');
-        textarea.value ='';
-        textarea.focus();
-        await userEvent.keyboard(titleText);
-        expect(textarea.value).toEqual(titleText);
-        expect(textarea.value.length).toEqual(titleText.length);
-        canvas.getByTestId('refocus-id').focus();
-        await sleep(10);
-        expect(canvas.getByTestId('counter-id').textContent).toEqual(''+titleText?.length,'counter of symbols');
+        const titleText = <span class="cstat-no" title="statement not covered" >CharsCountInTextarea.args!.title as string;</span>
+        const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
+<span class="cstat-no" title="statement not covered" >        await canvas.findByText(titleText);</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('textarea-id')).toBeInTheDocument();</span>
+        const textarea = <span class="cstat-no" title="statement not covered" >canvas.getByTestId('textarea-id');</span>
+<span class="cstat-no" title="statement not covered" >        textarea.value ='';</span>
+<span class="cstat-no" title="statement not covered" >        textarea.focus();</span>
+<span class="cstat-no" title="statement not covered" >        await userEvent.keyboard(titleText);</span>
+<span class="cstat-no" title="statement not covered" >        expect(textarea.value).toEqual(titleText);</span>
+<span class="cstat-no" title="statement not covered" >        expect(textarea.value.length).toEqual(titleText.length);</span>
+<span class="cstat-no" title="statement not covered" >        canvas.getByTestId('refocus-id').focus();</span>
+<span class="cstat-no" title="statement not covered" >        await sleep(10);</span>
+<span class="cstat-no" title="statement not covered" >        expect(canvas.getByTestId('counter-id').textContent).toEqual(''+titleText?.length,'counter of symbols');</span>
     },
 };
 &nbsp;
@@ -423,32 +423,32 @@ export const WordCountOnType:Story  =
             &lt;/form&gt;
         &lt;/custom-element&gt;
 `}
-,   play: async ({canvasElement}) =&gt;
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
-        const titleText = WordCountOnType.args!.title as string;
-        const canvas = within(canvasElement);
-        await canvas.findByText(titleText);
-        const input = await canvas.findByTestId('input-id');
-        input.value = '';
-        input.focus();
-        expect(input).toBeInTheDocument();
-        await userEvent.keyboard(titleText);
-        await sleep(10);
-        expect(input.value).toEqual(titleText);
-        expect(canvas.getByTestId('chars-id').textContent.trim()).toEqual(''+titleText.length, 'counter of symbols');
-        expect(titleText.split(' ').length).toEqual(6, 'counter of words in text sample');
-        expect(canvas.getByTestId('words-id').textContent.trim()).toEqual('6', 'counter of words in render');
+        const titleText = <span class="cstat-no" title="statement not covered" >WordCountOnType.args!.title as string;</span>
+        const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
+<span class="cstat-no" title="statement not covered" >        await canvas.findByText(titleText);</span>
+        const input = <span class="cstat-no" title="statement not covered" >await canvas.findByTestId('input-id');</span>
+<span class="cstat-no" title="statement not covered" >        input.value = '';</span>
+<span class="cstat-no" title="statement not covered" >        input.focus();</span>
+<span class="cstat-no" title="statement not covered" >        expect(input).toBeInTheDocument();</span>
+<span class="cstat-no" title="statement not covered" >        await userEvent.keyboard(titleText);</span>
+<span class="cstat-no" title="statement not covered" >        await sleep(10);</span>
+<span class="cstat-no" title="statement not covered" >        expect(input.value).toEqual(titleText);</span>
+<span class="cstat-no" title="statement not covered" >        expect(canvas.getByTestId('chars-id').textContent.trim()).toEqual(''+titleText.length, 'counter of symbols');</span>
+<span class="cstat-no" title="statement not covered" >        expect(titleText.split(' ').length).toEqual(6, 'counter of words in text sample');</span>
+<span class="cstat-no" title="statement not covered" >        expect(canvas.getByTestId('words-id').textContent.trim()).toEqual('6', 'counter of words in render');</span>
     },
 };
 &nbsp;
-const TestStories = { CharsCountInTextarea, WordCountOnType };
-&nbsp;
 /* istanbul ignore else -- @preserve */
-if( 'test' === import.meta.env.MODE )
+if(  'test' === import.meta.env.MODE &amp;&amp;
+    !import.meta.url.includes('skiptest') )
 {
-    const {playStories} = await  import('./renderPlay');
-    const {describe} = await import('vitest')
-    describe('slots', () =&gt; playStories( TestStories, meta ) );
+    const mod = await import('./dom-merge.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>
 
@@ -457,7 +457,7 @@ if( 'test' === import.meta.env.MODE )
             <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-06-25T03:55:40.964Z
+                at 2024-06-27T03:24:38.495Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -6,5 +6,5 @@
     <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">100%</text>
+    <text x="94" y="22" class="percent">11.76%</text>
 </svg>