Merge branch 'main' into chore-update-ui-virtual-file-renderer-test-t…

…o-vitest

.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 '.'