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

package/src/stories/Radio/RadioSlots.stories.mdx

@@ -1,16 +1,18 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
 
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
-<Meta title="Components/RadioButton/Slots" component={VvRadio} />
+<Meta title="Components/Radio/Slots" component={VvRadio} />
 
 # Slot default
 
-Slot default define the content of RadioButton
+Slot default define the content of Radio
 
 <Source
 	language="jsx"
-	code={'<vv-radio name="r1" value="1">My content</vv-radio>'}
+	code={`
+<vv-radio name="option" :value="1">Option 1</vv-radio>
+<vv-radio name="option" :value="2">Option 2</vv-radio>
+<vv-radio name="option" :value="3">Option 3</vv-radio>`}
 />
 
 <Canvas>
@@ -18,10 +20,22 @@ Slot default define the content of RadioButton
 		{() => {
 			return {
 				components: { VvRadio },
+				data() {
+					return {
+						option: 1
+					}
+				},
 				template: `
-					<vv-radio name="r1" value="1">
-						My content
+					<vv-radio v-model="option" name="option" :value="1">
+						Option 1
+					</vv-radio>
+					<vv-radio v-model="option" name="option" :value="2">
+						Option 2
+					</vv-radio>
+					<vv-radio v-model="option" name="option" :value="3">
+						Option 3
 					</vv-radio>
+					<div>Selected: {{ option }}</div>
                     `
 			}
 		}}

package/src/stories/RadioGroup/RadioGroup.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 { radioGroupTest } from './RadioProperty.test.ts'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
+import { radioGroupTest } from './RadioGroup.test'
 
 <Meta title="Components/RadioGroup" component={VvRadioGroup} />
 
@@ -15,15 +13,13 @@ export const Template = (args, { argTypes }) => ({
 	},
 	data: () => ({ selected: args.modelValue || null }),
 	template: `
-		<div class="flex flex-row justify-between">
-            <vv-radio-group role="radiogroup" v-bind="args" v-model:modelValue="selected">
-                <template v-slot:hint>
-                    <p>Ciao sono un hint di default. Piacere.</p>
-                </template> 
-            </vv-radio-group>
-            <strong v-if="selected">Selezione: {{selected}} </strong> 
-        </div>
-        `
+		<vv-radio-group v-model="selected" v-bind="args" data-testId="radiogroup">
+			<template v-slot:hint>
+				<p>Lorem ipsum dolor sit amet</p>
+			</template> 
+		</vv-radio-group>
+		<strong v-if="selected">Selected options: {{selected}} </strong> 
+    `
 })
 
 # VvRadioGroup
@@ -38,15 +34,14 @@ A group of radios.
 		play={radioGroupTest}
 		args={{
 			name: 'radio',
-			label: 'Prova',
+			label: 'Test',
 			vertical: false,
 			disabled: false,
 			readonly: false,
 			options: [],
 			optionLabel: 'label',
 			optionValue: 'value',
-			hintLabel: 'Ciccio',
-			role: 'radiogroup'
+			hintLabel: 'Lorem ipsum dolor sit amet'
 		}}>
 		{(args) => {
 			return {
@@ -56,18 +51,16 @@ A group of radios.
 					return { args }
 				},
 				template: `
-                    <div class="flex flex-row justify-between">
-                        <vv-radio-group v-bind="args" v-model:modelValue="selected">
-                            <vv-radio id="radio_opt1" name="opts" value="1">Opt 1</vv-radio>
-                            <vv-radio id="radio_opt2" 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>
-                    `
+					<vv-radio-group v-model="selected" v-bind="args" data-testId="radiogroup">
+						<vv-radio id="radio_opt1" name="opts" value="1">Option 1</vv-radio>
+						<vv-radio id="radio_opt2" 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> 
+    			`
 			}
 		}}
 	</Story>
 </Canvas>
 
-<ArgsTable of={VvCheckGroup} />
+<ArgsTable of={VvRadioGroup} />

package/src/stories/RadioGroup/RadioGroup.test.ts

@@ -0,0 +1,139 @@
+import type { PlayAttributes, ComponentConfig } from '@/test/types'
+import { within } from '@storybook/testing-library'
+import { expect } from '@/test/expect'
+
+async function radioGroupTest(
+	{ canvasElement }: PlayAttributes = {} as PlayAttributes,
+	{
+		isClickDisabled = false,
+		className = null,
+		isVertical = false
+	}: ComponentConfig = {}
+) {
+	const radioGroupParent = await within(canvasElement).findByTestId(
+		'radiogroup'
+	)
+	const radios = document.getElementsByClassName('vv-radio__input')
+	const radio1 = radios[0] as HTMLInputElement
+	const radio2 = radios[1] as HTMLInputElement
+	expect(radioGroupParent).toHaveClass('vv-radio-group')
+	if (!isVertical) {
+		expect(radioGroupParent).toHaveClass(['vv-radio-group--horizontal'])
+	} else {
+		expect(radioGroupParent).not.toHaveClass('vv-radio--horizontal')
+	}
+	if (className) {
+		expect(radioGroupParent).toHaveClass(className)
+	}
+	if (isClickDisabled) {
+		await expect(radio1).not.toBeClicked()
+		expect(radio1.parentElement).toHaveClass('vv-radio--disabled')
+	} else {
+		await expect(radio1).toBeClicked()
+		radioCheck(radio1, true)
+		radioCheck(radio2, false)
+	}
+	expect(radioGroupParent).toHaveNoViolations()
+}
+
+async function labelTest(
+	{ canvasElement, ...data }: PlayAttributes = {} as PlayAttributes,
+	{ child = 0, propName = '' }: ComponentConfig = {}
+) {
+	const radioGroupParent = await within(canvasElement).findByTestId(
+		'radiogroup'
+	)
+	const labelInnerHTML = radioGroupParent.children[child].innerHTML
+	const propLabel = data.args[propName]
+	expect(labelInnerHTML).toBeTruthy()
+	expect(propLabel).toBeTruthy()
+	expect(labelInnerHTML).toEqual(propLabel)
+	await radioGroupTest({ canvasElement, ...data })
+}
+
+async function readonlyTest(
+	{ canvasElement }: PlayAttributes = {} as PlayAttributes
+) {
+	const radioGroup = (await within(canvasElement).findByTestId(
+		'radiogroup'
+	)) as HTMLDivElement
+	const radios = [...radioGroup.getElementsByClassName('vv-radio')]
+	radios.forEach((radio) => {
+		expect(radio).toHaveClass('vv-radio--readonly')
+	})
+}
+
+async function radioCheck(radio: HTMLInputElement, value: boolean) {
+	expect(radio.checked).toBe(value)
+}
+
+async function slotsTest(
+	{ canvasElement, ...args }: PlayAttributes = {} as PlayAttributes,
+	{ className }: ComponentConfig = {} as ComponentConfig
+) {
+	const radioGroupParent = await within(canvasElement).findByTestId(
+		'radiogroup'
+	)
+	const slot = radioGroupParent.lastElementChild as HTMLElement
+	expect(slot).toHaveClass('vv-radio-group__hint')
+	expect(slot.innerText).toBeTruthy()
+	if (className) {
+		expect(radioGroupParent).toHaveClass(`vv-radio-group--${className}`)
+	}
+	expect(slot).toHaveNoViolations()
+	await radioGroupTest({ canvasElement, ...args })
+}
+
+type optionFn = (a: { [key: string]: string }) => string
+
+function getValueToTest(
+	option: { [key: string]: string },
+	key: string | optionFn
+) {
+	return typeof key == 'string' ? `${option[key]}` : `${key(option)}`
+}
+
+async function radioOptionsTest({ canvasElement, ...data }: PlayAttributes) {
+	const radioGroup = await within(canvasElement).findByTestId('radiogroup')
+	const radioGroupWrapper = radioGroup.children[0]
+	const optionParamLabel = (data.args.optionLabel || 'label') as
+		| string
+		| optionFn
+	const optionParamValue = (data.args.optionValue || 'value') as
+		| string
+		| optionFn
+	const options = data.args.options as Record<string, string>[]
+	options.forEach((option, index: number) => {
+		const radio = radioGroupWrapper.children[index] as HTMLElement
+		const radioInput = radio.children[0] as HTMLInputElement
+		const radioText = radio.innerText
+		expect(radioText).toEqual(getValueToTest(option, optionParamLabel))
+		expect(radioInput.value).toEqual(
+			getValueToTest(option, optionParamValue)
+		)
+	})
+	radioGroupTest({ canvasElement, ...data })
+}
+
+async function arrayOptionsTest({ canvasElement, ...data }: PlayAttributes) {
+	const radioGroup = await within(canvasElement).findByTestId('radiogroup')
+	const radioGroupWrapper = radioGroup.children[0]
+	const options = data.args.options as Record<string, string>[]
+	options.forEach((option, index: number) => {
+		const radio = radioGroupWrapper.children[index] as HTMLElement
+		const radioInput = radio.children[0] as HTMLInputElement
+		const radioText = radio.innerText
+		expect(radioInput.value).toEqual(option)
+		expect(radioText).toEqual(option)
+	})
+	radioGroupTest({ canvasElement, ...data })
+}
+
+export {
+	radioGroupTest,
+	labelTest,
+	readonlyTest,
+	slotsTest,
+	radioOptionsTest,
+	arrayOptionsTest
+}

package/src/stories/RadioGroup/RadioGroupDisabled.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/Disabled" component={VvRadioGroup} />
 
@@ -21,9 +19,9 @@ import { Template } from './RadioGroup.stories.mdx'
 		args={{
 			name: 'disabled',
 			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' }
 			],
 			disabled: true,
 			role: 'radiogroup'

package/src/stories/RadioGroup/RadioGroupError.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/Error" component={VvRadioGroup} />
 
@@ -15,19 +13,19 @@ import { Template } from './RadioGroup.stories.mdx'
 		name="Error"
 		play={async (ctx) => {
 			radioGroupTest(ctx, {
-				className: 'vv-input-radio-group--invalid'
+				className: 'vv-radio-group--invalid'
 			})
 		}}
 		args={{
 			name: 'error',
 			options: [
-				{ value: 1, name: 'Mela' },
-				{ value: 2, name: 'Pera' },
-				{ value: 3, name: 'Banana' }
+				{ value: 1, label: 'Option 1' },
+				{ value: 2, label: 'Option 2' },
+				{ value: 3, label: 'Option 3' }
 			],
-			optionLabel: (o) => `Frutto: ${o.name}`,
+			optionLabel: (o) => `${o.name} option`,
 			error: true,
-			errorLabel: ['Errore 1', 'Errore 2'],
+			errorLabel: ['First error', 'Second error'],
 			role: 'radiogroup'
 		}}>
 		{Template.bind({})}

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 } 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} />
 
@@ -21,12 +19,12 @@ import { labelTest } from './RadioProperty.test.ts'
 		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 './RadioProperty.test.ts'
+import { labelTest } from './RadioGroup.test'
 
 <Meta title="Components/RadioGroup/Label" component={VvRadioGroup} />
 
@@ -22,9 +20,9 @@ import { labelTest } from './RadioProperty.test.ts'
 		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,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 { radioOptionsTest } from './RadioOption.test.ts'
+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,9 +17,9 @@ Change object prop for label
 		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',
 			role: 'radiogroup'
@@ -30,7 +28,7 @@ Change object prop for label
 	</Story>
 </Canvas>
 
-# OptionLabel Function
+# OptionLabel function
 
 Use function to define option label
 
@@ -41,11 +39,11 @@ Use function to define option label
 		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({})}

package/src/stories/RadioGroup/RadioGroupOptionValue.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 { radioOptionsTest } from './RadioOption.test.ts'
+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,9 +17,9 @@ Change object prop for value
 		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',
 			role: 'radiogroup'
@@ -41,9 +39,9 @@ Use function to define option value
 		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}`,
 			role: 'radiogroup'

package/src/stories/RadioGroup/RadioGroupOptions.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 { radioOptionsTest, arrayOptionsTest } from './RadioOption.test.ts'
+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,9 +17,9 @@ Check group based on list of object list
 		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'
 		}}>
@@ -37,7 +35,7 @@ Check group based on list of object list
 		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'