Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 | 6x 6x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | // noinspection DuplicatedCode
import type { StoryObj } from '@storybook/web-components';
import {expect, userEvent, within} from '@storybook/test';
import {cloneAs, mix} from'../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: 'attributes'
// , tags: ['autodocs']
, render
};
export default meta;
export const CloneAs:Story =
{ args : {title: 'cloneAs(el,newTag)', body:`
<p><code>cloneAs()</code> used for conversion of <code>attribute</code> to <code>xsl:param</code></p>
<attribute data-testid="t1" >default_P1 </attribute>
<attribute data-testid="t2" select="'always_p2'" ></attribute>
<attribute data-testid="t3" ></attribute>
`}
, play: async ({canvasElement}) =>
{
const canvas = within(canvasElement);
const cmp = async ( tid:string ) =>
{ const t1 = await canvas.findByTestId(tid);
const c1 = cloneAs(t1, 'xsl:param');
for( let a of t1.attributes )
{ await expect(a.value).toEqual(c1.getAttribute(a.name)); }
await expect( c1.textContent ).toEqual(t1.textContent);
}
await cmp('t1');
await cmp('t2');
await cmp('t3');
},
};
export const Mix:Story =
{ args : {title: 'mix(to,from)', body:`
<p><code>mix(to,from)</code> used for <code>attribute</code> collections</p>
`}
, play: async () =>
{
await expect( mix({},{a:1,b:'2'})).toEqual({a:1,b:'2'});
},
};
export const AttributeDefaults:Story =
{ args : {title: 'Attributes definition', body:`
<p>Params needed to declare DCE attributes and track the attributes changes. It also is used by IDE and validation.</p>
<custom-element tag="dce-link" >
<template>
<attribute name="p1">default_P1</attribute>
<attribute name="p2" select="'always_p2'" ></attribute>
<attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
p1: <code data-testid="p1">{$p1}</code> <br/>
p2: <code data-testid="p2">{$p2}</code> <br/>
p3: <code data-testid="p3">{$p3}</code>
</template>
</custom-element>
<dce-link id="dce1"></dce-link>
`}
, play: async ({canvasElement}) =>
{
const titleText = AttributeDefaults.args!.title as string;
const canvas = within(canvasElement)
, code = async (id) => (await canvas.findByTestId(id)).textContent.trim();
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' );
},
};
export const AttributesRuntimeChange:Story =
{ args : {title: 'Attributes runtime change', body:`
<p>Params needed to declare DCE attributes and track the attributes changes. It also be used by IDE and validation.</p>
<custom-element tag="dce-link2" >
<template>
<attribute name="p1">default_P1 </attribute>
<attribute name="p2" select="'always_p2'" ></attribute>
<attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
p1: <code data-testid="t1">{$p1}</code> <br/>
p2: <code data-testid="t2">{$p2}</code> <br/>
p3: <code data-testid="t3">{$p3}</code>
</template>
</custom-element>
<section>
<dce-link2 id="dce2" p1="123" p2="override ignored as select is defined"></dce-link2> <br>
<div><input id="i1" value="P1"> <button onclick="dce2.setAttribute('p1',i1.value)"> set p1</button> </div>
<div><input id="i2" value="P2"> <button onclick="dce2.setAttribute('p2',i2.value)"> set p2</button> </div>
<div><input id="i3" value="P3"> <button onclick="dce2.setAttribute('p3',i3.value)"> set p3</button> </div>
</section>
`}
, play: async ({canvasElement}) =>
{
const canvas = within(canvasElement)
, code = async (id:string) => await canvas.findByTestId(id);
await sleep(20)
expect( await code('t1') ).toHaveTextContent('123' );
expect( await code('t2') ).toHaveTextContent('always_p2'); // no overrides due to value is hardcoded
expect( await code('t3') ).toHaveTextContent('def_P3' );
const dce2 = window.dce2;
dce2.setAttribute('P1',i1.value);
await expect(await canvas.findByText('P1')).toBeInTheDocument();
expect( await code('t1') ).toHaveTextContent('P1'); // 4. set p1 in runtime'
dce2.setAttribute('p2',i2.value);
// await expect(await canvas.findByText('P2')).toBeInTheDocument();
expect( canvas.getByTestId('t2') ).toHaveTextContent('always_p2'); // can not set p2 in runtime
dce2.setAttribute('p3',i3.value);
await expect(await canvas.findByText('P3')).toBeInTheDocument();
expect( canvas.getByTestId('t3') ).toHaveTextContent('P3'); // set p3 in runtime
},
};
export const InstanceAttributes:Story =
{ args : {title: 'Instance Attributes', body:`
<p>Params needed to declare DCE attributes and track the attributes changes. It also is used by IDE and validation.</p>
<custom-element tag="dce-link3" >
<template>
<attribute name="p1">default_P1 </attribute>
<attribute name="p2" select="'always_p2'" ></attribute>
<attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
p1: <code data-testid="p1">{$p1}</code> <br/>
p2: <code data-testid="p2">{$p2}</code> <br/>
p3: <code data-testid="p3">{$p3}</code>
</template>
</custom-element>
<dce-link3 id="dce3" p1="123" p3="qwe"></dce-link3> |
`}
, play: async ({canvasElement}) =>
{
const titleText = AttributeDefaults.args!.title as string;
const canvas = within(canvasElement)
, code = async (id) => (await canvas.findByTestId(id)).textContent.trim();
await sleep(20)
expect( await code('p1') ).toEqual('123' );
expect( await code('p2') ).toEqual('always_p2' );
expect( await code('p3') ).toEqual('qwe' );
},
};
export const AttributesPropagationUp:Story =
{ args : {title: 'Instance Attributes', body:`
<p>Attributes with value(p2) or <code>select</code>(p3) should be propagated to DCE</p>
<p>p1 attribute is not propagated as does not have the value.</p>
<custom-element tag="sample-el">
<template>
<attribute name="data-testid"></attribute>
<attribute name="p1"></attribute>
<attribute name="p2">DEFAULT VALUE</attribute>
<attribute name="p3" select=" //from-input ?? 'abc' "></attribute>
<input slice="from-input" slice-event="input"/><br/>
p1:<code data-testid="{$data-testid}-p1" >{ $p1 }</code><br/>
p2:<code data-testid="{$data-testid}-p2" >{ $p2 }</code><br/>
p2:<code data-testid="{$data-testid}-p3" >{ $p3 }</code><br/>
//from-input: {//from-input} <hr/>
</template>
</custom-element>
<sample-el data-testid="t1" value="123" ></sample-el>
<sample-el data-testid="t2" p1="P1" p2="123" p3="P3" ></sample-el>
<sample-el data-testid="t3" ></sample-el>
`}
, play: async ({canvasElement}) =>
{
const canvas = within(canvasElement)
, code = async (id:string) => (await canvas.findByTestId(id)).textContent?.trim();
await sleep(20)
await expect( await code('t1-p1') ).toEqual('' );
await expect( await code('t1-p2') ).toEqual('DEFAULT VALUE' );
await expect( await code('t1-p3') ).toEqual('abc' );
const t1 = await canvas.findByTestId('t1');
await expect( t1 ).toHaveAttribute('value','123');
await expect( t1 ).toHaveAttribute('p2','DEFAULT VALUE');
await expect( t1 ).toHaveAttribute('p3','abc');
await expect( t1 ).not.toHaveAttribute('p1');
await expect( await code('t2-p1') ).toEqual('P1' );
await expect( await code('t2-p2') ).toEqual('123' );
await expect( await code('t2-p3') ).toEqual('abc' );
const t2 = await canvas.findByTestId('t2');
await expect( t2 ).toHaveAttribute('p1','P1');
await expect( t2 ).toHaveAttribute('p2','123');
await expect( t2 ).toHaveAttribute('p3','abc');
await expect( await code('t3-p1') ).toEqual('' );
await expect( await code('t3-p2') ).toEqual('DEFAULT VALUE' );
await expect( await code('t3-p3') ).toEqual('abc' );
const t3 = await canvas.findByTestId('t3');
await expect( t1 ).not.toHaveAttribute('p1');
await expect( t3 ).toHaveAttribute('p2','DEFAULT VALUE');
await expect( t3 ).toHaveAttribute('p3','abc');
t3.querySelector('input')?.focus();
await userEvent.keyboard('DCE');
await expect( t3 ).toHaveAttribute('p3','DCE');
},
};
//#region unit tests
/* istanbul ignore else -- @preserve */
if( 'test' === import.meta.env.MODE &&
!import.meta.url.includes('skiptest') )
{
const mod = await import('./attributes.test.stories.ts?skiptest');
const { testStoryBook } = await import('./testStoryBook')
const { describe } = await import('vitest')
describe(meta.title, () => testStoryBook( mod, meta ) );
}
//#endregion
|