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

package/src/stories/Select/Select.test.ts

@@ -0,0 +1,104 @@
+import type { PlayAttributes, ComponentConfig } from '@/test/types'
+import { expect } from '@/test/expect'
+import { userEvent } from '@storybook/testing-library'
+import { within } from '@storybook/testing-library'
+
+export async function selectTest(
+	{ canvasElement, ...data }: PlayAttributes,
+	{ isClickDisabled = false, className = null }: ComponentConfig = {}
+) {
+	const selectParent = (await within(canvasElement).findByTestId(
+		'select'
+	)) as HTMLDetailsElement
+	// classes test
+	expect(selectParent).toHaveClass('vv-select')
+	className && expect(selectParent).toHaveClass(className)
+	const select = document.getElementsByClassName(
+		'vv-dropdown'
+	)[0] as HTMLInputElement
+	expect(select.parentElement).toHaveClass('vv-select__wrapper')
+	const selectInput = document.getElementsByClassName(
+		'vv-select__input'
+	)[0] as HTMLInputElement
+
+	// placeholder test
+	data.args.placeholder &&
+		expect(select.outerHTML).toContain(
+			`placeholder="${data.args.placeholder}"`
+		)
+
+	// test every select option
+	const selectItems = Array.from(select.children)
+	let checkedOptions = 0
+	for (let index = 0; index < selectItems.length; index++) {
+		const label = selectItems[index].children[0]
+
+		// click test
+		if (isClickDisabled) {
+			await expect(label).not.toBeClicked()
+		} else {
+			await expect(label).toBeClicked()
+			const option = data.args.options[index]
+
+			//  value and useObject test
+			const inputRadio = label.children[0] as HTMLInputElement
+			data.args.useObject
+				? expect(document.getElementById('value')?.innerText).toEqual(
+						`Value: { "label": "${option.label}", "value": ${option.value} }`
+				  )
+				: expect(inputRadio.value).toEqual(
+						option.value ? `${option.value}` : `${option}`
+				  )
+
+			// maxValues, label and v-model test
+			if (data.args.multiple) {
+				if (checkedOptions == data.args.maxValues) {
+					expect(inputRadio.checked).toBe(false)
+				} else {
+					expect(inputRadio.checked).toEqual(true)
+					expect(
+						label.textContent && selectInput.innerText
+					).toContain(option.label ? `${option.label}` : `${option}`)
+
+					// separator test
+					data.args.separator &&
+						index > 0 &&
+						expect(selectInput.innerText).toContain(
+							data.args.separator
+						)
+				}
+			} else {
+				expect(label.textContent && selectInput.innerText).toEqual(
+					option.label ? `${option.label}` : `${option}`
+				)
+			}
+			inputRadio.checked && checkedOptions++
+		}
+	}
+
+	// multiple test
+	if (data.args.multiple) {
+		let checkedOptions = 0
+		for (let index = 0; index < selectItems.length; index++) {
+			const option = selectItems[index]
+			const optionLabel = option.children[0] as HTMLInputElement
+			const optionRadio = optionLabel.children[0] as HTMLInputElement
+			optionRadio.checked && checkedOptions++
+		}
+		expect(checkedOptions).toBeGreaterThan(0)
+	}
+
+	expect(selectParent).toHaveNoViolations()
+}
+
+export async function searchableTest() {
+	const summary = document.getElementsByTagName('summary')[0]
+	await userEvent.click(summary)
+	setTimeout(() => {
+		userEvent.keyboard('Option 1')
+	}, 700)
+	const optionsList = Array.from(
+		document.getElementsByClassName('vv-dropdown')
+	)
+	expect(optionsList.length).toBe(1)
+}

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

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
 
 <Meta title="Components/Select/Props/disabled" />
 
@@ -19,7 +19,7 @@ Let's define a story for our `disabled` select.
 					}
 				},
 				template: `<div class="w-1/2">
-						<vv-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" disabled />
+						<vv-select v-model="value" :options="options" placeholder="Placeholder" label="Label 1" disabled />
 					</div>`
 			}
 		}}
@@ -28,5 +28,5 @@ Let's define a story for our `disabled` select.
 
 <Source
 	language="html"
-	code={`<vv-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" disabled />`}
+	code={`<vv-select v-model="value" :options="options" placeholder="Placeholder" label="Label 1" disabled />`}
 />

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

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
 
 <Meta title="Components/Select/Props/maxValues" />
 
@@ -19,7 +19,7 @@ Let's define a story for our multple `max-values` select.
 					}
 				},
 				template: `<div class="w-1/2">
-						<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple max-values="2" />
+						<vv-select v-model="value" :options="options" label="Label 1" multiple max-values="2" />
 						value: {{ value }}
 					</div>`
 			}
@@ -29,5 +29,5 @@ Let's define a story for our multple `max-values` select.
 
 <Source
 	language="html"
-	code={`<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple max-values="2" />`}
+	code={`<vv-select v-model="value" :options="options" label="Label 1" multiple max-values="2" />`}
 />

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

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
 
 <Meta title="Components/Select/Props/multiple" />
 
@@ -49,10 +49,9 @@ Let's define a story for our `multiple` select.
 						]
 					}
 				},
-				template: `<div class="w-1/2">
-						<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple />
-						value: {{ value }}
-					</div>`
+				template: `
+					<vv-select v-model="value" :options="options" label="Label 1" multiple placeholder="Select" />
+					<div>Value: {{ value }}</div>`
 			}
 		}}
 	</Story>
@@ -60,5 +59,5 @@ Let's define a story for our `multiple` select.
 
 <Source
 	language="html"
-	code={`<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple />`}
+	code={`<vv-select v-model="value" :options="options" label="Label 1" multiple />`}
 />

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

@@ -0,0 +1,43 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { Template } from './Select.stories.mdx'
+import { VvSelectProps } from '@/components/VvSelect'
+import { propsToObject } from '@/utils/ObjectUtilities'
+
+<Meta title="Components/Select/Props/native" />
+
+# VvSelect native
+
+Let's define a story for our `native` select.
+
+<Canvas>
+	<Story
+		name="native"
+		args={{
+			...propsToObject(VvSelectProps),
+			label: 'Lorem Ipsum',
+			placeholder: 'Placeholder',
+			options: [
+				{
+					label: 'Option 1',
+					value: 1
+				},
+				{
+					label: 'Option 2',
+					value: 2
+				},
+				{
+					label: 'Option 3',
+					value: 3
+				}
+			],
+			native: true
+		}}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Source
+	language="html"
+	code={`<vv-select v-model="value" :options="options" placeholder="Placeholder" label="Label 1" native />`}
+/>

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

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
 
 <Meta title="Components/Select/Props/options" />
 
@@ -59,11 +59,11 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 				},
 				template: `<div class="flex gap-32">
 						<div class="w-1/2">
-							<vv-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" />
+							<vv-select v-model="value" :options="options" placeholder="Placeholder" label="Label 1" />
 							value: {{ value }}
 						</div>
 						<div class="w-1/2">
-							<vv-select v-model:modelValue="objectValue" :options="optionsObject" placeholder="Placeholder" label="Label 1" />
+							<vv-select v-model="objectValue" :options="optionsObject" placeholder="Placeholder" label="Label 1" />
 							value: {{ objectValue }}
 						</div>
 					</div>`
@@ -74,5 +74,5 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 
 <Source
 	language="html"
-	code={`<vv-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" />`}
+	code={`<vv-select v-model="value" :options="options" placeholder="Placeholder" label="Label 1" />`}
 />

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

@@ -1,5 +1,6 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { searchableTest } from './Select.test'
 
 <Meta title="Components/Select/Props/searchable" />
 
@@ -28,7 +29,7 @@ Let's define a story for our select with props:
 />
 
 <Canvas>
-	<Story name="searchable">
+	<Story name="searchable" play={searchableTest}>
 		{() => {
 			return {
 				components: { VvSelect },
@@ -52,15 +53,15 @@ Let's define a story for our select with props:
 						]
 					}
 				},
-				template: `<div class="w-1/2 flex gap-32">
-						<vv-select v-model:modelValue="value" @change:search="searchText = $event" :options="options" label="Label 1" searchable label-no-result="No results" search-placeholder="Search" debounce-search="1000" />
-						<div class="my-auto">
-							search text: {{ searchText }}
-						</div>
-						<div class="my-auto">
-							value: {{ value }}
-						</div>
-					</div>`
+				template: `
+					<vv-select v-model="value" @change:search="searchText = $event" :options="options" label="Label 1" searchable label-no-result="No results" search-placeholder="Search" debounce-search="1000" />
+					<div>
+						Search: {{ searchText }}
+					</div>
+					<div>
+						Selected: {{ value }}
+					</div>
+				`
 			}
 		}}
 	</Story>
@@ -69,7 +70,7 @@ Let's define a story for our select with props:
 <Source
 	language="html"
 	code={`<vv-select
-	v-model:modelValue="value"
+	v-model="value"
 	:options="options"
 	label="Label 1"
 	searchable

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

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
 
 <Meta title="Components/Select/Props/separator" />
 
@@ -50,7 +50,7 @@ Let's define a story for our `separator` select.
 					}
 				},
 				template: `<div class="w-1/2">
-						<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple separator=" - " />
+						<vv-select v-model="value" :options="options" label="Label 1" multiple separator=" - " />
 						value: {{ value }}
 					</div>`
 			}
@@ -60,5 +60,5 @@ Let's define a story for our `separator` select.
 
 <Source
 	language="html"
-	code={`<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple separator=" - " />`}
+	code={`<vv-select v-model="value" :options="options" label="Label 1" multiple separator=" - " />`}
 />

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

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
 
 <Meta title="Components/Select/Props/useObject" />
 
@@ -52,7 +52,7 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 					}
 				},
 				template: `<div class="w-1/2">
-						<vv-select v-model:modelValue="value" :options="options" label="Label 1" use-object />
+						<vv-select v-model="value" :options="options" label="Label 1" use-object />
 						value: {{ value }}
 					</div>`
 			}
@@ -62,5 +62,5 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 
 <Source
 	language="html"
-	code={`<vv-select v-model:modelValue="value" :options="options" label="Label 1" use-object />`}
+	code={`<vv-select v-model="value" :options="options" label="Label 1" use-object />`}
 />

package/src/stories/Textarea/Textarea.stories.mdx

@@ -1,10 +1,9 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
 import { toGroup } from '../utils'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
-import { VvTextareaProps } from '../../components/VvTextarea/VvTextarea'
+import { propsToObject } from '@/utils/ObjectUtilities'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
+import { VvTextareaProps } from '@/components/VvTextarea'
 
 <Meta title="Components/Textarea" component={VvTextarea} />
 
@@ -16,11 +15,8 @@ export const Template = (args, { argTypes }) => ({
 	},
 	data: () => ({ value: args.modelValue || '' }),
 	template: `
-		<div class="flex flex-col justify-between">
-			<vv-textarea v-bind="args" v-model:modelValue="value"/>
-			<strong v-if="value">Valore: {{value}} </strong> 
-		</div>
-        `
+		<vv-textarea v-model="value" v-bind="args" data-testId="textarea" />
+		<div>Value: <span data-testId="value">{{value}}</span></div>`
 })
 
 # VvTextarea
@@ -31,7 +27,7 @@ export const Template = (args, { argTypes }) => ({
 	<Story
 		name="vv-textarea"
 		args={{
-			...ObjectUtilities.propsToObject(VvTextareaProps),
+			...propsToObject(VvTextareaProps),
 			maxlength: null
 		}}
 		argTypes={{

package/src/stories/Textarea/Textarea.test.ts

@@ -0,0 +1,204 @@
+import type { PlayAttributes, ComponentConfig } from '@/test/types'
+import { within, userEvent } from '@storybook/testing-library'
+import { expect } from '@/test/expect'
+import { sleep } from '@/test/sleep'
+
+export async function textareaTest(
+	{ canvasElement, ...data }: PlayAttributes = {} as PlayAttributes,
+	{
+		isClickDisabled = false,
+		className = null,
+		customText = null
+	}: ComponentConfig = {}
+) {
+	const textareaWrapperParent = await within(canvasElement).findByTestId(
+		'textarea'
+	)
+	const textarea = textareaWrapperParent.querySelector(
+		'textarea'
+	) as HTMLTextAreaElement
+
+	// click test
+	if (isClickDisabled) {
+		await expect(textarea).not.toBeClicked()
+	} else {
+		await expect(textarea).toBeClicked()
+		await userEvent.click
+
+		// test maxlength and text
+		const text = customText || 'Lorem ipsum'
+		userEvent.keyboard(text)
+		if (!data.args.limit && data.args.maxlength) {
+			data.args.maxlength >= text.length
+				? expect(textarea.value).toEqual(text)
+				: expect(textarea.value.length).toEqual(data.args.maxlength)
+		} else {
+			expect(textarea.value).toEqual(data.args.modelValue || text)
+		}
+	}
+
+	// test html attributes
+	const baseAttrs = ['id', 'name', 'placeholder', 'required', 'rows', 'cols']
+	baseAttrs.forEach((attr) => {
+		data.args[attr] &&
+			expect(textarea.getAttribute(attr)).toEqual(data.args[attr])
+	})
+	data.args.readonly && expect(textarea.readOnly).toEqual(data.args.readonly)
+
+	// test label and modelValue
+	data.args.label &&
+		expect(
+			(textareaWrapperParent.firstChild as HTMLTextAreaElement)?.innerText
+		).toEqual(data.args.label)
+	data.args.modelValue && expect(textarea.value).toEqual(data.args.modelValue)
+
+	// class test
+	await sleep()
+	expect(textareaWrapperParent).toHaveClass([
+		'vv-textarea',
+		'vv-textarea--dirty'
+	])
+	className && expect(textareaWrapperParent).toHaveClass(className)
+	expect(textareaWrapperParent).toHaveNoViolations()
+}
+
+export async function autoclearTest({
+	canvasElement,
+	...data
+}: PlayAttributes) {
+	const textareaWrapperParent = await within(canvasElement).findByTestId(
+		'textarea'
+	)
+	const textarea = textareaWrapperParent.querySelector(
+		'textarea'
+	) as HTMLTextAreaElement
+	expect(data.args.autoclear).toBe(true)
+	await textareaTest({ canvasElement, ...data })
+	const button = document.getElementsByClassName(
+		'vv-button'
+	)[0] as HTMLButtonElement
+	await expect(button).toBeClicked()
+	await sleep()
+	expect(textarea.value).toBe('')
+}
+
+export async function hintLabelTest(
+	{ canvasElement, ...data }: PlayAttributes,
+	{ className }: ComponentConfig
+) {
+	const textareaWrapperParent = await within(canvasElement).findByTestId(
+		'textarea'
+	)
+	let propLabel: string | string[]
+	const hintLabel = (textareaWrapperParent.lastChild as HTMLElement)
+		?.innerText
+
+	// test hint label based on his prop
+	if (data.args.loading) {
+		data.args.error || data.args.valid
+			? (propLabel = data.args.loadingLabel)
+			: (propLabel = data.args.loadingLabel)
+	} else if (data.args.error) {
+		propLabel = data.args.errorLabel
+	} else if (data.args.valid) {
+		propLabel = data.args.validLabel
+	} else {
+		propLabel = data.args.hintLabel
+	}
+	if (typeof propLabel == 'string') {
+		expect(hintLabel).toEqual(propLabel)
+	}
+	if (Array.isArray(propLabel)) {
+		propLabel.forEach((label) => {
+			expect(hintLabel).toContain(label)
+		})
+	}
+	await textareaTest({ canvasElement, ...data }, { className: className })
+}
+
+export async function limitTest({ canvasElement, ...data }: PlayAttributes) {
+	const textareaWrapperParent = await within(canvasElement).findByTestId(
+		'textarea'
+	)
+	const textarea = textareaWrapperParent.querySelector(
+		'textarea'
+	) as HTMLTextAreaElement
+	const limit = document.getElementsByClassName(
+		'vv-textarea__limit'
+	)[0] as HTMLElement
+	!data.args.maxlength &&
+		expect(textarea.value.length).toEqual(parseInt(limit.innerText))
+	await textareaTest({ canvasElement, ...data })
+	if (data.args.maxlength) {
+		while (textarea.value.length < data.args.maxlength)
+			await userEvent.keyboard(
+				' dolor sit amet, consectetur adipiscing elit'
+			)
+		expect(textarea.value.length).toEqual(data.args.maxlength)
+		data.args.limit == true &&
+			expect(limit.innerText).toEqual(
+				`${textarea.value.length}/${data.args.maxlength}`
+			)
+		data.args.limit == 'countdown' &&
+			expect(limit.innerHTML).toBe(
+				`${data.args.maxlength - textarea.value.length}`
+			)
+	}
+}
+
+export async function iconTest(
+	{ canvasElement, ...data }: PlayAttributes,
+	customElement: ComponentConfig
+) {
+	const icon = customElement || document.querySelector('svg')
+	expect(icon.customElement || icon).toHaveClass([
+		'vv-icon',
+		'iconify',
+		'iconify--normal',
+		'iconify--ds'
+	])
+	const textareaWrapperParent = await within(canvasElement).findByTestId(
+		'textarea'
+	)
+	data.args.iconPosition &&
+		expect(textareaWrapperParent).toHaveClass(
+			`vv-textarea--icon-${data.args.iconPosition}`
+		)
+	textareaTest({ canvasElement, ...data })
+}
+
+export async function slotsTest({ canvasElement, ...data }: PlayAttributes) {
+	const textareaWrapperParent = await within(canvasElement).findByTestId(
+		'textarea'
+	)
+	const textareaWrapper = textareaWrapperParent.children[0]
+	const icon = textareaWrapper.firstElementChild as HTMLElement
+	iconTest({ canvasElement, ...data }, { customElement: icon })
+	const button = textareaWrapper.lastElementChild as HTMLButtonElement
+	expect(button).toHaveClass('vv-button')
+	expect(button.innerText).toBe('Here!')
+}
+
+export async function debounceTest({ canvasElement, ...data }: PlayAttributes) {
+	const textareaWrapperParent = await within(canvasElement).findByTestId(
+		'textarea'
+	)
+	const value = await within(canvasElement).findByTestId('value')
+	const textarea = textareaWrapperParent.querySelector(
+		'textarea'
+	) as HTMLTextAreaElement
+	userEvent.click(textarea)
+	const text = 'test'
+	userEvent.keyboard(text)
+	expect(value.innerText).toEqual('')
+	setTimeout(() => {
+		expect(value.innerText).not.toEqual(textarea.value)
+	}, data.args.debounce - 10)
+	setTimeout(() => {
+		expect(value.innerText).toEqual(textarea.value)
+	}, data.args.debounce + 10)
+	await setTimeout(async () => {
+		textarea.value = ''
+		await textareaTest({ canvasElement, ...data }, { customText: text })
+	}, data.args.debounce * 1.3)
+}

package/src/stories/Textarea/TextareaAutoclear.stories.mdx

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { autoclearTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Autoclear" component={VvTextarea} />
 
@@ -13,6 +13,7 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Autoclear"
+		play={autoclearTest}
 		args={{
 			name: 'textarea-autoclear',
 			label: 'Autoclear',

package/src/stories/Textarea/TextareaAutocomplete.stories.mdx

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { textareaTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Autocomplete" component={VvTextarea} />
 
@@ -13,6 +13,7 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Autocomplete"
+		play={textareaTest}
 		args={{
 			name: 'textarea-autocomplete-on',
 			label: 'Nome',

package/src/stories/Textarea/TextareaAutofocus.stories.mdx

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { textareaTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Autofocus" component={VvTextarea} />
 
@@ -13,6 +13,7 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Autofocus"
+		play={textareaTest}
 		args={{
 			name: 'textarea-autofocus',
 			label: 'Campo in autofocus',

package/src/stories/Textarea/TextareaDebounce.stories.mdx

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { debounceTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Debounce" component={VvTextarea} />
 
@@ -12,11 +12,12 @@ import { Template } from './Textarea.stories.mdx'
 
 <Canvas>
 	<Story
-		name="Disabled"
+		name="Debounce"
+		play={debounceTest}
 		args={{
-			name: 'textarea-disabled',
-			disabled: true,
-			modelValue: 'Prova'
+			name: 'textarea-debounce',
+			debounce: 700,
+			label: 'Debounce'
 		}}>
 		{Template.bind({})}
 	</Story>