Skip to content

Commit 6a8f68b

Browse files
joshblackjoshblack
committed
test: add DataTable tests to vitest
1 parent 4a79cbd commit 6a8f68b

File tree

7 files changed

+37
-22
lines changed

7 files changed

+37
-22
lines changed

‎packages/react/jest.config.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@ module.exports = {
2828
setupFiles: ['<rootDir>/src/utils/test-helpers.tsx'],
2929
setupFilesAfterEnv: ['<rootDir>/src/utils/test-matchers.tsx', '<rootDir>/src/utils/test-deprecations.tsx'],
3030
testMatch: ['<rootDir>/**/*.test.[jt]s?(x)', '!**/*.types.test.[jt]s?(x)'],
31-
modulePathIgnorePatterns: ['<rootDir>/src/Banner/', '<rootDir>/src/FeatureFlags/', '<rootDir>/src/Stack/'],
31+
modulePathIgnorePatterns: [
32+
'<rootDir>/src/Banner/',
33+
'<rootDir>/src/DataTable/',
34+
'<rootDir>/src/FeatureFlags/',
35+
'<rootDir>/src/Stack/',
36+
],
3237
transformIgnorePatterns: ['node_modules/(?!@github/[a-z-]+-element|@lit-labs/react|@oddbird/popover-polyfill)'],
3338
}

‎packages/react/src/DataTable/__tests__/DataTable.test.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {describe, expect, it, vi} from 'vitest'
12
import userEvent from '@testing-library/user-event'
23
import {render, screen, getByRole, queryByRole, queryAllByRole} from '@testing-library/react'
34
import React from 'react'
@@ -365,7 +366,7 @@ describe('DataTable', () => {
365366
})
366367

367368
it('should not set a default sort state if `initialSortColumn` is provided but no columns are sortable', () => {
368-
const spy = jest.spyOn(console, 'warn').mockImplementationOnce(() => {})
369+
const spy = vi.spyOn(console, 'warn').mockImplementationOnce(() => {})
369370

370371
render(
371372
<DataTable
@@ -410,7 +411,7 @@ describe('DataTable', () => {
410411
})
411412

412413
it('should not set a default sort state if `initialSortColumn` is provided but does not correspond to a column', () => {
413-
const spy = jest.spyOn(console, 'warn').mockImplementationOnce(() => {})
414+
const spy = vi.spyOn(console, 'warn').mockImplementationOnce(() => {})
414415
render(
415416
<DataTable
416417
data={[
@@ -508,7 +509,7 @@ describe('DataTable', () => {
508509
})
509510

510511
it('should not set a default sort state if `initialSortDirection` is provided but no columns are sortable', () => {
511-
const spy = jest.spyOn(console, 'warn').mockImplementationOnce(() => {})
512+
const spy = vi.spyOn(console, 'warn').mockImplementationOnce(() => {})
512513
render(
513514
<DataTable
514515
data={[
@@ -837,7 +838,7 @@ describe('DataTable', () => {
837838

838839
it('should support a custom sort function', async () => {
839840
const user = userEvent.setup()
840-
const customSortFn = jest.fn().mockImplementation((a, b) => {
841+
const customSortFn = vi.fn().mockImplementation((a, b) => {
841842
return a.value - b.value
842843
})
843844

‎packages/react/src/DataTable/__tests__/ErrorDialog.test.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {describe, expect, it, vi} from 'vitest'
12
import userEvent from '@testing-library/user-event'
23
import {render, screen} from '@testing-library/react'
34
import React from 'react'
@@ -30,7 +31,7 @@ describe('Table.ErrorDialog', () => {
3031

3132
it('should call `onRetry` if the confirm button is interacted with', async () => {
3233
const user = userEvent.setup()
33-
const onRetry = jest.fn()
34+
const onRetry = vi.fn()
3435

3536
render(<ErrorDialog onRetry={onRetry} />)
3637
await user.click(screen.getByText('Retry'))
@@ -49,7 +50,7 @@ describe('Table.ErrorDialog', () => {
4950

5051
it('should call `onDismiss` if the cancel button is interacted with', async () => {
5152
const user = userEvent.setup()
52-
const onDismiss = jest.fn()
53+
const onDismiss = vi.fn()
5354

5455
render(<ErrorDialog onDismiss={onDismiss} />)
5556
await user.click(screen.getByText('Dismiss'))

‎packages/react/src/DataTable/__tests__/Pagination.test.tsx

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1+
import {page} from '@vitest/browser/context'
2+
import {beforeEach, describe, expect, it, vi} from 'vitest'
13
import React from 'react'
24
import {Pagination} from '../Pagination'
35
import {render, screen} from '@testing-library/react'
46
import userEvent from '@testing-library/user-event'
57

68
describe('Table.Pagination', () => {
9+
beforeEach(async () => {
10+
await page.viewport(1400, 728)
11+
})
12+
713
it('should render a navigation landmark with an accessible name provided by `aria-label`', () => {
814
render(<Pagination aria-label="Pagination" totalCount={100} />)
915
expect(
@@ -36,7 +42,7 @@ describe('Table.Pagination', () => {
3642
})
3743

3844
it('should warn if `defaultPageIndex` is not a valid `pageIndex`', () => {
39-
const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
45+
const spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
4046
render(<Pagination aria-label="Pagination" defaultPageIndex={4} pageSize={25} totalCount={100} />)
4147
expect(spy).toHaveBeenCalledWith(
4248
'Warning:',
@@ -67,7 +73,7 @@ describe('Table.Pagination', () => {
6773

6874
it('should not call `onChange` when a page or action is interacted with', async () => {
6975
const user = userEvent.setup()
70-
const onChange = jest.fn()
76+
const onChange = vi.fn()
7177

7278
render(<Pagination aria-label="Test label" onChange={onChange} pageSize={25} totalCount={25} />)
7379

@@ -86,7 +92,7 @@ describe('Table.Pagination', () => {
8692
})
8793

8894
it('should rerender many pages correctly', async () => {
89-
const onChange = jest.fn()
95+
const onChange = vi.fn()
9096

9197
const {rerender} = render(
9298
<Pagination aria-label="Test label" onChange={onChange} defaultPageIndex={0} pageSize={25} totalCount={25} />,
@@ -126,7 +132,7 @@ describe('Table.Pagination', () => {
126132

127133
it('should call `onChange` when clicking on pages', async () => {
128134
const user = userEvent.setup()
129-
const onChange = jest.fn()
135+
const onChange = vi.fn()
130136

131137
render(<Pagination aria-label="Test label" onChange={onChange} pageSize={25} totalCount={50} />)
132138

@@ -145,7 +151,7 @@ describe('Table.Pagination', () => {
145151

146152
it('should rerender pager with correct page highlighted when clicking on pages and defaultPageIndex set', async () => {
147153
const user = userEvent.setup()
148-
const onChange = jest.fn()
154+
const onChange = vi.fn()
149155

150156
render(
151157
<Pagination aria-label="Test label" onChange={onChange} defaultPageIndex={3} pageSize={25} totalCount={200} />,
@@ -171,7 +177,7 @@ describe('Table.Pagination', () => {
171177

172178
it('should call `onChange` when using the keyboard to interact with pages', async () => {
173179
const user = userEvent.setup()
174-
const onChange = jest.fn()
180+
const onChange = vi.fn()
175181

176182
render(<Pagination aria-label="Test label" onChange={onChange} pageSize={25} totalCount={50} />)
177183

@@ -202,7 +208,7 @@ describe('Table.Pagination', () => {
202208

203209
it('should call `onChange` when clicking on previous or next', async () => {
204210
const user = userEvent.setup()
205-
const onChange = jest.fn()
211+
const onChange = vi.fn()
206212

207213
render(<Pagination aria-label="Test label" onChange={onChange} pageSize={25} totalCount={50} />)
208214

@@ -222,7 +228,7 @@ describe('Table.Pagination', () => {
222228

223229
it('should rerender pager with correct page highlighted when clicking on previous or next and defaultPageIndex set', async () => {
224230
const user = userEvent.setup()
225-
const onChange = jest.fn()
231+
const onChange = vi.fn()
226232

227233
render(
228234
<Pagination aria-label="Test label" onChange={onChange} defaultPageIndex={3} pageSize={25} totalCount={200} />,
@@ -247,7 +253,7 @@ describe('Table.Pagination', () => {
247253

248254
it('should call `onChange` when using the keyboard to interact with previous or next', async () => {
249255
const user = userEvent.setup()
250-
const onChange = jest.fn()
256+
const onChange = vi.fn()
251257

252258
render(<Pagination aria-label="Test label" onChange={onChange} pageSize={25} totalCount={50} />)
253259

@@ -279,7 +285,7 @@ describe('Table.Pagination', () => {
279285
})
280286

281287
it('should rerender many pages correctly', async () => {
282-
const onChange = jest.fn()
288+
const onChange = vi.fn()
283289

284290
const {rerender} = render(
285291
<Pagination aria-label="Test label" onChange={onChange} defaultPageIndex={1} pageSize={25} totalCount={50} />,
@@ -345,7 +351,7 @@ describe('Table.Pagination', () => {
345351
})
346352

347353
it('should rerender many pages correctly', async () => {
348-
const onChange = jest.fn()
354+
const onChange = vi.fn()
349355
const {rerender} = render(
350356
<Pagination aria-label="Test label" onChange={onChange} defaultPageIndex={1} pageSize={10} totalCount={1000} />,
351357
)
@@ -365,7 +371,7 @@ describe('Table.Pagination', () => {
365371
})
366372

367373
it('when rendering 3 pages and the second page is selected we should render a page number not ...', async () => {
368-
const onChange = jest.fn()
374+
const onChange = vi.fn()
369375
render(<Pagination aria-label="Test label" onChange={onChange} defaultPageIndex={1} pageSize={2} totalCount={6} />)
370376
expect(getPageRange()).toEqual('3 through 4 of 6')
371377
expect(getCurrentPage()).toEqual(getPage(1))

‎packages/react/src/DataTable/__tests__/Table.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {describe, expect, it} from 'vitest'
12
import {render, screen} from '@testing-library/react'
23
import React from 'react'
34
import {Table} from '../../DataTable'
@@ -231,8 +232,7 @@ describe('Table', () => {
231232
expect(screen.getByRole('rowheader', {name: 'Cell'})).toBeInTheDocument()
232233
})
233234

234-
// Can't run this test because jest can't render styles
235-
it.skip('should vertically align cell contents', () => {
235+
it('should vertically align cell contents', () => {
236236
render(
237237
<Table>
238238
<Table.Head>

‎packages/react/src/DataTable/__tests__/sorting.test.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {describe, expect, test} from 'vitest'
12
import {alphanumeric, basic, datetime} from '../sorting'
23

34
const Second = 1000

‎packages/react/vitest.config.mts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export default defineConfig({
88
exclude: ['**/node_modules/**', '**/dist/**', '**/lib-esm/**', '**/lib/**', '**/generated/**'],
99
include: [
1010
'src/Banner/**/*.test.?(c|m)[jt]s?(x)',
11+
'src/DataTable/**/*.test.?(c|m)[jt]s?(x)',
1112
'src/FeatureFlags/**/*.test.?(c|m)[jt]s?(x)',
1213
'src/Stack/**/*.test.?(c|m)[jt]s?(x)',
1314
],
@@ -18,7 +19,7 @@ export default defineConfig({
1819
browser: {
1920
provider: 'playwright',
2021
enabled: true,
21-
headless: true,
22+
headless: process.env.DEBUG_BROWSER_TESTS === 'true' ? false : true,
2223
instances: [
2324
{
2425
browser: 'chromium',

0 commit comments

Comments
 (0)