Fix new test-library eslint errors

This commit is contained in:
Deluan 2022-09-28 21:30:20 -04:00
parent 86ab35069d
commit 6b09dc7198
7 changed files with 100 additions and 92 deletions

View File

@ -1,5 +1,5 @@
import * as React from 'react'
import { render, cleanup } from '@testing-library/react'
import { render, cleanup, screen } from '@testing-library/react'
import { MultiLineTextField } from './MultiLineTextField'
describe('<MultiLineTextField />', () => {
@ -7,24 +7,22 @@ describe('<MultiLineTextField />', () => {
it('should render each line in a separated div', () => {
const record = { comment: 'line1\nline2' }
const { queryByTestId } = render(
<MultiLineTextField record={record} source={'comment'} />
)
expect(queryByTestId('comment.0').textContent).toBe('line1')
expect(queryByTestId('comment.1').textContent).toBe('line2')
render(<MultiLineTextField record={record} source={'comment'} />)
expect(screen.queryByTestId('comment.0').textContent).toBe('line1')
expect(screen.queryByTestId('comment.1').textContent).toBe('line2')
})
it.each([null, undefined])(
'should render the emptyText when value is %s',
(body) => {
const { queryByText } = render(
render(
<MultiLineTextField
record={{ id: 123, body }}
emptyText="NA"
source="body"
/>
)
expect(queryByText('NA')).not.toBeNull()
expect(screen.getByText('NA')).toBeInTheDocument()
}
)
})

View File

@ -1,5 +1,5 @@
import * as React from 'react'
import { cleanup, render } from '@testing-library/react'
import { cleanup, render, screen } from '@testing-library/react'
import { QualityInfo } from './QualityInfo'
describe('<QualityInfo />', () => {
@ -7,21 +7,21 @@ describe('<QualityInfo />', () => {
it('only render suffix for lossless formats', () => {
const info = { suffix: 'FLAC', bitRate: 1008 }
const { queryByText } = render(<QualityInfo record={info} />)
expect(queryByText('FLAC')).not.toBeNull()
render(<QualityInfo record={info} />)
expect(screen.getByText('FLAC')).toBeInTheDocument()
})
it('only render suffix and bitrate for lossy formats', () => {
const info = { suffix: 'MP3', bitRate: 320 }
const { queryByText } = render(<QualityInfo record={info} />)
expect(queryByText('MP3 320')).not.toBeNull()
render(<QualityInfo record={info} />)
expect(screen.getByText('MP3 320')).toBeInTheDocument()
})
it('renders placeholder if suffix is missing', () => {
const info = {}
const { queryByText } = render(<QualityInfo record={info} />)
expect(queryByText('N/A')).not.toBeNull()
render(<QualityInfo record={info} />)
expect(screen.getByText('N/A')).toBeInTheDocument()
})
it('does not break if record is null', () => {
const { queryByText } = render(<QualityInfo />)
expect(queryByText('N/A')).not.toBeNull()
render(<QualityInfo />)
expect(screen.getByText('N/A')).toBeInTheDocument()
})
})

View File

@ -1,5 +1,5 @@
import * as React from 'react'
import { cleanup, render } from '@testing-library/react'
import { cleanup, render, screen } from '@testing-library/react'
import { QuickFilter } from './QuickFilter'
import StarIcon from '@material-ui/icons/Star'
@ -7,27 +7,23 @@ describe('QuickFilter', () => {
afterEach(cleanup)
it('renders label if provided', () => {
const { getByText } = render(
<QuickFilter resource={'song'} source={'name'} label={'MyLabel'} />
)
expect(getByText('MyLabel')).not.toBeNull()
render(<QuickFilter resource={'song'} source={'name'} label={'MyLabel'} />)
expect(screen.getByText('MyLabel')).not.toBeNull()
})
it('renders resource translation if label is not provided', () => {
const { getByText } = render(
<QuickFilter resource={'song'} source={'name'} />
)
expect(getByText('resources.song.fields.name')).not.toBeNull()
render(<QuickFilter resource={'song'} source={'name'} />)
expect(screen.getByText('resources.song.fields.name')).not.toBeNull()
})
it('renders a component label', () => {
const { getByTestId } = render(
render(
<QuickFilter
resource={'song'}
source={'name'}
label={<StarIcon data-testid="label-icon-test" />}
/>
)
expect(getByTestId('label-icon-test')).not.toBeNull()
expect(screen.getByTestId('label-icon-test')).not.toBeNull()
})
})

View File

@ -1,5 +1,5 @@
import * as React from 'react'
import { cleanup, render } from '@testing-library/react'
import { cleanup, render, screen } from '@testing-library/react'
import { LinkToVersion } from './AboutDialog'
import TableBody from '@material-ui/core/TableBody'
import TableRow from '@material-ui/core/TableRow'
@ -20,35 +20,35 @@ describe('<LinkToVersion />', () => {
it('should not render any link for "dev" version', () => {
const version = 'dev'
const { queryByRole } = render(<Wrapper version={version} />)
expect(queryByRole('link')).toBeNull()
render(<Wrapper version={version} />)
expect(screen.queryByRole('link')).toBeNull()
})
it('should render link to GH tag page for full releases', () => {
const version = '0.40.0 (300a0292)'
const { queryByRole } = render(<Wrapper version={version} />)
render(<Wrapper version={version} />)
const link = queryByRole('link')
const link = screen.queryByRole('link')
expect(link.href).toBe(
'https://github.com/navidrome/navidrome/releases/tag/v0.40.0'
)
expect(link.textContent).toBe('0.40.0')
const cell = queryByRole('cell')
const cell = screen.queryByRole('cell')
expect(cell.textContent).toBe('0.40.0 (300a0292)')
})
it('should render link to GH comparison page for snapshot releases', () => {
const version = '0.40.0-SNAPSHOT (300a0292)'
const { queryByRole } = render(<Wrapper version={version} />)
render(<Wrapper version={version} />)
const link = queryByRole('link')
const link = screen.queryByRole('link')
expect(link.href).toBe(
'https://github.com/navidrome/navidrome/compare/v0.40.0...300a0292'
)
expect(link.textContent).toBe('0.40.0-SNAPSHOT')
const cell = queryByRole('cell')
const cell = screen.queryByRole('cell')
expect(cell.textContent).toBe('0.40.0-SNAPSHOT (300a0292)')
})
})

View File

@ -1,7 +1,13 @@
import * as React from 'react'
import { TestContext } from 'ra-test'
import { DataProviderContext } from 'react-admin'
import { cleanup, fireEvent, render, waitFor } from '@testing-library/react'
import {
cleanup,
fireEvent,
render,
waitFor,
screen,
} from '@testing-library/react'
import { AddToPlaylistDialog } from './AddToPlaylistDialog'
const mockData = [
@ -71,17 +77,18 @@ describe('AddToPlaylistDialog', () => {
}),
}
const testUtils = createTestUtils(mockDataProvider)
createTestUtils(mockDataProvider)
fireEvent.change(document.activeElement, { target: { value: 'sample' } })
fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
fireEvent.keyDown(document.activeElement, { key: 'Enter' })
fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
fireEvent.keyDown(document.activeElement, { key: 'Enter' })
let textBox = screen.getByRole('textbox')
fireEvent.change(textBox, { target: { value: 'sample' } })
fireEvent.keyDown(textBox, { key: 'ArrowDown' })
fireEvent.keyDown(textBox, { key: 'Enter' })
fireEvent.keyDown(textBox, { key: 'ArrowDown' })
fireEvent.keyDown(textBox, { key: 'Enter' })
await waitFor(() => {
expect(testUtils.getByTestId('playlist-add')).not.toBeDisabled()
expect(screen.getByTestId('playlist-add')).not.toBeDisabled()
})
fireEvent.click(testUtils.getByTestId('playlist-add'))
fireEvent.click(screen.getByTestId('playlist-add'))
await waitFor(() => {
expect(mockDataProvider.create).toHaveBeenNthCalledWith(
1,
@ -115,30 +122,31 @@ describe('AddToPlaylistDialog', () => {
}),
}
const testUtils = createTestUtils(mockDataProvider)
createTestUtils(mockDataProvider)
fireEvent.change(document.activeElement, { target: { value: 'sample' } })
fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
fireEvent.keyDown(document.activeElement, { key: 'Enter' })
let textBox = screen.getByRole('textbox')
fireEvent.change(textBox, { target: { value: 'sample' } })
fireEvent.keyDown(textBox, { key: 'ArrowDown' })
fireEvent.keyDown(textBox, { key: 'ArrowDown' })
fireEvent.keyDown(textBox, { key: 'ArrowDown' })
fireEvent.keyDown(textBox, { key: 'Enter' })
await waitFor(() => {
expect(testUtils.getByTestId('playlist-add')).not.toBeDisabled()
expect(screen.getByTestId('playlist-add')).not.toBeDisabled()
})
fireEvent.click(testUtils.getByTestId('playlist-add'))
fireEvent.click(screen.getByTestId('playlist-add'))
await waitFor(() => {
expect(mockDataProvider.create).toHaveBeenNthCalledWith(1, 'playlist', {
data: { name: 'sample' },
})
expect(mockDataProvider.create).toHaveBeenNthCalledWith(
2,
'playlistTrack',
{
data: { ids: selectedIds },
filter: { playlist_id: 'created-id1' },
}
)
})
expect(mockDataProvider.create).toHaveBeenNthCalledWith(
2,
'playlistTrack',
{
data: { ids: selectedIds },
filter: { playlist_id: 'created-id1' },
}
)
})
it('adds distinct songs to multiple new playlists', async () => {
@ -152,21 +160,20 @@ describe('AddToPlaylistDialog', () => {
}),
}
const testUtils = createTestUtils(mockDataProvider)
createTestUtils(mockDataProvider)
fireEvent.change(document.activeElement, { target: { value: 'sample' } })
fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
fireEvent.keyDown(document.activeElement, { key: 'Enter' })
fireEvent.change(document.activeElement, {
target: { value: 'new playlist' },
})
fireEvent.keyDown(document.activeElement, { key: 'Enter' })
let textBox = screen.getByRole('textbox')
fireEvent.change(textBox, { target: { value: 'sample' } })
fireEvent.keyDown(textBox, { key: 'ArrowDown' })
fireEvent.keyDown(textBox, { key: 'ArrowDown' })
fireEvent.keyDown(textBox, { key: 'ArrowDown' })
fireEvent.keyDown(textBox, { key: 'Enter' })
fireEvent.change(textBox, { target: { value: 'new playlist' } })
fireEvent.keyDown(textBox, { key: 'Enter' })
await waitFor(() => {
expect(testUtils.getByTestId('playlist-add')).not.toBeDisabled()
expect(screen.getByTestId('playlist-add')).not.toBeDisabled()
})
fireEvent.click(testUtils.getByTestId('playlist-add'))
fireEvent.click(screen.getByTestId('playlist-add'))
await waitFor(() => {
expect(mockDataProvider.create).toHaveBeenCalledTimes(4)
})

View File

@ -1,7 +1,13 @@
import * as React from 'react'
import { TestContext } from 'ra-test'
import { DataProviderContext } from 'react-admin'
import { cleanup, fireEvent, render, waitFor } from '@testing-library/react'
import {
cleanup,
fireEvent,
render,
screen,
waitFor,
} from '@testing-library/react'
import { SelectPlaylistInput } from './SelectPlaylistInput'
describe('SelectPlaylistInput', () => {
@ -70,17 +76,18 @@ describe('SelectPlaylistInput', () => {
})
})
fireEvent.change(document.activeElement, { target: { value: 'sample' } })
fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
fireEvent.keyDown(document.activeElement, { key: 'Enter' })
let textBox = screen.getByRole('textbox')
fireEvent.change(textBox, { target: { value: 'sample' } })
fireEvent.keyDown(textBox, { key: 'ArrowDown' })
fireEvent.keyDown(textBox, { key: 'Enter' })
await waitFor(() => {
expect(onChangeHandler).toHaveBeenCalledWith([
{ id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },
])
})
fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
fireEvent.keyDown(document.activeElement, { key: 'Enter' })
fireEvent.keyDown(textBox, { key: 'ArrowDown' })
fireEvent.keyDown(textBox, { key: 'Enter' })
await waitFor(() => {
expect(onChangeHandler).toHaveBeenCalledWith([
{ id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },
@ -88,11 +95,11 @@ describe('SelectPlaylistInput', () => {
])
})
fireEvent.change(document.activeElement, {
fireEvent.change(textBox, {
target: { value: 'new playlist' },
})
fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
fireEvent.keyDown(document.activeElement, { key: 'Enter' })
fireEvent.keyDown(textBox, { key: 'ArrowDown' })
fireEvent.keyDown(textBox, { key: 'Enter' })
await waitFor(() => {
expect(onChangeHandler).toHaveBeenCalledWith([
{ id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },
@ -101,10 +108,10 @@ describe('SelectPlaylistInput', () => {
])
})
fireEvent.change(document.activeElement, {
fireEvent.change(textBox, {
target: { value: 'another new playlist' },
})
fireEvent.keyDown(document.activeElement, { key: 'Enter' })
fireEvent.keyDown(textBox, { key: 'Enter' })
await waitFor(() => {
expect(onChangeHandler).toHaveBeenCalledWith([
{ id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },

View File

@ -1,5 +1,5 @@
import * as React from 'react'
import { cleanup, render } from '@testing-library/react'
import { cleanup, render, screen } from '@testing-library/react'
import { createMemoryHistory } from 'history'
import { Router } from 'react-router-dom'
import StarIcon from '@material-ui/icons/Star'
@ -14,12 +14,12 @@ describe('<DynamicMenuIcon />', () => {
const route = '/test'
history.push(route)
const { getByTestId } = render(
render(
<Router history={history}>
<DynamicMenuIcon icon={StarIcon} path={'test'} />
</Router>
)
expect(getByTestId('icon')).not.toBeNull()
expect(screen.getByTestId('icon')).not.toBeNull()
})
it('renders icon if path does not match the URL', () => {
@ -27,7 +27,7 @@ describe('<DynamicMenuIcon />', () => {
const route = '/path'
history.push(route)
const { getByTestId } = render(
render(
<Router history={history}>
<DynamicMenuIcon
icon={StarIcon}
@ -36,7 +36,7 @@ describe('<DynamicMenuIcon />', () => {
/>
</Router>
)
expect(getByTestId('icon')).not.toBeNull()
expect(screen.getByTestId('icon')).not.toBeNull()
})
it('renders activeIcon if path matches the URL', () => {
@ -44,7 +44,7 @@ describe('<DynamicMenuIcon />', () => {
const route = '/path'
history.push(route)
const { getByTestId } = render(
render(
<Router history={history}>
<DynamicMenuIcon
icon={StarIcon}
@ -53,6 +53,6 @@ describe('<DynamicMenuIcon />', () => {
/>
</Router>
)
expect(getByTestId('activeIcon')).not.toBeNull()
expect(screen.getByTestId('activeIcon')).not.toBeNull()
})
})