@kokoccc/vuetify 1.0.1

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

@@ -0,0 +1,578 @@
+import VData from '../VData'
+import { h } from 'vue'
+import {
+  mount,
+  MountingOptions,
+  VueWrapper,
+} from '@vue/test-utils'
+
+describe('VData.ts', () => {
+  type Instance = InstanceType<typeof VData>
+  let mountFunction: (options?: any) => VueWrapper<Instance>
+  beforeEach(() => {
+    mountFunction = (options?: any) => {
+      return mount(VData, {
+        ...options,
+      })
+    }
+  })
+
+  it('should render data through default scoped slot', async () => {
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          { id: 1, text: 'foo' },
+          { id: 2, text: 'bar' },
+        ],
+      },
+      slots: {
+        default: (data: any) => h('div', data.items.map((item: any) => h('div', [item.text]))),
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should ignore items length if using server-items-length', async () => {
+    const render = jest.fn()
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          { id: 1, text: 'foo' },
+          { id: 2, text: 'bar' },
+        ],
+      },
+      slots: {
+        default: render,
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+    expect(render).toHaveBeenCalledWith(expect.objectContaining({
+      pagination: expect.objectContaining({
+        itemsLength: 2,
+      }),
+    }))
+
+    await wrapper.setProps({
+      serverItemsLength: 10,
+    })
+
+    await wrapper.vm.$nextTick()
+    expect(render).toHaveBeenCalledWith(expect.objectContaining({
+      pagination: expect.objectContaining({
+        itemsLength: 10,
+      }),
+    }))
+  })
+
+  it('should group items', async () => {
+    const render = jest.fn()
+    const items = [
+      { id: 1, text: 'foo', baz: 'one' },
+      { id: 2, text: 'bar', baz: 'two' },
+      { id: 3, text: 'baz', baz: 'one' },
+    ]
+
+    const wrapper = mountFunction({
+      props: {
+        items,
+        groupBy: ['baz'],
+      },
+      slots: {
+        default: render,
+      },
+    })
+
+    expect(render).toHaveBeenCalledWith(expect.objectContaining({
+      groupedItems: [
+        {
+          name: 'one',
+          items: [items[0], items[2]],
+        },
+        {
+          name: 'two',
+          items: [items[1]],
+        },
+      ],
+    }))
+  })
+
+  it('should group items with null key and missing key as a null group', async () => {
+    const render = jest.fn()
+    const items = [
+      { id: 1, text: 'foo', baz: null },
+      { id: 2, text: 'bar', baz: 'one' },
+      { id: 3, text: 'baz' },
+    ]
+
+    const wrapper = mountFunction({
+      props: {
+        items,
+        groupBy: ['baz'],
+      },
+      slots: {
+        default: render,
+      },
+    })
+
+    expect(render).toHaveBeenCalledWith(expect.objectContaining({
+      groupedItems: [
+        {
+          name: '',
+          items: [items[0], items[2]],
+        },
+        {
+          name: 'one',
+          items: [items[1]],
+        },
+      ],
+    }))
+  })
+
+  it('should group items by deep keys', async () => {
+    const render = jest.fn()
+    const items = [
+      { id: 1, text: 'foo', foo: { bar: 'one' } },
+      { id: 2, text: 'bar', foo: { bar: 'two' } },
+      { id: 3, text: 'baz', foo: { bar: 'one' } },
+    ]
+
+    const wrapper = mountFunction({
+      props: {
+        items,
+        groupBy: ['foo.bar'],
+      },
+      slots: {
+        default: render,
+      },
+    })
+
+    expect(render).toHaveBeenCalledWith(expect.objectContaining({
+      groupedItems: [
+        {
+          name: 'one',
+          items: [items[0], items[2]],
+        },
+        {
+          name: 'two',
+          items: [items[1]],
+        },
+      ],
+    }))
+  })
+
+  it('should group items with a custom group function', async () => {
+    const render = jest.fn()
+    const items = [
+      { id: 1, text: 'foo', value: 1 },
+      { id: 2, text: 'bar', value: 4 },
+      { id: 3, text: 'baz', value: 3 },
+    ]
+
+    const wrapper = mountFunction({
+      props: {
+        items,
+        groupBy: ['value'],
+        customGroup: function evenOddGrouper (items: any[], groupBy: string[]) {
+          const key = groupBy[0]
+          return items.reduce((rv, x) => {
+            const group = x[key] % 2 ? 'odd' : 'even';
+            (rv[group] = rv[group] || []).push(x)
+            return rv
+          }, {})
+        },
+      },
+      slots: {
+        default: render,
+      },
+    })
+
+    expect(render).toHaveBeenCalledWith(expect.objectContaining({
+      groupedItems: {
+        even: [items[1]],
+        odd: [items[0], items[2]],
+      },
+    }))
+  })
+
+  it('should sort items', () => {
+    const render = jest.fn()
+
+    const unsorted = [
+      { id: 1, text: 'c' },
+      { id: 2, text: 'a' },
+      { id: 3, text: 'd' },
+      { id: 4, text: 'b' },
+    ]
+
+    const sorted = [
+      { id: 2, text: 'a' },
+      { id: 4, text: 'b' },
+      { id: 1, text: 'c' },
+      { id: 3, text: 'd' },
+    ]
+
+    const wrapper = mountFunction({
+      props: {
+        items: unsorted,
+        sortBy: ['text'],
+      },
+      slots: {
+        default: render,
+      },
+    })
+
+    expect(render).toHaveBeenCalledWith(expect.objectContaining({
+      items: sorted,
+    }))
+  })
+
+  it('should sort items by multiple properties', async () => {
+    const render = jest.fn()
+
+    const unsorted = [
+      { id: 1, foo: 'a', bar: 'b' },
+      { id: 2, foo: 'b', bar: 'b' },
+      { id: 3, foo: 'b', bar: 'a' },
+      { id: 4, foo: 'a', bar: 'a' },
+    ]
+
+    const sorted = [
+      { id: 4, foo: 'a', bar: 'a' },
+      { id: 1, foo: 'a', bar: 'b' },
+      { id: 3, foo: 'b', bar: 'a' },
+      { id: 2, foo: 'b', bar: 'b' },
+    ]
+
+    const wrapper = mountFunction({
+      props: {
+        items: unsorted,
+        sortBy: ['foo'],
+      },
+      slots: {
+        default: render,
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+
+    await wrapper.setProps({
+      sortBy: ['foo', 'bar'],
+    })
+    await wrapper.vm.$nextTick()
+
+    expect(render).toHaveBeenCalledWith(expect.objectContaining({
+      items: sorted,
+    }))
+  })
+
+  it('should paginate items', () => {
+    const render = jest.fn()
+
+    const items = [
+      { id: 1, foo: 'a' },
+      { id: 2, foo: 'b' },
+      { id: 3, foo: 'c' },
+      { id: 4, foo: 'd' },
+      { id: 5, foo: 'e' },
+      { id: 6, foo: 'f' },
+      { id: 7, foo: 'g' },
+      { id: 8, foo: 'h' },
+      { id: 9, foo: 'i' },
+      { id: 10, foo: 'j' },
+    ]
+
+    const wrapper = mountFunction({
+      props: {
+        items,
+        itemsPerPage: 5,
+        page: 2,
+      },
+      slots: {
+        default: render,
+      },
+    })
+
+    expect(render).toHaveBeenCalledWith(expect.objectContaining({
+      items: items.slice(5),
+    }))
+  })
+
+  it('should not sort items if disableSort is active', () => {
+    const render = jest.fn()
+
+    const items = [
+      { text: 'Foo', id: 1 },
+      { text: 'Bar', id: 2 },
+      { text: 'Fizz', id: 3 },
+      { text: 'Buzz', id: 4 },
+      { text: 'Fizzbuzz', id: 5 },
+    ]
+
+    const wrapper = mountFunction({
+      props: {
+        items,
+        sortBy: ['text'],
+        disableSort: true,
+      },
+      slots: {
+        default: render,
+      },
+    })
+
+    expect(render).toHaveBeenCalledWith(expect.objectContaining({
+      items,
+    }))
+  })
+
+  it('should conditionally paginate items', async () => {
+    const render = jest.fn()
+    const items = [
+      { text: 'Foo', id: 1 },
+      { text: 'Bar', id: 2 },
+      { text: 'Fizz', id: 3 },
+      { text: 'Buzz', id: 4 },
+      { text: 'Fizzbuzz', id: 5 },
+    ]
+
+    const wrapper = mountFunction({
+      props: { items },
+      slots: {
+        default: render,
+      },
+    })
+
+    expect(render).toHaveBeenCalledWith(expect.objectContaining({
+      items,
+    }))
+
+    await wrapper.setProps({ itemsPerPage: 2 })
+    await wrapper.vm.$nextTick()
+
+    expect(render).toHaveBeenCalledWith(expect.objectContaining({
+      items: items.slice(0, 2),
+    }))
+
+    await wrapper.setProps({ disablePagination: true })
+    await wrapper.vm.$nextTick()
+
+    expect(render).toHaveBeenCalledWith(expect.objectContaining({
+      items,
+    }))
+  })
+
+  it('should toggle sorting', async () => {
+    const unsorted = [
+      { id: 1, text: 'c' },
+      { id: 2, text: 'a' },
+      { id: 3, text: 'd' },
+      { id: 4, text: 'b' },
+    ]
+
+    const wrapper = mountFunction({
+      props: {
+        items: unsorted,
+      },
+      slots: {
+        default: (props: any) => {
+          const items = props.items.map((item: any) => h('div', [item.text]))
+          return h('div', {
+            id: 'wrapper',
+            onClick: () => props.sort('text'),
+          }, items)
+        },
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.find('#wrapper').trigger('click')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.find('#wrapper').trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should toggle sorting on multiple properties', async () => {
+    const unsorted = [
+      { id: 1, text: 'c', group: 'foo' },
+      { id: 2, text: 'a', group: 'bar' },
+      { id: 3, text: 'd', group: 'foo' },
+      { id: 4, text: 'b', group: 'bar' },
+    ]
+
+    const wrapper = mountFunction({
+      props: {
+        items: unsorted,
+      },
+      slots: {
+        default: (props: any) => {
+          const items = props.items.map((item: any) => h('div', [`${item.group}-${item.text}`]))
+          return h('div', {
+            id: 'wrapper',
+            onClick: () => props.sort(['group', 'text']),
+          }, items)
+        },
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.find('#wrapper').trigger('click')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should toggle grouping', async () => {
+    const unsorted = [
+      { id: 1, text: 'c', group: 'foo' },
+      { id: 4, text: 'a', group: 'bar' },
+      { id: 3, text: 'd', group: 'foo' },
+      { id: 2, text: 'b', group: 'bar' },
+    ]
+
+    const wrapper = mountFunction({
+      props: {
+        items: unsorted,
+      },
+      slots: {
+        default: (props: any) => {
+          const items = props.groupedItems
+            ? props.groupedItems.map((group: any) => group.name)
+            : props.items.map((item: any) => item.text)
+
+          return h('div', {
+            id: 'wrapper',
+            onClick: () => props.group('group'),
+          }, items.map((item: any) => h('div', [item])))
+        },
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.find('#wrapper').trigger('click')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/10372
+  it('should handle setting itemsPerPage to zero', async () => {
+    const render = jest.fn()
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          { id: 1, text: 'foo' },
+          { id: 2, text: 'bar' },
+        ],
+        itemsPerPage: 0,
+      },
+      slots: {
+        default: render,
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+    expect(render).toHaveBeenCalledWith(expect.objectContaining({
+      pagination: expect.objectContaining({
+        itemsPerPage: 0,
+        page: 1,
+        pageCount: 1,
+        pageStart: 0,
+        pageStop: 0,
+      }),
+    }))
+
+    await wrapper.setProps({
+      itemsPerPage: 1,
+    })
+
+    await wrapper.vm.$nextTick()
+    expect(render).toHaveBeenCalledWith(expect.objectContaining({
+      pagination: expect.objectContaining({
+        itemsPerPage: 1,
+        page: 1,
+        pageCount: 2,
+        pageStart: 0,
+        pageStop: 1,
+      }),
+    }))
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/10627
+  it('should sort grouped column', async () => {
+    const unsorted = [
+      { id: 1, text: 'c', group: 'foo' },
+      { id: 4, text: 'a', group: 'bar' },
+      { id: 3, text: 'd', group: 'foo' },
+      { id: 2, text: 'b', group: 'bar' },
+    ]
+
+    const wrapper = mountFunction({
+      props: {
+        items: unsorted,
+        groupBy: ['text'],
+      },
+      slots: {
+        default: (props: any) => {
+          return h('div', {
+            id: 'wrapper',
+            onClick: () => props.group('group'),
+          }, props.groupedItems.map((group: any) => h('div', [group.name])))
+        },
+      },
+    })
+
+    await wrapper.setProps({ groupDesc: [false] })
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.setProps({ groupDesc: [true] })
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/11905
+  it('should group items when sort is disabled', async () => {
+    const render = jest.fn()
+    const items = [
+      { id: 1, text: 'foo', baz: 'one' },
+      { id: 2, text: 'bar', baz: 'two' },
+      { id: 3, text: 'baz', baz: 'one' },
+    ]
+
+    const wrapper = mountFunction({
+      props: {
+        items,
+        groupBy: ['baz'],
+        disableSort: true,
+      },
+      slots: {
+        default: render,
+      },
+    })
+
+    expect(render).toHaveBeenCalledWith(expect.objectContaining({
+      groupedItems: [
+        {
+          name: 'one',
+          items: [items[0], items[2]],
+        },
+        {
+          name: 'two',
+          items: [items[1]],
+        },
+      ],
+    }))
+  })
+})

package/src/components/VData/__tests__/__snapshots__/VData.spec.ts.snap

@@ -0,0 +1,159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VData.ts should render data through default scoped slot 1`] = `
+<div>
+  <div>
+    foo
+  </div>
+  <div>
+    bar
+  </div>
+</div>
+`;
+
+exports[`VData.ts should sort grouped column 1`] = `
+<div id="wrapper">
+  <div>
+    a
+  </div>
+  <div>
+    b
+  </div>
+  <div>
+    c
+  </div>
+  <div>
+    d
+  </div>
+</div>
+`;
+
+exports[`VData.ts should sort grouped column 2`] = `
+<div id="wrapper">
+  <div>
+    d
+  </div>
+  <div>
+    c
+  </div>
+  <div>
+    b
+  </div>
+  <div>
+    a
+  </div>
+</div>
+`;
+
+exports[`VData.ts should toggle grouping 1`] = `
+<div id="wrapper">
+  <div>
+    c
+  </div>
+  <div>
+    a
+  </div>
+  <div>
+    d
+  </div>
+  <div>
+    b
+  </div>
+</div>
+`;
+
+exports[`VData.ts should toggle grouping 2`] = `
+<div id="wrapper">
+  <div>
+    bar
+  </div>
+  <div>
+    foo
+  </div>
+</div>
+`;
+
+exports[`VData.ts should toggle sorting 1`] = `
+<div id="wrapper">
+  <div>
+    c
+  </div>
+  <div>
+    a
+  </div>
+  <div>
+    d
+  </div>
+  <div>
+    b
+  </div>
+</div>
+`;
+
+exports[`VData.ts should toggle sorting 2`] = `
+<div id="wrapper">
+  <div>
+    a
+  </div>
+  <div>
+    b
+  </div>
+  <div>
+    c
+  </div>
+  <div>
+    d
+  </div>
+</div>
+`;
+
+exports[`VData.ts should toggle sorting 3`] = `
+<div id="wrapper">
+  <div>
+    d
+  </div>
+  <div>
+    c
+  </div>
+  <div>
+    b
+  </div>
+  <div>
+    a
+  </div>
+</div>
+`;
+
+exports[`VData.ts should toggle sorting on multiple properties 1`] = `
+<div id="wrapper">
+  <div>
+    foo-c
+  </div>
+  <div>
+    bar-a
+  </div>
+  <div>
+    foo-d
+  </div>
+  <div>
+    bar-b
+  </div>
+</div>
+`;
+
+exports[`VData.ts should toggle sorting on multiple properties 2`] = `
+<div id="wrapper">
+  <div>
+    bar-a
+  </div>
+  <div>
+    bar-b
+  </div>
+  <div>
+    foo-c
+  </div>
+  <div>
+    foo-d
+  </div>
+</div>
+`;