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 | 5x 5x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | // 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) > 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) > 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
//#region unit tests
/* 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 ) );
}
//#endregion
|