Fix new test-library eslint errors

2022-09-28 21:30:20 -04:00
parent 86ab35069d
commit 6b09dc7198
7 changed files with 100 additions and 92 deletions
@@ -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)')
  })
 })
@@ -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)
    })
@@ -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' },