@volverjs/ui-vue 0.0.1-beta.11 → 0.0.1-beta.16

package/src/stories/RadioGroup/RadioGroupHintLabel.stories.mdx

@@ -1,9 +1,7 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
-import { labelTest, radioGroupTest } from './RadioProperty.test.ts'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
+import { labelTest } from './RadioGroup.test'
 
 <Meta title="Components/RadioGroup/HintLabel" component={VvRadioGroup} />
 
@@ -12,21 +10,21 @@ import { labelTest, radioGroupTest } from './RadioProperty.test.ts'
 <Canvas>
 	<Story
 		name="HintLabel"
-		play={async ({ canvasElement, args }) => {
-			labelTest(
-				{ canvasElement, args },
-				{ child: 1, propName: 'hintLabel' }
-			)
+		play={async (ctx) => {
+			labelTest(ctx, {
+				child: 1,
+				propName: 'hintLabel'
+			})
 		}}
 		args={{
 			name: 'vv-group-options-hint-label',
 			options: [
-				{ value: 1, name: 'Mela' },
-				{ value: 2, name: 'Pera' },
-				{ value: 3, name: 'Banana' }
+				{ value: 1, name: 'First' },
+				{ value: 2, name: 'Second' },
+				{ value: 3, name: 'Third' }
 			],
-			optionLabel: (o) => `Frutto: ${o.name}`,
-			hintLabel: 'Prova prova prova prova',
+			optionLabel: (o) => `${o.name} option`,
+			hintLabel: 'Lorem ipsum dolor sit amet',
 			role: 'radiogroup'
 		}}
 	/>

package/src/stories/RadioGroup/RadioGroupLabel.stories.mdx

@@ -1,10 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
 import { Template } from './RadioGroup.stories.mdx'
-import { labelTest } from './RadioPropertyTest.js'
+import { labelTest } from './RadioGroup.test'
 
 <Meta title="Components/RadioGroup/Label" component={VvRadioGroup} />
 
@@ -13,13 +11,18 @@ import { labelTest } from './RadioPropertyTest.js'
 <Canvas>
 	<Story
 		name="Label"
-		play={labelTest}
+		play={async (ctx) => {
+			labelTest(ctx, {
+				chid: 0,
+				propName: 'label'
+			})
+		}}
 		args={{
 			name: 'story-label',
 			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
+				{ value: 1, label: 'Option 1' },
+				{ value: 2, label: 'Option 2' },
+				{ value: 3, label: 'Option 3' }
 			],
 			label: 'Custom label',
 			role: 'radiogroup'

package/src/stories/RadioGroup/RadioGroupOptionLabel.stories.mdx

@@ -1,14 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
-import {
-	mainOptionsTest,
-	optionsLabelStringTest,
-	optionsLabelFunctionTest
-} from './RadioOptionsTest'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
 import { Template } from './RadioGroup.stories.mdx'
+import { radioOptionsTest } from './RadioGroup.test'
 
 <Meta title="Components/RadioGroup/OptionLabel" component={VvRadioGroup} />
 
@@ -19,46 +13,38 @@ Change object prop for label
 <Canvas>
 	<Story
 		name="OptionsLabel - string"
-		play={(ctx) =>
-			mainOptionsTest({
-				...ctx,
-				functions: [optionsLabelStringTest]
-			})
-		}
+		play={radioOptionsTest}
 		args={{
 			name: 'options',
 			options: [
-				{ value: 1, name: 'Mela' },
-				{ value: 2, name: 'Pera' },
-				{ value: 3, name: 'Banana' }
+				{ value: 1, name: 'Option 1' },
+				{ value: 2, name: 'Option 2' },
+				{ value: 3, name: 'Option 3' }
 			],
-			optionLabel: 'name'
+			optionLabel: 'name',
+			role: 'radiogroup'
 		}}>
 		{Template.bind({})}
 	</Story>
 </Canvas>
 
-# OptionLabel Function
+# OptionLabel function
 
 Use function to define option label
 
 <Canvas>
 	<Story
 		name="OptionsLabel - function"
-		play={(ctx) =>
-			mainOptionsTest({
-				...ctx,
-				functions: [optionsLabelFunctionTest]
-			})
-		}
+		play={radioOptionsTest}
 		args={{
 			name: 'options',
 			options: [
-				{ value: 1, name: 'Mela' },
-				{ value: 2, name: 'Pera' },
-				{ value: 3, name: 'Banana' }
+				{ value: 1, name: 'First' },
+				{ value: 2, name: 'Second' },
+				{ value: 3, name: 'Third' }
 			],
-			optionLabel: (o) => `Frutto: ${o.name}`
+			optionLabel: (o) => `${o.name} option`,
+			role: 'radiogroup'
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/RadioGroup/RadioGroupOptionValue.stories.mdx

@@ -1,14 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
-import {
-	mainOptionsTest,
-	optionsValueStringTest,
-	optionsValueFunctionTest
-} from './RadioOptionsTest.js'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
 import { Template } from './RadioGroup.stories.mdx'
+import { radioOptionsTest } from './RadioGroup.test'
 
 <Meta title="Components/RadioGroup/OptionsValue" component={VvRadioGroup} />
 
@@ -19,20 +13,16 @@ Change object prop for value
 <Canvas>
 	<Story
 		name="OptionsValue - string"
-		play={(ctx) =>
-			mainOptionsTest({
-				...ctx,
-				functions: [optionsValueStringTest]
-			})
-		}
+		play={radioOptionsTest}
 		args={{
 			name: 'options',
 			options: [
-				{ qta: 1, label: 'Mela' },
-				{ qta: 2, label: 'Pera' },
-				{ qta: 3, label: 'Banana' }
+				{ qta: 1, label: 'Option 1' },
+				{ qta: 2, label: 'Option 2' },
+				{ qta: 3, label: 'Option 3' }
 			],
-			optionValue: 'qta'
+			optionValue: 'qta',
+			role: 'radiogroup'
 		}}>
 		{Template.bind({})}
 	</Story>
@@ -45,20 +35,16 @@ Use function to define option value
 <Canvas>
 	<Story
 		name="OptionsValue - function"
-		play={(ctx) =>
-			mainOptionsTest({
-				...ctx,
-				functions: [optionsValueFunctionTest]
-			})
-		}
+		play={radioOptionsTest}
 		args={{
 			name: 'options',
 			options: [
-				{ qta: 1, label: 'Mela' },
-				{ qta: 2, label: 'Pera' },
-				{ qta: 3, label: 'Banana' }
+				{ qta: 1, label: 'Option 1' },
+				{ qta: 2, label: 'Option 2' },
+				{ qta: 3, label: 'Option 3' }
 			],
-			optionValue: (o) => `${o.qta}_${o.label}`
+			optionValue: (o) => `${o.qta}_${o.label}`,
+			role: 'radiogroup'
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/RadioGroup/RadioGroupOptions.stories.mdx

@@ -1,14 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
-import {
-	mainOptionsTest,
-	radioOptionsTest,
-	arrayOptionsTest
-} from './RadioOptionsTest.js'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
 import { Template } from './RadioGroup.stories.mdx'
+import { radioOptionsTest, arrayOptionsTest } from './RadioGroup.test'
 
 <Meta title="Components/RadioGroup/Options" component={VvRadioGroup} />
 
@@ -19,18 +13,13 @@ Check group based on list of object list
 <Canvas>
 	<Story
 		name="Options"
-		play={(ctx) =>
-			mainOptionsTest({
-				...ctx,
-				functions: [radioOptionsTest]
-			})
-		}
+		play={radioOptionsTest}
 		args={{
 			name: 'options',
 			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
+				{ value: 1, label: 'Option 1' },
+				{ value: 2, label: 'Option 2' },
+				{ value: 3, label: 'Option 3' }
 			],
 			role: 'radiogroup'
 		}}>
@@ -43,15 +32,10 @@ Check group based on list of object list
 <Canvas>
 	<Story
 		name="Options as Array"
-		play={(ctx) =>
-			mainOptionsTest({
-				...ctx,
-				functions: [arrayOptionsTest]
-			})
-		}
+		play={arrayOptionsTest}
 		args={{
 			name: 'options',
-			options: ['Primo', 'Secondo', 'Terzo']
+			options: ['First', 'Second', 'Third']
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/RadioGroup/RadioGroupReadonly.stories.mdx

@@ -1,10 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
-import { readonlyTest } from './RadioProperty.test.ts'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
 import { Template } from './RadioGroup.stories.mdx'
+import { readonlyTest } from './RadioGroup.test'
 
 <Meta title="Components/RadioGroup/Readonly" component={VvRadioGroup} />
 
@@ -17,9 +15,9 @@ import { Template } from './RadioGroup.stories.mdx'
 		args={{
 			name: 'readonly',
 			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
+				{ value: 1, label: 'Option 1' },
+				{ value: 2, label: 'Option 2' },
+				{ value: 3, label: 'Option 3' }
 			],
 			readonly: true,
 			role: 'radiogroup'

package/src/stories/RadioGroup/RadioGroupSlots.stories.mdx

@@ -1,9 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-
-import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
-import { slotsTest } from './RadioSlotsTest.js'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
+import { slotsTest } from './RadioGroup.test'
 
 <Meta title="Components/RadioGroup/Slots" component={VvRadioGroup} />
 
@@ -22,17 +20,13 @@ import { slotsTest } from './RadioSlotsTest.js'
 				setup() {
 					return { args }
 				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-radio-group v-bind="args" v-model:modelValue="selected">
-                            <vv-radio id="o1" name="opts" value="1">Opt 1</vv-radio>
-                            <vv-radio id="o2" name="opts" value="2">Opt 2</vv-radio>
-                            <vv-radio id="o3" name="opts" value="3">Opt 3</vv-radio>
-                        </vv-radio-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong> 
-                    </div>
+				template: `
+					<vv-radio-group v-bind="args" v-model="selected" data-testId="radiogroup">
+						<vv-radio id="o1" name="opts" value="1">Option 1</vv-radio>
+						<vv-radio id="o2" name="opts" value="2">Option 2</vv-radio>
+						<vv-radio id="o3" name="opts" value="3">Option 3</vv-radio>
+					</vv-radio-group>
+					<strong v-if="selected">Selected options: {{selected}} </strong> 
                     `
 			}
 		}}
@@ -44,11 +38,10 @@ import { slotsTest } from './RadioSlotsTest.js'
 <Canvas>
 	<Story
 		name="Hint"
-		play={async ({ canvasElement }) => {
-			slotsTest({ canvasElement })
-		}}
+		play={slotsTest}
 		args={{
-			name: 'story-slot-hint'
+			name: 'story-slot-hint',
+			role: 'radiogroup'
 		}}>
 		{(args) => {
 			return {
@@ -57,22 +50,17 @@ import { slotsTest } from './RadioSlotsTest.js'
 				setup() {
 					return { args }
 				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-radio-group v-bind="args" v-model:modelValue="selected" role="radiogroup">
-                            <template v-slot:default>
-                                <vv-radio id="o1" name="opts" value="1">Opt 1</vv-radio>
-                                <vv-radio id="o2" name="opts" value="2">Opt 2</vv-radio>
-                                <vv-radio id="o3" name="opts" value="3">Opt 3</vv-radio>
-                            </template>
-                            <template v-slot:hint="slotProps">
-                                <p>Ciao sono lo slot HINT! {{slotProps}}</p> 
-                            </template>
-                        </vv-radio-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong>
-                    </div>
+				template: `
+					<vv-radio-group v-model="selected" v-bind="args" data-testId="radiogroup">
+						<vv-radio id="o1" name="opts" value="1">Option 1</vv-radio>
+						<vv-radio id="o2" name="opts" value="2">Option 2</vv-radio>
+						<vv-radio id="o3" name="opts" value="3">Option 3</vv-radio>
+						<template #hint="slotProps">
+							<div>Hint label</div>
+							<div>{{slotProps}}</div> 
+						</template>
+					</vv-radio-group>
+					<strong v-if="selected">Selected options: {{selected}} </strong>
                     `
 			}
 		}}
@@ -85,11 +73,12 @@ import { slotsTest } from './RadioSlotsTest.js'
 	<Story
 		name="Valid"
 		play={async ({ canvasElement }) => {
-			slotsTest({ canvasElement }, 'valid')
+			slotsTest({ canvasElement }, { className: 'valid' })
 		}}
 		args={{
 			name: 'story-slot-valid',
-			valid: true
+			valid: true,
+			role: 'radiogroup'
 		}}>
 		{(args) => {
 			return {
@@ -98,22 +87,16 @@ import { slotsTest } from './RadioSlotsTest.js'
 				setup() {
 					return { args }
 				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-radio-group v-bind="args" v-model:modelValue="selected" role="radiogroup">
-                            <template v-slot:default>
-                                <vv-radio id="o1" name="opts" value="1">Opt 1</vv-radio>
-                                <vv-radio id="o2" name="opts" value="2">Opt 2</vv-radio>
-                                <vv-radio id="o3" name="opts" value="3">Opt 3</vv-radio>
-                            </template>
-                            <template v-slot:valid>
-                                <p>Ciao sono lo slot VALID!</p>
-                            </template>
-                        </vv-radio-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong>
-                    </div>
+				template: `
+					<vv-radio-group v-model="selected" v-bind="args" data-testId="radiogroup">
+						<vv-radio id="o1" name="opts" value="1">Option 1</vv-radio>
+						<vv-radio id="o2" name="opts" value="2">Option 2</vv-radio>
+						<vv-radio id="o3" name="opts" value="3">Option 3</vv-radio>
+						<template #valid>
+							Valid message
+						</template>
+					</vv-radio-group>
+					<strong v-if="selected">Selected options: {{selected}} </strong>
                     `
 			}
 		}}
@@ -126,11 +109,12 @@ import { slotsTest } from './RadioSlotsTest.js'
 	<Story
 		name="Error"
 		play={async ({ canvasElement }) => {
-			slotsTest({ canvasElement }, 'invalid')
+			slotsTest({ canvasElement }, { className: 'invalid' })
 		}}
 		args={{
 			name: 'story-slot-error',
-			error: true
+			error: true,
+			role: 'radiogroup'
 		}}>
 		{(args) => {
 			return {
@@ -139,22 +123,16 @@ import { slotsTest } from './RadioSlotsTest.js'
 				setup() {
 					return { args }
 				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-radio-group v-bind="args" v-model:modelValue="selected" role="radiogroup">
-                            <template v-slot:default>
-                                <vv-radio id="o1" name="opts" value="1">Opt 1</vv-radio>
-                                <vv-radio id="o2" name="opts" value="2">Opt 2</vv-radio>
-                                <vv-radio id="o3" name="opts" value="3">Opt 3</vv-radio>
-                            </template>
-                            <template v-slot:error>
-                                <p>Ciao sono lo slot ERROR!</p>
+				template: `
+                        <vv-radio-group v-model="selected" v-bind="args" data-testId="radiogroup">
+							<vv-radio id="o1" name="opts" value="1">Option 1</vv-radio>
+							<vv-radio id="o2" name="opts" value="2">Option 2</vv-radio>
+							<vv-radio id="o3" name="opts" value="3">Option 3</vv-radio>
+                            <template #error>
+                               Error message
                             </template>
                         </vv-radio-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong>
-                    </div>
+                        <strong v-if="selected">Selected options: {{selected}} </strong>
                     `
 			}
 		}}

package/src/stories/RadioGroup/RadioGroupValid.stories.mdx

@@ -1,10 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
-import { radioGroupTest } from './RadioProperty.test.ts'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
 import { Template } from './RadioGroup.stories.mdx'
+import { radioGroupTest } from './RadioGroup.test'
 
 <Meta title="Components/RadioGroup/Valid" component={VvRadioGroup} />
 
@@ -15,19 +13,19 @@ import { Template } from './RadioGroup.stories.mdx'
 		name="Valid"
 		play={async (ctx) => {
 			radioGroupTest(ctx, {
-				className: 'vv-input-radio-group--valid'
+				className: 'vv-radio-group--valid'
 			})
 		}}
 		args={{
 			name: 'vv-group-options-valid-label',
 			options: [
-				{ value: 1, name: 'Mela' },
-				{ value: 2, name: 'Pera' },
-				{ value: 3, name: 'Banana' }
+				{ value: 1, name: 'First' },
+				{ value: 2, name: 'Second' },
+				{ value: 3, name: 'Third' }
 			],
-			optionLabel: (o) => `Frutto: ${o.name}`,
+			optionLabel: (o) => `${o.name} option`,
 			valid: true,
-			validLabel: 'Campo corretto',
+			validLabel: 'Valid label',
 			role: 'radiogroup'
 		}}>
 		{Template.bind({})}

package/src/stories/RadioGroup/RadioGroupVertical.stories.mdx

@@ -1,10 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
-import { radioGroupTest } from './RadioProperty.test.ts'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
 import { Template } from './RadioGroup.stories.mdx'
+import { radioGroupTest } from './RadioGroup.test'
 
 <Meta title="Components/RadioGroup/Vertical" component={VvRadioGroup} />
 
@@ -21,9 +19,9 @@ import { Template } from './RadioGroup.stories.mdx'
 		args={{
 			name: 'vertical',
 			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
+				{ value: 1, label: 'Option 1' },
+				{ value: 2, label: 'Option 2' },
+				{ value: 3, label: 'Option 3' }
 			],
 			vertical: true,
 			role: 'radiogroup'

package/src/stories/Select/Select.stories.mdx

@@ -1,31 +1,32 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
-import { VvSelectProps } from '../../components/VvSelect/VvSelect'
-import ObjectUtilities from '../../utils/ObjectUtilities'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { VvSelectProps } from '@/components/VvSelect'
+import { propsToObject } from '@/utils/ObjectUtilities'
+import { selectTest } from './Select.test'
 
 <Meta
 	title="Components/Select"
 	component={VvSelect}
-	args={{
-		...ObjectUtilities.propsToObject(VvSelectProps),
-		maxValues: -1,
-		label: 'Lorem Ipsum',
-		placeholder: 'Placeholder',
-		options: [
-			{
-				label: 'Option 1',
-				value: 1
-			},
-			{
-				label: 'Option 2',
-				value: 2
-			},
-			{
-				label: 'Option 3',
-				value: 3
-			}
-		]
-	}}
+    args={{
+    	...propsToObject(VvSelectProps),
+    	label: 'Lorem Ipsum',
+    	placeholder: 'Placeholder',
+    	options: [
+    		{
+    			label: 'Option 1',
+    			value: 1
+    		},
+    		{
+    			label: 'Option 2',
+    			value: 2
+    		},
+    		{
+    			label: 'Option 3',
+    			value: 3
+    		}
+    	]
+    }}
+
 />
 
 export const Template = (args) => ({
@@ -35,14 +36,14 @@ export const Template = (args) => ({
 	},
 	data() {
 		return {
-			value: '',
+			value: undefined,
 			optionsString: ['Option 4', 'Option 5', 'Option 6']
 		}
 	},
-	template: `<div class="w-1/2">
-            <vv-select v-bind="args" v-model:modelValue="value" />
-			value: {{ value }}
-        </div>`
+	template: `
+		<vv-select v-bind="args" v-model="value" data-testId="select" />
+		<div>Selected: {{ value }} </div>
+		`
 })
 
 # VvSelect
@@ -51,5 +52,7 @@ Stories of `VvSelect`.
 Let's define a story for our playground `select`:
 
 <Canvas>
-	<Story name="vv-select">{Template.bind({})}</Story>
+	<Story name="vv-select" play={selectTest}>
+		{Template.bind({})}
+	</Story>
 </Canvas>