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

package/src/stories/attributes.test.stories.ts

@@ -50,10 +50,9 @@ export const AttributeDefaults:Story  =
         const canvas = within(canvasElement)
         , code = async (id) => (await canvas.findByTestId(id)).textContent.trim();
 
-        await sleep(20)
-        expect( await code('p1') ).toEqual('default_P1' );
-        expect( await code('p2') ).toEqual('always_p2'  );
-        expect( await code('p3') ).toEqual('def_P3'     );
+        expect( await await canvas.findByTestId('p1') ).toHaveTextContent('default_P1' );
+        expect( await await canvas.findByTestId('p2') ).toHaveTextContent('always_p2'  );
+        expect( await await canvas.findByTestId('p3') ).toHaveTextContent('def_P3'     );
     },
 };
 
@@ -123,7 +122,6 @@ export const InstanceAttributes:Story  =
         const titleText = AttributeDefaults.args!.title as string;
         const canvas = within(canvasElement)
         , code = async (id) => (await canvas.findByTestId(id)).textContent.trim();
-debugger;
         await sleep(20)
         expect( await code('p1') ).toEqual('123' );
         expect( await code('p2') ).toEqual('always_p2'  );

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

@@ -1,7 +1,7 @@
 // noinspection DuplicatedCode
 
 import type { StoryObj }                        from '@storybook/web-components';
-import {expect, getByTestId, within, userEvent} from '@storybook/test';
+import {expect, within, userEvent, fireEvent} from '@storybook/test';
 
 import '../custom-element/custom-element.js';
 import {
@@ -123,16 +123,16 @@ export const OrderPreservingOn2ndTransform:Story  =
     <p>IF condition content should be displayed in place where it is defined (not shifted down on the parent children)</p>
     <custom-element>
         <form slice="f1">
-            <label>
-                <input type="checkbox"  name="c1" data-testid="cb1"/>
+            <label data-testid="cb1">
+                <input type="checkbox"  name="c1" />
                 click to display #1 bellow
             </label>
             <br data-testid="beforeC1"/>
             <if test="//c1">
                 <p data-testid="isC1">#1</p>
             </if>
-            <label>
-                <input type="checkbox"  name="c2" data-testid="cb2"/>
+            <label data-testid="cb2">
+                <input type="checkbox"  name="c2" />
                 click to display #2 bellow
             </label>
             <br data-testid="beforeC2"/>
@@ -148,9 +148,11 @@ export const OrderPreservingOn2ndTransform:Story  =
         const canvas = within(canvasElement);
         await canvas.findByText(titleText);
 
-        await userEvent.click(canvas.getByTestId('cb1'));
+        // userEvent breaks under FF in vitest, fireEvent works
+        await fireEvent.click(await canvas.findByTestId('cb1'));
         await expect(await canvas.findByText('#1')).toBeInTheDocument();
-        await userEvent.click(canvas.getByTestId('cb2'));
+
+        await fireEvent.click(canvas.getByTestId('cb2'));
         await expect(await canvas.findByText('#2')).toBeInTheDocument();
         await expect(canvas.getByTestId("beforeC1").nextElementSibling).toEqual(canvas.getByTestId("isC1"))
     },

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

@@ -86,11 +86,15 @@ export const ExternalSvg:Story  =
     {
         const canvas = within(canvasElement);
         await canvas.findByText(ExternalSvg.args!.title as string);
+
+        await expect(canvas.getByText('inline DCE loading from SVG ...')).toBeInTheDocument();
+
+        // needs separate test
+        // await expect( await canvas.findByText('loading from SVG ...')).toBeInTheDocument();
+
         expect(canvasElement.querySelector('[src="confused.svg"]').innerHTML).to.include('loading from SVG ...');
-        await sleep(100);
-        expect(canvasElement.querySelector('dce-external').innerHTML).to.include('<svg');
-        expect(canvasElement.querySelector('[src="no.svg"]').innerHTML).to.include('Vitest Browser Tester');
-        // "fallback for missing image" is not shown in test as test does not return 404, see test on 404 instead
+        await expect(await canvas.findByText('fallback for missing image')).toBeInTheDocument();
+        await expect(await canvas.findByTitle('Confused')).toBeInTheDocument();
     },
 };
 
@@ -111,9 +115,8 @@ export const ExternalXsltFile:Story  =
         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('👼');
+        await expect(await canvas.findByTestId('data-fruit')).toHaveTextContent('🍌');
+        await expect(await canvas.findByTestId('data-smile')).toHaveTextContent('👼');
     },
 };
 
@@ -238,9 +241,9 @@ export const EmbeddingInAnotherFile:Story  =
     {
         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('🖖');
+        await sleep(1);
+        expect(await canvas.findByText('embed-1.html')).toBeInTheDocument();
+        expect(await canvas.findByText('🖖')).toBeInTheDocument();
     },
 };
 

package/src/stories/local-storage.test.stories.ts

@@ -1,10 +1,11 @@
 // noinspection DuplicatedCode
 
 import type { StoryObj }             from '@storybook/web-components';
-import {expect, getByTestId, within} from '@storybook/test';
+import {expect, userEvent, within} from '@storybook/test';
 
 import '../custom-element/custom-element.js';
 import '../custom-element/local-storage.js';
+import {localStorage_clear, localStorage_removeItem, localStorageSetItem} from "../custom-element";
 
 type TProps = { title: string; slice: string; key: string; value:string; live:string; body:string};
 const defs: TProps =
@@ -50,41 +51,47 @@ const meta =
 
 export default meta;
 
+window['localStorageSetItem'] = localStorageSetItem;
+window['localStorage_clear'] = localStorage_clear;
+window['localStorage_removeItem'] = localStorage_removeItem;
+
 export const Demo:Story  =
 {   args : {title: 'live value', live:'live', body:`
     <input placeholder="value for localStorage" id="textinput"
         slice="${defs.slice}"
         value="{ //${defs.slice} ?? '${ defs.value }' }"/>
-    <button onclick="localStorage.setItem('${defs.key}',textinput.value  )">set</button>
-    <button onclick="localStorage.setItem('${defs.key}','text value'  )">text value</button>
-    <button onclick="localStorage.setItem('${defs.key}','another text')">another text</button>
-    <button onclick="localStorage.removeItem('${defs.key}'            )">set blank</button>
+    <button onclick="localStorageSetItem('${defs.key}',textinput.value  )">set</button>
+    <button onclick="localStorageSetItem('${defs.key}','text value'  )">text value</button>
+    <button onclick="localStorageSetItem('${defs.key}','another text')">another text</button>
+    <button onclick="localStorage_removeItem('${defs.key}'            )">set blank</button>
 `}
 ,   play: async ({canvasElement}) =>
     {
+        localStorage_clear();
         const canvas = within(canvasElement);
         await canvas.findByText(Demo.args!.title as string);
         const val = ()=> canvas.getByTestId('slice-value').textContent
-        ,  byText = txt => canvas.getByText(txt);
+        await userEvent.click(await canvas.findByText('set blank'));
+        await expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');
+        await expect( val() ).toEqual('');
 
-        byText('set blank').click();
-        expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');
-        expect( val() ).toEqual('');
-        byText('text value').click();
+        await userEvent.click(canvas.getByText('text value'));
         await sleep(10);
-        expect( val() ).toEqual('text value');
+        await expect(localStorage.getItem(defs.key)).toEqual('text value', 'from localStorage');
+        await expect( val() ).toEqual('text value');
 
         window['textinput'].value = 'textinput.value';
-        byText('set').click();
+
+        await userEvent.click(canvas.getByText('set'));
         await sleep(10);
         expect( val() ).toEqual('textinput.value');
 
-        byText('another text').click();
+        await userEvent.click(canvas.getByText('another text'));
         await sleep(10);
         expect( val() ).toEqual('another text');
 
+        await userEvent.click(canvas.getByText('set blank'));
 
-        byText('set blank').click();
         await sleep(10);
         expect( val() ).toEqual('');
     },
@@ -94,31 +101,32 @@ export const Demo:Story  =
 export const AlwaysOverride:Story  =
 {   args : {title: 'AlwaysOverride', live:'', value:'ABC', body:`
     buttons are changing the localStorage value, but without 'live' attribute slice ^^ from <i>local-storage</i> is not updated<br/>
-    <button onclick="localStorage.setItem('${defs.key}','text value'  )">text value</button>
-    <button onclick="localStorage.removeItem('${defs.key}'            )">set blank</button>
+    <button onclick="localStorageSetItem('${defs.key}','text value')">text value</button>
+    <button onclick="localStorage_removeItem('${defs.key}')">set blank</button>
     `}
 ,   play: async ({canvasElement}) =>
     {
         const canvas = within(canvasElement);
         await canvas.findByText(AlwaysOverride.args!.title as string);
-        const val = ()=> canvas.getByTestId('slice-value').textContent
-        ,  byText = txt => canvas.getByText(txt);
+        const val = ()=> canvas.getByTestId('slice-value').textContent;
+        const click = async (text)=> await userEvent.click( await canvas.findByText(text) );
+        await sleep(10);
 
-        expect(localStorage.getItem(defs.key)).toEqual('ABC', 'from localStorage');
+        await expect( localStorage.getItem(defs.key)).toEqual('ABC');
 
-        byText('set blank').click();
-        expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');
+        await click('set blank')
+        await expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');
         await sleep(10);
-        expect( val() ).toEqual('ABC');
+        await expect( val() ).toEqual('ABC');
 
-        byText('text value').click();
+        await click('text value');
         await sleep(10);
-        expect(localStorage.getItem(defs.key)).toEqual('text value', 'from localStorage');
-        expect( val() ).toEqual('ABC');
+        await expect(localStorage.getItem(defs.key)).toEqual('text value', 'from localStorage');
+        await expect( val() ).toEqual('ABC');
 
-        byText('set blank').click();
+        await click('set blank');
         await sleep(10);
-        expect( val() ).toEqual('ABC');
+        await expect( val() ).toEqual('ABC');
     },
 };
 
@@ -126,15 +134,15 @@ export const FromStorageWithDefault:Story  =
 {   args : {title: 'live value with defaults', live:'', value:'ABC', body:`
 
     <local-storage key="attr2Key" slice="attr2-key" type="text" live="live" slice-value="@value ?? 'DEF2'"></local-storage>
-    <button onclick="localStorage.removeItem('attr2Key')">clear key</button>
-    <button onclick="localStorage.setItem('attr2Key','attr2Key value')">update attr2-key value</button>
+    <button onclick="localStorage_removeItem('attr2Key')">clear key</button>
+    <button onclick="localStorageSetItem('attr2Key','attr2Key value')">update attr2-key value</button>
     //attr2-key: <code data-testid="key2-value">{//attr2-key}</code><br/>
 
     <local-storage key="attr3Key" slice="attr3-key" type="text" live="live" slice-value="@value ?? 'DEF3'"></local-storage>
-    <button onclick="localStorage.removeItem('attr3Key')">clear attr3-key key</button>
-    <button onclick="localStorage.setItem('attr3Key','attr3Key value')">update attr3-key value</button>
+    <button onclick="localStorage_removeItem('attr3Key')">clear attr3-key key</button>
+    <button onclick="localStorageSetItem('attr3Key','attr3Key value')">update attr3-key value</button>
     //attr3-key: <code data-testid="key3-value">{//attr3-key}</code><br/>
-    <button onclick="localStorage.clear()">clear localStorage</button>
+    <button onclick="localStorage_clear()">clear localStorage</button>
     `}
 ,   play: async ({canvasElement}) =>
     {
@@ -177,39 +185,39 @@ export const TypeAttribute:Story  =
                 <local-storage key="jsonKey" slice="json-key" type="json" live="live"></local-storage>
                 <input id="typesinput" placeholder="set value"><button onclick="
                         'textKey,dateKey,timeKey,localDateTimeKey,numberKey,jsonKey'.split(',')
-                            .map( k=> localStorage.setItem(k, typesinput.value) )
+                            .map( k=> localStorageSetItem(k, typesinput.value) )
                     "> set to all</button><br>
                 <hr>
                 text-key:
-                    <button onclick="localStorage.setItem('textKey', 'ABC'  )">ABC</button>
+                    <button onclick="localStorageSetItem('textKey', 'ABC'  )">ABC</button>
                     <code data-testid="text-key">{//text-key       }</code><br>
                 date-key:
-                    <button onclick="localStorage.setItem('dateKey', '2024-04-20T03:58:42.131Z')">2024-04-21T03:58:42.131Z           </button>
-                    <button onclick="localStorage.setItem('dateKey', new Date(Date.now()).toISOString())">now                                </button>
-                    <button onclick="localStorage.setItem('dateKey', 'ABC'  )">date ABC - invalid                 </button>
+                    <button onclick="localStorageSetItem('dateKey', '2024-04-20T03:58:42.131Z')">2024-04-21T03:58:42.131Z           </button>
+                    <button onclick="localStorageSetItem('dateKey', new Date(Date.now()).toISOString())">now                                </button>
+                    <button onclick="localStorageSetItem('dateKey', 'ABC'  )">date ABC - invalid                 </button>
                     <code data-testid="date-key">{//date-key       }</code><br>
                 time-key:
-                    <button onclick="localStorage.setItem('timeKey', '13:30')">13:30                              </button>
+                    <button onclick="localStorageSetItem('timeKey', '13:30')">13:30                              </button>
                     <code data-testid="time-key">{//time-key       }</code><br>
                 local-date-time:
-                    <button onclick="localStorage.setItem('localDateTimeKey', '1977-04-01T14:00:30')">1977-04-01T14:00:30 - local       </button>
+                    <button onclick="localStorageSetItem('localDateTimeKey', '1977-04-01T14:00:30')">1977-04-01T14:00:30 - local       </button>
                     <code data-testid="local-date-time">{//local-date-time}</code><br>
                 number-key:
-                    <button onclick="localStorage.setItem('numberKey', '2024'       )">2024 - number                      </button>
-                    <button onclick="localStorage.setItem('numberKey', '24'         )">24   - number                      </button>
-                    <button onclick="localStorage.setItem('numberKey', '1.23456e+5' )">1.23456e+5                         </button>
-                    <button onclick="localStorage.setItem('numberKey', '0001'       )">0001                               </button>
-                    <button onclick="localStorage.setItem('numberKey', '000'        )">000                                </button>
-                    <button onclick="localStorage.setItem('numberKey', '0'          )">0                                  </button>
-                    <button onclick="localStorage.setItem('numberKey', 'ABC'        )">ABC - invalid, NaN                 </button>
+                    <button onclick="localStorageSetItem('numberKey', '2024'       )">2024 - number                      </button>
+                    <button onclick="localStorageSetItem('numberKey', '24'         )">24   - number                      </button>
+                    <button onclick="localStorageSetItem('numberKey', '1.23456e+5' )">1.23456e+5                         </button>
+                    <button onclick="localStorageSetItem('numberKey', '0001'       )">0001                               </button>
+                    <button onclick="localStorageSetItem('numberKey', '000'        )">000                                </button>
+                    <button onclick="localStorageSetItem('numberKey', '0'          )">0                                  </button>
+                    <button onclick="localStorageSetItem('numberKey', 'ABC'        )">ABC - invalid, NaN                 </button>
                     <code data-testid="number-key">{//number-key     }</code> <br>
                 <fieldset>
                     <legend>json-key: </legend>
 
-                    <button onclick="localStorage.setItem('jsonKey', JSON.stringify('ABC'))">'ABC'   - string  </button>
-                    <button onclick="localStorage.setItem('jsonKey', JSON.stringify(12.345))">12.345  - number  </button>
-                    <button onclick="localStorage.setItem('jsonKey', JSON.stringify(window.JsonSample) )">a:1,b:'B'  -json  </button>
-                    <button onclick="localStorage.setItem('jsonKey', 'ABC'  )">ABC - invalid     </button><br>
+                    <button onclick="localStorageSetItem('jsonKey', JSON.stringify('ABC'))">'ABC'   - string  </button>
+                    <button onclick="localStorageSetItem('jsonKey', JSON.stringify(12.345))">12.345  - number  </button>
+                    <button onclick="localStorageSetItem('jsonKey', JSON.stringify(window.JsonSample) )">a:1,b:'B'  -json  </button>
+                    <button onclick="localStorageSetItem('jsonKey', 'ABC'  )">ABC - invalid     </button><br>
                     json-key:<code data-testid="json-key"><xsl:apply-templates select="//json-key/value/@*|//json-key/text()|//json-key/value/text()" mode="json"></xsl:apply-templates></code>
                 </fieldset>
                 <xsl:template mode="json" match="*|@*">
@@ -224,8 +232,8 @@ export const TypeAttribute:Story  =
         await canvas.findByText(TypeAttribute.args!.title as string);
         const byText = txt => canvas.getByText(txt)
         ,        val = testId => canvas.getByTestId(testId).textContent
-        ,  expectVal = (key,value) => { expect(val( key )).toEqual( value, key ) };
-        localStorage.clear(); // cleanup before test
+        ,  expectVal = (key,value) => { expect(val( key ).trim()).toEqual( value, key ) };
+        localStorage_clear(); // cleanup before test
         await sleep(10);
 
         expectVal('text-key'       ,'');
@@ -385,7 +393,7 @@ export const TypeAttribute:Story  =
         expectVal('time-key'       ,''                  );
         expectVal('local-date-time',''                  );
         expectVal('number-key'     ,'NaN'               );
-        expectVal('json-key'       ,'\na : 1b : B'      );
+        expectVal('json-key'       ,'a : 1b : B'      );
     },
 };
 

package/src/stories/module-url.test.stories.ts

@@ -0,0 +1,183 @@
+// noinspection DuplicatedCode
+
+// importmap is located at .storybook/preview-head.html
+// for vitest wrap `pathe.resolve` method to capture /tester/tester.html and redirect to its clone with ^^ injected
+//      as in vite.config.js
+// test requires bin/vitest/vitest-browser-importmaps.mjs to inject importmap into tester.html
+// the relative path prefix in vitest is `../../..`
+
+import type { StoryObj }             from '@storybook/web-components';
+import {expect, getByTestId, within} from '@storybook/test';
+
+import '../custom-element/custom-element.js';
+import '../custom-element/module-url.js';
+import {Demo, SrcAttribute}          from './location-element.test.stories';
+
+type TProps = { title: string; body:string};
+
+type Story = StoryObj<TProps>;
+function sleep(ms: number) {    return new Promise((resolve) => setTimeout(resolve, ms)); }
+
+function render(args: TProps)
+{
+    const {title,  body} = args;
+    return `
+        <fieldset>
+            <legend>${ title }</legend>
+            ${ body }
+        </fieldset>
+  `;
+}
+const meta =
+{   title:      'module-url'
+,   render
+};
+
+export default meta;
+
+// for StoryBook './demo/embed-1.html' is sufficient as current page is on root level
+// vitest page needs 3 levels up
+
+export const RelativeToPagePath:Story  =
+{   args : {title: '1. relative to page path', body:`
+    <custom-element>
+        <a href="../../../demo/embed-1.html">
+            <custom-element src="../../../demo/embed-1.html"></custom-element>
+        </a>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await canvas.findByText(RelativeToPagePath.args!.title as string);
+
+        await expect(await canvas.findByText('🖖')).toBeInTheDocument();
+        await expect(await canvas.findByText('embed-1.html')).toBeInTheDocument();
+    },
+};
+
+
+export const ModuleBySymbolicName:Story  =
+{   args : {title: '2. module by symbolic name', body:`
+    <custom-element>
+            <template>
+                <module-url slice="lib-url" src="embed-lib"></module-url>
+                <if test="//lib-url/@error">
+                    <p>error: <b>{//lib-url/@error}</b></p>
+                </if>
+                check the link:
+                <a href="{//lib-url}">
+                    <custom-element src="embed-lib#embed-lib-component">
+                        failed to load
+                    </custom-element>
+                </a>
+            </template>
+        </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const p = import.meta.resolve('embed-lib');
+        const canvas = within(canvasElement);
+        await canvas.findByText(ModuleBySymbolicName.args!.title as string);
+
+        await expect(await canvas.findByText('check the link:')).toBeInTheDocument();
+        await expect(await canvas.findByText('👋 from embed-lib-component')).toBeInTheDocument();
+    },
+};
+
+export const MissingImportmapEntry:Story  =
+{   args : {title: '3. module by symbolic name with missing importmap entry', body:`
+    <custom-element>
+        <template>
+            <module-url slice="lib-url" src="fakedemo-lib/embed-lib.html"></module-url>
+            <if test="//lib-url/@error">
+                <p>error: <b>{//lib-url/@error}</b></p>
+            </if>
+            the link is broken:
+            <a href="{//lib-url}">
+                <custom-element src="fakedemo-lib/embed-lib.html#embed-lib-component">
+                    failed to load
+                </custom-element>
+            </a>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await canvas.findByText(MissingImportmapEntry.args!.title as string);
+
+        await expect(await canvas.findByText('error:')).toBeInTheDocument();
+        await expect(await canvas.findByText('failed to load')).toBeInTheDocument();
+    },
+};
+
+
+export const ModuleByName:Story  =
+{   args : {title: '4. module path by symbolic name', body:`
+    <custom-element>
+        <template>
+            <module-url slice="lib-url" src="lib-root/embed-lib.html#embed-relative-hash"></module-url>
+            <module-url slice="img-url" src="lib-root/Smiley.svg"></module-url>
+            <if test="//lib-url/@error">
+                <p>error: <b>{//lib-url/@error}</b></p>
+            </if>
+            check the link:
+            <a href="{//lib-url}"> lib-root/embed-lib.html#embed-relative-hash <img src="{//img-url}" alt=""/></a>
+            <custom-element src="lib-root/embed-lib.html#embed-relative-hash">
+                failed to load
+            </custom-element>
+
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await canvas.findByText(ModuleByName.args!.title as string);
+        await expect(await canvas.findByText('👌 from embed-relative-hash invoking')).toBeInTheDocument();
+        await expect(await canvas.findByText('lib-root/embed-lib.html#embed-relative-hash')).toBeInTheDocument();
+        await expect(await canvas.findByText('#embed-lib-component')).toBeInTheDocument();
+    },
+};
+
+
+export const HashWithinLib:Story  =
+{   args : {title: '5. module path by symbolic name to internal link within lib', body:`
+    <custom-element>
+        <template>
+            <module-url slice="lib-url" src="lib-root/embed-lib.html#embed-relative-file"></module-url>
+            <if test="//lib-url/@error">
+                <p>error: <b>{//lib-url/@error}</b></p>
+            </if>
+            check the link:
+            <a href="{//lib-url}"> lib-root/embed-lib.html#embed-relative-file </a>
+            <custom-element src="lib-root/embed-lib.html#embed-relative-file">
+                failed to load
+            </custom-element>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await canvas.findByText(HashWithinLib.args!.title as string);
+
+        await expect(await canvas.findByText('lib-root/embed-lib.html#embed-relative-file')).toBeInTheDocument();
+        await expect(await canvas.findByText('👍 from embed-relative-file invoking')).toBeInTheDocument();
+        await expect(await canvas.findByText('../embed-1.html')).toBeInTheDocument();
+        await expect(await canvas.findByText('embed-1.html')).toBeInTheDocument();
+        await expect(await canvas.findByText('🖖')).toBeInTheDocument();
+    },
+};
+
+
+/* istanbul ignore else -- @preserve */
+if(  'test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest') )
+{
+    const mod = await import('./module-url.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () => testStoryBook( mod, meta ) );
+}

package/src/stories/version-select.test.stories.ts

@@ -5,6 +5,7 @@ import {expect, within} from '@storybook/test';
 
 import '../custom-element/custom-element.js';
 import '../custom-element/http-request.js';
+import '../custom-element/location-element.js';
 
 type TProps = { title: string; body:string};
 
@@ -23,7 +24,7 @@ function render(args: TProps)
   `;
 }
 const meta =
-{        title: 'site/VersionSelect'
+{        title: 'site'
 // ,         tags: ['autodocs']
 ,       render
 };
@@ -35,18 +36,42 @@ export const VersionsSelect:Story  =
     <p>Select the version of custom-element StoryBook.</p>
     <custom-element >
         <template>
+            <variable name="url" select="//window-location/value/@href"></variable>
+            <variable name="current-version" >0{
+                substring-before(substring-after(substring($url, string-length(substring-before($url, '/')) - string-length(substring-before(substring-before($url, '/'), '@0')) + 2), '@0'), '/')
+            }</variable>
+            <location-element slice="window-location" live>
+                <xsl:if test=" not(//selected-version = $current-version ) and not(//selected-version = '')  ">
+                    <attribute name="src">{ concat( substring-before($url, $current-version), 
+                                                    //selected-version, 
+                                                    substring-after($url, $current-version) ) }</attribute>
+                    <attribute name="method">location.href</attribute>
+                </if>
+            </location-element>
             <http-request 
                 url="https://registry.npmjs.org/@epa-wg/custom-element-dist" 
                 method="GET" 
                 header-accept="application/json"
-                slice="page" ></http-request>
-            <xhtml:select>
-                <for-each select="//versions/*">
-                    <option>
-                        {./@version} 
-                    </option>
-                </for-each>
-            </xhtml:select>
+                slice="versions-ajax" ></http-request>
+                    
+            <label>version: 
+                <xhtml:select slice="selected-version" autocomplete="off" name="version">
+                    <for-each select="//versions/*">
+                        <option value="{./@version}">
+                            <variable name="item-version">{./@version}</variable>
+                            { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
+                        </option>
+                    </for-each>
+                    <for-each select="//versions/*">
+                        <if test="./@version = $current-version">
+                            <option selected value="{./@version}">
+                                <variable name="item-version">{./@version}</variable>
+                                { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
+                            </option>    
+                        </if>
+                    </for-each>
+                </xhtml:select>
+            </label>
         </template>
     </custom-element>
     <dce-link id="dce1"></dce-link>
@@ -57,10 +82,11 @@ export const VersionsSelect:Story  =
         const canvas = within(canvasElement)
         , code = async (id) => (await canvas.findByTestId(id)).textContent.trim();
 
+        window.location.hash = '#@epa-wg/custom-element-dist@0.0.24/storybook-static/index.html'
         await sleep(20)
-        expect( await code('p1') ).toEqual('default_P1' );
-        expect( await code('p2') ).toEqual('always_p2'  );
-        expect( await code('p3') ).toEqual('def_P3'     );
+        // expect( await code('p1') ).toEqual('default_P1' );
+        // expect( await code('p2') ).toEqual('always_p2'  );
+        // expect( await code('p3') ).toEqual('def_P3'     );
     },
 };
 

package/src/sum.test.ts

@@ -1,6 +1,6 @@
-import { expect, test } from 'vitest'
-import { sum } from './sum'
-
-test('adds 1 + 2 to equal 3', () => {
-  expect(sum(1, 2)).toBe(3)
+import { expect, test } from 'vitest'
+import { sum } from './sum'
+
+test('adds 1 + 2 to equal 3', () => {
+  expect(sum(1, 2)).toBe(3)
 })

package/src/sum.ts

@@ -1,4 +1,4 @@
-// sum.js
-export function sum(a: number, b: number) {
-    return a + b
+// sum.js
+export function sum(a: number, b: number) {
+    return a + b
 }