chore: add better labels to field component percy tests

vuetifyjs · May 26, 2023 · 978afd4 · 978afd4
1 parent 5a902fa
commit 978afd4
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 44 deletions.
diff --git a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx
@@ -14,24 +14,25 @@ const densities = ['default', 'comfortable', 'compact'] as const
 const items = ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming'] as const
 
 const stories = Object.fromEntries(Object.entries({
-  'Default input': <VAutocomplete label="label" />,
-  Disabled: <VAutocomplete label="label" items={ items } disabled />,
-  Affixes: <VAutocomplete label="label" items={ items } prefix="prefix" suffix="suffix" />,
-  'Prepend/append': <VAutocomplete label="label" items={ items } prependIcon="$vuetify" appendIcon="$vuetify" />,
-  'Prepend/append inner': <VAutocomplete label="label" items={ items } prependInnerIcon="$vuetify" appendInnerIcon="$vuetify" />,
-  Placeholder: <VAutocomplete label="label" items={ items } placeholder="placeholder" persistentPlaceholder />,
+  'Default input': <VAutocomplete />,
+  Disabled: <VAutocomplete items={ items } disabled />,
+  Affixes: <VAutocomplete items={ items } prefix="prefix" suffix="suffix" />,
+  'Prepend/append': <VAutocomplete items={ items } prependIcon="$vuetify" appendIcon="$vuetify" />,
+  'Prepend/append inner': <VAutocomplete items={ items } prependInnerIcon="$vuetify" appendInnerIcon="$vuetify" />,
+  Placeholder: <VAutocomplete items={ items } placeholder="placeholder" persistentPlaceholder />,
 }).map(([k, v]) => [k, (
   <div class="d-flex flex-column flex-grow-1">
     { variants.map(variant => (
       densities.map(density => (
         <div class="d-flex align-start" style="gap: 0.4rem; height: 100px;">
-          { cloneVNode(v, { variant, density }) }
-          { cloneVNode(v, { variant, density, modelValue: ['California'] }) }
-          { cloneVNode(v, { variant, density, chips: true, modelValue: ['California'] }) }
+          { cloneVNode(v, { variant, density, label: `${variant} ${density}` }) }
+          { cloneVNode(v, { variant, density, label: `with value`, modelValue: ['California'] }) }
+          { cloneVNode(v, { variant, density, label: `chips`, chips: true, modelValue: ['California'] }) }
           <VAutocomplete
             variant={ variant }
             density={ density }
             modelValue={['California']}
+            label="selection slot"
             { ...v.props }
           >{{
             selection: ({ item }) => {

diff --git a/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx
@@ -14,24 +14,25 @@ const densities = ['default', 'comfortable', 'compact'] as const
 const items = ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming'] as const
 
 const stories = Object.fromEntries(Object.entries({
-  'Default input': <VCombobox label="label" />,
-  Disabled: <VCombobox label="label" items={ items } disabled />,
-  Affixes: <VCombobox label="label" items={ items } prefix="prefix" suffix="suffix" />,
-  'Prepend/append': <VCombobox label="label" items={ items } prependIcon="$vuetify" appendIcon="$vuetify" />,
-  'Prepend/append inner': <VCombobox label="label" items={ items } prependInnerIcon="$vuetify" appendInnerIcon="$vuetify" />,
-  Placeholder: <VCombobox label="label" items={ items } placeholder="placeholder" persistentPlaceholder />,
+  'Default input': <VCombobox />,
+  Disabled: <VCombobox items={ items } disabled />,
+  Affixes: <VCombobox items={ items } prefix="prefix" suffix="suffix" />,
+  'Prepend/append': <VCombobox items={ items } prependIcon="$vuetify" appendIcon="$vuetify" />,
+  'Prepend/append inner': <VCombobox items={ items } prependInnerIcon="$vuetify" appendInnerIcon="$vuetify" />,
+  Placeholder: <VCombobox items={ items } placeholder="placeholder" persistentPlaceholder />,
 }).map(([k, v]) => [k, (
   <div class="d-flex flex-column flex-grow-1">
     { variants.map(variant => (
       densities.map(density => (
         <div class="d-flex align-start" style="gap: 0.4rem; height: 100px;">
-          { cloneVNode(v, { variant, density }) }
-          { cloneVNode(v, { variant, density, modelValue: ['California'] }) }
-          { cloneVNode(v, { variant, density, chips: true, modelValue: ['California'] }) }
+          { cloneVNode(v, { variant, density, label: `${variant} ${density}` }) }
+          { cloneVNode(v, { variant, density, label: `with value`, modelValue: ['California'] }) }
+          { cloneVNode(v, { variant, density, label: `chips`, chips: true, modelValue: ['California'] }) }
           <VCombobox
             variant={ variant }
             density={ density }
             modelValue={['California']}
+            label="selection slot"
             { ...v.props }
           >{{
             selection: ({ item }) => {

diff --git a/packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.cy.tsx b/packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.cy.tsx
@@ -16,24 +16,25 @@ const densities = ['default', 'comfortable', 'compact'] as const
 const items = ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming'] as const
 
 const stories = Object.fromEntries(Object.entries({
-  'Default input': <VFileInput label="label" />,
-  Disabled: <VFileInput label="label" items={ items } disabled />,
-  Affixes: <VFileInput label="label" items={ items } prefix="prefix" suffix="suffix" />,
-  'Prepend/append': <VFileInput label="label" items={ items } prependIcon="$vuetify" appendIcon="$vuetify" />,
-  'Prepend/append inner': <VFileInput label="label" items={ items } prependInnerIcon="$vuetify" appendInnerIcon="$vuetify" />,
-  Placeholder: <VFileInput label="label" items={ items } placeholder="placeholder" persistentPlaceholder />,
+  'Default input': <VFileInput />,
+  Disabled: <VFileInput items={ items } disabled />,
+  Affixes: <VFileInput items={ items } prefix="prefix" suffix="suffix" />,
+  'Prepend/append': <VFileInput items={ items } prependIcon="$vuetify" appendIcon="$vuetify" />,
+  'Prepend/append inner': <VFileInput items={ items } prependInnerIcon="$vuetify" appendInnerIcon="$vuetify" />,
+  Placeholder: <VFileInput items={ items } placeholder="placeholder" persistentPlaceholder />,
 }).map(([k, v]) => [k, (
   <div class="d-flex flex-column flex-grow-1">
     { variants.map(variant => (
       densities.map(density => (
         <div class="d-flex align-start" style="gap: 0.4rem; height: 100px;">
-          { cloneVNode(v, { variant, density }) }
-          { cloneVNode(v, { variant, density, modelValue: [oneMBFile, twoMBFile] }) }
-          { cloneVNode(v, { variant, density, chips: true, modelValue: [oneMBFile, twoMBFile] }) }
+          { cloneVNode(v, { variant, density, label: `${variant} ${density}` }) }
+          { cloneVNode(v, { variant, density, label: `with value`, modelValue: [oneMBFile, twoMBFile] }) }
+          { cloneVNode(v, { variant, density, label: `chips`, chips: true, modelValue: [oneMBFile, twoMBFile] }) }
           <VFileInput
             variant={ variant }
             density={ density }
             modelValue={[oneMBFile, twoMBFile]}
+            label="selection slot"
             { ...v.props }
           >{{
             selection: ({ fileNames }) => {

diff --git a/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx b/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx
@@ -15,24 +15,25 @@ const densities = ['default', 'comfortable', 'compact'] as const
 const items = ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming'] as const
 
 const stories = Object.fromEntries(Object.entries({
-  'Default input': <VSelect label="label" items={ items } />,
-  Disabled: <VSelect label="label" items={ items } disabled />,
-  Affixes: <VSelect label="label" items={ items } prefix="prefix" suffix="suffix" />,
-  'Prepend/append': <VSelect label="label" items={ items } prependIcon="$vuetify" appendIcon="$vuetify" />,
-  'Prepend/append inner': <VSelect label="label" items={ items } prependInnerIcon="$vuetify" appendInnerIcon="$vuetify" />,
-  Placeholder: <VSelect label="label" items={ items } placeholder="placeholder" persistentPlaceholder />,
+  'Default input': <VSelect items={ items } />,
+  Disabled: <VSelect items={ items } disabled />,
+  Affixes: <VSelect items={ items } prefix="prefix" suffix="suffix" />,
+  'Prepend/append': <VSelect items={ items } prependIcon="$vuetify" appendIcon="$vuetify" />,
+  'Prepend/append inner': <VSelect items={ items } prependInnerIcon="$vuetify" appendInnerIcon="$vuetify" />,
+  Placeholder: <VSelect items={ items } placeholder="placeholder" persistentPlaceholder />,
 }).map(([k, v]) => [k, (
   <div class="d-flex flex-column flex-grow-1">
     { variants.map(variant => (
       densities.map(density => (
         <div class="d-flex align-start" style="gap: 0.4rem; height: 100px;">
-          { cloneVNode(v, { variant, density }) }
-          { cloneVNode(v, { variant, density, modelValue: ['California'] }) }
-          { cloneVNode(v, { variant, density, chips: true, modelValue: ['California'] }) }
+          { cloneVNode(v, { variant, density, label: `${variant} ${density}` }) }
+          { cloneVNode(v, { variant, density, label: `with value`, modelValue: ['California'] }) }
+          { cloneVNode(v, { variant, density, label: `chips`, chips: true, modelValue: ['California'] }) }
           <VSelect
             variant={ variant }
             density={ density }
             modelValue={['California']}
+            label="selection slot"
             { ...v.props }
           >{{
             selection: ({ item }) => {

diff --git a/packages/vuetify/src/components/VTextField/__tests__/VTextField.spec.cy.tsx b/packages/vuetify/src/components/VTextField/__tests__/VTextField.spec.cy.tsx
@@ -10,19 +10,19 @@ const variants = ['underlined', 'outlined', 'filled', 'solo', 'plain'] as const
 const densities = ['default', 'comfortable', 'compact'] as const
 
 const stories = Object.fromEntries(Object.entries({
-  'Default input': <VTextField label="label" />,
-  Disabled: <VTextField label="label" disabled />,
-  Affixes: <VTextField label="label" prefix="prefix" suffix="suffix" />,
-  'Prepend/append': <VTextField label="label" prependIcon="$vuetify" appendIcon="$vuetify" />,
-  'Prepend/append inner': <VTextField label="label" prependInnerIcon="$vuetify" appendInnerIcon="$vuetify" />,
-  Placeholder: <VTextField label="label" placeholder="placeholder" persistentPlaceholder />,
+  'Default input': <VTextField />,
+  Disabled: <VTextField disabled />,
+  Affixes: <VTextField prefix="prefix" suffix="suffix" />,
+  'Prepend/append': <VTextField prependIcon="$vuetify" appendIcon="$vuetify" />,
+  'Prepend/append inner': <VTextField prependInnerIcon="$vuetify" appendInnerIcon="$vuetify" />,
+  Placeholder: <VTextField placeholder="placeholder" persistentPlaceholder />,
 }).map(([k, v]) => [k, (
   <div class="d-flex flex-column flex-grow-1">
     { variants.map(variant => (
       densities.map(density => (
         <div class="d-flex align-start" style="gap: 0.4rem; height: 100px;">
-          { cloneVNode(v, { variant, density }) }
-          { cloneVNode(v, { variant, density, modelValue: 'Value' }) }
+          { cloneVNode(v, { variant, density, label: `${variant} ${density}` }) }
+          { cloneVNode(v, { variant, density, label: `with value`, modelValue: 'Value' }) }
         </div>
       ))
     )).flat()}