Merge branch 'protocol_designer-migrate-webpack-to-vite' of https://g…

…ithub.com/Opentrons/opentrons into protocol_designer-migrate-webpack-to-vite

app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/LocationConflictModal.test.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react'
 import { UseQueryResult } from 'react-query'
 import { screen, fireEvent } from '@testing-library/react'
-import { renderWithProviders } from '@opentrons/components'
+import '@testing-library/jest-dom/vitest'
+import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
+import { renderWithProviders } from '../../../../../__testing-utils__'
 import {
   SINGLE_RIGHT_SLOT_FIXTURE,
   STAGING_AREA_RIGHT_SLOT_FIXTURE,
@@ -16,14 +18,7 @@ import { LocationConflictModal } from '../LocationConflictModal'
 
 import type { DeckConfiguration } from '@opentrons/shared-data'
 
-jest.mock('@opentrons/react-api-client')
-
-const mockUseDeckConfigurationQuery = useDeckConfigurationQuery as jest.MockedFunction<
-  typeof useDeckConfigurationQuery
->
-const mockUseUpdateDeckConfigurationMutation = useUpdateDeckConfigurationMutation as jest.MockedFunction<
-  typeof useUpdateDeckConfigurationMutation
->
+vi.mock('@opentrons/react-api-client')
 
 const mockFixture = {
   cutoutId: 'cutoutB3',
@@ -38,22 +33,22 @@ const render = (props: React.ComponentProps<typeof LocationConflictModal>) => {
 
 describe('LocationConflictModal', () => {
   let props: React.ComponentProps<typeof LocationConflictModal>
-  const mockUpdate = jest.fn()
+  const mockUpdate = vi.fn()
   beforeEach(() => {
     props = {
-      onCloseClick: jest.fn(),
+      onCloseClick: vi.fn(),
       cutoutId: 'cutoutB3',
       requiredFixtureId: TRASH_BIN_ADAPTER_FIXTURE,
     }
-    mockUseDeckConfigurationQuery.mockReturnValue({
+    vi.mocked(useDeckConfigurationQuery).mockReturnValue({
       data: [mockFixture],
     } as UseQueryResult<DeckConfiguration>)
-    mockUseUpdateDeckConfigurationMutation.mockReturnValue({
+    vi.mocked(useUpdateDeckConfigurationMutation).mockReturnValue({
       updateDeckConfiguration: mockUpdate,
     } as any)
   })
   afterEach(() => {
-    jest.resetAllMocks()
+    vi.resetAllMocks()
   })
   it('should render the modal information for a fixture conflict', () => {
     render(props)
@@ -70,7 +65,7 @@ describe('LocationConflictModal', () => {
   })
   it('should render the modal information for a module fixture conflict', () => {
     props = {
-      onCloseClick: jest.fn(),
+      onCloseClick: vi.fn(),
       cutoutId: 'cutoutB3',
       requiredModule: 'heaterShakerModuleV1',
     }
@@ -84,7 +79,7 @@ describe('LocationConflictModal', () => {
     expect(mockUpdate).toHaveBeenCalled()
   })
   it('should render the modal information for a single slot fixture conflict', () => {
-    mockUseDeckConfigurationQuery.mockReturnValue({
+    vi.mocked(useDeckConfigurationQuery).mockReturnValue({
       data: [
         {
           cutoutId: 'cutoutB1',
@@ -93,21 +88,21 @@ describe('LocationConflictModal', () => {
       ],
     } as UseQueryResult<DeckConfiguration>)
     props = {
-      onCloseClick: jest.fn(),
+      onCloseClick: vi.fn(),
       cutoutId: 'cutoutB1',
       requiredFixtureId: SINGLE_RIGHT_SLOT_FIXTURE,
       missingLabwareDisplayName: 'a tiprack',
     }
-    const { getByText, getAllByText, getByRole } = render(props)
-    getByText('Deck location conflict')
-    getByText('Slot B1')
-    getByText('Protocol specifies')
-    getByText('Currently configured')
-    getAllByText('Trash bin')
-    getByText('a tiprack')
-    fireEvent.click(getByRole('button', { name: 'Cancel' }))
+    render(props)
+    screen.getByText('Deck location conflict')
+    screen.getByText('Slot B1')
+    screen.getByText('Protocol specifies')
+    screen.getByText('Currently configured')
+    screen.getAllByText('Trash bin')
+    screen.getByText('a tiprack')
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
     expect(props.onCloseClick).toHaveBeenCalled()
-    fireEvent.click(getByRole('button', { name: 'Update deck' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Update deck' }))
     expect(mockUpdate).toHaveBeenCalled()
   })
   it('should render correct info for a odd', () => {

app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/MultipleModuleModal.test.tsx

@@ -1,15 +1,14 @@
 import * as React from 'react'
-import { fireEvent } from '@testing-library/react'
-import { renderWithProviders } from '@opentrons/components'
+import { fireEvent, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+import { describe, it, beforeEach, vi, expect } from 'vitest'
+import { renderWithProviders } from '../../../../../__testing-utils__'
 import { i18n } from '../../../../../i18n'
 import { getIsOnDevice } from '../../../../../redux/config'
 import { MultipleModulesModal } from '../MultipleModulesModal'
 
-jest.mock('../../../../../redux/config')
+vi.mock('../../../../../redux/config')
 
-const mockGetIsOnDevice = getIsOnDevice as jest.MockedFunction<
-  typeof getIsOnDevice
->
 const render = (props: React.ComponentProps<typeof MultipleModulesModal>) => {
   return renderWithProviders(<MultipleModulesModal {...props} />, {
     i18nInstance: i18n,
@@ -19,52 +18,56 @@ const render = (props: React.ComponentProps<typeof MultipleModulesModal>) => {
 describe('MultipleModulesModal', () => {
   let props: React.ComponentProps<typeof MultipleModulesModal>
   beforeEach(() => {
-    props = { onCloseClick: jest.fn() }
-    mockGetIsOnDevice.mockReturnValue(false)
+    props = { onCloseClick: vi.fn() }
+    vi.mocked(getIsOnDevice).mockReturnValue(false)
   })
 
   it('should render the correct header', () => {
-    const { getByRole } = render(props)
-    getByRole('heading', {
+    render(props)
+    screen.getByRole('heading', {
       name: 'Setting up multiple modules of the same type',
     })
   })
   it('should render the correct body', () => {
-    const { getByText, getByAltText } = render(props)
-    getByText(
+    render(props)
+    screen.getByText(
       'To use more than one of the same module in a protocol, you first need to plug in the module that’s called first in your protocol to the lowest numbered USB port on the robot. Continue in the same manner with additional modules.'
     )
-    getByText('Example')
-    getByText(
+    screen.getByText('Example')
+    screen.getByText(
       'Your protocol has two Temperature Modules. The Temperature Module attached to the first port starting from the left will be related to the first Temperature Module in your protocol while the second Temperature Module loaded would be related to the Temperature Module connected to the next port to the right. If using a hub, follow the same logic with the port ordering.'
     )
-    getByAltText('2 temperature modules plugged into the usb ports')
+    screen.getByAltText('2 temperature modules plugged into the usb ports')
   })
   it('should render a link to the learn more page', () => {
-    const { getByRole } = render(props)
+    render(props)
     expect(
-      getByRole('link', {
-        name: 'Learn more about using multiple modules of the same type',
-      }).getAttribute('href')
+      screen
+        .getByRole('link', {
+          name: 'Learn more about using multiple modules of the same type',
+        })
+        .getAttribute('href')
     ).toBe(
       'https://support.opentrons.com/s/article/Using-modules-of-the-same-type-on-the-OT-2'
     )
   })
   it('should call onCloseClick when the close button is pressed', () => {
-    const { getByRole } = render(props)
+    render(props)
     expect(props.onCloseClick).not.toHaveBeenCalled()
-    const closeButton = getByRole('button', { name: 'close' })
+    const closeButton = screen.getByRole('button', { name: 'close' })
     fireEvent.click(closeButton)
     expect(props.onCloseClick).toHaveBeenCalled()
   })
   it('should render the correct text and img for on device display', () => {
-    mockGetIsOnDevice.mockReturnValue(true)
-    const { getByText, getByRole, getByAltText } = render(props)
-    getByText(
+    vi.mocked(getIsOnDevice).mockReturnValue(true)
+    render(props)
+    screen.getByText(
       'You can use multiples of most module types within a single Python protocol by connecting and loading the modules in a specific order. The robot will initialize the matching module attached to the lowest numbered port first, regardless of what deck slot it occupies.'
     )
-    const img = getByRole('img')
-    expect(img.getAttribute('src')).toBe('multiple_modules_modal.png')
-    getByAltText('2 temperature modules plugged into the usb ports')
+    const img = screen.getByRole('img')
+    expect(img.getAttribute('src')).toBe(
+      '/app/src/assets/images/on-device-display/multiple_modules_modal.png'
+    )
+    screen.getByAltText('2 temperature modules plugged into the usb ports')
   })
 })

app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/NotConfiguredModal.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { fireEvent } from '@testing-library/react'
-import { renderWithProviders } from '@opentrons/components'
+import { describe, it, beforeEach, vi, expect } from 'vitest'
+import { renderWithProviders } from '../../../../../__testing-utils__'
 import { TRASH_BIN_ADAPTER_FIXTURE } from '@opentrons/shared-data'
 import {
   useDeckConfigurationQuery,
@@ -12,14 +13,7 @@ import { NotConfiguredModal } from '../NotConfiguredModal'
 import type { UseQueryResult } from 'react-query'
 import type { DeckConfiguration } from '@opentrons/shared-data'
 
-jest.mock('@opentrons/react-api-client')
-
-const mockUseUpdateDeckConfigurationMutation = useUpdateDeckConfigurationMutation as jest.MockedFunction<
-  typeof useUpdateDeckConfigurationMutation
->
-const mockUseDeckConfigurationQuery = useDeckConfigurationQuery as jest.MockedFunction<
-  typeof useDeckConfigurationQuery
->
+vi.mock('@opentrons/react-api-client')
 
 const render = (props: React.ComponentProps<typeof NotConfiguredModal>) => {
   return renderWithProviders(<NotConfiguredModal {...props} />, {
@@ -29,17 +23,17 @@ const render = (props: React.ComponentProps<typeof NotConfiguredModal>) => {
 
 describe('NotConfiguredModal', () => {
   let props: React.ComponentProps<typeof NotConfiguredModal>
-  const mockUpdate = jest.fn()
+  const mockUpdate = vi.fn()
   beforeEach(() => {
     props = {
-      onCloseClick: jest.fn(),
+      onCloseClick: vi.fn(),
       cutoutId: 'cutoutB3',
       requiredFixtureId: TRASH_BIN_ADAPTER_FIXTURE,
     }
-    mockUseUpdateDeckConfigurationMutation.mockReturnValue({
+    vi.mocked(useUpdateDeckConfigurationMutation).mockReturnValue({
       updateDeckConfiguration: mockUpdate,
     } as any)
-    mockUseDeckConfigurationQuery.mockReturnValue(({
+    vi.mocked(useDeckConfigurationQuery).mockReturnValue(({
       data: [],
     } as unknown) as UseQueryResult<DeckConfiguration>)
   })

app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupFixtureList.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
-import { renderWithProviders } from '@opentrons/components'
+import { describe, it, beforeEach, vi } from 'vitest'
+import { renderWithProviders } from '../../../../../__testing-utils__'
 import {
   SINGLE_RIGHT_SLOT_FIXTURE,
   STAGING_AREA_SLOT_WITH_WASTE_CHUTE_RIGHT_ADAPTER_NO_COVER_FIXTURE,
@@ -14,23 +15,13 @@ import { DeckFixtureSetupInstructionsModal } from '../../../../DeviceDetailsDeck
 
 import type { CutoutConfigAndCompatibility } from '../../../../../resources/deck_configuration/hooks'
 
-jest.mock('../../../../../resources/deck_configuration/hooks')
-jest.mock('../LocationConflictModal')
-jest.mock('../NotConfiguredModal')
-jest.mock(
+vi.mock('../../../../../resources/deck_configuration/hooks')
+vi.mock('../LocationConflictModal')
+vi.mock('../NotConfiguredModal')
+vi.mock(
   '../../../../DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal'
 )
 
-const mockLocationConflictModal = LocationConflictModal as jest.MockedFunction<
-  typeof LocationConflictModal
->
-const mockNotConfiguredModal = NotConfiguredModal as jest.MockedFunction<
-  typeof NotConfiguredModal
->
-const mockDeckFixtureSetupInstructionsModal = DeckFixtureSetupInstructionsModal as jest.MockedFunction<
-  typeof DeckFixtureSetupInstructionsModal
->
-
 const mockDeckConfigCompatibility: CutoutConfigAndCompatibility[] = [
   {
     cutoutId: 'cutoutD3',
@@ -79,11 +70,13 @@ describe('SetupFixtureList', () => {
     props = {
       deckConfigCompatibility: mockDeckConfigCompatibility,
     }
-    mockLocationConflictModal.mockReturnValue(
+    vi.mocked(LocationConflictModal).mockReturnValue(
       <div>mock location conflict modal</div>
     )
-    mockNotConfiguredModal.mockReturnValue(<div>mock not configured modal</div>)
-    mockDeckFixtureSetupInstructionsModal.mockReturnValue(
+    vi.mocked(NotConfiguredModal).mockReturnValue(
+      <div>mock not configured modal</div>
+    )
+    vi.mocked(DeckFixtureSetupInstructionsModal).mockReturnValue(
       <div>mock DeckFixtureSetupInstructionsModal</div>
     )
   })