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

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

@@ -1,25 +1,50 @@
 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'
 import { Template } from './InputText.stories.mdx'
+import { testInputText } from './InputText.test.ts'
 
 <Meta title="Components/InputText/Type" component={VvInputText} />
 
 <Canvas>
-	<Story name="Text" args={{ name: 'input-text', type: 'text' }}>
+	<Story
+		name="Text"
+		play={testInputText}
+		args={{
+			name: 'input-text',
+			label: 'Text',
+			type: 'text',
+			'data-testId': 'input-text'
+		}}>
 		{Template.bind({})}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="Password" args={{ name: 'input-password', type: 'password' }}>
+	<Story
+		name="Password"
+		play={testInputText}
+		args={{
+			name: 'input-password',
+			label: 'Password',
+			type: 'password',
+			'data-testId': 'input-text'
+		}}>
 		{Template.bind({})}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="Date" args={{ name: 'input-date', type: 'date' }}>
+	<Story
+		name="Date"
+		play={testInputText}
+		args={{
+			name: 'input-date',
+			label: 'Date',
+			type: 'date',
+			'data-testId': 'input-text'
+		}}>
 		{Template.bind({})}
 	</Story>
 </Canvas>
@@ -27,55 +52,127 @@ import { Template } from './InputText.stories.mdx'
 <Canvas>
 	<Story
 		name="DateTime"
-		args={{ name: 'input-datetime', type: 'datetime-local' }}>
+		play={testInputText}
+		args={{
+			name: 'input-datetime',
+			label: 'Date Time',
+			type: 'datetime-local',
+			'data-testId': 'input-text'
+		}}>
 		{Template.bind({})}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="Number" args={{ name: 'input-number', type: 'number' }}>
+	<Story
+		name="Number"
+		play={testInputText}
+		args={{
+			name: 'input-number',
+			label: 'Number',
+			type: 'number',
+			'data-testId': 'input-text'
+		}}>
 		{Template.bind({})}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="Time" args={{ name: 'input-time', type: 'time' }}>
+	<Story
+		name="Time"
+		play={testInputText}
+		args={{
+			name: 'input-time',
+			label: 'Time',
+			type: 'time',
+			'data-testId': 'input-text'
+		}}>
 		{Template.bind({})}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="Email" args={{ name: 'input-email', type: 'email' }}>
+	<Story
+		name="Email"
+		play={testInputText}
+		args={{
+			name: 'input-email',
+			label: 'Email',
+			type: 'email',
+			'data-testId': 'input-text'
+		}}>
 		{Template.bind({})}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="Tel" args={{ name: 'input-tel', type: 'tel' }}>
+	<Story
+		name="Tel"
+		play={testInputText}
+		args={{
+			name: 'input-tel',
+			label: 'Tel',
+			type: 'tel',
+			'data-testId': 'input-text'
+		}}>
 		{Template.bind({})}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="Url" args={{ name: 'input-url', type: 'url' }}>
+	<Story
+		name="Url"
+		play={testInputText}
+		args={{
+			name: 'input-url',
+			label: 'Url',
+			type: 'url',
+			'data-testId': 'input-text'
+		}}>
 		{Template.bind({})}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="Color" args={{ name: 'input-color', type: 'color' }}>
+	<Story
+		name="Color"
+		play={testInputText}
+		args={{
+			name: 'input-color',
+			label: 'Color',
+			type: 'color',
+			'data-testId': 'input-text'
+		}}>
 		{Template.bind({})}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="Search" args={{ name: 'input-search', type: 'search' }}>
+	<Story
+		name="Search"
+		play={testInputText}
+		args={{
+			name: 'input-search',
+			label: 'Search',
+			type: 'search',
+			'data-testId': 'input-text',
+			icon: 'search',
+			iconPosition: 'left'
+		}}>
 		{Template.bind({})}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="File" args={{ name: 'input-file', type: 'file' }}>
+	<Story
+		name="File"
+		play={testInputText}
+		args={{
+			name: 'input-file',
+			label: 'File',
+			type: 'file',
+			'data-testId': 'input-text'
+		}}>
 		{Template.bind({})}
 	</Story>
 </Canvas>

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

@@ -1,18 +1,26 @@
 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'
 import { Template } from './InputText.stories.mdx'
+import { testInputText } from './InputText.test.ts'
 
 <Meta title="Components/InputText/Valid" component={VvInputText} />
 
 <Canvas>
 	<Story
 		name="Valid"
+		play={(ctx) => {
+			testInputText(ctx, {
+				className: 'vv-input-text--valid'
+			})
+		}}
 		args={{
 			name: 'input-text-valid',
+			label: 'Input Text Valid',
 			valid: true,
-			validLabel: 'Valid label!'
+			validLabel: 'Valid label!',
+			'data-testId': 'input-text'
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/NativeSelect/NativeSelect.stories.mdx

@@ -1,13 +1,15 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvNativeSelect from '../../components/VvNativeSelect/VvNativeSelect.vue'
-import { VvNativeSelectProps } from '../../components/VvNativeSelect/VvNativeSelect'
-import ObjectUtilities from '../../utils/ObjectUtilities'
+import VvNativeSelect from '@/components/VvNativeSelect/VvNativeSelect.vue'
+import { VvNativeSelectProps } from '@/components/VvNativeSelect'
+import { propsToObject } from '@/utils/ObjectUtilities'
+import { nativeSelectTest } from './NativeSelect.test'
 
 <Meta
 	title="Components/NativeSelect"
 	component={VvNativeSelect}
 	args={{
-		...ObjectUtilities.propsToObject(VvNativeSelectProps),
+		...propsToObject(VvNativeSelectProps),
+		name: 'select',
 		label: 'Lorem Ipsum',
 		placeholder: 'Placeholder',
 		options: [
@@ -23,7 +25,8 @@ import ObjectUtilities from '../../utils/ObjectUtilities'
 				label: 'Option 3',
 				value: 3
 			}
-		]
+		],
+		'data-testId': 'select'
 	}}
 />
 
@@ -34,13 +37,12 @@ export const Template = (args) => ({
 	},
 	data() {
 		return {
-			selectValue: ''
+			selectValue: undefined
 		}
 	},
-	template: `<div class="w-1/2">
-            <vv-native-select v-bind="args" v-model:modelValue="selectValue" />
-			value: {{ selectValue }}
-        </div>`
+	template: `
+		<vv-native-select v-bind="args" v-model="selectValue" />
+		<div>Value: {{ selectValue }}</div>`
 })
 
 # VvNativeSelect
@@ -49,5 +51,7 @@ Stories of `VvNativeSelect`.
 Let's define a story for our playground `select`:
 
 <Canvas>
-	<Story name="vv-native-select">{Template.bind({})}</Story>
+	<Story name="vv-native-select" play={nativeSelectTest}>
+		{Template.bind({})}
+	</Story>
 </Canvas>

package/src/stories/NativeSelect/NativeSelect.test.js

@@ -0,0 +1,151 @@
+import { expect } from '@/test/expect'
+import { userEvent, within } from '@storybook/testing-library'
+
+async function nativeSelectTest({ canvasElement, ...data }) {
+	const selectParent = await within(canvasElement).findByTestId(
+		data.args['data-testId']
+	)
+	expect(selectParent).toHaveClass('vv-select')
+	const select = selectParent.children[1].children[0]
+	expect(select.parentElement).toHaveClass('vv-select__wrapper')
+	userEvent.click(select)
+	data.args.options.forEach((option, index) => {
+		const opt = select[index + 1]
+		opt.selected = true
+		expect(select.value).toBe(JSON.stringify(option.value))
+	})
+	const opt_1 = select[1]
+	opt_1.selected = true
+	expect(select.value).toBe(JSON.stringify(data.args.options[0].value))
+	await expect(selectParent).toHaveNoViolations()
+}
+
+async function disabledTest({ canvasElement }) {
+	const selectParent = await within(canvasElement).findByTestId('select')
+	const select = selectParent.children[1].children[0]
+	expect(select).toBeDisabled()
+	expect(select).toHaveProperty('disabled', true)
+	await expect(select).toHaveNoViolations()
+}
+
+async function errorTest({ canvasElement, ...data }) {
+	const selectParent = await within(canvasElement).findByTestId(
+		data.args['data-testId']
+	)
+	expect(data.args.error).toBe(true)
+	expect(selectParent).toHaveClass('vv-select--invalid')
+	const errorLabel = selectParent.lastChild
+	expect(errorLabel.innerText).toEqual(data.args.errorLabel)
+	await expect(selectParent).toHaveNoViolations()
+}
+
+async function hintLabelTest({ canvasElement, ...data }) {
+	const selectParent = await within(canvasElement).findByTestId(
+		data.args['data-testId']
+	)
+	const labelInnerHTML = selectParent.lastChild.innerHTML
+	const hintLabel = data.args.hintLabel
+	expect(labelInnerHTML).toBeTruthy()
+	expect(labelInnerHTML).toEqual(hintLabel)
+}
+
+async function iconTest({ canvasElement }) {
+	// icon-left
+	const selectParent1 = await within(canvasElement).findByTestId('icon-left')
+	expect(selectParent1).toHaveClass('vv-select--icon-left')
+	const iconLeft = selectParent1.children[1].children[0]
+	expect(iconLeft).toHaveClass(
+		'vv-icon',
+		'iconify',
+		'iconify--normal',
+		'iconify--vv'
+	)
+	// icon-right
+	const selectParent2 = await within(canvasElement).findByTestId('icon-right')
+	expect(selectParent2).toHaveClass('vv-select--icon-right')
+	const iconRight = selectParent1.children[1].children[0]
+	expect(iconRight).toHaveClass(
+		'vv-icon',
+		'iconify',
+		'iconify--normal',
+		'iconify--vv'
+	)
+	await expect(selectParent1).toHaveNoViolations()
+	await expect(selectParent2).toHaveNoViolations()
+}
+
+async function loadingTest({ canvasElement, ...data }) {
+	const selectParent = await within(canvasElement).findByTestId(
+		'native-select'
+	)
+	expect(data.args.loading).toBe(true)
+	expect(selectParent).toHaveClass('vv-select--loading')
+	await expect(selectParent).toHaveNoViolations()
+}
+
+async function optionsTest({ canvasElement, ...data }) {
+	const selectWrapperParent = await within(canvasElement).findByTestId(
+		'native-select'
+	)
+	const options = selectWrapperParent.children[1].children[0]
+	const propOptions = data.args.options
+	propOptions.forEach((propOption, index) => {
+		expect(options[index + 1].value).toEqual(
+			`${propOption.value || propOption}`
+		)
+		expect(options[index + 1].innerText).toEqual(
+			`${propOption.label || propOption}`
+		)
+	})
+}
+
+async function readonlyTest({ canvasElement }) {
+	const selectWrapperParent = await within(canvasElement).findByTestId(
+		'native-select'
+	)
+	const select = selectWrapperParent.getElementsByTagName('select')[0]
+	expect(selectWrapperParent).toHaveClass('vv-select--readonly')
+	expect(select).toHaveProperty('disabled', true)
+	await expect(selectWrapperParent).toHaveNoViolations()
+}
+
+async function validTest({ canvasElement, ...data }) {
+	const selectWrapperParent = await within(canvasElement).findByTestId(
+		'native-select'
+	)
+	const validLabel = selectWrapperParent.lastChild
+	expect(data.args.valid).toBe(true)
+	expect(selectWrapperParent).toHaveClass('vv-select--valid')
+	expect(validLabel).toHaveClass('vv-select__hint')
+	expect(data.args.validLabel).toEqual(validLabel.innerText)
+	await expect(selectWrapperParent).toHaveNoViolations()
+	await expect(validLabel).toHaveNoViolations()
+}
+
+async function customKeysTest({ canvasElement, ...data }) {
+	const selectWrapperParent = await within(canvasElement).findByTestId(
+		'native-select'
+	)
+	const select = selectWrapperParent.children[1].children[0]
+	const labelKey = data.args['label-key']
+	const valueKey = data.args['value-key']
+	const options = data.args.options
+	expect(labelKey && valueKey).toBeTruthy()
+	options.forEach((option, index) => {
+		expect(select[index + 1].value).toEqual(`${option[valueKey]}`)
+		expect(select[index + 1].innerText).toEqual(`${option[labelKey]}`)
+	})
+}
+
+export {
+	nativeSelectTest,
+	errorTest,
+	hintLabelTest,
+	iconTest,
+	loadingTest,
+	optionsTest,
+	disabledTest,
+	readonlyTest,
+	validTest,
+	customKeysTest
+}

package/src/stories/NativeSelect/NativeSelectDisabled.stories.mdx

@@ -1,5 +1,6 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvNativeSelect from '../../components/VvNativeSelect/VvNativeSelect.vue'
+import VvNativeSelect from '@/components/VvNativeSelect/VvNativeSelect.vue'
+import { disabledTest } from './NativeSelect.test'
 
 <Meta title="Components/NativeSelect/Props/disabled" />
 
@@ -8,19 +9,17 @@ import VvNativeSelect from '../../components/VvNativeSelect/VvNativeSelect.vue'
 Let's define a story for our `disabled` select.
 
 <Canvas>
-	<Story name="disabled">
+	<Story name="disabled" play={disabledTest}>
 		{() => {
 			return {
 				components: { VvNativeSelect },
 				data() {
 					return {
-						value: '',
+						value: undefined,
 						options: ['Option 1', 'Option 2', 'Option 3']
 					}
 				},
-				template: `<div class="w-1/2">
-						<vv-native-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" disabled />
-					</div>`
+				template: `<vv-native-select data-testId='select' v-model="value" name="select" :options="options" placeholder="Placeholder" label="Label 1" disabled />`
 			}
 		}}
 	</Story>
@@ -28,5 +27,5 @@ Let's define a story for our `disabled` select.
 
 <Source
 	language="html"
-	code={`<vv-native-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" disabled />`}
+	code={`<vv-native-select v-model="value" :options="options" placeholder="Placeholder" label="Label 1" disabled />`}
 />

package/src/stories/NativeSelect/NativeSelectError.stories.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvNativeSelect from '../../components/VvNativeSelect/VvNativeSelect.vue'
+import VvNativeSelect from '@/components/VvNativeSelect/VvNativeSelect.vue'
 import { Template } from './NativeSelect.stories.mdx'
+import { errorTest } from './NativeSelect.test'
 
 <Meta title="Components/NativeSelect/Props/error" />
 
@@ -11,12 +12,15 @@ Let's define a story for our `error` and `error-label` select.
 <Canvas>
 	<Story
 		name="error"
+		play={errorTest}
 		args={{
+			name: 'select',
 			label: 'Lorem Ipsum',
 			placeholder: 'Placeholder',
 			options: ['Option 1', 'Option 2', 'Option 3'],
 			error: true,
-			errorLabel: 'An error occurred!'
+			errorLabel: 'An error occurred!',
+			'data-testId': 'select'
 		}}>
 		{Template.bind({})}
 	</Story>
@@ -26,7 +30,7 @@ Let's define a story for our `error` and `error-label` select.
 	language="html"
 	code={`
 <vv-select
-	v-model:modelValue="value"
+	v-model="value"
 	:options="options"
 	placeholder="Placeholder"
 	label="Label 1"

package/src/stories/NativeSelect/NativeSelectHintLabel.stories.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvNativeSelect from '../../components/VvNativeSelect/VvNativeSelect.vue'
+import VvNativeSelect from '@/components/VvNativeSelect/VvNativeSelect.vue'
 import { Template } from './NativeSelect.stories.mdx'
+import { hintLabelTest } from './NativeSelect.test'
 
 <Meta title="Components/NativeSelect/Props/hint-label" />
 
@@ -11,11 +12,14 @@ Let's define a story for our `hint-label` select.
 <Canvas>
 	<Story
 		name="hint-label"
+		play={hintLabelTest}
 		args={{
+			name: 'select',
 			label: 'Lorem Ipsum',
 			placeholder: 'Placeholder',
 			options: ['Option 1', 'Option 2', 'Option 3'],
-			hintLabel: 'Information field'
+			hintLabel: 'Information field',
+			'data-testId': 'select'
 		}}>
 		{Template.bind({})}
 	</Story>
@@ -25,7 +29,7 @@ Let's define a story for our `hint-label` select.
 	language="html"
 	code={`
 <vv-select
-	v-model:modelValue="value"
+	v-model="value"
 	:options="options"
 	placeholder="Placeholder"
 	label="Label 1"

package/src/stories/NativeSelect/NativeSelectIconLeftRight.stories.mdx

@@ -1,5 +1,6 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvNativeSelect from '../../components/VvNativeSelect/VvNativeSelect.vue'
+import VvNativeSelect from '@/components/VvNativeSelect/VvNativeSelect.vue'
+import { iconTest } from './NativeSelect.test'
 
 <Meta title="Components/NativeSelect/Props/icon" />
 
@@ -8,25 +9,26 @@ import VvNativeSelect from '../../components/VvNativeSelect/VvNativeSelect.vue'
 Let's define a story for our `icon-left` and `icon-right` select.
 
 <Canvas>
-	<Story name="icon">
+	<Story name="icon" play={iconTest}>
 		{() => {
 			return {
 				components: { VvNativeSelect },
 				data() {
 					return {
-						value1: '',
-						value2: '',
+						value1: undefined,
+						value2: undefined,
 						options: ['Option 1', 'Option 2', 'Option 3']
 					}
 				},
-				template: `<div class="flex gap-32">
+				template: `
+					<div class="flex gap-32">
 						<div class="w-1/2">
-							<vv-native-select v-model:modelValue="value1" :options="options" label="Icon left" icon-left="email" />
-							value 1: {{ value1 }}
+							<vv-native-select data-testid="icon-left" placeholder="Select option" name="select-1" v-model="value1" :options="options" label="Icon left" icon-left="email" />
+							Value 1: {{ value1 }}
 						</div>
 						<div class="w-1/2">
-							<vv-native-select v-model:modelValue="value2" :options="options" label="Icon right" icon-right="phone" />
-							value 2: {{ value2 }}
+							<vv-native-select data-testid="icon-right" placeholder="Select option" name="select-2" v-model="value2" :options="options" label="Icon right" icon-right="phone" />
+							Value 2: {{ value2 }}
 						</div>
 					</div>`
 			}
@@ -36,7 +38,7 @@ Let's define a story for our `icon-left` and `icon-right` select.
 
 <Source
 	language="html"
-	code={`<vv-native-select v-model:modelValue="value" :options="options" label="Icon left" icon-left="email" />
-	
-<vv-native-select v-model:modelValue="value" :options="options" label="Icon right" icon-right="phone" />`}
+	code={`
+	<vv-native-select v-model="value" :options="options" label="Icon left" icon-left="email" />
+	<vv-native-select v-model="value" :options="options" label="Icon right" icon-right="phone" />`}
 />

package/src/stories/NativeSelect/NativeSelectLoading.stories.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvNativeSelect from '../../components/VvNativeSelect/VvNativeSelect.vue'
+import VvNativeSelect from '@/components/VvNativeSelect/VvNativeSelect.vue'
 import { Template } from './NativeSelect.stories.mdx'
+import { loadingTest } from './NativeSelect.test'
 
 <Meta title="Components/NativeSelect/Props/loading" />
 
@@ -11,11 +12,14 @@ Let's define a story for our `loading` select.
 <Canvas>
 	<Story
 		name="loading"
+		play={loadingTest}
 		args={{
+			name: 'select',
 			label: 'Lorem Ipsum',
 			placeholder: 'Placeholder',
 			options: ['Option 1', 'Option 2', 'Option 3'],
-			loading: true
+			loading: true,
+			'data-testid': 'native-select'
 		}}>
 		{Template.bind({})}
 	</Story>
@@ -23,5 +27,5 @@ Let's define a story for our `loading` select.
 
 <Source
 	language="html"
-	code={`<vv-native-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" loading />`}
+	code={`<vv-native-select v-model="value" :options="options" placeholder="Placeholder" label="Label 1" loading />`}
 />