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 | 4x 4x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | // noinspection DuplicatedCode
import type { StoryObj } from '@storybook/web-components';
import {expect, within, userEvent, fireEvent} 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};
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);
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');
},
};
export const OrderPreservingOn2ndTransform:Story =
{ args : {title: 'Order preserving on 2nd transform', body:`
<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 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 data-testid="cb2">
<input type="checkbox" name="c2" />
click to display #2 bellow
</label>
<br data-testid="beforeC2"/>
<if test="//c2">
<p>#2</p>
</if>
</form>
</custom-element>
`}
, play: async ({canvasElement}) =>
{
const titleText = OrderPreservingOn2ndTransform.args!.title as string;
const canvas = within(canvasElement);
await canvas.findByText(titleText);
// userEvent breaks under FF in vitest, fireEvent works
await fireEvent.click(await canvas.findByTestId('cb1'));
await expect(await canvas.findByText('#1')).toBeInTheDocument();
await fireEvent.click(canvas.getByTestId('cb2'));
await expect(await canvas.findByText('#2')).toBeInTheDocument();
await expect(canvas.getByTestId("beforeC1").nextElementSibling).toEqual(canvas.getByTestId("isC1"))
},
};
export const ReadSystemValidityMessage:Story =
{ args : {title: 'read system validity message', body:`
<p>validationMessage propagated into slice as 'validation-message' attribute</p>
<ol>
<li> type in input field</li>
<li> delete input field content</li>
<li> observe the warning in string after input</li>
<li> Click Next observe the system warning in dropdown over input</li>
</ol>
<custom-element>
<template>
<form slice="email-form">
<label> Email
<input slice="username" slice-event="input" placeholder="non-empty" required data-testid="inp1">
</label>
<if test="//username/@validation-message">
<var data-testid="var1">{//username/@validation-message}</var>
</if>
<button data-testid="btn1">Next</button>
</form>
</template>
</custom-element>
`}
, play: async ({canvasElement}) =>
{
const titleText = ReadSystemValidityMessage.args!.title as string;
const canvas = within(canvasElement);
await canvas.findByText(titleText);
await userEvent.type(canvas.getByTestId('inp1'),'Hi');
await userEvent.clear(canvas.getByTestId('inp1'));
await userEvent.click(canvas.getByTestId('btn1'));
await expect(await canvas.findByTestId('var1')).toBeInTheDocument();
await expect(canvas.getByTestId("var1").textContent).toEqual(canvas.getByTestId("inp1").validationMessage);
await expect(canvas.getByTestId("var1").textContent.length>1).toEqual(true);
},
};
//#region unit tests
/* 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 ) );
}
//#endregion
|