@kokoccc/vuetify 1.0.1

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

@@ -0,0 +1,1058 @@
+import VDataTable from '../VDataTable'
+import {
+  mount,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+import { h, nextTick } from 'vue'
+import { Breakpoint } from '../../../services/breakpoint'
+import ripple from '../../../directives/ripple/index'
+import { Lang } from '../../../services/lang'
+import { preset } from '../../../presets/default'
+import { resizeWindow } from '../../../../test'
+
+const $vuetify = {
+  icons: {},
+  rtl: false,
+  lang: new Lang(preset),
+}
+// Vue.directive('ripple', ripple)
+
+const testHeaders = [
+  {
+    text: 'Dessert (100g serving)',
+    align: 'left',
+    sortable: false,
+    value: 'name',
+  },
+  { text: 'Calories', value: 'calories' },
+  { text: 'Fat (g)', value: 'fat' },
+  { text: 'Carbs (g)', value: 'carbs' },
+  { text: 'Protein (g)', value: 'protein' },
+  { text: 'Iron (%)', value: 'iron' },
+]
+
+const testItems = [
+  {
+    name: 'Frozen Yogurt',
+    calories: 159,
+    fat: 6.0,
+    carbs: 24,
+    protein: 4.0,
+    iron: '1%',
+    class: 'test',
+  },
+  {
+    name: 'Ice cream sandwich',
+    calories: 237,
+    fat: 9.0,
+    carbs: 37,
+    protein: 4.3,
+    iron: '1%',
+    class: ['test', 'second'],
+  },
+  {
+    name: 'Eclair',
+    calories: 262,
+    fat: 16.0,
+    carbs: 23,
+    protein: 6.0,
+    iron: '7%',
+    class: { test: true, second: false },
+  },
+  {
+    name: 'Cupcake',
+    calories: 305,
+    fat: 3.7,
+    carbs: 67,
+    protein: 4.3,
+    iron: '8%',
+  },
+  {
+    name: 'Gingerbread',
+    calories: 356,
+    fat: 16.0,
+    carbs: 49,
+    protein: 3.9,
+    iron: '16%',
+  },
+  {
+    name: 'Jelly bean',
+    calories: 375,
+    fat: 0.0,
+    carbs: 94,
+    protein: 0.0,
+    iron: '0%',
+  },
+  {
+    name: 'Lollipop',
+    calories: 392,
+    fat: 0.2,
+    carbs: 98,
+    protein: 0,
+    iron: '2%',
+  },
+  {
+    name: 'Honeycomb',
+    calories: 408,
+    fat: 3.2,
+    carbs: 87,
+    protein: 6.5,
+    iron: '45%',
+  },
+  {
+    name: 'Donut',
+    calories: 452,
+    fat: 25.0,
+    carbs: 51,
+    protein: 4.9,
+    iron: '22%',
+  },
+  {
+    name: 'KitKat',
+    calories: 518,
+    fat: 26.0,
+    carbs: 65,
+    protein: 7,
+    iron: '6%',
+  },
+]
+
+/* eslint-disable max-statements */
+describe('VDataTable.ts', () => {
+  type Instance = InstanceType<typeof VDataTable>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    document.body.setAttribute('data-app', 'true')
+
+    mountFunction = (options?: MountingOptions<Instance>) => {
+      const vuetifyInstance = {
+        breakpoint: new Breakpoint(preset),
+        lang: new Lang(preset),
+        theme: {
+          dark: false,
+        },
+        icons: {},
+      }
+
+      return mount(VDataTable, {
+        global: {
+          config: {
+            globalProperties: {
+              $vuetify: vuetifyInstance,
+            },
+          },
+          mocks: {
+            $vuetify: vuetifyInstance,
+          },
+        },
+        ...options,
+      })
+    }
+
+    return resizeWindow(0)
+  })
+
+  it('should render', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with data', () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+        itemsPerPage: 5,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with body slot', () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+        itemsPerPage: 5,
+      },
+      slots: {
+        body: (props: any) => h('div', [props.items.length]),
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with foot slot', () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+        itemsPerPage: 5,
+      },
+      slots: {
+        foot: (props: any) => h('tfoot', [props.items.length]),
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render virtual table', () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+        itemsPerPage: 5,
+        virtualRows: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with showExpand', async () => {
+    const expand = jest.fn()
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        itemKey: 'name',
+        items: testItems,
+        itemsPerPage: 5,
+        showExpand: true,
+      },
+      attrs: {
+        'onUpdate:expanded': expand,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    const expandIcon = wrapper.findAll('.v-data-table__expand-icon')[0]
+    if (expandIcon) {
+      expandIcon.trigger('click')
+    }
+
+    await nextTick()
+    expect(expand).toHaveBeenCalledWith(testItems.slice(0, 1))
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with showSelect', () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+        itemsPerPage: 5,
+        showSelect: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with item.expanded scoped slot', async () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+        itemsPerPage: 5,
+        expanded: testItems,
+      },
+      slots: {
+        'expanded-item': (props: any) => h('div', ['expanded']),
+      },
+    })
+
+    await nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with group.summary scoped slot', () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+        itemsPerPage: 5,
+        groupBy: 'calories',
+      },
+      slots: {
+        'group.summary': (props: any) => h('div', ['summary']),
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with item scoped slot', () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+        itemsPerPage: 5,
+      },
+      slots: {
+        item: (props: any) => h('div', [JSON.stringify(props)]),
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with grouped rows', () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+        itemsPerPage: 5,
+        groupBy: ['protein'],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with group scoped slot', () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+        itemsPerPage: 5,
+        groupBy: ['protein'],
+      },
+      slots: {
+        group: (props: any) => h('div', [JSON.stringify(props)]),
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render loading state', () => {
+    const wrapper = mountFunction({
+      props: {
+        loading: true,
+        checkboxColor: 'primary',
+        color: 'primary',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    const wrapper2 = mountFunction({
+      props: {
+        headers: testHeaders,
+        loading: true,
+      },
+      slots: {
+        progress: () => h('div', { class: 'progress' }, '50%'),
+      },
+    })
+
+    expect(wrapper2.html()).toMatchSnapshot()
+  })
+
+  it.each([
+    'click',
+    'contextmenu',
+    'dblclick',
+  ])('should render row that can handle %s events', async event => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+      },
+    })
+
+    const row = wrapper.find('tbody tr')
+    expect(row.exists()).toBe(true)
+
+    // Just test that the event can be triggered without errors
+    if (row.exists()) {
+      await row.trigger(event)
+      await nextTick()
+    }
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/8254
+  it('should pass kebab-case footer props correctly', () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: [],
+        items: [],
+        footerProps: {
+          'items-per-page-text': 'Foo:',
+        },
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/8266
+  it('should use options prop for initial values', () => {
+    const fn = jest.fn()
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+        options: {
+          page: 2,
+          itemsPerPage: 5,
+        },
+      },
+      attrs: {
+        'onUpdate:options': fn,
+      },
+    })
+
+    expect(fn).toHaveBeenCalledWith(expect.objectContaining({
+      page: 2,
+    }))
+  })
+
+  it('should render footer.prepend slot content', () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: [],
+        items: [{}],
+      },
+      slots: {
+        'footer.prepend': () => h('div', ['footer.prepend slot content']),
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render footer.page-text slot content', () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: [],
+        items: [{}],
+      },
+      slots: {
+        'footer.page-text': ({ pageStart, pageStop }: any) => h('div', [`foo ${pageStart} bar ${pageStop}`]),
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/8359
+  it('should not limit page to current item count when using server-items-length', async () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: [],
+        page: 2,
+        itemsPerPage: 5,
+        serverItemsLength: 0,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    wrapper.setProps({
+      items: testItems.slice(5),
+      serverItemsLength: 20,
+    })
+    await nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should not search column with filterable set to false', async () => {
+    const wrapper = mountFunction({
+      props: {
+        items: testItems,
+        headers: [
+          {
+            text: 'Dessert (100g serving)',
+            align: 'left',
+            filterable: false,
+            value: 'name',
+          },
+          { text: 'Calories', value: 'calories' },
+          { text: 'Fat (g)', value: 'fat' },
+          { text: 'Carbs (g)', value: 'carbs' },
+          { text: 'Protein (g)', value: 'protein' },
+          { text: 'Iron (%)', value: 'iron' },
+        ],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    wrapper.setProps({
+      search: 'cup',
+    })
+    await nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should not search column with filterable set to false and has filter function', async () => {
+    const wrapper = mountFunction({
+      props: {
+        items: testItems,
+        headers: [
+          {
+            text: 'Dessert (100g serving)',
+            align: 'left',
+            value: 'name',
+          },
+          { text: 'Calories', value: 'calories', filter: (v: any) => v > 400 },
+          { text: 'Fat (g)', value: 'fat' },
+          { text: 'Carbs (g)', value: 'carbs' },
+          { text: 'Protein (g)', value: 'protein' },
+          { text: 'Iron (%)', value: 'iron' },
+        ],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    wrapper.setProps({
+      headers: [
+        {
+          text: 'Dessert (100g serving)',
+          align: 'left',
+          value: 'name',
+        },
+        { text: 'Calories', value: 'calories', filter: (v: any) => v > 400, filterable: false },
+        { text: 'Fat (g)', value: 'fat' },
+        { text: 'Carbs (g)', value: 'carbs' },
+        { text: 'Protein (g)', value: 'protein' },
+        { text: 'Iron (%)', value: 'iron' },
+      ],
+    })
+    await nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/8359
+  it('should limit page to current page count if not using server-items-length', async () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+        page: 3,
+        itemsPerPage: 5,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/8184
+  it('should default to first option in itemsPerPageOptions if it does not include itemsPerPage', async () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+        footerProps: {
+          itemsPerPageOptions: [6, 7],
+        },
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/8817
+  it('should handle object when checking if it should default to first option in itemsPerPageOptions', async () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+        itemsPerPage: -1,
+        footerProps: {
+          itemsPerPageOptions: [6, { text: 'All', value: -1 }],
+        },
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/9599
+  it('should not immediately emit items-per-page', async () => {
+    const itemsPerPage = jest.fn()
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+        footerProps: {
+          itemsPerPageOptions: [6, 7],
+        },
+      },
+      attrs: {
+        'onUpdate:itemsPerPage': itemsPerPage,
+      },
+    })
+
+    expect(itemsPerPage).not.toHaveBeenCalled()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/9010
+  it('should change page if item count decreases below page start', async () => {
+    const page = jest.fn()
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems.slice(0, 4),
+        itemsPerPage: 2,
+        footerProps: {
+          itemsPerPageOptions: [2],
+        },
+        page: 2,
+      },
+      attrs: {
+        'onUpdate:page': page,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    wrapper.setProps({ items: testItems.slice(0, 2) })
+    await nextTick()
+
+    expect(page).toHaveBeenCalledWith(1)
+  })
+
+  it('should render with single-select checkboxes', async () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        itemKey: 'name',
+        items: testItems.slice(0, 2),
+        modelValue: [testItems[0]],
+        showSelect: true,
+        singleSelect: true,
+      },
+    })
+
+    const checkboxes = wrapper.findAll('.v-data-table__checkbox')
+    expect(checkboxes.length).toBeGreaterThan(0)
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render non-selectable items correctly', async () => {
+    const items = [
+      { ...testItems[0], isSelectable: false },
+      { ...testItems[1] },
+    ]
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items,
+        showSelect: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    const checkboxes = wrapper.findAll('.v-simple-checkbox')
+    expect(checkboxes.length).toBeGreaterThan(0)
+  })
+
+  it('should render select-all checkbox when items are selectable', async () => {
+    const items = [
+      { ...testItems[0], isSelectable: false },
+      { ...testItems[1] },
+    ]
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items,
+        showSelect: true,
+      },
+    })
+
+    const selectAll = wrapper.findAll('.v-simple-checkbox')[0]
+    expect(selectAll.exists()).toBe(true)
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/10392
+  it('should search group-by column', async () => {
+    const headers = [
+      {
+        text: 'Name',
+        value: 'name',
+      },
+      {
+        text: 'ID',
+        value: 'id',
+      },
+    ]
+
+    const items = [
+      {
+        name: 'Assistance',
+        id: 1,
+      },
+      {
+        name: 'Candidat',
+        id: 2,
+      },
+    ]
+
+    const wrapper = mountFunction({
+      props: {
+        headers,
+        items,
+        itemKey: 'id',
+        groupBy: 'name',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    wrapper.setProps({ search: 'candidat' })
+    await nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render item slot when using group-by function', async () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        itemKey: 'name',
+        items: testItems.slice(0, 2),
+        groupBy: 'name',
+      },
+      slots: {
+        item: () => h('div', ['scoped']),
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should handle filtering correctly', async () => {
+    const headers = [
+      {
+        text: 'Name',
+        value: 'name',
+      },
+      {
+        text: 'ID',
+        value: 'id',
+      },
+    ]
+
+    const items = [
+      {
+        name: 'Assistance',
+        id: 1,
+      },
+      {
+        name: 'Candidat',
+        id: 2,
+      },
+    ]
+
+    const wrapper = mountFunction({
+      props: {
+        headers,
+        items,
+        itemKey: 'id',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    wrapper.setProps({ search: 'candidat' })
+    await nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should not emit too many pagination events', async () => {
+    const headers = [
+      {
+        text: 'Name',
+        value: 'name',
+      },
+      {
+        text: 'ID',
+        value: 'id',
+      },
+    ]
+
+    const items = [
+      {
+        name: 'Assistance',
+        id: 1,
+      },
+      {
+        name: 'Candidat',
+        id: 2,
+      },
+    ]
+
+    const wrapper = mountFunction({
+      props: {
+        headers,
+        itemKey: 'id',
+        serverItemsLength: 0,
+      },
+    })
+
+    wrapper.setProps({ items, serverItemsLength: items.length })
+    await nextTick()
+
+    expect(wrapper.emitted().pagination).toHaveLength(2)
+  })
+
+  it('should show correct aria-labels when sorting', async () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        itemKey: 'name',
+        items: testItems.slice(0, 5),
+        sortBy: 'calories',
+      },
+    })
+
+    wrapper.setProps({ sortDesc: true })
+    await nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    wrapper.setProps({ mustSort: true })
+    await nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should apply class list to rows', () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+        itemsPerPage: 5,
+        itemClass: () => ['my-class', 'my-other-class'],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should apply class unique to rows', () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+        itemsPerPage: 5,
+        itemClass: () => 'my-unique-class',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should apply class function to rows', () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+        itemsPerPage: 5,
+        itemClass: (item: any) => ({
+          'first-class': item.fat < 10,
+          'second-class': item.protein > 4.0,
+        }),
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should apply class from item to rows', () => {
+    const wrapper = mountFunction({
+      props: {
+        headers: testHeaders,
+        items: testItems,
+        itemsPerPage: 5,
+        itemClass: 'class',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/11600
+  it('should return rows from columns that match custom filters', async () => {
+    const wrapper = mountFunction({
+      props: {
+        items: testItems,
+        filterMode: 'union',
+        headers: [
+          { text: 'Dessert (100g serving)', align: 'left', value: 'name' },
+          { text: 'Calories', value: 'calories', filter: (value: any) => value === 159 },
+          { text: 'Fat (g)', value: 'fat' },
+          { text: 'Carbs (g)', value: 'carbs' },
+          { text: 'Protein (g)', value: 'protein' },
+          { text: 'Iron (%)', value: 'iron' },
+        ],
+      },
+    })
+
+    wrapper.setProps({ search: 'eclair' })
+    await nextTick()
+    expect(wrapper.vm.internalCurrentItems).toHaveLength(2)
+  })
+
+  it('should return rows from columns that exclusively match custom filters', async () => {
+    const wrapper = mountFunction({
+      props: {
+        items: testItems,
+        filterMode: 'intersection',
+        headers: [
+          { text: 'Dessert (100g serving)', align: 'left', value: 'name' },
+          { text: 'Calories', value: 'calories', filter: (value: any) => value === 159 },
+          { text: 'Fat (g)', value: 'fat' },
+          { text: 'Carbs (g)', value: 'carbs' },
+          { text: 'Protein (g)', value: 'protein' },
+          { text: 'Iron (%)', value: 'iron' },
+        ],
+      },
+    })
+
+    wrapper.setProps({ search: 'eclair' })
+    await nextTick()
+    expect(wrapper.vm.internalCurrentItems).toHaveLength(0)
+
+    wrapper.setProps({ search: 'frozen' })
+    await nextTick()
+    expect(wrapper.vm.internalCurrentItems).toHaveLength(1)
+  })
+
+  it('should respect mustSort property on options', async () => {
+    const wrapper = mountFunction({
+      props: {
+        items: testItems,
+        headers: [
+          { text: 'Dessert (100g serving)', value: 'name' },
+        ],
+        options: {
+          mustSort: true,
+        },
+      },
+    })
+
+    wrapper.find('th').trigger('click')
+    await nextTick()
+
+    wrapper.find('th').trigger('click')
+    await nextTick()
+
+    wrapper.find('th').trigger('click')
+    await nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should hide group button when column is not groupable', async () => {
+    const wrapper = mountFunction({
+      props: {
+        showGroupBy: true,
+        items: testItems,
+        headers: [
+          {
+            text: 'Dessert (100g serving)',
+            align: 'left',
+            value: 'name',
+            groupable: false,
+          },
+          { text: 'Calories', value: 'calories' },
+          { text: 'Fat (g)', value: 'fat' },
+          { text: 'Carbs (g)', value: 'carbs' },
+          { text: 'Protein (g)', value: 'protein' },
+          { text: 'Iron (%)', value: 'iron' },
+        ],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should return rows matching search term if specified', async () => {
+    const wrapper = mountFunction({
+      props: {
+        items: testItems,
+        headers: [
+          { text: 'Dessert (100g serving)', align: 'left', value: 'name' },
+          { text: 'Calories', value: 'calories' },
+          { text: 'Fat (g)', value: 'fat' },
+          { text: 'Carbs (g)', value: 'carbs' },
+          { text: 'Protein (g)', value: 'protein' },
+          { text: 'Iron (%)', value: 'iron' },
+        ],
+      },
+    })
+
+    wrapper.setProps({ search: 'unknown-term' })
+    await nextTick()
+    expect(wrapper.vm.internalCurrentItems).toHaveLength(0)
+
+    wrapper.setProps({ search: 'Eclair' })
+    await nextTick()
+    expect(wrapper.vm.internalCurrentItems).toHaveLength(1)
+  })
+
+  it('should return results which match both search term and column filters if both specified', async () => {
+    const wrapper = mountFunction({
+      props: {
+        items: testItems,
+        headers: [
+          { text: 'Dessert (100g serving)', align: 'left', value: 'name' },
+          { text: 'Calories', value: 'calories', filter: (value: any) => value < 300 },
+          { text: 'Fat (g)', value: 'fat' },
+          { text: 'Carbs (g)', value: 'carbs' },
+          { text: 'Protein (g)', value: 'protein' },
+          { text: 'Iron (%)', value: 'iron' },
+        ],
+      },
+    })
+
+    wrapper.setProps({ search: 'EA' })
+    await nextTick()
+    expect(wrapper.vm.internalCurrentItems).toHaveLength(1)
+  })
+
+  it('should render selection checkboxes on multiple pages with numeric item keys', async () => {
+    const items = testItems.map((item, index) => ({ ...item, name: index + 1 })).slice(0, 8)
+    const wrapper = mountFunction({
+      props: {
+        items,
+        itemKey: 'name',
+        itemsPerPage: 5,
+        showSelect: true,
+        headers: testHeaders,
+        mobileBreakpoint: 0,
+      },
+    })
+
+    // Just check that the component renders without errors
+    expect(wrapper.html()).toContain('v-data-table')
+
+    wrapper.setProps({ page: 2 })
+    await nextTick()
+
+    // Check that page 2 renders without errors
+    expect(wrapper.html()).toContain('v-data-table')
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})