From 8611daf862eb900a70fb9fc30ae81713fe70d36d Mon Sep 17 00:00:00 2001 From: Brent Hagen Date: Thu, 29 Feb 2024 12:46:49 -0500 Subject: [PATCH] migrate organisms M -> O --- .../localization/en/top_navigation.json | 6 +- .../__tests__/AboutModuleSlideout.test.tsx | 163 +++++++------- .../ModuleCard/__tests__/Collapsible.test.tsx | 40 ++-- .../__tests__/ConfirmAttachmentModal.test.tsx | 45 ++-- .../ModuleCard/__tests__/ErrorInfo.test.tsx | 3 +- .../FirmwareUpdateFailedModal.test.tsx | 23 +- .../__tests__/HeaterShakerModuleData.test.tsx | 90 ++++---- .../__tests__/HeaterShakerSlideout.test.tsx | 47 ++-- .../__tests__/MagneticModuleData.test.tsx | 21 +- .../__tests__/MagneticModuleSlideout.test.tsx | 78 ++++--- .../ModuleCard/__tests__/ModuleCard.test.tsx | 179 +++++++-------- .../__tests__/ModuleOverflowMenu.test.tsx | 190 ++++++++-------- .../__tests__/ModuleSetupModal.test.tsx | 32 +-- .../__tests__/TemperatureModuleData.test.tsx | 41 ++-- .../TemperatureModuleSlideout.test.tsx | 53 +++-- .../__tests__/TestShakeSlideout.test.tsx | 106 ++++----- .../__tests__/ThermocyclerModuleData.test.tsx | 80 +++---- .../ThermocyclerModuleSlideout.test.tsx | 72 +++--- .../ModuleCard/__tests__/hooks.test.tsx | 209 ++++++++---------- .../ModuleCard/__tests__/utils.test.ts | 36 ++- .../Navigation/__tests__/Navigation.test.tsx | 75 ++----- .../__tests__/NavigationMenu.test.tsx | 44 ++-- .../RestartRobotConfirmationModal.test.tsx | 34 ++- app/src/organisms/Navigation/index.tsx | 21 +- .../AlternativeSecurityTypeModal.test.tsx | 33 +-- .../__tests__/ConnectingNetwork.test.tsx | 13 +- .../__tests__/DisplaySearchNetwork.test.tsx | 11 +- .../__tests__/DisplayWifiList.test.tsx | 56 ++--- .../__tests__/FailedToConnect.test.tsx | 36 +-- .../SelectAuthenticationType.test.tsx | 55 ++--- .../__tests__/SetWifiCred.test.tsx | 42 ++-- .../__tests__/SetWifiSsid.test.tsx | 32 +-- .../__tests__/WifiConnectionDetails.test.tsx | 46 ++-- .../__tests__/ConfirmRobotName.test.tsx | 28 +-- .../ProtocolDetailsSkeleton.test.tsx | 16 +- .../__tests__/ProtocolSetupSkeleton.test.tsx | 12 +- .../__tests__/EmptyRecentRun.test.tsx | 17 +- .../__tests__/RecentRunProtocolCard.test.tsx | 136 +++++------- .../RecentRunProtocolCarousel.test.tsx | 26 +-- .../__tests__/useHardwareStatusText.test.tsx | 10 +- .../__tests__/CancelingRunModal.test.tsx | 11 +- .../__tests__/ConfirmCancelRunModal.test.tsx | 126 +++++------ .../CurrentRunningProtocolCommand.test.tsx | 39 ++-- .../__tests__/RunFailedModal.test.tsx | 47 ++-- .../RunningProtocolCommandList.test.tsx | 33 +-- .../RunningProtocolSkeleton.test.tsx | 17 +- .../__tests__/OpenDoorAlertModal.test.tsx | 11 +- shared-data/protocol/fixtures/6/index.tsx | 4 +- 48 files changed, 1215 insertions(+), 1330 deletions(-) diff --git a/app/src/assets/localization/en/top_navigation.json b/app/src/assets/localization/en/top_navigation.json index 2ce1d05b3bd..4919d42f599 100644 --- a/app/src/assets/localization/en/top_navigation.json +++ b/app/src/assets/localization/en/top_navigation.json @@ -3,7 +3,7 @@ "calibrate_deck_to_proceed": "Calibrate your deck to proceed", "deck_setup": "Deck Setup", "devices": "Devices", - "instruments": "instruments", + "instruments": "Instruments", "labware": "Labware", "modules": "modules", "pipettes_not_calibrated": "Please calibrate all pipettes specified in loaded protocol to proceed", @@ -11,8 +11,8 @@ "please_connect_to_a_robot": "Please connect to a robot to proceed", "please_load_a_protocol": "Please load a protocol to proceed", "protocol_runs": "Protocol Runs", - "protocols": "Protocols", + "protocols": "All Protocols", "robot_settings": "Robot Settings", "run": "run", - "settings": "settings" + "settings": "Settings" } diff --git a/app/src/organisms/ModuleCard/__tests__/AboutModuleSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/AboutModuleSlideout.test.tsx index c52a4234ae7..66ac7ccd016 100644 --- a/app/src/organisms/ModuleCard/__tests__/AboutModuleSlideout.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/AboutModuleSlideout.test.tsx @@ -1,13 +1,15 @@ import * as React from 'react' -import { renderWithProviders } from '@opentrons/components' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' + import { RUN_STATUS_IDLE, RUN_STATUS_RUNNING, RUN_STATUS_FINISHING, } from '@opentrons/api-client' + +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' -import { useCurrentRunStatus } from '../../RunTimeControl/hooks' import { mockMagneticModule, mockMagneticModuleGen2, @@ -15,13 +17,10 @@ import { mockTemperatureModuleGen2, mockThermocycler, } from '../../../redux/modules/__fixtures__' +import { useCurrentRunStatus } from '../../RunTimeControl/hooks' import { AboutModuleSlideout } from '../AboutModuleSlideout' -jest.mock('../../RunTimeControl/hooks') - -const mockUseCurrentRunStatus = useCurrentRunStatus as jest.MockedFunction< - typeof useCurrentRunStatus -> +vi.mock('../../RunTimeControl/hooks') const render = (props: React.ComponentProps) => { return renderWithProviders(, { @@ -35,119 +34,119 @@ describe('AboutModuleSlideout', () => { props = { module: mockMagneticModule, isExpanded: true, - onCloseClick: jest.fn(), - firmwareUpdateClick: jest.fn(), + onCloseClick: vi.fn(), + firmwareUpdateClick: vi.fn(), } - mockUseCurrentRunStatus.mockReturnValue(RUN_STATUS_IDLE) + vi.mocked(useCurrentRunStatus).mockReturnValue(RUN_STATUS_IDLE) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('renders correct info when module is a magnetic module GEN1 and exit button works correctly', () => { - const { getByText, getByRole } = render(props) - - getByText('About Magnetic Module GEN1') - getByText('def456') - getByText('SERIAL NUMBER') - getByText('CURRENT VERSION') - getByText('v2.0.0') - const button = getByRole('button', { name: /exit/i }) + render(props) + + screen.getByText('About Magnetic Module GEN1') + screen.getByText('def456') + screen.getByText('SERIAL NUMBER') + screen.getByText('CURRENT VERSION') + screen.getByText('v2.0.0') + const button = screen.getByRole('button', { name: /exit/i }) fireEvent.click(button) expect(props.onCloseClick).toHaveBeenCalled() }) it('renders no banner when run is running', () => { - mockUseCurrentRunStatus.mockReturnValue(RUN_STATUS_RUNNING) - const { getByText } = render(props) - - getByText('About Magnetic Module GEN1') - getByText('def456') - getByText('SERIAL NUMBER') - getByText('CURRENT VERSION') - getByText('v2.0.0') + vi.mocked(useCurrentRunStatus).mockReturnValue(RUN_STATUS_RUNNING) + render(props) + + screen.getByText('About Magnetic Module GEN1') + screen.getByText('def456') + screen.getByText('SERIAL NUMBER') + screen.getByText('CURRENT VERSION') + screen.getByText('v2.0.0') }) it('renders no banner when run is finishing', () => { - mockUseCurrentRunStatus.mockReturnValue(RUN_STATUS_FINISHING) - const { getByText } = render(props) - - getByText('About Magnetic Module GEN1') - getByText('def456') - getByText('SERIAL NUMBER') - getByText('CURRENT VERSION') - getByText('v2.0.0') + vi.mocked(useCurrentRunStatus).mockReturnValue(RUN_STATUS_FINISHING) + render(props) + + screen.getByText('About Magnetic Module GEN1') + screen.getByText('def456') + screen.getByText('SERIAL NUMBER') + screen.getByText('CURRENT VERSION') + screen.getByText('v2.0.0') }) it('renders correct info when module is a magnetic module GEN2', () => { props = { module: mockMagneticModuleGen2, isExpanded: true, - onCloseClick: jest.fn(), - firmwareUpdateClick: jest.fn(), + onCloseClick: vi.fn(), + firmwareUpdateClick: vi.fn(), } - const { getByText } = render(props) + render(props) - getByText('About Magnetic Module GEN2') - getByText('def456') - getByText('SERIAL NUMBER') - getByText('CURRENT VERSION') - getByText('v2.0.0') + screen.getByText('About Magnetic Module GEN2') + screen.getByText('def456') + screen.getByText('SERIAL NUMBER') + screen.getByText('CURRENT VERSION') + screen.getByText('v2.0.0') }) it('renders correct info when module is a temperature module GEN2', () => { props = { module: mockTemperatureModuleGen2, isExpanded: true, - onCloseClick: jest.fn(), - firmwareUpdateClick: jest.fn(), + onCloseClick: vi.fn(), + firmwareUpdateClick: vi.fn(), } - const { getByText } = render(props) + render(props) - getByText('About Temperature Module GEN2') - getByText('abc123') - getByText('SERIAL NUMBER') - getByText('CURRENT VERSION') - getByText('v2.0.0') + screen.getByText('About Temperature Module GEN2') + screen.getByText('abc123') + screen.getByText('SERIAL NUMBER') + screen.getByText('CURRENT VERSION') + screen.getByText('v2.0.0') }) it('renders correct info when module is a temperature module GEN1', () => { props = { module: mockTemperatureModule, isExpanded: true, - onCloseClick: jest.fn(), - firmwareUpdateClick: jest.fn(), + onCloseClick: vi.fn(), + firmwareUpdateClick: vi.fn(), } - const { getByText } = render(props) + render(props) - getByText('About Temperature Module GEN1') - getByText('abc123') - getByText('SERIAL NUMBER') - getByText('CURRENT VERSION') - getByText('v2.0.0') + screen.getByText('About Temperature Module GEN1') + screen.getByText('abc123') + screen.getByText('SERIAL NUMBER') + screen.getByText('CURRENT VERSION') + screen.getByText('v2.0.0') }) it('renders correct info when module is a thermocycler module with an update available', () => { props = { module: mockThermocycler, isExpanded: true, - onCloseClick: jest.fn(), - firmwareUpdateClick: jest.fn(), + onCloseClick: vi.fn(), + firmwareUpdateClick: vi.fn(), } - const { getByText, getByRole, getByLabelText } = render(props) - - getByText('About Thermocycler Module GEN1') - getByText('ghi789') - getByText('SERIAL NUMBER') - getByText('CURRENT VERSION') - getByText('v2.0.0') - getByText('Firmware update available.') - const viewUpdate = getByRole('button', { name: 'Update now' }) + render(props) + + screen.getByText('About Thermocycler Module GEN1') + screen.getByText('ghi789') + screen.getByText('SERIAL NUMBER') + screen.getByText('CURRENT VERSION') + screen.getByText('v2.0.0') + screen.getByText('Firmware update available.') + const viewUpdate = screen.getByRole('button', { name: 'Update now' }) fireEvent.click(viewUpdate) expect(props.firmwareUpdateClick).toHaveBeenCalled() expect(props.onCloseClick).toHaveBeenCalled() expect(viewUpdate).toBeEnabled() - const exit = getByLabelText('close_icon') + const exit = screen.getByLabelText('close_icon') fireEvent.click(exit) expect(exit).not.toBeVisible() }) @@ -156,17 +155,17 @@ describe('AboutModuleSlideout', () => { props = { module: mockTemperatureModule, isExpanded: true, - onCloseClick: jest.fn(), - firmwareUpdateClick: jest.fn(), + onCloseClick: vi.fn(), + firmwareUpdateClick: vi.fn(), } - const { getByText, getByRole } = render(props) - - getByText('About Temperature Module GEN1') - getByText('abc123') - getByText('SERIAL NUMBER') - getByText('CURRENT VERSION') - getByText('v2.0.0') - const button = getByRole('button', { name: 'close' }) + render(props) + + screen.getByText('About Temperature Module GEN1') + screen.getByText('abc123') + screen.getByText('SERIAL NUMBER') + screen.getByText('CURRENT VERSION') + screen.getByText('v2.0.0') + const button = screen.getByRole('button', { name: 'close' }) fireEvent.click(button) expect(props.onCloseClick).toHaveBeenCalled() }) diff --git a/app/src/organisms/ModuleCard/__tests__/Collapsible.test.tsx b/app/src/organisms/ModuleCard/__tests__/Collapsible.test.tsx index ae2486367e5..5d6fcbdffba 100644 --- a/app/src/organisms/ModuleCard/__tests__/Collapsible.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/Collapsible.test.tsx @@ -1,6 +1,8 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { fireEvent, screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' + +import { renderWithProviders } from '../../../__testing-utils__' import { Collapsible } from '../Collapsible' const render = (props: React.ComponentProps) => { @@ -13,61 +15,57 @@ describe('Collapsible', () => { props = { expanded: false, title: 'title', - toggleExpanded: jest.fn(), + toggleExpanded: vi.fn(), children:
children
, } }) afterEach(() => { - jest.resetAllMocks() - }) - - afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('renders collapsible with default icons and not expanded', () => { - const { getByRole, getByText } = render(props) - fireEvent.click(getByRole('heading', { name: 'title' })) + render(props) + fireEvent.click(screen.getByRole('heading', { name: 'title' })) expect(props.toggleExpanded).toHaveBeenCalled() - getByText('children') + screen.getByText('children') }) it('renders collapsible with default icon and expanded', () => { props = { expanded: true, title: 'title', - toggleExpanded: jest.fn(), + toggleExpanded: vi.fn(), children:
children
, } - const { getByRole } = render(props) - fireEvent.click(getByRole('heading', { name: 'title' })) + render(props) + fireEvent.click(screen.getByRole('heading', { name: 'title' })) expect(props.toggleExpanded).toHaveBeenCalled() }) it('renders collapsible with different icon and not expanded', () => { props = { expanded: true, title: 'title', - toggleExpanded: jest.fn(), + toggleExpanded: vi.fn(), children:
children
, expandedIcon: 'chevron-down', collapsedIcon: 'chevron-up', } - const { getByRole, getByText } = render(props) - fireEvent.click(getByRole('heading', { name: 'title' })) + render(props) + fireEvent.click(screen.getByRole('heading', { name: 'title' })) expect(props.toggleExpanded).toHaveBeenCalled() - getByText('children') + screen.getByText('children') }) it('renders collapsible with different icon and expanded', () => { props = { expanded: true, title: 'title', - toggleExpanded: jest.fn(), + toggleExpanded: vi.fn(), children:
children
, expandedIcon: 'chevron-down', collapsedIcon: 'chevron-up', } - const { getByRole } = render(props) - fireEvent.click(getByRole('heading', { name: 'title' })) + render(props) + fireEvent.click(screen.getByRole('heading', { name: 'title' })) expect(props.toggleExpanded).toHaveBeenCalled() }) }) diff --git a/app/src/organisms/ModuleCard/__tests__/ConfirmAttachmentModal.test.tsx b/app/src/organisms/ModuleCard/__tests__/ConfirmAttachmentModal.test.tsx index 734d93bbc0b..47b16c62383 100644 --- a/app/src/organisms/ModuleCard/__tests__/ConfirmAttachmentModal.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/ConfirmAttachmentModal.test.tsx @@ -1,6 +1,7 @@ import * as React from 'react' -import { renderWithProviders } from '@opentrons/components' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { ConfirmAttachmentModal } from '../ConfirmAttachmentModal' @@ -15,50 +16,52 @@ describe('ConfirmAttachmentBanner', () => { beforeEach(() => { props = { - onConfirmClick: jest.fn(), + onConfirmClick: vi.fn(), isProceedToRunModal: false, - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), } }) afterEach(() => { - jest.restoreAllMocks() + vi.restoreAllMocks() }) it('renders the correct modal info when accessed through set shake slideout', () => { - const { getByText, getByRole } = render(props) - getByText('Confirm Heater-Shaker Module attachment') - getByText( + render(props) + screen.getByText('Confirm Heater-Shaker Module attachment') + screen.getByText( 'Module should have both anchors fully extended for a firm attachment to the deck.' ) - getByText('The thermal adapter should be attached to the module.') - getByText('Don’t show me again') - getByText('cancel') - getByText('Confirm attachment') - const confirmBtn = getByRole('button', { name: 'Confirm attachment' }) + screen.getByText('The thermal adapter should be attached to the module.') + screen.getByText('Don’t show me again') + screen.getByText('cancel') + screen.getByText('Confirm attachment') + const confirmBtn = screen.getByRole('button', { + name: 'Confirm attachment', + }) fireEvent.click(confirmBtn) expect(props.onConfirmClick).toHaveBeenCalled() - const cancelbtn = getByRole('button', { name: 'cancel' }) + const cancelbtn = screen.getByRole('button', { name: 'cancel' }) fireEvent.click(cancelbtn) expect(props.onCloseClick).toHaveBeenCalled() }) it('renders the correct modal info when accessed through proceed to run CTA and clicks proceed to run button', () => { props = { - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), isProceedToRunModal: true, - onConfirmClick: jest.fn(), + onConfirmClick: vi.fn(), } - const { getByText, getByRole } = render(props) + render(props) - getByText( + screen.getByText( 'Before the run begins, module should have both anchors fully extended for a firm attachment to the deck.' ) - getByText('The thermal adapter should be attached to the module.') - const btn = getByRole('button', { name: 'Proceed to run' }) + screen.getByText('The thermal adapter should be attached to the module.') + const btn = screen.getByRole('button', { name: 'Proceed to run' }) fireEvent.click(btn) expect(props.onConfirmClick).toHaveBeenCalled() - const cancelbtn = getByRole('button', { name: 'cancel' }) + const cancelbtn = screen.getByRole('button', { name: 'cancel' }) fireEvent.click(cancelbtn) expect(props.onCloseClick).toHaveBeenCalled() }) diff --git a/app/src/organisms/ModuleCard/__tests__/ErrorInfo.test.tsx b/app/src/organisms/ModuleCard/__tests__/ErrorInfo.test.tsx index bbc98a96098..c578307ae8a 100644 --- a/app/src/organisms/ModuleCard/__tests__/ErrorInfo.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/ErrorInfo.test.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import { fireEvent, screen } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { beforeEach, describe, expect, it } from 'vitest' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { ErrorInfo } from '../ErrorInfo' import { diff --git a/app/src/organisms/ModuleCard/__tests__/FirmwareUpdateFailedModal.test.tsx b/app/src/organisms/ModuleCard/__tests__/FirmwareUpdateFailedModal.test.tsx index 84744169231..f47e2331350 100644 --- a/app/src/organisms/ModuleCard/__tests__/FirmwareUpdateFailedModal.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/FirmwareUpdateFailedModal.test.tsx @@ -1,9 +1,10 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { fireEvent, screen } from '@testing-library/react' +import { beforeEach, describe, expect, it, vi } from 'vitest' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' -import { FirmwareUpdateFailedModal } from '../FirmwareUpdateFailedModal' import { mockTemperatureModule } from '../../../redux/modules/__fixtures__' +import { FirmwareUpdateFailedModal } from '../FirmwareUpdateFailedModal' const render = ( props: React.ComponentProps @@ -17,27 +18,27 @@ describe('FirmwareUpdateFailedModal', () => { let props: React.ComponentProps beforeEach(() => { props = { - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), module: mockTemperatureModule, errorMessage: 'error message', } }) it('should render the correct header and body', () => { - const { getByText } = render(props) - getByText('Failed to update module firmware') - getByText( + render(props) + screen.getByText('Failed to update module firmware') + screen.getByText( 'An error occurred while updating your Temperature Module GEN1. Please try again.' ) - getByText('error message') + screen.getByText('error message') }) it('should call onCloseClick when the close button is pressed', () => { - const { getByRole, getByLabelText } = 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() - const closeIcon = getByLabelText('information') + const closeIcon = screen.getByLabelText('information') fireEvent.click(closeIcon) expect(props.onCloseClick).toHaveBeenCalled() }) diff --git a/app/src/organisms/ModuleCard/__tests__/HeaterShakerModuleData.test.tsx b/app/src/organisms/ModuleCard/__tests__/HeaterShakerModuleData.test.tsx index 8e322fe4315..54ca6a319ac 100644 --- a/app/src/organisms/ModuleCard/__tests__/HeaterShakerModuleData.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/HeaterShakerModuleData.test.tsx @@ -1,12 +1,12 @@ import * as React from 'react' -import { renderWithProviders } from '@opentrons/components' +import { screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { StatusLabel } from '../../../atoms/StatusLabel' import { HeaterShakerModuleData } from '../HeaterShakerModuleData' -jest.mock('../../../atoms/StatusLabel') - -const mockStatusLabel = StatusLabel as jest.MockedFunction +vi.mock('../../../atoms/StatusLabel') const render = (props: React.ComponentProps) => { return renderWithProviders(, { @@ -30,15 +30,15 @@ describe('HeaterShakerModuleData', () => { status: 'idle', }, } - mockStatusLabel.mockReturnValue(
Mock StatusLabel
) + vi.mocked(StatusLabel).mockReturnValue(
Mock StatusLabel
) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('renders an idle status', () => { - const { getByText } = render(props) - expect(getByText('Mock StatusLabel')).toHaveStyle( + render(props) + expect(screen.getByText('Mock StatusLabel')).toHaveStyle( 'backgroundColor: COLORS.grey30' ) }) @@ -57,8 +57,8 @@ describe('HeaterShakerModuleData', () => { status: 'idle', }, } - const { getByText } = render(props) - expect(getByText('Mock StatusLabel')).toHaveStyle( + render(props) + expect(screen.getByText('Mock StatusLabel')).toHaveStyle( 'backgroundColor: C_SKY_BLUE' ) }) @@ -77,8 +77,8 @@ describe('HeaterShakerModuleData', () => { status: 'idle', }, } - const { getByText } = render(props) - expect(getByText('Mock StatusLabel')).toHaveStyle( + render(props) + expect(screen.getByText('Mock StatusLabel')).toHaveStyle( 'backgroundColor: COLORS.blue50' ) }) @@ -97,10 +97,10 @@ describe('HeaterShakerModuleData', () => { status: 'idle', }, } - const { getByText } = render(props) - getByText('Target: 200 rpm') - getByText('Current: 200 rpm') - expect(getByText('Mock StatusLabel')).toHaveStyle( + render(props) + screen.getByText('Target: 200 rpm') + screen.getByText('Current: 200 rpm') + expect(screen.getByText('Mock StatusLabel')).toHaveStyle( 'backgroundColor: COLORS.blue50' ) }) @@ -119,10 +119,10 @@ describe('HeaterShakerModuleData', () => { status: 'idle', }, } - const { getByText } = render(props) - getByText('Target: N/A') - getByText('Current: 0 rpm') - expect(getByText('Mock StatusLabel')).toHaveStyle( + render(props) + screen.getByText('Target: N/A') + screen.getByText('Current: 0 rpm') + expect(screen.getByText('Mock StatusLabel')).toHaveStyle( 'backgroundColor: COLORS.grey30' ) }) @@ -141,10 +141,10 @@ describe('HeaterShakerModuleData', () => { status: 'idle', }, } - const { getByText } = render(props) - getByText('Target: 200 rpm') - getByText('Current: 200 rpm') - expect(getByText('Mock StatusLabel')).toHaveStyle( + render(props) + screen.getByText('Target: 200 rpm') + screen.getByText('Current: 200 rpm') + expect(screen.getByText('Mock StatusLabel')).toHaveStyle( 'backgroundColor: COLORS.yellow20' ) }) @@ -163,10 +163,10 @@ describe('HeaterShakerModuleData', () => { status: 'idle', }, } - const { getByText } = render(props) - getByText('Target: N/A') - getByText('Current: 0 rpm') - expect(getByText('Mock StatusLabel')).toHaveStyle( + render(props) + screen.getByText('Target: N/A') + screen.getByText('Current: 0 rpm') + expect(screen.getByText('Mock StatusLabel')).toHaveStyle( 'backgroundColor: COLORS.grey30' ) }) @@ -185,8 +185,8 @@ describe('HeaterShakerModuleData', () => { status: 'idle', }, } - const { getByText } = render(props) - expect(getByText('Mock StatusLabel')).toHaveStyle( + render(props) + expect(screen.getByText('Mock StatusLabel')).toHaveStyle( 'backgroundColor: COLORS.blue50' ) }) @@ -205,8 +205,8 @@ describe('HeaterShakerModuleData', () => { status: 'idle', }, } - const { getByText } = render(props) - getByText('open') + render(props) + screen.getByText('open') }) it('renders a correct text when latch is opening', () => { @@ -223,8 +223,8 @@ describe('HeaterShakerModuleData', () => { status: 'idle', }, } - const { getByText } = render(props) - getByText('open') + render(props) + screen.getByText('open') }) it('renders a correct text when latch is unknown', () => { @@ -241,8 +241,8 @@ describe('HeaterShakerModuleData', () => { status: 'idle', }, } - const { getByText } = render(props) - getByText('open') + render(props) + screen.getByText('open') }) it('renders a correct text when latch is closing and is not shaking', () => { @@ -259,8 +259,8 @@ describe('HeaterShakerModuleData', () => { status: 'idle', }, } - const { getByText } = render(props) - getByText('Closed') + render(props) + screen.getByText('Closed') }) it('renders a correct text when latch is closing and is shaking', () => { @@ -277,15 +277,15 @@ describe('HeaterShakerModuleData', () => { status: 'idle', }, } - const { getByText, getByTestId } = render(props) - getByText('Closed and Locked') - getByTestId('HeaterShakerModuleData_latch_lock') + render(props) + screen.getByText('Closed and Locked') + screen.getByTestId('HeaterShakerModuleData_latch_lock') }) it('renders correct information when status is idle', () => { - const { getByText } = render(props) - getByText('Target: N/A') - getByText('Labware Latch') - getByText(/Open/i) + render(props) + screen.getByText('Target: N/A') + screen.getByText('Labware Latch') + screen.getByText(/Open/i) }) }) diff --git a/app/src/organisms/ModuleCard/__tests__/HeaterShakerSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/HeaterShakerSlideout.test.tsx index 0f9f42632f1..7148fd3f645 100644 --- a/app/src/organisms/ModuleCard/__tests__/HeaterShakerSlideout.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/HeaterShakerSlideout.test.tsx @@ -1,16 +1,15 @@ import * as React from 'react' -import { renderWithProviders } from '@opentrons/components' +import { fireEvent, screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' + import { useCreateLiveCommandMutation } from '@opentrons/react-api-client' -import { fireEvent } from '@testing-library/react' + +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { mockHeaterShaker } from '../../../redux/modules/__fixtures__' import { HeaterShakerSlideout } from '../HeaterShakerSlideout' -jest.mock('@opentrons/react-api-client') - -const mockUseLiveCommandMutation = useCreateLiveCommandMutation as jest.MockedFunction< - typeof useCreateLiveCommandMutation -> +vi.mock('@opentrons/react-api-client') const render = (props: React.ComponentProps) => { return renderWithProviders(, { @@ -20,44 +19,44 @@ const render = (props: React.ComponentProps) => { describe('HeaterShakerSlideout', () => { let props: React.ComponentProps - let mockCreateLiveCommand = jest.fn() + let mockCreateLiveCommand = vi.fn() beforeEach(() => { - mockCreateLiveCommand = jest.fn() + mockCreateLiveCommand = vi.fn() mockCreateLiveCommand.mockResolvedValue(null) - mockUseLiveCommandMutation.mockReturnValue({ + vi.mocked(useCreateLiveCommandMutation).mockReturnValue({ createLiveCommand: mockCreateLiveCommand, } as any) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('renders correct title and body for heatershaker set temperature', () => { props = { module: mockHeaterShaker, isExpanded: true, - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), } - const { getByText } = render(props) + render(props) - getByText('Set Temperature for Heater-Shaker Module GEN1') - getByText( + screen.getByText('Set Temperature for Heater-Shaker Module GEN1') + screen.getByText( 'Set target temperature. This module actively heats but cools passively to room temperature.' ) - getByText('Confirm') + screen.getByText('Confirm') }) it('renders the button and it is not clickable until there is something in form field for set temp', () => { props = { module: mockHeaterShaker, isExpanded: true, - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), } - const { getByRole, getByTestId } = render(props) - const button = getByRole('button', { name: 'Confirm' }) - const input = getByTestId('heaterShakerModuleV1_setTemp') + render(props) + const button = screen.getByRole('button', { name: 'Confirm' }) + const input = screen.getByTestId('heaterShakerModuleV1_setTemp') fireEvent.change(input, { target: { value: '40' } }) expect(button).toBeEnabled() fireEvent.click(button) @@ -78,11 +77,11 @@ describe('HeaterShakerSlideout', () => { props = { module: mockHeaterShaker, isExpanded: true, - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), } - const { getByLabelText, getByTestId } = render(props) - const button = getByLabelText('exit') - const input = getByTestId('heaterShakerModuleV1_setTemp') + render(props) + const button = screen.getByLabelText('exit') + const input = screen.getByTestId('heaterShakerModuleV1_setTemp') fireEvent.change(input, { target: { value: '40' } }) fireEvent.click(button) diff --git a/app/src/organisms/ModuleCard/__tests__/MagneticModuleData.test.tsx b/app/src/organisms/ModuleCard/__tests__/MagneticModuleData.test.tsx index f5a20fb9491..2cbcc154510 100644 --- a/app/src/organisms/ModuleCard/__tests__/MagneticModuleData.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/MagneticModuleData.test.tsx @@ -1,15 +1,14 @@ import * as React from 'react' +import { screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, it, vi } from 'vitest' -import { renderWithProviders } from '@opentrons/components' - +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { StatusLabel } from '../../../atoms/StatusLabel' import { MagneticModuleData } from '../MagneticModuleData' import { mockMagneticModule } from '../../../redux/modules/__fixtures__' -jest.mock('../../../atoms/StatusLabel') - -const mockStatusLabel = StatusLabel as jest.MockedFunction +vi.mock('../../../atoms/StatusLabel') const render = (props: React.ComponentProps) => { return renderWithProviders(, { @@ -25,21 +24,21 @@ describe('MagneticModuleData', () => { moduleModel: mockMagneticModule.moduleModel, moduleStatus: mockMagneticModule.data.status, } - mockStatusLabel.mockReturnValue(
Mock StatusLabel
) + vi.mocked(StatusLabel).mockReturnValue(
Mock StatusLabel
) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('renders a status', () => { - const { getByText } = render(props) + render(props) - getByText('Mock StatusLabel') + screen.getByText('Mock StatusLabel') }) it('renders magnet height data', () => { - const { getByText } = render(props) + render(props) - getByText(`Height: ${props.moduleHeight}`) + screen.getByText(`Height: ${props.moduleHeight}`) }) }) diff --git a/app/src/organisms/ModuleCard/__tests__/MagneticModuleSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/MagneticModuleSlideout.test.tsx index 8a1e478e088..fb3156d8c77 100644 --- a/app/src/organisms/ModuleCard/__tests__/MagneticModuleSlideout.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/MagneticModuleSlideout.test.tsx @@ -1,6 +1,8 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { fireEvent, screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' + +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { useCreateLiveCommandMutation } from '@opentrons/react-api-client' import { MagneticModuleSlideout } from '../MagneticModuleSlideout' @@ -10,11 +12,7 @@ import { mockMagneticModuleGen2, } from '../../../redux/modules/__fixtures__' -jest.mock('@opentrons/react-api-client') - -const mockUseLiveCommandMutation = useCreateLiveCommandMutation as jest.MockedFunction< - typeof useCreateLiveCommandMutation -> +vi.mock('@opentrons/react-api-client') const render = (props: React.ComponentProps) => { return renderWithProviders(, { @@ -23,68 +21,68 @@ const render = (props: React.ComponentProps) => { } describe('MagneticModuleSlideout', () => { let props: React.ComponentProps - let mockCreateLiveCommand = jest.fn() + let mockCreateLiveCommand = vi.fn() beforeEach(() => { - mockCreateLiveCommand = jest.fn() + mockCreateLiveCommand = vi.fn() mockCreateLiveCommand.mockResolvedValue(null) props = { module: mockMagneticModule, isExpanded: true, - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), } - mockUseLiveCommandMutation.mockReturnValue({ + vi.mocked(useCreateLiveCommandMutation).mockReturnValue({ createLiveCommand: mockCreateLiveCommand, } as any) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('renders correct title and body for a gen1 magnetic module', () => { - const { getByText } = render(props) + render(props) - getByText('Set Engage Height for Magnetic Module GEN1') - getByText( + screen.getByText('Set Engage Height for Magnetic Module GEN1') + screen.getByText( 'Set the engage height for this Magnetic Module. Enter an integer between -2.5 and 20.' ) - getByText('GEN 1 Height Ranges') - getByText('Max Engage Height') - getByText('Labware Bottom') - getByText('Disengaged') - getByText('20 mm') - getByText('0 mm') - getByText('-2.5 mm') - getByText('Set Engage Height') - getByText('Confirm') + screen.getByText('GEN 1 Height Ranges') + screen.getByText('Max Engage Height') + screen.getByText('Labware Bottom') + screen.getByText('Disengaged') + screen.getByText('20 mm') + screen.getByText('0 mm') + screen.getByText('-2.5 mm') + screen.getByText('Set Engage Height') + screen.getByText('Confirm') }) it('renders correct title and body for a gen2 magnetic module', () => { props = { module: mockMagneticModuleGen2, isExpanded: true, - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), } - const { getByText } = render(props) + render(props) - getByText('Set Engage Height for Magnetic Module GEN2') - getByText( + screen.getByText('Set Engage Height for Magnetic Module GEN2') + screen.getByText( 'Set the engage height for this Magnetic Module. Enter an integer between -2.5 and 20.' ) - getByText('GEN 2 Height Ranges') - getByText('Max Engage Height') - getByText('Labware Bottom') - getByText('Disengaged') - getByText('20 mm') - getByText('0 mm') - getByText('-2.5 mm') // TODO(jr, 6/14/22): change this to -4 when ticket #9585 merges - getByText('Set Engage Height') - getByText('Confirm') + screen.getByText('GEN 2 Height Ranges') + screen.getByText('Max Engage Height') + screen.getByText('Labware Bottom') + screen.getByText('Disengaged') + screen.getByText('20 mm') + screen.getByText('0 mm') + screen.getByText('-2.5 mm') // TODO(jr, 6/14/22): change this to -4 when ticket #9585 merges + screen.getByText('Set Engage Height') + screen.getByText('Confirm') }) it('renders the button and it is not clickable until there is something in form field', () => { - const { getByRole, getByTestId } = render(props) - const button = getByRole('button', { name: 'Confirm' }) - const input = getByTestId('magneticModuleV1') + render(props) + const button = screen.getByRole('button', { name: 'Confirm' }) + const input = screen.getByTestId('magneticModuleV1') fireEvent.change(input, { target: { value: '10' } }) expect(button).toBeEnabled() fireEvent.click(button) diff --git a/app/src/organisms/ModuleCard/__tests__/ModuleCard.test.tsx b/app/src/organisms/ModuleCard/__tests__/ModuleCard.test.tsx index f0e9615b255..74ca18bef61 100644 --- a/app/src/organisms/ModuleCard/__tests__/ModuleCard.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/ModuleCard.test.tsx @@ -1,15 +1,32 @@ import * as React from 'react' -import { resetAllWhenMocks, when } from 'jest-when' +import { when } from 'vitest-when' import { fireEvent, screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' + import { RUN_STATUS_IDLE, RUN_STATUS_RUNNING } from '@opentrons/api-client' -import { nestedTextMatcher, renderWithProviders } from '@opentrons/components' + +import { + nestedTextMatcher, + renderWithProviders, +} from '../../../__testing-utils__' import { i18n } from '../../../i18n' +import { getIsHeaterShakerAttached } from '../../../redux/config' import { - DispatchApiRequestType, + mockMagneticModule, + mockTemperatureModuleGen2, + mockThermocycler, + mockHeaterShaker, +} from '../../../redux/modules/__fixtures__' +import { mockRobot } from '../../../redux/robot-api/__fixtures__' +import { useIsEstopNotDisengaged } from '../../../resources/devices/hooks/useIsEstopNotDisengaged' +import { + FAILURE, + getRequestById, + PENDING, + SUCCESS, useDispatchApiRequest, } from '../../../redux/robot-api' import { useCurrentRunStatus } from '../../RunTimeControl/hooks' -import * as RobotApi from '../../../redux/robot-api' import { useToaster } from '../../ToasterOven' import { useIsFlex } from '../../Devices/hooks' import { MagneticModuleData } from '../MagneticModuleData' @@ -18,16 +35,7 @@ import { ThermocyclerModuleData } from '../ThermocyclerModuleData' import { HeaterShakerModuleData } from '../HeaterShakerModuleData' import { ModuleOverflowMenu } from '../ModuleOverflowMenu' import { FirmwareUpdateFailedModal } from '../FirmwareUpdateFailedModal' -import { getIsHeaterShakerAttached } from '../../../redux/config' import { ErrorInfo } from '../ErrorInfo' -import { - mockMagneticModule, - mockTemperatureModuleGen2, - mockThermocycler, - mockHeaterShaker, -} from '../../../redux/modules/__fixtures__' -import { mockRobot } from '../../../redux/robot-api/__fixtures__' -import { useIsEstopNotDisengaged } from '../../../resources/devices/hooks/useIsEstopNotDisengaged' import { ModuleCard } from '..' import type { @@ -35,63 +43,21 @@ import type { MagneticModule, ThermocyclerModule, } from '../../../redux/modules/types' +import type { DispatchApiRequestType } from '../../../redux/robot-api' -jest.mock('../ErrorInfo') -jest.mock('../MagneticModuleData') -jest.mock('../TemperatureModuleData') -jest.mock('../ThermocyclerModuleData') -jest.mock('../HeaterShakerModuleData') -jest.mock('../../../redux/config') -jest.mock('../ModuleOverflowMenu') -jest.mock('../../RunTimeControl/hooks') -jest.mock('../FirmwareUpdateFailedModal') -jest.mock('../../../redux/robot-api') -jest.mock('../../../organisms/ToasterOven') -jest.mock('react-router-dom', () => { - const reactRouterDom = jest.requireActual('react-router-dom') - return { - ...reactRouterDom, - useHistory: () => ({ push: jest.fn() } as any), - } -}) -jest.mock('../../../organisms/Devices/hooks') -jest.mock('../../../resources/devices/hooks/useIsEstopNotDisengaged') - -const mockMagneticModuleData = MagneticModuleData as jest.MockedFunction< - typeof MagneticModuleData -> -const mockTemperatureModuleData = TemperatureModuleData as jest.MockedFunction< - typeof TemperatureModuleData -> -const mockModuleOverflowMenu = ModuleOverflowMenu as jest.MockedFunction< - typeof ModuleOverflowMenu -> -const mockThermocyclerModuleData = ThermocyclerModuleData as jest.MockedFunction< - typeof ThermocyclerModuleData -> -const mockHeaterShakerModuleData = HeaterShakerModuleData as jest.MockedFunction< - typeof HeaterShakerModuleData -> -const mockGetIsHeaterShakerAttached = getIsHeaterShakerAttached as jest.MockedFunction< - typeof getIsHeaterShakerAttached -> -const mockUseCurrentRunStatus = useCurrentRunStatus as jest.MockedFunction< - typeof useCurrentRunStatus -> -const mockUseDispatchApiRequest = useDispatchApiRequest as jest.MockedFunction< - typeof useDispatchApiRequest -> -const mockGetRequestById = RobotApi.getRequestById as jest.MockedFunction< - typeof RobotApi.getRequestById -> -const mockFirmwareUpdateFailedModal = FirmwareUpdateFailedModal as jest.MockedFunction< - typeof FirmwareUpdateFailedModal -> -const mockErrorInfo = ErrorInfo as jest.MockedFunction -const mockUseToaster = useToaster as jest.MockedFunction -const mockUseIsEstopNotDisengaged = useIsEstopNotDisengaged as jest.MockedFunction< - typeof useIsEstopNotDisengaged -> +vi.mock('../ErrorInfo') +vi.mock('../MagneticModuleData') +vi.mock('../TemperatureModuleData') +vi.mock('../ThermocyclerModuleData') +vi.mock('../HeaterShakerModuleData') +vi.mock('../../../redux/config') +vi.mock('../ModuleOverflowMenu') +vi.mock('../../RunTimeControl/hooks') +vi.mock('../FirmwareUpdateFailedModal') +vi.mock('../../../redux/robot-api') +vi.mock('../../../organisms/ToasterOven') +vi.mock('../../../organisms/Devices/hooks') +vi.mock('../../../resources/devices/hooks/useIsEstopNotDisengaged') const mockMagneticModuleHub = { id: 'magdeck_id', @@ -211,11 +177,10 @@ const mockHotThermo = { portGroup: 'unknown', }, } as ThermocyclerModule -const mockUseIsFlex = useIsFlex as jest.MockedFunction -const mockMakeSnackbar = jest.fn() -const mockMakeToast = jest.fn() -const mockEatToast = jest.fn() +const mockMakeSnackbar = vi.fn() +const mockMakeToast = vi.fn() +const mockEatToast = vi.fn() const render = (props: React.ComponentProps) => { return renderWithProviders(, { @@ -237,37 +202,41 @@ describe('ModuleCard', () => { updatePipetteFWRequired: false, } - dispatchApiRequest = jest.fn() - mockErrorInfo.mockReturnValue(null) - mockUseDispatchApiRequest.mockReturnValue([dispatchApiRequest, ['id']]) - mockMagneticModuleData.mockReturnValue(
Mock Magnetic Module Data
) - mockThermocyclerModuleData.mockReturnValue( + dispatchApiRequest = vi.fn() + vi.mocked(ErrorInfo).mockReturnValue(null) + vi.mocked(useDispatchApiRequest).mockReturnValue([ + dispatchApiRequest, + ['id'], + ]) + vi.mocked(MagneticModuleData).mockReturnValue( +
Mock Magnetic Module Data
+ ) + vi.mocked(ThermocyclerModuleData).mockReturnValue(
Mock Thermocycler Module Data
) - mockHeaterShakerModuleData.mockReturnValue( + vi.mocked(HeaterShakerModuleData).mockReturnValue(
Mock Heater Shaker Module Data
) - mockModuleOverflowMenu.mockReturnValue(
mock module overflow menu
) - mockFirmwareUpdateFailedModal.mockReturnValue( + vi.mocked(ModuleOverflowMenu).mockReturnValue( +
mock module overflow menu
+ ) + vi.mocked(FirmwareUpdateFailedModal).mockReturnValue(
mock firmware update failed modal
) - mockUseToaster.mockReturnValue({ + vi.mocked(useToaster).mockReturnValue({ makeSnackbar: mockMakeSnackbar, makeToast: mockMakeToast, eatToast: mockEatToast, }) - mockGetRequestById.mockReturnValue(null) - when(mockUseCurrentRunStatus) + vi.mocked(getRequestById).mockReturnValue(null) + when(useCurrentRunStatus) .calledWith(expect.any(Object)) - .mockReturnValue(RUN_STATUS_IDLE) - when(mockUseIsFlex).calledWith(props.robotName).mockReturnValue(true) - when(mockUseIsEstopNotDisengaged) - .calledWith(props.robotName) - .mockReturnValue(false) + .thenReturn(RUN_STATUS_IDLE) + when(useIsFlex).calledWith(props.robotName).thenReturn(true) + when(useIsEstopNotDisengaged).calledWith(props.robotName).thenReturn(false) }) afterEach(() => { - jest.resetAllMocks() - resetAllWhenMocks() + vi.resetAllMocks() }) it('renders information for a magnetic module with mocked status', () => { @@ -278,7 +247,7 @@ describe('ModuleCard', () => { screen.getByAltText('magneticModuleV1') }) it('renders information for a temperature module with mocked status', () => { - mockTemperatureModuleData.mockReturnValue( + vi.mocked(TemperatureModuleData).mockReturnValue(
Mock Temperature Module Data
) @@ -305,7 +274,7 @@ describe('ModuleCard', () => { }) it('renders information for a heater shaker module with mocked status', () => { - mockGetIsHeaterShakerAttached.mockReturnValue(true) + vi.mocked(getIsHeaterShakerAttached).mockReturnValue(true) render({ ...props, module: mockHeaterShaker, @@ -334,9 +303,9 @@ describe('ModuleCard', () => { }) it('renders kebab icon and it is disabled when run is in progress', () => { - when(mockUseCurrentRunStatus) + when(useCurrentRunStatus) .calledWith(expect.any(Object)) - .mockReturnValue(RUN_STATUS_RUNNING) + .thenReturn(RUN_STATUS_RUNNING) render({ ...props, module: mockMagneticModule, @@ -356,8 +325,8 @@ describe('ModuleCard', () => { screen.getByText(nestedTextMatcher('Module is hot to the touch')) }) it('renders information success toast when update has completed', () => { - mockGetRequestById.mockReturnValue({ - status: RobotApi.SUCCESS, + vi.mocked(getRequestById).mockReturnValue({ + status: SUCCESS, response: { method: 'POST', ok: true, @@ -395,11 +364,11 @@ describe('ModuleCard', () => { screen.getByText('Firmware update available.') const button = screen.getByText('Update now') fireEvent.click(button) - expect(mockGetRequestById).toHaveBeenCalled() + expect(vi.mocked(getRequestById)).toHaveBeenCalled() }) it('renders information for update available and it fails rendering the fail modal', () => { - mockGetRequestById.mockReturnValue({ - status: RobotApi.FAILURE, + vi.mocked(getRequestById).mockReturnValue({ + status: FAILURE, response: { method: 'POST', ok: false, @@ -415,12 +384,12 @@ describe('ModuleCard', () => { screen.getByText('Firmware update available.') const button = screen.getByText('Update now') fireEvent.click(button) - expect(mockGetRequestById).toHaveBeenCalled() + expect(vi.mocked(getRequestById)).toHaveBeenCalled() expect(screen.getByText('mock firmware update failed modal')).toBeVisible() }) it('renders information for update available and updating now text shows up when update is in progress', () => { - mockGetRequestById.mockReturnValue({ - status: RobotApi.PENDING, + vi.mocked(getRequestById).mockReturnValue({ + status: PENDING, }) render({ ...props, @@ -449,8 +418,8 @@ describe('ModuleCard', () => { }) it('renders information for a heater shaker module with an error', () => { - mockErrorInfo.mockReturnValue(
mock heater shaker error
) - mockGetIsHeaterShakerAttached.mockReturnValue(true) + vi.mocked(ErrorInfo).mockReturnValue(
mock heater shaker error
) + vi.mocked(getIsHeaterShakerAttached).mockReturnValue(true) render({ ...props, module: mockHeaterShaker, diff --git a/app/src/organisms/ModuleCard/__tests__/ModuleOverflowMenu.test.tsx b/app/src/organisms/ModuleCard/__tests__/ModuleOverflowMenu.test.tsx index ca178dba64e..f749237e6e0 100644 --- a/app/src/organisms/ModuleCard/__tests__/ModuleOverflowMenu.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/ModuleOverflowMenu.test.tsx @@ -1,6 +1,8 @@ import * as React from 'react' -import { renderWithProviders } from '@opentrons/components' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' + +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { mockMagneticModule, @@ -17,20 +19,10 @@ import { import { useCurrentRunId } from '../../ProtocolUpload/hooks' import { ModuleOverflowMenu } from '../ModuleOverflowMenu' -jest.mock('../../Devices/hooks') -jest.mock('../../RunTimeControl/hooks') -jest.mock('../../ProtocolUpload/hooks') - -const mockUseRunStatuses = useRunStatuses as jest.MockedFunction< - typeof useRunStatuses -> -const mockUseCurrentRunId = useCurrentRunId as jest.MockedFunction< - typeof useCurrentRunId -> -const mockUseIsLegacySessionsInProgress = useIsLegacySessionInProgress as jest.MockedFunction< - typeof useIsLegacySessionInProgress -> -const mockUseIsFlex = useIsFlex as jest.MockedFunction +vi.mock('../../Devices/hooks') +vi.mock('../../RunTimeControl/hooks') +vi.mock('../../ProtocolUpload/hooks') + const render = (props: React.ComponentProps) => { return renderWithProviders(, { i18nInstance: i18n, @@ -172,23 +164,23 @@ const mockThermocyclerGen2LidClosed = { describe('ModuleOverflowMenu', () => { let props: React.ComponentProps beforeEach(() => { - mockUseIsLegacySessionsInProgress.mockReturnValue(false) - mockUseRunStatuses.mockReturnValue({ + vi.mocked(useIsLegacySessionInProgress).mockReturnValue(false) + vi.mocked(useRunStatuses).mockReturnValue({ isRunRunning: false, isRunStill: true, isRunTerminal: false, isRunIdle: false, }) - mockUseCurrentRunId.mockReturnValue(null) - mockUseIsFlex.mockReturnValue(false) + vi.mocked(useCurrentRunId).mockReturnValue(null) + vi.mocked(useIsFlex).mockReturnValue(false) props = { robotName: 'otie', module: mockMagneticModule, - handleSlideoutClick: jest.fn(), - handleAboutClick: jest.fn(), - handleTestShakeClick: jest.fn(), - handleInstructionsClick: jest.fn(), - handleCalibrateClick: jest.fn(), + handleSlideoutClick: vi.fn(), + handleAboutClick: vi.fn(), + handleTestShakeClick: vi.fn(), + handleInstructionsClick: vi.fn(), + handleCalibrateClick: vi.fn(), isLoadedInRun: false, isPipetteReady: true, isTooHot: false, @@ -196,13 +188,13 @@ describe('ModuleOverflowMenu', () => { }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('renders the correct magnetic module menu', () => { - const { getByText } = render(props) - getByText('Set engage height') - getByText('About module') + render(props) + screen.getByText('Set engage height') + screen.getByText('About module') }) it('renders the correct temperature module menu', () => { @@ -210,13 +202,13 @@ describe('ModuleOverflowMenu', () => { ...props, module: mockTemperatureModuleGen2, } - const { getByRole } = render(props) - const buttonSetting = getByRole('button', { + render(props) + const buttonSetting = screen.getByRole('button', { name: 'Set module temperature', }) fireEvent.click(buttonSetting) expect(props.handleSlideoutClick).toHaveBeenCalled() - const buttonAbout = getByRole('button', { name: 'About module' }) + const buttonAbout = screen.getByRole('button', { name: 'About module' }) fireEvent.click(buttonAbout) expect(props.handleAboutClick).toHaveBeenCalled() }) @@ -225,37 +217,37 @@ describe('ModuleOverflowMenu', () => { ...props, module: mockThermocycler, } - const { getByRole } = render(props) - const buttonSettingLid = getByRole('button', { + render(props) + const buttonSettingLid = screen.getByRole('button', { name: 'Set lid temperature', }) fireEvent.click(buttonSettingLid) expect(props.handleSlideoutClick).toHaveBeenCalled() - const buttonAbout = getByRole('button', { name: 'About module' }) + const buttonAbout = screen.getByRole('button', { name: 'About module' }) fireEvent.click(buttonAbout) expect(props.handleAboutClick).toHaveBeenCalled() - const buttonSettingBlock = getByRole('button', { + const buttonSettingBlock = screen.getByRole('button', { name: 'Set block temperature', }) fireEvent.click(buttonSettingBlock) expect(props.handleSlideoutClick).toHaveBeenCalled() - getByRole('button', { name: 'Close lid' }) + screen.getByRole('button', { name: 'Close lid' }) }) it('renders the correct Heater Shaker module menu', () => { props = { ...props, module: mockHeaterShaker, } - const { getByRole } = render(props) - getByRole('button', { + render(props) + screen.getByRole('button', { name: 'Set module temperature', }) - getByRole('button', { + screen.getByRole('button', { name: 'Close labware latch', }) - const aboutButton = getByRole('button', { name: 'About module' }) - getByRole('button', { name: 'Show attachment instructions' }) - const testButton = getByRole('button', { name: 'Test shake' }) + const aboutButton = screen.getByRole('button', { name: 'About module' }) + screen.getByRole('button', { name: 'Show attachment instructions' }) + const testButton = screen.getByRole('button', { name: 'Test shake' }) fireEvent.click(testButton) expect(props.handleTestShakeClick).toHaveBeenCalled() fireEvent.click(aboutButton) @@ -266,8 +258,10 @@ describe('ModuleOverflowMenu', () => { ...props, module: mockHeaterShaker, } - const { getByRole } = render(props) - const btn = getByRole('button', { name: 'Show attachment instructions' }) + render(props) + const btn = screen.getByRole('button', { + name: 'Show attachment instructions', + }) fireEvent.click(btn) expect(props.handleInstructionsClick).toHaveBeenCalled() }) @@ -277,9 +271,9 @@ describe('ModuleOverflowMenu', () => { ...props, module: mockMovingHeaterShaker, } - const { getByRole } = render(props) + render(props) expect( - getByRole('button', { + screen.getByRole('button', { name: 'Open labware latch', }) ).toBeDisabled() @@ -291,9 +285,9 @@ describe('ModuleOverflowMenu', () => { module: mockCloseLatchHeaterShaker, } - const { getByRole } = render(props) + render(props) - const btn = getByRole('button', { + const btn = screen.getByRole('button', { name: 'Open labware latch', }) expect(btn).not.toBeDisabled() @@ -305,9 +299,9 @@ describe('ModuleOverflowMenu', () => { ...props, module: mockHeaterShaker, } - const { getByRole } = render(props) + render(props) - const btn = getByRole('button', { + const btn = screen.getByRole('button', { name: 'Close labware latch', }) @@ -320,9 +314,9 @@ describe('ModuleOverflowMenu', () => { module: mockDeactivateHeatHeaterShaker, } - const { getByRole } = render(props) + render(props) - const btn = getByRole('button', { + const btn = screen.getByRole('button', { name: 'Deactivate heater', }) expect(btn).not.toBeDisabled() @@ -335,9 +329,9 @@ describe('ModuleOverflowMenu', () => { module: mockTemperatureModuleHeating, } - const { getByRole } = render(props) + render(props) - const btn = getByRole('button', { + const btn = screen.getByRole('button', { name: 'Deactivate module', }) expect(btn).not.toBeDisabled() @@ -350,9 +344,9 @@ describe('ModuleOverflowMenu', () => { module: mockMagDeckEngaged, } - const { getByRole } = render(props) + render(props) - const btn = getByRole('button', { + const btn = screen.getByRole('button', { name: 'Disengage module', }) expect(btn).not.toBeDisabled() @@ -365,9 +359,9 @@ describe('ModuleOverflowMenu', () => { module: mockTCBlockHeating, } - const { getByRole } = render(props) + render(props) - const btn = getByRole('button', { + const btn = screen.getByRole('button', { name: 'Deactivate block', }) expect(btn).not.toBeDisabled() @@ -375,8 +369,8 @@ describe('ModuleOverflowMenu', () => { }) it('should disable module control buttons when the robot is busy and run status not null', () => { - mockUseIsLegacySessionsInProgress.mockReturnValue(true) - mockUseRunStatuses.mockReturnValue({ + vi.mocked(useIsLegacySessionInProgress).mockReturnValue(true) + vi.mocked(useRunStatuses).mockReturnValue({ isRunRunning: false, isRunStill: false, isRunTerminal: false, @@ -389,9 +383,9 @@ describe('ModuleOverflowMenu', () => { runId: 'id', } - const { getByRole } = render(props) + render(props) - const btn = getByRole('button', { + const btn = screen.getByRole('button', { name: 'Deactivate block', }) expect(btn).toBeDisabled() @@ -405,26 +399,26 @@ describe('ModuleOverflowMenu', () => { isLoadedInRun: true, runId: 'id', } - mockUseIsFlex.mockReturnValue(true) - const { getByRole } = render(props) + vi.mocked(useIsFlex).mockReturnValue(true) + render(props) expect( - getByRole('button', { + screen.getByRole('button', { name: 'Set lid temperature', }) ).toBeDisabled() expect( - getByRole('button', { + screen.getByRole('button', { name: 'Close lid', }) ).toBeDisabled() expect( - getByRole('button', { + screen.getByRole('button', { name: 'Deactivate block', }) ).toBeDisabled() expect( - getByRole('button', { + screen.getByRole('button', { name: 'About module', }) ).toBeDisabled() @@ -435,15 +429,17 @@ describe('ModuleOverflowMenu', () => { ...props, module: mockThermocyclerGen2, } - const { getByRole } = render(props) - const setLid = getByRole('button', { + render(props) + const setLid = screen.getByRole('button', { name: 'Set lid temperature', }) - getByRole('button', { + screen.getByRole('button', { name: 'Close lid', }) - const setBlock = getByRole('button', { name: 'Set block temperature' }) - const about = getByRole('button', { name: 'About module' }) + const setBlock = screen.getByRole('button', { + name: 'Set block temperature', + }) + const about = screen.getByRole('button', { name: 'About module' }) fireEvent.click(setLid) expect(props.handleSlideoutClick).toHaveBeenCalled() fireEvent.click(setBlock) @@ -457,15 +453,15 @@ describe('ModuleOverflowMenu', () => { ...props, module: mockThermocyclerGen2LidClosed, } - const { getByRole } = render(props) - const setLid = getByRole('button', { + render(props) + const setLid = screen.getByRole('button', { name: 'Set lid temperature', }) - getByRole('button', { + screen.getByRole('button', { name: 'Open lid', }) - const setBlock = getByRole('button', { name: 'Deactivate block' }) - const about = getByRole('button', { name: 'About module' }) + const setBlock = screen.getByRole('button', { name: 'Deactivate block' }) + const about = screen.getByRole('button', { name: 'About module' }) fireEvent.click(setLid) expect(props.handleSlideoutClick).toHaveBeenCalled() fireEvent.click(setBlock) @@ -475,8 +471,8 @@ describe('ModuleOverflowMenu', () => { }) it('renders the correct Thermocycler gen 2 menu with disabled buttons when run status is running', () => { - mockUseCurrentRunId.mockReturnValue('123') - mockUseRunStatuses.mockReturnValue({ + vi.mocked(useCurrentRunId).mockReturnValue('123') + vi.mocked(useRunStatuses).mockReturnValue({ isRunRunning: true, isRunStill: false, isRunTerminal: false, @@ -487,15 +483,15 @@ describe('ModuleOverflowMenu', () => { ...props, module: mockThermocyclerGen2LidClosed, } - const { getByRole } = render(props) - const setLid = getByRole('button', { + render(props) + const setLid = screen.getByRole('button', { name: 'Set lid temperature', }) - const changeLid = getByRole('button', { + const changeLid = screen.getByRole('button', { name: 'Open lid', }) - const setBlock = getByRole('button', { name: 'Deactivate block' }) - const about = getByRole('button', { name: 'About module' }) + const setBlock = screen.getByRole('button', { name: 'Deactivate block' }) + const about = screen.getByRole('button', { name: 'About module' }) expect(setLid).toBeDisabled() expect(changeLid).toBeDisabled() expect(setBlock).toBeDisabled() @@ -507,48 +503,48 @@ describe('ModuleOverflowMenu', () => { ...props, isPipetteReady: false, } - const { queryByRole } = render(props) + render(props) - const calibrate = queryByRole('button', { name: 'Calibrate' }) + const calibrate = screen.queryByRole('button', { name: 'Calibrate' }) expect(calibrate).not.toBeInTheDocument() }) it('renders a disabled calibrate button if the pipettes are not attached or need a firmware update', () => { - mockUseIsFlex.mockReturnValue(true) + vi.mocked(useIsFlex).mockReturnValue(true) props = { ...props, module: mockHeaterShaker, isPipetteReady: false, } - const { getByRole } = render(props) + render(props) - const calibrate = getByRole('button', { name: 'Calibrate' }) + const calibrate = screen.getByRole('button', { name: 'Calibrate' }) expect(calibrate).toBeDisabled() }) it('renders a disabled calibrate button if module is too hot', () => { - mockUseIsFlex.mockReturnValue(true) + vi.mocked(useIsFlex).mockReturnValue(true) props = { ...props, module: mockHeaterShaker, isTooHot: true, } - const { getByRole } = render(props) + render(props) - const calibrate = getByRole('button', { name: 'Calibrate' }) + const calibrate = screen.getByRole('button', { name: 'Calibrate' }) expect(calibrate).toBeDisabled() }) it('a mock function should be called when clicking Calibrate if pipette is ready', () => { - mockUseIsFlex.mockReturnValue(true) + vi.mocked(useIsFlex).mockReturnValue(true) props = { ...props, module: mockHeaterShaker, isPipetteReady: true, } - const { getByRole } = render(props) + render(props) - fireEvent.click(getByRole('button', { name: 'Calibrate' })) + fireEvent.click(screen.getByRole('button', { name: 'Calibrate' })) expect(props.handleCalibrateClick).toHaveBeenCalled() }) }) diff --git a/app/src/organisms/ModuleCard/__tests__/ModuleSetupModal.test.tsx b/app/src/organisms/ModuleCard/__tests__/ModuleSetupModal.test.tsx index cfc407e2fd1..f56b0a67535 100644 --- a/app/src/organisms/ModuleCard/__tests__/ModuleSetupModal.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/ModuleSetupModal.test.tsx @@ -1,6 +1,8 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { fireEvent, screen } from '@testing-library/react' +import { beforeEach, describe, expect, it, vi } from 'vitest' + +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { ModuleSetupModal } from '../ModuleSetupModal' @@ -13,31 +15,35 @@ const render = (props: React.ComponentProps) => { describe('ModuleSetupModal', () => { let props: React.ComponentProps beforeEach(() => { - props = { close: jest.fn(), moduleDisplayName: 'mockModuleDisplayName' } + props = { close: vi.fn(), moduleDisplayName: 'mockModuleDisplayName' } }) it('should render the correct header', () => { - const { getByRole } = render(props) - getByRole('heading', { name: 'mockModuleDisplayName Setup Instructions' }) + render(props) + screen.getByRole('heading', { + name: 'mockModuleDisplayName Setup Instructions', + }) }) it('should render the correct body', () => { - const { getByText } = render(props) - getByText( + render(props) + screen.getByText( 'For step-by-step instructions on setting up your module, consult the Quickstart Guide that came in its box. You can also click the link below or scan the QR code to visit the modules section of the Opentrons Help Center.' ) }) it('should render a link to the learn more page', () => { - const { getByRole } = render(props) + render(props) expect( - getByRole('link', { - name: 'mockModuleDisplayName setup instructions', - }).getAttribute('href') + screen + .getByRole('link', { + name: 'mockModuleDisplayName setup instructions', + }) + .getAttribute('href') ).toBe('https://support.opentrons.com/s/modules') }) it('should call close when the close button is pressed', () => { - const { getByRole } = render(props) + render(props) expect(props.close).not.toHaveBeenCalled() - const closeButton = getByRole('button', { name: 'Close' }) + const closeButton = screen.getByRole('button', { name: 'Close' }) fireEvent.click(closeButton) expect(props.close).toHaveBeenCalled() }) diff --git a/app/src/organisms/ModuleCard/__tests__/TemperatureModuleData.test.tsx b/app/src/organisms/ModuleCard/__tests__/TemperatureModuleData.test.tsx index cd8ca1c29cc..4ca6b89741d 100644 --- a/app/src/organisms/ModuleCard/__tests__/TemperatureModuleData.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/TemperatureModuleData.test.tsx @@ -1,13 +1,14 @@ import * as React from 'react' -import { renderWithProviders } from '@opentrons/components' +import { screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' + +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { StatusLabel } from '../../../atoms/StatusLabel' import { TemperatureModuleData } from '../TemperatureModuleData' import { mockTemperatureModuleGen2 } from '../../../redux/modules/__fixtures__' -jest.mock('../../../atoms/StatusLabel') - -const mockStatusLabel = StatusLabel as jest.MockedFunction +vi.mock('../../../atoms/StatusLabel') const render = (props: React.ComponentProps) => { return renderWithProviders(, { @@ -23,15 +24,15 @@ describe('TemperatureModuleData', () => { targetTemp: mockTemperatureModuleGen2.data.targetTemperature, currentTemp: mockTemperatureModuleGen2.data.currentTemperature, } - mockStatusLabel.mockReturnValue(
Mock StatusLabel
) + vi.mocked(StatusLabel).mockReturnValue(
Mock StatusLabel
) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('renders an idle status', () => { - const { getByText } = render(props) - expect(getByText('Mock StatusLabel')).toHaveStyle( + render(props) + expect(screen.getByText('Mock StatusLabel')).toHaveStyle( 'backgroundColor: C_SILVER_GRAY' ) }) @@ -42,8 +43,8 @@ describe('TemperatureModuleData', () => { targetTemp: mockTemperatureModuleGen2.data.targetTemperature, currentTemp: mockTemperatureModuleGen2.data.currentTemperature, } - const { getByText } = render(props) - expect(getByText('Mock StatusLabel')).toHaveStyle( + render(props) + expect(screen.getByText('Mock StatusLabel')).toHaveStyle( 'backgroundColor: C_SKY_BLUE' ) }) @@ -54,8 +55,8 @@ describe('TemperatureModuleData', () => { targetTemp: mockTemperatureModuleGen2.data.targetTemperature, currentTemp: mockTemperatureModuleGen2.data.currentTemperature, } - const { getByText } = render(props) - expect(getByText('Mock StatusLabel')).toHaveStyle( + render(props) + expect(screen.getByText('Mock StatusLabel')).toHaveStyle( 'backgroundColor: C_SKY_BLUE' ) }) @@ -66,16 +67,16 @@ describe('TemperatureModuleData', () => { targetTemp: mockTemperatureModuleGen2.data.targetTemperature, currentTemp: mockTemperatureModuleGen2.data.currentTemperature, } - const { getByText } = render(props) - expect(getByText('Mock StatusLabel')).toHaveStyle( + render(props) + expect(screen.getByText('Mock StatusLabel')).toHaveStyle( 'backgroundColor: C_SKY_BLUE' ) }) it('renders correct temperature information when target temp is null', () => { - const { getByText } = render(props) - getByText('Target: N/A') - getByText(`Current: ${props.currentTemp} °C`) + render(props) + screen.getByText('Target: N/A') + screen.getByText(`Current: ${props.currentTemp} °C`) }) it('renders correct temperature information when target temp is not null', () => { @@ -84,8 +85,8 @@ describe('TemperatureModuleData', () => { targetTemp: 34, currentTemp: mockTemperatureModuleGen2.data.currentTemperature, } - const { getByText } = render(props) - getByText(`Target: ${String(props.targetTemp)} °C`) - getByText(`Current: ${props.currentTemp} °C`) + render(props) + screen.getByText(`Target: ${String(props.targetTemp)} °C`) + screen.getByText(`Current: ${props.currentTemp} °C`) }) }) diff --git a/app/src/organisms/ModuleCard/__tests__/TemperatureModuleSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/TemperatureModuleSlideout.test.tsx index 2f77ece20d8..eb3336cefe5 100644 --- a/app/src/organisms/ModuleCard/__tests__/TemperatureModuleSlideout.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/TemperatureModuleSlideout.test.tsx @@ -1,19 +1,18 @@ import * as React from 'react' -import { i18n } from '../../../i18n' +import { fireEvent, screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' + import { useCreateLiveCommandMutation } from '@opentrons/react-api-client' -import { fireEvent } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' -import { TemperatureModuleSlideout } from '../TemperatureModuleSlideout' + +import { renderWithProviders } from '../../../__testing-utils__' +import { i18n } from '../../../i18n' import { mockTemperatureModule, mockTemperatureModuleGen2, } from '../../../redux/modules/__fixtures__' +import { TemperatureModuleSlideout } from '../TemperatureModuleSlideout' -jest.mock('@opentrons/react-api-client') - -const mockUseLiveCommandMutation = useCreateLiveCommandMutation as jest.MockedFunction< - typeof useCreateLiveCommandMutation -> +vi.mock('@opentrons/react-api-client') const render = ( props: React.ComponentProps @@ -25,59 +24,59 @@ const render = ( describe('TemperatureModuleSlideout', () => { let props: React.ComponentProps - let mockCreateLiveCommand = jest.fn() + let mockCreateLiveCommand = vi.fn() beforeEach(() => { - mockCreateLiveCommand = jest.fn() + mockCreateLiveCommand = vi.fn() mockCreateLiveCommand.mockResolvedValue(null) props = { module: mockTemperatureModule, isExpanded: true, - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), } - mockUseLiveCommandMutation.mockReturnValue({ + vi.mocked(useCreateLiveCommandMutation).mockReturnValue({ createLiveCommand: mockCreateLiveCommand, } as any) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('renders correct title and body for a gen1 temperature module', () => { - const { getByText } = render(props) + render(props) - getByText('Set Temperature for Temperature Module GEN1') - getByText( + screen.getByText('Set Temperature for Temperature Module GEN1') + screen.getByText( 'Pre heat or cool your Temperature Module GEN1. Enter a whole number between 4 °C and 96 °C.' ) - getByText('Set temperature') + screen.getByText('Set temperature') }) it('renders correct title and body for a gen2 temperature module', () => { props = { module: mockTemperatureModuleGen2, isExpanded: true, - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), } - const { getByText } = render(props) + render(props) - getByText('Set Temperature for Temperature Module GEN2') - getByText( + screen.getByText('Set Temperature for Temperature Module GEN2') + screen.getByText( 'Pre heat or cool your Temperature Module GEN2. Enter a whole number between 4 °C and 96 °C.' ) - getByText('Set temperature') + screen.getByText('Set temperature') }) it('renders the button and it is not clickable until there is something in form field', () => { props = { module: mockTemperatureModuleGen2, isExpanded: true, - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), } - const { getByRole, getByTestId } = render(props) - const button = getByRole('button', { name: 'Confirm' }) - const input = getByTestId('temperatureModuleV2') + render(props) + const button = screen.getByRole('button', { name: 'Confirm' }) + const input = screen.getByTestId('temperatureModuleV2') fireEvent.change(input, { target: { value: '20' } }) expect(button).toBeEnabled() fireEvent.click(button) diff --git a/app/src/organisms/ModuleCard/__tests__/TestShakeSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/TestShakeSlideout.test.tsx index aaca266bce9..213d44259fa 100644 --- a/app/src/organisms/ModuleCard/__tests__/TestShakeSlideout.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/TestShakeSlideout.test.tsx @@ -1,31 +1,21 @@ import * as React from 'react' -import { i18n } from '../../../i18n' -import { fireEvent, waitFor } from '@testing-library/react' +import { fireEvent, screen, waitFor } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' + import { useCreateLiveCommandMutation } from '@opentrons/react-api-client' -import { renderWithProviders } from '@opentrons/components' + +import { renderWithProviders } from '../../../__testing-utils__' +import { i18n } from '../../../i18n' import { getIsHeaterShakerAttached } from '../../../redux/config' import { mockHeaterShaker } from '../../../redux/modules/__fixtures__' import { useLatchControls } from '../hooks' import { TestShakeSlideout } from '../TestShakeSlideout' import { ModuleSetupModal } from '../ModuleSetupModal' -jest.mock('../../../redux/config') -jest.mock('@opentrons/react-api-client') -jest.mock('../hooks') -jest.mock('../ModuleSetupModal') - -const mockGetIsHeaterShakerAttached = getIsHeaterShakerAttached as jest.MockedFunction< - typeof getIsHeaterShakerAttached -> -const mockUseLiveCommandMutation = useCreateLiveCommandMutation as jest.MockedFunction< - typeof useCreateLiveCommandMutation -> -const mockUseLatchControls = useLatchControls as jest.MockedFunction< - typeof useLatchControls -> -const mockModuleSetupModal = ModuleSetupModal as jest.MockedFunction< - typeof ModuleSetupModal -> +vi.mock('../../../redux/config') +vi.mock('@opentrons/react-api-client') +vi.mock('../hooks') +vi.mock('../ModuleSetupModal') const render = (props: React.ComponentProps) => { return renderWithProviders(, { @@ -101,90 +91,90 @@ const mockMovingHeaterShaker = { describe('TestShakeSlideout', () => { let props: React.ComponentProps - let mockCreateLiveCommand = jest.fn() - const mockToggleLatch = jest.fn() + let mockCreateLiveCommand = vi.fn() + const mockToggleLatch = vi.fn() beforeEach(() => { props = { module: mockHeaterShaker, - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), isExpanded: true, } - mockUseLatchControls.mockReturnValue({ + vi.mocked(useLatchControls).mockReturnValue({ toggleLatch: mockToggleLatch, isLatchClosed: true, } as any) - mockCreateLiveCommand = jest.fn() + mockCreateLiveCommand = vi.fn() mockCreateLiveCommand.mockResolvedValue(null) - mockUseLiveCommandMutation.mockReturnValue({ + vi.mocked(useCreateLiveCommandMutation).mockReturnValue({ createLiveCommand: mockCreateLiveCommand, } as any) - mockGetIsHeaterShakerAttached.mockReturnValue(true) + vi.mocked(getIsHeaterShakerAttached).mockReturnValue(true) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('renders the slideout information banner icon and description', () => { - const { getByText, getByLabelText } = render(props) - getByLabelText('information') - getByText( + render(props) + screen.getByLabelText('information') + screen.getByText( 'If you want to add labware to the module before doing a test shake, you can use the labware latch controls to hold the latches open.' ) }) it('renders the labware latch open button', () => { - const { getByRole, getByText } = render(props) - getByText('Labware Latch') - getByText('open') - const button = getByRole('button', { name: /Open Latch/i }) + render(props) + screen.getByText('Labware Latch') + screen.getByText('open') + const button = screen.getByRole('button', { name: /Open Latch/i }) expect(button).toBeEnabled() }) it('renders a start button for speed setting', () => { - const { getByText, getByRole } = render(props) + render(props) - getByText('Shake speed') + screen.getByText('Shake speed') - const button = getByRole('button', { name: /Start/i }) + const button = screen.getByRole('button', { name: /Start/i }) expect(button).toBeDisabled() }) it('renders show attachment instructions link', () => { - mockModuleSetupModal.mockReturnValue(
mockModuleSetupModal
) - const { getByText } = render(props) + vi.mocked(ModuleSetupModal).mockReturnValue(
mockModuleSetupModal
) + render(props) - const button = getByText('Show attachment instructions') + const button = screen.getByText('Show attachment instructions') fireEvent.click(button) - getByText('mockModuleSetupModal') + screen.getByText('mockModuleSetupModal') }) it('start shake button should be disabled if the labware latch is open', () => { props = { module: mockOpenLatchHeaterShaker, - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), isExpanded: true, } - mockUseLatchControls.mockReturnValue({ + vi.mocked(useLatchControls).mockReturnValue({ toggleLatch: mockToggleLatch, isLatchClosed: false, }) - const { getByRole } = render(props) - const button = getByRole('button', { name: /Start/i }) + render(props) + const button = screen.getByRole('button', { name: /Start/i }) expect(button).toBeDisabled() }) it('open latch button and input field should be disabled if the module is shaking', () => { props = { module: mockMovingHeaterShaker, - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), isExpanded: true, } - const { getByRole } = render(props) - const button = getByRole('button', { name: /Open/i }) - const input = getByRole('spinbutton') + render(props) + const button = screen.getByRole('button', { name: /Open/i }) + const input = screen.getByRole('spinbutton') expect(input).toBeDisabled() expect(button).toBeDisabled() }) @@ -192,26 +182,26 @@ describe('TestShakeSlideout', () => { it('renders the open labware latch button and clicking it opens the latch', () => { props = { module: mockCloseLatchHeaterShaker, - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), isExpanded: true, } - const { getByRole } = render(props) - const button = getByRole('button', { name: /Open/i }) + render(props) + const button = screen.getByRole('button', { name: /Open/i }) fireEvent.click(button) - expect(mockUseLatchControls).toHaveBeenCalled() + expect(vi.mocked(useLatchControls)).toHaveBeenCalled() }) it('entering an input for shake speed and clicking start should begin shaking', async () => { props = { module: mockHeaterShaker, - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), isExpanded: true, } - const { getByRole } = render(props) - const button = getByRole('button', { name: /Start/i }) - const input = getByRole('spinbutton') + render(props) + const button = screen.getByRole('button', { name: /Start/i }) + const input = screen.getByRole('spinbutton') fireEvent.change(input, { target: { value: '300' } }) fireEvent.click(button) diff --git a/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx b/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx index fc1acfe1033..7c611f4031b 100644 --- a/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx @@ -1,13 +1,15 @@ import * as React from 'react' +import { screen } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' -import { ThermocyclerModuleData } from '../ThermocyclerModuleData' import { mockThermocycler, mockThermocyclerGen2, } from '../../../redux/modules/__fixtures__' +import { ThermocyclerModuleData } from '../ThermocyclerModuleData' import type { ThermocyclerData } from '../../../redux/modules/api-types' @@ -54,13 +56,13 @@ describe('ThermocyclerModuleData', () => { } }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('renders an idle block temp status', () => { - const { getByTestId } = render(props) + render(props) - expect(getByTestId('status_label_idle_blockStatus')).toHaveStyle( + expect(screen.getByTestId('status_label_idle_blockStatus')).toHaveStyle( 'backgroundColor: C_SILVER_GRAY' ) }) @@ -69,10 +71,10 @@ describe('ThermocyclerModuleData', () => { props = { data: mockDataHoldingAtTarget, } - const { getByTestId } = render(props) + render(props) expect( - getByTestId('status_label_holding at target_blockStatus') + screen.getByTestId('status_label_holding at target_blockStatus') ).toHaveStyle('backgroundColor: C_SKY_BLUE') }) @@ -80,9 +82,9 @@ describe('ThermocyclerModuleData', () => { props = { data: mockDataCooling, } - const { getByTestId } = render(props) + render(props) - expect(getByTestId('status_label_cooling_blockStatus')).toHaveStyle( + expect(screen.getByTestId('status_label_cooling_blockStatus')).toHaveStyle( 'backgroundColor: C_SKY_BLUE' ) }) @@ -91,9 +93,9 @@ describe('ThermocyclerModuleData', () => { props = { data: mockDataHeating, } - const { getByTestId } = render(props) + render(props) - expect(getByTestId('status_label_heating_blockStatus')).toHaveStyle( + expect(screen.getByTestId('status_label_heating_blockStatus')).toHaveStyle( 'backgroundColor: C_SKY_BLUE' ) }) @@ -102,20 +104,20 @@ describe('ThermocyclerModuleData', () => { props = { data: mockDataHeating, } - const { getByTestId } = render(props) + render(props) - expect(getByTestId('status_label_heating_blockStatus')).toHaveStyle( + expect(screen.getByTestId('status_label_heating_blockStatus')).toHaveStyle( 'backgroundColor: COLORS.yellow20' ) }) it('renders thermocycler gen 1 lid temperature data with lid opened', () => { - const { getByText, getByTitle, getByTestId } = render(props) + render(props) - getByText('Lid') - getByTitle('lid_target_temp') - getByTitle('lid_temp') - getByTestId('status_label_open_lidStatus') + screen.getByText('Lid') + screen.getByTitle('lid_target_temp') + screen.getByTitle('lid_temp') + screen.getByTestId('status_label_open_lidStatus') }) it('renders thermocycler gen 1 lid temperature data with lid closed', () => { @@ -136,12 +138,12 @@ describe('ThermocyclerModuleData', () => { status: 'idle', } as ThermocyclerData, } - const { getByText, getByTitle, getByTestId } = render(props) + render(props) - getByText('Lid') - getByTitle('lid_target_temp') - getByTitle('lid_temp') - getByTestId('status_label_closed_lidStatus') + screen.getByText('Lid') + screen.getByTitle('lid_target_temp') + screen.getByTitle('lid_temp') + screen.getByTestId('status_label_closed_lidStatus') }) it('renders thermocycler gen 1 lid temperature data with lid temp status cooling', () => { @@ -150,10 +152,10 @@ describe('ThermocyclerModuleData', () => { lidTemperatureStatus: 'cooling', } as ThermocyclerData, } - const { getByTestId } = render(props) - expect(getByTestId('status_label_cooling_lidTempStatus')).toHaveStyle( - 'backgroundColor: C_SKY_BLUE' - ) + render(props) + expect( + screen.getByTestId('status_label_cooling_lidTempStatus') + ).toHaveStyle('backgroundColor: C_SKY_BLUE') }) it('renders thermocycler gen 1 lid temperature data with lid temp status heating', () => { @@ -162,10 +164,10 @@ describe('ThermocyclerModuleData', () => { lidTemperatureStatus: 'heating', } as ThermocyclerData, } - const { getByTestId } = render(props) - expect(getByTestId('status_label_heating_lidTempStatus')).toHaveStyle( - 'backgroundColor: C_SKY_BLUE' - ) + render(props) + expect( + screen.getByTestId('status_label_heating_lidTempStatus') + ).toHaveStyle('backgroundColor: C_SKY_BLUE') }) it('renders thermocycler gen 1 lid temperature data with lid temp status holding at temperature', () => { @@ -174,9 +176,9 @@ describe('ThermocyclerModuleData', () => { lidTemperatureStatus: 'holding at target', } as ThermocyclerData, } - const { getByTestId } = render(props) + render(props) expect( - getByTestId('status_label_holding at target_lidTempStatus') + screen.getByTestId('status_label_holding at target_lidTempStatus') ).toHaveStyle('backgroundColor: C_SKY_BLUE') }) @@ -192,14 +194,14 @@ describe('ThermocyclerModuleData', () => { props = { data: mockThermocyclerGen2.data, } - const { getByTestId } = render(props) - expect(getByTestId('status_label_open_lidStatus')).toHaveStyle( + render(props) + expect(screen.getByTestId('status_label_open_lidStatus')).toHaveStyle( 'backgroundColor: C_SILVER_GRAY' ) - expect(getByTestId('status_label_idle_lidTempStatus')).toHaveStyle( + expect(screen.getByTestId('status_label_idle_lidTempStatus')).toHaveStyle( 'backgroundColor: C_SILVER_GRAY' ) - expect(getByTestId('status_label_idle_blockStatus')).toHaveStyle( + expect(screen.getByTestId('status_label_idle_blockStatus')).toHaveStyle( 'backgroundColor: C_SILVER_GRAY' ) }) @@ -210,7 +212,7 @@ describe('ThermocyclerModuleData', () => { lidStatus: 'in_between', } as ThermocyclerData, } - const { getByTestId } = render(props) - getByTestId('status_label_open_lidStatus') + render(props) + screen.getByTestId('status_label_open_lidStatus') }) }) diff --git a/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleSlideout.test.tsx index 45137eaecef..7840d68269f 100644 --- a/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleSlideout.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleSlideout.test.tsx @@ -1,17 +1,15 @@ import * as React from 'react' -import { renderWithProviders } from '@opentrons/components' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' + import { useCreateLiveCommandMutation } from '@opentrons/react-api-client' -import { i18n } from '../../../i18n' -import { ThermocyclerModuleSlideout } from '../ThermocyclerModuleSlideout' +import { renderWithProviders } from '../../../__testing-utils__' +import { i18n } from '../../../i18n' import { mockThermocycler } from '../../../redux/modules/__fixtures__' +import { ThermocyclerModuleSlideout } from '../ThermocyclerModuleSlideout' -jest.mock('@opentrons/react-api-client') - -const mockUseLiveCommandMutation = useCreateLiveCommandMutation as jest.MockedFunction< - typeof useCreateLiveCommandMutation -> +vi.mock('@opentrons/react-api-client') const render = ( props: React.ComponentProps @@ -23,16 +21,16 @@ const render = ( describe('ThermocyclerModuleSlideout', () => { let props: React.ComponentProps - let mockCreateLiveCommand = jest.fn() + let mockCreateLiveCommand = vi.fn() beforeEach(() => { - mockCreateLiveCommand = jest.fn() + mockCreateLiveCommand = vi.fn() mockCreateLiveCommand.mockResolvedValue(null) - mockUseLiveCommandMutation.mockReturnValue({ + vi.mocked(useCreateLiveCommandMutation).mockReturnValue({ createLiveCommand: mockCreateLiveCommand, } as any) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('renders correct title and body for Thermocycler Lid temperature', () => { @@ -40,16 +38,16 @@ describe('ThermocyclerModuleSlideout', () => { module: mockThermocycler, isSecondaryTemp: true, isExpanded: true, - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), } - const { getByText } = render(props) + render(props) - getByText('Set Lid Temperature for Thermocycler Module GEN1') - getByText( + screen.getByText('Set Lid Temperature for Thermocycler Module GEN1') + screen.getByText( 'Pre heat or cool your Thermocycler Lid. Enter a whole number between 37 °C and 110 °C.' ) - getByText('Set lid temperature') - getByText('Confirm') + screen.getByText('Set lid temperature') + screen.getByText('Confirm') }) it('renders correct title and body for Thermocycler Block Temperature', () => { @@ -57,16 +55,16 @@ describe('ThermocyclerModuleSlideout', () => { module: mockThermocycler, isSecondaryTemp: false, isExpanded: true, - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), } - const { getByText } = render(props) + render(props) - getByText('Set Block Temperature for Thermocycler Module GEN1') - getByText( + screen.getByText('Set Block Temperature for Thermocycler Module GEN1') + screen.getByText( 'Pre heat or cool your Thermocycler Block. Enter a whole number between 4 °C and 99 °C.' ) - getByText('Set block temperature') - getByText('Confirm') + screen.getByText('Set block temperature') + screen.getByText('Confirm') }) it('renders the button and it is not clickable until there is something in form field for the TC Block', () => { @@ -74,11 +72,11 @@ describe('ThermocyclerModuleSlideout', () => { module: mockThermocycler, isSecondaryTemp: false, isExpanded: true, - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), } - const { getByRole, getByTestId } = render(props) - const button = getByRole('button', { name: 'Confirm' }) - const input = getByTestId('thermocyclerModuleV1_false') + render(props) + const button = screen.getByRole('button', { name: 'Confirm' }) + const input = screen.getByTestId('thermocyclerModuleV1_false') fireEvent.change(input, { target: { value: '45' } }) expect(button).toBeEnabled() fireEvent.click(button) @@ -100,11 +98,11 @@ describe('ThermocyclerModuleSlideout', () => { module: mockThermocycler, isSecondaryTemp: true, isExpanded: true, - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), } - const { getByRole, getByTestId } = render(props) - const button = getByRole('button', { name: 'Confirm' }) - const input = getByTestId('thermocyclerModuleV1_true') + render(props) + const button = screen.getByRole('button', { name: 'Confirm' }) + const input = screen.getByTestId('thermocyclerModuleV1_true') fireEvent.change(input, { target: { value: '45' } }) expect(button).toBeEnabled() fireEvent.click(button) @@ -126,11 +124,11 @@ describe('ThermocyclerModuleSlideout', () => { module: mockThermocycler, isSecondaryTemp: true, isExpanded: true, - onCloseClick: jest.fn(), + onCloseClick: vi.fn(), } - const { getByLabelText, getByTestId } = render(props) - const button = getByLabelText('exit') - const input = getByTestId('thermocyclerModuleV1_true') + render(props) + const button = screen.getByLabelText('exit') + const input = screen.getByTestId('thermocyclerModuleV1_true') fireEvent.change(input, { target: { value: '45' } }) fireEvent.click(button) diff --git a/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx b/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx index 5a8c655cb7f..854b41b24a5 100644 --- a/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx @@ -1,20 +1,15 @@ import * as React from 'react' import { Provider } from 'react-redux' -import { when } from 'jest-when' +import { when } from 'vitest-when' import { createStore } from 'redux' import { I18nextProvider } from 'react-i18next' import { act, renderHook } from '@testing-library/react' -import { i18n } from '../../../i18n' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' + import { useCreateLiveCommandMutation } from '@opentrons/react-api-client' -import heaterShakerCommandsWithResultsKey from '@opentrons/shared-data/protocol/fixtures/6/heaterShakerCommandsWithResultsKey.json' -import { useCurrentRunId } from '../../ProtocolUpload/hooks' -import { useIsRobotBusy, useRunStatuses } from '../../Devices/hooks' -import { - useLatchControls, - useModuleOverflowMenu, - useIsHeaterShakerInProtocol, -} from '../hooks' +import { heater_shaker_commands_with_results_key } from '@opentrons/shared-data' +import { i18n } from '../../../i18n' import { mockHeaterShaker, mockMagneticModuleGen2, @@ -22,32 +17,22 @@ import { mockThermocycler, mockThermocyclerGen2, } from '../../../redux/modules/__fixtures__' +import { useIsRobotBusy, useRunStatuses } from '../../Devices/hooks' import { useMostRecentCompletedAnalysis } from '../../LabwarePositionCheck/useMostRecentCompletedAnalysis' +import { useCurrentRunId } from '../../ProtocolUpload/hooks' +import { + useLatchControls, + useModuleOverflowMenu, + useIsHeaterShakerInProtocol, +} from '../hooks' import type { Store } from 'redux' import type { State } from '../../../redux/types' -jest.mock('@opentrons/react-api-client') -jest.mock('../../LabwarePositionCheck/useMostRecentCompletedAnalysis') -jest.mock('../../ProtocolUpload/hooks') -jest.mock('../../Devices/hooks') - -const mockUseMostRecentCompletedAnalysis = useMostRecentCompletedAnalysis as jest.MockedFunction< - typeof useMostRecentCompletedAnalysis -> - -const mockUseLiveCommandMutation = useCreateLiveCommandMutation as jest.MockedFunction< - typeof useCreateLiveCommandMutation -> -const mockUseCurrentRunId = useCurrentRunId as jest.MockedFunction< - typeof useCurrentRunId -> -const mockUseIsRobotBusy = useIsRobotBusy as jest.MockedFunction< - typeof useIsRobotBusy -> -const mockUseRunStatuses = useRunStatuses as jest.MockedFunction< - typeof useRunStatuses -> +vi.mock('@opentrons/react-api-client') +vi.mock('../../LabwarePositionCheck/useMostRecentCompletedAnalysis') +vi.mock('../../ProtocolUpload/hooks') +vi.mock('../../Devices/hooks') const mockCloseLatchHeaterShaker = { id: 'heatershaker_id', @@ -176,27 +161,27 @@ const mockTCLidHeating = { } as any describe('useLatchControls', () => { - const store: Store = createStore(jest.fn(), {}) - let mockCreateLiveCommand = jest.fn() + const store: Store = createStore(vi.fn(), {}) + let mockCreateLiveCommand = vi.fn() beforeEach(() => { - store.dispatch = jest.fn() - mockCreateLiveCommand = jest.fn() + store.dispatch = vi.fn() + mockCreateLiveCommand = vi.fn() mockCreateLiveCommand.mockResolvedValue(null) - mockUseRunStatuses.mockReturnValue({ + vi.mocked(useRunStatuses).mockReturnValue({ isRunRunning: false, isRunStill: false, isRunIdle: false, isRunTerminal: false, }) - mockUseLiveCommandMutation.mockReturnValue({ + vi.mocked(useCreateLiveCommandMutation).mockReturnValue({ createLiveCommand: mockCreateLiveCommand, } as any) - mockUseIsRobotBusy.mockReturnValue(false) + vi.mocked(useIsRobotBusy).mockReturnValue(false) }) afterEach(() => { - jest.restoreAllMocks() + vi.restoreAllMocks() }) it('should return latch is open and handle latch function and command to close latch', () => { @@ -253,26 +238,26 @@ describe('useLatchControls', () => { }) describe('useModuleOverflowMenu', () => { - const store: Store = createStore(jest.fn(), {}) - let mockCreateLiveCommand = jest.fn() + const store: Store = createStore(vi.fn(), {}) + let mockCreateLiveCommand = vi.fn() beforeEach(() => { - store.dispatch = jest.fn() - mockCreateLiveCommand = jest.fn() + store.dispatch = vi.fn() + mockCreateLiveCommand = vi.fn() mockCreateLiveCommand.mockResolvedValue(null) - mockUseRunStatuses.mockReturnValue({ + vi.mocked(useRunStatuses).mockReturnValue({ isRunRunning: false, isRunStill: true, isRunTerminal: false, isRunIdle: false, }) - mockUseLiveCommandMutation.mockReturnValue({ + vi.mocked(useCreateLiveCommandMutation).mockReturnValue({ createLiveCommand: mockCreateLiveCommand, } as any) }) afterEach(() => { - jest.restoreAllMocks() + vi.restoreAllMocks() }) it('should return everything for menuItemsByModuleType and create deactive heater command', () => { const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ @@ -286,10 +271,10 @@ describe('useModuleOverflowMenu', () => { () => useModuleOverflowMenu( mockHeatHeaterShaker, - jest.fn(), - jest.fn(), - jest.fn(), - jest.fn(), + vi.fn(), + vi.fn(), + vi.fn(), + vi.fn(), false, false ), @@ -312,10 +297,10 @@ describe('useModuleOverflowMenu', () => { }) }) it('should render heater shaker module and calls handleClick when module is idle and calls other handles when button is selected', () => { - const mockHandleSlideoutClick = jest.fn() - const mockAboutClick = jest.fn() - const mockTestShakeClick = jest.fn() - const mockHandleWizard = jest.fn() + const mockHandleSlideoutClick = vi.fn() + const mockAboutClick = vi.fn() + const mockTestShakeClick = vi.fn() + const mockHandleWizard = vi.fn() const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ children, }) => ( @@ -347,7 +332,7 @@ describe('useModuleOverflowMenu', () => { }) it('should return only 1 menu button when module is a magnetic module and calls handleClick when module is disengaged', () => { - const mockHandleClick = jest.fn() + const mockHandleClick = vi.fn() const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ children, }) => ( @@ -359,9 +344,9 @@ describe('useModuleOverflowMenu', () => { () => useModuleOverflowMenu( mockMagneticModuleGen2, - jest.fn(), - jest.fn(), - jest.fn(), + vi.fn(), + vi.fn(), + vi.fn(), mockHandleClick, false, false @@ -389,10 +374,10 @@ describe('useModuleOverflowMenu', () => { () => useModuleOverflowMenu( mockMagDeckEngaged, - jest.fn(), - jest.fn(), - jest.fn(), - jest.fn(), + vi.fn(), + vi.fn(), + vi.fn(), + vi.fn(), false, false ), @@ -415,7 +400,7 @@ describe('useModuleOverflowMenu', () => { }) it('should render temperature module and call handleClick when module is idle', () => { - const mockHandleClick = jest.fn() + const mockHandleClick = vi.fn() const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ children, }) => ( @@ -427,9 +412,9 @@ describe('useModuleOverflowMenu', () => { () => useModuleOverflowMenu( mockTemperatureModuleGen2, - jest.fn(), - jest.fn(), - jest.fn(), + vi.fn(), + vi.fn(), + vi.fn(), mockHandleClick, false, false @@ -456,10 +441,10 @@ describe('useModuleOverflowMenu', () => { () => useModuleOverflowMenu( mockTemperatureModuleHeating, - jest.fn(), - jest.fn(), - jest.fn(), - jest.fn(), + vi.fn(), + vi.fn(), + vi.fn(), + vi.fn(), false, false ), @@ -481,7 +466,7 @@ describe('useModuleOverflowMenu', () => { }) it('should render TC module and call handleClick when module is idle', () => { - const mockHandleClick = jest.fn() + const mockHandleClick = vi.fn() const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ children, }) => ( @@ -493,9 +478,9 @@ describe('useModuleOverflowMenu', () => { () => useModuleOverflowMenu( mockThermocycler, - jest.fn(), - jest.fn(), - jest.fn(), + vi.fn(), + vi.fn(), + vi.fn(), mockHandleClick, false, false @@ -522,10 +507,10 @@ describe('useModuleOverflowMenu', () => { () => useModuleOverflowMenu( mockTCBlockHeating, - jest.fn(), - jest.fn(), - jest.fn(), - jest.fn(), + vi.fn(), + vi.fn(), + vi.fn(), + vi.fn(), false, false ), @@ -560,10 +545,10 @@ describe('useModuleOverflowMenu', () => { () => useModuleOverflowMenu( mockTCLidHeating, - jest.fn(), - jest.fn(), - jest.fn(), - jest.fn(), + vi.fn(), + vi.fn(), + vi.fn(), + vi.fn(), false, false ), @@ -598,10 +583,10 @@ describe('useModuleOverflowMenu', () => { () => useModuleOverflowMenu( mockThermocyclerGen2, - jest.fn(), - jest.fn(), - jest.fn(), - jest.fn(), + vi.fn(), + vi.fn(), + vi.fn(), + vi.fn(), false, false ), @@ -626,16 +611,16 @@ describe('useModuleOverflowMenu', () => { }) describe('useIsHeaterShakerInProtocol', () => { - const store: Store = createStore(jest.fn(), {}) + const store: Store = createStore(vi.fn(), {}) beforeEach(() => { - when(mockUseCurrentRunId).calledWith().mockReturnValue('1') - store.dispatch = jest.fn() + when(useCurrentRunId).calledWith().thenReturn('1') + store.dispatch = vi.fn() - when(mockUseMostRecentCompletedAnalysis) + when(useMostRecentCompletedAnalysis) .calledWith('1') - .mockReturnValue({ - ...heaterShakerCommandsWithResultsKey, + .thenReturn({ + ...heater_shaker_commands_with_results_key, modules: [ { id: 'fake_module_id', @@ -646,19 +631,19 @@ describe('useIsHeaterShakerInProtocol', () => { serialNumber: 'fake_serial', }, ], - labware: Object.keys(heaterShakerCommandsWithResultsKey.labware).map( - id => ({ - location: 'offDeck', - loadName: id, - definitionUrui: id, - id, - }) - ), + labware: Object.keys( + heater_shaker_commands_with_results_key.labware + ).map(id => ({ + location: 'offDeck', + loadName: id, + definitionUrui: id, + id, + })), } as any) }) afterEach(() => { - jest.restoreAllMocks() + vi.restoreAllMocks() }) it('should return true when a heater shaker is in the protocol', () => { @@ -672,19 +657,19 @@ describe('useIsHeaterShakerInProtocol', () => { }) it('should return false when a heater shaker is NOT in the protocol', () => { - when(mockUseMostRecentCompletedAnalysis) + when(useMostRecentCompletedAnalysis) .calledWith('1') - .mockReturnValue({ - ...heaterShakerCommandsWithResultsKey, + .thenReturn({ + ...heater_shaker_commands_with_results_key, modules: [], - labware: Object.keys(heaterShakerCommandsWithResultsKey.labware).map( - id => ({ - location: 'offDeck', - loadName: id, - definitionUrui: id, - id, - }) - ), + labware: Object.keys( + heater_shaker_commands_with_results_key.labware + ).map(id => ({ + location: 'offDeck', + loadName: id, + definitionUrui: id, + id, + })), } as any) const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ children, diff --git a/app/src/organisms/ModuleCard/__tests__/utils.test.ts b/app/src/organisms/ModuleCard/__tests__/utils.test.ts index 76ab20bc1e9..6c3c802715a 100644 --- a/app/src/organisms/ModuleCard/__tests__/utils.test.ts +++ b/app/src/organisms/ModuleCard/__tests__/utils.test.ts @@ -1,3 +1,5 @@ +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' + import { mockHeaterShaker, mockMagneticModule, @@ -30,38 +32,54 @@ const mockThermocyclerGen1ClosedLid = { describe('getModuleCardImage', () => { it('should render the correct image string when there is a magnetic module gen 2 attached', () => { const result = getModuleCardImage(mockMagneticModuleGen2) - 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 correct image string when there is a magnetic module gen 1 attached', () => { const result = getModuleCardImage(mockMagneticModule) - 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 correct image string when there is a temperature module gen 1 attached', () => { const result = getModuleCardImage(mockTemperatureModule) - 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 correct image string when there is a temperature module gen 2 attached', () => { const result = getModuleCardImage(mockTemperatureModuleGen2) - 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 correct image string when there is a heater shaker gen 1 attached', () => { const result = getModuleCardImage(mockHeaterShaker) - expect(result).toEqual('heater_shaker_module_transparent.png') + expect(result).toEqual( + '/app/src/assets/images/heater_shaker_module_transparent.png' + ) }) it('should render the correct image string when there is a thermocycler gen 1 attached with opened lid', () => { const result = getModuleCardImage(mockThermocycler) - expect(result).toEqual('thermocycler_open_transparent.png') + expect(result).toEqual( + '/app/src/assets/images/thermocycler_open_transparent.png' + ) }) it('should render the correct image string when there is a thermocycler gen 1 attached with closed lid', () => { const result = getModuleCardImage(mockThermocyclerGen1ClosedLid) - expect(result).toEqual('thermocycler_closed.png') + expect(result).toEqual('/app/src/assets/images/thermocycler_closed.png') }) it('should render the correct image string when there is a thermocycler gen 2 with opened lid is attached', () => { const result = getModuleCardImage(mockThermocyclerGen2) - expect(result).toEqual('thermocycler_gen_2_opened.png') + expect(result).toEqual( + '/app/src/assets/images/thermocycler_gen_2_opened.png' + ) }) it('should render the correct image string when there is a thermocycler gen 2 with closed lid is attached', () => { const result = getModuleCardImage(mockThermocyclerGen2ClosedLid) - expect(result).toEqual('thermocycler_gen_2_closed.png') + expect(result).toEqual( + '/app/src/assets/images/thermocycler_gen_2_closed.png' + ) }) }) diff --git a/app/src/organisms/Navigation/__tests__/Navigation.test.tsx b/app/src/organisms/Navigation/__tests__/Navigation.test.tsx index c2878d930db..828256d979d 100644 --- a/app/src/organisms/Navigation/__tests__/Navigation.test.tsx +++ b/app/src/organisms/Navigation/__tests__/Navigation.test.tsx @@ -1,67 +1,26 @@ import * as React from 'react' import { MemoryRouter } from 'react-router-dom' +import { fireEvent, screen } from '@testing-library/react' +import { beforeEach, describe, expect, it, vi } from 'vitest' -import { renderWithProviders } from '@opentrons/components' - +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' -import { useNetworkConnection } from '../../../resources/networking/hooks/useNetworkConnection' import { getLocalRobot } from '../../../redux/discovery' import { mockConnectedRobot } from '../../../redux/discovery/__fixtures__' +import { useNetworkConnection } from '../../../resources/networking/hooks/useNetworkConnection' import { NavigationMenu } from '../NavigationMenu' import { Navigation } from '..' -import { fireEvent, screen } from '@testing-library/react' -jest.mock('../../../resources/networking/hooks/useNetworkConnection') -jest.mock('../../../redux/discovery') -jest.mock('../NavigationMenu') - -const mockGetLocalRobot = getLocalRobot as jest.MockedFunction< - typeof getLocalRobot -> -const mockNavigationMenu = NavigationMenu as jest.MockedFunction< - typeof NavigationMenu -> -const mockUseNetworkConnection = useNetworkConnection as jest.MockedFunction< - typeof useNetworkConnection -> -const mockComponent = () => null - -const mockRoutes = [ - { - Component: mockComponent, - exact: true, - name: 'Get started', - path: '/get-started', - }, - { - Component: mockComponent, - exact: true, - name: 'All Protocols', - navLinkTo: '/protocols', - path: '/protocols', - }, - { - Component: mockComponent, - exact: true, - name: 'Instruments', - navLinkTo: '/instruments', - path: '/instruments', - }, - { - Component: mockComponent, - exact: true, - name: 'Settings', - navLinkTo: '/robot-settings', - path: '/robot-settings', - }, -] +vi.mock('../../../resources/networking/hooks/useNetworkConnection') +vi.mock('../../../redux/discovery') +vi.mock('../NavigationMenu') mockConnectedRobot.name = '12345678901234567' class MockIntersectionObserver { - observe = jest.fn() - disconnect = jest.fn() - unobserve = jest.fn() + observe = vi.fn() + disconnect = vi.fn() + unobserve = vi.fn() } Object.defineProperty(window, 'IntersectionObserver', { @@ -88,12 +47,10 @@ const render = (props: React.ComponentProps) => { describe('Navigation', () => { let props: React.ComponentProps beforeEach(() => { - props = { - routes: mockRoutes, - } - mockGetLocalRobot.mockReturnValue(mockConnectedRobot) - mockNavigationMenu.mockReturnValue(
mock NavigationMenu
) - mockUseNetworkConnection.mockReturnValue({ + props = {} + vi.mocked(getLocalRobot).mockReturnValue(mockConnectedRobot) + vi.mocked(NavigationMenu).mockReturnValue(
mock NavigationMenu
) + vi.mocked(useNetworkConnection).mockReturnValue({ isEthernetConnected: false, isWifiConnected: false, isUsbConnected: false, @@ -116,7 +73,7 @@ describe('Navigation', () => { expect(screen.queryByLabelText('network icon')).not.toBeInTheDocument() }) it('should render a network icon', () => { - mockUseNetworkConnection.mockReturnValue({ + vi.mocked(useNetworkConnection).mockReturnValue({ isEthernetConnected: false, isWifiConnected: true, isUsbConnected: false, @@ -136,7 +93,7 @@ describe('Navigation', () => { it('should call the setNavMenuIsOpened prop when you click on the overflow menu button', () => { props = { ...props, - setNavMenuIsOpened: jest.fn(), + setNavMenuIsOpened: vi.fn(), } render(props) fireEvent.click( diff --git a/app/src/organisms/Navigation/__tests__/NavigationMenu.test.tsx b/app/src/organisms/Navigation/__tests__/NavigationMenu.test.tsx index 63832fc7708..1c85aa47861 100644 --- a/app/src/organisms/Navigation/__tests__/NavigationMenu.test.tsx +++ b/app/src/organisms/Navigation/__tests__/NavigationMenu.test.tsx @@ -1,35 +1,31 @@ import * as React from 'react' -import { resetAllWhenMocks } from 'jest-when' import { fireEvent, screen } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { home } from '../../../redux/robot-controls' import { useLights } from '../../Devices/hooks' import { RestartRobotConfirmationModal } from '../RestartRobotConfirmationModal' import { NavigationMenu } from '../NavigationMenu' -jest.mock('../../../redux/robot-admin') -jest.mock('../../../redux/robot-controls') -jest.mock('../../Devices/hooks') -jest.mock('../RestartRobotConfirmationModal') +import type { useHistory } from 'react-router-dom' -const mockPush = jest.fn() -jest.mock('react-router-dom', () => { - const reactRouterDom = jest.requireActual('react-router-dom') +vi.mock('../../../redux/robot-admin') +vi.mock('../../../redux/robot-controls') +vi.mock('../../Devices/hooks') +vi.mock('../RestartRobotConfirmationModal') + +const mockPush = vi.fn() +vi.mock('react-router-dom', async importOriginal => { + const actual = await importOriginal() return { - ...reactRouterDom, + ...actual, useHistory: () => ({ push: mockPush } as any), } }) -const mockUseLights = useLights as jest.MockedFunction -const mockHome = home as jest.MockedFunction -const mockToggleLights = jest.fn() - -const mockRestartRobotConfirmationModal = RestartRobotConfirmationModal as jest.MockedFunction< - typeof RestartRobotConfirmationModal -> +const mockToggleLights = vi.fn() const render = (props: React.ComponentProps) => { return renderWithProviders(, { @@ -41,21 +37,21 @@ describe('NavigationMenu', () => { let props: React.ComponentProps beforeEach(() => { props = { - onClick: jest.fn(), + onClick: vi.fn(), robotName: 'otie', - setShowNavMenu: jest.fn(), + setShowNavMenu: vi.fn(), } - mockUseLights.mockReturnValue({ + vi.mocked(useLights).mockReturnValue({ lightsOn: false, toggleLights: mockToggleLights, }) - mockRestartRobotConfirmationModal.mockReturnValue( + vi.mocked(RestartRobotConfirmationModal).mockReturnValue(
mock RestartRobotConfirmationModal
) }) afterEach(() => { - resetAllWhenMocks() + vi.resetAllMocks() }) it('should render the home menu item and clicking home gantry, dispatches home and call a mock function', () => { render(props) @@ -63,7 +59,7 @@ describe('NavigationMenu', () => { expect(props.onClick).toHaveBeenCalled() screen.getByLabelText('reset-position_icon') fireEvent.click(screen.getByText('Home gantry')) - expect(mockHome).toHaveBeenCalled() + expect(vi.mocked(home)).toHaveBeenCalled() expect(props.setShowNavMenu).toHaveBeenCalled() }) @@ -84,7 +80,7 @@ describe('NavigationMenu', () => { }) it('should render the lights menu item with lights on', () => { - mockUseLights.mockReturnValue({ + vi.mocked(useLights).mockReturnValue({ lightsOn: true, toggleLights: mockToggleLights, }) diff --git a/app/src/organisms/Navigation/__tests__/RestartRobotConfirmationModal.test.tsx b/app/src/organisms/Navigation/__tests__/RestartRobotConfirmationModal.test.tsx index 7b3c26c2b29..b3c3d8ec98e 100644 --- a/app/src/organisms/Navigation/__tests__/RestartRobotConfirmationModal.test.tsx +++ b/app/src/organisms/Navigation/__tests__/RestartRobotConfirmationModal.test.tsx @@ -1,18 +1,16 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' - -import { renderWithProviders } from '@opentrons/components' +import { fireEvent, screen } from '@testing-library/react' +import { beforeEach, describe, expect, it, vi } from 'vitest' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { restartRobot } from '../../../redux/robot-admin' import { RestartRobotConfirmationModal } from '../RestartRobotConfirmationModal' -jest.mock('../../../redux/robot-admin') +vi.mock('../../../redux/robot-admin') + +const mockFunc = vi.fn() -const mockFunc = jest.fn() -const mockRestartRobot = restartRobot as jest.MockedFunction< - typeof restartRobot -> const render = ( props: React.ComponentProps ) => { @@ -32,22 +30,22 @@ describe('RestartRobotConfirmationModal', () => { }) it('should render text and buttons', () => { - const [{ getByText, getByTestId }] = render(props) - getByText('Restart now?') - getByTestId('restart_robot_confirmation_description') - getByText('Go back') - getByText('Restart') + render(props) + screen.getByText('Restart now?') + screen.getByTestId('restart_robot_confirmation_description') + screen.getByText('Go back') + screen.getByText('Restart') }) it('should call a mock function when tapping go back button', () => { - const [{ getByText }] = render(props) - fireEvent.click(getByText('Go back')) + render(props) + fireEvent.click(screen.getByText('Go back')) expect(mockFunc).toHaveBeenCalled() }) it('should call mock restart function when tapping restart', () => { - const [{ getByText }] = render(props) - fireEvent.click(getByText('Restart')) - expect(mockRestartRobot).toHaveBeenCalled() + render(props) + fireEvent.click(screen.getByText('Restart')) + expect(vi.mocked(restartRobot)).toHaveBeenCalled() }) }) diff --git a/app/src/organisms/Navigation/index.tsx b/app/src/organisms/Navigation/index.tsx index b1bebdbcc7a..2af5d004259 100644 --- a/app/src/organisms/Navigation/index.tsx +++ b/app/src/organisms/Navigation/index.tsx @@ -29,8 +29,8 @@ import { NavigationMenu } from './NavigationMenu' import type { ON_DEVICE_DISPLAY_PATHS } from '../../App/OnDeviceDisplayApp' const NAV_LINKS: Array = [ - '/instruments', '/protocols', + '/instruments', '/robot-settings', ] @@ -116,7 +116,10 @@ export function Navigation(props: NavigationProps): JSX.Element { {iconName != null ? ( {NAV_LINKS.map(path => ( - + ))} { handleMenu(true) }} + onClick={() => { + handleMenu(true) + }} > {showNavMenu && ( { handleMenu(false) }} + onClick={() => { + handleMenu(false) + }} robotName={robotName} setShowNavMenu={setShowNavMenu} /> diff --git a/app/src/organisms/NetworkSettings/__tests__/AlternativeSecurityTypeModal.test.tsx b/app/src/organisms/NetworkSettings/__tests__/AlternativeSecurityTypeModal.test.tsx index 2a289c849f4..d838c397942 100644 --- a/app/src/organisms/NetworkSettings/__tests__/AlternativeSecurityTypeModal.test.tsx +++ b/app/src/organisms/NetworkSettings/__tests__/AlternativeSecurityTypeModal.test.tsx @@ -1,16 +1,19 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { fireEvent, screen } from '@testing-library/react' +import { beforeEach, describe, expect, it, vi } from 'vitest' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { AlternativeSecurityTypeModal } from '../AlternativeSecurityTypeModal' -const mockFunc = jest.fn() -const mockPush = jest.fn() -jest.mock('react-router-dom', () => { - const reactRouterDom = jest.requireActual('react-router-dom') +import type { useHistory } from 'react-router-dom' + +const mockFunc = vi.fn() +const mockPush = vi.fn() +vi.mock('react-router-dom', async importOriginal => { + const actual = await importOriginal() return { - ...reactRouterDom, + ...actual, useHistory: () => ({ push: mockPush } as any), } }) @@ -33,23 +36,23 @@ describe('AlternativeSecurityTypeModal', () => { }) it('should render text and button', () => { - const [{ getByText }] = render(props) - getByText('Alternative security types') - getByText( + render(props) + screen.getByText('Alternative security types') + screen.getByText( 'The Opentrons App supports connecting Flex to various enterprise access points. Connect via USB and finish setup in the app.' ) - getByText('Connect via USB') + screen.getByText('Connect via USB') }) it('should call mock function when tapping close button', () => { - const [{ getByLabelText }] = render(props) - const button = getByLabelText('closeIcon') + render(props) + const button = screen.getByLabelText('closeIcon') fireEvent.click(button) expect(mockFunc).toHaveBeenCalled() }) it('should call mock function when tapping connect via usb button', () => { - const [{ getByText }] = render(props) - const button = getByText('Connect via USB') + render(props) + const button = screen.getByText('Connect via USB') fireEvent.click(button) expect(mockFunc).toHaveBeenCalled() expect(mockPush).toHaveBeenCalledWith('/network-setup/usb') diff --git a/app/src/organisms/NetworkSettings/__tests__/ConnectingNetwork.test.tsx b/app/src/organisms/NetworkSettings/__tests__/ConnectingNetwork.test.tsx index d69700cc1a2..9d19cba1822 100644 --- a/app/src/organisms/NetworkSettings/__tests__/ConnectingNetwork.test.tsx +++ b/app/src/organisms/NetworkSettings/__tests__/ConnectingNetwork.test.tsx @@ -1,8 +1,9 @@ import * as React from 'react' import { MemoryRouter } from 'react-router-dom' +import { screen } from '@testing-library/react' +import { beforeEach, describe, expect, it } from 'vitest' -import { renderWithProviders } from '@opentrons/components' - +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { ConnectingNetwork } from '../ConnectingNetwork' @@ -26,12 +27,12 @@ describe('ConnectingNetwork', () => { } }) it('should render text', () => { - const [{ getByText }] = render(props) - getByText('Connecting to mockWifiSsid...') + render(props) + screen.getByText('Connecting to mockWifiSsid...') }) it('should render a spinner icon', () => { - const [{ getByLabelText }] = render(props) - expect(getByLabelText('spinner')).toBeInTheDocument() + render(props) + expect(screen.getByLabelText('spinner')).toBeInTheDocument() }) }) diff --git a/app/src/organisms/NetworkSettings/__tests__/DisplaySearchNetwork.test.tsx b/app/src/organisms/NetworkSettings/__tests__/DisplaySearchNetwork.test.tsx index d35925d97bb..e582356a474 100644 --- a/app/src/organisms/NetworkSettings/__tests__/DisplaySearchNetwork.test.tsx +++ b/app/src/organisms/NetworkSettings/__tests__/DisplaySearchNetwork.test.tsx @@ -1,7 +1,10 @@ import * as React from 'react' +import { screen } from '@testing-library/react' +import { describe, expect, it } from 'vitest' -import { COLORS, renderWithProviders } from '@opentrons/components' +import { COLORS } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { DisplaySearchNetwork } from '../DisplaySearchNetwork' @@ -13,9 +16,9 @@ const render = () => { describe('SearchNetwork', () => { it('should render search screen with background', () => { - const [{ getByText, getByTestId }] = render() - getByText('Searching for networks...') - expect(getByTestId('Display-Search-Network-text')).toHaveStyle( + render() + screen.getByText('Searching for networks...') + expect(screen.getByTestId('Display-Search-Network-text')).toHaveStyle( `background-color: ${COLORS.white}` ) }) diff --git a/app/src/organisms/NetworkSettings/__tests__/DisplayWifiList.test.tsx b/app/src/organisms/NetworkSettings/__tests__/DisplayWifiList.test.tsx index 81558ca0567..5244f2b0bef 100644 --- a/app/src/organisms/NetworkSettings/__tests__/DisplayWifiList.test.tsx +++ b/app/src/organisms/NetworkSettings/__tests__/DisplayWifiList.test.tsx @@ -1,14 +1,16 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' - -import { renderWithProviders } from '@opentrons/components' +import { fireEvent, screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import * as Fixtures from '../../../redux/networking/__fixtures__' import { DisplaySearchNetwork } from '../DisplaySearchNetwork' import { DisplayWifiList } from '../DisplayWifiList' -const mockPush = jest.fn() +import type { useHistory } from 'react-router-dom' + +const mockPush = vi.fn() const mockWifiList = [ { ...Fixtures.mockWifiNetwork, ssid: 'foo', active: true }, { ...Fixtures.mockWifiNetwork, ssid: 'bar' }, @@ -18,18 +20,18 @@ const mockWifiList = [ }, ] -jest.mock('../../../redux/networking/selectors') -jest.mock('../../../redux/discovery/selectors') -jest.mock('../DisplaySearchNetwork') -jest.mock('react-router-dom', () => { - const reactRouterDom = jest.requireActual('react-router-dom') +vi.mock('../../../redux/networking/selectors') +vi.mock('../../../redux/discovery/selectors') +vi.mock('../DisplaySearchNetwork') +vi.mock('react-router-dom', async importOriginal => { + const actual = await importOriginal() return { - ...reactRouterDom, + ...actual, useHistory: () => ({ push: mockPush } as any), } }) -const mockDisplaySearchNetwork = DisplaySearchNetwork as jest.MockedFunction< +const mockDisplaySearchNetwork = DisplaySearchNetwork as vi.MockedFunction< typeof DisplaySearchNetwork > @@ -44,8 +46,8 @@ describe('DisplayWifiList', () => { beforeEach(() => { props = { list: mockWifiList, - handleJoinAnotherNetwork: jest.fn(), - handleNetworkPress: jest.fn(), + handleJoinAnotherNetwork: vi.fn(), + handleNetworkPress: vi.fn(), isHeader: true, } mockDisplaySearchNetwork.mockReturnValue( @@ -54,34 +56,36 @@ describe('DisplayWifiList', () => { }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('should render a wifi list, button and spinner', () => { - const [{ getByText, getByLabelText }] = render(props) - getByText('Select a network') - getByText('foo') - getByText('bar') - getByText('baz') - getByLabelText('back-button') + render(props) + screen.getByText('Select a network') + screen.getByText('foo') + screen.getByText('bar') + screen.getByText('baz') + screen.getByLabelText('back-button') }) it('should not render a spinner', () => { props = { ...props } - const [{ queryByTestId }] = render(props) - expect(queryByTestId('wifi_list_search_spinner')).not.toBeInTheDocument() + render(props) + expect( + screen.queryByTestId('wifi_list_search_spinner') + ).not.toBeInTheDocument() }) it('should call mock functions when back', () => { - const [{ getByLabelText }] = render(props) - const button = getByLabelText('back-button') + render(props) + const button = screen.getByLabelText('back-button') fireEvent.click(button) expect(mockPush).toHaveBeenCalledWith('/network-setup') }) it('should call mock function when tapping tapping a ssid', () => { - const [{ getByText }] = render(props) - const button = getByText('foo') + render(props) + const button = screen.getByText('foo') fireEvent.click(button) expect(props.handleNetworkPress).toHaveBeenCalledWith('foo') }) diff --git a/app/src/organisms/NetworkSettings/__tests__/FailedToConnect.test.tsx b/app/src/organisms/NetworkSettings/__tests__/FailedToConnect.test.tsx index da7d6a64ee7..22a9a4d9440 100644 --- a/app/src/organisms/NetworkSettings/__tests__/FailedToConnect.test.tsx +++ b/app/src/organisms/NetworkSettings/__tests__/FailedToConnect.test.tsx @@ -1,9 +1,9 @@ import * as React from 'react' import { MemoryRouter } from 'react-router-dom' -import { fireEvent } from '@testing-library/react' - -import { renderWithProviders } from '@opentrons/components' +import { fireEvent, screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { FailedToConnect } from '../FailedToConnect' @@ -39,41 +39,41 @@ describe('ConnectedResult', () => { props = { requestState: failureState, selectedSsid: 'mockSsid', - handleChangeNetwork: jest.fn(), - handleTryAgain: jest.fn(), + handleChangeNetwork: vi.fn(), + handleTryAgain: vi.fn(), isInvalidPassword: true, } }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('should render a failure screen - incorrect password', () => { - const [{ getByText }] = render(props) - getByText('Oops! Incorrect password for mockSsid') - getByText('Try again') - getByText('Change network') + render(props) + screen.getByText('Oops! Incorrect password for mockSsid') + screen.getByText('Try again') + screen.getByText('Change network') }) it('should render a failure screen - other error cases', () => { props.isInvalidPassword = false - const [{ getByText }] = render(props) - getByText('Failed to connect to mockSsid') - getByText('Try again') - getByText('Change network') + render(props) + screen.getByText('Failed to connect to mockSsid') + screen.getByText('Try again') + screen.getByText('Change network') }) it('should call handleChangeNetwork when pressing Change network', () => { - const [{ getByText }] = render(props) - const button = getByText('Change network') + render(props) + const button = screen.getByText('Change network') fireEvent.click(button) expect(props.handleChangeNetwork).toHaveBeenCalled() }) it('should call handleTryAgain when pressing Try again', () => { - const [{ getByText }] = render(props) - const button = getByText('Try again') + render(props) + const button = screen.getByText('Try again') fireEvent.click(button) expect(props.handleTryAgain).toHaveBeenCalled() }) diff --git a/app/src/organisms/NetworkSettings/__tests__/SelectAuthenticationType.test.tsx b/app/src/organisms/NetworkSettings/__tests__/SelectAuthenticationType.test.tsx index 7b63ae98db0..2028e100991 100644 --- a/app/src/organisms/NetworkSettings/__tests__/SelectAuthenticationType.test.tsx +++ b/app/src/organisms/NetworkSettings/__tests__/SelectAuthenticationType.test.tsx @@ -1,28 +1,30 @@ import * as React from 'react' import { fireEvent, screen } from '@testing-library/react' import { MemoryRouter } from 'react-router-dom' +import { afterEach, beforeEach, describe, it, vi } from 'vitest' -import { renderWithProviders } from '@opentrons/components' - +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' -import * as Networking from '../../../redux/networking' -import { SetWifiCred } from '../SetWifiCred' -import { AlternativeSecurityTypeModal } from '../AlternativeSecurityTypeModal' +import { getNetworkInterfaces, INTERFACE_WIFI } from '../../../redux/networking' import { useIsUnboxingFlowOngoing } from '../../RobotSettingsDashboard/NetworkSettings/hooks' +import { AlternativeSecurityTypeModal } from '../AlternativeSecurityTypeModal' import { SelectAuthenticationType } from '../SelectAuthenticationType' +import { SetWifiCred } from '../SetWifiCred' + +import type { useHistory } from 'react-router-dom' -const mockPush = jest.fn() -const mockSetSelectedAuthType = jest.fn() +const mockPush = vi.fn() +const mockSetSelectedAuthType = vi.fn() -jest.mock('../SetWifiCred') -jest.mock('../../../redux/networking') -jest.mock('../../../redux/discovery/selectors') -jest.mock('../AlternativeSecurityTypeModal') -jest.mock('../../RobotSettingsDashboard/NetworkSettings/hooks') -jest.mock('react-router-dom', () => { - const reactRouterDom = jest.requireActual('react-router-dom') +vi.mock('../SetWifiCred') +vi.mock('../../../redux/networking') +vi.mock('../../../redux/discovery/selectors') +vi.mock('../AlternativeSecurityTypeModal') +vi.mock('../../RobotSettingsDashboard/NetworkSettings/hooks') +vi.mock('react-router-dom', async importOriginal => { + const actual = await importOriginal() return { - ...reactRouterDom, + ...actual, useHistory: () => ({ push: mockPush } as any), } }) @@ -31,20 +33,9 @@ const initialMockWifi = { ipAddress: '127.0.0.100', subnetMask: '255.255.255.230', macAddress: 'WI:FI:00:00:00:00', - type: Networking.INTERFACE_WIFI, + type: INTERFACE_WIFI, } -const mockGetNetworkInterfaces = Networking.getNetworkInterfaces as jest.MockedFunction< - typeof Networking.getNetworkInterfaces -> -const mockSetWifiCred = SetWifiCred as jest.MockedFunction -const mockAlternativeSecurityTypeModal = AlternativeSecurityTypeModal as jest.MockedFunction< - typeof AlternativeSecurityTypeModal -> -const mockUseIsUnboxingFlowOngoing = useIsUnboxingFlowOngoing as jest.MockedFunction< - typeof useIsUnboxingFlowOngoing -> - const render = ( props: React.ComponentProps ) => { @@ -65,19 +56,19 @@ describe('SelectAuthenticationType', () => { selectedAuthType: 'wpa-psk', setSelectedAuthType: mockSetSelectedAuthType, } - mockGetNetworkInterfaces.mockReturnValue({ + vi.mocked(getNetworkInterfaces).mockReturnValue({ wifi: initialMockWifi, ethernet: null, }) - mockSetWifiCred.mockReturnValue(
Mock SetWifiCred
) - mockAlternativeSecurityTypeModal.mockReturnValue( + vi.mocked(SetWifiCred).mockReturnValue(
Mock SetWifiCred
) + vi.mocked(AlternativeSecurityTypeModal).mockReturnValue(
mock AlternativeSecurityTypeModal
) - mockUseIsUnboxingFlowOngoing.mockReturnValue(true) + vi.mocked(useIsUnboxingFlowOngoing).mockReturnValue(true) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('should render text and buttons', () => { diff --git a/app/src/organisms/NetworkSettings/__tests__/SetWifiCred.test.tsx b/app/src/organisms/NetworkSettings/__tests__/SetWifiCred.test.tsx index 303fd0b2556..6532203b4cb 100644 --- a/app/src/organisms/NetworkSettings/__tests__/SetWifiCred.test.tsx +++ b/app/src/organisms/NetworkSettings/__tests__/SetWifiCred.test.tsx @@ -1,15 +1,15 @@ import * as React from 'react' import { MemoryRouter } from 'react-router-dom' -import { fireEvent } from '@testing-library/react' - -import { renderWithProviders } from '@opentrons/components' +import { fireEvent, screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { SetWifiCred } from '../SetWifiCred' -const mockSetPassword = jest.fn() -jest.mock('../../../redux/discovery') -jest.mock('../../../redux/robot-api') +const mockSetPassword = vi.fn() +vi.mock('../../../redux/discovery') +vi.mock('../../../redux/robot-api') const render = (props: React.ComponentProps) => { return renderWithProviders( @@ -32,34 +32,34 @@ describe('SetWifiCred', () => { }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('should render text, button and software keyboard', () => { - const [{ getByText, getByRole, getByLabelText }] = render(props) - getByText('Enter password') - expect(getByLabelText('wifi_password')).toBeInTheDocument() - getByRole('button', { name: 'Show' }) + render(props) + screen.getByText('Enter password') + expect(screen.getByLabelText('wifi_password')).toBeInTheDocument() + screen.getByRole('button', { name: 'Show' }) // software keyboard - getByRole('button', { name: 'del' }) - getByRole('button', { name: 'a' }) - getByRole('button', { name: 'SHIFT' }) + screen.getByRole('button', { name: 'del' }) + screen.getByRole('button', { name: 'a' }) + screen.getByRole('button', { name: 'SHIFT' }) }) it('should display password', () => { - const [{ getByLabelText }] = render(props) - const inputBox = getByLabelText('wifi_password') + render(props) + const inputBox = screen.getByLabelText('wifi_password') expect(inputBox).toHaveValue('mock-password') }) it('should switch the input type and button text when tapping the icon next to the input', () => { - const [{ getByRole, getByLabelText }] = render(props) - const button = getByRole('button', { name: 'Show' }) - // ToDo: 11/08/2022 kj switch to getByRole once understand the issue on this input - const inputBox = getByLabelText('wifi_password') + render(props) + const button = screen.getByRole('button', { name: 'Show' }) + // ToDo: 11/08/2022 kj switch to screen.getByRole once understand the issue on this input + const inputBox = screen.getByLabelText('wifi_password') expect(inputBox).toHaveAttribute('type', 'password') fireEvent.click(button) - getByRole('button', { name: 'Hide' }) + screen.getByRole('button', { name: 'Hide' }) expect(inputBox).toHaveAttribute('type', 'text') }) }) diff --git a/app/src/organisms/NetworkSettings/__tests__/SetWifiSsid.test.tsx b/app/src/organisms/NetworkSettings/__tests__/SetWifiSsid.test.tsx index 8793dbea9f6..761364da978 100644 --- a/app/src/organisms/NetworkSettings/__tests__/SetWifiSsid.test.tsx +++ b/app/src/organisms/NetworkSettings/__tests__/SetWifiSsid.test.tsx @@ -1,13 +1,13 @@ import * as React from 'react' import { MemoryRouter } from 'react-router-dom' -import { fireEvent } from '@testing-library/react' - -import { renderWithProviders } from '@opentrons/components' +import { fireEvent, screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { SetWifiSsid } from '../SetWifiSsid' -const mockSetSelectedSsid = jest.fn() +const mockSetSelectedSsid = vi.fn() const render = (props: React.ComponentProps) => { return renderWithProviders( @@ -30,24 +30,24 @@ describe('SetWifiSsid', () => { }) afterEach(() => { - jest.clearAllMocks() + vi.clearAllMocks() }) it('should render text, buttons, input and software keyboard', () => { - const [{ getByText, getByRole, getByLabelText }] = render(props) - getByText('Enter network name') - getByLabelText('wifi_ssid') - getByRole('button', { name: 'a' }) - getByRole('button', { name: 'b' }) - getByRole('button', { name: 'c' }) + render(props) + screen.getByText('Enter network name') + screen.getByLabelText('wifi_ssid') + screen.getByRole('button', { name: 'a' }) + screen.getByRole('button', { name: 'b' }) + screen.getByRole('button', { name: 'c' }) }) it('when tapping keys, tapped key value is displayed in the input', () => { - const [{ getByLabelText, getByRole }] = render(props) - const inputBox = getByLabelText('wifi_ssid') - const aKey = getByRole('button', { name: 'a' }) - const bKey = getByRole('button', { name: 'b' }) - const cKey = getByRole('button', { name: 'c' }) + render(props) + const inputBox = screen.getByLabelText('wifi_ssid') + const aKey = screen.getByRole('button', { name: 'a' }) + const bKey = screen.getByRole('button', { name: 'b' }) + const cKey = screen.getByRole('button', { name: 'c' }) fireEvent.click(aKey) fireEvent.click(bKey) fireEvent.click(cKey) diff --git a/app/src/organisms/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx b/app/src/organisms/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx index 48733861c1c..479f8c65ab0 100644 --- a/app/src/organisms/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx +++ b/app/src/organisms/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx @@ -1,38 +1,32 @@ import * as React from 'react' -import { fireEvent, screen } from '@testing-library/react' import { MemoryRouter } from 'react-router-dom' +import { fireEvent, screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' -import { renderWithProviders } from '@opentrons/components' - +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { useWifiList } from '../../../resources/networking/hooks' -import * as Networking from '../../../redux/networking' +import { getNetworkInterfaces, INTERFACE_WIFI } from '../../../redux/networking' import * as Fixtures from '../../../redux/networking/__fixtures__' import { NetworkDetailsModal } from '../../RobotSettingsDashboard/NetworkSettings/NetworkDetailsModal' import { WifiConnectionDetails } from '../WifiConnectionDetails' -jest.mock('../../../resources/networking/hooks') -jest.mock('../../../redux/networking') -jest.mock('../../../redux/discovery/selectors') -jest.mock('../../RobotSettingsDashboard/NetworkSettings/NetworkDetailsModal') +import type { useHistory } from 'react-router-dom' -const mockPush = jest.fn() -jest.mock('react-router-dom', () => { - const reactRouterDom = jest.requireActual('react-router-dom') +vi.mock('../../../resources/networking/hooks') +vi.mock('../../../redux/networking') +vi.mock('../../../redux/discovery/selectors') +vi.mock('../../RobotSettingsDashboard/NetworkSettings/NetworkDetailsModal') + +const mockPush = vi.fn() +vi.mock('react-router-dom', async importOriginal => { + const actual = await importOriginal() return { - ...reactRouterDom, + ...actual, useHistory: () => ({ push: mockPush } as any), } }) -const mockGetNetworkInterfaces = Networking.getNetworkInterfaces as jest.MockedFunction< - typeof Networking.getNetworkInterfaces -> -const mockUseWifiList = useWifiList as jest.MockedFunction -const mokcNetworkDetailsModal = NetworkDetailsModal as jest.MockedFunction< - typeof NetworkDetailsModal -> - const render = (props: React.ComponentProps) => { return renderWithProviders( @@ -48,7 +42,7 @@ const initialMockWifi = { ipAddress: '127.0.0.100', subnetMask: '255.255.255.230', macAddress: 'WI:FI:00:00:00:00', - type: Networking.INTERFACE_WIFI, + type: INTERFACE_WIFI, } const mockWifiList = [ @@ -63,16 +57,18 @@ describe('WifiConnectionDetails', () => { ssid: 'mockWifi', authType: 'wpa-psk', } - mockGetNetworkInterfaces.mockReturnValue({ + vi.mocked(getNetworkInterfaces).mockReturnValue({ wifi: initialMockWifi, ethernet: null, }) - mockUseWifiList.mockReturnValue(mockWifiList) - mokcNetworkDetailsModal.mockReturnValue(
mock NetworkDetailsModal
) + vi.mocked(useWifiList).mockReturnValue(mockWifiList) + vi.mocked(NetworkDetailsModal).mockReturnValue( +
mock NetworkDetailsModal
+ ) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('should render title and description', () => { diff --git a/app/src/organisms/OnDeviceDisplay/NameRobot/__tests__/ConfirmRobotName.test.tsx b/app/src/organisms/OnDeviceDisplay/NameRobot/__tests__/ConfirmRobotName.test.tsx index db77fc99541..5b6966ff0a6 100644 --- a/app/src/organisms/OnDeviceDisplay/NameRobot/__tests__/ConfirmRobotName.test.tsx +++ b/app/src/organisms/OnDeviceDisplay/NameRobot/__tests__/ConfirmRobotName.test.tsx @@ -1,18 +1,20 @@ import * as React from 'react' import { MemoryRouter } from 'react-router-dom' -import { fireEvent } from '@testing-library/react' - -import { renderWithProviders } from '@opentrons/components' +import { fireEvent, screen } from '@testing-library/react' +import { beforeEach, describe, expect, it, vi } from 'vitest' +import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../i18n' import { ConfirmRobotName } from '../ConfirmRobotName' -const mockPush = jest.fn() +import type { useHistory } from 'react-router-dom' + +const mockPush = vi.fn() -jest.mock('react-router-dom', () => { - const reactRouterDom = jest.requireActual('react-router-dom') +vi.mock('react-router-dom', async importOriginal => { + const actual = await importOriginal() return { - ...reactRouterDom, + ...actual, useHistory: () => ({ push: mockPush } as any), } }) @@ -37,15 +39,15 @@ describe('ConfirmRobotName', () => { }) it('should render text, an image and a button', () => { - const [{ getByText }] = render(props) - getByText('otie, love it!') - getByText('Your robot is ready to go.') - getByText('Finish setup') + render(props) + screen.getByText('otie, love it!') + screen.getByText('Your robot is ready to go.') + screen.getByText('Finish setup') }) it('when tapping a button, call a mock function', () => { - const [{ getByText }] = render(props) - const button = getByText('Finish setup') + render(props) + const button = screen.getByText('Finish setup') fireEvent.click(button) expect(mockPush).toBeCalledWith('/dashboard') }) diff --git a/app/src/organisms/OnDeviceDisplay/ProtocolDetails/__tests__/ProtocolDetailsSkeleton.test.tsx b/app/src/organisms/OnDeviceDisplay/ProtocolDetails/__tests__/ProtocolDetailsSkeleton.test.tsx index e8f4db6ec7c..04c377834ef 100644 --- a/app/src/organisms/OnDeviceDisplay/ProtocolDetails/__tests__/ProtocolDetailsSkeleton.test.tsx +++ b/app/src/organisms/OnDeviceDisplay/ProtocolDetails/__tests__/ProtocolDetailsSkeleton.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' - -import { render } from '@testing-library/react' +import { render, screen } from '@testing-library/react' +import { describe, expect, it } from 'vitest' import { ProtocolDetailsHeaderChipSkeleton, @@ -10,22 +10,22 @@ import { describe('ProtocolDetailsSkeleton', () => { it('renders a Skeleton to replace the Chip component', () => { - const { getAllByTestId } = render() - const chipSkeleton = getAllByTestId('Skeleton') + render() + const chipSkeleton = screen.getAllByTestId('Skeleton') expect(chipSkeleton.length).toEqual(1) expect(chipSkeleton[0]).toHaveStyle('background-size: 99rem') }) it('renders a Skeleton to replace the title section', () => { - const { getAllByTestId } = render() - const titleSkeleton = getAllByTestId('Skeleton') + render() + const titleSkeleton = screen.getAllByTestId('Skeleton') expect(titleSkeleton.length).toEqual(1) expect(titleSkeleton[0]).toHaveStyle('background-size: 99rem') }) it('renders Skeletons to replace the ProtocolSectionContent component', () => { - const { getAllByTestId } = render() - const contentSkeletons = getAllByTestId('Skeleton') + render() + const contentSkeletons = screen.getAllByTestId('Skeleton') expect(contentSkeletons.length).toEqual(5) contentSkeletons.forEach(contentSkeleton => { expect(contentSkeleton).toHaveStyle('background-size: 99rem') diff --git a/app/src/organisms/OnDeviceDisplay/ProtocolSetup/__tests__/ProtocolSetupSkeleton.test.tsx b/app/src/organisms/OnDeviceDisplay/ProtocolSetup/__tests__/ProtocolSetupSkeleton.test.tsx index ab8a34963b1..53f5506c4a7 100644 --- a/app/src/organisms/OnDeviceDisplay/ProtocolSetup/__tests__/ProtocolSetupSkeleton.test.tsx +++ b/app/src/organisms/OnDeviceDisplay/ProtocolSetup/__tests__/ProtocolSetupSkeleton.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' - -import { render } from '@testing-library/react' +import { render, screen } from '@testing-library/react' +import { describe, expect, it } from 'vitest' import { ProtocolSetupTitleSkeleton, @@ -9,8 +9,8 @@ import { describe('ProtocolSetupSkeleton', () => { it('renders Skeletons to replace the title section', () => { - const { getAllByTestId } = render() - const titleSkeletons = getAllByTestId('Skeleton') + render() + const titleSkeletons = screen.getAllByTestId('Skeleton') expect(titleSkeletons.length).toBe(2) titleSkeletons.forEach(titleSkeleton => { @@ -19,8 +19,8 @@ describe('ProtocolSetupSkeleton', () => { }) it('renders Skeletons to replace the SetupStep components', () => { - const { getAllByTestId } = render() - const titleSkeletons = getAllByTestId('Skeleton') + render() + const titleSkeletons = screen.getAllByTestId('Skeleton') expect(titleSkeletons.length).toBe(5) titleSkeletons.forEach(titleSkeleton => { diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/EmptyRecentRun.test.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/EmptyRecentRun.test.tsx index 56871c6dd62..25e8df22f2b 100644 --- a/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/EmptyRecentRun.test.tsx +++ b/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/EmptyRecentRun.test.tsx @@ -1,10 +1,13 @@ import * as React from 'react' +import { screen } from '@testing-library/react' +import { describe, expect, it } from 'vitest' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../i18n' import { EmptyRecentRun } from '../EmptyRecentRun' -const PNG_FILE_NAME = 'empty_protocol_dashboard.png' +const PNG_FILE_NAME = + '/app/src/assets/images/on-device-display/empty_protocol_dashboard.png' const render = () => { return renderWithProviders(, { @@ -14,11 +17,11 @@ const render = () => { describe('EmptyRecentRun', () => { it('should render image and text', () => { - const [{ getByText, getByAltText, getByRole }] = render() - getByAltText('No recent runs') - getByText('No recent runs') - getByText('After you run some protocols, they will appear here.') - const image = getByRole('img') + render() + screen.getByAltText('No recent runs') + screen.getByText('No recent runs') + screen.getByText('After you run some protocols, they will appear here.') + const image = screen.getByRole('img') expect(image.getAttribute('src')).toEqual(PNG_FILE_NAME) }) }) diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx index 4b48b6004b2..0102129f4c0 100644 --- a/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx +++ b/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx @@ -1,13 +1,15 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { formatDistance } from 'date-fns' -import { when, resetAllWhenMocks } from 'jest-when' import { MemoryRouter } from 'react-router-dom' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { when } from 'vitest-when' import { useProtocolQuery } from '@opentrons/react-api-client' import { RUN_STATUS_FAILED } from '@opentrons/api-client' -import { COLORS, renderWithProviders } from '@opentrons/components' +import { COLORS } from '@opentrons/components' +import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../i18n' import { Skeleton } from '../../../../atoms/Skeleton' import { useMissingProtocolHardware } from '../../../../pages/Protocols/hooks' @@ -20,15 +22,15 @@ import { useNotifyAllRunsQuery } from '../../../../resources/runs/useNotifyAllRu import type { ProtocolHardware } from '../../../../pages/Protocols/hooks' -jest.mock('@opentrons/react-api-client') -jest.mock('../../../../atoms/Skeleton') -jest.mock('../../../../pages/Protocols/hooks') -jest.mock('../../../../organisms/Devices/hooks') -jest.mock('../../../../organisms/RunTimeControl/hooks') -jest.mock('../../../../organisms/ProtocolUpload/hooks') -jest.mock('../../../../redux/analytics') -jest.mock('../hooks') -jest.mock('../../../../resources/runs/useNotifyAllRunsQuery') +vi.mock('@opentrons/react-api-client') +vi.mock('../../../../atoms/Skeleton') +vi.mock('../../../../pages/Protocols/hooks') +vi.mock('../../../../organisms/Devices/hooks') +vi.mock('../../../../organisms/RunTimeControl/hooks') +vi.mock('../../../../organisms/ProtocolUpload/hooks') +vi.mock('../../../../redux/analytics') +vi.mock('../hooks') +vi.mock('../../../../resources/runs/useNotifyAllRunsQuery') const RUN_ID = 'mockRunId' @@ -74,28 +76,7 @@ const mockRunData = { status: RUN_STATUS_FAILED, } as any -let mockCloneRun: jest.Mock - -const mockUseMissingProtocolHardware = useMissingProtocolHardware as jest.MockedFunction< - typeof useMissingProtocolHardware -> -const mockUseNotifyAllRunsQuery = useNotifyAllRunsQuery as jest.MockedFunction< - typeof useNotifyAllRunsQuery -> -const mockUseProtocolQuery = useProtocolQuery as jest.MockedFunction< - typeof useProtocolQuery -> -const mockUseTrackProtocolRunEvent = useTrackProtocolRunEvent as jest.MockedFunction< - typeof useTrackProtocolRunEvent -> -const mockUseTrackEvent = useTrackEvent as jest.MockedFunction< - typeof useTrackEvent -> -const mockUseCloneRun = useCloneRun as jest.MockedFunction -const mockUseHardwareStatusText = useHardwareStatusText as jest.MockedFunction< - typeof useHardwareStatusText -> -const mockSkeleton = Skeleton as jest.MockedFunction +const mockCloneRun = vi.fn() const render = (props: React.ComponentProps) => { return renderWithProviders( @@ -108,8 +89,10 @@ const render = (props: React.ComponentProps) => { ) } -let mockTrackEvent: jest.Mock -let mockTrackProtocolRunEvent: jest.Mock +const mockTrackEvent = vi.fn() +const mockTrackProtocolRunEvent = vi.fn( + () => new Promise(resolve => resolve({})) +) describe('RecentRunProtocolCard', () => { let props: React.ComponentProps @@ -118,40 +101,35 @@ describe('RecentRunProtocolCard', () => { props = { runData: mockRunData, } - mockTrackEvent = jest.fn() - mockTrackProtocolRunEvent = jest.fn( - () => new Promise(resolve => resolve({})) - ) - mockSkeleton.mockReturnValue(
mock Skeleton
) - mockUseHardwareStatusText.mockReturnValue('Ready to run') - mockUseTrackEvent.mockReturnValue(mockTrackEvent) - mockUseMissingProtocolHardware.mockReturnValue({ + + vi.mocked(Skeleton).mockReturnValue(
mock Skeleton
) + vi.mocked(useHardwareStatusText).mockReturnValue('Ready to run') + vi.mocked(useTrackEvent).mockReturnValue(mockTrackEvent) + vi.mocked(useMissingProtocolHardware).mockReturnValue({ missingProtocolHardware: [], isLoading: false, conflictedSlots: [], }) - mockUseNotifyAllRunsQuery.mockReturnValue({ + vi.mocked(useNotifyAllRunsQuery).mockReturnValue({ data: { data: [mockRunData] }, } as any) - mockUseProtocolQuery.mockReturnValue({ + vi.mocked(useProtocolQuery).mockReturnValue({ data: { data: { metadata: { protocolName: 'mockProtocol' } } }, } as any) - when(mockUseTrackProtocolRunEvent).calledWith(RUN_ID).mockReturnValue({ + when(useTrackProtocolRunEvent).calledWith(RUN_ID).thenReturn({ trackProtocolRunEvent: mockTrackProtocolRunEvent, }) - mockCloneRun = jest.fn() - when(mockUseCloneRun) + when(useCloneRun) .calledWith(RUN_ID, expect.anything()) - .mockReturnValue({ cloneRun: mockCloneRun, isLoading: false }) + .thenReturn({ cloneRun: mockCloneRun, isLoading: false }) }) afterEach(() => { - resetAllWhenMocks() - jest.clearAllMocks() + vi.clearAllMocks() }) it('should render text', () => { - const [{ getByText }] = render(props) + render(props) const lastRunTime = formatDistance( new Date(mockRunData.createdAt), new Date(), @@ -159,59 +137,59 @@ describe('RecentRunProtocolCard', () => { addSuffix: true, } ).replace('about ', '') - getByText('Ready to run') - getByText('mockProtocol') - getByText(`Failed ${lastRunTime}`) + screen.getByText('Ready to run') + screen.getByText('mockProtocol') + screen.getByText(`Failed ${lastRunTime}`) }) it('should render missing chip when missing a pipette', () => { - mockUseMissingProtocolHardware.mockReturnValue({ + vi.mocked(useMissingProtocolHardware).mockReturnValue({ missingProtocolHardware: mockMissingPipette, isLoading: false, conflictedSlots: [], }) - mockUseHardwareStatusText.mockReturnValue('Missing 1 pipette') - const [{ getByText }] = render(props) - getByText('Missing 1 pipette') + vi.mocked(useHardwareStatusText).mockReturnValue('Missing 1 pipette') + render(props) + screen.getByText('Missing 1 pipette') }) it('should render missing chip when conflicted fixture', () => { - mockUseMissingProtocolHardware.mockReturnValue({ + vi.mocked(useMissingProtocolHardware).mockReturnValue({ missingProtocolHardware: [], isLoading: false, conflictedSlots: ['cutoutD3'], }) - mockUseHardwareStatusText.mockReturnValue('Location conflicts') - const [{ getByText }] = render(props) - getByText('Location conflicts') + vi.mocked(useHardwareStatusText).mockReturnValue('Location conflicts') + render(props) + screen.getByText('Location conflicts') }) it('should render missing chip when missing a module', () => { - mockUseMissingProtocolHardware.mockReturnValue({ + vi.mocked(useMissingProtocolHardware).mockReturnValue({ missingProtocolHardware: mockMissingModule, isLoading: false, conflictedSlots: [], }) - mockUseHardwareStatusText.mockReturnValue('Missing 1 module') - const [{ getByText }] = render(props) - getByText('Missing 1 module') + vi.mocked(useHardwareStatusText).mockReturnValue('Missing 1 module') + render(props) + screen.getByText('Missing 1 module') }) it('should render missing chip (module and pipette) when missing a pipette and a module', () => { - mockUseMissingProtocolHardware.mockReturnValue({ + vi.mocked(useMissingProtocolHardware).mockReturnValue({ missingProtocolHardware: missingBoth, isLoading: false, conflictedSlots: [], }) - mockUseHardwareStatusText.mockReturnValue('Missing hardware') - const [{ getByText }] = render(props) - getByText('Missing hardware') + vi.mocked(useHardwareStatusText).mockReturnValue('Missing hardware') + render(props) + screen.getByText('Missing hardware') }) it('when tapping a card, mock functions is called and loading state is activated', () => { - const [{ getByLabelText }] = render(props) - const button = getByLabelText('RecentRunProtocolCard') - expect(button).toHaveStyle(`background-color: ${COLORS.green35}`) + render(props) + const button = screen.getByLabelText('RecentRunProtocolCard') + expect(button).toHaveStyle(`background-color: ${COLORS.green40}`) fireEvent.click(button) expect(mockTrackEvent).toHaveBeenCalledWith({ name: 'proceedToRun', @@ -219,16 +197,16 @@ describe('RecentRunProtocolCard', () => { }) // TODO(BC, 08/30/23): reintroduce check for tracking when tracking is reintroduced lazily // expect(mockTrackProtocolRunEvent).toBeCalledWith({ name: 'runAgain' }) - getByLabelText('icon_ot-spinner') + screen.getByLabelText('icon_ot-spinner') expect(button).toHaveStyle(`background-color: ${COLORS.green40}`) }) it('should render the skeleton when react query is loading', () => { - mockUseProtocolQuery.mockReturnValue({ + vi.mocked(useProtocolQuery).mockReturnValue({ isLoading: true, data: { data: { metadata: { protocolName: 'mockProtocol' } } }, } as any) - const [{ getByText }] = render(props) - getByText('mock Skeleton') + render(props) + screen.getByText('mock Skeleton') }) }) diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCarousel.test.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCarousel.test.tsx index 7567ed31900..1015ee8cfac 100644 --- a/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCarousel.test.tsx +++ b/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCarousel.test.tsx @@ -1,15 +1,16 @@ import * as React from 'react' +import { screen } from '@testing-library/react' +import { beforeEach, describe, it, vi } from 'vitest' -import { renderWithProviders } from '@opentrons/components' - +import { renderWithProviders } from '../../../../__testing-utils__' import { useNotifyAllRunsQuery } from '../../../../resources/runs/useNotifyAllRunsQuery' import { RecentRunProtocolCard, RecentRunProtocolCarousel } from '..' import type { RunData } from '@opentrons/api-client' -jest.mock('@opentrons/react-api-client') -jest.mock('../RecentRunProtocolCard') -jest.mock('../../../../resources/runs/useNotifyAllRunsQuery') +vi.mock('@opentrons/react-api-client') +vi.mock('../RecentRunProtocolCard') +vi.mock('../../../../resources/runs/useNotifyAllRunsQuery') const mockRun = { actions: [], @@ -27,13 +28,6 @@ const mockRun = { status: 'stopped', } -const mockRecentRunProtocolCard = RecentRunProtocolCard as jest.MockedFunction< - typeof RecentRunProtocolCard -> -const mockUseNotifyAllRunsQuery = useNotifyAllRunsQuery as jest.MockedFunction< - typeof useNotifyAllRunsQuery -> - const render = ( props: React.ComponentProps ) => { @@ -47,17 +41,17 @@ describe('RecentRunProtocolCarousel', () => { props = { recentRunsOfUniqueProtocols: [mockRun as RunData], } - mockRecentRunProtocolCard.mockReturnValue( + vi.mocked(RecentRunProtocolCard).mockReturnValue(
mock RecentRunProtocolCard
) - mockUseNotifyAllRunsQuery.mockReturnValue({ + vi.mocked(useNotifyAllRunsQuery).mockReturnValue({ data: { data: [mockRun] }, } as any) }) it('should render RecentRunProtocolCard', () => { - const [{ getByText }] = render(props) - getByText('mock RecentRunProtocolCard') + render(props) + screen.getByText('mock RecentRunProtocolCard') }) // Note(kj:04/14/2023) still looking for a way to test swipe gesture in a unit test diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx index 1c68a52555d..c5c87003bff 100644 --- a/app/src/organisms/OnDeviceDisplay/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx +++ b/app/src/organisms/OnDeviceDisplay/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx @@ -1,15 +1,13 @@ import * as React from 'react' import { I18nextProvider } from 'react-i18next' import { renderHook } from '@testing-library/react' +import { beforeEach, describe, expect, it, vi } from 'vitest' + import { i18n } from '../../../../../i18n' import { useFeatureFlag } from '../../../../../redux/config' import { useHardwareStatusText } from '..' -jest.mock('../../../../../redux/config') - -const mockUseFeatureFlag = useFeatureFlag as jest.MockedFunction< - typeof useFeatureFlag -> +vi.mock('../../../../../redux/config') describe('useHardwareStatusText', () => { let wrapper: React.FunctionComponent<{ children: React.ReactNode }> @@ -18,7 +16,7 @@ describe('useHardwareStatusText', () => { {children} ) - mockUseFeatureFlag.mockReturnValue(true) + vi.mocked(useFeatureFlag).mockReturnValue(true) }) it('should return string for ready', () => { const { result } = renderHook(() => useHardwareStatusText([], []), { diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/CancelingRunModal.test.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/CancelingRunModal.test.tsx index 93ecdb9ff58..9ae311aca0f 100644 --- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/CancelingRunModal.test.tsx +++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/CancelingRunModal.test.tsx @@ -1,5 +1,8 @@ import * as React from 'react' -import { renderWithProviders } from '@opentrons/components' +import { screen } from '@testing-library/react' +import { describe, it } from 'vitest' + +import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../i18n' import { CancelingRunModal } from '../CancelingRunModal' @@ -11,8 +14,8 @@ const render = () => { describe('CancelingRunModal', () => { it('should render text and icon', () => { - const [{ getByText, getByLabelText }] = render() - getByText('Canceling run...') - getByLabelText('CancelingRunModal_icon') + render() + screen.getByText('Canceling run...') + screen.getByLabelText('CancelingRunModal_icon') }) }) diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/ConfirmCancelRunModal.test.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/ConfirmCancelRunModal.test.tsx index 3208e81fb63..d03349796bf 100644 --- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/ConfirmCancelRunModal.test.tsx +++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/ConfirmCancelRunModal.test.tsx @@ -1,15 +1,16 @@ import * as React from 'react' -import { when, resetAllWhenMocks } from 'jest-when' +import { when } from 'vitest-when' import { MemoryRouter } from 'react-router-dom' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' import { RUN_STATUS_IDLE, RUN_STATUS_STOPPED } from '@opentrons/api-client' -import { renderWithProviders } from '@opentrons/components' import { useStopRunMutation, useDismissCurrentRunMutation, } from '@opentrons/react-api-client' +import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../i18n' import { useTrackProtocolRunEvent } from '../../../../organisms/Devices/hooks' import { useRunStatus } from '../../../../organisms/RunTimeControl/hooks' @@ -17,46 +18,31 @@ import { useTrackEvent } from '../../../../redux/analytics' import { ConfirmCancelRunModal } from '../ConfirmCancelRunModal' import { CancelingRunModal } from '../CancelingRunModal' -jest.mock('@opentrons/react-api-client') -jest.mock('../../../../organisms/Devices/hooks') -jest.mock('../../../../organisms/RunTimeControl/hooks') -jest.mock('../../../../redux/analytics') -jest.mock('../../../ProtocolUpload/hooks') -jest.mock('../CancelingRunModal') - -const mockPush = jest.fn() -let mockStopRun: jest.Mock -let mockDismissCurrentRun: jest.Mock -let mockTrackEvent: jest.Mock -let mockTrackProtocolRunEvent: jest.Mock - -jest.mock('react-router-dom', () => { - const reactRouterDom = jest.requireActual('react-router-dom') +import type { useHistory } from 'react-router-dom' + +vi.mock('@opentrons/react-api-client') +vi.mock('../../../../organisms/Devices/hooks') +vi.mock('../../../../organisms/RunTimeControl/hooks') +vi.mock('../../../../redux/analytics') +vi.mock('../../../ProtocolUpload/hooks') +vi.mock('../CancelingRunModal') + +const mockPush = vi.fn() +const mockStopRun = vi.fn() +const mockDismissCurrentRun = vi.fn() +const mockTrackEvent = vi.fn() +const mockTrackProtocolRunEvent = vi.fn( + () => new Promise(resolve => resolve({})) +) + +vi.mock('react-router-dom', async importOriginal => { + const actual = await importOriginal() return { - ...reactRouterDom, + ...actual, useHistory: () => ({ push: mockPush } as any), } }) -const mockUseTrackProtocolRunEvent = useTrackProtocolRunEvent as jest.MockedFunction< - typeof useTrackProtocolRunEvent -> -const mockUseTrackEvent = useTrackEvent as jest.MockedFunction< - typeof useTrackEvent -> -const mockUseStopRunMutation = useStopRunMutation as jest.MockedFunction< - typeof useStopRunMutation -> -const mockUseDismissCurrentRunMutation = useDismissCurrentRunMutation as jest.MockedFunction< - typeof useDismissCurrentRunMutation -> -const mockCancelingRunModal = CancelingRunModal as jest.MockedFunction< - typeof CancelingRunModal -> -const mockUseRunStatus = useRunStatus as jest.MockedFunction< - typeof useRunStatus -> - const render = (props: React.ComponentProps) => { return renderWithProviders( @@ -69,7 +55,7 @@ const render = (props: React.ComponentProps) => { } const RUN_ID = 'mock_runID' -const mockFn = jest.fn() +const mockFn = vi.fn() describe('ConfirmCancelRunModal', () => { let props: React.ComponentProps @@ -80,71 +66,67 @@ describe('ConfirmCancelRunModal', () => { runId: RUN_ID, setShowConfirmCancelRunModal: mockFn, } - mockTrackEvent = jest.fn() - mockStopRun = jest.fn() - mockDismissCurrentRun = jest.fn() - mockTrackProtocolRunEvent = jest.fn( - () => new Promise(resolve => resolve({})) - ) - mockUseStopRunMutation.mockReturnValue({ stopRun: mockStopRun } as any) - mockUseDismissCurrentRunMutation.mockReturnValue({ + + vi.mocked(useStopRunMutation).mockReturnValue({ + stopRun: mockStopRun, + } as any) + vi.mocked(useDismissCurrentRunMutation).mockReturnValue({ dismissCurrentRun: mockDismissCurrentRun, isLoading: false, } as any) - mockUseTrackEvent.mockReturnValue(mockTrackEvent) - when(mockUseTrackProtocolRunEvent).calledWith(RUN_ID).mockReturnValue({ + vi.mocked(useTrackEvent).mockReturnValue(mockTrackEvent) + when(useTrackProtocolRunEvent).calledWith(RUN_ID).thenReturn({ trackProtocolRunEvent: mockTrackProtocolRunEvent, }) - mockCancelingRunModal.mockReturnValue(
mock CancelingRunModal
) - when(mockUseRunStatus).calledWith(RUN_ID).mockReturnValue(RUN_STATUS_IDLE) + vi.mocked(CancelingRunModal).mockReturnValue( +
mock CancelingRunModal
+ ) + when(useRunStatus).calledWith(RUN_ID).thenReturn(RUN_STATUS_IDLE) }) afterEach(() => { - resetAllWhenMocks() - jest.restoreAllMocks() + vi.restoreAllMocks() }) it('should render text and buttons', () => { - const [{ getByText, getAllByRole }] = render(props) - getByText('Are you sure you want to cancel this run?') - getByText( + render(props) + screen.getByText('Are you sure you want to cancel this run?') + screen.getByText( 'Doing so will terminate this run, drop any attached tips in the trash container and home your robot.' ) - getByText( + screen.getByText( 'Additionally, any hardware modules used within the protocol will remain active and maintain their current states until deactivated.' ) - expect(getAllByRole('button').length).toBe(2) - getByText('Go back') - getByText('Cancel run') + expect(screen.getAllByRole('button').length).toBe(2) + screen.getByText('Go back') + screen.getByText('Cancel run') }) it('shoudler render the canceling run modal when run is dismissing', () => { - mockUseDismissCurrentRunMutation.mockReturnValue({ + vi.mocked(useDismissCurrentRunMutation).mockReturnValue({ dismissCurrentRun: mockDismissCurrentRun, isLoading: true, } as any) - const [{ getByText }] = render(props) - getByText('mock CancelingRunModal') + render(props) + screen.getByText('mock CancelingRunModal') }) it('when tapping go back, the mock function is called', () => { - const [{ getByText }] = render(props) - const button = getByText('Go back') + render(props) + const button = screen.getByText('Go back') fireEvent.click(button) expect(mockFn).toHaveBeenCalled() }) it('when tapping cancel run, the run is stopped', () => { - const [{ getByText }] = render(props) - const button = getByText('Cancel run') + render(props) + const button = screen.getByText('Cancel run') fireEvent.click(button) expect(mockStopRun).toHaveBeenCalled() }) it('when run is stopped, the run is dismissed and the modal closes', () => { - when(mockUseRunStatus) - .calledWith(RUN_ID) - .mockReturnValue(RUN_STATUS_STOPPED) + when(useRunStatus).calledWith(RUN_ID).thenReturn(RUN_STATUS_STOPPED) render(props) expect(mockDismissCurrentRun).toHaveBeenCalled() @@ -156,9 +138,7 @@ describe('ConfirmCancelRunModal', () => { ...props, isActiveRun: false, } - when(mockUseRunStatus) - .calledWith(RUN_ID) - .mockReturnValue(RUN_STATUS_STOPPED) + when(useRunStatus).calledWith(RUN_ID).thenReturn(RUN_STATUS_STOPPED) render(props) expect(mockDismissCurrentRun).toHaveBeenCalled() diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/CurrentRunningProtocolCommand.test.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/CurrentRunningProtocolCommand.test.tsx index 451c46e96df..edb7bc99b10 100644 --- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/CurrentRunningProtocolCommand.test.tsx +++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/CurrentRunningProtocolCommand.test.tsx @@ -1,18 +1,19 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' -import { renderWithProviders } from '@opentrons/components' import { RUN_STATUS_RUNNING, RUN_STATUS_IDLE } from '@opentrons/api-client' +import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../i18n' import { mockRobotSideAnalysis } from '../../../CommandText/__fixtures__' import { CurrentRunningProtocolCommand } from '../CurrentRunningProtocolCommand' import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data' -const mockPlayRun = jest.fn() -const mockPauseRun = jest.fn() -const mockShowModal = jest.fn() -const mockUpdateLastAnimatedCommand = jest.fn() +const mockPlayRun = vi.fn() +const mockPauseRun = vi.fn() +const mockShowModal = vi.fn() +const mockUpdateLastAnimatedCommand = vi.fn() const mockRunTimer = { runStatus: RUN_STATUS_RUNNING, @@ -40,7 +41,7 @@ describe('CurrentRunningProtocolCommand', () => { playRun: mockPlayRun, pauseRun: mockPauseRun, setShowConfirmCancelRunModal: mockShowModal, - trackProtocolRunEvent: jest.fn(), // temporary + trackProtocolRunEvent: vi.fn(), // temporary robotAnalyticsData: {} as any, protocolName: 'mockRunningProtocolName', currentRunCommandIndex: 0, @@ -51,17 +52,17 @@ describe('CurrentRunningProtocolCommand', () => { }) afterEach(() => { - jest.clearAllMocks() + vi.clearAllMocks() }) it('should render text and buttons', () => { - const [{ getByText, getByLabelText }] = render(props) - getByText('Running') - getByText('mockRunningProtocolName') - getByText('00:00:01') - getByText('Load P300 Single-Channel GEN1 in Left Mount') - getByLabelText('stop') - getByLabelText('pause') + render(props) + screen.getByText('Running') + screen.getByText('mockRunningProtocolName') + screen.getByText('00:00:01') + screen.getByText('Load P300 Single-Channel GEN1 in Left Mount') + screen.getByLabelText('stop') + screen.getByLabelText('pause') }) it('should render play button when runStatus is idle', () => { @@ -69,13 +70,13 @@ describe('CurrentRunningProtocolCommand', () => { ...props, runStatus: RUN_STATUS_IDLE, } - const [{ getByLabelText }] = render(props) - getByLabelText('play') + render(props) + screen.getByLabelText('play') }) it('when tapping stop button, the modal is showing up', () => { - const [{ getByLabelText }] = render(props) - const button = getByLabelText('stop') + render(props) + const button = screen.getByLabelText('stop') fireEvent.click(button) expect(mockShowModal).toHaveBeenCalled() }) diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunFailedModal.test.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunFailedModal.test.tsx index b350cf1117c..67c96cadf18 100644 --- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunFailedModal.test.tsx +++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunFailedModal.test.tsx @@ -1,18 +1,21 @@ import * as React from 'react' import { MemoryRouter } from 'react-router-dom' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' +import { beforeEach, describe, expect, it, vi } from 'vitest' -import { renderWithProviders } from '@opentrons/components' import { useStopRunMutation } from '@opentrons/react-api-client' +import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../i18n' import { RunFailedModal } from '../RunFailedModal' -jest.mock('@opentrons/react-api-client') +import type { useHistory } from 'react-router-dom' + +vi.mock('@opentrons/react-api-client') const RUN_ID = 'mock_runID' -const mockFn = jest.fn() -const mockPush = jest.fn() +const mockFn = vi.fn() +const mockPush = vi.fn() const mockErrors = [ { id: 'd0245210-dfb9-4f1c-8ad0-3416b603a7ba', @@ -63,20 +66,16 @@ const mockErrors = [ }, ] -let mockStopRun: jest.Mock +const mockStopRun = vi.fn((_runId, opts) => opts.onSuccess()) -jest.mock('react-router-dom', () => { - const reactRouterDom = jest.requireActual('react-router-dom') +vi.mock('react-router-dom', async importOriginal => { + const actual = await importOriginal() return { - ...reactRouterDom, + ...actual, useHistory: () => ({ push: mockPush } as any), } }) -const mockUseStopRunMutation = useStopRunMutation as jest.MockedFunction< - typeof useStopRunMutation -> - const render = (props: React.ComponentProps) => { return renderWithProviders( @@ -97,24 +96,26 @@ describe('RunFailedModal', () => { setShowRunFailedModal: mockFn, errors: mockErrors, } - mockStopRun = jest.fn((_runId, opts) => opts.onSuccess()) - mockUseStopRunMutation.mockReturnValue({ stopRun: mockStopRun } as any) + + vi.mocked(useStopRunMutation).mockReturnValue({ + stopRun: mockStopRun, + } as any) }) it('should render the highest priority error', () => { - const [{ getByText }] = render(props) - getByText('Run failed') - getByText('Error 1000: hardwareCommunicationError') - getByText('Error with code 1000 (highest priority)') - getByText( + render(props) + screen.getByText('Run failed') + screen.getByText('Error 1000: hardwareCommunicationError') + screen.getByText('Error with code 1000 (highest priority)') + screen.getByText( 'Download the robot logs from the Opentrons App and send it to support@opentrons.com for assistance.' ) - getByText('Close') + screen.getByText('Close') }) it('when tapping close, call mock functions', () => { - const [{ getByText }] = render(props) - const button = getByText('Close') + render(props) + const button = screen.getByText('Close') fireEvent.click(button) expect(mockStopRun).toHaveBeenCalled() expect(mockPush).toHaveBeenCalledWith('/dashboard') diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunningProtocolCommandList.test.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunningProtocolCommandList.test.tsx index 389b4ebdd9e..5c2330dce0a 100644 --- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunningProtocolCommandList.test.tsx +++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunningProtocolCommandList.test.tsx @@ -1,17 +1,18 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' +import { beforeEach, describe, expect, it, vi } from 'vitest' import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data' -import { renderWithProviders } from '@opentrons/components' import { RUN_STATUS_RUNNING, RUN_STATUS_IDLE } from '@opentrons/api-client' +import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../i18n' import { mockRobotSideAnalysis } from '../../../CommandText/__fixtures__' import { RunningProtocolCommandList } from '../RunningProtocolCommandList' -const mockPlayRun = jest.fn() -const mockPauseRun = jest.fn() -const mockShowModal = jest.fn() +const mockPlayRun = vi.fn() +const mockPauseRun = vi.fn() +const mockShowModal = vi.fn() const render = ( props: React.ComponentProps @@ -30,7 +31,7 @@ describe('RunningProtocolCommandList', () => { playRun: mockPlayRun, pauseRun: mockPauseRun, setShowConfirmCancelRunModal: mockShowModal, - trackProtocolRunEvent: jest.fn(), // temporary + trackProtocolRunEvent: vi.fn(), // temporary robotAnalyticsData: {} as any, protocolName: 'mockRunningProtocolName', currentRunCommandIndex: 0, @@ -38,12 +39,12 @@ describe('RunningProtocolCommandList', () => { } }) it('should render text and buttons', () => { - const [{ getByText, getByLabelText }] = render(props) - getByText('Running') - getByText('mockRunningProtocolName') - getByText('Load P300 Single-Channel GEN1 in Left Mount') - getByLabelText('stop') - getByLabelText('pause') + render(props) + screen.getByText('Running') + screen.getByText('mockRunningProtocolName') + screen.getByText('Load P300 Single-Channel GEN1 in Left Mount') + screen.getByLabelText('stop') + screen.getByLabelText('pause') }) it('should render play button when runStatus is idle', () => { @@ -51,13 +52,13 @@ describe('RunningProtocolCommandList', () => { ...props, runStatus: RUN_STATUS_IDLE, } - const [{ getByLabelText }] = render(props) - getByLabelText('play') + render(props) + screen.getByLabelText('play') }) it('when tapping stop button, the modal is showing up', () => { - const [{ getByLabelText }] = render(props) - const button = getByLabelText('stop') + render(props) + const button = screen.getByLabelText('stop') fireEvent.click(button) expect(mockShowModal).toHaveBeenCalled() }) diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunningProtocolSkeleton.test.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunningProtocolSkeleton.test.tsx index 1392a8fffdd..fb842e88e1d 100644 --- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunningProtocolSkeleton.test.tsx +++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunningProtocolSkeleton.test.tsx @@ -1,7 +1,8 @@ import * as React from 'react' +import { screen } from '@testing-library/react' +import { beforeEach, describe, expect, it } from 'vitest' -import { renderWithProviders } from '@opentrons/components' - +import { renderWithProviders } from '../../../../__testing-utils__' import { RunningProtocolSkeleton } from '../RunningProtocolSkeleton' const render = ( @@ -20,9 +21,9 @@ describe('RunningProtocolSkeleton', () => { }) it('renders Skeletons when current option is CurrentRunningProtocolCommand', () => { - const [{ getAllByTestId, getAllByRole }] = render(props) - const skeletons = getAllByTestId('Skeleton') - const buttons = getAllByRole('button') + render(props) + const skeletons = screen.getAllByTestId('Skeleton') + const buttons = screen.getAllByRole('button') expect(buttons.length).toBe(2) // Note Skeleton component checks width and height so here just check the number of skeletons and background-size expect(skeletons.length).toBe(4) @@ -32,9 +33,9 @@ describe('RunningProtocolSkeleton', () => { it('renders Skeletons when current option is RunningProtocolCommandList', () => { props = { currentOption: 'RunningProtocolCommandList' } - const [{ getAllByTestId, getAllByRole }] = render(props) - const skeletons = getAllByTestId('Skeleton') - const buttons = getAllByRole('button') + render(props) + const skeletons = screen.getAllByTestId('Skeleton') + const buttons = screen.getAllByRole('button') expect(buttons.length).toBe(2) expect(skeletons.length).toBe(8) expect(skeletons[0]).toHaveStyle('animation: shimmer 2s infinite linear') diff --git a/app/src/organisms/OpenDoorAlertModal/__tests__/OpenDoorAlertModal.test.tsx b/app/src/organisms/OpenDoorAlertModal/__tests__/OpenDoorAlertModal.test.tsx index 748b4d1c1eb..2f1a66b0faa 100644 --- a/app/src/organisms/OpenDoorAlertModal/__tests__/OpenDoorAlertModal.test.tsx +++ b/app/src/organisms/OpenDoorAlertModal/__tests__/OpenDoorAlertModal.test.tsx @@ -1,7 +1,8 @@ import * as React from 'react' +import { screen } from '@testing-library/react' +import { describe, it } from 'vitest' -import { renderWithProviders } from '@opentrons/components' - +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { OpenDoorAlertModal } from '..' @@ -14,8 +15,8 @@ const render = () => { describe('OpenDoorAlertModal', () => { it('should render text', () => { - const [{ getByText }] = render() - getByText('Robot door is open') - getByText('Close robot door to resume run') + render() + screen.getByText('Robot door is open') + screen.getByText('Close robot door to resume run') }) }) diff --git a/shared-data/protocol/fixtures/6/index.tsx b/shared-data/protocol/fixtures/6/index.tsx index 2746d867698..5c77752ba87 100644 --- a/shared-data/protocol/fixtures/6/index.tsx +++ b/shared-data/protocol/fixtures/6/index.tsx @@ -1,5 +1,5 @@ import heater_shaker_commands from './heaterShakerCommands.json' -import heater_shaker_commands_with_result from './heaterShakerCommandsWithResultsKey.json' +import heater_shaker_commands_with_results_key from './heaterShakerCommandsWithResultsKey.json' import multiple_temp_modules from './multipleTempModules.json' import multiple_tipracks from './multipleTipracks.json' import multiple_tipacks_with_tc from './multipleTipracksWithTC.json' @@ -10,7 +10,7 @@ import transfer_settings from './transferSettings.json' export { heater_shaker_commands, - heater_shaker_commands_with_result, + heater_shaker_commands_with_results_key, multiple_temp_modules, multiple_tipracks, multiple_tipacks_with_tc,