From a8aa01411cdc21fab344e46c68d2b53eaf658c37 Mon Sep 17 00:00:00 2001 From: Jethary Date: Thu, 29 Feb 2024 15:53:39 -0500 Subject: [PATCH] update some more tests --- .../__tests__/LocationConflictModal.test.tsx | 47 +++--- .../__tests__/MultipleModuleModal.test.tsx | 57 ++++--- .../__tests__/NotConfiguredModal.test.tsx | 20 +-- .../__tests__/SetupFixtureList.test.tsx | 29 ++-- .../__tests__/SetupModulesAndDeck.test.tsx | 140 +++++++--------- .../__tests__/SetupModulesList.test.tsx | 156 +++++++----------- .../__tests__/UnMatchedModuleWarning.test.tsx | 15 +- .../__tests__/utils.test.ts | 39 +++-- .../__tests__/ExitConfirmation.test.tsx | 39 +++-- .../__tests__/ResultsSummary.test.tsx | 65 ++++---- .../__tests__/TipConfirmation.test.tsx | 27 ++- 11 files changed, 288 insertions(+), 346 deletions(-) diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/LocationConflictModal.test.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/LocationConflictModal.test.tsx index 8a609db72ff..82e31c1c7a7 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/LocationConflictModal.test.tsx +++ b/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) => { describe('LocationConflictModal', () => { let props: React.ComponentProps - 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) - 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) 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', () => { diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/MultipleModuleModal.test.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/MultipleModuleModal.test.tsx index 69f7acd4a2d..532ab57c39b 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/MultipleModuleModal.test.tsx +++ b/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) => { return renderWithProviders(, { i18nInstance: i18n, @@ -19,52 +18,56 @@ const render = (props: React.ComponentProps) => { describe('MultipleModulesModal', () => { let props: React.ComponentProps 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') }) }) diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/NotConfiguredModal.test.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/NotConfiguredModal.test.tsx index 941536f0f0d..f2adbfe736d 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/NotConfiguredModal.test.tsx +++ b/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) => { return renderWithProviders(, { @@ -29,17 +23,17 @@ const render = (props: React.ComponentProps) => { describe('NotConfiguredModal', () => { let props: React.ComponentProps - 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) }) diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupFixtureList.test.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupFixtureList.test.tsx index 2653aff9316..69813bdbd8f 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupFixtureList.test.tsx +++ b/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(
mock location conflict modal
) - mockNotConfiguredModal.mockReturnValue(
mock not configured modal
) - mockDeckFixtureSetupInstructionsModal.mockReturnValue( + vi.mocked(NotConfiguredModal).mockReturnValue( +
mock not configured modal
+ ) + vi.mocked(DeckFixtureSetupInstructionsModal).mockReturnValue(
mock DeckFixtureSetupInstructionsModal
) }) diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesAndDeck.test.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesAndDeck.test.tsx index 96b7a907a22..818b46e0c6b 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesAndDeck.test.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesAndDeck.test.tsx @@ -1,7 +1,8 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' -import { when } from 'jest-when' -import { renderWithProviders } from '@opentrons/components' +import { when } from 'vitest-when' +import { describe, it, beforeEach, expect, vi } from 'vitest' +import { fireEvent, screen } from '@testing-library/react' +import { renderWithProviders } from '../../../../../__testing-utils__' import { i18n } from '../../../../../i18n' import { mockTemperatureModule } from '../../../../../redux/modules/__fixtures__' import { @@ -19,38 +20,13 @@ import { SetupModulesList } from '../SetupModulesList' import { SetupModulesMap } from '../SetupModulesMap' import { SetupFixtureList } from '../SetupFixtureList' -jest.mock('../../../hooks') -jest.mock('../SetupModulesList') -jest.mock('../SetupModulesMap') -jest.mock('../SetupFixtureList') -jest.mock('../../../../../redux/config') -jest.mock('../../../../../resources/deck_configuration/utils') +vi.mock('../../../hooks') +vi.mock('../SetupModulesList') +vi.mock('../SetupModulesMap') +vi.mock('../SetupFixtureList') +vi.mock('../../../../../redux/config') +vi.mock('../../../../../resources/deck_configuration/utils') -const mockUseIsFlex = useIsFlex as jest.MockedFunction -const mockUseRunHasStarted = useRunHasStarted as jest.MockedFunction< - typeof useRunHasStarted -> -const mockUseUnmatchedModulesForProtocol = useUnmatchedModulesForProtocol as jest.MockedFunction< - typeof useUnmatchedModulesForProtocol -> -const mockUseModuleCalibrationStatus = useModuleCalibrationStatus as jest.MockedFunction< - typeof useModuleCalibrationStatus -> -const mockSetupModulesList = SetupModulesList as jest.MockedFunction< - typeof SetupModulesList -> -const mockSetupFixtureList = SetupFixtureList as jest.MockedFunction< - typeof SetupFixtureList -> -const mockSetupModulesMap = SetupModulesMap as jest.MockedFunction< - typeof SetupModulesMap -> -const mockGetRequiredDeckConfig = getRequiredDeckConfig as jest.MockedFunction< - typeof getRequiredDeckConfig -> -const mockGetIsFixtureMismatch = getIsFixtureMismatch as jest.MockedFunction< - typeof getIsFixtureMismatch -> const MOCK_ROBOT_NAME = 'otie' const MOCK_RUN_ID = '1' @@ -66,77 +42,83 @@ describe('SetupModuleAndDeck', () => { props = { robotName: MOCK_ROBOT_NAME, runId: MOCK_RUN_ID, - expandLabwarePositionCheckStep: () => jest.fn(), + expandLabwarePositionCheckStep: () => vi.fn(), hasModules: true, protocolAnalysis: null, } - mockSetupFixtureList.mockReturnValue(
Mock setup fixture list
) - mockSetupModulesList.mockReturnValue(
Mock setup modules list
) - mockSetupModulesMap.mockReturnValue(
Mock setup modules map
) - when(mockUseRunHasStarted).calledWith(MOCK_RUN_ID).mockReturnValue(false) - when(mockUseUnmatchedModulesForProtocol) + vi.mocked(SetupFixtureList).mockReturnValue( +
Mock setup fixture list
+ ) + vi.mocked(SetupModulesList).mockReturnValue( +
Mock setup modules list
+ ) + vi.mocked(SetupModulesMap).mockReturnValue( +
Mock setup modules map
+ ) + vi.mocked(useRunHasStarted).mockReturnValue(false) + when(useUnmatchedModulesForProtocol) .calledWith(MOCK_ROBOT_NAME, MOCK_RUN_ID) - .mockReturnValue({ + .thenReturn({ missingModuleIds: [], remainingAttachedModules: [], }) - when(mockUseModuleCalibrationStatus) + when(useModuleCalibrationStatus) .calledWith(MOCK_ROBOT_NAME, MOCK_RUN_ID) - .mockReturnValue({ complete: true }) - when(mockUseIsFlex).calledWith(MOCK_ROBOT_NAME).mockReturnValue(false) - when(mockGetRequiredDeckConfig).mockReturnValue([]) - when(mockGetIsFixtureMismatch).mockReturnValue(false) + .thenReturn({ complete: true }) + when(useIsFlex).calledWith(MOCK_ROBOT_NAME).thenReturn(false) + vi.mocked(getRequiredDeckConfig).mockReturnValue([]) + vi.mocked(getIsFixtureMismatch).mockReturnValue(false) }) it('renders the list and map view buttons', () => { - const { getByRole } = render(props) - getByRole('button', { name: 'List View' }) - getByRole('button', { name: 'Map View' }) + render(props) + screen.getByRole('button', { name: 'List View' }) + screen.getByRole('button', { name: 'Map View' }) }) it('should render Proceed to labware setup CTA that is enabled', () => { - const { getByRole } = render(props) - const button = getByRole('button', { + render(props) + const button = screen.getByRole('button', { name: 'Proceed to labware position check', }) expect(button).toBeEnabled() }) it('should render a disabled Proceed to labware setup CTA if the protocol requests modules and they are not all attached to the robot', () => { - when(mockUseUnmatchedModulesForProtocol) + when(useUnmatchedModulesForProtocol) .calledWith(MOCK_ROBOT_NAME, MOCK_RUN_ID) - .mockReturnValue({ + .thenReturn({ missingModuleIds: ['foo'], remainingAttachedModules: [mockTemperatureModule], }) - const { getByRole } = render(props) - const button = getByRole('button', { + render(props) + const button = screen.getByRole('button', { name: 'Proceed to labware position check', }) expect(button).toBeDisabled() }) it('should render a disabled Proceed to labware setup CTA if the protocol requests modules they are not all calibrated', () => { - when(mockUseModuleCalibrationStatus) + when(useModuleCalibrationStatus) .calledWith(MOCK_ROBOT_NAME, MOCK_RUN_ID) - .mockReturnValue({ complete: false }) - const { getByRole } = render(props) - const button = getByRole('button', { + .thenReturn({ complete: false }) + render(props) + const button = screen.getByRole('button', { name: 'Proceed to labware position check', }) expect(button).toBeDisabled() }) it('should render the SetupModulesList component when clicking List View', () => { - const { getByRole, getByText } = render(props) - const button = getByRole('button', { name: 'List View' }) + render(props) + const button = screen.getByRole('button', { name: 'List View' }) fireEvent.click(button) - getByText('Mock setup modules list') + screen.getByText('Mock setup modules list') }) it('should render the SetupModulesList and SetupFixtureList component when clicking List View for Flex', () => { - when(mockUseIsFlex).calledWith(MOCK_ROBOT_NAME).mockReturnValue(true) - when(mockGetRequiredDeckConfig).mockReturnValue([ + when(useIsFlex).calledWith(MOCK_ROBOT_NAME).thenReturn(true) + vi.mocked(getRequiredDeckConfig).mockReturnValue([ { cutoutId: 'cutoutA1', cutoutFixtureId: 'trashBinAdapter', @@ -145,33 +127,33 @@ describe('SetupModuleAndDeck', () => { missingLabwareDisplayName: null, }, ]) - const { getByRole, getByText } = render(props) - const button = getByRole('button', { name: 'List View' }) + render(props) + const button = screen.getByRole('button', { name: 'List View' }) fireEvent.click(button) - getByText('Mock setup modules list') - getByText('Mock setup fixture list') + screen.getByText('Mock setup modules list') + screen.getByText('Mock setup fixture list') }) it('should not render the SetupFixtureList component when there are no required fixtures', () => { - when(mockUseIsFlex).calledWith(MOCK_ROBOT_NAME).mockReturnValue(true) - const { getByRole, getByText, queryByText } = render(props) - const button = getByRole('button', { name: 'List View' }) + when(useIsFlex).calledWith(MOCK_ROBOT_NAME).thenReturn(true) + render(props) + const button = screen.getByRole('button', { name: 'List View' }) fireEvent.click(button) - getByText('Mock setup modules list') - expect(queryByText('Mock setup fixture list')).toBeNull() + screen.getByText('Mock setup modules list') + expect(screen.queryByText('Mock setup fixture list')).toBeNull() }) it('should render the SetupModulesMap component when clicking Map View', () => { - const { getByRole, getByText } = render(props) - const button = getByRole('button', { name: 'Map View' }) + render(props) + const button = screen.getByRole('button', { name: 'Map View' }) fireEvent.click(button) - getByText('Mock setup modules map') + screen.getByText('Mock setup modules map') }) it('should render disabled button when deck config is not configured or there is a conflict', () => { - when(mockGetIsFixtureMismatch).mockReturnValue(true) - const { getByRole } = render(props) - const button = getByRole('button', { + vi.mocked(getIsFixtureMismatch).mockReturnValue(true) + render(props) + const button = screen.getByRole('button', { name: 'Proceed to labware position check', }) expect(button).toBeDisabled() diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesList.test.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesList.test.tsx index ff457d17f7e..c772a7acbab 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesList.test.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesList.test.tsx @@ -1,7 +1,8 @@ import * as React from 'react' -import { when, resetAllWhenMocks } from 'jest-when' +import { when } from 'vitest-when' import { fireEvent, screen, waitFor } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { describe, it, beforeEach, expect, vi } from 'vitest' +import { renderWithProviders } from '../../../../../__testing-utils__' import { STAGING_AREA_RIGHT_SLOT_FIXTURE } from '@opentrons/shared-data' import { i18n } from '../../../../../i18n' import { @@ -30,47 +31,15 @@ import { LocationConflictModal } from '../LocationConflictModal' import type { ModuleModel, ModuleType } from '@opentrons/shared-data' -jest.mock('@opentrons/react-api-client') -jest.mock('../../../hooks') -jest.mock('../LocationConflictModal') -jest.mock('../UnMatchedModuleWarning') -jest.mock('../../../../ModuleCard/ModuleSetupModal') -jest.mock('../../../../ModuleWizardFlows') -jest.mock('../MultipleModulesModal') -jest.mock('../../../../../resources/runs/hooks') -jest.mock('../../../../../redux/config') - -const mockUseIsFlex = useIsFlex as jest.MockedFunction -const mockUseModuleRenderInfoForProtocolById = useModuleRenderInfoForProtocolById as jest.MockedFunction< - typeof useModuleRenderInfoForProtocolById -> -const mockUnMatchedModuleWarning = UnMatchedModuleWarning as jest.MockedFunction< - typeof UnMatchedModuleWarning -> -const mockModuleSetupModal = ModuleSetupModal as jest.MockedFunction< - typeof ModuleSetupModal -> -const mockUseUnmatchedModulesForProtocol = useUnmatchedModulesForProtocol as jest.MockedFunction< - typeof useUnmatchedModulesForProtocol -> -const mockUseRunHasStarted = useRunHasStarted as jest.MockedFunction< - typeof useRunHasStarted -> -const mockMultipleModulesModal = MultipleModulesModal as jest.MockedFunction< - typeof MultipleModulesModal -> -const mockModuleWizardFlows = ModuleWizardFlows as jest.MockedFunction< - typeof ModuleWizardFlows -> -const mockUseRunCalibrationStatus = useRunCalibrationStatus as jest.MockedFunction< - typeof useRunCalibrationStatus -> -const mockUseChainLiveCommands = useChainLiveCommands as jest.MockedFunction< - typeof useChainLiveCommands -> -const mockLocationConflictModal = LocationConflictModal as jest.MockedFunction< - typeof LocationConflictModal -> +vi.mock('@opentrons/react-api-client') +vi.mock('../../../hooks') +vi.mock('../LocationConflictModal') +vi.mock('../UnMatchedModuleWarning') +vi.mock('../../../../ModuleCard/ModuleSetupModal') +vi.mock('../../../../ModuleWizardFlows') +vi.mock('../MultipleModulesModal') +vi.mock('../../../../../resources/runs/hooks') +vi.mock('../../../../../redux/config') const ROBOT_NAME = 'otie' const RUN_ID = '1' @@ -117,44 +86,41 @@ const render = (props: React.ComponentProps) => { describe('SetupModulesList', () => { let props: React.ComponentProps - let mockChainLiveCommands = jest.fn() + let mockChainLiveCommands = vi.fn() beforeEach(() => { props = { robotName: ROBOT_NAME, runId: RUN_ID, } - mockChainLiveCommands = jest.fn() + mockChainLiveCommands = vi.fn() mockChainLiveCommands.mockResolvedValue(null) - when(mockModuleSetupModal).mockReturnValue(
mockModuleSetupModal
) - when(mockUnMatchedModuleWarning).mockReturnValue( + vi.mocked(ModuleSetupModal).mockReturnValue(
mockModuleSetupModal
) + vi.mocked(UnMatchedModuleWarning).mockReturnValue(
mock unmatched module Banner
) - when(mockUseUnmatchedModulesForProtocol) + when(useUnmatchedModulesForProtocol) .calledWith(ROBOT_NAME, RUN_ID) - .mockReturnValue({ + .thenReturn({ missingModuleIds: [], remainingAttachedModules: [], }) - when(mockUseRunCalibrationStatus) - .calledWith(ROBOT_NAME, RUN_ID) - .mockReturnValue({ - complete: true, - }) - mockModuleWizardFlows.mockReturnValue(
mock ModuleWizardFlows
) - mockUseChainLiveCommands.mockReturnValue({ + when(useRunCalibrationStatus).calledWith(ROBOT_NAME, RUN_ID).thenReturn({ + complete: true, + }) + vi.mocked(ModuleWizardFlows).mockReturnValue( +
mock ModuleWizardFlows
+ ) + vi.mocked(useChainLiveCommands).mockReturnValue({ chainLiveCommands: mockChainLiveCommands, } as any) - mockLocationConflictModal.mockReturnValue( + vi.mocked(LocationConflictModal).mockReturnValue(
mock location conflict modal
) }) - afterEach(() => resetAllWhenMocks()) it('should render the list view headers', () => { - when(mockUseRunHasStarted).calledWith(RUN_ID).mockReturnValue(false) - when(mockUseModuleRenderInfoForProtocolById) - .calledWith(RUN_ID) - .mockReturnValue({}) + when(useRunHasStarted).calledWith(RUN_ID).thenReturn(false) + when(useModuleRenderInfoForProtocolById).calledWith(RUN_ID).thenReturn({}) render(props) screen.getByText('Module') screen.getByText('Location') @@ -162,7 +128,7 @@ describe('SetupModulesList', () => { }) it('should render a magnetic module that is connected', () => { - mockUseModuleRenderInfoForProtocolById.mockReturnValue({ + vi.mocked(useModuleRenderInfoForProtocolById).mockReturnValue({ [mockMagneticModule.moduleId]: { moduleId: mockMagneticModule.moduleId, x: MOCK_MAGNETIC_MODULE_COORDS[0], @@ -187,7 +153,7 @@ describe('SetupModulesList', () => { }) it('should render a magnetic module that is NOT connected', () => { - mockUseModuleRenderInfoForProtocolById.mockReturnValue({ + vi.mocked(useModuleRenderInfoForProtocolById).mockReturnValue({ [mockMagneticModule.moduleId]: { moduleId: mockMagneticModule.moduleId, x: MOCK_MAGNETIC_MODULE_COORDS[0], @@ -209,13 +175,13 @@ describe('SetupModulesList', () => { }) it('should render a thermocycler module that is connected, OT2', () => { - when(mockUseUnmatchedModulesForProtocol) + when(useUnmatchedModulesForProtocol) .calledWith(ROBOT_NAME, RUN_ID) - .mockReturnValue({ + .thenReturn({ missingModuleIds: [], remainingAttachedModules: [], }) - mockUseModuleRenderInfoForProtocolById.mockReturnValue({ + vi.mocked(useModuleRenderInfoForProtocolById).mockReturnValue({ [mockTCModule.moduleId]: { moduleId: mockTCModule.moduleId, x: MOCK_TC_COORDS[0], @@ -232,7 +198,7 @@ describe('SetupModulesList', () => { }, }, } as any) - mockUseIsFlex.mockReturnValue(false) + vi.mocked(useIsFlex).mockReturnValue(false) render(props) screen.getByText('Thermocycler Module') @@ -241,13 +207,13 @@ describe('SetupModulesList', () => { }) it('should render a thermocycler module that is connected but not calibrated, OT3', async () => { - when(mockUseUnmatchedModulesForProtocol) + when(useUnmatchedModulesForProtocol) .calledWith(ROBOT_NAME, RUN_ID) - .mockReturnValue({ + .thenReturn({ missingModuleIds: [], remainingAttachedModules: [], }) - mockUseModuleRenderInfoForProtocolById.mockReturnValue({ + vi.mocked(useModuleRenderInfoForProtocolById).mockReturnValue({ [mockTCModule.moduleId]: { moduleId: mockTCModule.moduleId, x: MOCK_TC_COORDS[0], @@ -261,7 +227,7 @@ describe('SetupModulesList', () => { attachedModuleMatch: mockThermocycler, }, } as any) - mockUseIsFlex.mockReturnValue(true) + vi.mocked(useIsFlex).mockReturnValue(true) render(props) screen.getByText('Thermocycler Module') @@ -273,19 +239,17 @@ describe('SetupModulesList', () => { }) it('should render disabled button when pipette and module are not calibrated', () => { - when(mockUseUnmatchedModulesForProtocol) + when(useUnmatchedModulesForProtocol) .calledWith(ROBOT_NAME, RUN_ID) - .mockReturnValue({ + .thenReturn({ missingModuleIds: [], remainingAttachedModules: [], }) - when(mockUseRunCalibrationStatus) - .calledWith(ROBOT_NAME, RUN_ID) - .mockReturnValue({ - complete: false, - reason: 'calibrate_pipette_failure_reason', - }) - mockUseModuleRenderInfoForProtocolById.mockReturnValue({ + when(useRunCalibrationStatus).calledWith(ROBOT_NAME, RUN_ID).thenReturn({ + complete: false, + reason: 'calibrate_pipette_failure_reason', + }) + vi.mocked(useModuleRenderInfoForProtocolById).mockReturnValue({ [mockTCModule.moduleId]: { moduleId: mockTCModule.moduleId, x: MOCK_TC_COORDS[0], @@ -299,20 +263,20 @@ describe('SetupModulesList', () => { attachedModuleMatch: mockThermocycler, }, } as any) - mockUseIsFlex.mockReturnValue(true) + vi.mocked(useIsFlex).mockReturnValue(true) render(props) expect(screen.getByRole('button', { name: 'Calibrate now' })).toBeDisabled() }) it('should render a thermocycler module that is connected, OT3', () => { - when(mockUseUnmatchedModulesForProtocol) + when(useUnmatchedModulesForProtocol) .calledWith(ROBOT_NAME, RUN_ID) - .mockReturnValue({ + .thenReturn({ missingModuleIds: [], remainingAttachedModules: [], }) - mockUseModuleRenderInfoForProtocolById.mockReturnValue({ + vi.mocked(useModuleRenderInfoForProtocolById).mockReturnValue({ [mockTCModule.moduleId]: { moduleId: mockTCModule.moduleId, x: MOCK_TC_COORDS[0], @@ -329,7 +293,7 @@ describe('SetupModulesList', () => { }, }, } as any) - mockUseIsFlex.mockReturnValue(true) + vi.mocked(useIsFlex).mockReturnValue(true) render(props) screen.getByText('Thermocycler Module') @@ -338,19 +302,19 @@ describe('SetupModulesList', () => { }) it('should render the MoaM component when Moam is attached', () => { - when(mockMultipleModulesModal).mockReturnValue(
mock Moam modal
) - when(mockUseUnmatchedModulesForProtocol) + vi.mocked(MultipleModulesModal).mockReturnValue(
mock Moam modal
) + when(useUnmatchedModulesForProtocol) .calledWith(ROBOT_NAME, RUN_ID) - .mockReturnValue({ + .thenReturn({ missingModuleIds: [], remainingAttachedModules: [], }) const dupModId = `${mockMagneticModule.moduleId}duplicate` const dupModPort = 10 const dupModHub = 2 - when(mockUseModuleRenderInfoForProtocolById) + when(useModuleRenderInfoForProtocolById) .calledWith(RUN_ID) - .mockReturnValue({ + .thenReturn({ [mockMagneticModule.moduleId]: { moduleId: mockMagneticModule.moduleId, x: MOCK_MAGNETIC_MODULE_COORDS[0], @@ -396,9 +360,9 @@ describe('SetupModulesList', () => { screen.getByText('mock Moam modal') }) it('should render the module unmatching banner', () => { - when(mockUseUnmatchedModulesForProtocol) + when(useUnmatchedModulesForProtocol) .calledWith(ROBOT_NAME, RUN_ID) - .mockReturnValue({ + .thenReturn({ missingModuleIds: ['moduleId'], remainingAttachedModules: [mockHeaterShaker], }) @@ -406,7 +370,7 @@ describe('SetupModulesList', () => { screen.getByText('mock unmatched module Banner') }) it('should render the heater shaker text when hs is attached', () => { - mockUseModuleRenderInfoForProtocolById.mockReturnValue({ + vi.mocked(useModuleRenderInfoForProtocolById).mockReturnValue({ [mockHeaterShaker.id]: { moduleId: mockHeaterShaker.id, x: MOCK_MAGNETIC_MODULE_COORDS[0], @@ -446,8 +410,8 @@ describe('SetupModulesList', () => { screen.getByText('mockModuleSetupModal') }) it('should render a magnetic block with a conflicted fixture', () => { - when(mockUseIsFlex).calledWith(ROBOT_NAME).mockReturnValue(true) - mockUseModuleRenderInfoForProtocolById.mockReturnValue({ + when(useIsFlex).calledWith(ROBOT_NAME).thenReturn(true) + vi.mocked(useModuleRenderInfoForProtocolById).mockReturnValue({ [mockMagneticBlock.id]: { moduleId: mockMagneticBlock.id, x: MOCK_MAGNETIC_MODULE_COORDS[0], diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/UnMatchedModuleWarning.test.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/UnMatchedModuleWarning.test.tsx index 51bcaee2757..2a16a69fb2f 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/UnMatchedModuleWarning.test.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/UnMatchedModuleWarning.test.tsx @@ -1,6 +1,9 @@ import * as React from 'react' import { fireEvent, screen } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { describe, it, expect } from 'vitest' +import '@testing-library/jest-dom/vitest' + +import { renderWithProviders } from '../../../../../__testing-utils__' import { i18n } from '../../../../../i18n' import { UnMatchedModuleWarning } from '../UnMatchedModuleWarning' @@ -12,15 +15,15 @@ const render = () => { describe('UnMatchedModuleWarning', () => { it('should render the correct title', () => { - const { getByText } = render() - getByText('Extra module attached') + render() + screen.getByText('Extra module attached') }) it('should render the correct body, clicking on exit button closes banner', () => { - const { getByText, getByTestId } = render() - getByText( + render() + screen.getByText( 'Check that the modules connected to this robot are of the right type and generation.' ) - const exit = getByTestId('Banner_close-button') + const exit = screen.getByTestId('Banner_close-button') fireEvent.click(exit) expect( screen.queryByText( diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/utils.test.ts b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/utils.test.ts index cfd9178347e..6a86b6daf55 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/utils.test.ts +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/utils.test.ts @@ -1,64 +1,79 @@ +import { describe, it, expect } from 'vitest' import { getFixtureImage, getModuleImage } from '../utils' describe('getModuleImage', () => { it('should render the magnetic module image when the model is a magnetic module gen 1', () => { const result = getModuleImage('magneticModuleV1') - expect(result).toEqual('magnetic_module_gen_2_transparent.png') + expect(result).toEqual( + '/app/src/assets/images/magnetic_module_gen_2_transparent.png' + ) }) it('should render the magnetic module image when the model is a magnetic module gen 2', () => { const result = getModuleImage('magneticModuleV2') - expect(result).toEqual('magnetic_module_gen_2_transparent.png') + expect(result).toEqual( + '/app/src/assets/images/magnetic_module_gen_2_transparent.png' + ) }) it('should render the temperature module image when the model is a temperature module gen 1', () => { const result = getModuleImage('temperatureModuleV1') - expect(result).toEqual('temp_deck_gen_2_transparent.png') + expect(result).toEqual( + '/app/src/assets/images/temp_deck_gen_2_transparent.png' + ) }) it('should render the temperature module image when the model is a temperature module gen 2', () => { const result = getModuleImage('temperatureModuleV2') - expect(result).toEqual('temp_deck_gen_2_transparent.png') + expect(result).toEqual( + '/app/src/assets/images/temp_deck_gen_2_transparent.png' + ) }) it('should render the heater-shaker module image when the model is a heater-shaker module gen 1', () => { const result = getModuleImage('heaterShakerModuleV1') - expect(result).toEqual('heater_shaker_module_transparent.png') + expect(result).toEqual( + '/app/src/assets/images/heater_shaker_module_transparent.png' + ) }) it('should render the thermocycler module image when the model is a thermocycler module gen 1', () => { const result = getModuleImage('thermocyclerModuleV1') - expect(result).toEqual('thermocycler_closed.png') + expect(result).toEqual('/app/src/assets/images/thermocycler_closed.png') }) it('should render the thermocycler module image when the model is a thermocycler module gen 2', () => { const result = getModuleImage('thermocyclerModuleV2') - expect(result).toEqual('thermocycler_gen_2_closed.png') + expect(result).toEqual( + '/app/src/assets/images/thermocycler_gen_2_closed.png' + ) }) it('should render the magnetic block v1 image when the module is magneticBlockV1', () => { const result = getModuleImage('magneticBlockV1') - expect(result).toEqual('magnetic_block_gen_1.png') + expect(result).toEqual('/app/src/assets/images/magnetic_block_gen_1.png') }) }) describe('getFixtureImage', () => { it('should render the staging area image', () => { const result = getFixtureImage('stagingAreaRightSlot') - expect(result).toEqual('staging_area_slot.png') + expect(result).toEqual('/app/src/assets/images/staging_area_slot.png') }) it('should render the waste chute image', () => { const result = getFixtureImage('wasteChuteRightAdapterNoCover') - expect(result).toEqual('waste_chute.png') + expect(result).toEqual('/app/src/assets/images/waste_chute.png') }) it('should render the waste chute staging area image', () => { const result = getFixtureImage( 'stagingAreaSlotWithWasteChuteRightAdapterCovered' ) - expect(result).toEqual('waste_chute_with_staging_area.png') + expect(result).toEqual( + '/app/src/assets/images/waste_chute_with_staging_area.png' + ) }) it('should render the trash bin image', () => { const result = getFixtureImage('trashBinAdapter') - expect(result).toEqual('flex_trash_bin.png') + expect(result).toEqual('/app/src/assets/images/flex_trash_bin.png') }) }) diff --git a/app/src/organisms/LabwarePositionCheck/__tests__/ExitConfirmation.test.tsx b/app/src/organisms/LabwarePositionCheck/__tests__/ExitConfirmation.test.tsx index 818c741b75d..409ef9d0efa 100644 --- a/app/src/organisms/LabwarePositionCheck/__tests__/ExitConfirmation.test.tsx +++ b/app/src/organisms/LabwarePositionCheck/__tests__/ExitConfirmation.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' -import { resetAllWhenMocks } from 'jest-when' -import { renderWithProviders } from '@opentrons/components' +import { fireEvent, screen } from '@testing-library/react' +import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest' import { ExitConfirmation } from '../ExitConfirmation' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' const render = (props: React.ComponentProps) => { @@ -16,41 +16,40 @@ describe('ExitConfirmation', () => { beforeEach(() => { props = { - onGoBack: jest.fn(), - onConfirmExit: jest.fn(), + onGoBack: vi.fn(), + onConfirmExit: vi.fn(), shouldUseMetalProbe: false, } }) afterEach(() => { - resetAllWhenMocks() - jest.restoreAllMocks() + vi.restoreAllMocks() }) it('should render correct copy', () => { - const { getByText, getByRole } = render(props) - getByText('Exit before completing Labware Position Check?') - getByText( + render(props) + screen.getByText('Exit before completing Labware Position Check?') + screen.getByText( 'If you exit now, all labware offsets will be discarded. This cannot be undone.' ) - getByRole('button', { name: 'Exit' }) - getByRole('button', { name: 'Go back' }) + screen.getByRole('button', { name: 'Exit' }) + screen.getByRole('button', { name: 'Go back' }) }) it('should invoke callback props when ctas are clicked', () => { - const { getByRole } = render(props) - fireEvent.click(getByRole('button', { name: 'Go back' })) + render(props) + fireEvent.click(screen.getByRole('button', { name: 'Go back' })) expect(props.onGoBack).toHaveBeenCalled() - fireEvent.click(getByRole('button', { name: 'Exit' })) + fireEvent.click(screen.getByRole('button', { name: 'Exit' })) expect(props.onConfirmExit).toHaveBeenCalled() }) it('should render correct copy for golden tip LPC', () => { - const { getByText, getByRole } = render({ + render({ ...props, shouldUseMetalProbe: true, }) - getByText('Remove the calibration probe before exiting') - getByText( + screen.getByText('Remove the calibration probe before exiting') + screen.getByText( 'If you exit now, all labware offsets will be discarded. This cannot be undone.' ) - getByRole('button', { name: 'Remove calibration probe' }) - getByRole('button', { name: 'Go back' }) + screen.getByRole('button', { name: 'Remove calibration probe' }) + screen.getByRole('button', { name: 'Go back' }) }) }) diff --git a/app/src/organisms/LabwarePositionCheck/__tests__/ResultsSummary.test.tsx b/app/src/organisms/LabwarePositionCheck/__tests__/ResultsSummary.test.tsx index 0a5a615d10b..d9aaa62f6b6 100644 --- a/app/src/organisms/LabwarePositionCheck/__tests__/ResultsSummary.test.tsx +++ b/app/src/organisms/LabwarePositionCheck/__tests__/ResultsSummary.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react' -import { resetAllWhenMocks } from 'jest-when' -import { fireEvent } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest' +import { fireEvent, screen } from '@testing-library/react' import { i18n } from '../../../i18n' +import { renderWithProviders } from '../../../__testing-utils__' import { getIsLabwareOffsetCodeSnippetsOn } from '../../../redux/config' import { ResultsSummary } from '../ResultsSummary' import { SECTIONS } from '../constants' @@ -13,11 +13,7 @@ import { mockWorkingOffsets, } from '../__fixtures__' -jest.mock('../../../redux/config') - -const mockGetIsLabwareOffsetCodeSnippetsOn = getIsLabwareOffsetCodeSnippetsOn as jest.MockedFunction< - typeof getIsLabwareOffsetCodeSnippetsOn -> +vi.mock('../../../redux/config') const render = (props: React.ComponentProps) => { return renderWithProviders(, { @@ -36,61 +32,60 @@ describe('ResultsSummary', () => { existingOffsets: mockExistingOffsets, isApplyingOffsets: false, isDeletingMaintenanceRun: false, - handleApplyOffsets: jest.fn(), + handleApplyOffsets: vi.fn(), } }) afterEach(() => { - resetAllWhenMocks() - jest.restoreAllMocks() + vi.restoreAllMocks() }) it('renders correct copy', () => { - const { getByText, getByRole } = render(props) - getByText('New labware offset data') - getByRole('button', { name: 'Apply offsets' }) - getByRole('link', { name: 'Need help?' }) - getByRole('columnheader', { name: 'location' }) - getByRole('columnheader', { name: 'labware' }) - getByRole('columnheader', { name: 'labware offset data' }) + render(props) + screen.getByText('New labware offset data') + screen.getByRole('button', { name: 'Apply offsets' }) + screen.getByRole('link', { name: 'Need help?' }) + screen.getByRole('columnheader', { name: 'location' }) + screen.getByRole('columnheader', { name: 'labware' }) + screen.getByRole('columnheader', { name: 'labware offset data' }) }) it('calls handle apply offsets function when button is clicked', () => { - const { getByRole } = render(props) - fireEvent.click(getByRole('button', { name: 'Apply offsets' })) + render(props) + fireEvent.click(screen.getByRole('button', { name: 'Apply offsets' })) expect(props.handleApplyOffsets).toHaveBeenCalled() }) it('does disables the CTA to apply offsets when offsets are already being applied', () => { props.isApplyingOffsets = true - const { getByRole } = render(props) - const button = getByRole('button', { name: 'Apply offsets' }) + render(props) + const button = screen.getByRole('button', { name: 'Apply offsets' }) expect(button).toBeDisabled() fireEvent.click(button) expect(props.handleApplyOffsets).not.toHaveBeenCalled() }) it('does disables the CTA to apply offsets when the maintenance run is being deleted', () => { props.isDeletingMaintenanceRun = true - const { getByRole } = render(props) - const button = getByRole('button', { name: 'Apply offsets' }) + render(props) + const button = screen.getByRole('button', { name: 'Apply offsets' }) expect(button).toBeDisabled() fireEvent.click(button) expect(props.handleApplyOffsets).not.toHaveBeenCalled() }) it('renders a row per offset to apply', () => { - const { getByRole, queryAllByRole } = render(props) + render(props) expect( - queryAllByRole('cell', { + screen.queryAllByRole('cell', { name: mockTipRackDefinition.metadata.displayName, }) ).toHaveLength(2) - getByRole('cell', { name: 'Slot 1' }) - getByRole('cell', { name: 'Slot 3' }) - getByRole('cell', { name: 'X 1.0 Y 1.0 Z 1.0' }) - getByRole('cell', { name: 'X 3.0 Y 3.0 Z 3.0' }) + screen.getByRole('cell', { name: 'Slot 1' }) + screen.getByRole('cell', { name: 'Slot 3' }) + screen.getByRole('cell', { name: 'X 1.0 Y 1.0 Z 1.0' }) + screen.getByRole('cell', { name: 'X 3.0 Y 3.0 Z 3.0' }) }) it('renders tabbed offset data with snippets when config option is selected', () => { - mockGetIsLabwareOffsetCodeSnippetsOn.mockReturnValue(true) - const { getByText } = render(props) - expect(getByText('Table View')).toBeTruthy() - expect(getByText('Jupyter Notebook')).toBeTruthy() - expect(getByText('Command Line Interface (SSH)')).toBeTruthy() + vi.mocked(getIsLabwareOffsetCodeSnippetsOn).mockReturnValue(true) + render(props) + expect(screen.getByText('Table View')).toBeTruthy() + expect(screen.getByText('Jupyter Notebook')).toBeTruthy() + expect(screen.getByText('Command Line Interface (SSH)')).toBeTruthy() }) }) diff --git a/app/src/organisms/LabwarePositionCheck/__tests__/TipConfirmation.test.tsx b/app/src/organisms/LabwarePositionCheck/__tests__/TipConfirmation.test.tsx index c90c3159ecf..8ff504af81c 100644 --- a/app/src/organisms/LabwarePositionCheck/__tests__/TipConfirmation.test.tsx +++ b/app/src/organisms/LabwarePositionCheck/__tests__/TipConfirmation.test.tsx @@ -1,9 +1,9 @@ import * as React from 'react' -import { resetAllWhenMocks } from 'jest-when' -import { fireEvent } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest' +import { fireEvent, screen } from '@testing-library/react' import { TipConfirmation } from '../TipConfirmation' import { i18n } from '../../../i18n' +import { renderWithProviders } from '../../../__testing-utils__' const render = (props: React.ComponentProps) => { return renderWithProviders(, { @@ -16,25 +16,24 @@ describe('TipConfirmation', () => { beforeEach(() => { props = { - invalidateTip: jest.fn(), - confirmTip: jest.fn(), + invalidateTip: vi.fn(), + confirmTip: vi.fn(), } }) afterEach(() => { - resetAllWhenMocks() - jest.restoreAllMocks() + vi.restoreAllMocks() }) it('should render correct copy', () => { - const { getByText, getByRole } = render(props) - getByText('Did pipette pick up tip successfully?') - getByRole('button', { name: 'Yes' }) - getByRole('button', { name: 'Try again' }) + render(props) + screen.getByText('Did pipette pick up tip successfully?') + screen.getByRole('button', { name: 'Yes' }) + screen.getByRole('button', { name: 'Try again' }) }) it('should invoke callback props when ctas are clicked', () => { - const { getByRole } = render(props) - fireEvent.click(getByRole('button', { name: 'Try again' })) + render(props) + fireEvent.click(screen.getByRole('button', { name: 'Try again' })) expect(props.invalidateTip).toHaveBeenCalled() - fireEvent.click(getByRole('button', { name: 'Yes' })) + fireEvent.click(screen.getByRole('button', { name: 'Yes' })) expect(props.confirmTip).toHaveBeenCalled() }) })