test(VEditDialog): add tests

packages/vuetify/src/components/VDataTable/__tests__/VEditDialog.spec.ts

@@ -0,0 +1,198 @@
+import VEditDialog from '../VEditDialog'
+import VMenu from '../../VMenu'
+
+import {
+  mount,
+  Wrapper,
+  MountOptions
+} from '@vue/test-utils'
+import { keyCodes } from '../../../util/helpers'
+
+describe('VEditDialog.ts', () => {
+  type Instance = InstanceType<typeof VEditDialog>
+  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  beforeEach(() => {
+    document.body.setAttribute('data-app', 'true')
+
+    mountFunction = (options?: MountOptions<Instance>) => {
+      return mount(VEditDialog, {
+        mocks: {
+          $vuetify: {
+            theme: {
+              dark: false
+            }
+          }
+        },
+        ...options
+      })
+    }
+  })
+
+  it('should render', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render custom button texts', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        cancelText: 'I don\'t want to modify that!',
+        saveText: 'Save it!'
+      }
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should open and close', () => {
+    jest.useFakeTimers()
+
+    const open = jest.fn()
+    const close = jest.fn()
+
+    const wrapper = mountFunction({
+      listeners: {
+        open,
+        close
+      }
+    })
+
+    wrapper.vm.isActive = true
+    expect(open).toHaveBeenCalledTimes(1)
+    expect(setTimeout).toHaveBeenLastCalledWith(wrapper.vm.focus, 50)
+
+    wrapper.vm.isActive = false
+    expect(close).toHaveBeenCalledTimes(1)
+
+    jest.useRealTimers()
+  })
+
+  it('should react to menu', () => {
+    const open = jest.fn()
+    const close = jest.fn()
+
+    const wrapper = mountFunction({
+      listeners: {
+        open,
+        close
+      }
+    })
+
+    const menu = wrapper.find(VMenu)
+
+    menu.vm.$emit('input', true)
+    expect(open).toHaveBeenCalledTimes(1)
+
+    menu.vm.$emit('input', false)
+    expect(close).toHaveBeenCalledTimes(1)
+  })
+
+  it('should react to input', () => {
+    const cancel = jest.fn()
+    const save = jest.fn()
+    const saveEvent = jest.fn()
+
+    const wrapper = mountFunction({
+      methods: {
+        cancel,
+        save
+      },
+      render () {
+        return this.genContent()
+      },
+      slots: {
+        input: '<input class="test" />'
+      },
+      listeners: {
+        save: saveEvent
+      }
+    })
+
+    const input = wrapper.vm.$refs.content as HTMLElement
+
+    input.dispatchEvent(new KeyboardEvent('keydown', { keyCode: keyCodes.esc } as KeyboardEventInit))
+    expect(cancel).toHaveBeenCalledTimes(1)
+
+    const field = wrapper.find('input.test')
+    field.setValue('test')
+
+    input.dispatchEvent(new KeyboardEvent('keydown', { keyCode: keyCodes.enter } as KeyboardEventInit))
+    expect(save).toHaveBeenCalledTimes(1)
+    expect(save).toHaveBeenLastCalledWith('test')
+    expect(saveEvent).toHaveBeenCalledTimes(1)
+  })
+
+  it('should render button', () => {
+    const fn = jest.fn()
+
+    const wrapper = mountFunction({
+      render () {
+        return this.genButton(fn, 'test')
+      }
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    const btn = wrapper.find('.v-btn')
+    btn.trigger('click')
+    expect(fn).toHaveBeenCalledTimes(1)
+  })
+
+  it('should focus', () => {
+    const wrapper = mountFunction({
+      render () {
+        return this.genContent()
+      },
+      slots: {
+        input: '<input class="test" />'
+      }
+    })
+
+    const input = wrapper.find('input.test')
+
+    expect(document.activeElement).not.toEqual(input.element as HTMLInputElement)
+    wrapper.vm.focus()
+    expect(document.activeElement).toEqual(input.element as HTMLInputElement)
+  })
+
+  it('should render actions', () => {
+    const save = jest.fn()
+    const saveEvent = jest.fn()
+
+    const wrapper = mountFunction({
+      methods: {
+        save
+      },
+      render () {
+        return this.genActions()
+      },
+      listeners: {
+        save: saveEvent
+      }
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    const btn = wrapper.find('.v-btn:last-child')
+    btn.trigger('click')
+    expect(save).toHaveBeenCalledTimes(1)
+    expect(saveEvent).toHaveBeenCalledTimes(1)
+  })
+
+  it('should cancel', () => {
+    const cancel = jest.fn()
+    const wrapper = mountFunction({
+      listeners: {
+        cancel
+      },
+      data: () => ({
+        isActive: true
+      })
+    })
+
+    wrapper.vm.cancel()
+    expect(wrapper.vm.isActive).toBeFalsy()
+    expect(cancel).toHaveBeenCalledTimes(1)
+  })
+})

packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VEditDialog.spec.ts.snap

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VEditDialog.ts should render 1`] = `
+
+<div class="v-menu v-small-dialog v-menu--inline theme--light">
+  <div class="v-menu__activator">
+    <a>
+    </a>
+  </div>
+  <div class="v-menu__content theme--light v-small-dialog__content"
+       style="max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top right; z-index: 0; display: none;"
+  >
+  </div>
+</div>
+
+`;
+
+exports[`VEditDialog.ts should render actions 1`] = `
+
+<div class="v-small-dialog__actions">
+  <button type="button"
+          class="v-btn v-btn--flat v-btn--text theme--light v-size--default primary--text"
+  >
+    <span class="v-btn__content">
+      Cancel
+    </span>
+  </button>
+  <button type="button"
+          class="v-btn v-btn--flat v-btn--text theme--light v-size--default primary--text"
+  >
+    <span class="v-btn__content">
+      Save
+    </span>
+  </button>
+</div>
+
+`;
+
+exports[`VEditDialog.ts should render button 1`] = `
+
+<button type="button"
+        class="v-btn v-btn--flat v-btn--text theme--light v-size--default primary--text"
+>
+  <span class="v-btn__content">
+    test
+  </span>
+</button>
+
+`;
+
+exports[`VEditDialog.ts should render custom button texts 1`] = `
+
+<div class="v-menu v-small-dialog v-menu--inline theme--light">
+  <div class="v-menu__activator">
+    <a>
+    </a>
+  </div>
+  <div class="v-menu__content theme--light v-small-dialog__content"
+       style="max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top right; z-index: 0; display: none;"
+  >
+  </div>
+</div>
+
+`;