Merge branch 'main' into chore-remove-manual-cleanup

.eslintrc.json

@@ -10,6 +10,10 @@
     "plugin:storybook/recommended",
     "plugin:tailwindcss/recommended"
   ],
+  "plugins": ["@vitest"],
+  "globals": {
+    "vi": true
+  },
   "ignorePatterns": [
     "!src/**/*.{js,jsx,ts,tsx}",
     "src/old_ui/Icon/svg/*.jsx",

package.json

@@ -151,6 +151,7 @@
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/coverage-istanbul": "^2.1.1",
     "@vitest/coverage-v8": "^2.1.1",
+    "@vitest/eslint-plugin": "^1.1.4",
     "@vitest/ui": "^2.1.1",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.39.0",

src/layouts/BaseLayout/InstallationHelpBanner/InstallationHelpBanner.test.jsx

@@ -4,7 +4,6 @@ import userEvent from '@testing-library/user-event'
 import { graphql, HttpResponse } from 'msw2'
 import { setupServer } from 'msw2/node'
 import { MemoryRouter, Route, Switch } from 'react-router-dom'
-import { vi } from 'vitest'
 
 import InstallationHelpBanner from './InstallationHelpBanner'
 

src/layouts/Footer/Footer.test.tsx

@@ -1,6 +1,5 @@
 import { render, screen } from '@testing-library/react'
 import { MemoryRouter, Route } from 'react-router-dom'
-import { vi } from 'vitest'
 
 import config from 'config'
 

src/layouts/SidebarLayout/SidebarLayout.spec.jsx → src/layouts/SidebarLayout/SidebarLayout.test.tsx

@@ -3,74 +3,82 @@ import { MemoryRouter } from 'react-router-dom'
 
 import SidebarLayout from './SidebarLayout'
 
-jest.mock('../shared/ErrorBoundary', () => ({ children }) => <>{children}</>)
-jest.mock('layouts/Footer', () => () => 'Footer')
+vi.mock('../shared/ErrorBoundary', () => ({
+  default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}))
+vi.mock('layouts/Footer', () => ({ default: () => 'Footer' }))
 
 const robinQuote = 'Holy Tintinnabulation!'
 const batmanQuote =
   'Why do we fall? So that we can learn to pick ourselves back up.'
 
 describe('SidebarLayout', () => {
-  function setup(content, overrideClass) {
-    render(
-      <SidebarLayout
-        className={overrideClass}
-        sidebar={<div>{robinQuote}</div>}
-      >
-        {content}
-      </SidebarLayout>,
-      {
-        wrapper: MemoryRouter,
-      }
-    )
-  }
-
   describe('it renders with no children', () => {
-    beforeEach(() => {
-      setup()
-    })
-
     it('renders the sidebar', () => {
+      render(
+        <SidebarLayout sidebar={<div>{robinQuote}</div>}></SidebarLayout>,
+        { wrapper: MemoryRouter }
+      )
+
       const sidebar = screen.getByText(robinQuote)
       expect(sidebar).toBeInTheDocument()
     })
   })
 
   describe('it renders with children', () => {
-    beforeEach(() => {
-      setup(<p>{batmanQuote}</p>)
-    })
-
     it('renders the sidebar', () => {
+      render(
+        <SidebarLayout sidebar={<div>{robinQuote}</div>}>
+          <p>{batmanQuote}</p>
+        </SidebarLayout>,
+        { wrapper: MemoryRouter }
+      )
+
       const sidebar = screen.getByText(robinQuote)
       expect(sidebar).toBeInTheDocument()
     })
 
     it('renders the content of the page (children)', () => {
+      render(
+        <SidebarLayout sidebar={<div>{robinQuote}</div>}>
+          <p>{batmanQuote}</p>
+        </SidebarLayout>,
+        { wrapper: MemoryRouter }
+      )
+
       const content = screen.getByText(batmanQuote)
       expect(content).toBeInTheDocument()
     })
   })
 
   describe('it renders the content with default styles', () => {
-    beforeEach(() => {
-      setup(<p>{batmanQuote}</p>)
-    })
-
     it('renders the sidebar', () => {
+      render(
+        <SidebarLayout sidebar={<div>{robinQuote}</div>}>
+          <p>{batmanQuote}</p>
+        </SidebarLayout>,
+        { wrapper: MemoryRouter }
+      )
+
       const content = screen.getByTestId('sidebar-content')
       expect(content).toHaveClass('pl-0 lg:pl-8')
     })
   })
 
   describe('it renders the content with custom styles', () => {
-    beforeEach(() => {
-      setup(<p>{batmanQuote}</p>, 'batcave')
-    })
-
     it('renders the sidebar', () => {
+      render(
+        <SidebarLayout
+          className="text-red-500"
+          sidebar={<div>{robinQuote}</div>}
+        >
+          <p>{batmanQuote}</p>
+        </SidebarLayout>,
+        { wrapper: MemoryRouter }
+      )
+
       const content = screen.getByTestId('sidebar-content')
-      expect(content).toHaveClass('batcave')
+      expect(content).toHaveClass('text-red-500')
     })
   })
 })

src/layouts/SidebarLayout/SidebarLayout.jsx → src/layouts/SidebarLayout/SidebarLayout.tsx

@@ -1,10 +1,18 @@
 import cs from 'classnames'
-import PropType from 'prop-types'
 
 import ErrorBoundary from '../shared/ErrorBoundary'
 import NetworkErrorBoundary from '../shared/NetworkErrorBoundary'
 
-function SidebarLayout({ sidebar, children, className = '' }) {
+interface SidebarLayoutProps {
+  sidebar: React.ReactNode
+  className?: string
+}
+
+const SidebarLayout: React.FC<React.PropsWithChildren<SidebarLayoutProps>> = ({
+  sidebar,
+  children,
+  className = '',
+}) => {
   return (
     <div className="container flex flex-col lg:flex-row">
       <ErrorBoundary sentryScopes={[['layout', 'sidebar']]}>
@@ -22,8 +30,4 @@ function SidebarLayout({ sidebar, children, className = '' }) {
   )
 }
 
-SidebarLayout.propTypes = {
-  sidebar: PropType.element.isRequired,
-}
-
 export default SidebarLayout

src/layouts/ToastNotifications/ToastNotifications.spec.jsx → src/layouts/ToastNotifications/ToastNotifications.test.jsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
 
 import {
   useNotifications,
@@ -22,10 +23,10 @@ const notifications = [
   },
 ]
 
-jest.mock('services/toastNotification')
+vi.mock('services/toastNotification')
 
 describe('ToastNotifications', () => {
-  const removeNotification = jest.fn()
+  const removeNotification = vi.fn()
 
   function setup() {
     useNotifications.mockReturnValue(notifications)
@@ -35,7 +36,7 @@ describe('ToastNotifications', () => {
 
   describe('when rendered', () => {
     beforeEach(() => {
-      jest.useFakeTimers()
+      vi.useFakeTimers()
       removeNotification.mockReset()
       setup()
     })
@@ -47,7 +48,7 @@ describe('ToastNotifications', () => {
 
     describe('when enough time passes', () => {
       beforeEach(() => {
-        jest.runOnlyPendingTimers()
+        vi.runOnlyPendingTimers()
       })
 
       it('calls removeNotification with the notification that disappear', () => {

src/layouts/shared/ErrorBoundary/ErrorBoundary.spec.jsx → src/layouts/shared/ErrorBoundary/ErrorBoundary.test.jsx

@@ -1,6 +1,7 @@
 import * as Sentry from '@sentry/browser'
 import { render, screen } from '@testing-library/react'
 import { MemoryRouter, Route } from 'react-router-dom'
+import { vi } from 'vitest'
 
 import ErrorBoundary from './ErrorBoundary'
 
@@ -10,15 +11,14 @@ function BadComponent() {
 }
 
 // https://docs.sentry.io/platforms/javascript/guides/react/components/errorboundary/#using-multiple-error-boundaries
-const sentryMockScope = jest.fn()
+const sentryMockScope = vi.fn()
 
 describe('Error Boundary', () => {
   let mockError
-  beforeAll(() => jest.disableAutomock())
-  afterAll(() => jest.enableAutomock())
+
   beforeEach(() => {
-    mockError = jest.fn()
-    const spy = jest.spyOn(console, 'error')
+    mockError = vi.fn()
+    const spy = vi.spyOn(console, 'error')
     spy.mockImplementation(mockError)
   })
 

src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.spec.jsx → src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx

@@ -4,14 +4,15 @@ import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Component, useState } from 'react'
 import { MemoryRouter, useHistory } from 'react-router-dom'
+import { vi } from 'vitest'
 
 import config from 'config'
 
 import NetworkErrorBoundary from './NetworkErrorBoundary'
 
 // silence all verbose console.error
-jest.spyOn(console, 'error').mockImplementation()
-jest.mock('config')
+vi.spyOn(console, 'error').mockImplementation(() => undefined)
+vi.mock('config')
 
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
@@ -354,7 +355,7 @@ describe('NetworkErrorBoundary', () => {
       })
 
       // Mock the global fetch function
-      global.fetch = jest.fn(() =>
+      global.fetch = vi.fn(() =>
         Promise.resolve({
           ok: true,
           json: () => Promise.resolve({}),

src/layouts/shared/SilentNetworkError/SilentNetworkError.spec.jsx → src/layouts/shared/SilentNetworkError/SilentNetworkError.test.jsx

@@ -1,9 +1,10 @@
 import { render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
 
 import SilentNetworkError from './SilentNetworkError'
 
 // silence all verbose console.error
-jest.spyOn(console, 'error').mockImplementation()
+vi.spyOn(console, 'error').mockImplementation(() => undefined)
 
 describe('SilentNetworkError', () => {
   function setup(ComponentToRender, props = {}) {

src/layouts/shared/SilentNetworkErrorWrapper/SilentNetworkErrorWrapper.spec.jsx → src/layouts/shared/SilentNetworkErrorWrapper/SilentNetworkErrorWrapper.test.tsx

@@ -3,15 +3,13 @@ import { render, screen } from '@testing-library/react'
 import SilentNetworkError from './SilentNetworkErrorWrapper'
 
 describe('SilentNetworkErrorWrapper', () => {
-  function setup(data) {
+  function setup() {
     render(<SilentNetworkError>Hi</SilentNetworkError>)
   }
 
-  beforeEach(() => {
+  it('renders children', async () => {
     setup()
-  })
 
-  it('renders children', async () => {
     const Hello = await screen.findByText(/Hi/)
     expect(Hello).toBeInTheDocument()
   })

src/layouts/shared/SilentNetworkErrorWrapper/SilentNetworkErrorWrapper.jsx → src/layouts/shared/SilentNetworkErrorWrapper/SilentNetworkErrorWrapper.tsx

@@ -3,7 +3,9 @@ import { Suspense } from 'react'
 import SilentNetworkError from 'layouts/shared/SilentNetworkError'
 
 // IMPORTANT! Make sure to lazy load the children component
-function SilentNetworkErrorWrapper({ children }) {
+const SilentNetworkErrorWrapper: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
   return (
     <Suspense fallback={null}>
       <SilentNetworkError>{children}</SilentNetworkError>

src/old_ui/Message/Message.test.jsx

@@ -1,6 +1,5 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { vi } from 'vitest'
 
 import Message from '.'