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

package/src/stories/{dom-merge.stories.ts → dom-merge.test.stories.ts}

@@ -1,9 +1,16 @@
 // noinspection DuplicatedCode
 
-import type { StoryObj }             from '@storybook/web-components';
+import type { StoryObj }                        from '@storybook/web-components';
 import {expect, getByTestId, within, userEvent} from '@storybook/test';
 
 import '../custom-element/custom-element.js';
+import {
+    ByIdWithinXsltFile, EmbeddingInAnotherFile,
+    ExternalHtmlFile, ExternalHtmlFileInline, ExternalSvg, ExternalXsltFile, HtmlWithinHtmlFile, MathMLWithinHtmlFile,
+    MissingIdWithinXsltFile,
+    NoTag,
+    SvgWithinHtmlFile, TemplateInPage
+} from './external-template.test.stories';
 
 type TProps = { title: string; body:string};
 
@@ -55,7 +62,6 @@ export const CharsCountInTextarea:Story  =
         await userEvent.keyboard(titleText);
         expect(textarea.value).toEqual(titleText);
         expect(textarea.value.length).toEqual(titleText.length);
-        debugger;
         canvas.getByTestId('refocus-id').focus();
         await sleep(10);
         expect(canvas.getByTestId('counter-id').textContent).toEqual(''+titleText?.length,'counter of symbols');
@@ -80,7 +86,7 @@ export const WordCountOnType:Story  =
                         <code data-testid="words-id"
                             >{
                                 string-length(normalize-space(//slice/txt)) -
-                                string-length(translate(normalize-space(//slice/txt), ' ', '')) + 1 
+                                string-length(translate(normalize-space(//slice/txt), ' ', '')) + 1
                             }</code>
                         <!-- The expression first normalizes the string by removing leading and trailing whitespace and
                             collapsing internal whitespace into a single space. It then subtracts the length of the string
@@ -111,3 +117,13 @@ export const WordCountOnType:Story  =
         expect(canvas.getByTestId('words-id').textContent.trim()).toEqual('6', 'counter of words in render');
     },
 };
+
+/* istanbul ignore else -- @preserve */
+if(  'test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest') )
+{
+    const mod = await import('./dom-merge.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () => testStoryBook( mod, meta ) );
+}

package/src/stories/{external-template.stories.ts → external-template.test.stories.ts}

@@ -4,6 +4,7 @@ import type { StoryObj }             from '@storybook/web-components';
 import {expect, getByTestId, within} from '@storybook/test';
 
 import '../custom-element/custom-element.js';
+import {Demo, SrcAttribute}          from './location-element.test.stories';
 
 type TProps = { title: string; body:string};
 
@@ -32,10 +33,10 @@ export const TemplateInPage:Story  =
     <template id="template1">
     <slot>Hello</slot> World!
     </template>
-    
+
     <custom-element tag="dce-internal" src="#template1"></custom-element>
     <!-- no need for loading fallback as the template exists -->
-    
+
     <dce-internal data-testid="slot-override">👋</dce-internal>
     <dce-internal  data-testid="slot-default"></dce-internal>
 `}
@@ -194,7 +195,6 @@ export const MathMLWithinHtmlFile:Story  =
         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');
     },
 };
@@ -243,3 +243,13 @@ export const EmbeddingInAnotherFile:Story  =
         expect(canvas.getByTestId('wave').innerHTML).toEqual('🖖');
     },
 };
+
+/* istanbul ignore else -- @preserve */
+if(  'test' === import.meta.env.MODE &&
+    !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, () => testStoryBook( mod, meta ) );
+}

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

@@ -0,0 +1,190 @@
+// noinspection DuplicatedCode
+
+import type { StoryObj }                        from '@storybook/web-components';
+import {expect, within, userEvent} from '@storybook/test';
+
+import '../custom-element/custom-element.js';
+
+type TProps = { title: string; body:string};
+
+type Story = StoryObj<TProps>;
+
+function render(args: TProps)
+{
+    const {title,  body} = args;
+    return `
+        <fieldset>
+            <legend>${ title }</legend>
+            ${ body }
+        </fieldset>
+  `;
+}
+const meta =
+{   title:      'form'
+,   render
+};
+
+export default meta;
+
+export const SystemMessage:Story =
+{   args : {title: 'custom-validity boolean', body:`
+    <p>type and then clear test in input should lead to system validation message shown next to input field.
+        Something like <q>Please fill out this field</q>.</p>
+    <custom-element>
+        <template>
+            <form>
+                <label> Email
+                    <input slice="username" slice-event="input" placeholder="non-empty" required data-testid="input-1">
+                </label>
+                <if test="//username/@validation-message">
+                    <var data-testid="validation-msg">{//username/@validation-message}</var>
+                </if>
+                <button>Next</button>
+            </form>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const titleText = SystemMessage.args!.title as string;
+        const canvas = within(canvasElement);
+
+        await expect( canvas.queryByTestId('validation-msg')).toBeNull();
+        const input = await canvas.findByTestId('input-1');
+        input.focus();
+        await userEvent.keyboard('abc');
+
+        await userEvent.clear(input);
+        await expect( canvas.queryByTestId('validation-msg')).toBeInTheDocument();
+    },
+};
+
+export const FormData:Story =
+{   args : {title: 'form-data populated', body:`
+    <p>type and then clear test in input should lead to system validation message shown next to input field.
+        Something like <q>Please fill out this field</q>.</p>
+    <custom-element>
+        <template>
+            <form slice="signin-form" >
+                <input name="f1" placeholder="non-empty" required data-testid="input-1"/>
+                <input name="f2" placeholder="non-empty" required data-testid="input-2"/>
+                <input name="f3" placeholder="non-empty" required data-testid="input-3"/>
+
+                <button data-testid="next-button">Next</button><br/>
+                f1: <code data-testid="c1">{ /datadom/slice/signin-form/form-data/f1 }</code><br/>
+                f2: <code data-testid="c2">{                          //form-data/f2 }</code><br/>
+                f3: <code data-testid="c3">{/datadom/slice/signin-form/form-data/f3}</code><br/>
+            </form>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await userEvent.type(canvas.getByTestId('input-1'), 'ABC');
+        await userEvent.click(canvas.getByRole('button'));
+        await expect( await canvas.findByText('ABC')).toBeInTheDocument();
+        await userEvent.type(canvas.getByTestId('input-2'), 'DCE');
+        await userEvent.click(canvas.getByRole('button'));
+        await expect( await canvas.findByText('DCE')).toBeInTheDocument();
+        await userEvent.type(canvas.getByTestId('input-3'), 'XYZ');
+        canvas.getByTestId('input-1').focus();
+        await expect( await canvas.findByText('XYZ')).toBeInTheDocument();
+    },
+};
+export const SetValidityMessage:Story =
+{   args : {title: 'setCustomValidity', body:`
+    <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity">setCustomValidity()</a>
+        invoked by <code>custom-validity</code> attribute. Type in the input fiels to observe the chars count in
+        text, click "next" and observe same message in dropdown.
+    </p>
+    <custom-element>
+        <template>
+            <form>
+                <input slice="s1" slice-event="input keyup" placeholder="type to see the custom error"
+                    custom-validity=" concat( 'char count ', string-length(//s1) ) "
+                    data-testid="input-1"/><br/>
+                s1: <code data-testid="c1">{ //s1 }</code><br/>
+                @validation-message: <var data-testid="validation-msg">{//s1/@validation-message}</var>
+                <button>next</button>
+            </form>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await userEvent.type(canvas.getByTestId('input-1'), 'ABC');
+        await expect( canvas.getByText('ABC')).toBeInTheDocument();
+        await expect( canvas.getByText('char count 3')).toBeInTheDocument();
+    },
+};
+
+export const FormCustomValidityBoolean:Story =
+{   args : {title: 'form custom-validity, boolean', body:`
+    <p> Form is valid only when input text length longer of 3 characters. </p>
+    <custom-element>
+        <template>
+            <form slice="form-1" custom-validity=" string-length(//form-1//f1) &gt; 3 "
+                data-testid="form-1"
+                >
+                <input name="f1" data-testid="input-1"/><br/>
+
+                <input type="hidden" name="id" value="form--form-custom-validity-boolean"/>
+                <input type="hidden" name="viewMode" value="story"/>
+                //form-1//f1: <code data-testid="c1">{ //form-1//f1 }</code><br/>
+                <button>next</button>
+            </form>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await userEvent.type(canvas.getByTestId('input-1'), 'AB');
+        await userEvent.click(canvas.getByRole('button'));
+
+        await expect( canvas.getByText('AB')).toBeInTheDocument(); // i.e. not reloaded by form submit
+    },
+};
+export const FormCustomValidityString:Story =
+{   args : {title: 'form custom-validity, string', body:`
+    <p> Form is valid only when input text is longer of 3 characters, @validation-message propagated in form slot </p>
+    <custom-element>
+        <template>
+            <form slice="form-1"
+                custom-validity=" string-length(//form-1//f1) &gt; 3 ?? concat('should be more than 3 characters, now is ',string-length(//form-1//f1) ) "
+                data-testid="form-1"
+                >
+                <input name="f1" data-testid="input-1"/><br/>
+
+                <input type="hidden" name="id" value="form--form-custom-validity-string"/>
+                <input type="hidden" name="viewMode" value="story"/>
+                //form-1//f1: <code data-testid="c1">{ //form-1//f1 }</code><br/>
+                //form-1/@validation-message: <code data-testid="c1">{ //@validation-message }</code><br/>
+                <button>next</button>
+            </form>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await userEvent.type(canvas.getByTestId('input-1'), 'AB');
+        await userEvent.click(canvas.getByRole('button'));
+
+        await expect( canvas.getByText('AB')).toBeInTheDocument(); // i.e. not reloaded by form submit
+        await expect( canvas.getByText('should be more than 3 characters, now is 2')).toBeInTheDocument();
+    },
+};
+// custom validity rules on form : boolean and string values
+
+/* istanbul ignore else -- @preserve */
+if(  'test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest') )
+{
+    const mod = await import('./form.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () => testStoryBook( mod, meta ) );
+}

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

@@ -28,12 +28,12 @@ function Template({title, slice, url}: TProps)
         slice="${slice}"
         ></http-request>
     <input placeholder="URL for fetch" slice="url" value="{ //url ?? '${ url }' }"/>
-    <button>set</button>   
-    <button slice="url" slice-value="''" slice-event="click">set blank</button>   
-    <button slice="url" slice-value="'/reflect'" slice-event="click">/reflect</button>   
-    <button slice="url" slice-value="'/pokemon'"         slice-event="click">/pokemon</button>   
-    <button slice="url" slice-value="'/pokemon?limit=6'" slice-event="click">/pokemon?limit=6</button>   
-    <button slice="url" slice-value="'/pokemon?limit=3'" slice-event="click">/pokemon?limit=3</button>   
+    <button>set</button>
+    <button slice="url" slice-value="''" slice-event="click">set blank</button>
+    <button slice="url" slice-value="'/reflect'" slice-event="click">/reflect</button>
+    <button slice="url" slice-value="'/pokemon'"         slice-event="click">/pokemon</button>
+    <button slice="url" slice-value="'/pokemon?limit=6'" slice-event="click">/pokemon?limit=6</button>
+    <button slice="url" slice-value="'/pokemon?limit=3'" slice-event="click">/pokemon?limit=3</button>
 
     <p>Pokemon Count: {count(/datadom/slice/${slice}//results)}</p>
     <if test="count(/datadom/slice/${slice}//results) &lt; 0">

package/src/stories/http-request.test.ts

@@ -12,15 +12,6 @@ import {handlers}   from '../mocks/handlers.ts';
 export const worker = setupWorker(...handlers);
 await worker.start();
 
-
-// worker.start({serviceWorker: { url: '/public/mockServiceWorker.js' } });
-// worker.use(...handlers);
-
-// beforeAll( () => {worker.start()});//{ onUnhandledRequest: 'error' }));
-//
-// afterAll(() => worker.stop());
-
-
 const {renderPlay} = meta;
 describe('http-request', () => {
     for (let story of Object.values(Stories) as StoryObj[] )

package/src/stories/{local-storage.stories.ts → local-storage.test.stories.ts}

@@ -27,13 +27,13 @@ function render(args: TProps)
 
             <custom-element>
 <template><!-- wrapping into template to prevent images loading within DCE declaration -->
-    <local-storage 
-        key="${ key }" 
-        slice="${ slice }" 
-        ${ live  ? `live="${live    }"`:''} 
-        ${ value ? `value="${value  }"`:''} 
+    <local-storage
+        key="${ key }"
+        slice="${ slice }"
+        ${ live  ? `live="${live    }"`:''}
+        ${ value ? `value="${value  }"`:''}
         ></local-storage>
-    
+
     <br/>
     <var>${key}</var>:<code data-testid="slice-value">{ //slice/${slice} }</code>
     <br/>
@@ -53,12 +53,12 @@ export default meta;
 export const Demo:Story  =
 {   args : {title: 'live value', live:'live', body:`
     <input placeholder="value for localStorage" id="textinput"
-        slice="${defs.slice}" 
+        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="localStorage.setItem('${defs.key}','another text')">another text</button>
+    <button onclick="localStorage.removeItem('${defs.key}'            )">set blank</button>
 `}
 ,   play: async ({canvasElement}) =>
     {
@@ -94,8 +94,8 @@ 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="localStorage.setItem('${defs.key}','text value'  )">text value</button>
+    <button onclick="localStorage.removeItem('${defs.key}'            )">set blank</button>
     `}
 ,   play: async ({canvasElement}) =>
     {
@@ -168,7 +168,7 @@ export const FromStorageWithDefault:Story  =
 
 export const TypeAttribute:Story  =
 {   args : {title: 'local-storage type attribute variations', body:`
-    
+
                 <local-storage key="textKey" slice="text-key" type="text" live="live"></local-storage>
                 <local-storage key="dateKey" slice="date-key" type="date" live="live"></local-storage>
                 <local-storage key="timeKey" slice="time-key" type="time" live="live"></local-storage>
@@ -218,6 +218,8 @@ export const TypeAttribute:Story  =
     `}
 ,   play: async ({canvasElement}) =>
     {
+        window['JsonSample'] = {a:1,b:'B'};
+
         const canvas = within(canvasElement);
         await canvas.findByText(TypeAttribute.args!.title as string);
         const byText = txt => canvas.getByText(txt)
@@ -386,3 +388,13 @@ export const TypeAttribute:Story  =
         expectVal('json-key'       ,'\na : 1b : B'      );
     },
 };
+
+/* istanbul ignore else -- @preserve */
+if(  'test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest') )
+{
+    const mod = await import('./local-storage.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () => testStoryBook( mod, meta ) );
+}

package/src/stories/{location-element.stories.ts → location-element.test.stories.ts}

@@ -1,10 +1,11 @@
 // noinspection DuplicatedCode
 
-import type { StoryObj }             from '@storybook/web-components';
-import {expect, getByTestId, within} from '@storybook/test';
+import type { StoryObj }                            from '@storybook/web-components';
+import {expect, getByTestId, within}                from '@storybook/test';
 
 import '../custom-element/custom-element.js';
 import '../custom-element/location-element.js';
+import {RealtimeEventInSlice, SliceInitChangeEvent} from './slice-events.test.stories';
 
 type TProps = { title: string; slice: string; href: string; live:string; body:string};
 const defs: TProps =
@@ -26,13 +27,13 @@ function render(args: TProps)
 
             <custom-element>
 <template><!-- wrapping into template to prevent images loading within DCE declaration -->
-    <location-element 
-        slice="${ slice }" 
-        ${ href   ? `href="${ href }"`:''} 
+    <location-element
+        slice="${ slice }"
+        ${ href   ? `href="${ href }"`:''}
         live="${ live }"
         ></location-element>
-    
-    
+
+
     ${ body }
     <xhtml:table>
         <xhtml:tbody>
@@ -40,12 +41,12 @@ function render(args: TProps)
                 <xhtml:th><h3> URL properties </h3></xhtml:th>
                 <xhtml:td>{count(//value/@*)}</xhtml:td>
             </xhtml:tr>
-            <apply-templates mode="attrs" select="//value/@*"></apply-templates>
+            <apply-templates mode="attrs" select="//${ slice }/value/@*"></apply-templates>
         </xhtml:tbody>
     </xhtml:table>
     <xhtml:table>
             <h3> URL parameters </h3>
-            <apply-templates mode="attrs" select="//params/*/*"></apply-templates>
+            <apply-templates mode="attrs" select="//${ slice }/value/params/*/*"></apply-templates>
     </xhtml:table>
     <xsl:template mode="attrs" match="*|@*">
         <xhtml:tr>
@@ -131,3 +132,14 @@ export const SrcAttribute:Story  =
 
     },
 };
+
+
+/* istanbul ignore else -- @preserve */
+if(  'test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest') )
+{
+    const mod = await import('./location-element.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () => testStoryBook( mod, meta ) );
+}

package/src/stories/{slice-events.stories.ts → slice-events.test.stories.ts}

@@ -1,7 +1,7 @@
 // noinspection DuplicatedCode
 
-import type { StoryObj }             from '@storybook/web-components';
-import { expect, within } from '@storybook/test';
+import type { StoryObj }           from '@storybook/web-components';
+import {expect, userEvent, within, spyOn} from '@storybook/test';
 
 import '../custom-element/custom-element.js';
 
@@ -74,7 +74,7 @@ export const RealtimeEventInSlice:Story  =
     <p>move the mouse over TEXTAREA and click to see slice and slice event changed</p>
     <custom-element>
         <template>
-            <textarea   slice="s" slice-value="concat('x:', //@pageX)" slice-event="mousemove click" 
+            <textarea   slice="s" slice-value="concat('x:', //@pageX)" slice-event="mousemove click"
                         style="width:16rem;height:16rem;box-shadow: inset {//@offsetX}px {//@offsetY}px gold;"></textarea><br/>
             //slice/s                   : <code data-testid="//slice/s"                 >{ //slice/s                }</code>  <br/>
             //slice/s/event/@offsetY    : <code data-testid="//slice/s/event/@offsetY"  >{ //slice/s/event/@offsetY }</code>  <br/>
@@ -108,10 +108,93 @@ export const RealtimeEventInSlice:Story  =
             input.dispatchEvent( ev );
         };
 
-        emitXy(10,20,'click');
+        emitXy(20,20,'click');
         await sleep(10);
-        expect( sliceText() ).to.equal('x:10', 'click slot value 10');
+        expect( sliceText() ).to.equal('x:20', 'click slot value 20');
         expect( Number(offsetY())   ).to.be.lessThan(0, 'offsetY click');
         expect( eventType() ).to.equal('click', 'click event type');
     },
 };
+
+export const DoubleEventInSlice:Story  =
+{   args : {title: 'slice-event="change submit change submit" ', body:`
+    <p> double same event should be treated as one.</p>
+    <custom-element>
+        <template>
+            <form slice-event="submit submit change change" slice="form-1">
+                <input slice-event="change change" required slice="field-1" data-testid="f1" name="f1"/>
+                <input name="f2" value="populated in form-data"/>
+                <button>next</button> <code>slices count {count(/datadom/slice/*)}</code>
+            </form>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        const input = await canvas.findByTestId('f1');
+        input.focus();
+        await userEvent.type ( input, 'AB');
+        canvas.getByRole('button').focus()
+        await userEvent.clear( input );
+        await userEvent.click( canvas.getByRole('button'));
+        expect( await canvas.findByText('slices count 2')).toBeInTheDocument();
+    },
+};
+export const MultipleSlices:Story  =
+{   args : {title: 'slice="/datadom/attributes/emotion | s1" ', body:`
+    <p> double same event should be treated as one.</p>
+    <custom-element>
+        <template>
+            <input  slice="s1|s2" 
+                    slice-event="input"
+                    data-testid="f1"
+                    /><br/>
+            Type to update s1 and s2 slices <br/>
+            slice <code>s1: {//slice/s1}</code><br/>
+            slice <code>s2: {//slice/s2}</code><br/>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        const input = await canvas.findByTestId('f1');
+        input.focus();
+        await userEvent.type ( input, 'AB');
+        await expect( await canvas.findByText('s1: AB')).toBeInTheDocument();
+        await expect( await canvas.findByText('s2: AB')).toBeInTheDocument();
+    },
+};
+export const SlicesInAttrAndName:Story  =
+{   args : {title: 'slice="/datadom/attributes/emotion | s1" ', body:`
+    <p> double same event should be treated as one.</p>
+    <custom-element>
+        <template>
+            <attribute name="emotion">😃</attribute>
+            <input  slice-event="input" slice="/datadom/attributes/emotion | s1" data-testid="f1"/>
+            <p>Type to update </p>
+            <p>emotion attribute: {emotion}</p>
+            <p>slice: {//slice/s1}</p>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        const input = await canvas.findByTestId('f1');
+        input.focus();
+        await userEvent.type ( input, 'AB');
+        await expect( await canvas.findByText( 'emotion attribute: AB')).toBeInTheDocument();
+    },
+};
+
+/* istanbul ignore else -- @preserve */
+if(  'test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest') )
+{
+    const mod = await import('./slice-events.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () => testStoryBook( mod, meta ) );
+}