diff --git a/app/src/App/__tests__/DesktopApp.test.tsx b/app/src/App/__tests__/DesktopApp.test.tsx index fb97119662b..205416020a4 100644 --- a/app/src/App/__tests__/DesktopApp.test.tsx +++ b/app/src/App/__tests__/DesktopApp.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { MemoryRouter } from 'react-router-dom' +import { screen } from '@testing-library/react' import { vi, describe, beforeEach, afterEach, expect, it } from 'vitest' import { renderWithProviders } from '../../__testing-utils__' @@ -61,47 +62,45 @@ describe('DesktopApp', () => { vi.resetAllMocks() }) it('renders a Breadcrumbs component', () => { - const [{ getByText }] = render('/devices') - getByText('Mock Breadcrumbs') + render('/devices') + screen.getByText('Mock Breadcrumbs') }) it('renders an AppSettings component', () => { - const [{ getByText }] = render('/app-settings/general') - getByText('Mock AppSettings') + render('/app-settings/general') + screen.getByText('Mock AppSettings') }) it('renders a DevicesLanding component from /devices', () => { - const [{ getByText }] = render('/devices') - getByText('Mock DevicesLanding') + render('/devices') + screen.getByText('Mock DevicesLanding') }) it('renders a DeviceDetails component from /devices/:robotName', () => { - const [{ getByText }] = render('/devices/otie') - getByText('Mock DeviceDetails') + render('/devices/otie') + screen.getByText('Mock DeviceDetails') }) it('renders a RobotSettings component from /devices/:robotName/robot-settings/:robotSettingsTab', () => { - const [{ getByText }] = render('/devices/otie/robot-settings/calibration') - getByText('Mock RobotSettings') + render('/devices/otie/robot-settings/calibration') + screen.getByText('Mock RobotSettings') }) it('renders a CalibrationDashboard component from /devices/:robotName/robot-settings/calibration/dashboard', () => { - const [{ getByText }] = render( - '/devices/otie/robot-settings/calibration/dashboard' - ) - getByText('Mock CalibrationDashboard') + render('/devices/otie/robot-settings/calibration/dashboard') + screen.getByText('Mock CalibrationDashboard') }) it('renders a ProtocolsLanding component from /protocols', () => { - const [{ getByText }] = render('/protocols') - getByText('Mock ProtocolsLanding') + render('/protocols') + screen.getByText('Mock ProtocolsLanding') }) it('renders a ProtocolRunDetails component from /devices/:robotName/protocol-runs/:runId/:protocolRunDetailsTab', () => { - const [{ getByText }] = render( + render( '/devices/otie/protocol-runs/95e67900-bc9f-4fbf-92c6-cc4d7226a51b/setup' ) - getByText('Mock ProtocolRunDetails') + screen.getByText('Mock ProtocolRunDetails') }) it('should poll for software updates', () => { diff --git a/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx b/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx index c2d1a1482f0..2875e2d2c51 100644 --- a/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx +++ b/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { vi, it, expect, describe } from 'vitest' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { COLORS } from '@opentrons/components' import { renderWithProviders } from '../../../__testing-utils__' @@ -13,21 +13,21 @@ const render = (props: React.ComponentProps) => { describe('OverflowBtn', () => { it('renders a clickable button', () => { const handleClick = vi.fn() - const { getByRole } = render({ + render({ onClick: handleClick, }) - const button = getByRole('button') + const button = screen.getByRole('button') fireEvent.click(button) expect(handleClick).toHaveBeenCalledTimes(1) }) it('renders a hover state', () => { - const { getByRole } = render({ + render({ onClick: vi.fn(), }) - expect(getByRole('button')).toHaveStyle( + expect(screen.getByRole('button')).toHaveStyle( `background-color: ${COLORS.transparent}` ) }) diff --git a/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx b/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx index af9860abce6..5f325c34d88 100644 --- a/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx @@ -25,8 +25,8 @@ describe('FloatingActionButton', () => { }) it('renders floating action button with text - active', () => { - const { getByRole } = render(props) - const button = getByRole('button') + render(props) + const button = screen.getByRole('button') expect(button).toHaveStyle( `padding: ${SPACING.spacing12} ${SPACING.spacing24}` ) diff --git a/app/src/molecules/UpdateBanner/__tests__/UpdateBanner.test.tsx b/app/src/molecules/UpdateBanner/__tests__/UpdateBanner.test.tsx index 4836b49af45..22663443a5e 100644 --- a/app/src/molecules/UpdateBanner/__tests__/UpdateBanner.test.tsx +++ b/app/src/molecules/UpdateBanner/__tests__/UpdateBanner.test.tsx @@ -99,8 +99,8 @@ describe('Module Update Banner', () => { ...props, calibratePipetteRequired: true, } - const { queryByText } = render(props) - expect(queryByText('Calibrate now')).not.toBeInTheDocument() + render(props) + expect(screen.queryByText('Calibrate now')).not.toBeInTheDocument() }) it('should not render a calibrate link if pipette firmware update is required', () => { diff --git a/app/src/organisms/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx b/app/src/organisms/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx index b735e7c26fe..40da64ff3bc 100644 --- a/app/src/organisms/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx +++ b/app/src/organisms/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx @@ -146,8 +146,8 @@ describe('CalibrateTipLength', () => { currentStep: Sessions.DECK_STEP_PREPARING_PIPETTE, }, } - const { getByRole } = render({ isJogging: false, session })[0] - const forwardButton = getByRole('button', { name: 'forward' }) + render({ isJogging: false, session }) + const forwardButton = screen.getByRole('button', { name: 'forward' }) fireEvent.click(forwardButton) expect(dispatchRequests).toHaveBeenCalledWith( Sessions.createSessionCommand('robot-name', session.id, { diff --git a/app/src/organisms/CalibrationPanels/Introduction/__tests__/Body.test.tsx b/app/src/organisms/CalibrationPanels/Introduction/__tests__/Body.test.tsx index a1324eef28b..b201352a3db 100644 --- a/app/src/organisms/CalibrationPanels/Introduction/__tests__/Body.test.tsx +++ b/app/src/organisms/CalibrationPanels/Introduction/__tests__/Body.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { it, describe } from 'vitest' +import { screen } from '@testing-library/react' import { renderWithProviders } from '../../../../__testing-utils__' import * as Sessions from '../../../../redux/sessions' @@ -15,40 +16,40 @@ const render = (props: React.ComponentProps) => { describe('Body', () => { it('renders correct text for health check', () => { - const { getByText } = render({ + render({ sessionType: Sessions.SESSION_TYPE_CALIBRATION_HEALTH_CHECK, }) - getByText( + screen.getByText( 'Calibration Health Check diagnoses problems with Deck, Tip Length, and Pipette Offset Calibration.' ) - getByText( + screen.getByText( 'You will move the pipettes to various positions, which will be compared against your existing calibration data.' ) - getByText( + screen.getByText( 'If there is a large difference, you will be prompted to redo some or all of your calibrations.' ) }) it('renders correct text for deck cal', () => { - const { getByText } = render({ + render({ sessionType: Sessions.SESSION_TYPE_DECK_CALIBRATION, }) - getByText( + screen.getByText( 'Deck calibration ensures positional accuracy so that your robot moves as expected. It will accurately establish the OT-2’s deck orientation relative to the gantry.' ) }) it('renders correct text for pip offset cal', () => { - const { getByText } = render({ + render({ sessionType: Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION, }) - getByText( + screen.getByText( 'Calibrating pipette offset measures a pipette’s position relative to the pipette mount and the deck.' ) }) it('renders correct text for tip length cal', () => { - const { getByText } = render({ + render({ sessionType: Sessions.SESSION_TYPE_TIP_LENGTH_CALIBRATION, }) - getByText( + screen.getByText( 'Tip length calibration measures the distance between the bottom of the tip and the pipette’s nozzle.' ) }) diff --git a/app/src/organisms/CalibrationPanels/Introduction/__tests__/InvalidationWarning.test.tsx b/app/src/organisms/CalibrationPanels/Introduction/__tests__/InvalidationWarning.test.tsx index b99c7b1d29a..6ca5eb3340f 100644 --- a/app/src/organisms/CalibrationPanels/Introduction/__tests__/InvalidationWarning.test.tsx +++ b/app/src/organisms/CalibrationPanels/Introduction/__tests__/InvalidationWarning.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { it, describe } from 'vitest' +import { screen } from '@testing-library/react' import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../i18n' @@ -16,12 +17,14 @@ const render = (sessionType: 'tipLengthCalibration' | 'deckCalibration') => { describe('InvalidationWarning', () => { it('renders correct text - deck calibration', () => { - const { getByText } = render('deckCalibration') - getByText('Recalibrating the deck clears pipette offset data') - getByText('Pipette offsets for both mounts will have to be recalibrated.') + render('deckCalibration') + screen.getByText('Recalibrating the deck clears pipette offset data') + screen.getByText( + 'Pipette offsets for both mounts will have to be recalibrated.' + ) }) it('renders correct text - tip length calibration', () => { - const { getByText } = render('tipLengthCalibration') - getByText('Recalibrating tip length will clear pipette offset data.') + render('tipLengthCalibration') + screen.getByText('Recalibrating tip length will clear pipette offset data.') }) }) diff --git a/app/src/organisms/CalibrationPanels/__tests__/ChooseTipRack.test.tsx b/app/src/organisms/CalibrationPanels/__tests__/ChooseTipRack.test.tsx index fba0c237890..f867ca46298 100644 --- a/app/src/organisms/CalibrationPanels/__tests__/ChooseTipRack.test.tsx +++ b/app/src/organisms/CalibrationPanels/__tests__/ChooseTipRack.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { vi, it, describe, expect, beforeEach } from 'vitest' import { usePipettesQuery } from '@opentrons/react-api-client' @@ -64,30 +64,30 @@ describe('ChooseTipRack', () => { }) it('renders the correct text', () => { - const { getByText, getByAltText } = render(props) - getByText('Choose a tip rack') - getByText('select tip rack') - getByText('mock select') - getByText( + render(props) + screen.getByText('Choose a tip rack') + screen.getByText('select tip rack') + screen.getByText('mock select') + screen.getByText( 'Choose what tip rack you’d like to use to calibrate your tip length.' ) - getByText('Want to use a tip rack that’s not listed here?') + screen.getByText('Want to use a tip rack that’s not listed here?') - getByText( + screen.getByText( 'Opentrons tip racks are highly recommended. Accuracy cannot be guaranteed with other tip racks.' ) - getByText('300ul Tiprack FIXTURE') - getByAltText('300ul Tiprack FIXTURE image') - getByText( + screen.getByText('300ul Tiprack FIXTURE') + screen.getByAltText('300ul Tiprack FIXTURE image') + screen.getByText( 'It’s extremely important to perform this calibration using the Opentrons tips and tip racks specified above, as the robot determines accuracy based on the known measurements of these tips.' ) }) it('renders the buttons and they work as expected', () => { - const { getByRole } = render(props) - getByRole('link', { name: 'Need help?' }) - const cancel = getByRole('button', { name: 'cancel' }) - const confirm = getByRole('button', { name: 'Confirm tip rack' }) + render(props) + screen.getByRole('link', { name: 'Need help?' }) + const cancel = screen.getByRole('button', { name: 'cancel' }) + const confirm = screen.getByRole('button', { name: 'Confirm tip rack' }) fireEvent.click(cancel) expect(props.closeModal).toHaveBeenCalled() fireEvent.click(confirm) diff --git a/app/src/organisms/CalibrationPanels/__tests__/ChosenTipRackRender.test.tsx b/app/src/organisms/CalibrationPanels/__tests__/ChosenTipRackRender.test.tsx index 1ec4717b6fb..ff57669651d 100644 --- a/app/src/organisms/CalibrationPanels/__tests__/ChosenTipRackRender.test.tsx +++ b/app/src/organisms/CalibrationPanels/__tests__/ChosenTipRackRender.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { it, describe, beforeEach } from 'vitest' +import { screen } from '@testing-library/react' import { i18n } from '../../../i18n' import { renderWithProviders } from '../../../__testing-utils__' @@ -26,8 +27,8 @@ describe('ChosenTipRackRender', () => { }) it('renders text and image alt text when tip rack is Opentrons 96 1000uL', () => { - const { getByText, getByAltText } = render(props) - getByText('Opentrons 96 tip rack 1000ul') - getByAltText('Opentrons 96 tip rack 1000ul image') + render(props) + screen.getByText('Opentrons 96 tip rack 1000ul') + screen.getByAltText('Opentrons 96 tip rack 1000ul image') }) }) diff --git a/app/src/organisms/CalibrationPanels/__tests__/useConfirmCrashRecovery.test.tsx b/app/src/organisms/CalibrationPanels/__tests__/useConfirmCrashRecovery.test.tsx index ca94bcb897e..3aa917aedeb 100644 --- a/app/src/organisms/CalibrationPanels/__tests__/useConfirmCrashRecovery.test.tsx +++ b/app/src/organisms/CalibrationPanels/__tests__/useConfirmCrashRecovery.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { fireEvent, renderHook } from '@testing-library/react' +import { fireEvent, renderHook, screen } from '@testing-library/react' import { I18nextProvider } from 'react-i18next' import { vi, it, describe, expect } from 'vitest' @@ -43,11 +43,11 @@ describe('useConfirmCrashRecovery', () => { expect(link).not.toBeNull() expect(confirmation).toBeNull() - const { getByText, getByRole } = renderWithProviders(link, { + renderWithProviders(link, { i18nInstance: i18n, - })[0] - getByText('Jog too far or bend a tip?') - getByRole('button', { name: 'Start over' }) + }) + screen.getByText('Jog too far or bend a tip?') + screen.getByRole('button', { name: 'Start over' }) }) it('renders the modal with the right props when you click the link', () => { @@ -65,26 +65,29 @@ describe('useConfirmCrashRecovery', () => { ) // render returned confirmation if not null, otherwise render the link - const { getByRole, rerender } = renderWithProviders( -
{result.current[1] ?? result.current[0]}
, - { i18nInstance: i18n } - )[0] + renderWithProviders(
{result.current[1] ?? result.current[0]}
, { + i18nInstance: i18n, + }) // click the link to launch the modal - fireEvent.click(getByRole('button', { name: 'Start over' })) + fireEvent.click(screen.getByRole('button', { name: 'Start over' })) // the confirmation should now not be null expect(result.current[1]).not.toBeNull() // the explicitly rerender to incorporate newly non-null confirmation - rerender(
{result.current[1] ?? result.current[0]}
) + renderWithProviders(
{result.current[1] ?? result.current[0]}
, { + i18nInstance: i18n, + }) // click the "back" link in the confirmation - const closeConfirmationButton = getByRole('button', { name: 'resume' }) + const closeConfirmationButton = screen.getByRole('button', { + name: 'resume', + }) fireEvent.click(closeConfirmationButton) // the confirmation should now be null once more expect(result.current[1]).toBeNull() // open the confirmation again and click the proceed to start over button - fireEvent.click(getByRole('button', { name: 'Start over' })) - const startOverButton = getByRole('button', { name: 'Start over' }) + fireEvent.click(screen.getByRole('button', { name: 'Start over' })) + const startOverButton = screen.getByRole('button', { name: 'Start over' }) fireEvent.click(startOverButton) expect(mockSendCommands).toHaveBeenCalledWith({ command: sharedCalCommands.INVALIDATE_LAST_ACTION, diff --git a/app/src/organisms/CalibrationTaskList/__tests__/CalibrationTaskList.test.tsx b/app/src/organisms/CalibrationTaskList/__tests__/CalibrationTaskList.test.tsx index 2211a27d689..8ad8fe61ce6 100644 --- a/app/src/organisms/CalibrationTaskList/__tests__/CalibrationTaskList.test.tsx +++ b/app/src/organisms/CalibrationTaskList/__tests__/CalibrationTaskList.test.tsx @@ -67,8 +67,8 @@ describe('CalibrationTaskList', () => { }) it('does not show the Calibrations complete screen when viewing a completed task list', () => { - const [{ queryByText }] = render() - expect(queryByText('Calibrations complete!')).toBeFalsy() + render() + expect(screen.queryByText('Calibrations complete!')).toBeFalsy() }) it('shows the Calibrations complete screen after the calibrations are completed', () => { diff --git a/app/src/organisms/ChangePipette/__tests__/ChangePipette.test.tsx b/app/src/organisms/ChangePipette/__tests__/ChangePipette.test.tsx index ad18c140bee..47277d64b76 100644 --- a/app/src/organisms/ChangePipette/__tests__/ChangePipette.test.tsx +++ b/app/src/organisms/ChangePipette/__tests__/ChangePipette.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { vi, it, describe, expect, beforeEach } from 'vitest' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { getPipetteNameSpecs } from '@opentrons/shared-data' @@ -105,9 +105,9 @@ describe('ChangePipette', () => { vi.mocked(InProgressModal).mockReturnValue(
mock in progress modal
) - const { getByText } = render(props) - getByText('Attach a pipette') - getByText('mock in progress modal') + render(props) + screen.getByText('Attach a pipette') + screen.getByText('mock in progress modal') }) it('renders the wizard pages for attaching a pipette and clicking on the exit button will render the exit modal', () => { @@ -116,29 +116,29 @@ describe('ChangePipette', () => { ) vi.mocked(ExitModal).mockReturnValue(
mock exit modal
) - const { getByText, getByLabelText, getByRole } = render(props) + render(props) // Clear deck modal page - let exit = getByLabelText('Exit') - getByText('Attach a pipette') - getByText('Before you begin') - getByText( + let exit = screen.getByLabelText('Exit') + screen.getByText('Attach a pipette') + screen.getByText('Before you begin') + screen.getByText( 'Before starting, remove all labware from the deck and all tips from pipettes. The gantry will move to the front of the robot.' ) fireEvent.click(exit) expect(props.closeModal).toHaveBeenCalled() - const cont = getByRole('button', { name: 'Get started' }) + const cont = screen.getByRole('button', { name: 'Get started' }) fireEvent.click(cont) // Instructions page - getByText('Attach a pipette') - getByText('mock pipette selection') - exit = getByLabelText('Exit') + screen.getByText('Attach a pipette') + screen.getByText('mock pipette selection') + exit = screen.getByLabelText('Exit') fireEvent.click(exit) // Exit modal page - getByText('mock exit modal') - getByText('Attach a pipette') + screen.getByText('mock exit modal') + screen.getByText('Attach a pipette') }) it('the go back button functions as expected', () => { @@ -146,29 +146,29 @@ describe('ChangePipette', () => {
mock pipette selection
) - const { getByText, getByRole } = render(props) + render(props) // Clear deck modal page - getByText('Before you begin') - const cont = getByRole('button', { name: 'Get started' }) + screen.getByText('Before you begin') + const cont = screen.getByRole('button', { name: 'Get started' }) fireEvent.click(cont) // Instructions page - const goBack = getByRole('button', { name: 'Go back' }) + const goBack = screen.getByRole('button', { name: 'Go back' }) fireEvent.click(goBack) - getByText('Before you begin') + screen.getByText('Before you begin') }) it('renders the wizard pages for attaching a pipette and goes through flow', () => { vi.mocked(PipetteSelection).mockReturnValue(
mock pipette selection
) - const { getByText, getByRole } = render(props) + render(props) // Clear deck modal page - const cont = getByRole('button', { name: 'Get started' }) + const cont = screen.getByRole('button', { name: 'Get started' }) fireEvent.click(cont) // Instructions page - getByText('Attach a pipette') + screen.getByText('Attach a pipette') }) it('renders the wizard pages for detaching a single channel pipette and exits on the 2nd page rendering exit modal', () => { @@ -186,43 +186,43 @@ describe('ChangePipette', () => { left: mockAttachedPipettes as AttachedPipette, right: null, }) - const { getByText, getByLabelText, getByRole } = render(props) + render(props) // Clear deck modal page - getByLabelText('Exit') - getByText('Detach P300 Single GEN2 from Left Mount') - getByText('Before you begin') - getByText( + screen.getByLabelText('Exit') + screen.getByText('Detach P300 Single GEN2 from Left Mount') + screen.getByText('Before you begin') + screen.getByText( 'Before starting, remove all labware from the deck and all tips from pipettes. The gantry will move to the front of the robot.' ) - let cont = getByRole('button', { name: 'Get started' }) + let cont = screen.getByRole('button', { name: 'Get started' }) fireEvent.click(cont) // Instructions page 1 - getByText('Detach P300 Single GEN2 from Left Mount') - getByText('Step 1 / 3') - getByText('Loosen the screws') - getByText( + screen.getByText('Detach P300 Single GEN2 from Left Mount') + screen.getByText('Step 1 / 3') + screen.getByText('Loosen the screws') + screen.getByText( 'Using a 2.5 mm screwdriver, loosen the three screws on the back of the pipette that is currently attached.' ) - cont = getByRole('button', { name: 'Continue' }) + cont = screen.getByRole('button', { name: 'Continue' }) fireEvent.click(cont) // Instructions page 2 - getByText('Detach P300 Single GEN2 from Left Mount') - getByText('Step 2 / 3') - getByText('Remove the pipette') - getByText( + screen.getByText('Detach P300 Single GEN2 from Left Mount') + screen.getByText('Step 2 / 3') + screen.getByText('Remove the pipette') + screen.getByText( 'Hold onto the pipette so it does not fall. Disconnect the pipette from the robot by pulling the white connector tab.' ) - getByLabelText('Confirm') - const exit = getByLabelText('Exit') + screen.getByLabelText('Confirm') + const exit = screen.getByLabelText('Exit') fireEvent.click(exit) // Exit modal page - getByText('Detach P300 Single GEN2 from Left Mount') - getByText('Step 2 / 3') - getByText('mock exit modal') + screen.getByText('Detach P300 Single GEN2 from Left Mount') + screen.getByText('Step 2 / 3') + screen.getByText('mock exit modal') }) it('renders the wizard pages for detaching a single channel pipette and goes through the whole flow', () => { @@ -231,17 +231,17 @@ describe('ChangePipette', () => { left: mockAttachedPipettes as AttachedPipette, right: null, }) - const { getByLabelText, getByRole } = render(props) + render(props) // Clear deck modal page - let cont = getByRole('button', { name: 'Get started' }) + let cont = screen.getByRole('button', { name: 'Get started' }) fireEvent.click(cont) // Instructions page 1 - cont = getByRole('button', { name: 'Continue' }) + cont = screen.getByRole('button', { name: 'Continue' }) fireEvent.click(cont) // Instructions page 2 - getByLabelText('Confirm') + screen.getByLabelText('Confirm') }) }) diff --git a/app/src/organisms/ChangePipette/__tests__/CheckPipettesButton.test.tsx b/app/src/organisms/ChangePipette/__tests__/CheckPipettesButton.test.tsx index 918dfd171b8..bb1b9a1d842 100644 --- a/app/src/organisms/ChangePipette/__tests__/CheckPipettesButton.test.tsx +++ b/app/src/organisms/ChangePipette/__tests__/CheckPipettesButton.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { vi, it, describe, expect, beforeEach } from 'vitest' import { usePipettesQuery } from '@opentrons/react-api-client' @@ -37,9 +37,9 @@ describe('CheckPipettesButton', () => { onDone: vi.fn(), direction: 'attach', } - const { getByLabelText, getByText } = render(props) - const btn = getByLabelText('Confirm') - getByText('Confirm attachment') + render(props) + const btn = screen.getByLabelText('Confirm') + screen.getByText('Confirm attachment') fireEvent.click(btn) expect(refetch).toHaveBeenCalled() }) @@ -55,9 +55,9 @@ describe('CheckPipettesButton', () => { onDone: vi.fn(), direction: 'detach', } - const { getByLabelText, getByText } = render(props) - const btn = getByLabelText('Confirm') - getByText('Confirm detachment') + render(props) + const btn = screen.getByLabelText('Confirm') + screen.getByText('Confirm detachment') fireEvent.click(btn) expect(refetch).toHaveBeenCalled() }) @@ -71,10 +71,10 @@ describe('CheckPipettesButton', () => { robotName: 'otie', onDone: vi.fn(), } - const { getByLabelText } = render(props) - const btn = getByLabelText('Confirm') + render(props) + const btn = screen.getByLabelText('Confirm') fireEvent.click(btn) - expect(getByLabelText('Confirm')).toBeDisabled() + expect(screen.getByLabelText('Confirm')).toBeDisabled() }) it('renders the confirm detachment btn and with children and clicking on it calls fetchPipettes', () => { @@ -86,11 +86,11 @@ describe('CheckPipettesButton', () => { props = { ...props, } - const { getByLabelText, getByText } = render(props) - const btn = getByLabelText('Confirm') - getByText('btn text') + render(props) + const btn = screen.getByLabelText('Confirm') + screen.getByText('btn text') fireEvent.click(btn) expect(refetch).toHaveBeenCalled() - expect(getByLabelText('Confirm')).toBeDisabled() + expect(screen.getByLabelText('Confirm')).toBeDisabled() }) }) diff --git a/app/src/organisms/ChangePipette/__tests__/ClearDeckModal.test.tsx b/app/src/organisms/ChangePipette/__tests__/ClearDeckModal.test.tsx index 01079a32fcc..62ef001158a 100644 --- a/app/src/organisms/ChangePipette/__tests__/ClearDeckModal.test.tsx +++ b/app/src/organisms/ChangePipette/__tests__/ClearDeckModal.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { vi, it, describe, expect, beforeEach } from 'vitest' import { renderWithProviders } from '../../../__testing-utils__' @@ -19,20 +19,20 @@ describe('ClearDeckModal', () => { } }) it('renders the correct information when pipette is not attached', () => { - const { getByText } = render(props) - getByText('Before you begin') - getByText( + render(props) + screen.getByText('Before you begin') + screen.getByText( 'Before starting, remove all labware from the deck and all tips from pipettes. The gantry will move to the front of the robot.' ) }) it('renders the correct information when pipette is attached', () => { - const { getByText, getByRole } = render(props) - getByText('Before you begin') - getByText( + render(props) + screen.getByText('Before you begin') + screen.getByText( 'Before starting, remove all labware from the deck and all tips from pipettes. The gantry will move to the front of the robot.' ) - const cont = getByRole('button', { name: 'Get started' }) + const cont = screen.getByRole('button', { name: 'Get started' }) fireEvent.click(cont) expect(props.onContinueClick).toHaveBeenCalled() }) diff --git a/app/src/organisms/ChangePipette/__tests__/ConfirmPipette.test.tsx b/app/src/organisms/ChangePipette/__tests__/ConfirmPipette.test.tsx index ea38e20ea9c..363dc5fe29d 100644 --- a/app/src/organisms/ChangePipette/__tests__/ConfirmPipette.test.tsx +++ b/app/src/organisms/ChangePipette/__tests__/ConfirmPipette.test.tsx @@ -111,9 +111,9 @@ describe('ConfirmPipette', () => { isDisabled: false, } - const { getByText, getByRole } = render(props) - getByText('Successfully detached pipette!') - const btn = getByRole('button', { name: 'exit' }) + render(props) + screen.getByText('Successfully detached pipette!') + const btn = screen.getByRole('button', { name: 'exit' }) fireEvent.click(btn) expect(props.exit).toHaveBeenCalled() }) @@ -140,17 +140,19 @@ describe('ConfirmPipette', () => { isDisabled: false, } - const { getByText, getByRole } = render(props) - getByText('Pipette still detected') - getByText( + render(props) + screen.getByText('Pipette still detected') + screen.getByText( 'Check again to ensure that pipette is unplugged and entirely detached from the robot.' ) - const leaveAttachedBtn = getByRole('button', { name: 'Leave attached' }) + const leaveAttachedBtn = screen.getByRole('button', { + name: 'Leave attached', + }) fireEvent.click(leaveAttachedBtn) expect(props.exit).toBeCalled() - const tryAgainBtn = getByRole('button', { name: 'try again' }) + const tryAgainBtn = screen.getByRole('button', { name: 'try again' }) fireEvent.click(tryAgainBtn) expect(props.tryAgain).toBeCalled() }) @@ -177,17 +179,19 @@ describe('ConfirmPipette', () => { isDisabled: false, } - const { getByText, getByRole } = render(props) - getByText('Incorrect pipette attached') - getByText( + render(props) + screen.getByText('Incorrect pipette attached') + screen.getByText( 'The attached does not match the P300 8-Channel GEN2 you had originally selected.' ) - const detachTryAgainBtn = getByRole('button', { + const detachTryAgainBtn = screen.getByRole('button', { name: 'Detach and try again', }) fireEvent.click(detachTryAgainBtn) expect(props.tryAgain).toBeCalled() - const useAttachedBtn = getByRole('button', { name: 'Use attached pipette' }) + const useAttachedBtn = screen.getByRole('button', { + name: 'Use attached pipette', + }) fireEvent.click(useAttachedBtn) expect(props.setWrongWantedPipette).toHaveBeenCalled() }) @@ -214,10 +218,10 @@ describe('ConfirmPipette', () => { isDisabled: false, } - const { getByText, getByRole } = render(props) - getByText('Pipette attached!') - getByText('P10 Single-Channel is now ready to use.') - const btn = getByRole('button', { name: 'exit' }) + render(props) + screen.getByText('Pipette attached!') + screen.getByText('P10 Single-Channel is now ready to use.') + const btn = screen.getByRole('button', { name: 'exit' }) fireEvent.click(btn) expect(props.exit).toHaveBeenCalled() expect( @@ -247,17 +251,19 @@ describe('ConfirmPipette', () => { isDisabled: false, } - const { getByText, getByRole } = render(props) - getByText('Incorrect pipette attached') - getByText( + render(props) + screen.getByText('Incorrect pipette attached') + screen.getByText( 'The attached does not match the P300 8-Channel GEN2 you had originally selected.' ) - const detachTryAgainBtn = getByRole('button', { + const detachTryAgainBtn = screen.getByRole('button', { name: 'Detach and try again', }) fireEvent.click(detachTryAgainBtn) expect(props.tryAgain).toBeCalled() - const useAttachedBtn = getByRole('button', { name: 'Use attached pipette' }) + const useAttachedBtn = screen.getByRole('button', { + name: 'Use attached pipette', + }) fireEvent.click(useAttachedBtn) expect(props.setWrongWantedPipette).toHaveBeenCalled() }) @@ -284,9 +290,9 @@ describe('ConfirmPipette', () => { isDisabled: false, } - const { getByText, getByRole } = render(props) - getByText('Level the pipette') - const continueBtn = getByRole('button', { name: 'Confirm level' }) + render(props) + screen.getByText('Level the pipette') + const continueBtn = screen.getByRole('button', { name: 'Confirm level' }) fireEvent.click(continueBtn) expect(props.setConfirmPipetteLevel).toHaveBeenCalled() }) @@ -313,13 +319,15 @@ describe('ConfirmPipette', () => { isDisabled: false, } - const { getByText, getByRole } = render(props) - getByText('Pipette attached!') - getByText('P300 8-Channel GEN2 is now ready to use.') - const btn = getByRole('button', { name: 'exit' }) + render(props) + screen.getByText('Pipette attached!') + screen.getByText('P300 8-Channel GEN2 is now ready to use.') + const btn = screen.getByRole('button', { name: 'exit' }) fireEvent.click(btn) expect(props.exit).toHaveBeenCalled() - const pocBtn = getByRole('button', { name: 'Calibrate pipette offset' }) + const pocBtn = screen.getByRole('button', { + name: 'Calibrate pipette offset', + }) fireEvent.click(pocBtn) expect(props.toCalibrationDashboard).toBeCalled() }) @@ -349,19 +357,19 @@ describe('ConfirmPipette', () => { isDisabled: false, } - const { getByText, getByRole } = render(props) - getByText('Unable to detect P300 8-Channel GEN2') - getByText( + render(props) + screen.getByText('Unable to detect P300 8-Channel GEN2') + screen.getByText( 'Make sure to press the white connector tab in as far as you can, and that you feel it connect with the pipette.' ) - const cancelAttachmentBtn = getByRole('button', { + const cancelAttachmentBtn = screen.getByRole('button', { name: 'Cancel attachment', }) fireEvent.click(cancelAttachmentBtn) expect(props.exit).toBeCalled() - getByText('mock re-check connection') + screen.getByText('mock re-check connection') }) it('Should attach a pipette successfully', () => { @@ -386,10 +394,10 @@ describe('ConfirmPipette', () => { isDisabled: false, } - const { getByText, getByRole } = render(props) - getByText('Pipette attached!') - getByText('P10 Single-Channel is now ready to use.') - const btn = getByRole('button', { name: 'exit' }) + render(props) + screen.getByText('Pipette attached!') + screen.getByText('P10 Single-Channel is now ready to use.') + const btn = screen.getByRole('button', { name: 'exit' }) fireEvent.click(btn) expect(props.exit).toHaveBeenCalled() }) @@ -416,14 +424,16 @@ describe('ConfirmPipette', () => { isDisabled: false, } - const { getByText, getByRole } = render(props) - getByText('Pipette attached!') - getByText('P10 Single-Channel is now ready to use.') - const btn = getByRole('button', { name: 'exit' }) + render(props) + screen.getByText('Pipette attached!') + screen.getByText('P10 Single-Channel is now ready to use.') + const btn = screen.getByRole('button', { name: 'exit' }) fireEvent.click(btn) expect(props.exit).toHaveBeenCalled() - const pocBtn = getByRole('button', { name: 'Calibrate pipette offset' }) + const pocBtn = screen.getByRole('button', { + name: 'Calibrate pipette offset', + }) fireEvent.click(pocBtn) expect(props.toCalibrationDashboard).toBeCalled() }) @@ -433,10 +443,10 @@ describe('ConfirmPipette', () => { success: true, isDisabled: true, } - const { getByRole } = render(props) - expect(getByRole('button', { name: 'exit' })).toBeDisabled() + render(props) + expect(screen.getByRole('button', { name: 'exit' })).toBeDisabled() expect( - getByRole('button', { name: 'Calibrate pipette offset' }) + screen.getByRole('button', { name: 'Calibrate pipette offset' }) ).toBeDisabled() }) it('should render buttons as disabled on failure when robot is in motion/isDisabled is true', () => { @@ -445,8 +455,10 @@ describe('ConfirmPipette', () => { success: false, isDisabled: true, } - const { getByRole } = render(props) - expect(getByRole('button', { name: 'Leave attached' })).toBeDisabled() - expect(getByRole('button', { name: 'try again' })).toBeDisabled() + render(props) + expect( + screen.getByRole('button', { name: 'Leave attached' }) + ).toBeDisabled() + expect(screen.getByRole('button', { name: 'try again' })).toBeDisabled() }) }) diff --git a/app/src/organisms/ChangePipette/__tests__/ExitModal.test.tsx b/app/src/organisms/ChangePipette/__tests__/ExitModal.test.tsx index f5f89b11467..ad061d0f865 100644 --- a/app/src/organisms/ChangePipette/__tests__/ExitModal.test.tsx +++ b/app/src/organisms/ChangePipette/__tests__/ExitModal.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { vi, it, describe, expect, beforeEach } from 'vitest' import { renderWithProviders } from '../../../__testing-utils__' @@ -22,11 +22,13 @@ describe('ExitModal', () => { } }) it('renders the correct information and buttons for attach when no pipette is attached', () => { - const { getByText, getByRole } = render(props) - getByText('Progress will be lost') - getByText('Are you sure you want to exit before attaching your pipette?') - const back = getByRole('button', { name: 'Go back' }) - const exit = getByRole('button', { name: 'exit' }) + render(props) + screen.getByText('Progress will be lost') + screen.getByText( + 'Are you sure you want to exit before attaching your pipette?' + ) + const back = screen.getByRole('button', { name: 'Go back' }) + const exit = screen.getByRole('button', { name: 'exit' }) fireEvent.click(back) expect(props.back).toHaveBeenCalled() fireEvent.click(exit) @@ -38,8 +40,10 @@ describe('ExitModal', () => { ...props, direction: 'detach', } - const { getByText } = render(props) - getByText('Are you sure you want to exit before detaching your pipette?') + render(props) + screen.getByText( + 'Are you sure you want to exit before detaching your pipette?' + ) }) it('renders buttons disabled when isDisbaled is true', () => { @@ -47,8 +51,8 @@ describe('ExitModal', () => { ...props, isDisabled: true, } - const { getByRole } = render(props) - expect(getByRole('button', { name: 'Go back' })).toBeDisabled() - expect(getByRole('button', { name: 'exit' })).toBeDisabled() + render(props) + expect(screen.getByRole('button', { name: 'Go back' })).toBeDisabled() + expect(screen.getByRole('button', { name: 'exit' })).toBeDisabled() }) }) diff --git a/app/src/organisms/ChangePipette/__tests__/InstructionStep.test.tsx b/app/src/organisms/ChangePipette/__tests__/InstructionStep.test.tsx index b53db93e219..9cb5cac3b63 100644 --- a/app/src/organisms/ChangePipette/__tests__/InstructionStep.test.tsx +++ b/app/src/organisms/ChangePipette/__tests__/InstructionStep.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { it, describe, beforeEach } from 'vitest' +import { screen } from '@testing-library/react' import { GEN1, GEN2, LEFT, RIGHT } from '@opentrons/shared-data' @@ -25,9 +26,9 @@ describe('InstructionStep', () => { } }) it('renders the correct image for attaching a gen 1 single channel screw on left mount', () => { - const { getByText, getByAltText } = render(props) - getByText('children') - getByAltText('attach-left-single-GEN1-screws') + render(props) + screen.getByText('children') + screen.getByAltText('attach-left-single-GEN1-screws') }) it('renders the correct image for attaching a gen 2 single channel tab on left mount', () => { props = { @@ -35,9 +36,9 @@ describe('InstructionStep', () => { diagram: 'tab', displayCategory: GEN2, } - const { getByText, getByAltText } = render(props) - getByText('children') - getByAltText('attach-left-single-GEN2-tab') + render(props) + screen.getByText('children') + screen.getByAltText('attach-left-single-GEN2-tab') }) it('renders the correct image for detaching a gen 2 8 channel tab on right mount', () => { props = { @@ -48,8 +49,8 @@ describe('InstructionStep', () => { diagram: 'tab', displayCategory: GEN2, } - const { getByText, getByAltText } = render(props) - getByText('children') - getByAltText('detach-right-multi-GEN2-tab') + render(props) + screen.getByText('children') + screen.getByAltText('detach-right-multi-GEN2-tab') }) }) diff --git a/app/src/organisms/ChangePipette/__tests__/LevelPipette.test.tsx b/app/src/organisms/ChangePipette/__tests__/LevelPipette.test.tsx index 1e58d6b03b1..7419978c3cc 100644 --- a/app/src/organisms/ChangePipette/__tests__/LevelPipette.test.tsx +++ b/app/src/organisms/ChangePipette/__tests__/LevelPipette.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { vi, it, describe, expect, beforeEach } from 'vitest' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { LEFT } from '@opentrons/shared-data' import { @@ -71,34 +71,36 @@ describe('LevelPipette', () => { }) it('renders title and description', () => { - const { getByText } = render(props) - getByText(nestedTextMatcher('Level the pipette')) - getByText( + render(props) + screen.getByText(nestedTextMatcher('Level the pipette')) + screen.getByText( nestedTextMatcher( 'Using your hand, gently and slowly push the pipette up.' ) ) - getByText( + screen.getByText( nestedTextMatcher( 'Place the calibration block in slot 3 with the tall surface on the left side.' ) ) - getByText( + screen.getByText( nestedTextMatcher( 'Pull the pipette down so all 8 nozzles touch the surface of the block.' ) ) - getByText( + screen.getByText( nestedTextMatcher( 'While holding the pipette down, tighten the three screws.' ) ) - getByText(nestedTextMatcher('Gently and slowly push the pipette back up.')) + screen.getByText( + nestedTextMatcher('Gently and slowly push the pipette back up.') + ) }) it('the CTA should be clickable', () => { - const { getByRole } = render(props) - const cont = getByRole('button', { name: 'Confirm level' }) + render(props) + const cont = screen.getByRole('button', { name: 'Confirm level' }) fireEvent.click(cont) expect(props.confirm).toHaveBeenCalled() }) diff --git a/app/src/organisms/ChangePipette/__tests__/PipetteSelection.test.tsx b/app/src/organisms/ChangePipette/__tests__/PipetteSelection.test.tsx index d86bab1c814..40c9da2ad3e 100644 --- a/app/src/organisms/ChangePipette/__tests__/PipetteSelection.test.tsx +++ b/app/src/organisms/ChangePipette/__tests__/PipetteSelection.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { vi, it, describe, beforeEach } from 'vitest' +import { screen } from '@testing-library/react' import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' @@ -23,8 +24,8 @@ describe('PipetteSelection', () => { vi.mocked(PipetteSelect).mockReturnValue(
mock pipette select
) }) it('renders the text for pipette selection', () => { - const { getByText } = render(props) - getByText('Choose a pipette to attach') - getByText('mock pipette select') + render(props) + screen.getByText('Choose a pipette to attach') + screen.getByText('mock pipette select') }) }) diff --git a/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/CalibrationHealthCheckResults.test.tsx b/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/CalibrationHealthCheckResults.test.tsx index 10d39a309b5..d170c31cb73 100644 --- a/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/CalibrationHealthCheckResults.test.tsx +++ b/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/CalibrationHealthCheckResults.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { it, describe, expect, beforeEach } from 'vitest' +import { screen } from '@testing-library/react' import { COLORS, TYPOGRAPHY } from '@opentrons/components' @@ -24,25 +25,25 @@ describe('CalibrationHealthCheckResults', () => { }) it('should render title and success StatusLabel when all calibration is good', () => { - const { getByText, getByTestId } = render(props) - getByText('Calibration Health Check Results') - const statusLabel = getByText('Calibration complete') + render(props) + screen.getByText('Calibration Health Check Results') + const statusLabel = screen.getByText('Calibration complete') expect(statusLabel).toHaveStyle(`color: ${String(COLORS.black90)}`) expect(statusLabel).toHaveStyle( `font-weight: ${String(TYPOGRAPHY.fontWeightSemiBold)}` ) - expect(getByTestId('status_circle')).toHaveStyle( + expect(screen.getByTestId('status_circle')).toHaveStyle( `color: ${String(COLORS.green50)}` ) - expect(getByTestId('status_circle')).toHaveStyle(`height: 0.3125rem`) - expect(getByTestId('status_circle')).toHaveStyle(`width: 0.3125rem`) + expect(screen.getByTestId('status_circle')).toHaveStyle(`height: 0.3125rem`) + expect(screen.getByTestId('status_circle')).toHaveStyle(`width: 0.3125rem`) }) it('should render title and warning StatusLabel when calibration results includes bad', () => { props.isCalibrationRecommended = true - const { getByText, getByTestId } = render(props) - getByText('Calibration recommended') - expect(getByTestId('status_circle')).toHaveStyle( + render(props) + screen.getByText('Calibration recommended') + expect(screen.getByTestId('status_circle')).toHaveStyle( `color: ${String(COLORS.yellow50)}` ) }) diff --git a/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/CalibrationResult.test.tsx b/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/CalibrationResult.test.tsx index d1f0958806c..fd6938fdbcd 100644 --- a/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/CalibrationResult.test.tsx +++ b/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/CalibrationResult.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { vi, it, describe, beforeEach } from 'vitest' +import { screen } from '@testing-library/react' import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../i18n' @@ -26,45 +27,45 @@ describe('PipetteCalibrationResult', () => { }) it('should render pipette offset calibration title and RenderResult - isBadCal: false', () => { - const { getByText } = render(props) - getByText('pipette offset calibration') - getByText('render result') + render(props) + screen.getByText('pipette offset calibration') + screen.getByText('render result') }) it('should render pipette offset calibration title and RenderResult - isBadCal: true', () => { props.isBadCal = true - const { getByText } = render(props) - getByText('pipette offset calibration') - getByText('render result') + render(props) + screen.getByText('pipette offset calibration') + screen.getByText('render result') }) it('should render tip length calibration title and RenderResult - isBadCal: false', () => { props.calType = 'tipLength' - const { getByText } = render(props) - getByText('tip length calibration') - getByText('render result') + render(props) + screen.getByText('tip length calibration') + screen.getByText('render result') }) it('should render tip length calibration title and RenderResult - isBadCal: true', () => { props.calType = 'tipLength' props.isBadCal = true - const { getByText } = render(props) - getByText('tip length calibration') - getByText('render result') + render(props) + screen.getByText('tip length calibration') + screen.getByText('render result') }) it('should render deck calibration title and RenderResult - isBadCal: false', () => { props.calType = 'deck' - const { getByText } = render(props) - getByText('Deck Calibration') - getByText('render result') + render(props) + screen.getByText('Deck Calibration') + screen.getByText('render result') }) it('should render deck calibration title and RenderResult - isBadCal: true', () => { props.calType = 'deck' props.isBadCal = true - const { getByText } = render(props) - getByText('Deck Calibration') - getByText('render result') + render(props) + screen.getByText('Deck Calibration') + screen.getByText('render result') }) }) diff --git a/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/RenderMountInformation.test.tsx b/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/RenderMountInformation.test.tsx index e695bbf2320..c678cdf4c78 100644 --- a/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/RenderMountInformation.test.tsx +++ b/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/RenderMountInformation.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { vi, it, describe, beforeEach } from 'vitest' +import { screen } from '@testing-library/react' import { getPipetteModelSpecs } from '@opentrons/shared-data' @@ -39,22 +40,22 @@ describe('RenderMountInformation', () => { }) it('should render left mount with mock pipette', () => { - const { getByText } = render(props) - getByText('left MOUNT') - getByText('mock pipette display name') + render(props) + screen.getByText('left MOUNT') + screen.getByText('mock pipette display name') }) it('should render right mount with mock pipette', () => { props.mount = RIGHT - const { getByText } = render(props) - getByText('right MOUNT') - getByText('mock pipette display name') + render(props) + screen.getByText('right MOUNT') + screen.getByText('mock pipette display name') }) it('should render empty without pipette', () => { props.pipette = undefined - const { getByText } = render(props) - getByText('left MOUNT') - getByText('empty') + render(props) + screen.getByText('left MOUNT') + screen.getByText('empty') }) }) diff --git a/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/RenderResult.test.tsx b/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/RenderResult.test.tsx index a2065ed198f..a2b191e07a2 100644 --- a/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/RenderResult.test.tsx +++ b/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/RenderResult.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { it, describe, expect, beforeEach } from 'vitest' +import { screen } from '@testing-library/react' import { COLORS, SIZE_1 } from '@opentrons/components' @@ -24,9 +25,9 @@ describe('RenderResult', () => { }) it('should render calibration result and icon - isBadCal: false', () => { - const { getByText, getByTestId } = render(props) - getByText('Good calibration') - const icon = getByTestId('RenderResult_icon') + render(props) + screen.getByText('Good calibration') + const icon = screen.getByTestId('RenderResult_icon') expect(icon).toHaveStyle(`color: ${String(COLORS.green50)}`) expect(icon).toHaveStyle(`height: ${String(SIZE_1)}`) expect(icon).toHaveStyle(`width: ${String(SIZE_1)}`) @@ -34,9 +35,9 @@ describe('RenderResult', () => { it('should render calibration result and icon - isBadCal: true', () => { props.isBadCal = true - const { getByText, getByTestId } = render(props) - getByText('Recalibration recommended') - const icon = getByTestId('RenderResult_icon') + render(props) + screen.getByText('Recalibration recommended') + const icon = screen.getByTestId('RenderResult_icon') expect(icon).toHaveStyle(`color: ${String(COLORS.yellow50)}`) expect(icon).toHaveStyle(`height: ${String(SIZE_1)}`) expect(icon).toHaveStyle(`width: ${String(SIZE_1)}`) diff --git a/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/ResultsSummary.test.tsx b/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/ResultsSummary.test.tsx index 22679c0e226..f9bef5d7feb 100644 --- a/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/ResultsSummary.test.tsx +++ b/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/ResultsSummary.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { vi, it, describe, expect, beforeEach } from 'vitest' import { saveAs } from 'file-saver' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../i18n' @@ -71,23 +71,23 @@ describe('ResultsSummary', () => { }) it('should render components', () => { - const { getByText, getAllByText } = render(props) - getByText('mock calibration health check results') - expect(getAllByText('mock render mount information').length).toBe(2) + render(props) + screen.getByText('mock calibration health check results') + expect(screen.getAllByText('mock render mount information').length).toBe(2) // deck + pipetteOffset x 2 + tipLength x 2 - expect(getAllByText('mock calibration result').length).toBe(5) + expect(screen.getAllByText('mock calibration result').length).toBe(5) }) it('saves the calibration report when clicking the button', () => { - const { getByTestId } = render(props) - const button = getByTestId('ResultsSummary_Download_Button') + render(props) + const button = screen.getByTestId('ResultsSummary_Download_Button') fireEvent.click(button) expect(vi.mocked(saveAs)).toHaveBeenCalled() }) it('calls mock function when clicking finish', () => { - const { getByRole } = render(props) - const button = getByRole('button', { name: 'Finish' }) + render(props) + const button = screen.getByRole('button', { name: 'Finish' }) fireEvent.click(button) expect(mockDeleteSession).toHaveBeenCalled() }) diff --git a/app/src/organisms/CommandText/__tests__/CommandText.test.tsx b/app/src/organisms/CommandText/__tests__/CommandText.test.tsx index c7a8d316f43..51cc60780cf 100644 --- a/app/src/organisms/CommandText/__tests__/CommandText.test.tsx +++ b/app/src/organisms/CommandText/__tests__/CommandText.test.tsx @@ -198,7 +198,9 @@ describe('CommandText', () => { />, { i18nInstance: i18n } ) - screen.getByText('Moving to well A1 of NEST 1 Well Reservoir 195 mL in Slot 5') + screen.getByText( + 'Moving to well A1 of NEST 1 Well Reservoir 195 mL in Slot 5' + ) } }) it('renders correct text for labware involving an addressable area slot', () => { @@ -404,7 +406,9 @@ describe('CommandText', () => { />, { i18nInstance: i18n } ) - screen.getByText('Returning tip to A1 of Opentrons 96 Tip Rack 300 µL in Slot 9') + screen.getByText( + 'Returning tip to A1 of Opentrons 96 Tip Rack 300 µL in Slot 9' + ) }) it('renders correct text for dropTipInPlace', () => { renderWithProviders( @@ -649,7 +653,9 @@ describe('CommandText', () => { i18nInstance: i18n, } ) - screen.getByText('Setting Temperature Module to 20°C (rounded to nearest integer)') + screen.getByText( + 'Setting Temperature Module to 20°C (rounded to nearest integer)' + ) }) it('renders correct text for temperatureModule/waitForTemperature with target temp', () => { const mockTemp = 20 @@ -696,7 +702,9 @@ describe('CommandText', () => { i18nInstance: i18n, } ) - screen.getByText('Waiting for Temperature Module to reach target temperature') + screen.getByText( + 'Waiting for Temperature Module to reach target temperature' + ) }) it('renders correct text for thermocycler/setTargetBlockTemperature', () => { const mockTemp = 20 diff --git a/app/src/organisms/ConfigurePipette/__tests__/ConfigFormResetButton.test.tsx b/app/src/organisms/ConfigurePipette/__tests__/ConfigFormResetButton.test.tsx index d15645c2d40..896962d14a0 100644 --- a/app/src/organisms/ConfigurePipette/__tests__/ConfigFormResetButton.test.tsx +++ b/app/src/organisms/ConfigurePipette/__tests__/ConfigFormResetButton.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { vi, it, expect, describe, beforeEach } from 'vitest' import { renderWithProviders } from '../../../__testing-utils__' @@ -22,12 +22,12 @@ describe('ConfigFormResetButton', () => { }) it('renders text and not disabled', () => { - const { getByRole, getByText } = render(props) - const button = getByRole('button', { name: 'Reset all' }) - getByText( + render(props) + const button = screen.getByRole('button', { name: 'Reset all' }) + screen.getByText( 'These are advanced settings. Please do not attempt to adjust without assistance from Opentrons Support. Changing these settings may affect the lifespan of your pipette.' ) - getByText( + screen.getByText( 'These settings do not override any pipette settings defined in protocols.' ) fireEvent.click(button) @@ -38,8 +38,8 @@ describe('ConfigFormResetButton', () => { onClick: vi.fn(), disabled: true, } - const { getByRole } = render(props) - const button = getByRole('button', { name: 'Reset all' }) + render(props) + const button = screen.getByRole('button', { name: 'Reset all' }) expect(button).toBeDisabled() }) }) diff --git a/app/src/organisms/HowCalibrationWorksModal/__tests__/HowCalibrationWorksModal.test.tsx b/app/src/organisms/HowCalibrationWorksModal/__tests__/HowCalibrationWorksModal.test.tsx index 66727487559..7a37b9177e8 100644 --- a/app/src/organisms/HowCalibrationWorksModal/__tests__/HowCalibrationWorksModal.test.tsx +++ b/app/src/organisms/HowCalibrationWorksModal/__tests__/HowCalibrationWorksModal.test.tsx @@ -30,7 +30,9 @@ describe('HowCalibrationWorksModal', () => { screen.getByText( 'Robot calibration establishes how the robot knows where it is in relation to the deck. Accurate Robot calibration is essential to run protocols successfully. Robot calibration has 3 parts: Deck calibration, Tip Length calibration and Pipette Offset calibration.' ) - expect(screen.getByRole('heading', { name: 'Deck Calibration' })).toBeTruthy() + expect( + screen.getByRole('heading', { name: 'Deck Calibration' }) + ).toBeTruthy() screen.getByText( 'This measures the deck X and Y values relative to the gantry. Deck Calibration is the foundation for Tip Length Calibration and Pipette Offset Calibration.' ) @@ -65,9 +67,11 @@ describe('HowCalibrationWorksModal', () => { it('should render a link to the learn more page', () => { render(props) expect( - screen.getByRole('link', { - name: 'Learn more about robot calibration', - }).getAttribute('href') + screen + .getByRole('link', { + name: 'Learn more about robot calibration', + }) + .getAttribute('href') ).toBe( 'https://support.opentrons.com/s/article/How-positional-calibration-works-on-the-OT-2' ) diff --git a/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx b/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx index 32fc828c943..1db12c649f1 100644 --- a/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx +++ b/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx @@ -67,9 +67,7 @@ describe('IncompatibleModuleTakeover', () => { it(`should render nothing on ${target} when no incompatible modules are attached`, () => { getRenderer([])({ ...props, isOnDevice: target === 'odd' }) expect(screen.getByTestId(TOP_PORTAL_ID)).resolves.toBeEmptyDOMElement() - expect( - screen.getByTestId(MODAL_PORTAL_ID) - ).resolves.toBeEmptyDOMElement() + expect(screen.getByTestId(MODAL_PORTAL_ID)).resolves.toBeEmptyDOMElement() expect(screen.queryByText(/TEST ELEMENT/)).toBeNull() }) }) diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/AttachProbe.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/AttachProbe.test.tsx index 2ec224707b9..e1f6c5bd765 100644 --- a/app/src/organisms/PipetteWizardFlows/__tests__/AttachProbe.test.tsx +++ b/app/src/organisms/PipetteWizardFlows/__tests__/AttachProbe.test.tsx @@ -195,15 +195,15 @@ describe('AttachProbe', () => { ...props, isOnDevice: true, } - const { getByText, getByTestId, getByRole, getByLabelText } = render(props) - getByText('Attach calibration probe') - getByText( + render(props) + screen.getByText('Attach calibration probe') + screen.getByText( 'Take the calibration probe from its storage location. Ensure its collar is unlocked. Push the pipette ejector up and press the probe firmly onto the pipette nozzle. Twist the collar to lock the probe. Test that the probe is secure by gently pulling it back and forth.' ) - getByTestId( + screen.getByTestId( '/app/src/assets/videos/pipette-wizard-flows/Pipette_Attach_Probe_1.webm' ) - fireEvent.click(getByRole('button', { name: 'Begin calibration' })) + fireEvent.click(screen.getByRole('button', { name: 'Begin calibration' })) await waitFor(() => { expect(props.chainRunCommands).toHaveBeenCalledWith( [ @@ -245,7 +245,7 @@ describe('AttachProbe', () => { await waitFor(() => { expect(props.proceed).toHaveBeenCalled() }) - fireEvent.click(getByLabelText('back')) + fireEvent.click(screen.getByLabelText('back')) expect(props.goBack).toHaveBeenCalled() }) diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/BeforeBeginning.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/BeforeBeginning.test.tsx index 8c6529973a9..f8450ba5583 100644 --- a/app/src/organisms/PipetteWizardFlows/__tests__/BeforeBeginning.test.tsx +++ b/app/src/organisms/PipetteWizardFlows/__tests__/BeforeBeginning.test.tsx @@ -241,7 +241,9 @@ describe('BeforeBeginning', () => { screen.getByText( 'Provided with the robot. Using another size can strip the instruments’s screws.' ) - const proceedBtn = screen.getByRole('button', { name: 'Move gantry to front' }) + const proceedBtn = screen.getByRole('button', { + name: 'Move gantry to front', + }) fireEvent.click(proceedBtn) expect(props.chainRunCommands).toHaveBeenCalledWith( [ diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/DetachProbe.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/DetachProbe.test.tsx index 0430b6dfbb0..a32f683a6ff 100644 --- a/app/src/organisms/PipetteWizardFlows/__tests__/DetachProbe.test.tsx +++ b/app/src/organisms/PipetteWizardFlows/__tests__/DetachProbe.test.tsx @@ -48,7 +48,9 @@ describe('DetachProbe', () => { screen.getByTestId( '/app/src/assets/videos/pipette-wizard-flows/Pipette_Detach_Probe_1.webm' ) - const proceedBtn = screen.getByRole('button', { name: 'Complete calibration' }) + const proceedBtn = screen.getByRole('button', { + name: 'Complete calibration', + }) fireEvent.click(proceedBtn) expect(props.proceed).toHaveBeenCalled() const backBtn = screen.getByLabelText('back') diff --git a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx index 7ee65e54083..02823e085a0 100644 --- a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx +++ b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx @@ -289,6 +289,8 @@ describe('ModuleCalibrationOverflowMenu', () => { it('should be disabled when e-stop button is pressed', () => { when(useIsEstopNotDisengaged).calledWith(ROBOT_NAME).thenReturn(true) render(props) - expect(screen.getByLabelText('ModuleCalibrationOverflowMenu')).toBeDisabled() + expect( + screen.getByLabelText('ModuleCalibrationOverflowMenu') + ).toBeDisabled() }) }) diff --git a/app/src/pages/EmergencyStop/__tests__/EmergencyStop.test.tsx b/app/src/pages/EmergencyStop/__tests__/EmergencyStop.test.tsx index f22626f57e9..bbfee8eb376 100644 --- a/app/src/pages/EmergencyStop/__tests__/EmergencyStop.test.tsx +++ b/app/src/pages/EmergencyStop/__tests__/EmergencyStop.test.tsx @@ -50,7 +50,9 @@ describe('EmergencyStop', () => { ) screen.getByText('Continue') expect(screen.getByRole('button')).toBeDisabled() - expect(screen.getByRole('img').getAttribute('src')).toContain(ESTOP_IMAGE_NAME) + expect(screen.getByRole('img').getAttribute('src')).toContain( + ESTOP_IMAGE_NAME + ) }) it('should render text, icon, button when e-stop button is connected', () => { diff --git a/app/src/pages/InstrumentDetail/__tests__/InstrumentDetailOverflowMenu.test.tsx b/app/src/pages/InstrumentDetail/__tests__/InstrumentDetailOverflowMenu.test.tsx index 9a31891c27a..da35c85312f 100644 --- a/app/src/pages/InstrumentDetail/__tests__/InstrumentDetailOverflowMenu.test.tsx +++ b/app/src/pages/InstrumentDetail/__tests__/InstrumentDetailOverflowMenu.test.tsx @@ -147,9 +147,7 @@ describe('UpdateBuildroot', () => { }) it('renders appropriate options when the instrument is a pipette without calibration', () => { - render( - MOCK_PIPETTE_WITHOUT_CALIBRATION - ) + render(MOCK_PIPETTE_WITHOUT_CALIBRATION) const btn = screen.getByTestId('testButton') fireEvent.click(btn) @@ -196,7 +194,9 @@ describe('UpdateBuildroot', () => { render(MOCK_PIPETTE) const btn = screen.getByTestId('testButton') fireEvent.click(btn) - const menuListElement = screen.getByLabelText('BackgroundOverlay_ModalShell') + const menuListElement = screen.getByLabelText( + 'BackgroundOverlay_ModalShell' + ) fireEvent.click(menuListElement) expect(screen.queryByText('Recalibrate')).not.toBeInTheDocument() diff --git a/app/src/pages/NetworkSetupMenu/__tests__/NetworkSetupMenu.test.tsx b/app/src/pages/NetworkSetupMenu/__tests__/NetworkSetupMenu.test.tsx index aef9f4f2114..f2febd1a32d 100644 --- a/app/src/pages/NetworkSetupMenu/__tests__/NetworkSetupMenu.test.tsx +++ b/app/src/pages/NetworkSetupMenu/__tests__/NetworkSetupMenu.test.tsx @@ -42,7 +42,9 @@ describe('NetworkSetupMenu', () => { screen.getByText('Ethernet') screen.getByText("Connect to your lab's wired network.") screen.getByText('USB') - screen.getByText('Connect directly to a computer (running the Opentrons App).') + screen.getByText( + 'Connect directly to a computer (running the Opentrons App).' + ) }) it('should call mock function when tapping a button', () => { diff --git a/app/src/pages/RobotSettingsDashboard/__tests__/RobotSettingsDashboard.test.tsx b/app/src/pages/RobotSettingsDashboard/__tests__/RobotSettingsDashboard.test.tsx index 80a5c47256d..9d73a1a77bc 100644 --- a/app/src/pages/RobotSettingsDashboard/__tests__/RobotSettingsDashboard.test.tsx +++ b/app/src/pages/RobotSettingsDashboard/__tests__/RobotSettingsDashboard.test.tsx @@ -90,7 +90,9 @@ describe('RobotSettingsDashboard', () => { screen.getByText('Robot System Version') screen.getByText('Network Settings') screen.getByText('Status LEDs') - screen.getByText('Control the strip of color lights on the front of the robot.') + screen.getByText( + 'Control the strip of color lights on the front of the robot.' + ) screen.getByText('Touchscreen Sleep') screen.getByText('Touchscreen Brightness') screen.getByText('Privacy')