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

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 />`}
 />

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

@@ -1,5 +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 { optionsTest } from './NativeSelect.test'
 
 <Meta title="Components/NativeSelect/Props/options" />
 
@@ -32,47 +34,51 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 />
 
 <Canvas>
-	<Story name="options">
-		{() => {
-			return {
-				components: { VvNativeSelect },
-				data() {
-					return {
-						value: '',
-						objectValue: '',
-						options: ['Option 4', 'Option 5', 'Option 6'],
-						optionsObject: [
-							{
-								label: 'Option 1',
-								value: 1
-							},
-							{
-								label: 'Option 2',
-								value: 2
-							},
-							{
-								label: 'Option 3',
-								value: 3
-							}
-						]
-					}
+	<Story
+		name="optionsArray"
+		play={optionsTest}
+		args={{
+			name: 'select-1',
+			label: 'Lorem Ipsum',
+			placeholder: 'Placeholder',
+			value: '',
+			options: ['Option 1', 'Option 2', 'Option 3'],
+			'data-testid': 'native-select'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="optionsObject"
+		play={optionsTest}
+		args={{
+			name: 'select-2',
+			label: 'Lorem Ipsum',
+			placeholder: 'Placeholder',
+			value: '',
+			options: [
+				{
+					label: 'Option 1',
+					value: 1
+				},
+				{
+					label: 'Option 2',
+					value: 2
 				},
-				template: `<div class="flex gap-32">
-						<div class="w-1/2">
-							<vv-native-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" />
-							value: {{ value }}
-						</div>
-						<div class="w-1/2">
-							<vv-native-select v-model:modelValue="objectValue" :options="optionsObject" placeholder="Placeholder" label="Label 1" />
-							value: {{ objectValue }}
-						</div>
-					</div>`
-			}
-		}}
+				{
+					label: 'Option 3',
+					value: 3
+				}
+			],
+			'data-testid': 'native-select'
+		}}>
+		{Template.bind({})}
 	</Story>
 </Canvas>
 
 <Source
 	language="html"
-	code={`<vv-native-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" />`}
+	code={`<vv-native-select v-model="value" :options="options" placeholder="Placeholder" label="Label 1" />`}
 />

package/src/stories/NativeSelect/NativeSelectReadonly.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 { readonlyTest } from './NativeSelect.test'
 
 <Meta title="Components/NativeSelect/Props/readonly" />
 
@@ -9,15 +10,22 @@ import { Template } from './NativeSelect.stories.mdx'
 Let's define a story for our `readonly` select.
 
 <Canvas>
-	<Story
-		name="readonly"
-		args={{
-			label: 'Lorem Ipsum',
-			placeholder: 'Placeholder',
-			options: ['Option 1', 'Option 2', 'Option 3'],
-			readonly: true
-		}}>
-		{Template.bind({})}
+	<Story name="readonly" play={readonlyTest}>
+		{() => {
+			return {
+				components: { VvNativeSelect },
+				data() {
+					return {
+						value: 'Option 1',
+						options: ['Option 1', 'Option 2', 'Option 3']
+					}
+				},
+				template: `
+					<vv-native-select data-testid="native-select" placeholder="Select option" name="select" v-model="value" :options="options" label="Readonly" readonly />
+					<div>Value : {{ value }}</div>
+				`
+			}
+		}}
 	</Story>
 </Canvas>
 
@@ -25,7 +33,7 @@ Let's define a story for our `readonly` select.
 	language="html"
 	code={`
 <vv-select
-	v-model:modelValue="value"
+	v-model="value"
 	:options="options"
 	placeholder="Placeholder"
 	label="Label 1"

package/src/stories/NativeSelect/NativeSelectUseObject.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 { Template } from './NativeSelect.stories.mdx'
 
 <Meta title="Components/NativeSelect/Props/useObject" />
 
@@ -28,39 +29,34 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 />
 
 <Canvas>
-	<Story name="useObject">
-		{() => {
-			return {
-				components: { VvNativeSelect },
-				data() {
-					return {
-						value: '',
-						options: [
-							{
-								label: 'Option 1',
-								value: 1
-							},
-							{
-								label: 'Option 2',
-								value: 2
-							},
-							{
-								label: 'Option 3',
-								value: 3
-							}
-						]
-					}
+	<Story
+		name="useObject"
+		args={{
+			name: 'select',
+			value: '',
+			label: 'label',
+			placeholder: 'placeholder',
+			options: [
+				{
+					label: 'Option 1',
+					value: 1
 				},
-				template: `<div class="w-1/2">
-						<vv-native-select v-model:modelValue="value" :options="options" label="Label 1" use-object />
-						value: {{ value }}
-					</div>`
-			}
-		}}
+				{
+					label: 'Option 2',
+					value: 2
+				},
+				{
+					label: 'Option 3',
+					value: 3
+				}
+			],
+			'use-object': true
+		}}>
+		{Template.bind({})}
 	</Story>
 </Canvas>
 
 <Source
 	language="html"
-	code={`<vv-native-select v-model:modelValue="value" :options="options" label="Label 1" use-object />`}
+	code={`<vv-native-select v-model="value" :options="options" label="Label 1" use-object />`}
 />

package/src/stories/NativeSelect/NativeSelectValid.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 { validTest } from './NativeSelect.test'
 
 <Meta title="Components/NativeSelect/Props/valid" />
 
@@ -11,12 +12,15 @@ Let's define a story for our `valid` and `valid-label` select.
 <Canvas>
 	<Story
 		name="valid"
+		play={validTest}
 		args={{
+			name: 'select',
 			label: 'Lorem Ipsum',
 			placeholder: 'Placeholder',
 			options: ['Option 1', 'Option 2', 'Option 3'],
 			valid: true,
-			validLabel: 'The field is correct!'
+			validLabel: 'The field is correct!',
+			'data-testid': 'native-select'
 		}}>
 		{Template.bind({})}
 	</Story>
@@ -26,7 +30,7 @@ Let's define a story for our `valid` and `valid-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/NativeSelectValueKey.stories.mdx

@@ -1,5 +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 { customKeysTest } from './NativeSelect.test'
 
 <Meta title="Components/NativeSelect/Props/value-key_label-key" />
 
@@ -28,39 +30,37 @@ Options object array with custom `valueKey` ("val") and custom `labelKey` ("titl
 />
 
 <Canvas>
-	<Story name="value-key_label-key">
-		{() => {
-			return {
-				components: { VvNativeSelect },
-				data() {
-					return {
-						value: '',
-						options: [
-							{
-								title: 'Option 1',
-								val: 1
-							},
-							{
-								title: 'Option 2',
-								val: 2
-							},
-							{
-								title: 'Option 3',
-								val: 3
-							}
-						]
-					}
+	<Story
+		name="value-key_label-key"
+		play={customKeysTest}
+		args={{
+			name: 'select',
+			label: 'Lorem Ipsum',
+			placeholder: 'Placeholder',
+			value: '',
+			options: [
+				{
+					title: 'Option 1',
+					val: 1
 				},
-				template: `<div class="w-1/2">
-						<vv-native-select v-model:modelValue="value" :options="options" value-key="val" label-key="title" />
-						value: {{ value }}
-					</div>`
-			}
-		}}
+				{
+					title: 'Option 2',
+					val: 2
+				},
+				{
+					title: 'Option 3',
+					val: 3
+				}
+			],
+			'value-key': 'val',
+			'label-key': 'title',
+			'data-testid': 'native-select'
+		}}>
+		{Template.bind({})}
 	</Story>
 </Canvas>
 
 <Source
 	language="jsx"
-	code={`<vv-native-select v-model:modelValue="value" :options="options" value-key="val" label-key="title" />`}
+	code={`<vv-native-select v-model="value" :options="options" value-key="val" label-key="title" />`}
 />