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

package/coverage/src/stories/css.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">34.88% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>43/43</span>
+                <span class='fraction'>15/43</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>3/3</span>
+                <span class='fraction'>5/5</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">28.57% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>7/7</span>
+                <span class='fraction'>2/7</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">33.33% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>42/42</span>
+                <span class='fraction'>14/42</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>
@@ -186,8 +186,7 @@
 <a name='L121'></a><a href='#L121'>121</a>
 <a name='L122'></a><a href='#L122'>122</a>
 <a name='L123'></a><a href='#L123'>123</a>
-<a name='L124'></a><a href='#L124'>124</a>
-<a name='L125'></a><a href='#L125'>125</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L124'></a><a href='#L124'>124</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>
@@ -231,18 +230,18 @@
 <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-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>
@@ -256,16 +255,16 @@
 <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">8x</span>
-<span class="cline-any cline-yes">8x</span>
-<span class="cline-any cline-yes">8x</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-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>
@@ -288,16 +287,16 @@
 <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-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">6x</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-yes">6x</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-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>
@@ -306,7 +305,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>
@@ -354,19 +352,19 @@ export const StyleDoesNotLeak: Story =
     ,    slot: 'text has to be green'
     , payload: '&lt;u&gt;no tags&lt;/u&gt;'
     }
-,   play: async ({canvasElement}) =&gt;
-    {   const canvas = within(canvasElement);
-        const el = await canvas.findByText('text has to be green');
-        const st = getComputedStyle(el);
-        const color = st.getPropertyValue('color');
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
+    {   const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
+        const el = <span class="cstat-no" title="statement not covered" >await canvas.findByText('text has to be green');</span>
+        const st = <span class="cstat-no" title="statement not covered" >getComputedStyle(el);</span>
+        const color = <span class="cstat-no" title="statement not covered" >st.getPropertyValue('color');</span>
         // @ts-ignore
-        expect(color).to.equal('rgb(0, 128, 0)')
-        await expect( el.closest('custom-element')).toBeInTheDocument();
-        const dce = el.closest('custom-element');
-        await expect( dce.xsltString).toContain('&lt;xsl:stylesheet');
-        await expect( dce.dce.localName).toEqual('custom-element');
-        await expect( dce.dce.xsltString).toEqual(dce.xsltString);
-        await expect( dce.dce.xslt.documentElement.tagName ).toEqual('xsl:stylesheet');
+<span class="cstat-no" title="statement not covered" >        expect(color).to.equal('rgb(0, 128, 0)')</span>
+<span class="cstat-no" title="statement not covered" >        await expect( el.closest('custom-element')).toBeInTheDocument();</span>
+        const dce = <span class="cstat-no" title="statement not covered" >el.closest('custom-element');</span>
+<span class="cstat-no" title="statement not covered" >        await expect( dce.xsltString).toContain('&lt;xsl:stylesheet');</span>
+<span class="cstat-no" title="statement not covered" >        await expect( dce.dce.localName).toEqual('custom-element');</span>
+<span class="cstat-no" title="statement not covered" >        await expect( dce.dce.xsltString).toEqual(dce.xsltString);</span>
+<span class="cstat-no" title="statement not covered" >        await expect( dce.dce.xslt.documentElement.tagName ).toEqual('xsl:stylesheet');</span>
     },
 };
 &nbsp;
@@ -378,18 +376,18 @@ export const StyleIn2Instances: Story =
     ,     tag:  'dce-2'
     , payload:  `&lt;u&gt;2 instances:&lt;/u&gt; &lt;dce-2 id="dce21"&gt;&lt;/dce-2&gt; * &lt;dce-2 id="dce22"&gt;&lt;/dce-2&gt;`
     }
-,   play: async ({canvasElement}) =&gt;
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
-        await within(canvasElement).findByText('2 instances:');
-        const color = ( css:string )=&gt;
-        {   const el = canvasElement.querySelector(css);
-            const st =  getComputedStyle( el! );
-            return  st.getPropertyValue('color');
+<span class="cstat-no" title="statement not covered" >        await within(canvasElement).findByText('2 instances:');</span>
+        const color = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >( c</span>ss:string )=&gt;</span>
+        {   const el = <span class="cstat-no" title="statement not covered" >canvasElement.querySelector(css);</span>
+            const st =  <span class="cstat-no" title="statement not covered" >getComputedStyle( el! );</span>
+<span class="cstat-no" title="statement not covered" >            return  st.getPropertyValue('color');</span>
         };
-        expect( color('legend'  )        ).to.not.equal(color('b'));
-        expect( color('legend'  )        ).to.not.equal(color('b'));
-        expect( color('#dce21 u')        ).to    .equal(color('b'));
-        expect( color('#dce22 u')        ).to    .equal(color('b'));
+<span class="cstat-no" title="statement not covered" >        expect( color('legend'  )        ).to.not.equal(color('b'));</span>
+<span class="cstat-no" title="statement not covered" >        expect( color('legend'  )        ).to.not.equal(color('b'));</span>
+<span class="cstat-no" title="statement not covered" >        expect( color('#dce21 u')        ).to    .equal(color('b'));</span>
+<span class="cstat-no" title="statement not covered" >        expect( color('#dce22 u')        ).to    .equal(color('b'));</span>
     },
 };
 &nbsp;
@@ -410,30 +408,29 @@ export const OverrideInPayload: Story =
                 should be ${GREEN}: 
                 &lt;dce-3 id="dce31"&gt;green&lt;/dce-3&gt;   `
     }
-,   play: async ({canvasElement}) =&gt;
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
-        await within(canvasElement).findByText('should be');
+<span class="cstat-no" title="statement not covered" >        await within(canvasElement).findByText('should be');</span>
 &nbsp;
-        const color = ( css:string )=&gt;
-        {   const el = canvasElement.querySelector(css);
-            const st =  getComputedStyle( el! );
-            return  st.getPropertyValue('color');
+        const color = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >( c</span>ss:string )=&gt;</span>
+        {   const el = <span class="cstat-no" title="statement not covered" >canvasElement.querySelector(css);</span>
+            const st =  <span class="cstat-no" title="statement not covered" >getComputedStyle( el! );</span>
+<span class="cstat-no" title="statement not covered" >            return  st.getPropertyValue('color');</span>
         };
-        expect( color('legend'  )        ).to.not.equal(color('b'));
-        expect( color('#dce31 u')        ).to    .equal(color('b'));
-        expect( color('#dce32 u')        ).to    .equal(color('i'));
+<span class="cstat-no" title="statement not covered" >        expect( color('legend'  )        ).to.not.equal(color('b'));</span>
+<span class="cstat-no" title="statement not covered" >        expect( color('#dce31 u')        ).to    .equal(color('b'));</span>
+<span class="cstat-no" title="statement not covered" >        expect( color('#dce32 u')        ).to    .equal(color('i'));</span>
     },
 };
 &nbsp;
-&nbsp;
-const TestStories = { StyleDoesNotLeak, StyleIn2Instances, OverrideInPayload };
-&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('./css.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>
 
@@ -442,7 +439,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-07-22T03:09:38.362Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/stories/dom-merge.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">21.05%</text>
 </svg>