@epa-wg/custom-element-dist 0.0.26 → 0.0.27

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

@@ -268,7 +268,9 @@
 <a name='L203'></a><a href='#L203'>203</a>
 <a name='L204'></a><a href='#L204'>204</a>
 <a name='L205'></a><a href='#L205'>205</a>
-<a name='L206'></a><a href='#L206'>206</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L206'></a><a href='#L206'>206</a>
+<a name='L207'></a><a href='#L207'>207</a>
+<a name='L208'></a><a href='#L208'>208</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>
@@ -418,8 +420,10 @@
 <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-no">&nbsp;</span>
 <span class="cline-any cline-no">&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>
@@ -476,7 +480,7 @@
 <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, userEvent} from '@storybook/test';
+import {expect, within, userEvent, fireEvent} from '@storybook/test';
 &nbsp;
 import '../custom-element/custom-element.js';
 import {
@@ -598,16 +602,16 @@ export const OrderPreservingOn2ndTransform:Story  =
     &lt;p&gt;IF condition content should be displayed in place where it is defined (not shifted down on the parent children)&lt;/p&gt;
     &lt;custom-element&gt;
         &lt;form slice="f1"&gt;
-            &lt;label&gt;
-                &lt;input type="checkbox"  name="c1" data-testid="cb1"/&gt;
+            &lt;label data-testid="cb1"&gt;
+                &lt;input type="checkbox"  name="c1" /&gt;
                 click to display #1 bellow
             &lt;/label&gt;
             &lt;br data-testid="beforeC1"/&gt;
             &lt;if test="//c1"&gt;
                 &lt;p data-testid="isC1"&gt;#1&lt;/p&gt;
             &lt;/if&gt;
-            &lt;label&gt;
-                &lt;input type="checkbox"  name="c2" data-testid="cb2"/&gt;
+            &lt;label data-testid="cb2"&gt;
+                &lt;input type="checkbox"  name="c2" /&gt;
                 click to display #2 bellow
             &lt;/label&gt;
             &lt;br data-testid="beforeC2"/&gt;
@@ -623,9 +627,11 @@ export const OrderPreservingOn2ndTransform:Story  =
         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>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >        await userEvent.click(canvas.getByTestId('cb1'));</span>
+        // userEvent breaks under FF in vitest, fireEvent works
+<span class="cstat-no" title="statement not covered" >        await fireEvent.click(await canvas.findByTestId('cb1'));</span>
 <span class="cstat-no" title="statement not covered" >        await expect(await canvas.findByText('#1')).toBeInTheDocument();</span>
-<span class="cstat-no" title="statement not covered" >        await userEvent.click(canvas.getByTestId('cb2'));</span>
+&nbsp;
+<span class="cstat-no" title="statement not covered" >        await fireEvent.click(canvas.getByTestId('cb2'));</span>
 <span class="cstat-no" title="statement not covered" >        await expect(await canvas.findByText('#2')).toBeInTheDocument();</span>
 <span class="cstat-no" title="statement not covered" >        await expect(canvas.getByTestId("beforeC1").nextElementSibling).toEqual(canvas.getByTestId("isC1"))</span>
     },
@@ -685,7 +691,7 @@ if(  'test' === import.meta.env.MODE &amp;&amp;
             <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-09-01T19:14:49.300Z
+                at 2024-09-11T14:44:32.203Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -23,9 +23,9 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">24.41% </span>
+                <span class="strong">24.7% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>21/86</span>
+                <span class='fraction'>21/85</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">24.09% </span>
+                <span class="strong">24.39% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>20/83</span>
+                <span class='fraction'>20/82</span>
             </div>
         
             
@@ -321,8 +321,7 @@
 <a name='L256'></a><a href='#L256'>256</a>
 <a name='L257'></a><a href='#L257'>257</a>
 <a name='L258'></a><a href='#L258'>258</a>
-<a name='L259'></a><a href='#L259'>259</a>
-<a name='L260'></a><a href='#L260'>260</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L259'></a><a href='#L259'>259</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>
@@ -441,7 +440,6 @@
 <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>
@@ -698,9 +696,8 @@ export const ExternalXsltFile:Story  =
 <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>
+<span class="cstat-no" title="statement not covered" >        await expect(await canvas.findByTestId('data-fruit')).toHaveTextContent('🍌');</span>
+<span class="cstat-no" title="statement not covered" >        await expect(await canvas.findByTestId('data-smile')).toHaveTextContent('👼');</span>
     },
 };
 &nbsp;
@@ -847,7 +844,7 @@ if(  'test' === import.meta.env.MODE &amp;&amp;
             <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-09-01T19:14:49.300Z
+                at 2024-09-11T14:44:32.203Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/stories/form.test.stories.ts.html

@@ -640,7 +640,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-09-01T19:14:49.300Z
+                at 2024-09-11T14:44:32.203Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/stories/http-request.stories.ts.html

@@ -802,7 +802,7 @@ from <code>${url}</code>
             <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-09-01T19:14:49.300Z
+                at 2024-09-11T14:44:32.203Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/stories/index.html

@@ -23,9 +23,9 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">28.15% </span>
+                <span class="strong">28.42% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>252/895</span>
+                <span class='fraction'>255/897</span>
             </div>
         
             
@@ -37,16 +37,16 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">32.21% </span>
+                <span class="strong">32.43% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>48/149</span>
+                <span class='fraction'>48/148</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">27.61% </span>
+                <span class="strong">27.87% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>232/840</span>
+                <span class='fraction'>235/843</span>
             </div>
         
             
@@ -80,17 +80,17 @@
 </thead>
 <tbody><tr>
 	<td class="file low" data-value="attributes.test.stories.ts"><a href="attributes.test.stories.ts.html">attributes.test.stories.ts</a></td>
-	<td data-value="25.53" class="pic low">
-	<div class="chart"><div class="cover-fill" style="width: 25%"></div><div class="cover-empty" style="width: 75%"></div></div>
+	<td data-value="26.08" class="pic low">
+	<div class="chart"><div class="cover-fill" style="width: 26%"></div><div class="cover-empty" style="width: 74%"></div></div>
 	</td>
-	<td data-value="25.53" class="pct low">25.53%</td>
-	<td data-value="47" class="abs low">12/47</td>
+	<td data-value="26.08" class="pct low">26.08%</td>
+	<td data-value="46" class="abs low">12/46</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="3" class="abs high">3/3</td>
 	<td data-value="20" class="pct low">20%</td>
 	<td data-value="10" class="abs low">2/10</td>
-	<td data-value="26.19" class="pct low">26.19%</td>
-	<td data-value="42" class="abs low">11/42</td>
+	<td data-value="26.82" class="pct low">26.82%</td>
+	<td data-value="41" class="abs low">11/41</td>
 	</tr>
 
 <tr>
@@ -125,17 +125,17 @@
 
 <tr>
 	<td class="file low" data-value="external-template.test.stories.ts"><a href="external-template.test.stories.ts.html">external-template.test.stories.ts</a></td>
-	<td data-value="24.41" class="pic low">
+	<td data-value="24.7" class="pic low">
 	<div class="chart"><div class="cover-fill" style="width: 24%"></div><div class="cover-empty" style="width: 76%"></div></div>
 	</td>
-	<td data-value="24.41" class="pct low">24.41%</td>
-	<td data-value="86" class="abs low">21/86</td>
+	<td data-value="24.7" class="pct low">24.7%</td>
+	<td data-value="85" class="abs low">21/85</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="3" class="abs high">3/3</td>
 	<td data-value="11.76" class="pct low">11.76%</td>
 	<td data-value="17" class="abs low">2/17</td>
-	<td data-value="24.09" class="pct low">24.09%</td>
-	<td data-value="83" class="abs low">20/83</td>
+	<td data-value="24.39" class="pct low">24.39%</td>
+	<td data-value="82" class="abs low">20/82</td>
 	</tr>
 
 <tr>
@@ -170,17 +170,17 @@
 
 <tr>
 	<td class="file low" data-value="local-storage.test.stories.ts"><a href="local-storage.test.stories.ts.html">local-storage.test.stories.ts</a></td>
-	<td data-value="6.06" class="pic low">
-	<div class="chart"><div class="cover-fill" style="width: 6%"></div><div class="cover-empty" style="width: 94%"></div></div>
+	<td data-value="7.23" class="pic low">
+	<div class="chart"><div class="cover-fill" style="width: 7%"></div><div class="cover-empty" style="width: 93%"></div></div>
 	</td>
-	<td data-value="6.06" class="pct low">6.06%</td>
-	<td data-value="231" class="abs low">14/231</td>
+	<td data-value="7.23" class="pct low">7.23%</td>
+	<td data-value="235" class="abs low">17/235</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="7" class="abs high">7/7</td>
-	<td data-value="12.5" class="pct low">12.5%</td>
-	<td data-value="16" class="abs low">2/16</td>
-	<td data-value="5.88" class="pct low">5.88%</td>
-	<td data-value="221" class="abs low">13/221</td>
+	<td data-value="13.33" class="pct low">13.33%</td>
+	<td data-value="15" class="abs low">2/15</td>
+	<td data-value="7.07" class="pct low">7.07%</td>
+	<td data-value="226" class="abs low">16/226</td>
 	</tr>
 
 <tr>
@@ -296,7 +296,7 @@
             <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-09-01T19:14:49.300Z
+                at 2024-09-11T14:44:32.203Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/stories/local-storage.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">5.88%</text>
+    <text x="94" y="22" class="percent">7.07%</text>
 </svg>