chore: Add percy tests for select components (#17425)

vuetifyjs · May 24, 2023 · 4cbe669 · 4cbe669
1 parent f18bfdb
commit 4cbe669
Show file tree

Hide file tree

Showing 5 changed files with 176 additions and 10 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
@@ -5,9 +5,46 @@ import { VAutocomplete } from '../VAutocomplete'
 import { VForm } from '@/components/VForm'
 
 // Utilities
-import { ref } from 'vue'
+import { cloneVNode, ref } from 'vue'
+import { generate } from '../../../../cypress/templates'
 import { keyValues } from '@/util'
 
+const variants = ['underlined', 'outlined', 'filled', 'solo', 'plain'] as const
+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 />,
+}).map(([k, v]) => [k, (
+  <div class="d-flex flex-column flex-grow-1">
+    { variants.map(variant => (
+      densities.map(density => (
+        <div class="d-flex" style="gap: 0.4rem">
+          { cloneVNode(v, { variant, density }) }
+          { cloneVNode(v, { variant, density, modelValue: ['California'] }) }
+          { cloneVNode(v, { variant, density, chips: true, modelValue: ['California'] }) }
+          <VAutocomplete
+            variant={ variant }
+            density={ density }
+            modelValue={['California']}
+            { ...v.props }
+          >{{
+            selection: ({ item }) => {
+              return item.title
+            },
+          }}
+          </VAutocomplete>
+        </div>
+      ))
+    )).flat()}
+  </div>
+)]))
+
 describe('VAutocomplete', () => {
   it('should close only first chip', () => {
     const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4']
@@ -352,4 +389,8 @@ describe('VAutocomplete', () => {
       .get('.v-list-item')
       .should('have.length', 6)
   })
+
+  describe('Showcase', () => {
+    generate({ stories })
+  })
 })
diff --git a/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx
@@ -5,9 +5,46 @@ import { VCombobox } from '../VCombobox'
 import { VForm } from '@/components/VForm'
 
 // Utilities
-import { ref } from 'vue'
+import { cloneVNode, ref } from 'vue'
+import { generate } from '../../../../cypress/templates'
 import { keyValues } from '@/util'
 
+const variants = ['underlined', 'outlined', 'filled', 'solo', 'plain'] as const
+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 />,
+}).map(([k, v]) => [k, (
+  <div class="d-flex flex-column flex-grow-1">
+    { variants.map(variant => (
+      densities.map(density => (
+        <div class="d-flex" style="gap: 0.4rem">
+          { cloneVNode(v, { variant, density }) }
+          { cloneVNode(v, { variant, density, modelValue: ['California'] }) }
+          { cloneVNode(v, { variant, density, chips: true, modelValue: ['California'] }) }
+          <VCombobox
+            variant={ variant }
+            density={ density }
+            modelValue={['California']}
+            { ...v.props }
+          >{{
+            selection: ({ item }) => {
+              return item.title
+            },
+          }}
+          </VCombobox>
+        </div>
+      ))
+    )).flat()}
+  </div>
+)]))
+
 describe('VCombobox', () => {
   describe('closableChips', () => {
     it('should close only first chip', () => {
@@ -521,4 +558,8 @@ describe('VCombobox', () => {
       .get('.v-list-item')
       .should('have.length', 6)
   })
+
+  describe('Showcase', () => {
+    generate({ stories })
+  })
 })
diff --git a/packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.cy.tsx b/packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.cy.tsx
@@ -1,16 +1,52 @@
 /// <reference types="../../../../types/cypress" />
 
-import { CenteredGrid } from '@/../cypress/templates'
+import { CenteredGrid, generate } from '@/../cypress/templates'
 
 // Components
 import { VFileInput } from '../VFileInput'
 
 // Utilities
-import { ref } from 'vue'
+import { cloneVNode, ref } from 'vue'
 
 const oneMBFile = new File([new ArrayBuffer(1021576)], '1MB file')
 const twoMBFile = new File([new ArrayBuffer(2021152)], '2MB file')
 
+const variants = ['underlined', 'outlined', 'filled', 'solo', 'plain'] as const
+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 />,
+}).map(([k, v]) => [k, (
+  <div class="d-flex flex-column flex-grow-1">
+    { variants.map(variant => (
+      densities.map(density => (
+        <div class="d-flex" style="gap: 0.4rem">
+          { cloneVNode(v, { variant, density }) }
+          { cloneVNode(v, { variant, density, modelValue: [oneMBFile, twoMBFile] }) }
+          { cloneVNode(v, { variant, density, chips: true, modelValue: [oneMBFile, twoMBFile] }) }
+          <VFileInput
+            variant={ variant }
+            density={ density }
+            modelValue={[oneMBFile, twoMBFile]}
+            { ...v.props }
+          >{{
+            selection: ({ fileNames }) => {
+              return fileNames.map(f => f)
+            },
+          }}
+          </VFileInput>
+        </div>
+      ))
+    )).flat()}
+  </div>
+)]))
+
 describe('VFileInput', () => {
   it('should add file', () => {
     cy.mount(() => (
@@ -193,4 +229,8 @@ describe('VFileInput', () => {
         expect(input.files).to.have.length(0)
       })
   })
+
+  describe('Showcase', () => {
+    generate({ stories })
+  })
 })
diff --git a/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx b/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx
@@ -6,9 +6,46 @@ import { VForm } from '@/components/VForm'
 import { VListItem } from '@/components/VList'
 
 // Utilities
-import { ref } from 'vue'
+import { cloneVNode, ref } from 'vue'
+import { generate } from '../../../../cypress/templates'
 import { keyValues } from '@/util'
 
+const variants = ['underlined', 'outlined', 'filled', 'solo', 'plain'] as const
+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 />,
+}).map(([k, v]) => [k, (
+  <div class="d-flex flex-column flex-grow-1">
+    { variants.map(variant => (
+      densities.map(density => (
+        <div class="d-flex" style="gap: 0.4rem">
+          { cloneVNode(v, { variant, density }) }
+          { cloneVNode(v, { variant, density, modelValue: ['California'] }) }
+          { cloneVNode(v, { variant, density, chips: true, modelValue: ['California'] }) }
+          <VSelect
+            variant={ variant }
+            density={ density }
+            modelValue={['California']}
+            { ...v.props }
+          >{{
+            selection: ({ item }) => {
+              return item.title
+            },
+          }}
+          </VSelect>
+        </div>
+      ))
+    )).flat()}
+  </div>
+)]))
+
 describe('VSelect', () => {
   it('should render selection slot', () => {
     const items = [
@@ -397,4 +434,8 @@ describe('VSelect', () => {
       .trigger('keydown', { key: keyValues.esc })
       .should('not.have.class', 'v-select--active-menu')
   })
+
+  describe('Showcase', () => {
+    generate({ stories })
+  })
 })
diff --git a/packages/vuetify/src/components/VTextField/__tests__/VTextField.spec.cy.tsx b/packages/vuetify/src/components/VTextField/__tests__/VTextField.spec.cy.tsx
@@ -7,6 +7,7 @@ import { cloneVNode } from 'vue'
 import { generate } from '../../../../cypress/templates'
 
 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" />,
@@ -18,11 +19,13 @@ const stories = Object.fromEntries(Object.entries({
 }).map(([k, v]) => [k, (
   <div class="d-flex flex-column flex-grow-1">
     { variants.map(variant => (
-      <div class="d-flex" style="gap: 0.4rem">
-        { cloneVNode(v, { variant }) }
-        { cloneVNode(v, { variant, modelValue: 'Value' }) }
-      </div>
-    ))}
+      densities.map(density => (
+        <div class="d-flex" style="gap: 0.4rem">
+          { cloneVNode(v, { variant, density }) }
+          { cloneVNode(v, { variant, density, modelValue: 'Value' }) }
+        </div>
+      ))
+    )).flat()}
   </div>
 )]))