Add eslint-plugin-testing-library (#23017)

* Add eslint-plugin-testing-library

* Update .eslintrc.js

* Only import from @testing-library/react

* Fix issues

GitOrigin-RevId: c225f1f70020d4431866119423cd839ce1ee5ed2

services/web/.eslintrc.js

@@ -218,6 +218,24 @@ module.exports = {
       ],
       extends: ['plugin:cypress/recommended'],
     },
+    {
+      // Frontend test specific rules
+      files: ['**/frontend/**/*.test.{js,jsx,ts,tsx}'],
+      plugins: ['testing-library'],
+      extends: ['plugin:testing-library/react'],
+      rules: {
+        'testing-library/no-await-sync-events': 'off',
+        'testing-library/no-await-sync-queries': 'off',
+        'testing-library/no-container': 'off',
+        'testing-library/no-node-access': 'off',
+        'testing-library/no-render-in-lifecycle': 'off',
+        'testing-library/no-wait-for-multiple-assertions': 'off',
+        'testing-library/no-wait-for-side-effects': 'off',
+        'testing-library/prefer-query-by-disappearance': 'off',
+        'testing-library/prefer-screen-queries': 'off',
+        'testing-library/render-result-naming-convention': 'off',
+      },
+    },
     {
       // Frontend specific rules
       files: [
@@ -244,7 +262,6 @@ module.exports = {
       globals: {
         __webpack_public_path__: true,
         $: true,
-        angular: true,
         ga: true,
       },
       rules: {

services/web/package.json

@@ -298,6 +298,7 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^7.1.1",
     "eslint-plugin-unicorn": "^56.0.0",
     "esmock": "^2.6.7",
     "events": "^3.3.0",

services/web/test/frontend/features/editor-left-menu/components/actions-copy-project.test.jsx

@@ -1,10 +1,9 @@
-import { fireEvent, screen } from '@testing-library/dom'
+import { fireEvent, screen, waitFor } from '@testing-library/react'
 import fetchMock from 'fetch-mock'
 import sinon from 'sinon'
 import { expect } from 'chai'
 import ActionsCopyProject from '../../../../../frontend/js/features/editor-left-menu/components/actions-copy-project'
 import { renderWithEditorContext } from '../../../helpers/render-with-context'
-import { waitFor } from '@testing-library/react'
 import * as useLocationModule from '../../../../../frontend/js/shared/hooks/use-location'
 
 describe('<ActionsCopyProject />', function () {

services/web/test/frontend/features/editor-left-menu/components/actions-menu.test.jsx

@@ -1,4 +1,4 @@
-import { screen, waitFor } from '@testing-library/dom'
+import { screen, waitFor } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import ActionsMenu from '../../../../../frontend/js/features/editor-left-menu/components/actions-menu'

services/web/test/frontend/features/editor-left-menu/components/actions-word-count.test.jsx

@@ -1,4 +1,4 @@
-import { screen, waitFor } from '@testing-library/dom'
+import { screen, waitFor } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import ActionsWordCount from '../../../../../frontend/js/features/editor-left-menu/components/actions-word-count'

services/web/test/frontend/features/editor-left-menu/components/download-menu.test.jsx

@@ -1,4 +1,4 @@
-import { screen, waitFor } from '@testing-library/dom'
+import { screen, waitFor } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import DownloadMenu from '../../../../../frontend/js/features/editor-left-menu/components/download-menu'

services/web/test/frontend/features/editor-left-menu/components/help-menu.test.jsx

@@ -1,4 +1,4 @@
-import { screen } from '@testing-library/dom'
+import { screen } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import HelpMenu from '../../../../../frontend/js/features/editor-left-menu/components/help-menu'

services/web/test/frontend/features/editor-left-menu/components/settings/settings-auto-close-brackets.test.tsx

@@ -1,9 +1,8 @@
-import { screen, within } from '@testing-library/dom'
+import { screen, within, render } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import SettingsAutoCloseBrackets from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-auto-close-brackets'
 import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context'
-import { render } from '@testing-library/react'
 import { EditorProviders } from '../../../../helpers/editor-providers'
 
 describe('<SettingsAutoCloseBrackets />', function () {

services/web/test/frontend/features/editor-left-menu/components/settings/settings-auto-complete.test.tsx

@@ -1,9 +1,8 @@
-import { screen, within } from '@testing-library/dom'
+import { screen, within, render } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import SettingsAutoComplete from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-auto-complete'
 import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context'
-import { render } from '@testing-library/react'
 import { EditorProviders } from '../../../../helpers/editor-providers'
 
 describe('<SettingsAutoComplete />', function () {

services/web/test/frontend/features/editor-left-menu/components/settings/settings-compiler.test.tsx

@@ -1,9 +1,8 @@
-import { screen, within } from '@testing-library/dom'
+import { screen, within, render } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import SettingsCompiler from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-compiler'
 import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context'
-import { render } from '@testing-library/react'
 import { EditorProviders } from '../../../../helpers/editor-providers'
 
 describe('<SettingsCompiler />', function () {

services/web/test/frontend/features/editor-left-menu/components/settings/settings-dictionary.test.tsx

@@ -1,8 +1,7 @@
-import { fireEvent, screen, within } from '@testing-library/dom'
+import { fireEvent, screen, within, render } from '@testing-library/react'
 import { expect } from 'chai'
 import SettingsDictionary from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-dictionary'
 import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context'
-import { render } from '@testing-library/react'
 import { EditorProviders } from '../../../../helpers/editor-providers'
 
 describe('<SettingsDictionary />', function () {

services/web/test/frontend/features/editor-left-menu/components/settings/settings-document.test.tsx

@@ -1,10 +1,9 @@
-import { screen, within } from '@testing-library/dom'
+import { screen, within, render } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import SettingsDocument from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-document'
 import { Folder } from '../../../../../../types/folder'
 import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context'
-import { render } from '@testing-library/react'
 import { EditorProviders } from '../../../../helpers/editor-providers'
 
 describe('<SettingsDocument />', function () {

services/web/test/frontend/features/editor-left-menu/components/settings/settings-editor-theme.test.tsx

@@ -1,9 +1,8 @@
-import { screen, within } from '@testing-library/dom'
+import { screen, within, render } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import SettingsEditorTheme from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-editor-theme'
 import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context'
-import { render } from '@testing-library/react'
 import { EditorProviders } from '../../../../helpers/editor-providers'
 
 describe('<SettingsEditorTheme />', function () {

services/web/test/frontend/features/editor-left-menu/components/settings/settings-font-family.test.tsx

@@ -1,9 +1,8 @@
-import { screen, within } from '@testing-library/dom'
+import { screen, within, render } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import SettingsFontFamily from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-font-family'
 import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context'
-import { render } from '@testing-library/react'
 import { EditorProviders } from '../../../../helpers/editor-providers'
 
 describe('<SettingsFontFamily />', function () {

services/web/test/frontend/features/editor-left-menu/components/settings/settings-font-size.test.tsx

@@ -1,9 +1,8 @@
-import { screen, within } from '@testing-library/dom'
+import { screen, within, render } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import SettingsFontSize from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-font-size'
 import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context'
-import { render } from '@testing-library/react'
 import { EditorProviders } from '../../../../helpers/editor-providers'
 
 describe('<SettingsFontSize />', function () {

services/web/test/frontend/features/editor-left-menu/components/settings/settings-image-name.test.tsx

@@ -1,10 +1,9 @@
-import { screen, within } from '@testing-library/dom'
+import { screen, within, render } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import SettingsImageName from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-image-name'
 import type { AllowedImageName } from '../../../../../../types/project-settings'
 import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context'
-import { render } from '@testing-library/react'
 import { EditorProviders } from '../../../../helpers/editor-providers'
 
 describe('<SettingsImageName />', function () {

services/web/test/frontend/features/editor-left-menu/components/settings/settings-keybindings.test.tsx

@@ -1,8 +1,7 @@
-import { screen, within } from '@testing-library/dom'
+import { screen, within, render } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import SettingsKeybindings from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-keybindings'
-import { render } from '@testing-library/react'
 import { EditorProviders } from '../../../../helpers/editor-providers'
 import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context'
 

services/web/test/frontend/features/editor-left-menu/components/settings/settings-line-height.test.tsx

@@ -1,8 +1,7 @@
-import { screen, within } from '@testing-library/dom'
+import { screen, within, render } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import SettingsLineHeight from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-line-height'
-import { render } from '@testing-library/react'
 import { EditorProviders } from '../../../../helpers/editor-providers'
 import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context'
 

services/web/test/frontend/features/editor-left-menu/components/settings/settings-math-preview.test.tsx

@@ -1,8 +1,7 @@
-import { screen, within } from '@testing-library/dom'
+import { screen, within, render } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import SettingsMathPreview from '@/features/editor-left-menu/components/settings/settings-math-preview'
-import { render } from '@testing-library/react'
 import { EditorProviders } from '../../../../helpers/editor-providers'
 import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context'
 

services/web/test/frontend/features/editor-left-menu/components/settings/settings-overall-theme.test.tsx

@@ -1,10 +1,9 @@
-import { screen, within } from '@testing-library/dom'
+import { screen, within, render } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import SettingsOverallTheme from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-overall-theme'
 import type { OverallThemeMeta } from '../../../../../../types/project-settings'
 import getMeta from '@/utils/meta'
-import { render } from '@testing-library/react'
 import { EditorProviders } from '../../../../helpers/editor-providers'
 import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context'
 

services/web/test/frontend/features/editor-left-menu/components/settings/settings-pdf-viewer.test.tsx

@@ -1,8 +1,7 @@
-import { screen, within } from '@testing-library/dom'
+import { screen, within, render } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import SettingsPdfViewer from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-pdf-viewer'
-import { render } from '@testing-library/react'
 import { EditorProviders } from '../../../../helpers/editor-providers'
 import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context'
 

services/web/test/frontend/features/editor-left-menu/components/settings/settings-spell-check-language.test.tsx

@@ -1,9 +1,8 @@
-import { screen, within } from '@testing-library/dom'
+import { screen, within, render } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import SettingsSpellCheckLanguage from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-spell-check-language'
 import type { SpellCheckLanguage } from '../../../../../../types/project-settings'
-import { render } from '@testing-library/react'
 import { EditorProviders } from '../../../../helpers/editor-providers'
 import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context'
 

services/web/test/frontend/features/editor-left-menu/components/settings/settings-syntax-validation.test.tsx

@@ -1,8 +1,7 @@
-import { screen, within } from '@testing-library/dom'
+import { screen, within, render } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import SettingsSyntaxValidation from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-syntax-validation'
-import { render } from '@testing-library/react'
 import { EditorProviders } from '../../../../helpers/editor-providers'
 import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context'
 

services/web/test/frontend/features/project-list/components/load-more.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, screen, waitFor } from '@testing-library/dom'
+import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import LoadMore from '../../../../../frontend/js/features/project-list/components/load-more'

services/web/test/frontend/features/project-list/components/notifications.test.tsx

@@ -137,8 +137,6 @@ describe('<UserNotifications />', function () {
 
       expect(joinBtn.disabled).to.be.true
 
-      screen.debug()
-
       await waitForElementToBeRemoved(() => screen.getByText('Loading'))
 
       expect(acceptMock.called()).to.be.true

services/web/test/frontend/features/project-list/components/project-list-root.test.tsx

@@ -1138,7 +1138,7 @@ describe('<ProjectListRoot />', function () {
 
         const yourProjectFilter = screen.getAllByText('Your Projects')[0]
         fireEvent.click(yourProjectFilter)
-        screen.findByText(copiedProjectName)
+        await screen.findByText(copiedProjectName)
       })
     })
 

services/web/test/frontend/features/settings/components/emails/emails-section-actions.test.tsx

@@ -92,7 +92,7 @@ describe('email actions - make primary', function () {
         name: /make primary/i,
       })) as HTMLButtonElement
 
-      userEvent.hover(button.parentElement!)
+      await userEvent.hover(button.parentElement!)
 
       await screen.findByText(
         /Please confirm your affiliation before making this the primary/i
@@ -109,7 +109,7 @@ describe('email actions - make primary', function () {
         name: /make primary/i,
       })) as HTMLButtonElement
 
-      userEvent.hover(button.parentElement!)
+      await userEvent.hover(button.parentElement!)
 
       await screen.findByText('Make this the primary email, used to log in', {
         exact: false,
@@ -150,7 +150,7 @@ describe('email actions - make primary', function () {
         name: /make primary/i,
       })) as HTMLButtonElement[]
 
-      userEvent.hover(buttons[1].parentElement!)
+      await userEvent.hover(buttons[1].parentElement!)
 
       await screen.findByText(
         'Please confirm your email by linking to your institutional account before making it the primary email',

services/web/test/frontend/features/settings/components/linking/integration-widget.test.tsx

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import { screen, fireEvent, render, waitFor } from '@testing-library/react'
+import { screen, fireEvent, render } from '@testing-library/react'
 import { IntegrationLinkingWidget } from '../../../../../../frontend/js/features/settings/components/linking/integration-widget'
 import * as eventTracking from '@/infrastructure/event-tracking'
 
@@ -104,9 +104,7 @@ describe('<IntegrationLinkingWidgetTest/>', function () {
         hidden: false,
       })
       fireEvent.click(cancelBtn)
-      await waitFor(() =>
-        screen.getByRole('button', { name: 'Cancel', hidden: true })
-      )
+      await screen.findByRole('button', { name: 'Cancel', hidden: true })
     })
   })
 })

services/web/test/frontend/features/settings/components/linking/sso-widget.test.tsx

@@ -61,9 +61,7 @@ describe('<SSOLinkingWidget />', function () {
         hidden: false,
       })
       fireEvent.click(cancelBtn)
-      await waitFor(() =>
-        screen.getByRole('button', { name: 'Cancel', hidden: true })
-      )
+      await screen.findByRole('button', { name: 'Cancel', hidden: true })
       expect(unlinkFunction).not.to.have.been.called
     })
   })
@@ -119,13 +117,11 @@ describe('<SSOLinkingWidget />', function () {
     })
 
     it('should display an error message ', async function () {
-      await waitFor(() =>
-        screen.getByText('Something went wrong. Please try again.')
-      )
+      await screen.findByText('Something went wrong. Please try again.')
     })
 
     it('should display the unlink button ', async function () {
-      await waitFor(() => screen.getByRole('button', { name: 'Unlink' }))
+      await screen.findByRole('button', { name: 'Unlink' })
     })
   })
 })