@dimailn/vuetify 2.7.2-alpha29 → 2.7.2-alpha31

package/src/components/VFileInput/VFileInput.ts

@@ -77,7 +77,7 @@ export default defineComponent({
     } as PropValidator<File | File[]>,
   },
 
-  emits: ['change', 'keydown'],
+  emits: ['change', 'keydown', 'click:prepend'],
 
   computed: {
     classes (): object {
@@ -104,7 +104,7 @@ export default defineComponent({
       )
     },
     internalArrayValue (): File[] {
-      return wrapInArray(this.internalValue)
+      return wrapInArray(this.internalValue).filter((v: any) => v instanceof File)
     },
     internalValue: {
       get (): File[] {
@@ -179,37 +179,46 @@ export default defineComponent({
           const internalValue = this.internalValue
           internalValue.splice(index, 1)
           this.internalValue = internalValue // Trigger the watcher
-        }
+        },
       }, [text]))
     },
     genControl () {
       const render = VTextField.methods.genControl.call(this)
 
       if (this.hideInput) {
-        render.style = mergeStyles(
-          render.style,
-          { display: 'none' }
-        )
+        if (render.props) {
+          render.props.style = mergeStyles(render.props.style, {
+            display: 'none',
+          })
+        } else {
+          render.props = {
+            style: { display: 'none' },
+          }
+        }
       }
 
       return render
     },
     genInput () {
-      const input = VTextField.methods.genInput.call(this)
-
-      input.multiple = this.multiple
-
-      // We should not be setting value
-      // programmatically on the input
-      // when it is using type="file"
-      delete input.value
-
-      // This solves an issue in Safari where
-      // nothing happens when adding a file
-      // due to the input event not firing
-      // https://github.com/vuetifyjs/vuetify/issues/7941
-      delete input.onInput
-      input.onChange = this.onInput
+      // Create input without calling VTextField.genInput to avoid value setting
+      const listeners = Object.assign({}, this.listeners$)
+      delete listeners.change // Change should not be bound externally
+      const { title, value, ...inputAttrs } = this.attrs$
+
+      const input = h('input', {
+        ...inputAttrs,
+        autofocus: this.autofocus,
+        disabled: this.isDisabled,
+        id: this.computedId,
+        placeholder: this.placeholder,
+        readonly: this.isReadonly,
+        type: this.type,
+        multiple: this.multiple,
+        ...listeners,
+        onChange: this.onInput,
+        onKeyDown: this.onKeyDown,
+        ref: 'input',
+      })
 
       return [this.genSelections(), input]
     },
@@ -252,20 +261,24 @@ export default defineComponent({
         class: ['v-file-input__text', {
           'v-file-input__text--placeholder': this.placeholder && !this.isDirty,
           'v-file-input__text--chips': this.hasChips && !this.$slots.selection,
-        }]
+        }],
       }, children)
     },
     genTextFieldSlot () {
-      const node = VTextField.methods.genTextFieldSlot.call(this)
-
-      node.onClick = (e: MouseEvent) => {
-        // Clicking the label already delegates to input element, so we shouldn't click it twice
-        if (e.target && (e.target as HTMLElement).nodeName === 'LABEL') return
-
-        this.$refs.input.click()
-      }
-
-      return node
+      return h('div', {
+        class: 'v-text-field__slot',
+        onClick: (e: MouseEvent) => {
+          // Clicking the label already delegates to input element, so we shouldn't click it twice
+          if (e.target && (e.target as HTMLElement).nodeName === 'LABEL') return
+
+          this.$refs.input.click()
+        },
+      }, [
+        this.genLabel(),
+        this.prefix ? this.genAffix('prefix') : null,
+        this.genInput(),
+        this.suffix ? this.genAffix('suffix') : null,
+      ])
     },
     onInput (e: Event) {
       const files = [...(e.target as HTMLInputElement).files || []]

package/src/components/VFileInput/__tests__/VFileInput.spec.ts

@@ -1,17 +1,16 @@
 // Components
 import VFileInput from '../VFileInput'
 
-// Services
-import { Lang } from '../../../services/lang'
-
 // Preset
 import { preset } from '../../../presets/default'
 
 // Libraries
 import {
-  Wrapper,
+  VueWrapper,
   mount,
-  MountOptions,
+  config,
+  MountingOptions,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 const oneMBFile = new File([new ArrayBuffer(1048576)], 'test')
@@ -19,19 +18,23 @@ const twoMBFile = new File([new ArrayBuffer(2097152)], 'test')
 
 describe('VFileInput.ts', () => {
   type Instance = InstanceType<typeof VFileInput>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
       return mount(VFileInput, {
-        // https://github.com/vuejs/vue-test-utils/issues/1130
-        sync: false,
-        mocks: {
-          $vuetify: {
-            lang: new Lang(preset),
+        ...options,
+        props: {
+          label: 'File input',
+          ...options?.props,
+        },
+        global: {
+          mocks: {
+            ...config.global.mocks,
           },
         },
-        ...options,
       })
     }
   })
@@ -44,7 +47,7 @@ describe('VFileInput.ts', () => {
 
   it('should render multiple', () => {
     const wrapper = mountFunction({
-      propsData: { multiple: true },
+      props: { multiple: true },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -52,44 +55,44 @@ describe('VFileInput.ts', () => {
 
   it('should render counter', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         counter: true,
-        value: [oneMBFile],
+        modelValue: [oneMBFile],
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should display file size', () => {
+  it('should display file size', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         showSize: true,
-        value: [twoMBFile],
+        modelValue: [twoMBFile],
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       showSize: 1000,
     })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should display total size in counter', () => {
+  it('should display total size in counter', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         showSize: true,
         counter: true,
-        value: [oneMBFile, twoMBFile],
+        modelValue: [oneMBFile, twoMBFile],
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       showSize: 1000,
     })
 
@@ -98,7 +101,7 @@ describe('VFileInput.ts', () => {
 
   it('should be unclearable', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         clearable: false,
       },
     })
@@ -108,7 +111,7 @@ describe('VFileInput.ts', () => {
 
   it('should work with accept', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         accept: 'image/*',
       },
     })
@@ -118,12 +121,12 @@ describe('VFileInput.ts', () => {
 
   it('should disable file input', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         disabled: true,
       },
     })
 
-    expect(wrapper.find('input').element.getAttribute('disabled')).toBe('disabled')
+    expect(wrapper.find('input').element.disabled).toBe(true)
   })
 
   it('should proxy icon and text click to input', () => {
@@ -144,7 +147,7 @@ describe('VFileInput.ts', () => {
 
   it('should clear', () => {
     const wrapper = mountFunction({
-      propsData: { value: oneMBFile },
+      props: { modelValue: oneMBFile },
     })
 
     wrapper.vm.clearableCallback()
@@ -152,7 +155,7 @@ describe('VFileInput.ts', () => {
 
     const wrapper2 = mountFunction({
       attrs: { multiple: '' },
-      propsData: { value: oneMBFile },
+      props: { modelValue: oneMBFile },
     })
 
     wrapper2.vm.clearableCallback()
@@ -163,7 +166,7 @@ describe('VFileInput.ts', () => {
     const wrapper = mountFunction()
 
     wrapper.setProps({
-      value: [oneMBFile],
+      modelValue: [oneMBFile],
     })
 
     await wrapper.vm.$nextTick()
@@ -173,9 +176,9 @@ describe('VFileInput.ts', () => {
 
   it('should render chips', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         chips: true,
-        value: [oneMBFile],
+        modelValue: [oneMBFile],
       },
     })
 
@@ -184,7 +187,7 @@ describe('VFileInput.ts', () => {
 
   it('should render small chips', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         smallChips: true,
       },
       data: () => ({
@@ -198,7 +201,7 @@ describe('VFileInput.ts', () => {
   // https://github.com/vuetifyjs/vuetify/issues/8049
   it('should render without icon', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         prependIcon: '',
       },
     })
@@ -208,12 +211,7 @@ describe('VFileInput.ts', () => {
 
   // https://github.com/vuetifyjs/vuetify/issues/8167
   it('should not emit change event when blurred', async () => {
-    const change = jest.fn()
-    const wrapper = mountFunction({
-      listeners: {
-        change,
-      },
-    })
+    const wrapper = mountFunction()
 
     const input = wrapper.find('input')
 
@@ -226,31 +224,26 @@ describe('VFileInput.ts', () => {
     input.trigger('blur')
     await wrapper.vm.$nextTick()
 
-    expect(change).toHaveBeenCalledTimes(1)
+    expect(wrapper.emitted('change')).toHaveLength(1)
   })
 
   it('should not emit change event when pressing enter', async () => {
-    const change = jest.fn()
-    const wrapper = mountFunction({
-      listeners: {
-        change,
-      },
-    })
+    const wrapper = mountFunction()
 
     const input = wrapper.find('input')
 
     input.trigger('keydown.enter')
     await wrapper.vm.$nextTick()
 
-    expect(change).not.toHaveBeenCalled()
+    expect(wrapper.emitted('change')).toBeFalsy()
   })
 
   it('should truncate correctly', async () => {
     const fifteenCharFile = new File(['V'.repeat(15)], 'testFile15Chars')
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         truncateLength: 1,
-        value: fifteenCharFile,
+        modelValue: fifteenCharFile,
       },
     })
 
@@ -281,13 +274,13 @@ describe('VFileInput.ts', () => {
     expect(wrapper.find('.v-file-input__text').text()).toBe('test…hars')
   })
 
-  it('should filter internal array values for instanceof File', () => {
+  it('should filter internal array values for instanceof File', async () => {
     const wrapper = mountFunction()
 
     const values = [null, undefined, {}, [null], [undefined], [{}]]
 
     for (const value of values) {
-      wrapper.setProps({ value })
+      await wrapper.setProps({ modelValue: value })
 
       expect(wrapper.vm.internalArrayValue).toEqual([])
     }
@@ -295,9 +288,46 @@ describe('VFileInput.ts', () => {
 
   it('should set display none if hide-input prop is set', () => {
     const wrapper = mountFunction({
-      propsData: { hideInput: true },
+      props: { hideInput: true },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should hide control element when hideInput is true', () => {
+    const wrapper = mountFunction({
+      props: { hideInput: true },
+    })
+
+    // Проверяем, что control элемент имеет display: none
+    const control = wrapper.find('.v-input__control')
+    expect(control.element.style.display).toBe('none')
+  })
+
+  it('should not hide control element when hideInput is false', () => {
+    const wrapper = mountFunction({
+      props: { hideInput: false },
     })
 
+    // Проверяем, что control элемент не скрыт
+    const control = wrapper.find('.v-input__control')
+    expect(control.element.style.display).toBe('')
+  })
+
+  it('should render with hideInput prop like original Vuetify', () => {
+    const wrapper = mountFunction({
+      props: {
+        hideInput: true,
+        accept: 'image/*',
+        label: 'File input'
+      },
+    })
+
+    // Проверяем, что control элемент скрыт
+    const control = wrapper.find('.v-input__control')
+    expect(control.element.style.display).toBe('none')
+
+    // Проверяем снимок для полного соответствия оригинальному Vuetify
     expect(wrapper.html()).toMatchSnapshot()
   })
 })