@epa-wg/custom-element-dist 0.0.32 → 0.0.34

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

@@ -6,17 +6,16 @@
 // 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 type {StoryObj} from '@storybook/web-components';
+import {expect, within} from '@storybook/test';
 
 import '../custom-element/custom-element.js';
 import '../custom-element/module-url.js';
-import {Demo, SrcAttribute}          from './location-element.test.stories';
+import {frameCanvas} from "./frame.canvas";
 
 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)
 {
@@ -41,9 +40,11 @@ export default meta;
 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>
+        <template>
+            <a href="/demo/embed-1.html">
+                <custom-element src="/demo/embed-1.html"></custom-element>
+            </a>
+        </template>
     </custom-element>
 `}
 ,   play: async ({canvasElement}) =>
@@ -56,32 +57,19 @@ export const RelativeToPagePath:Story  =
     },
 };
 
-
-export const ModuleBySymbolicName:Story  =
+    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>
+<iframe src="/demo/module-url-sb-2.html" name="sb" data-testid="fr"></iframe>
 `}
 ,   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();
+        const frCanvas = await frameCanvas('fr',canvas);
+
+        await expect( await frCanvas.findByText('check the link:')).toBeInTheDocument();
+        await expect( await frCanvas.findByText('👋 from embed-lib-component')).toBeInTheDocument();
     },
 };
 
@@ -115,59 +103,39 @@ export const MissingImportmapEntry:Story  =
 
 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>
+    <iframe src="/demo/module-url-sb-4.html" name="sb" data-testid="fr"></iframe>
 
-        </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();
+        const frCanvas = await frameCanvas('fr',canvas);
+
+        await expect(await frCanvas.findByText('👌 from embed-relative-hash invoking')).toBeInTheDocument();
+        await expect(await frCanvas.findByText('lib-root/embed-lib.html#embed-relative-hash')).toBeInTheDocument();
+        await expect(await frCanvas.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>
+        <iframe src="/demo/module-url-sb-5.html" 
+            data-testid="fr" 
+            style="height:22rem;width: 80vw;"></iframe>
 `}
 ,   play: async ({canvasElement}) =>
     {
         const canvas = within(canvasElement);
         await canvas.findByText(HashWithinLib.args!.title as string);
+        const frCanvas = await frameCanvas('fr',canvas);
 
-        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();
+        await expect(await frCanvas.findByText('lib-root/embed-lib.html#embed-relative-file')).toBeInTheDocument();
+        await expect(await frCanvas.findByText('👍 from embed-relative-file invoking')).toBeInTheDocument();
+        await expect(await frCanvas.findByText('embed-1.html')).toBeInTheDocument();
+        await expect(await frCanvas.findByText('embed-1.html')).toBeInTheDocument();
+        await expect(await frCanvas.findByText('🖖')).toBeInTheDocument();
     },
 };
 

package/src/stories/xslt-conditionals.test.stories.ts

@@ -0,0 +1,492 @@
+// noinspection DuplicatedCode
+
+import type { StoryObj } from '@storybook/web-components';
+import { expect, userEvent, within } from '@storybook/test';
+
+import '../custom-element/custom-element.js';
+
+type TProps = { title: string; tag: string; template: string; payload: string };
+
+type Story = StoryObj<TProps>;
+
+function sleep(ms: number) { return new Promise((resolve) => setTimeout(resolve, ms)); }
+
+function render(args: TProps) {
+    const { title, tag, template, payload } = args;
+    return `
+        <fieldset>
+            <legend>${title}</legend>
+            <custom-element tag="${tag}" hidden>
+                <template>
+                    ${template}
+                </template>
+            </custom-element>
+            ${payload}
+        </fieldset>
+    `;
+}
+
+const meta = {
+    title: 'xslt-conditionals',
+    render
+};
+
+export default meta;
+
+export const IfTrue: Story = {
+    args: {
+        title: 'xsl:if - condition is true',
+        tag: 'if-true-test',
+        template: `
+            <attribute name="show-message"></attribute>
+            <if test="//@show-message">
+                <span data-testid="result">Message is visible</span>
+            </if>
+        `,
+        payload: `<if-true-test show-message="yes"></if-true-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Message is visible');
+    }
+};
+
+export const IfFalse: Story = {
+    args: {
+        title: 'xsl:if - condition is false',
+        tag: 'if-false-test',
+        template: `
+            <attribute name="show-message"></attribute>
+            <if test="//@show-message = 'yes'">
+                <span data-testid="hidden-result">Should not appear</span>
+            </if>
+            <span data-testid="fallback">Fallback content</span>
+        `,
+        payload: `<if-false-test show-message="no"></if-false-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const fallback = await canvas.findByTestId('fallback');
+        expect(fallback).toBeInTheDocument();
+        expect(canvasElement.querySelector('[data-testid="hidden-result"]')).toBeNull();
+    }
+};
+
+export const IfNotExists: Story = {
+    args: {
+        title: 'xsl:if - attribute not exists',
+        tag: 'if-not-exists-test',
+        template: `
+            <attribute name="optional"></attribute>
+            <if test="not(//attributes/@optional)">
+                <span data-testid="result">No attribute provided</span>
+            </if>
+            <if test="//attributes/@optional">
+                <span data-testid="has-attr">Attribute exists</span>
+            </if>
+        `,
+        payload: `<if-not-exists-test></if-not-exists-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('No attribute provided');
+        expect(canvasElement.querySelector('[data-testid="has-attr"]')).toBeNull();
+    }
+};
+
+export const ChooseWhenOtherwise: Story = {
+    args: {
+        title: 'xsl:choose/when/otherwise - basic switch',
+        tag: 'choose-basic-test',
+        template: `
+            <attribute name="status"></attribute>
+            <choose>
+                <when test="//attributes/@status = 'success'">
+                    <span data-testid="result" class="success">Operation succeeded</span>
+                </when>
+                <when test="//attributes/@status = 'error'">
+                    <span data-testid="result" class="error">Operation failed</span>
+                </when>
+                <otherwise>
+                    <span data-testid="result" class="unknown">Unknown status</span>
+                </otherwise>
+            </choose>
+        `,
+        payload: `<choose-basic-test status="success"></choose-basic-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Operation succeeded');
+        expect(result).toHaveClass('success');
+    }
+};
+
+export const ChooseSecondWhen: Story = {
+    args: {
+        title: 'xsl:choose - second when branch',
+        tag: 'choose-second-test',
+        template: `
+            <attribute name="status"></attribute>
+            <choose>
+                <when test="//attributes/@status = 'success'">
+                    <span data-testid="result" class="success">Operation succeeded</span>
+                </when>
+                <when test="//attributes/@status = 'error'">
+                    <span data-testid="result" class="error">Operation failed</span>
+                </when>
+                <otherwise>
+                    <span data-testid="result" class="unknown">Unknown status</span>
+                </otherwise>
+            </choose>
+        `,
+        payload: `<choose-second-test status="error"></choose-second-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Operation failed');
+        expect(result).toHaveClass('error');
+    }
+};
+
+export const ChooseOtherwise: Story = {
+    args: {
+        title: 'xsl:choose - otherwise fallback',
+        tag: 'choose-otherwise-test',
+        template: `
+            <attribute name="status"></attribute>
+            <choose>
+                <when test="//attributes/@status = 'success'">
+                    <span data-testid="result" class="success">Operation succeeded</span>
+                </when>
+                <when test="//attributes/@status = 'error'">
+                    <span data-testid="result" class="error">Operation failed</span>
+                </when>
+                <otherwise>
+                    <span data-testid="result" class="unknown">Unknown status</span>
+                </otherwise>
+            </choose>
+        `,
+        payload: `<choose-otherwise-test status="pending"></choose-otherwise-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Unknown status');
+        expect(result).toHaveClass('unknown');
+    }
+};
+
+export const ChooseNoAttribute: Story = {
+    args: {
+        title: 'xsl:choose - no attribute provided',
+        tag: 'choose-no-attr-test',
+        template: `
+            <attribute name="level"></attribute>
+            <choose>
+                <when test="//attributes/@level = 'high'">
+                    <span data-testid="result">High priority</span>
+                </when>
+                <when test="//attributes/@level = 'low'">
+                    <span data-testid="result">Low priority</span>
+                </when>
+                <otherwise>
+                    <span data-testid="result">Default priority</span>
+                </otherwise>
+            </choose>
+        `,
+        payload: `<choose-no-attr-test></choose-no-attr-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Default priority');
+    }
+};
+
+export const NestedConditions: Story = {
+    args: {
+        title: 'Nested conditionals',
+        tag: 'nested-cond-test',
+        template: `
+            <attribute name="type"></attribute>
+            <attribute name="active"></attribute>
+            <choose>
+                <when test="//attributes/@type = 'user'">
+                    <if test="//attributes/@active = 'true'">
+                        <span data-testid="result">Active user</span>
+                    </if>
+                    <if test="//attributes/@active != 'true'">
+                        <span data-testid="result">Inactive user</span>
+                    </if>
+                </when>
+                <otherwise>
+                    <span data-testid="result">Not a user</span>
+                </otherwise>
+            </choose>
+        `,
+        payload: `<nested-cond-test type="user" active="true"></nested-cond-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Active user');
+    }
+};
+
+export const NestedConditionsInactive: Story = {
+    args: {
+        title: 'Nested conditionals - inactive user',
+        tag: 'nested-cond-inactive-test',
+        template: `
+            <attribute name="type"></attribute>
+            <attribute name="active"></attribute>
+            <choose>
+                <when test="//attributes/@type = 'user'">
+                    <if test="//attributes/@active = 'true'">
+                        <span data-testid="result">Active user</span>
+                    </if>
+                    <if test="//attributes/@active != 'true'">
+                        <span data-testid="result">Inactive user</span>
+                    </if>
+                </when>
+                <otherwise>
+                    <span data-testid="result">Not a user</span>
+                </otherwise>
+            </choose>
+        `,
+        payload: `<nested-cond-inactive-test type="user" active="false"></nested-cond-inactive-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Inactive user');
+    }
+};
+
+export const NumericComparison: Story = {
+    args: {
+        title: 'Numeric comparison in conditions',
+        tag: 'numeric-cond-test',
+        template: `
+            <attribute name="count"></attribute>
+            <choose>
+                <when test="//attributes/@count > 10">
+                    <span data-testid="result">Many items</span>
+                </when>
+                <when test="//attributes/@count > 0">
+                    <span data-testid="result">Some items</span>
+                </when>
+                <otherwise>
+                    <span data-testid="result">No items</span>
+                </otherwise>
+            </choose>
+        `,
+        payload: `<numeric-cond-test count="15"></numeric-cond-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Many items');
+    }
+};
+
+export const NumericComparisonLow: Story = {
+    args: {
+        title: 'Numeric comparison - low value',
+        tag: 'numeric-cond-low-test',
+        template: `
+            <attribute name="count"></attribute>
+            <choose>
+                <when test="//attributes/@count > 10">
+                    <span data-testid="result">Many items</span>
+                </when>
+                <when test="//attributes/@count > 0">
+                    <span data-testid="result">Some items</span>
+                </when>
+                <otherwise>
+                    <span data-testid="result">No items</span>
+                </otherwise>
+            </choose>
+        `,
+        payload: `<numeric-cond-low-test count="5"></numeric-cond-low-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Some items');
+    }
+};
+
+export const BooleanAndCondition: Story = {
+    args: {
+        title: 'Boolean AND condition',
+        tag: 'and-cond-test',
+        template: `
+            <attribute name="logged-in"></attribute>
+            <attribute name="admin"></attribute>
+            <if test="//attributes/@logged-in = 'true' and //attributes/@admin = 'true'">
+                <span data-testid="result">Admin panel access granted</span>
+            </if>
+            <if test="not(//attributes/@logged-in = 'true' and //attributes/@admin = 'true')">
+                <span data-testid="result">Access denied</span>
+            </if>
+        `,
+        payload: `<and-cond-test logged-in="true" admin="true"></and-cond-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Admin panel access granted');
+    }
+};
+
+export const BooleanOrCondition: Story = {
+    args: {
+        title: 'Boolean OR condition',
+        tag: 'or-cond-test',
+        template: `
+            <attribute name="role"></attribute>
+            <if test="//attributes/@role = 'admin' or //attributes/@role = 'moderator'">
+                <span data-testid="result">Elevated privileges</span>
+            </if>
+            <if test="not(//attributes/@role = 'admin' or //attributes/@role = 'moderator')">
+                <span data-testid="result">Standard user</span>
+            </if>
+        `,
+        payload: `<or-cond-test role="moderator"></or-cond-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Elevated privileges');
+    }
+};
+
+export const MultipleInstances: Story = {
+    args: {
+        title: 'Multiple instances with different conditions',
+        tag: 'multi-instance-test',
+        template: `
+            <attribute name="data-testid"></attribute>
+            <attribute name="variant"></attribute>
+            <choose>
+                <when test="//attributes/@variant = 'primary'">
+                    <button data-testid="{$data-testid}-primary" class="primary">Primary Button</button>
+                </when>
+                <when test="//attributes/@variant = 'secondary'">
+                    <button data-testid="{$data-testid}-secondary" class="secondary">Secondary Button</button>
+                </when>
+                <otherwise>
+                    <button data-testid="{$data-testid}-otherwise" class="default">Default Button</button>
+                </otherwise>
+            </choose>
+        `,
+        payload: `
+            <multi-instance-test data-testid="btn1" variant="primary"></multi-instance-test>
+            <multi-instance-test data-testid="btn2" variant="secondary"></multi-instance-test>
+            <multi-instance-test data-testid="btn3" variant="unknown"></multi-instance-test>
+        `
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+
+        const btn1 = await canvas.findByTestId('btn1-primary');
+        expect(btn1).toHaveTextContent('Primary Button');
+        expect(btn1).toHaveClass('primary');
+
+        const btn2 = await canvas.findByTestId('btn2-secondary');
+        expect(btn2).toHaveTextContent('Secondary Button');
+        expect(btn2).toHaveClass('secondary');
+
+        const btn3 = await canvas.findByTestId('btn3-otherwise');
+        expect(btn3).toHaveTextContent('Default Button');
+        expect(btn3).toHaveClass('default');
+    }
+};
+
+
+export const MultipleIfOrderingIssue: Story = {
+    args: {
+        title: 'KNOWN ISSUE: Multiple IF blocks - out of order',
+        tag: 'multi-if-order-issue',
+        template: `
+            <div data-testid="whole-text">
+                <label><input type="checkbox" data-testid="toggle-a" slice="show-a" value="AA"  /> A</label>
+               
+                <hr/>
+                ▶
+                <if test="//show-a = 'AA'">
+                    !A
+                </if>            
+                ◀
+            </div>
+            <if test="//show-a = 'AA'">
+                <div data-testid="t-1">T1</div>
+            </if>            
+        `,
+        payload: `
+            <multi-if-order-issue></multi-if-order-issue>
+        `
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        // Initially ▶\s+◀ should be visible, !A should not
+        const container = await canvas.findByTestId('whole-text');
+        expect(container.textContent).to.toMatch(/▶\s+◀/);
+
+        // check A - show !A
+        const toggleA = await canvas.findByTestId('toggle-a');
+        debugger;
+        await userEvent.click(toggleA);
+
+        expect( await await canvas.findByTestId('t-1')).toBeInTheDocument();
+        // !A is rendered
+        expect(container.textContent).to.toMatch(/\!A/);
+        // !A afer ▶
+        expect(container.textContent).to.toMatch(/▶\s+\!A/);
+        // !A before ◀
+        expect(container.textContent).to.toMatch(/\!A\s+◀/);
+    }
+};
+
+//#region unit tests
+/* istanbul ignore else -- @preserve */
+if ('test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest')) {
+    const mod = await import('./xslt-conditionals.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook');
+    const { describe } = await import('vitest');
+    describe(meta.title, () => testStoryBook(mod, meta));
+}
+//#endregion