chore: fix VDataTable vitest file by using test helper

vuetifyjs · Dec 25, 2024 · d89504d · d89504d
1 parent 153a3e1
commit d89504d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 24 deletions.
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.browser.tsx b/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.browser.tsx
@@ -3,24 +3,26 @@ import { VDataTable } from '../'
 
 // Utilities
 import { render, screen, userEvent } from '@test'
-import { nextTick } from 'vue'
+import { ref } from 'vue'
 
 describe('VDataTable', () => {
   it('mirrors external updates', async () => {
-    let items = [
+    const items = ref([
       { id: 1, name: 'Item 1' },
       { id: 2, name: 'Item 2' },
-    ]
+    ])
 
     render(() => (
-      <VDataTable items={ items } columns={[{ key: 'name', title: 'Name' }]} />
+      <VDataTable items={ items.value } columns={[{ key: 'name', title: 'Name' }]} />
     ))
+
     const cells = screen.getAllByRole('cell')
-    expect(cells[0]).toHaveTextContent('1')
+    expect.element(cells[0]).toHaveTextContent('1')
+
+    // Update items
+    items.value = [{ id: 3, name: 'Item 3' }]
 
-    items = [{ id: 3, name: 'Item 3' }]
-    await nextTick()
-    expect(cells[0]).toHaveTextContent('1')
+    await expect.poll(() => screen.getAllByRole('cell')[0]).toHaveTextContent('3')
   })
 
   describe('slot rendering', () => {
@@ -48,14 +50,14 @@ describe('VDataTable', () => {
 
   describe('sorting functionality', () => {
     it('handles column sorting', async () => {
-      const items = [
+      const items = ref([
         { id: 1, name: 'B Item' },
         { id: 2, name: 'A Item' },
-      ]
+      ])
 
       render(() => (
         <VDataTable
-          items={ items }
+          items={ items.value }
           columns={[{ key: 'name', title: 'Name', sortable: true }]}
         />
       ))
@@ -64,7 +66,7 @@ describe('VDataTable', () => {
       await userEvent.click(headerCell)
 
       const cells = screen.getAllByRole('cell')
-      expect(cells[0]).toHaveTextContent('2')
+      expect.element(cells[0]).toHaveTextContent('A Item')
     })
   })
 })
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTableServer.spec.browser.tsx b/packages/vuetify/src/components/VDataTable/__tests__/VDataTableServer.spec.browser.tsx
@@ -1,5 +1,5 @@
 // Utilities
-import { fireEvent, render, screen, waitFor } from '@testing-library/vue'
+import { fireEvent, render, screen } from '@testing-library/vue'
 import { ref } from 'vue'
 import { VDataTableServer } from '../VDataTableServer'
 import { createVuetify } from '@/framework'
@@ -82,9 +82,7 @@ describe('VDataTableServer', () => {
     })
     load({ page: options.value.page, itemsPerPage: options.value.itemsPerPage })
 
-    await waitFor(() => {
-      expect(items.value).toHaveLength(2)
-    })
+    await expect.poll(() => items.value.length).toBe(2) // Ensure the table updates correctly
   })
 
   it('should trigger update event once when search changes', async () => {
@@ -128,8 +126,6 @@ describe('VDataTableServer', () => {
     const searchInput = screen.getByRole('textbox')
     await fireEvent.update(searchInput, 'Frozen')
 
-    await waitFor(() => {
-      expect(items.value.length).toBeGreaterThan(0) // Check if search filtered the items
-    })
+    await expect.poll(() => items.value.length).toBeGreaterThan(0) // Ensure items are filtered correctly by search
   })
 })
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTableVirtual.spec.browser.tsx b/packages/vuetify/src/components/VDataTable/__tests__/VDataTableVirtual.spec.browser.tsx
@@ -1,5 +1,5 @@
 // Utilities
-import { render } from '@testing-library/vue'
+import { render, screen } from '@testing-library/vue'
 import { VDataTableVirtual } from '..'
 import { createVuetify } from '@/framework'
 
@@ -24,6 +24,7 @@ const DESSERT_ITEMS = [
   { 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%' },
 ]
+
 const vuetify = createVuetify()
 
 describe('VDataTable', () => {
@@ -33,16 +34,18 @@ describe('VDataTable', () => {
       return curr
     }, [])
 
-    const { container } = render(() => (
-        <VDataTableVirtual items={ items } headers={ DESSERT_HEADERS } height={ 500 } />
+    render(() => (
+      <VDataTableVirtual items={ items } headers={ DESSERT_HEADERS } height={ 500 } />
     ), {
       global: {
         plugins: [vuetify],
       },
     })
-    const rows = container.querySelectorAll('tbody tr')
+
+    const rows = screen.getAllByRole('row')
     expect(rows.length).toBeLessThan(items.length)
-    const firstRow = rows[1]
+
+    const firstRow = rows[0]
     const lastRow = rows[rows.length - 1]
 
     const firstRowHeight = window.getComputedStyle(firstRow).height