Skip to content

Commit

Permalink
update select tests to vitest
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicholas-codecov
nicholas-codecov committed Sep 22, 2024
1 parent 7e15cde commit 0085643
Showing 1 changed file with 49 additions and 39 deletions.
88 changes: 49 additions & 39 deletions src/ui/Select/Select.spec.jsx → src/ui/Select/Select.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
import { render, screen, waitFor } from '@testing-library/react'
import { act, render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { act } from 'react-dom/test-utils'
import useIntersection from 'react-use/lib/useIntersection'

import Select from './Select'

jest.mock('react-use/lib/useIntersection')
const mocks = vi.hoisted(() => ({
useIntersection: vi.fn(),
}))

vi.mock('react-use', async () => {
const original = await vi.importActual('react-use')

return {
...original,
useIntersection: mocks.useIntersection,
}
})

describe('Select', () => {
function setup() {
Expand All @@ -16,7 +25,7 @@ describe('Select', () => {

describe('rendering with default values', () => {
it('renders the default placeholder', () => {
const onChange = jest.fn()
const onChange = vi.fn()
render(
<Select
ariaName="select test"
Expand All @@ -31,7 +40,7 @@ describe('Select', () => {
})

it('does not render the dropdown and items', () => {
const onChange = jest.fn()
const onChange = vi.fn()
render(
<Select
ariaName="select test"
Expand All @@ -49,7 +58,7 @@ describe('Select', () => {
describe('toggling dropdown', () => {
it('displays the dropdown', async () => {
const { user } = setup()
const onChange = jest.fn()
const onChange = vi.fn()
render(
<Select
ariaName="select test"
Expand All @@ -67,7 +76,7 @@ describe('Select', () => {

it('hides the dropdown', async () => {
const { user } = setup()
const onChange = jest.fn()
const onChange = vi.fn()
render(
<Select
ariaName="select test"
Expand All @@ -89,7 +98,7 @@ describe('Select', () => {
describe('rendering with a resourceName', () => {
it('renders with correct placeholder', async () => {
const { user } = setup()
const onChange = jest.fn()
const onChange = vi.fn()
render(
<Select
ariaName="select test"
Expand All @@ -110,7 +119,7 @@ describe('Select', () => {

describe('rendering with a button icon', () => {
it('renders the correct icon', async () => {
const onChange = jest.fn()
const onChange = vi.fn()
render(
<Select
ariaName="select test"
Expand All @@ -129,7 +138,7 @@ describe('Select', () => {

describe('when rendering with a value', () => {
it('renders the default selected item', () => {
const onChange = jest.fn()
const onChange = vi.fn()
render(
<Select
ariaName="select test"
Expand All @@ -149,7 +158,7 @@ describe('Select', () => {
describe('when rendering with a searchValue', () => {
it('renders the default selected item', async () => {
const { user } = setup()
const onChange = jest.fn()
const onChange = vi.fn()
render(
<Select
ariaName="select test"
Expand All @@ -172,7 +181,7 @@ describe('Select', () => {
describe('when select is triggered', () => {
it('renders the items', async () => {
const { user } = setup()
const onChange = jest.fn()
const onChange = vi.fn()
render(
<Select
ariaName="select test"
Expand Down Expand Up @@ -201,12 +210,12 @@ describe('Select', () => {

describe('when selecting an item from the list', () => {
afterEach(() => {
jest.resetAllMocks()
vi.clearAllMocks()
})

it('highlights the selected item', async () => {
const { user } = setup()
const onChange = jest.fn()
const onChange = vi.fn()
render(
<Select
ariaName="select test"
Expand All @@ -228,7 +237,7 @@ describe('Select', () => {

it('calls onChange with the item', async () => {
const { user } = setup()
const onChange = jest.fn()
const onChange = vi.fn()
render(
<Select
ariaName="select test"
Expand All @@ -250,7 +259,7 @@ describe('Select', () => {
describe('when rendered with complex items and custom item rendering', () => {
it('renders the option user the custom rendered', async () => {
const { user } = setup()
const onChange = jest.fn()
const onChange = vi.fn()
render(
<Select
ariaName="select test"
Expand Down Expand Up @@ -281,7 +290,7 @@ describe('Select', () => {

describe('when selectedItem has a custom renderer', () => {
it('renders the custom selected item', () => {
const onChange = jest.fn()
const onChange = vi.fn()
render(
<Select
ariaName="select test"
Expand All @@ -300,14 +309,14 @@ describe('Select', () => {

describe('when onSearch is passed', () => {
afterEach(() => {
jest.resetAllMocks()
vi.clearAllMocks()
})

it('renders search input', async () => {
const { user } = setup()

const onChange = jest.fn()
const onSearch = jest.fn()
const onChange = vi.fn()
const onSearch = vi.fn()
render(
<Select
ariaName="select test"
Expand All @@ -328,8 +337,8 @@ describe('Select', () => {

it('calls onSearch with the search value', async () => {
const { user } = setup()
const onChange = jest.fn()
const onSearch = jest.fn()
const onChange = vi.fn()
const onSearch = vi.fn()
render(
<Select
ariaName="select test"
Expand All @@ -354,8 +363,8 @@ describe('Select', () => {
describe('when there are no items', () => {
it('renders no results found when item length is zero', async () => {
const { user } = setup()
const onChange = jest.fn()
const onSearch = jest.fn()
const onChange = vi.fn()
const onSearch = vi.fn()
render(
<Select
ariaName="select test"
Expand Down Expand Up @@ -384,17 +393,18 @@ describe('Select', () => {

describe('when onLoadMore function is passed', () => {
beforeEach(() => {
useIntersection.mockReturnValue({ isIntersecting: true })
mocks.useIntersection.mockReturnValue({ isIntersecting: true })
})

afterEach(() => {
jest.resetAllMocks()
vi.clearAllMocks()
})

it('renders an invisible load more trigger', async () => {
const { user } = setup()
const onChange = jest.fn()
const onSearch = jest.fn()
const onLoadMore = jest.fn()
const onChange = vi.fn()
const onSearch = vi.fn()
const onLoadMore = vi.fn()
render(
<Select
ariaName="select test"
Expand All @@ -415,9 +425,9 @@ describe('Select', () => {

it('when load more trigger span is intersecting calls onLoadMore', async () => {
const { user } = setup()
const onChange = jest.fn()
const onSearch = jest.fn()
const onLoadMore = jest.fn()
const onChange = vi.fn()
const onSearch = vi.fn()
const onLoadMore = vi.fn()
render(
<Select
ariaName="select test"
Expand All @@ -439,8 +449,8 @@ describe('Select', () => {
describe('when isLoading is true', () => {
it('renders a spinner', async () => {
const { user } = setup()
const onSearch = jest.fn()
const onChange = jest.fn()
const onSearch = vi.fn()
const onChange = vi.fn()

render(
<Select
Expand All @@ -465,8 +475,8 @@ describe('Select', () => {
it('sets reset function', async () => {
let selectRef
const { user } = setup()
const onSearch = jest.fn()
const onChange = jest.fn()
const onSearch = vi.fn()
const onChange = vi.fn()

render(
<Select
Expand Down Expand Up @@ -495,8 +505,8 @@ describe('Select', () => {
describe('when an item is marked as isDisabled', () => {
it('is not an option', async () => {
const { user } = setup()
const onChange = jest.fn()
const onSearch = jest.fn()
const onChange = vi.fn()
const onSearch = vi.fn()
render(
<Select
ariaName="select test"
Expand Down

0 comments on commit 0085643

Please sign in to comment.