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

package/src/stories/Dropdown/Dropdown.stories.mdx

@@ -1,13 +1,14 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
-import { VvDropdownProps } from '../../components/VvDropdown/VvDropdown'
-import ObjectUtilities from '../../utils/ObjectUtilities'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+import { VvDropdownProps } from '@/components/VvDropdown'
+import { propsToObject } from '@/utils/ObjectUtilities'
+import { dropdownTest } from './Dropdown.test'
 
 <Meta
 	title="Components/Dropdown"
 	component={VvDropdown}
 	args={{
-		...ObjectUtilities.propsToObject(VvDropdownProps),
+		...propsToObject(VvDropdownProps),
 		options: [
 			{
 				label: 'Option 1',
@@ -35,8 +36,9 @@ export const Template = (args) => ({
 			value: ''
 		}
 	},
-	template: `<div class="mb-lg">Value: {{ value }}</div>
-		<vv-dropdown v-bind="args" v-model:modelValue="value" class="w-1/2 ml-lg" />
+	template: `
+		<vv-dropdown v-bind="args" v-model="value" class="max-w-224 relative" />
+		<div class="mt-24">Selected: <span data-testId="selected">{{ value }}</span></div>
 		`
 })
 
@@ -46,5 +48,7 @@ Stories of `VvDropdown`.
 Let's define a story for our playground `dropdown`:
 
 <Canvas>
-	<Story name="vv-dropdown">{Template.bind({})}</Story>
+	<Story name="vv-dropdown" play={dropdownTest}>
+		{Template.bind({})}
+	</Story>
 </Canvas>

package/src/stories/Dropdown/Dropdown.test.ts

@@ -0,0 +1,80 @@
+import type { PlayAttributes, ComponentConfig } from '@/test/types'
+import { within } from '@storybook/testing-library'
+import { expect } from '@/test/expect'
+
+export async function dropdownTest(
+	{ canvasElement, ...data }: PlayAttributes = {} as PlayAttributes,
+	{ isClickDisabled = false, className = null }: ComponentConfig = {}
+) {
+	const dropdown = await within(canvasElement).findByRole('listbox')
+
+	// class test
+	expect(dropdown).toHaveClass('vv-dropdown')
+	className && expect(dropdown).toHaveClass(className)
+
+	// options test
+	const dropdownItems = dropdown.children
+	const propOptions = data.args.options
+	const value = (await within(canvasElement).findByTestId(
+		'selected'
+	)) as HTMLSpanElement
+
+	if (data.args.labelNoResult && propOptions.length == 0) {
+		const optionLabel = dropdownItems[0].firstChild as HTMLInputElement
+		expect(optionLabel.innerText).toEqual(data.args.labelNoResult)
+	}
+	if (propOptions.length > 0) {
+		let checkedOptions = 0
+
+		// tests all the options
+		for (let index = 0; index < dropdownItems.length; index++) {
+			const option = dropdownItems[index]
+			const optionLabel = option.children[0] as HTMLInputElement
+			const optionRadio = optionLabel.children[0] as HTMLInputElement
+
+			// disabled test
+			isClickDisabled && expect(optionLabel).not.toBeClicked()
+			data.args.disabled && expect(optionRadio).toHaveProperty('disabled')
+
+			// click test
+			isClickDisabled
+				? await expect(optionLabel).not.toBeClicked()
+				: await expect(optionLabel).toBeClicked()
+
+			// radio checked and maxValue test
+			if (!isClickDisabled) {
+				data.args.maxValues && checkedOptions == data.args.maxValues
+					? expect(optionRadio.checked).toBe(false)
+					: expect(optionRadio.checked).toBe(true)
+			}
+			optionRadio.checked && checkedOptions++
+
+			// label and value test
+			const propOptionLabel =
+				propOptions[index].label || propOptions[index]
+			const propOptionValue =
+				propOptions[index].value || propOptions[index]
+			await expect(optionLabel.innerText.trim()).toEqual(propOptionLabel)
+			await expect(optionRadio.value).toEqual(`${propOptionValue}`)
+
+			// useObject test
+			data.args.useObject &&
+				expect(value?.innerText).toBe(
+					`{ "label": "${propOptionLabel}", "value": ${propOptionValue} }`
+				)
+		}
+
+		// multiple test
+		if (data.args.multiple) {
+			let checkedOptions = 0
+			for (let index = 0; index < dropdownItems.length; index++) {
+				const option = dropdownItems[index]
+				const optionLabel = option.children[0] as HTMLInputElement
+				const optionRadio = optionLabel.children[0] as HTMLInputElement
+				optionRadio.checked && checkedOptions++
+			}
+			expect(checkedOptions).toBeGreaterThan(0)
+		}
+	}
+	await expect(dropdown).toHaveNoViolations()
+}

package/src/stories/Dropdown/DropdownDisabled.stories.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
 import { Template } from './Dropdown.stories.mdx'
+import { dropdownTest } from './Dropdown.test.ts'
 
 <Meta title="Components/Dropdown/Props/disabled" />
 
@@ -11,6 +12,12 @@ Let's define a story for our `disabled` dropdown.
 <Canvas>
 	<Story
 		name="disabled"
+		play={async (ctx) => {
+			dropdownTest(ctx, {
+				className: 'vv-dropdown--disabled',
+				isClickDisabled: true
+			})
+		}}
 		args={{
 			options: ['Option 4', 'Option 5', 'Option 6'],
 			disabled: true
@@ -21,5 +28,5 @@ Let's define a story for our `disabled` dropdown.
 
 <Source
 	language="html"
-	code={`<vv-dropdown v-model:modelValue="value" :options="options" disabled />`}
+	code={`<vv-dropdown v-model="value" :options="options" disabled />`}
 />

package/src/stories/Dropdown/DropdownLabelNoResults.stories.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
 import { Template } from './Dropdown.stories.mdx'
 
 <Meta title="Components/Dropdown/Props/labelNoResults" />
@@ -21,5 +21,5 @@ Let's define a story for our multple `max-values` dropdown.
 
 <Source
 	language="html"
-	code={`<vv-dropdown v-model:modelValue="value" :options="options" label-no-results="Non sono presenti elementi!" />`}
+	code={`<vv-dropdown v-model="value" :options="options" label-no-results="Non sono presenti elementi!" />`}
 />

package/src/stories/Dropdown/DropdownMaxValues.stories.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
 import { Template } from './Dropdown.stories.mdx'
+import { dropdownTest } from './Dropdown.test.ts'
 
 <Meta title="Components/Dropdown/Props/maxValues" />
 
@@ -11,6 +12,7 @@ Let's define a story for our multple `max-values` dropdown.
 <Canvas>
 	<Story
 		name="maxValues"
+		play={dropdownTest}
 		args={{
 			options: ['Option 4', 'Option 5', 'Option 6'],
 			multiple: true,
@@ -22,5 +24,5 @@ Let's define a story for our multple `max-values` dropdown.
 
 <Source
 	language="html"
-	code={`<vv-dropdown v-model:modelValue="value" :options="options" multiple max-values="2" />`}
+	code={`<vv-dropdown v-model="value" :options="options" multiple max-values="2" />`}
 />

package/src/stories/Dropdown/DropdownMultiple.stories.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
 import { Template } from './Dropdown.stories.mdx'
+import { dropdownTest } from './Dropdown.test.ts'
 
 <Meta title="Components/Dropdown/Props/multiple" />
 
@@ -29,6 +30,7 @@ Let's define a story for our `multiple` dropdown.
 <Canvas>
 	<Story
 		name="multiple"
+		play={dropdownTest}
 		args={{
 			options: [
 				{
@@ -52,5 +54,5 @@ Let's define a story for our `multiple` dropdown.
 
 <Source
 	language="html"
-	code={`<vv-dropdown v-model:modelValue="value" :options="options" multiple />`}
+	code={`<vv-dropdown v-model="value" :options="options" multiple />`}
 />

package/src/stories/Dropdown/DropdownOptions.stories.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
 
 <Meta title="Components/Dropdown/Props/options" />
 
@@ -58,11 +58,11 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 					}
 				},
 				template: `<div class="h-100 mb-xl">
-						<vv-dropdown v-model:modelValue="value" :options="options" class="w-1/2 ml-lg" />
+						<vv-dropdown v-model="value" :options="options" class="w-1/2 ml-lg" />
 						<div class="flex justify-end">Value: {{ value }}</div>
 					</div>
 					<div class="h-100 pt-lg">
-						<vv-dropdown v-model:modelValue="objectValue" :options="optionsObject" class="w-1/2 ml-lg" />
+						<vv-dropdown v-model="objectValue" :options="optionsObject" class="w-1/2 ml-lg" />
 						<div class="flex justify-end">Value: {{ objectValue }}</div>
 					</div>`
 			}
@@ -72,5 +72,5 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 
 <Source
 	language="html"
-	code={`<vv-dropdown v-model:modelValue="value" :options="options" />`}
+	code={`<vv-dropdown v-model="value" :options="options" />`}
 />

package/src/stories/Dropdown/DropdownUseObject.stories.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
 import { Template } from './Dropdown.stories.mdx'
+import { dropdownTest } from './Dropdown.test.ts'
 
 <Meta title="Components/Dropdown/Props/useObject" />
 
@@ -31,6 +32,7 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 <Canvas>
 	<Story
 		name="useObject"
+		play={dropdownTest}
 		args={{
 			options: [
 				{
@@ -54,5 +56,5 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 
 <Source
 	language="html"
-	code={`<vv-dropdown v-model:modelValue="value" :options="options" use-object />`}
+	code={`<vv-dropdown v-model="value" :options="options" use-object />`}
 />

package/src/stories/Icon/Icon.stories.mdx

@@ -1,26 +1,26 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import VvIcon from '../../components/VvIcon/VvIcon.vue'
-import { VvIconProps } from '../../components/VvIcon/VvIcon'
+import { propsToObject } from '@/utils/ObjectUtilities'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { VvIconProps } from '@/components/VvIcon'
 
 <Meta
 	title="Components/Icon"
 	component={VvIcon}
 	args={{
-		...ObjectUtilities.propsToObject(VvIconProps),
+		...propsToObject(VvIconProps),
 		name: 'add-circle'
 	}}
 	argTypes={{
 		mode: {
+			options: ['style', 'bg', 'mask', 'svg'],
 			control: {
-				type: 'select',
-				options: ['style', 'bg', 'mask', 'svg']
+				type: 'select'
 			}
 		},
 		prefix: {
+			options: ['simple', 'normal', 'detailed'],
 			control: {
-				type: 'select',
-				options: ['simple', 'normal', 'detailed']
+				type: 'select'
 			}
 		}
 	}}

package/src/stories/Icon/{IconTest.js → Icon.test.js}

@@ -1,6 +1,5 @@
-import { expect } from '@storybook/jest'
+import { expect } from '@/test/expect'
 import { within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
 
 async function iconTest({ canvasElement, functions, ...args }) {
 	const icon = await within(canvasElement).findByTestId('img')
@@ -9,9 +8,7 @@ async function iconTest({ canvasElement, functions, ...args }) {
 			await func({ icon, ...args })
 		})
 	}
-	// Accessibility Test
-	expect.extend(toHaveNoViolations)
-	expect(await axe(icon)).toHaveNoViolations()
+	await expect(icon).toHaveNoViolations()
 }
 
 async function classTest({ icon, classNames = [] }) {

package/src/stories/Icon/IconList.vue

@@ -1,15 +1,14 @@
 <template>
 	<div class="vv-input-text">
-		<label for="search">Search</label>
 		<div class="vv-input-text__wrapper">
-			<input id="search" v-model="search" type="text" />
+			<input v-model="search" type="search" placeholder="Search.." />
 		</div>
 	</div>
-	<div class="flex justify-center gap-16 flex-wrap mt-lg">
+	<div class="grid grid-cols-5 gap-16 mt-lg">
 		<div
 			v-for="iconName in icons"
 			:key="iconName"
-			class="icon-item flex items-center xl:w-1/6 md:w-1/5 sm:w-1/3 xs:w-full">
+			class="flex items-center">
 			<VvIcon :name="iconName" width="25" class="mr-md" />
 			{{ iconName }}
 		</div>
@@ -17,8 +16,8 @@
 </template>
 
 <script setup lang="ts">
-import VvIcon from '../../components/VvIcon/VvIcon.vue'
-import IconsNormal from '../../assets/icons/normal.json'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import IconsNormal from '@/assets/icons/normal.json'
 import { ref, watch, type Ref } from 'vue'
 
 const allIcons = Object.keys(IconsNormal.icons)

package/src/stories/Icon/IconPrefix.stories.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvIcon from '../../components/VvIcon/VvIcon.vue'
-import { iconTest, classTest } from './IconTest.js'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { iconTest, classTest } from './Icon.test'
 
 <Meta title="Components/Icon/Props/prefix" />
 

package/src/stories/Icon/IconRemote.stories.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvIcon from '../../components/VvIcon/VvIcon.vue'
-import { iconTest, classTest, childElementCountTest } from './IconTest.js'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { iconTest, classTest, childElementCountTest } from './Icon.test'
 
 <Meta title="Components/Icon/Props/remote" />
 

package/src/stories/Icon/IconsList.stories.mdx

@@ -1,12 +1,6 @@
-import {
-	Canvas,
-	Meta,
-	Story,
-	IconGallery,
-	IconItem
-} from '@storybook/addon-docs'
+import { Canvas, Meta, Story, IconItem } from '@storybook/addon-docs'
 import IconList from './IconList.vue'
-import IconsNormal from '../../assets/icons/normal.json'
+import IconsNormal from '@/assets/icons/normal.json'
 
 # Iconography
 
@@ -23,13 +17,3 @@ export const Template = (args) => ({
 <Story name="iconography" args={{}}>
 	{Template.bind({})}
 </Story>
-
-<IconGallery>
-	{/* {Object.keys(IconsNormal.icons).map((key) => {
-		return (
-			<IconItem key={key} name={key}>
-				{Template.bind({})}
-			</IconItem>
-		)
-	})} */}
-</IconGallery>

package/src/stories/InputText/InputText.stories.mdx

@@ -1,7 +1,6 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
 
 <Meta title="Components/InputText" component={VvInputText} />
 
@@ -14,8 +13,8 @@ export const Template = (args, { argTypes }) => ({
 	data: () => ({ value: args.modelValue || '' }),
 	template: `
 		<div class="flex flex-col justify-between">
-			<vv-input-text v-bind="args" v-model:modelValue="value"/>
-			<strong v-if="value">Valore: {{value}} </strong> 
+			<vv-input-text v-bind="args" v-model="value"/>
+			<strong v-if="value">Value: {{value}} </strong> 
 		</div>
         `
 })
@@ -27,16 +26,16 @@ export const Template = (args, { argTypes }) => ({
 			text: 'text',
 			id: 'vv-input-text',
 			name: 'vv-input-text',
-			placeholder: 'Prova input',
-			label: 'Campo di prova',
-			hintLabel: 'Hint label text',
+			placeholder: 'Placeholder',
+			label: 'Label',
+			hintLabel: 'Hint label',
 			autocomplete: 'off',
 			disabled: false,
 			readonly: false,
 			valid: false,
 			error: false,
 			loading: false,
-			loadingLabel: 'Ciao sono il loading',
+			loadingLabel: 'Loading...',
 			icon: '',
 			iconPosition: null,
 			floating: false,
@@ -47,45 +46,52 @@ export const Template = (args, { argTypes }) => ({
 		}}
 		argTypes={{
 			id: {
-				description: 'Id input element.',
+				description: 'Input id',
 				table: { category: 'Attributes' }
 			},
 			name: {
-				description: 'Nome input element',
+				description: 'Input name',
 				table: { category: 'Attributes' }
 			},
 			placeholder: {
-				description: 'Placeholder input',
+				description: 'Input placeholder',
 				table: { category: 'Attributes' }
 			},
 			iconPosition: {
+				options: [null, 'left', 'right'],
+				control: {
+					type: 'select'
+				},
+				table: { category: 'Attributes' }
+			},
+			limit: {
+				options: [true, false, 'countdown'],
 				control: {
-					type: 'select',
-					options: [null, 'left', 'right']
+					type: 'select'
 				},
 				table: { category: 'Attributes' }
 			},
 			type: {
+				options: ['text', 'password', 'date', 'datetime-local'],
 				control: {
-					type: 'select',
-					options: ['text', 'password', 'date', 'datetime-local']
+					type: 'select'
 				},
 				table: { category: 'Attributes' }
 			},
 			minlength: {
-				description: 'Lunghezza minima testo',
+				description: 'Min length',
 				table: { category: 'Attributes' }
 			},
 			maxlength: {
-				description: 'Lunghezza massima testo',
+				description: 'Max length',
 				table: { category: 'Attributes' }
 			},
 			min: {
-				description: 'Valore minimo',
+				description: 'Min value',
 				table: { category: 'Attributes' }
 			},
 			max: {
-				description: 'Valore massimo',
+				description: 'Max value',
 				table: { category: 'Attributes' }
 			}
 		}}>

package/src/stories/InputText/InputText.test.ts

@@ -0,0 +1,156 @@
+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 testInputText(
+	{ canvasElement, ...data }: PlayAttributes = {} as PlayAttributes,
+	{
+		isClickDisabled = false,
+		className = null,
+		customText = null
+	}: ComponentConfig = {}
+) {
+	const inputTextWrapperParent = await within(canvasElement).findByTestId(
+		'input-text'
+	)
+	const inputText = document.querySelector('input') as HTMLInputElement
+	if (isClickDisabled) {
+		await expect(inputText).not.toBeClicked()
+	} else {
+		await expect(inputText).toBeClicked()
+		await userEvent.click
+		if (
+			inputText.type == 'text' ||
+			inputText.type == 'password' ||
+			inputText.type == 'search'
+		) {
+			const text = customText || 'Lorem ipsum'
+			userEvent.keyboard(text)
+			if (!data.args.limit && data.args.maxlength) {
+				data.args.maxlength >= text.length
+					? expect(inputText.value).toEqual(text)
+					: expect(inputText.value.length).toEqual(
+							data.args.maxlength
+					  )
+			} else if (!data.args.limit) {
+				expect(inputText.value).toEqual(data.args.modelValue || text)
+			}
+		}
+	}
+	const baseAttrs = [
+		'id',
+		'name',
+		'placeholder',
+		'required',
+		'type',
+		'max',
+		'maxlength',
+		'min',
+		'minlength'
+	]
+	baseAttrs.forEach((attr) => {
+		if (data.args[attr] !== undefined) {
+			expect(String(inputText.getAttribute(attr))).toEqual(
+				String(data.args[attr])
+			)
+		}
+	})
+	data.args.label &&
+		expect(
+			(inputTextWrapperParent.firstChild as HTMLElement)?.innerText
+		).toEqual(data.args.label)
+	data.args.hintLabel &&
+		expect(
+			(inputTextWrapperParent.lastChild as HTMLElement)?.innerText
+		).toEqual(data.args.hintLabel)
+	data.args.modelValue &&
+		expect(inputText.value).toEqual(data.args.modelValue)
+	data.args.readonly && expect(inputText.readOnly).toEqual(data.args.readonly)
+	await sleep()
+	expect(inputTextWrapperParent).toHaveClass('vv-input-text')
+	if (inputText.value) {
+		expect(inputTextWrapperParent).toHaveClass('vv-input-text--dirty')
+	}
+	className && expect(inputTextWrapperParent).toHaveClass(className)
+	await expect(inputTextWrapperParent).toHaveNoViolations()
+}
+
+export async function limitTest({ canvasElement, ...data }: PlayAttributes) {
+	const inputText = document.querySelector('input') as HTMLInputElement
+	await testInputText({ canvasElement, ...data })
+	const limit = document.getElementsByClassName(
+		'vv-input-text__limit'
+	)[0] as HTMLElement
+	if (data.args.maxlength) {
+		while (inputText.value.length < data.args.maxlength)
+			await userEvent.keyboard(
+				' dolor sit amet, consectetur adipiscing elit'
+			)
+		data.args.limit === true &&
+			expect(limit.innerText).toEqual(
+				`${inputText.value.length}/${data.args.maxlength}`
+			)
+		data.args.limit === 'countdown' &&
+			expect(limit.innerHTML).toBe(
+				`${data.args.maxlength - inputText.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 inputTextWrapperParent = await within(canvasElement).findByTestId(
+		'input-text'
+	)
+	data.args.iconPosition &&
+		expect(inputTextWrapperParent).toHaveClass(
+			`vv-input-text--icon-${data.args.iconPosition}`
+		)
+	testInputText({ canvasElement, ...data })
+}
+
+export async function slotsTest({ canvasElement, ...data }: PlayAttributes) {
+	const inputTextWrapperParent = await within(canvasElement).findByTestId(
+		'input-text'
+	)
+	const inputTextWrapper = inputTextWrapperParent.children[0]
+	const icon = inputTextWrapper.firstElementChild as HTMLElement
+	iconTest({ canvasElement, ...data }, { customElement: icon })
+	const button = inputTextWrapper.lastElementChild as HTMLButtonElement
+	expect(button).toHaveClass('vv-button')
+	expect(button.innerText).toBe('Here!')
+}
+
+export async function inputNumberTest({
+	canvasElement,
+	...data
+}: PlayAttributes) {
+	const inputText = document.querySelector('input') as HTMLInputElement
+	const actionButtonGroup = document.getElementsByClassName(
+		'vv-input-text__actions-group'
+	)
+	const buttonUp = actionButtonGroup[0].firstElementChild as HTMLButtonElement
+	const buttonDown = actionButtonGroup[0]
+		.lastElementChild as HTMLButtonElement
+	userEvent.click(inputText)
+	for (let i = 1; i < 4; i++) {
+		buttonUp.click()
+		expect(inputText.value).toEqual(`${data.args.step * i}`)
+	}
+	const inputValue: number = parseFloat(inputText.value)
+	for (let i = inputValue; i > data.args.step; i--) {
+		buttonDown.click()
+		expect(inputText.value).toEqual(`${i - data.args.step}`)
+	}
+	await testInputText({ canvasElement, ...data })
+}