@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha31

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

@@ -1,279 +1,215 @@
-import VInput from '../VInput'
-import {
-  mount,
-  MountOptions,
-  Wrapper,
-} from '@vue/test-utils'
-
-describe('VInput.ts', () => {
-  type Instance = InstanceType<typeof VInput>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+import VInput from "../VInput";
+import { mount, MountingOptions, VueWrapper } from "@vue/test-utils";
+import { h } from "vue";
+
+describe("VInput.ts", () => {
+  type Instance = InstanceType<typeof VInput>;
+  let mountFunction: (
+    options?: MountingOptions<Instance>
+  ) => VueWrapper<Instance>;
+
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
-      return mount(VInput, {
-        // https://github.com/vuejs/vue-test-utils/issues/1130
-        sync: false,
-        mocks: {
-          $vuetify: {
-            lang: {
-              t: (val: string) => val,
-            },
-          },
-        },
+    mountFunction = (options?: MountingOptions<Instance>) => {
+      const defaultOptions = {
+        global: {
+          mocks: {
+            // Мокаем только необходимые свойства Vuetify
+            $vuetify: {
+              lang: {
+                t: (val: string) => val
+              },
+              icons: {
+                component: "mdi"
+              }
+            }
+          }
+        }
+      };
+
+      // Объединяем опции правильно
+      const mergedOptions = {
+        ...defaultOptions,
         ...options,
-      })
-    }
-  })
-
-  it('should have hint', () => {
-    const wrapper = mountFunction({
-      propsData: {
-        hint: 'foo',
-      },
-    })
-
-    expect(wrapper.vm.hasHint).toBe(false)
-    wrapper.setProps({ persistentHint: true })
-    expect(wrapper.vm.hasHint).toBe(true)
-    wrapper.setProps({ persistentHint: false })
-    expect(wrapper.vm.hasHint).toBe(false)
-    wrapper.setData({ isFocused: true })
-    expect(wrapper.vm.hasHint).toBe(true)
-  })
-
-  it('should emit an input update', () => {
-    const wrapper = mountFunction()
-
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
-
-    expect(wrapper.vm.lazyValue).toBeUndefined()
-    wrapper.vm.internalValue = 'foo'
-    expect(input).toHaveBeenCalledWith('foo')
-    expect(wrapper.vm.lazyValue).toBe('foo')
-  })
-
-  it('should generate append and prepend slots', () => {
-    const el = slot => ({
-      render: h => h('div', slot),
-    })
-    const wrapper = mountFunction({
-      slots: { append: [el('append')] },
-    })
-    const wrapper2 = mountFunction({
-      slots: { prepend: [el('prepend')] },
-    })
+        global: {
+          ...defaultOptions.global,
+          ...options?.global
+        }
+      };
 
-    expect(wrapper.html()).toMatchSnapshot()
-    expect(wrapper2.html()).toMatchSnapshot()
-  })
+      return mount(VInput, mergedOptions);
+    };
+  });
 
-  it('should generate an icon and match snapshot', async () => {
+  it("should have hint", async () => {
+    const wrapper = mountFunction({
+      props: {
+        hint: "foo"
+      }
+    });
+
+    expect(wrapper.vm.hasHint).toBe(false);
+    await wrapper.setProps({ persistentHint: true });
+    expect(wrapper.vm.hasHint).toBe(true);
+    await wrapper.setProps({ persistentHint: false });
+    expect(wrapper.vm.hasHint).toBe(false);
+  });
+
+  it("should update lazyValue when value is updated", async () => {
     const wrapper = mountFunction({
-      propsData: {
-        prependIcon: 'list',
-      },
-    })
+      props: {
+        modelValue: "foo"
+      }
+    });
 
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.vm.lazyValue).toBe("foo");
 
-    wrapper.setProps({
-      prependIcon: undefined,
-      appendIcon: 'list',
-    })
+    await wrapper.setProps({ modelValue: "bar" });
 
-    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.lazyValue).toBe("bar");
+  });
 
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should not generate input details', () => {
+  it("should generate append and prepend slots", () => {
+    const el = (slot: string) => h("div", slot);
     const wrapper = mountFunction({
-      propsData: {
-        hideDetails: true,
-      },
-    })
+      slots: {
+        append: () => [el("append")]
+      }
+    });
+    const wrapper2 = mountFunction({
+      slots: {
+        prepend: () => [el("prepend")]
+      }
+    });
 
-    expect(wrapper.vm.genMessages()).toBeNull()
-    expect(wrapper.html()).toMatchSnapshot()
-  })
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper2.html()).toMatchSnapshot();
+  });
 
-  it('should invoke callback', () => {
-    const cb = jest.fn()
-    const wrapper = mountFunction({
-      propsData: {
-        prependIcon: 'list',
-        appendIcon: 'search',
-      },
-      listeners: {
-        'click:prepend': cb,
-        'click:append': cb,
-      },
-    })
-
-    const click = jest.fn()
-    wrapper.vm.$on('click', click)
-
-    const prepend = wrapper.findAll('.v-icon').at(0)
-    const append = wrapper.findAll('.v-icon').at(1)
-    const slot = wrapper.find('.v-input__slot')
-
-    prepend.trigger('click')
-    expect(cb).toHaveBeenCalledTimes(1)
-    append.trigger('click')
-    expect(cb).toHaveBeenCalledTimes(2)
-    expect(click).not.toHaveBeenCalled()
-
-    slot.trigger('click')
-    expect(click).toHaveBeenCalled()
-  })
-
-  it('should accept a custom height', async () => {
-    const wrapper = mountFunction()
-
-    const inputWrapper = wrapper.find('.v-input__slot')
-    expect(inputWrapper.element.style.height).toBe('')
-    expect(wrapper.vm.height).toBeUndefined()
-
-    wrapper.setProps({ height: 10 })
-    await wrapper.vm.$nextTick()
-    expect(inputWrapper.element.style.height).toBe('10px')
-    wrapper.setProps({ height: '20px' })
-    await wrapper.vm.$nextTick()
-    expect(inputWrapper.element.style.height).toBe('20px')
-  })
-
-  it('should update lazyValue when value is updated', async () => {
+  it("should generate an icon and match snapshot", async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: 'foo',
-      },
-    })
+      props: {
+        prependIcon: "list"
+      }
+    });
 
-    expect(wrapper.vm.lazyValue).toBe('foo')
+    expect(wrapper.html()).toMatchSnapshot();
 
-    wrapper.setProps({ value: 'bar' })
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({
+      prependIcon: undefined,
+      appendIcon: "list"
+    });
 
-    expect(wrapper.vm.lazyValue).toBe('bar')
-  })
+    expect(wrapper.html()).toMatchSnapshot();
+  });
 
-  it('should call the correct event for different click locations', () => {
-    const onClick = jest.fn()
-    const onMouseDown = jest.fn()
-    const onMouseUp = jest.fn()
+  it("should not generate input details", () => {
     const wrapper = mountFunction({
-      methods: {
-        onClick,
-        onMouseDown,
-        onMouseUp,
-      },
-    })
-
-    const slot = wrapper.find('.v-input__slot')
-
-    wrapper.trigger('click')
-    wrapper.trigger('mousedown')
-    wrapper.trigger('mouseup')
-    slot.trigger('click')
-    slot.trigger('mousedown')
-    slot.trigger('mouseup')
-
-    expect(onClick).toHaveBeenCalledTimes(1)
-    expect(onMouseDown).toHaveBeenCalledTimes(1)
-    expect(onMouseUp).toHaveBeenCalledTimes(1)
-  })
-
-  it('should be in an error state', async () => {
+      props: {
+        hideDetails: true
+      }
+    });
+
+    expect(wrapper.vm.genMessages()).toBeNull();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("should accept a custom height", async () => {
+    const wrapper = mountFunction();
+
+    const inputWrapper = wrapper.find(".v-input__slot");
+    expect(inputWrapper.element?.getAttribute("style")).toBe(null);
+    expect(wrapper.vm.height).toBeUndefined();
+
+    await wrapper.setProps({ height: 10 });
+    expect(inputWrapper.element?.getAttribute("style")).toContain(
+      "height: 10px"
+    );
+    await wrapper.setProps({ height: "20px" });
+    expect(inputWrapper.element?.getAttribute("style")).toContain(
+      "height: 20px"
+    );
+  });
+
+  it("should be in an error state", async () => {
     const wrapper = mountFunction({
-      propsData: { error: true },
-    })
+      props: { error: true }
+    });
 
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.html()).toMatchSnapshot();
 
-    wrapper.setProps({ errorMessages: 'required', error: false })
-    await wrapper.vm.$nextTick()
-    expect(wrapper.html()).toMatchSnapshot()
-  })
+    await wrapper.setProps({ errorMessages: "required", error: false });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
 
-  it('should hide messages if no messages and hide-details is auto', () => {
+  it("should hide messages if no messages and hide-details is auto", async () => {
     const wrapper = mountFunction({
-      propsData: {
-        hideDetails: 'auto',
-      },
-    })
+      props: {
+        hideDetails: "auto"
+      }
+    });
 
-    expect(wrapper.vm.genMessages()).toBeNull()
+    expect(wrapper.vm.genMessages()).toBeNull();
 
-    wrapper.setProps({ error: true })
-    expect(wrapper.vm.genMessages()).toBeNull()
+    await wrapper.setProps({ error: true });
+    expect(wrapper.vm.genMessages()).toBeNull();
 
-    wrapper.setProps({ errorMessages: 'required' })
-    expect(wrapper.vm.genMessages()).not.toBeNull()
-  })
+    await wrapper.setProps({ errorMessages: "required" });
+    expect(wrapper.vm.genMessages()).not.toBeNull();
+  });
 
-  it('should be disabled', () => {
-    const wrapper = mountFunction()
+  it("should be disabled", async () => {
+    const wrapper = mountFunction();
 
-    expect(wrapper.vm.isInteractive).toBe(true)
+    expect(wrapper.vm.isInteractive).toBe(true);
 
-    wrapper.setProps({ disabled: true })
+    await wrapper.setProps({ disabled: true });
 
-    expect(wrapper.vm.isInteractive).toBe(false)
+    expect(wrapper.vm.isInteractive).toBe(false);
 
-    wrapper.setProps({
+    await wrapper.setProps({
       disabled: false,
-      readonly: true,
-    })
+      readonly: true
+    });
 
-    expect(wrapper.vm.isInteractive).toBe(false)
+    expect(wrapper.vm.isInteractive).toBe(false);
 
-    wrapper.setProps({ readonly: false })
+    await wrapper.setProps({ readonly: false });
 
-    expect(wrapper.vm.isInteractive).toBe(true)
-  })
+    expect(wrapper.vm.isInteractive).toBe(true);
+  });
 
-  it('should render a label', () => {
+  it("should render a label", () => {
     const wrapper = mountFunction({
-      propsData: { label: 'foo' },
-    })
-
-    expect(wrapper.vm.hasLabel).toBe(true)
-
-    expect(wrapper.html()).toMatchSnapshot()
-
-    const wrapper2 = mountFunction({
-      slots: {
-        label: [{ render: h => h('div', 'foo') }],
-      },
-    })
+      props: { label: "foo" }
+    });
 
-    expect(wrapper2.html()).toMatchSnapshot()
-  })
+    expect(wrapper.vm.hasLabel).toBe(true);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
 
-  it('should apply theme to label, counter, messages and icons', () => {
+  it("should apply theme to label, counter, messages and icons", () => {
     const wrapper = mountFunction({
-      propsData: {
-        label: 'foo',
-        hint: 'bar',
+      props: {
+        label: "foo",
+        hint: "bar",
         persistentHint: true,
         light: true,
-        prependIcon: 'prepend',
-        appendIcon: 'append',
-      },
-    })
+        prependIcon: "prepend",
+        appendIcon: "append"
+      }
+    });
 
-    expect(wrapper.html()).toMatchSnapshot()
-  })
+    expect(wrapper.html()).toMatchSnapshot();
+  });
 
-  it('should not apply attrs to element', () => {
+  it("should apply attrs to root element", () => {
     const wrapper = mountFunction({
-      propsData: {
-        foo: 'bar',
-      },
-    })
-
-    expect(wrapper.html()).toMatchSnapshot()
-    expect(wrapper.attributes()).not.toHaveProperty('foobar')
-  })
-})
+      props: {
+        foo: "bar"
+      }
+    });
+
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.attributes()).toHaveProperty("foo", "bar");
+  });
+});