@epa-wg/custom-element-dist 0.0.1

package/src/stories/css.stories.ts

@@ -0,0 +1,104 @@
+import type {StoryObj} from "@storybook/web-components";
+import {within, expect} from "@storybook/test";
+
+import '../custom-element/custom-element.js';
+
+type CssProps = { title: string; tag: string; style: string; slot: string; payload: string };
+const defs = {title: '', tag: '', style: '', slot: '', payload: ''};
+
+type Story = StoryObj<CssProps>;
+
+function render(args: CssProps) {
+    const {title, tag, style, slot, payload} = { ...defs, ...args };
+    return `
+        <fieldset>
+            <legend>${ title }</legend>
+            <custom-element ${ tag ? `tag="${tag}"` : ''} >
+                <template>
+                    <style>
+                        ${ style }
+                    </style>
+                    <u><slot>${ slot }</slot></u>
+                </template>
+            </custom-element>
+            ${ payload }
+        </fieldset>
+  `;
+}
+
+const meta = { title: 'Css', render };
+
+export default meta;
+
+const GREEN = `<b style="color:green">green</b>`
+const RED = `<i style="color:red">red</i>`
+
+export const StyleDoesNotLeak: Story =
+{   args:
+    {   title: `The default color should stay on this label, the message inside should be ${GREEN}`
+    ,   style: `color:green`
+    ,    slot: 'text has to be green'
+    , payload: '<u>no tags</u>'
+    }
+,   play: async ({canvasElement}) =>
+    {   const canvas = within(canvasElement);
+        const el = await canvas.findByText('text has to be green');
+        const st = getComputedStyle(el);
+        const color = st.getPropertyValue('color');
+        // @ts-ignore
+        expect(color).to.equal('rgb(0, 128, 0)')
+    },
+};
+
+export const StyleIn2Instances: Story =
+{   args:
+    {   title:  `The default color should apply ${GREEN} in all instances`
+    ,   style:  `color:green`
+    ,    slot:  'text has to be green'
+    ,     tag:  'dce-2'
+    , payload:  `<u>2 instances:</u> <dce-2 id="dce21"></dce-2> * <dce-2 id="dce22"></dce-2>`
+    }
+,   play: async ({canvasElement}) =>
+    {
+        await within(canvasElement).findByText('2 instances:');
+        const color = ( css:string )=>
+        {   const el = canvasElement.querySelector(css);
+            const st =  getComputedStyle( el! );
+            return  st.getPropertyValue('color');
+        };
+        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'));
+    },
+};
+
+// noinspection CssInvalidPseudoSelector
+export const OverrideInPayload: Story =
+{   args:
+    {   title:  `${GREEN} in instance style can be overridden in payload as ${RED} in 1st instance`
+    ,   style:  `color:green`
+    ,    slot:  'is green'
+    ,     tag:  'dce-3'
+    , payload:  `  <u>should be</u> ${RED}:<dce-3 id="dce32">
+                        <template>
+                            <style> color:red; </style>
+                            <u>red</u>
+                        </template>
+                    </dce-3> <br/>
+                     should be ${GREEN}: <dce-3 id="dce31">green</dce-3>   `
+    }
+,   play: async ({canvasElement}) =>
+    {
+        await within(canvasElement).findByText('should be');
+
+        const color = ( css:string )=>
+        {   const el = canvasElement.querySelector(css);
+            const st =  getComputedStyle( el! );
+            return  st.getPropertyValue('color');
+        };
+        expect( color('legend'  )        ).to.not.equal(color('b'));
+        expect( color('#dce31 u')        ).to    .equal(color('b'));
+        expect( color('#dce32 u')        ).to    .equal(color('i'));
+    },
+};

package/src/stories/css.test.ts

@@ -0,0 +1,12 @@
+import {describe} from 'vitest';
+
+import '../custom-element/custom-element.js';
+import meta from "./css.stories.ts";
+
+import * as Stories  from "./css.stories.ts";
+import {playStories} from './renderPlay';
+
+describe('Css', () =>
+{
+     playStories( Stories, meta );
+});

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

@@ -0,0 +1,113 @@
+// noinspection DuplicatedCode
+
+import type { StoryObj }             from '@storybook/web-components';
+import {expect, getByTestId, within, userEvent} from '@storybook/test';
+
+import '../custom-element/custom-element.js';
+
+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:      'dom-merge'
+,   render
+};
+
+export default meta;
+
+export const CharsCountInTextarea:Story  =
+{   args : {title: 'Chars count in textarea', body:`
+    <p>Counter update happens on change event(focus change). The update should not interfere with the input</p>
+    <custom-element>
+        <form>
+            <label>
+                <textarea slice="text-container" data-testid="textarea-id">Hello world!</textarea>
+                <span> Chars count:
+                    <code data-testid="counter-id">{string-length(//slice/text-container/text())}</code>
+                </span>
+            </label>
+             <br/><input placeholder="after textarea input, click here " data-testid="refocus-id" />
+        </form>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        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);
+        debugger;
+        canvas.getByTestId('refocus-id').focus();
+        await sleep(10);
+        expect(canvas.getByTestId('counter-id').textContent).toEqual(''+titleText?.length,'counter of symbols');
+    },
+};
+
+export const WordCountOnType:Story  =
+{   args : {title: 'Word count in HTML input field', body:`
+    <p>Counter update happens on keyup event. The update should not interfere with the input</p>
+    <custom-element>
+            <form>
+                <label>
+                    <input type="text" value="{//txt ?? 'Type time update'}" slice="txt" slice-event="init input" data-testid="input-id">
+
+                    <span> Character count:
+                        <code data-testid="chars-id"
+                            >{
+                                string-length(//slice/txt)
+                            }</code>
+                    </span>
+                    <span> Word count:
+                        <code data-testid="words-id"
+                            >{
+                                string-length(normalize-space(//slice/txt)) -
+                                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
+                            with all spaces removed from the length of the original string,
+                            and adds 1 to account for the last word.
+                        -->
+                    </span>
+
+                </label>
+                <p><b>txt</b> slice:</p> <blockquote> {//slice/txt} </blockquote>
+            </form>
+        </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        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');
+    },
+};

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

@@ -0,0 +1,12 @@
+import {describe, it} from 'vitest';
+
+import '../custom-element/custom-element.js';
+import meta from "./dom-merge.stories.ts";
+
+import * as Stories from "./dom-merge.stories.ts";
+import {playStories} from './renderPlay';
+
+describe('dom-merge', () => {
+    localStorage.clear();
+    playStories( Stories, meta );
+});

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

@@ -0,0 +1,245 @@
+// noinspection DuplicatedCode
+
+import type { StoryObj }             from '@storybook/web-components';
+import {expect, getByTestId, within} from '@storybook/test';
+
+import '../custom-element/custom-element.js';
+
+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:      'external-templates'
+,   render
+};
+
+export default meta;
+
+export const TemplateInPage:Story  =
+{   args : {title: 'Template in page DOM', body:`
+    <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>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await canvas.findByText(TemplateInPage.args!.title as string);
+        const         val = (prop)=> canvas.getByTestId(prop).textContent.trim();
+
+        expect(val('slot-override')).toEqual('👋 World!');
+        expect(val('slot-default' )).toEqual('Hello World!');
+    },
+};
+
+export const NoTag:Story  =
+{   args : {title: 'no tag, template in same DOM', body:`
+<template id="template2">
+    🏗️ construction
+</template>
+
+<custom-element src="#template2"></custom-element>
+<custom-element src="#template2"></custom-element>`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await canvas.findByText(NoTag.args!.title as string);
+
+        expect(canvasElement.querySelectorAll('custom-element')[0].textContent.trim()).toEqual('🏗️ construction');
+        expect(canvasElement.querySelectorAll('custom-element')[1].textContent.trim()).toEqual('🏗️ construction');
+    },
+};
+
+export const ExternalSvg:Story  =
+{   args : {title: 'External SVG as template', body:`
+    <custom-element tag="dce-external" src="/confused.svg">
+        <template><i>loading from SVG ...</i></template>
+    </custom-element>
+    <dce-external></dce-external>
+    <custom-element src="confused.svg">
+        <i>inline DCE loading from SVG ...</i>
+    </custom-element>
+    <custom-element src="no.svg">
+        <i>fallback for missing image</i>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await canvas.findByText(ExternalSvg.args!.title as string);
+        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
+    },
+};
+
+export const ExternalXsltFile:Story  =
+{   args : {title: 'External XSLT file', body:`
+    <custom-element tag="dce-external-4" src="/tree.xsl">
+        <template><i>loading from XSLT ...</i></template>
+    </custom-element>
+    <dce-external-4 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-4>
+    <hr/>
+    <custom-element src="/tree.xsl" data-smile="👼" data-basket="🍒">
+        <i>inline DCE loading from XSLT ...</i>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        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('👼');
+    },
+};
+
+export const ExternalHtmlFile:Story  =
+{   args : {title: 'external HTML template', body:`
+    <custom-element tag="dce-external-5" src="/html-template.html">
+                <template><i>loading from HTML file ...</i></template>
+            </custom-element>
+            <dce-external-5 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-5>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await canvas.findByText(ExternalHtmlFile.args!.title as string);
+        await canvas.findByText('👋');
+        const t5 = canvasElement.querySelector('dce-external-5').innerHTML;
+        expect(t5).to.include('👋');
+        expect(t5).to.include('👌');
+        expect(t5).to.include('<svg');
+        expect(t5).to.include('<math');
+    },
+};
+
+export const ExternalHtmlFileInline:Story  =
+{   args : {title: 'external HTML template', body:`
+            <custom-element src="/html-template.html" data-smile="👼" data-basket="🍒">
+                <i>inline DCE loading from HTML file ...</i>
+            </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await canvas.findByText(ExternalHtmlFileInline.args!.title as string);
+        await canvas.findByText('👋');
+        const t5 = canvasElement.innerHTML;
+        expect(t5).to.include('👋');
+        expect(t5).to.include('👌');
+        expect(t5).to.include('<svg');
+        expect(t5).to.include('<math');
+    },
+};
+
+export const HtmlWithinHtmlFile:Story  =
+{   args : {title: 'external HTML template - html by id', body:`
+        <custom-element src="/html-template.html#wave">
+            <template><i>loading HTML from templates file ...</i></template>
+        </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await canvas.findByText(HtmlWithinHtmlFile.args!.title as string);
+        expect(await canvas.findByText('👋')).toBeInTheDocument();
+    },
+};
+
+export const SvgWithinHtmlFile:Story  =
+{   args : {title: 'external HTML template - SVG by id', body:`
+        <custom-element src="/html-template.html#dwc-logo">
+            <template><i>loading  SVG from templates file ...</i></template>
+        </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await canvas.findByText(SvgWithinHtmlFile.args!.title as string);
+        expect(await canvas.findByTestId('svg-test')).toBeInTheDocument();
+    },
+};
+
+export const MathMLWithinHtmlFile:Story  =
+{   args : {title: 'external HTML template - MathML by id', body:`
+        <custom-element src="/html-template.html#sophomores-dream">
+            <template><i>loading MathML from HTML file ...</i></template>
+        </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        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');
+    },
+};
+
+export const ByIdWithinXsltFile:Story  =
+{   args : {title: 'external XHTML template - xsl by id', body:`
+        <custom-element src="/html-template.xhtml#embedded-xsl">
+            <template>whole XSLT is  embedded into HTML body</template>
+        </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await canvas.findByText(ByIdWithinXsltFile.args!.title as string);
+        const ml = await canvas.findByTestId('src');
+        expect(ml.textContent).to.include('/html-template.xhtml#embedded-xsl');
+    },
+};
+export const MissingIdWithinXsltFile:Story  =
+{   args : {title: 'external HTML template - missing id', body:`
+    <custom-element src="/html-template.html#none">
+        <template><i data-testid="no-id">element with id=none is missing in template</i></template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await canvas.findByText(MissingIdWithinXsltFile.args!.title as string);
+        await sleep(100);
+        const ml = await canvas.findByTestId('no-id');
+        expect(ml.textContent).to.include('element with id=none is missing in template');
+    },
+};
+export const EmbeddingInAnotherFile:Story  =
+{   args : {title: 'external file with embedding of another external DCE', body:`
+    <custom-element src="/embed-1.html">
+        loading from embed-1.html ...
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        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('🖖');
+    },
+};

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

@@ -0,0 +1,12 @@
+import {describe, it} from 'vitest';
+
+import '../custom-element/custom-element.js';
+import meta from "./external-template.stories.ts";
+
+import * as Stories from "./external-template.stories.ts";
+import {playStories} from './renderPlay';
+
+describe('external-template', () => {
+    localStorage.clear();
+    playStories( Stories, meta );
+});