From e17bbb689975c7ca97d138e352ead94b283e29b0 Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Fri, 31 May 2024 12:30:29 -0400 Subject: [PATCH 01/10] chore_testing-library-linting-audit --- .eslintrc.js | 4 ---- .../components/FileSidebar/__tests__/FileSidebar.test.tsx | 3 +-- .../__tests__/LabwareSelectionModal.test.tsx | 7 ++----- .../forms/__tests__/HeaterShakerForm.test.tsx | 3 +-- .../src/components/__tests__/FilePage.test.tsx | 7 ++----- .../src/components/__tests__/StepCreationButton.test.tsx | 7 ++----- .../modals/CreateFileWizard/__tests__/GoBack.test.tsx | 8 ++------ .../CreateFileWizard/__tests__/PipetteTipsTile.test.tsx | 7 ++----- .../EditModulesModal/__tests__/EditModulesModal.test.tsx | 7 ++----- .../__tests__/EditMultipleModulesModal.test.tsx | 7 ++----- .../AutoAddPauseUntilHeaterShakerTempStepModal.test.tsx | 7 ++----- .../__tests__/AutoAddPauseUntilTempStepModal.test.tsx | 7 ++----- .../components/modules/__tests__/CrashInfoBox.test.tsx | 7 ++----- .../modules/__tests__/StagingAreaModal.test.tsx | 7 ++----- .../components/modules/__tests__/StagingAreasRow.test.tsx | 7 ++----- 15 files changed, 26 insertions(+), 69 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 1226f14f9d3..7819df30d4c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -139,10 +139,6 @@ module.exports = { { files: ['**/__tests__/**test.tsx'], extends: ['plugin:testing-library/react'], - rules: { - 'testing-library/no-manual-cleanup': 'off', - 'testing-library/prefer-screen-queries': 'warn', - }, }, { files: ['**/*.stories.tsx'], diff --git a/protocol-designer/src/components/FileSidebar/__tests__/FileSidebar.test.tsx b/protocol-designer/src/components/FileSidebar/__tests__/FileSidebar.test.tsx index 11bda8345c6..26a2933712e 100644 --- a/protocol-designer/src/components/FileSidebar/__tests__/FileSidebar.test.tsx +++ b/protocol-designer/src/components/FileSidebar/__tests__/FileSidebar.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest' -import { fireEvent, screen, cleanup } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { FLEX_ROBOT_TYPE, fixtureTiprack300ul } from '@opentrons/shared-data' import { renderWithProviders } from '../../../__testing-utils__' import { createFile, getRobotType } from '../../../file-data/selectors' @@ -69,7 +69,6 @@ describe('FileSidebar', () => { }) afterEach(() => { vi.resetAllMocks() - cleanup() }) it('renders the file sidebar and exports with blocking hint for exporting', () => { vi.mocked(useBlockingHint).mockReturnValue(
mock blocking hint
) diff --git a/protocol-designer/src/components/LabwareSelectionModal/__tests__/LabwareSelectionModal.test.tsx b/protocol-designer/src/components/LabwareSelectionModal/__tests__/LabwareSelectionModal.test.tsx index 7274bccde4a..d8201e34cd6 100644 --- a/protocol-designer/src/components/LabwareSelectionModal/__tests__/LabwareSelectionModal.test.tsx +++ b/protocol-designer/src/components/LabwareSelectionModal/__tests__/LabwareSelectionModal.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest' -import { fireEvent, screen, cleanup } from '@testing-library/react' +import { vi, describe, it, expect, beforeEach } from 'vitest' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders, nestedTextMatcher, @@ -73,9 +73,6 @@ describe('LabwareSelectionModal', () => { }) vi.mocked(getCustomLabwareDefsByURI).mockReturnValue({}) }) - afterEach(() => { - cleanup() - }) it('should NOT filter out labware above 57 mm when the slot is NOT next to a heater shaker', () => { render() expect(vi.mocked(getIsLabwareAboveHeight)).not.toHaveBeenCalled() diff --git a/protocol-designer/src/components/StepEditForm/forms/__tests__/HeaterShakerForm.test.tsx b/protocol-designer/src/components/StepEditForm/forms/__tests__/HeaterShakerForm.test.tsx index 88da7ef9d06..44621f08f2c 100644 --- a/protocol-designer/src/components/StepEditForm/forms/__tests__/HeaterShakerForm.test.tsx +++ b/protocol-designer/src/components/StepEditForm/forms/__tests__/HeaterShakerForm.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { describe, it, beforeEach, afterEach, vi } from 'vitest' -import { screen, cleanup } from '@testing-library/react' +import { screen } from '@testing-library/react' import { renderWithProviders } from '../../../../__testing-utils__' import { getHeaterShakerLabwareOptions } from '../../../../ui/modules/selectors' import { i18n } from '../../../../localization' @@ -111,7 +111,6 @@ describe('HeaterShakerForm', () => { }) afterEach(() => { vi.restoreAllMocks() - cleanup() }) it('should render a title', () => { render(props) diff --git a/protocol-designer/src/components/__tests__/FilePage.test.tsx b/protocol-designer/src/components/__tests__/FilePage.test.tsx index be72377da48..bfbde42bfa9 100644 --- a/protocol-designer/src/components/__tests__/FilePage.test.tsx +++ b/protocol-designer/src/components/__tests__/FilePage.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { vi, describe, expect, afterEach, beforeEach, it } from 'vitest' -import { cleanup, fireEvent, screen } from '@testing-library/react' +import { vi, describe, expect, beforeEach, it } from 'vitest' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '../../__testing-utils__' import { i18n } from '../../localization' import { getFileMetadata } from '../../file-data/selectors' @@ -51,9 +51,6 @@ describe('File Page', () => {
mock FilePipettesModal
) }) - afterEach(() => { - cleanup() - }) it('renders file page with all the information', () => { render() screen.getByText('Information') diff --git a/protocol-designer/src/components/__tests__/StepCreationButton.test.tsx b/protocol-designer/src/components/__tests__/StepCreationButton.test.tsx index 1e227f4e010..167dd538fdd 100644 --- a/protocol-designer/src/components/__tests__/StepCreationButton.test.tsx +++ b/protocol-designer/src/components/__tests__/StepCreationButton.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { vi, describe, afterEach, beforeEach, it } from 'vitest' -import { cleanup, fireEvent, screen } from '@testing-library/react' +import { vi, describe, beforeEach, it } from 'vitest' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '../../__testing-utils__' import { getCurrentFormHasUnsavedChanges, @@ -30,9 +30,6 @@ describe('StepCreationButton', () => { labware: {}, }) }) - afterEach(() => { - cleanup() - }) it('renders the add step button and clicking on it reveals all the button option, no modules', () => { render() const addStep = screen.getByRole('button', { name: '+ Add Step' }) diff --git a/protocol-designer/src/components/modals/CreateFileWizard/__tests__/GoBack.test.tsx b/protocol-designer/src/components/modals/CreateFileWizard/__tests__/GoBack.test.tsx index 54e75aa8dbc..d87a6f80317 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/__tests__/GoBack.test.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/__tests__/GoBack.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { it, describe, beforeEach, afterEach, expect, vi } from 'vitest' -import { fireEvent, cleanup } from '@testing-library/react' +import { it, describe, beforeEach, expect, vi } from 'vitest' +import { fireEvent } from '@testing-library/react' import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../localization' import { GoBack } from '../GoBack' @@ -20,10 +20,6 @@ describe('GoBack', () => { } }) - afterEach(() => { - cleanup() - }) - it('the go back renders and clicking on it calls prop', () => { const { getByLabelText } = render(props) diff --git a/protocol-designer/src/components/modals/CreateFileWizard/__tests__/PipetteTipsTile.test.tsx b/protocol-designer/src/components/modals/CreateFileWizard/__tests__/PipetteTipsTile.test.tsx index ce5e29f06a8..14311e7a7e5 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/__tests__/PipetteTipsTile.test.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/__tests__/PipetteTipsTile.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { fireEvent, screen, cleanup } from '@testing-library/react' -import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest' +import { fireEvent, screen } from '@testing-library/react' +import { describe, it, expect, vi, beforeEach } from 'vitest' import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data' import { fixture_tiprack_10_ul, @@ -92,9 +92,6 @@ describe('PipetteTipsTile', () => { }, ]) }) - afterEach(() => { - cleanup() - }) it('renders default tiprack options for 1000uL flex pipette and btn ctas work', () => { render(props) screen.getByText('Choose tips for Flex 1-Channel 1000 μL') diff --git a/protocol-designer/src/components/modals/EditModulesModal/__tests__/EditModulesModal.test.tsx b/protocol-designer/src/components/modals/EditModulesModal/__tests__/EditModulesModal.test.tsx index ba0be7a4e9a..b3773552560 100644 --- a/protocol-designer/src/components/modals/EditModulesModal/__tests__/EditModulesModal.test.tsx +++ b/protocol-designer/src/components/modals/EditModulesModal/__tests__/EditModulesModal.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest' -import { fireEvent, screen, cleanup } from '@testing-library/react' +import { describe, it, expect, vi, beforeEach } from 'vitest' +import { fireEvent, screen } from '@testing-library/react' import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data' import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../localization' @@ -80,9 +80,6 @@ describe('Edit Modules Modal', () => { vi.mocked(getLabwareIsCompatible).mockReturnValue(true) vi.mocked(getDisableModuleRestrictions).mockReturnValue(false) }) - afterEach(() => { - cleanup() - }) it('renders the edit modules modal for a temp on a flex', () => { render(props) screen.getByText('Temperature module') diff --git a/protocol-designer/src/components/modals/EditModulesModal/__tests__/EditMultipleModulesModal.test.tsx b/protocol-designer/src/components/modals/EditModulesModal/__tests__/EditMultipleModulesModal.test.tsx index df2bd73545f..d10b7c1b466 100644 --- a/protocol-designer/src/components/modals/EditModulesModal/__tests__/EditMultipleModulesModal.test.tsx +++ b/protocol-designer/src/components/modals/EditModulesModal/__tests__/EditMultipleModulesModal.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest' -import { fireEvent, screen, cleanup } from '@testing-library/react' +import { describe, it, expect, vi, beforeEach } from 'vitest' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../localization' import { getInitialDeckSetup } from '../../../../step-forms/selectors' @@ -70,9 +70,6 @@ describe('EditMultipleModulesModal', () => { vi.mocked(getLabwareOnSlot).mockReturnValue(null) vi.mocked(getSlotIsEmpty).mockReturnValue(true) }) - afterEach(() => { - cleanup() - }) it('renders modal and buttons with no error', () => { vi.mocked(getLabwareIsCompatible).mockReturnValue(true) render(props) diff --git a/protocol-designer/src/components/modals/__tests__/AutoAddPauseUntilHeaterShakerTempStepModal.test.tsx b/protocol-designer/src/components/modals/__tests__/AutoAddPauseUntilHeaterShakerTempStepModal.test.tsx index 45a3133e592..0f41b4b7534 100644 --- a/protocol-designer/src/components/modals/__tests__/AutoAddPauseUntilHeaterShakerTempStepModal.test.tsx +++ b/protocol-designer/src/components/modals/__tests__/AutoAddPauseUntilHeaterShakerTempStepModal.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest' -import { fireEvent, screen, cleanup } from '@testing-library/react' +import { describe, it, expect, vi, beforeEach } from 'vitest' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../localization' import { AutoAddPauseUntilHeaterShakerTempStepModal } from '../AutoAddPauseUntilHeaterShakerTempStepModal' @@ -27,9 +27,6 @@ describe('AutoAddPauseUntilHeaterShakerTempStepModal ', () => { handleContinueClick: vi.fn(), } }) - afterEach(() => { - cleanup() - }) it('should render the correct text with 10 C temp and buttons are clickable', () => { render(props) diff --git a/protocol-designer/src/components/modals/__tests__/AutoAddPauseUntilTempStepModal.test.tsx b/protocol-designer/src/components/modals/__tests__/AutoAddPauseUntilTempStepModal.test.tsx index bf6bc723a1a..9cf8a780c6b 100644 --- a/protocol-designer/src/components/modals/__tests__/AutoAddPauseUntilTempStepModal.test.tsx +++ b/protocol-designer/src/components/modals/__tests__/AutoAddPauseUntilTempStepModal.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest' -import { cleanup, fireEvent, screen } from '@testing-library/react' +import { describe, it, expect, vi, beforeEach } from 'vitest' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../localization' import { AutoAddPauseUntilTempStepModal } from '../AutoAddPauseUntilTempStepModal' @@ -22,9 +22,6 @@ describe('AutoAddPauseUntilTempStepModal ', () => { handleContinueClick: vi.fn(), } }) - afterEach(() => { - cleanup() - }) it('should render the correct text with 10 C temp and buttons are clickable', () => { render(props) screen.getByText('Pause protocol until temperature module is at 10°C?') diff --git a/protocol-designer/src/components/modules/__tests__/CrashInfoBox.test.tsx b/protocol-designer/src/components/modules/__tests__/CrashInfoBox.test.tsx index b846355c638..8e1f6da07c3 100644 --- a/protocol-designer/src/components/modules/__tests__/CrashInfoBox.test.tsx +++ b/protocol-designer/src/components/modules/__tests__/CrashInfoBox.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { describe, it, expect, beforeEach, afterEach } from 'vitest' -import { cleanup, screen } from '@testing-library/react' +import { describe, it, expect, beforeEach } from 'vitest' +import { screen } from '@testing-library/react' import { CrashInfoBox } from '../CrashInfoBox' import { i18n } from '../../../localization' import { renderWithProviders } from '../../../__testing-utils__' @@ -10,9 +10,6 @@ describe('CrashInfoBox', () => { beforeEach(() => { props = {} }) - afterEach(() => { - cleanup() - }) it('should render PipetteModuleCollisions, ModuleLabwareCollisions, and ModuleModuleCollisions when a heater shaker is on deck', () => { props = { ...props, diff --git a/protocol-designer/src/components/modules/__tests__/StagingAreaModal.test.tsx b/protocol-designer/src/components/modules/__tests__/StagingAreaModal.test.tsx index d0bc6a4bc15..e7e4fa45465 100644 --- a/protocol-designer/src/components/modules/__tests__/StagingAreaModal.test.tsx +++ b/protocol-designer/src/components/modules/__tests__/StagingAreaModal.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest' -import { fireEvent, screen, cleanup } from '@testing-library/react' +import { vi, describe, it, expect, beforeEach } from 'vitest' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../localization' import { getInitialDeckSetup } from '../../../step-forms/selectors' @@ -40,9 +40,6 @@ describe('StagingAreasModal', () => { }) vi.mocked(getSlotIsEmpty).mockReturnValue(true) }) - afterEach(() => { - cleanup() - }) it('renders the deck, header, and buttons work as expected', () => { render(props) screen.getByText('mock deck config') diff --git a/protocol-designer/src/components/modules/__tests__/StagingAreasRow.test.tsx b/protocol-designer/src/components/modules/__tests__/StagingAreasRow.test.tsx index fb3c7b0c400..e88d5631c72 100644 --- a/protocol-designer/src/components/modules/__tests__/StagingAreasRow.test.tsx +++ b/protocol-designer/src/components/modules/__tests__/StagingAreasRow.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest' -import { fireEvent, screen, cleanup } from '@testing-library/react' +import { describe, it, expect, vi, beforeEach } from 'vitest' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../localization' import { FlexSlotMap } from '../FlexSlotMap' @@ -31,9 +31,6 @@ describe('StagingAreasRow', () => { labware: {}, }) }) - afterEach(() => { - cleanup() - }) it('renders no staging areas', () => { render(props) screen.getByText('Staging Area Slots') From 3fc205d0e661a098d971dcf7cc835bc220c66aed Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Fri, 31 May 2024 13:08:41 -0400 Subject: [PATCH 02/10] first batch of avoid destructuring queries --- .../__tests__/DevicesLanding.test.tsx | 42 ++++----- .../__tests__/NewRobotSetupHelp.test.tsx | 28 +++--- .../__tests__/EmergencyStop.test.tsx | 24 ++--- .../__tests__/InstrumentDetail.test.tsx | 57 +++++------ .../InstrumentDetailOverflowMenu.test.tsx | 52 +++++----- .../pages/Labware/__tests__/Labware.test.tsx | 68 +++++++------- .../__tests__/NetworkSetupMenu.test.tsx | 28 +++--- .../__tests__/LongPressModal.test.tsx | 18 ++-- .../__tests__/PinnedProtocol.test.tsx | 16 ++-- .../ProtocolDetails/__tests__/Deck.test.tsx | 5 +- .../__tests__/Hardware.test.tsx | 21 +++-- .../__tests__/Labware.test.tsx | 15 +-- .../__tests__/Liquids.test.tsx | 23 ++--- .../__tests__/ConfirmAttachedModal.test.tsx | 20 ++-- .../__tests__/ProtocolDetails.test.tsx | 5 +- .../__tests__/ProtocolsLanding.test.tsx | 9 +- .../__tests__/AnalyticsOptInModal.test.tsx | 20 ++-- .../__tests__/RobotDashboard.test.tsx | 5 +- .../__tests__/WelcomeModal.test.tsx | 16 ++-- .../__tests__/RobotSettingsDashboard.test.tsx | 94 +++++++++---------- .../__tests__/UpdateRobot.test.tsx | 23 ++--- .../UpdateRobotDuringOnboarding.test.tsx | 4 +- .../__tests__/EmanatingNozzle.test.tsx | 18 ++-- .../__tests__/CreateLabwareSandbox.test.tsx | 48 +++++----- 24 files changed, 333 insertions(+), 326 deletions(-) diff --git a/app/src/pages/Devices/DevicesLanding/__tests__/DevicesLanding.test.tsx b/app/src/pages/Devices/DevicesLanding/__tests__/DevicesLanding.test.tsx index 540828c53fd..60d346416d7 100644 --- a/app/src/pages/Devices/DevicesLanding/__tests__/DevicesLanding.test.tsx +++ b/app/src/pages/Devices/DevicesLanding/__tests__/DevicesLanding.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, afterEach } from 'vitest' import { renderWithProviders } from '../../../../__testing-utils__' @@ -53,18 +53,18 @@ describe('DevicesLanding', () => { }) it('renders a Devices title', () => { - const [{ getByText }] = render() + render() - getByText('Devices') + screen.getByText('Devices') }) it('renders the DevicesEmptyState when no robots are found', () => { vi.mocked(getConnectableRobots).mockReturnValue([]) vi.mocked(getReachableRobots).mockReturnValue([]) vi.mocked(getUnreachableRobots).mockReturnValue([]) - const [{ getByText }] = render() + render() - getByText('Mock DevicesEmptyState') + screen.getByText('Mock DevicesEmptyState') }) it('renders the Looking for robots copy when scanning is true and there are no devices', () => { @@ -72,9 +72,9 @@ describe('DevicesLanding', () => { vi.mocked(getConnectableRobots).mockReturnValue([]) vi.mocked(getReachableRobots).mockReturnValue([]) vi.mocked(getUnreachableRobots).mockReturnValue([]) - const [{ getByText }] = render() + render() - getByText('Looking for robots') + screen.getByText('Looking for robots') }) it('renders the Icon when scanning is true and there are no devices', () => { @@ -82,36 +82,36 @@ describe('DevicesLanding', () => { vi.mocked(getConnectableRobots).mockReturnValue([]) vi.mocked(getReachableRobots).mockReturnValue([]) vi.mocked(getUnreachableRobots).mockReturnValue([]) - const [{ getByLabelText }] = render() + render() - getByLabelText('ot-spinner') + screen.getByLabelText('ot-spinner') }) it('renders available and not available sections when both are present', () => { - const [{ getByText, getByTestId, queryByText }] = render() + render() - getByText('Mock Robot connectableRobot') - getByText('Available (1)') - getByText('Not available (2)') + screen.getByText('Mock Robot connectableRobot') + screen.getByText('Available (1)') + screen.getByText('Not available (2)') - expect(queryByText('Mock Robot unreachableRobot')).toBeNull() - expect(queryByText('Mock Robot reachableRobot')).toBeNull() + expect(screen.queryByText('Mock Robot unreachableRobot')).toBeNull() + expect(screen.queryByText('Mock Robot reachableRobot')).toBeNull() - const expandButton = getByTestId( + const expandButton = screen.getByTestId( 'CollapsibleSection_expand_Not available (2)' ) fireEvent.click(expandButton) - getByText('Mock Robot unreachableRobot') - getByText('Mock Robot reachableRobot') + screen.getByText('Mock Robot unreachableRobot') + screen.getByText('Mock Robot reachableRobot') }) it('does not render available or not available sections when none are present', () => { vi.mocked(getConnectableRobots).mockReturnValue([]) vi.mocked(getReachableRobots).mockReturnValue([]) vi.mocked(getUnreachableRobots).mockReturnValue([]) - const [{ queryByText }] = render() + render() - expect(queryByText('Available')).toBeNull() - expect(queryByText('Not available')).toBeNull() + expect(screen.queryByText('Available')).toBeNull() + expect(screen.queryByText('Not available')).toBeNull() }) }) diff --git a/app/src/pages/Devices/DevicesLanding/__tests__/NewRobotSetupHelp.test.tsx b/app/src/pages/Devices/DevicesLanding/__tests__/NewRobotSetupHelp.test.tsx index 5c5efe54dcf..51e4e994380 100644 --- a/app/src/pages/Devices/DevicesLanding/__tests__/NewRobotSetupHelp.test.tsx +++ b/app/src/pages/Devices/DevicesLanding/__tests__/NewRobotSetupHelp.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { it, describe, expect } from 'vitest' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../i18n' @@ -14,33 +14,33 @@ const render = () => { describe('NewRobotSetupHelp', () => { it('renders link and collapsed modal by default', () => { - const [{ getByText, queryByText }] = render() + render() - getByText('See how to set up a new robot') - expect(queryByText('How to setup a new robot')).toBeFalsy() + screen.getByText('See how to set up a new robot') + expect(screen.queryByText('How to setup a new robot')).toBeFalsy() }) it('when link is clicked, modal is opened, and closes via Close button', () => { - const [{ getByText, getByRole, queryByText }] = render() + render() - const link = getByText('See how to set up a new robot') + const link = screen.getByText('See how to set up a new robot') fireEvent.click(link) - getByText('How to setup a new robot') + screen.getByText('How to setup a new robot') - const closeButton = getByRole('button', { name: 'close' }) + const closeButton = screen.getByRole('button', { name: 'close' }) fireEvent.click(closeButton) - expect(queryByText('How to setup a new robot')).toBeFalsy() + expect(screen.queryByText('How to setup a new robot')).toBeFalsy() }) it('when link is clicked, modal is opened, and closes via x', () => { - const [{ getByText, getByRole, queryByText }] = render() + render() - const link = getByText('See how to set up a new robot') + const link = screen.getByText('See how to set up a new robot') fireEvent.click(link) - expect(getByText('How to setup a new robot')).toBeInTheDocument() + expect(screen.getByText('How to setup a new robot')).toBeInTheDocument() - const xButton = getByRole('button', { name: '' }) + const xButton = screen.getByRole('button', { name: '' }) fireEvent.click(xButton) - expect(queryByText('How to setup a new robot')).toBeFalsy() + expect(screen.queryByText('How to setup a new robot')).toBeFalsy() }) }) diff --git a/app/src/pages/EmergencyStop/__tests__/EmergencyStop.test.tsx b/app/src/pages/EmergencyStop/__tests__/EmergencyStop.test.tsx index dc95c0c18c1..f22626f57e9 100644 --- a/app/src/pages/EmergencyStop/__tests__/EmergencyStop.test.tsx +++ b/app/src/pages/EmergencyStop/__tests__/EmergencyStop.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { vi, it, describe, expect, beforeEach } from 'vitest' import { useEstopQuery } from '@opentrons/react-api-client' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '../../../__testing-utils__' @@ -44,13 +44,13 @@ describe('EmergencyStop', () => { }) it('should render text, image, and button when e-stop button is not connected', () => { - const [{ getByText, getByRole }] = render() - getByText( + render() + screen.getByText( 'Connect the E-stop to an auxiliary port on the back of the robot.' ) - getByText('Continue') - expect(getByRole('button')).toBeDisabled() - expect(getByRole('img').getAttribute('src')).toContain(ESTOP_IMAGE_NAME) + screen.getByText('Continue') + expect(screen.getByRole('button')).toBeDisabled() + expect(screen.getByRole('img').getAttribute('src')).toContain(ESTOP_IMAGE_NAME) }) it('should render text, icon, button when e-stop button is connected', () => { @@ -64,10 +64,10 @@ describe('EmergencyStop', () => { vi.mocked(useEstopQuery).mockReturnValue({ data: mockConnectedEstop, } as any) - const [{ getByText, getByTestId, getByRole }] = render() - getByTestId('EmergencyStop_connected_icon') - getByText('E-stop successfully connected') - expect(getByRole('button')).not.toBeDisabled() + render() + screen.getByTestId('EmergencyStop_connected_icon') + screen.getByText('E-stop successfully connected') + expect(screen.getByRole('button')).not.toBeDisabled() }) it('should call a mock function when tapping continue button', () => { @@ -81,8 +81,8 @@ describe('EmergencyStop', () => { vi.mocked(useEstopQuery).mockReturnValue({ data: mockConnectedEstop, } as any) - const [{ getByRole }] = render() - fireEvent.click(getByRole('button')) + render() + fireEvent.click(screen.getByRole('button')) expect(mockPush).toHaveBeenCalledWith('/robot-settings/rename-robot') }) }) diff --git a/app/src/pages/InstrumentDetail/__tests__/InstrumentDetail.test.tsx b/app/src/pages/InstrumentDetail/__tests__/InstrumentDetail.test.tsx index 0743afedbe1..af9489f2c6c 100644 --- a/app/src/pages/InstrumentDetail/__tests__/InstrumentDetail.test.tsx +++ b/app/src/pages/InstrumentDetail/__tests__/InstrumentDetail.test.tsx @@ -1,5 +1,6 @@ import React from 'react' import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' +import { screen } from '@testing-library/react' import { useParams } from 'react-router-dom' import { useInstrumentsQuery } from '@opentrons/react-api-client' @@ -104,17 +105,17 @@ describe('InstrumentDetail', () => { }) it('displays header containing the instrument name and an overflow menu button', () => { - const [{ getByText, getByLabelText }] = render() + render() - getByText('mockPipette') - getByLabelText('overflow menu button') + screen.getByText('mockPipette') + screen.getByLabelText('overflow menu button') }) it('renders the gripper name if the instrument is a gripper', () => { vi.mocked(useParams).mockReturnValue({ mount: 'extension' }) - const [{ getByText }] = render() + render() - getByText('mockGripper') + screen.getByText('mockGripper') }) it('does not display the overflow menu button when instrument is not ok', () => { @@ -130,16 +131,16 @@ describe('InstrumentDetail', () => { data: mockInstrumentsQuery, } as any) - const [{ queryByText }] = render() + render() - expect(queryByText('overflow menu button')).not.toBeInTheDocument() + expect(screen.queryByText('overflow menu button')).not.toBeInTheDocument() }) it('renders calibration date when present', () => { - const [{ getByText, queryByText }] = render() + render() - getByText('last calibrated') - queryByText('UTC') + screen.getByText('last calibrated') + screen.queryByText('UTC') }) it("renders 'No calibration data' when no calibration data is present", () => { @@ -153,34 +154,34 @@ describe('InstrumentDetail', () => { vi.mocked(useInstrumentsQuery).mockReturnValue({ data: mockInstrumentsQuery, } as any) - const [{ getByText }] = render() - getByText('last calibrated') - getByText('No calibration data') + render() + screen.getByText('last calibrated') + screen.getByText('No calibration data') }) it('renders firmware version information', () => { - const [{ getByText }] = render() - getByText('firmware version') - getByText('40') + render() + screen.getByText('firmware version') + screen.getByText('40') }) it('renders serial number information', () => { - const [{ getByText }] = render() - getByText('serial number') - getByText('P1KSV3420230721') + render() + screen.getByText('serial number') + screen.getByText('P1KSV3420230721') }) it('renders detach and no recalibrate button if calibration data exists for a pipette', () => { - const [{ getByText, queryByText }] = render() - getByText('detach') - expect(queryByText('recalibrate')).not.toBeInTheDocument() + render() + screen.getByText('detach') + expect(screen.queryByText('recalibrate')).not.toBeInTheDocument() }) it('renders detach and recalibrate button if calibration data exists for a gripper', () => { vi.mocked(useParams).mockReturnValue({ mount: 'extension' }) - const [{ getByText }] = render() - getByText('detach') - getByText('recalibrate') + render() + screen.getByText('detach') + screen.getByText('recalibrate') }) it('renders detach and calibration buttons if no calibration data exists', () => { @@ -195,8 +196,8 @@ describe('InstrumentDetail', () => { data: mockInstrumentsQuery, } as any) - const [{ getByText }] = render() - getByText('detach') - getByText('calibrate') + render() + screen.getByText('detach') + screen.getByText('calibrate') }) }) diff --git a/app/src/pages/InstrumentDetail/__tests__/InstrumentDetailOverflowMenu.test.tsx b/app/src/pages/InstrumentDetail/__tests__/InstrumentDetailOverflowMenu.test.tsx index 9a6e797b851..9a31891c27a 100644 --- a/app/src/pages/InstrumentDetail/__tests__/InstrumentDetailOverflowMenu.test.tsx +++ b/app/src/pages/InstrumentDetail/__tests__/InstrumentDetailOverflowMenu.test.tsx @@ -1,6 +1,6 @@ import React from 'react' import NiceModal from '@ebay/nice-modal-react' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' import { renderWithProviders } from '../../../__testing-utils__' @@ -138,67 +138,67 @@ describe('UpdateBuildroot', () => { }) it('renders appropriate options when the instrument is a pipette', () => { - const [{ getByTestId, getByText }] = render(MOCK_PIPETTE) - const btn = getByTestId('testButton') + render(MOCK_PIPETTE) + const btn = screen.getByTestId('testButton') fireEvent.click(btn) - getByText('Recalibrate') - getByText('Drop tips') + screen.getByText('Recalibrate') + screen.getByText('Drop tips') }) it('renders appropriate options when the instrument is a pipette without calibration', () => { - const [{ getByTestId, getByText, queryByText }] = render( + render( MOCK_PIPETTE_WITHOUT_CALIBRATION ) - const btn = getByTestId('testButton') + const btn = screen.getByTestId('testButton') fireEvent.click(btn) - expect(queryByText('Recalibrate')).not.toBeInTheDocument() - getByText('Drop tips') + expect(screen.queryByText('Recalibrate')).not.toBeInTheDocument() + screen.getByText('Drop tips') }) it('renders appropriate options when the instrument is a gripper', () => { - const [{ getByTestId, getByText, queryByText }] = render(MOCK_GRIPPER) - const btn = getByTestId('testButton') + render(MOCK_GRIPPER) + const btn = screen.getByTestId('testButton') fireEvent.click(btn) - getByText('Recalibrate') - expect(queryByText('Drop tips')).not.toBeInTheDocument() + screen.getByText('Recalibrate') + expect(screen.queryByText('Drop tips')).not.toBeInTheDocument() }) it('renders the pipette calibration wizard when recalibrate is clicked', () => { - const [{ getByTestId, getByText }] = render(MOCK_PIPETTE) - const btn = getByTestId('testButton') + render(MOCK_PIPETTE) + const btn = screen.getByTestId('testButton') fireEvent.click(btn) - fireEvent.click(getByText('Recalibrate')) + fireEvent.click(screen.getByText('Recalibrate')) expect(vi.mocked(PipetteWizardFlows)).toHaveBeenCalled() }) it('renders the drop tip wizard when Drop tips is clicked', () => { - const [{ getByTestId, getByText }] = render(MOCK_PIPETTE) - const btn = getByTestId('testButton') + render(MOCK_PIPETTE) + const btn = screen.getByTestId('testButton') fireEvent.click(btn) - fireEvent.click(getByText('Drop tips')) + fireEvent.click(screen.getByText('Drop tips')) expect(vi.mocked(DropTipWizard)).toHaveBeenCalled() }) it('renders the gripper calibration wizard when recalibrate is clicked', () => { - const [{ getByTestId, getByText }] = render(MOCK_GRIPPER) - const btn = getByTestId('testButton') + render(MOCK_GRIPPER) + const btn = screen.getByTestId('testButton') fireEvent.click(btn) - fireEvent.click(getByText('Recalibrate')) + fireEvent.click(screen.getByText('Recalibrate')) expect(vi.mocked(GripperWizardFlows)).toHaveBeenCalled() }) it('closes the overflow menu when a click occurs outside of the overflow menu', () => { - const [{ queryByText, getByTestId, getByLabelText }] = render(MOCK_PIPETTE) - const btn = getByTestId('testButton') + render(MOCK_PIPETTE) + const btn = screen.getByTestId('testButton') fireEvent.click(btn) - const menuListElement = getByLabelText('BackgroundOverlay_ModalShell') + const menuListElement = screen.getByLabelText('BackgroundOverlay_ModalShell') fireEvent.click(menuListElement) - expect(queryByText('Recalibrate')).not.toBeInTheDocument() + expect(screen.queryByText('Recalibrate')).not.toBeInTheDocument() }) }) diff --git a/app/src/pages/Labware/__tests__/Labware.test.tsx b/app/src/pages/Labware/__tests__/Labware.test.tsx index c58e7f4a485..62c3f6a4521 100644 --- a/app/src/pages/Labware/__tests__/Labware.test.tsx +++ b/app/src/pages/Labware/__tests__/Labware.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { MemoryRouter } from 'react-router-dom' import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' @@ -61,25 +61,25 @@ describe('Labware', () => { }) it('renders correct title, import button and labware cards', () => { - const [{ getByText, getByRole, getByTestId }] = render() - getByText('labware') - getByText('Mock Labware Card') - getByRole('button', { name: 'Import' }) - getByText('Category') - getByText('All') - getByText('Sort by') - expect(getByTestId('sortBy-label')).toHaveTextContent('Alphabetical') + render() + screen.getByText('labware') + screen.getByText('Mock Labware Card') + screen.getByRole('button', { name: 'Import' }) + screen.getByText('Category') + screen.getByText('All') + screen.getByText('Sort by') + expect(screen.getByTestId('sortBy-label')).toHaveTextContent('Alphabetical') }) it('renders AddCustomLabware slideout when import button is clicked', () => { - const [{ getByRole }] = render() - const importButton = getByRole('button', { name: 'Import' }) + render() + const importButton = screen.getByRole('button', { name: 'Import' }) fireEvent.click(importButton) expect(vi.mocked(AddCustomLabwareSlideout)).toHaveBeenCalled() }) it('renders footer with labware creator link', () => { - const [{ getByText, getByRole }] = render() - getByText('Create a new labware definition') - const btn = getByRole('link', { name: 'Open Labware Creator' }) + render() + screen.getByText('Create a new labware definition') + const btn = screen.getByRole('link', { name: 'Open Labware Creator' }) fireEvent.click(btn) expect(mockTrackEvent).toHaveBeenCalledWith({ name: ANALYTICS_OPEN_LABWARE_CREATOR_FROM_BOTTOM_OF_LABWARE_LIBRARY_LIST, @@ -111,39 +111,39 @@ describe('Labware', () => { ) }) it('renders filter by menu when it is clicked', () => { - const [{ getByText, getByRole }] = render() - const filter = getByText('All') + render() + const filter = screen.getByText('All') fireEvent.click(filter) - getByRole('button', { name: 'All' }) - getByRole('button', { name: 'Well Plate' }) - getByRole('button', { name: 'Tip Rack' }) - getByRole('button', { name: 'Tube Rack' }) - getByRole('button', { name: 'Reservoir' }) - getByRole('button', { name: 'Aluminum Block' }) + screen.getByRole('button', { name: 'All' }) + screen.getByRole('button', { name: 'Well Plate' }) + screen.getByRole('button', { name: 'Tip Rack' }) + screen.getByRole('button', { name: 'Tube Rack' }) + screen.getByRole('button', { name: 'Reservoir' }) + screen.getByRole('button', { name: 'Aluminum Block' }) }) it('renders changes filter menu button when an option is selected', () => { - const [{ getByText, getByRole }] = render() - const filter = getByText('All') + render() + const filter = screen.getByText('All') fireEvent.click(filter) - const wellPlate = getByRole('button', { name: 'Well Plate' }) + const wellPlate = screen.getByRole('button', { name: 'Well Plate' }) fireEvent.click(wellPlate) - getByText('Well Plate') + screen.getByText('Well Plate') }) it('renders sort by menu when sort is clicked', () => { - const [{ getByText, getByRole }] = render() - const sort = getByText('Alphabetical') + render() + const sort = screen.getByText('Alphabetical') fireEvent.click(sort) - getByRole('button', { name: 'Alphabetical' }) - getByRole('button', { name: 'Reverse alphabetical' }) + screen.getByRole('button', { name: 'Alphabetical' }) + screen.getByRole('button', { name: 'Reverse alphabetical' }) }) it('renders selected sort by menu when one menu is clicked', () => { - const [{ getByText, getByRole, getByTestId }] = render() - const sort = getByText('Alphabetical') + render() + const sort = screen.getByText('Alphabetical') fireEvent.click(sort) - const reverse = getByRole('button', { name: 'Reverse alphabetical' }) + const reverse = screen.getByRole('button', { name: 'Reverse alphabetical' }) fireEvent.click(reverse) - expect(getByTestId('sortBy-label')).toHaveTextContent( + expect(screen.getByTestId('sortBy-label')).toHaveTextContent( 'Reverse alphabetical' ) }) diff --git a/app/src/pages/NetworkSetupMenu/__tests__/NetworkSetupMenu.test.tsx b/app/src/pages/NetworkSetupMenu/__tests__/NetworkSetupMenu.test.tsx index cce91ca624f..aef9f4f2114 100644 --- a/app/src/pages/NetworkSetupMenu/__tests__/NetworkSetupMenu.test.tsx +++ b/app/src/pages/NetworkSetupMenu/__tests__/NetworkSetupMenu.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { vi, it, describe, expect } from 'vitest' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { MemoryRouter } from 'react-router-dom' import { renderWithProviders } from '../../../__testing-utils__' @@ -31,25 +31,25 @@ const render = () => { describe('NetworkSetupMenu', () => { it('should render text and button, and step meter', () => { - const [{ getByText }] = render() + render() - getByText('Choose network type') - getByText( + screen.getByText('Choose network type') + screen.getByText( 'You’ll use this connection to run software updates and load protocols onto your Opentrons Flex.' ) - getByText('Wi-Fi') - getByText('Find a network in your lab or enter your own.') - getByText('Ethernet') - getByText("Connect to your lab's wired network.") - getByText('USB') - getByText('Connect directly to a computer (running the Opentrons App).') + screen.getByText('Wi-Fi') + screen.getByText('Find a network in your lab or enter your own.') + 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).') }) it('should call mock function when tapping a button', () => { - const [{ getByText }] = render() - const wifiButton = getByText('Wi-Fi') - const ethernetButton = getByText('Ethernet') - const usbButton = getByText('USB') + render() + const wifiButton = screen.getByText('Wi-Fi') + const ethernetButton = screen.getByText('Ethernet') + const usbButton = screen.getByText('USB') fireEvent.click(wifiButton) expect(mockPush).toHaveBeenCalledWith('/network-setup/wifi') fireEvent.click(ethernetButton) diff --git a/app/src/pages/ProtocolDashboard/__tests__/LongPressModal.test.tsx b/app/src/pages/ProtocolDashboard/__tests__/LongPressModal.test.tsx index d39e45c6947..ad3aa7bd2f5 100644 --- a/app/src/pages/ProtocolDashboard/__tests__/LongPressModal.test.tsx +++ b/app/src/pages/ProtocolDashboard/__tests__/LongPressModal.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' import { when } from 'vitest-when' import { MemoryRouter } from 'react-router-dom' -import { fireEvent, renderHook } from '@testing-library/react' +import { fireEvent, renderHook, screen } from '@testing-library/react' import { useLongPress } from '@opentrons/components' import { useCreateRunMutation, useHost } from '@opentrons/react-api-client' @@ -48,17 +48,17 @@ describe('Long Press Modal', () => { it('should display the three options', () => { const { result } = renderHook(() => useLongPress()) result.current.isLongPressed = true - const [{ getByText }] = render(result.current) - getByText('Run protocol') - getByText('Pin protocol') - getByText('Delete protocol') + render(result.current) + screen.getByText('Run protocol') + screen.getByText('Pin protocol') + screen.getByText('Delete protocol') }) it('should call mock function when tapping delete protocol', () => { const { result } = renderHook(() => useLongPress()) result.current.isLongPressed = true - const [{ getByText }] = render(result.current) - const button = getByText('Delete protocol') + render(result.current) + const button = screen.getByText('Delete protocol') fireEvent.click(button) expect(mockSetTargetProtocolId).toHaveBeenCalledWith('mockProtocol1') expect(mockFunc).toHaveBeenCalled() @@ -71,8 +71,8 @@ describe('Long Press Modal', () => { const { result } = renderHook(() => useLongPress()) result.current.isLongPressed = true - const [{ getByText }] = render(result.current) - const runButton = getByText('Run protocol') + render(result.current) + const runButton = screen.getByText('Run protocol') fireEvent.click(runButton) expect(mockCreateRun).toHaveBeenCalled() }) diff --git a/app/src/pages/ProtocolDashboard/__tests__/PinnedProtocol.test.tsx b/app/src/pages/ProtocolDashboard/__tests__/PinnedProtocol.test.tsx index 4a49f1ff5ea..16d4b110782 100644 --- a/app/src/pages/ProtocolDashboard/__tests__/PinnedProtocol.test.tsx +++ b/app/src/pages/ProtocolDashboard/__tests__/PinnedProtocol.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { vi, it, describe, expect } from 'vitest' -import { act, fireEvent } from '@testing-library/react' +import { act, fireEvent, screen } from '@testing-library/react' import { MemoryRouter } from 'react-router-dom' import { renderWithProviders } from '../../../__testing-utils__' @@ -59,25 +59,25 @@ describe('Pinned Protocol', () => { vi.useFakeTimers() it('should redirect to protocol details after short click', () => { - const [{ getByText }] = render() - const name = getByText('yay mock protocol') + render() + const name = screen.getByText('yay mock protocol') fireEvent.click(name) expect(mockPush).toHaveBeenCalledWith('/protocols/mockProtocol1') }) it('should display modal after long click', async () => { vi.useFakeTimers() - const [{ getByText }] = render() - const name = getByText('yay mock protocol') + render() + const name = screen.getByText('yay mock protocol') fireEvent.mouseDown(name) act(() => { vi.advanceTimersByTime(1005) }) expect(props.longPress).toHaveBeenCalled() - getByText('Run protocol') + screen.getByText('Run protocol') // This should ne "Unpin protocol" but I don't know how to pass state into the render // call so the longpress modal can see the pinned ids. - getByText('Pin protocol') - getByText('Delete protocol') + screen.getByText('Pin protocol') + screen.getByText('Delete protocol') }) }) diff --git a/app/src/pages/ProtocolDetails/__tests__/Deck.test.tsx b/app/src/pages/ProtocolDetails/__tests__/Deck.test.tsx index 15403820d7f..8b65a5fbef3 100644 --- a/app/src/pages/ProtocolDetails/__tests__/Deck.test.tsx +++ b/app/src/pages/ProtocolDetails/__tests__/Deck.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' +import { screen } from '@testing-library/react' import { when } from 'vitest-when' import { renderWithProviders } from '../../../__testing-utils__' @@ -172,7 +173,7 @@ describe('Deck', () => { }) it('renders deck view section', () => { - const { getByLabelText } = render(props)[0] - expect(getByLabelText('protocol deck map')).toBeInTheDocument() + render(props) + expect(screen.getByLabelText('protocol deck map')).toBeInTheDocument() }) }) diff --git a/app/src/pages/ProtocolDetails/__tests__/Hardware.test.tsx b/app/src/pages/ProtocolDetails/__tests__/Hardware.test.tsx index 237134fe697..556941fc284 100644 --- a/app/src/pages/ProtocolDetails/__tests__/Hardware.test.tsx +++ b/app/src/pages/ProtocolDetails/__tests__/Hardware.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { vi, it, describe, beforeEach, afterEach } from 'vitest' +import { screen } from '@testing-library/react' import { when } from 'vitest-when' import { STAGING_AREA_RIGHT_SLOT_FIXTURE, @@ -79,19 +80,19 @@ describe('Hardware', () => { }) it('should render column headers that indicate where the hardware is, what is called, and whether it is connected', () => { - const { getByRole } = render(props)[0] - getByRole('columnheader', { name: 'Location' }) - getByRole('columnheader', { name: 'Hardware' }) + render(props) + screen.getByRole('columnheader', { name: 'Location' }) + screen.getByRole('columnheader', { name: 'Hardware' }) }) it('should render the correct location, name, and connected status in each table row', () => { - const { getByRole } = render(props)[0] - getByRole('row', { name: 'Left Mount P10 Single-Channel GEN1' }) - getByRole('row', { + render(props) + screen.getByRole('row', { name: 'Left Mount P10 Single-Channel GEN1' }) + screen.getByRole('row', { name: 'Right Mount P1000 Single-Channel GEN1', }) - getByRole('row', { name: '1 Heater-Shaker Module GEN1' }) - getByRole('row', { name: '3 Temperature Module GEN2' }) - getByRole('row', { name: 'D3 Waste chute only' }) - getByRole('row', { name: 'B3 Staging area slot' }) + screen.getByRole('row', { name: '1 Heater-Shaker Module GEN1' }) + screen.getByRole('row', { name: '3 Temperature Module GEN2' }) + screen.getByRole('row', { name: 'D3 Waste chute only' }) + screen.getByRole('row', { name: 'B3 Staging area slot' }) }) }) diff --git a/app/src/pages/ProtocolDetails/__tests__/Labware.test.tsx b/app/src/pages/ProtocolDetails/__tests__/Labware.test.tsx index 88a81698d57..ccc38662a64 100644 --- a/app/src/pages/ProtocolDetails/__tests__/Labware.test.tsx +++ b/app/src/pages/ProtocolDetails/__tests__/Labware.test.tsx @@ -13,6 +13,7 @@ import { } from '@opentrons/shared-data' import type { LabwareDefinition2 } from '@opentrons/shared-data' +import { screen } from '@testing-library/react' vi.mock('../../Protocols/hooks') @@ -68,14 +69,14 @@ describe('Labware', () => { }) it('should render column headers that indicate where the labware is, what is called, and how many are required', () => { - const { getByRole } = render(props)[0] - getByRole('columnheader', { name: 'Labware Name' }) - getByRole('columnheader', { name: 'Quantity' }) + render(props) + screen.getByRole('columnheader', { name: 'Labware Name' }) + screen.getByRole('columnheader', { name: 'Quantity' }) }) it('should render the correct location, name, and connected status in each table row', () => { - const { getByRole } = render(props)[0] - getByRole('row', { name: 'Opentrons GEB 10uL Tiprack 2' }) - getByRole('row', { name: '300ul Tiprack FIXTURE 1' }) - getByRole('row', { name: 'ANSI 96 Standard Microplate 1' }) + render(props) + screen.getByRole('row', { name: 'Opentrons GEB 10uL Tiprack 2' }) + screen.getByRole('row', { name: '300ul Tiprack FIXTURE 1' }) + screen.getByRole('row', { name: 'ANSI 96 Standard Microplate 1' }) }) }) diff --git a/app/src/pages/ProtocolDetails/__tests__/Liquids.test.tsx b/app/src/pages/ProtocolDetails/__tests__/Liquids.test.tsx index af8f437e70c..d2b1bbe7944 100644 --- a/app/src/pages/ProtocolDetails/__tests__/Liquids.test.tsx +++ b/app/src/pages/ProtocolDetails/__tests__/Liquids.test.tsx @@ -15,6 +15,7 @@ import { Liquids } from '../Liquids' import type { UseQueryResult } from 'react-query' import type { Protocol } from '@opentrons/api-client' import type { CompletedProtocolAnalysis } from '@opentrons/shared-data' +import { screen } from '@testing-library/react' vi.mock('@opentrons/api-client') vi.mock('@opentrons/react-api-client') @@ -203,16 +204,16 @@ describe('Liquids', () => { } as UseQueryResult) }) it('should render the correct headers and liquids', () => { - const { getByRole, getByText, getByLabelText } = render(props)[0] - getByRole('columnheader', { name: 'Liquid Name' }) - getByRole('columnheader', { name: 'Total Volume' }) - getByText('Mock Liquid 1') - getByText('Mock Sample') - getByText('50 µL') - getByLabelText('Liquids_#ff4888') - getByText('Mock Liquid 2') - getByText('Another Mock Sample') - getByText('22 µL') - getByLabelText('Liquids_#ff8999') + render(props) + screen.getByRole('columnheader', { name: 'Liquid Name' }) + screen.getByRole('columnheader', { name: 'Total Volume' }) + screen.getByText('Mock Liquid 1') + screen.getByText('Mock Sample') + screen.getByText('50 µL') + screen.getByLabelText('Liquids_#ff4888') + screen.getByText('Mock Liquid 2') + screen.getByText('Another Mock Sample') + screen.getByText('22 µL') + screen.getByLabelText('Liquids_#ff8999') }) }) diff --git a/app/src/pages/ProtocolSetup/__tests__/ConfirmAttachedModal.test.tsx b/app/src/pages/ProtocolSetup/__tests__/ConfirmAttachedModal.test.tsx index c5f69a9144a..e28d6102f85 100644 --- a/app/src/pages/ProtocolSetup/__tests__/ConfirmAttachedModal.test.tsx +++ b/app/src/pages/ProtocolSetup/__tests__/ConfirmAttachedModal.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 { renderWithProviders } from '../../../__testing-utils__' @@ -28,24 +28,24 @@ describe('ConfirmAttachedModal', () => { }) it('should render text and buttons', () => { - const [{ getByText }] = render(props) - getByText('Confirm Heater-Shaker Module is attached') - getByText( + render(props) + screen.getByText('Confirm Heater-Shaker Module is attached') + screen.getByText( 'Before the run begins, module should have both anchors fully extended for a firm attachment. The thermal adapter should be attached to the module.' ) - getByText('Cancel') - getByText('Proceed to run') + screen.getByText('Cancel') + screen.getByText('Proceed to run') }) it('should call a mock function when tapping cancel button', () => { - const [{ getByText }] = render(props) - fireEvent.click(getByText('Cancel')) + render(props) + fireEvent.click(screen.getByText('Cancel')) expect(mockOnCloseClick).toHaveBeenCalled() }) it('should call a mock function when tapping proceed to run button', () => { - const [{ getByText }] = render(props) - fireEvent.click(getByText('Proceed to run')) + render(props) + fireEvent.click(screen.getByText('Proceed to run')) expect(mockOnConfirmClick).toHaveBeenCalled() }) }) diff --git a/app/src/pages/Protocols/ProtocolDetails/__tests__/ProtocolDetails.test.tsx b/app/src/pages/Protocols/ProtocolDetails/__tests__/ProtocolDetails.test.tsx index 79c9636c106..bb0a4d8f5e4 100644 --- a/app/src/pages/Protocols/ProtocolDetails/__tests__/ProtocolDetails.test.tsx +++ b/app/src/pages/Protocols/ProtocolDetails/__tests__/ProtocolDetails.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' +import { screen } from '@testing-library/react' import { Route, MemoryRouter } from 'react-router-dom' import { when } from 'vitest-when' import { renderWithProviders } from '../../../../__testing-utils__' @@ -76,7 +77,7 @@ describe('ProtocolDetails', () => { when(vi.mocked(getStoredProtocol)) .calledWith(MOCK_STATE, mockProtocolKey) .thenReturn(null) - const { getByText } = render('/protocols') - getByText('protocols') + render('/protocols') + screen.getByText('protocols') }) }) diff --git a/app/src/pages/Protocols/ProtocolsLanding/__tests__/ProtocolsLanding.test.tsx b/app/src/pages/Protocols/ProtocolsLanding/__tests__/ProtocolsLanding.test.tsx index cc3f56c84b0..e56fb6584c8 100644 --- a/app/src/pages/Protocols/ProtocolsLanding/__tests__/ProtocolsLanding.test.tsx +++ b/app/src/pages/Protocols/ProtocolsLanding/__tests__/ProtocolsLanding.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { vi, it, describe } from 'vitest' +import { screen } from '@testing-library/react' import { renderWithProviders } from '../../../../__testing-utils__' import { ProtocolsEmptyState } from '../../../../organisms/ProtocolsLanding/ProtocolsEmptyState' @@ -20,13 +21,13 @@ describe('ProtocolsLanding', () => { it('renders the protocol list component', () => { vi.mocked(getStoredProtocols).mockReturnValue([storedProtocolData]) vi.mocked(ProtocolList).mockReturnValue(
mock protocol list
) - const { getByText } = render() - getByText('mock protocol list') + render() + screen.getByText('mock protocol list') }) it('renders the empty state component', () => { vi.mocked(getStoredProtocols).mockReturnValue([]) vi.mocked(ProtocolsEmptyState).mockReturnValue(
mock empty state
) - const { getByText } = render() - getByText('mock empty state') + render() + screen.getByText('mock empty state') }) }) diff --git a/app/src/pages/RobotDashboard/__tests__/AnalyticsOptInModal.test.tsx b/app/src/pages/RobotDashboard/__tests__/AnalyticsOptInModal.test.tsx index 03a6a170df9..3044db37ed4 100644 --- a/app/src/pages/RobotDashboard/__tests__/AnalyticsOptInModal.test.tsx +++ b/app/src/pages/RobotDashboard/__tests__/AnalyticsOptInModal.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 { renderWithProviders } from '../../../__testing-utils__' @@ -35,19 +35,19 @@ describe('AnalyticsOptInModal', () => { }) it('should render text and button', () => { - const [{ getByText }] = render(props) + render(props) - getByText('Want to help out Opentrons?') - getByText( + screen.getByText('Want to help out Opentrons?') + screen.getByText( 'Automatically send us anonymous diagnostics and usage data. We only use this information to improve our products.' ) - getByText('Opt out') - getByText('Opt in') + screen.getByText('Opt out') + screen.getByText('Opt in') }) it('should call a mock function when tapping opt out button', () => { - const [{ getByText }] = render(props) - fireEvent.click(getByText('Opt out')) + render(props) + fireEvent.click(screen.getByText('Opt out')) expect(vi.mocked(updateConfigValue)).toHaveBeenCalledWith( 'analytics.optedIn', @@ -62,8 +62,8 @@ describe('AnalyticsOptInModal', () => { }) it('should call a mock function when tapping out in button', () => { - const [{ getByText }] = render(props) - fireEvent.click(getByText('Opt in')) + render(props) + fireEvent.click(screen.getByText('Opt in')) expect(vi.mocked(updateConfigValue)).toHaveBeenCalledWith( 'analytics.optedIn', diff --git a/app/src/pages/RobotDashboard/__tests__/RobotDashboard.test.tsx b/app/src/pages/RobotDashboard/__tests__/RobotDashboard.test.tsx index 7706a925826..91d1a4a659b 100644 --- a/app/src/pages/RobotDashboard/__tests__/RobotDashboard.test.tsx +++ b/app/src/pages/RobotDashboard/__tests__/RobotDashboard.test.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' import { MemoryRouter } from 'react-router-dom' +import { screen } from '@testing-library/react' import { renderWithProviders } from '../../../__testing-utils__' import { useAllProtocolsQuery } from '@opentrons/react-api-client' @@ -107,9 +108,9 @@ describe('RobotDashboard', () => { vi.mocked(useNotifyAllRunsQuery).mockReturnValue({ data: { data: [mockRunData] }, } as any) - const [{ getByText }] = render() + render() expect(vi.mocked(Navigation)).toHaveBeenCalled() - getByText('Run again') + screen.getByText('Run again') expect(vi.mocked(RecentRunProtocolCarousel)).toHaveBeenCalled() }) diff --git a/app/src/pages/RobotDashboard/__tests__/WelcomeModal.test.tsx b/app/src/pages/RobotDashboard/__tests__/WelcomeModal.test.tsx index 46b0b882be9..f13c32d02f2 100644 --- a/app/src/pages/RobotDashboard/__tests__/WelcomeModal.test.tsx +++ b/app/src/pages/RobotDashboard/__tests__/WelcomeModal.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 { useCreateLiveCommandMutation } from '@opentrons/react-api-client' @@ -39,19 +39,19 @@ describe('WelcomeModal', () => { }) it('should render text and button', () => { - const [{ getByText, getByRole }] = render(props) - const image = getByRole('img') + render(props) + const image = screen.getByRole('img') const animationCommand: SetStatusBarCreateCommand = { commandType: 'setStatusBar', params: { animation: 'disco' }, } expect(image.getAttribute('src')).toContain(WELCOME_MODAL_IMAGE_NAME) - getByText('Welcome to your dashboard!') - getByText( + screen.getByText('Welcome to your dashboard!') + screen.getByText( 'A place to run protocols, manage your instruments, and view robot status.' ) - getByText('Next') + screen.getByText('Next') expect(vi.mocked(useCreateLiveCommandMutation)).toBeCalledWith() expect(mockCreateLiveCommand).toBeCalledWith({ command: animationCommand, @@ -60,8 +60,8 @@ describe('WelcomeModal', () => { }) it('should call a mock function when tapping next button', () => { - const [{ getByText }] = render(props) - fireEvent.click(getByText('Next')) + render(props) + fireEvent.click(screen.getByText('Next')) expect(props.setShowWelcomeModal).toHaveBeenCalled() expect(props.setShowAnalyticsOptInModal).toHaveBeenCalled() }) diff --git a/app/src/pages/RobotSettingsDashboard/__tests__/RobotSettingsDashboard.test.tsx b/app/src/pages/RobotSettingsDashboard/__tests__/RobotSettingsDashboard.test.tsx index 4536af352c3..80a5c47256d 100644 --- a/app/src/pages/RobotSettingsDashboard/__tests__/RobotSettingsDashboard.test.tsx +++ b/app/src/pages/RobotSettingsDashboard/__tests__/RobotSettingsDashboard.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' import { MemoryRouter } from 'react-router-dom' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '../../../__testing-utils__' @@ -84,42 +84,42 @@ describe('RobotSettingsDashboard', () => { }) it('should render setting buttons', () => { - const [{ getByText }] = render() - getByText('Robot Name') - getByText('opentrons-robot-name') - getByText('Robot System Version') - getByText('Network Settings') - getByText('Status LEDs') - getByText('Control the strip of color lights on the front of the robot.') - getByText('Touchscreen Sleep') - getByText('Touchscreen Brightness') - getByText('Privacy') - getByText('Choose what data to share with Opentrons.') - getByText('Device Reset') - getByText('Update Channel') - getByText('Apply Labware Offsets') - getByText('Use stored data when setting up a protocol.') - getByText('Developer Tools') - getByText('Access additional logging and feature flags.') + render() + screen.getByText('Robot Name') + screen.getByText('opentrons-robot-name') + 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('Touchscreen Sleep') + screen.getByText('Touchscreen Brightness') + screen.getByText('Privacy') + screen.getByText('Choose what data to share with Opentrons.') + screen.getByText('Device Reset') + screen.getByText('Update Channel') + screen.getByText('Apply Labware Offsets') + screen.getByText('Use stored data when setting up a protocol.') + screen.getByText('Developer Tools') + screen.getByText('Access additional logging and feature flags.') }) it('should render component when tapping robot name button', () => { - const [{ getByText }] = render() - const button = getByText('Robot Name') + render() + const button = screen.getByText('Robot Name') fireEvent.click(button) - getByText('Robot Name') + screen.getByText('Robot Name') }) it('should render component when tapping robot system version', () => { - const [{ getByText }] = render() - const button = getByText('Robot System Version') + render() + const button = screen.getByText('Robot System Version') fireEvent.click(button) expect(vi.mocked(RobotSystemVersion)).toHaveBeenCalled() }) it('should render text with lights off and clicking it, calls useLEDLights', () => { - const [{ getByText }] = render() - const lights = getByText('Status LEDs') + render() + const lights = screen.getByText('Status LEDs') fireEvent.click(lights) expect(mockToggleLights).toHaveBeenCalled() }) @@ -129,50 +129,50 @@ describe('RobotSettingsDashboard', () => { lightsEnabled: true, toggleLights: mockToggleLights, }) - const [{ getByTestId }] = render() + render() expect( - getByTestId('RobotSettingButton_display_led_lights') + screen.getByTestId('RobotSettingButton_display_led_lights') ).toHaveTextContent('On') }) it('should render component when tapping network settings', () => { - const [{ getByText }] = render() - const button = getByText('Network Settings') + render() + const button = screen.getByText('Network Settings') fireEvent.click(button) expect(vi.mocked(NetworkSettings)).toHaveBeenCalled() }) it('should render component when tapping display touchscreen sleep', () => { - const [{ getByText }] = render() - const button = getByText('Touchscreen Sleep') + render() + const button = screen.getByText('Touchscreen Sleep') fireEvent.click(button) expect(vi.mocked(TouchScreenSleep)).toHaveBeenCalled() }) it('should render component when tapping touchscreen brightness', () => { - const [{ getByText }] = render() - const button = getByText('Touchscreen Brightness') + render() + const button = screen.getByText('Touchscreen Brightness') fireEvent.click(button) expect(vi.mocked(TouchscreenBrightness)).toHaveBeenCalled() }) it('should render component when tapping privacy', () => { - const [{ getByText }] = render() - const button = getByText('Privacy') + render() + const button = screen.getByText('Privacy') fireEvent.click(button) expect(vi.mocked(Privacy)).toHaveBeenCalled() }) it('should render component when tapping device rest', () => { - const [{ getByText }] = render() - const button = getByText('Device Reset') + render() + const button = screen.getByText('Device Reset') fireEvent.click(button) expect(vi.mocked(DeviceReset)).toHaveBeenCalled() }) it('should render component when tapping update channel', () => { - const [{ getByText }] = render() - const button = getByText('Update Channel') + render() + const button = screen.getByText('Update Channel') fireEvent.click(button) expect(vi.mocked(UpdateChannel)).toHaveBeenCalled() }) @@ -187,29 +187,29 @@ describe('RobotSettingsDashboard', () => { value: false, }, ]) - const [{ getByTestId }] = render() + render() expect( - getByTestId('RobotSettingButton_home_gantry_on_restart') + screen.getByTestId('RobotSettingButton_home_gantry_on_restart') ).toHaveTextContent('On') }) it('should call a mock function when tapping enable historic offset', () => { - const [{ getByText }] = render() - const button = getByText('Apply Labware Offsets') + render() + const button = screen.getByText('Apply Labware Offsets') fireEvent.click(button) expect(vi.mocked(toggleHistoricOffsets)).toHaveBeenCalled() }) it('should call a mock function when tapping enable dev tools', () => { - const [{ getByText }] = render() - const button = getByText('Developer Tools') + render() + const button = screen.getByText('Developer Tools') fireEvent.click(button) expect(vi.mocked(toggleDevtools)).toHaveBeenCalled() }) it('should return an update available with correct text', () => { vi.mocked(getRobotUpdateAvailable).mockReturnValue('upgrade') - const [{ getByText }] = render() - getByText('Update available') + render() + screen.getByText('Update available') }) }) diff --git a/app/src/pages/UpdateRobot/__tests__/UpdateRobot.test.tsx b/app/src/pages/UpdateRobot/__tests__/UpdateRobot.test.tsx index 237c3dff532..d7ff6bf9a72 100644 --- a/app/src/pages/UpdateRobot/__tests__/UpdateRobot.test.tsx +++ b/app/src/pages/UpdateRobot/__tests__/UpdateRobot.test.tsx @@ -2,6 +2,7 @@ import * as React from 'react' import { vi, it, describe, beforeEach, afterEach } from 'vitest' import { MemoryRouter } from 'react-router-dom' import { when } from 'vitest-when' +import { screen } from '@testing-library/react' import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' @@ -95,24 +96,24 @@ describe('UpdateRobot', () => { vi.mocked(RobotUpdate.getRobotUpdateSession).mockReturnValue( mockDownloadSession ) - const [{ getByText }] = render() - getByText('Downloading software...') + render() + screen.getByText('Downloading software...') }) it('should render NoUpdateFound when there is no upgrade - reinstall', () => { vi.mocked(RobotUpdate.getRobotUpdateAvailable).mockReturnValue( RobotUpdate.REINSTALL ) - const [{ getByText }] = render() - getByText('Your software is already up to date!') + render() + screen.getByText('Your software is already up to date!') }) it('should render mock NoUpdate found when there is no upgrade - downgrade', () => { vi.mocked(RobotUpdate.getRobotUpdateAvailable).mockReturnValue( RobotUpdate.DOWNGRADE ) - const [{ getByText }] = render() - getByText('Your software is already up to date!') + render() + screen.getByText('Your software is already up to date!') }) it('should render mock ErrorUpdateSoftware when an error occurs', () => { @@ -123,10 +124,10 @@ describe('UpdateRobot', () => { vi.mocked(RobotUpdate.getRobotUpdateSession).mockReturnValue( mockErrorSession ) - const [{ getByText }] = render() - getByText('Software update error') - getByText('mock error') - getByText('Try again') - getByText('Cancel software update') + render() + screen.getByText('Software update error') + screen.getByText('mock error') + screen.getByText('Try again') + screen.getByText('Cancel software update') }) }) diff --git a/app/src/pages/UpdateRobot/__tests__/UpdateRobotDuringOnboarding.test.tsx b/app/src/pages/UpdateRobot/__tests__/UpdateRobotDuringOnboarding.test.tsx index 8019f5baac2..a4e7e94af6c 100644 --- a/app/src/pages/UpdateRobot/__tests__/UpdateRobotDuringOnboarding.test.tsx +++ b/app/src/pages/UpdateRobot/__tests__/UpdateRobotDuringOnboarding.test.tsx @@ -112,8 +112,8 @@ describe('UpdateRobotDuringOnboarding', () => { }) it('should never render CheckUpdates if it already has an upgrade', () => { - const [{ queryByText }] = render() - const checkUpdates = queryByText('Checking for updates') + render() + const checkUpdates = screen.queryByText('Checking for updates') expect(checkUpdates).not.toBeInTheDocument() }) diff --git a/components/src/hardware-sim/Pipette/__tests__/EmanatingNozzle.test.tsx b/components/src/hardware-sim/Pipette/__tests__/EmanatingNozzle.test.tsx index 2c01475da16..615e3671daf 100644 --- a/components/src/hardware-sim/Pipette/__tests__/EmanatingNozzle.test.tsx +++ b/components/src/hardware-sim/Pipette/__tests__/EmanatingNozzle.test.tsx @@ -1,18 +1,18 @@ import * as React from 'react' import { describe, it, expect } from 'vitest' -import { render } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import { C_SELECTED_DARK, C_TRANSPARENT } from '../../../styles' import { EmanatingNozzle } from '../EmanatingNozzle' import { SINGLE_CHANNEL_PIPETTE_HEIGHT } from '../constants' describe('EmanatingNozzle', () => { it('should render an small origin circle', () => { - const { getByTestId } = render( + render( ) - const originCircle = getByTestId('origin_circle') + const originCircle = screen.getByTestId('origin_circle') expect(originCircle).toHaveAttribute('cx', '5') expect(originCircle).toHaveAttribute('cy', '10') expect(originCircle).toHaveAttribute('r', '0.5') @@ -20,12 +20,12 @@ describe('EmanatingNozzle', () => { expect(originCircle).toHaveAttribute('fill', C_SELECTED_DARK) }) it('should render a medium sized animating circle', () => { - const { getByTestId } = render( + render( ) - const emanatingCircle = getByTestId('emanating_circle') + const emanatingCircle = screen.getByTestId('emanating_circle') expect(emanatingCircle).toHaveAttribute('cx', '5') expect(emanatingCircle).toHaveAttribute('cy', '10') expect(emanatingCircle).toHaveAttribute('r', '0.5') @@ -33,12 +33,12 @@ describe('EmanatingNozzle', () => { expect(emanatingCircle).toHaveAttribute('fill', C_TRANSPARENT) }) it('should render a medium sized animating circle that grows', () => { - const { getByTestId } = render( + render( ) - const radiusAnimation = getByTestId('radius_animation') + const radiusAnimation = screen.getByTestId('radius_animation') expect(radiusAnimation).toHaveAttribute('attributeName', 'r') expect(radiusAnimation).toHaveAttribute('from', '5') expect(radiusAnimation).toHaveAttribute( @@ -51,12 +51,12 @@ describe('EmanatingNozzle', () => { expect(radiusAnimation).toHaveAttribute('repeatCount', 'indefinite') }) it('should render a medium sized animating circle that fades out', () => { - const { getByTestId } = render( + render( ) - const opacityAnimation = getByTestId('opacity_animation') + const opacityAnimation = screen.getByTestId('opacity_animation') expect(opacityAnimation).toHaveAttribute('attributeName', 'opacity') expect(opacityAnimation).toHaveAttribute('from', '0.7') expect(opacityAnimation).toHaveAttribute('to', '0') diff --git a/labware-designer/src/organisms/CreateLabwareSandbox/__tests__/CreateLabwareSandbox.test.tsx b/labware-designer/src/organisms/CreateLabwareSandbox/__tests__/CreateLabwareSandbox.test.tsx index dbc88501af6..28f86ab7965 100644 --- a/labware-designer/src/organisms/CreateLabwareSandbox/__tests__/CreateLabwareSandbox.test.tsx +++ b/labware-designer/src/organisms/CreateLabwareSandbox/__tests__/CreateLabwareSandbox.test.tsx @@ -1,65 +1,63 @@ import * as React from 'react' import '@testing-library/jest-dom/vitest' import { describe, it, expect } from 'vitest' -import { render, fireEvent } from '@testing-library/react' +import { render, fireEvent, screen } from '@testing-library/react' import { CreateLabwareSandbox } from '..' describe('CreateLabwareSandbox', () => { it('renders irregular form by default', () => { - const { getByRole } = render() + render() expect( - getByRole('heading', { name: 'Render Irregular Labware' }) + screen.getByRole('heading', { name: 'Render Irregular Labware' }) ).toBeTruthy() - const inputTextArea: HTMLTextAreaElement = getByRole('textbox', { + const inputTextArea: HTMLTextAreaElement = screen.getByRole('textbox', { name: 'input options', - }) as any + }) expect(inputTextArea.value).toContain('"format": "irregular"') - const outputTextArea: HTMLTextAreaElement = getByRole('textbox', { + const outputTextArea: HTMLTextAreaElement = screen.getByRole('textbox', { name: 'output definition', - }) as any + }) expect(outputTextArea.value).toContain('"format": "irregular"') }) it('renders regular form when selected', () => { - const { getByRole } = render() + render() - const regularRadio = getByRole('radio', { name: 'Regular' }) + const regularRadio = screen.getByRole('radio', { name: 'Regular' }) fireEvent.click(regularRadio) expect( - getByRole('heading', { name: 'Render Regular Labware' }) + screen.getByRole('heading', { name: 'Render Regular Labware' }) ).toBeTruthy() - const inputTextArea: HTMLTextAreaElement = getByRole('textbox', { + const inputTextArea: HTMLTextAreaElement = screen.getByRole('textbox', { name: 'input options', - }) as any + }) expect(inputTextArea.value).toContain('"format": "96Standard"') - const outputTextArea: HTMLTextAreaElement = getByRole('textbox', { + const outputTextArea: HTMLTextAreaElement = screen.getByRole('textbox', { name: 'output definition', - }) as any + }) expect(outputTextArea.value).toContain('"format": "96Standard"') }) it('renders labware on deck by default and by itself after selected', () => { - const { getByTestId, getByRole, queryByTestId } = render( - - ) - expect(getByTestId('lw_on_deck')).toBeTruthy() - expect(queryByTestId('lw_by_itself')).toBeNull() + render() + expect(screen.getByTestId('lw_on_deck')).toBeTruthy() + expect(screen.queryByTestId('lw_by_itself')).toBeNull() - const byItselfRadio = getByRole('radio', { name: 'By Itself' }) + const byItselfRadio = screen.getByRole('radio', { name: 'By Itself' }) fireEvent.click(byItselfRadio) - expect(queryByTestId('lw_on_deck')).toBeNull() - expect(getByTestId('lw_by_itself')).toBeTruthy() + expect(screen.queryByTestId('lw_on_deck')).toBeNull() + expect(screen.getByTestId('lw_by_itself')).toBeTruthy() }) it('renders labware in first deck slot by default and by changes with selection', () => { - const { getByTestId, getByRole } = render() - const labwareRender: SVGGElement = getByTestId('lw_on_deck') as any + render() + const labwareRender: SVGGElement = screen.getByTestId('lw_on_deck') as any expect(labwareRender.getAttributeNS(null, 'transform')).toBe( 'translate(0, 0)' ) - fireEvent.change(getByRole('combobox'), { target: { value: 4 } }) + fireEvent.change(screen.getByRole('combobox'), { target: { value: 4 } }) expect(labwareRender.getAttributeNS(null, 'transform')).not.toBe( 'translate(0, 0)' ) From f71ef58e72b2b5d062c616bef020923f2b4f65ae Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Fri, 31 May 2024 15:25:07 -0400 Subject: [PATCH 03/10] second batch of avoid destructuring queries --- .../__tests__/Instructions.test.tsx | 92 ++--- .../__tests__/CommandText.test.tsx | 345 +++++++++--------- .../__tests__/ConfigFormSubmitButton.test.tsx | 9 +- .../__tests__/ConfigurePipette.test.tsx | 5 +- .../__tests__/SecureLabwareModal.test.tsx | 4 +- .../LiquidsLabwareDetailsModal.test.tsx | 10 +- .../__tests__/NotConfiguredModal.test.tsx | 12 +- .../__tests__/SetupModulesMap.test.tsx | 6 +- .../__tests__/BackToTopButton.test.tsx | 4 +- .../__tests__/LabwareInfoOverlay.test.tsx | 23 +- .../__tests__/ProtocolDropTipBanner.test.tsx | 8 +- .../SetupTipLengthCalibrationButton.test.tsx | 4 +- .../__tests__/RobotStatusHeader.test.tsx | 11 +- .../__tests__/FirmwareUpdateModal.test.tsx | 6 +- .../__tests__/UpdateInProgressModal.test.tsx | 9 +- .../HowCalibrationWorksModal.test.tsx | 36 +- .../IncompatibleModuleTakeover.test.tsx | 12 +- .../LabwareDetails/__tests__/Gallery.test.tsx | 8 +- .../__tests__/CheckItem.test.tsx | 42 +-- .../__tests__/ThermocyclerModuleData.test.tsx | 8 +- .../__tests__/RecentRunProtocolCard.test.tsx | 8 +- .../__tests__/BeforeBeginning.test.tsx | 12 +- .../__tests__/DetachPipette.test.tsx | 12 +- .../__tests__/DetachProbe.test.tsx | 26 +- .../ProtocolAnalysisFailure.test.tsx | 4 +- .../__tests__/ProtocolLabwareDetails.test.tsx | 10 +- .../RobotConfigurationDetails.test.tsx | 4 +- .../__tests__/ProtocolList.test.tsx | 4 +- .../__tests__/ProtocolOverflowMenu.test.tsx | 6 +- .../ModuleCalibrationOverflowMenu.test.tsx | 4 +- .../CalibrationDataDownload.test.tsx | 4 +- ...tSettingsPipetteOffsetCalibration.test.tsx | 4 +- .../__tests__/UpdateRobotBanner.test.tsx | 10 +- .../__tests__/ConnectViaEthernet.test.tsx | 7 +- .../DisplayConnectionStatus.test.tsx | 34 +- .../__tests__/TitleHeader.test.tsx | 12 +- .../__tests__/DeviceDetails.test.tsx | 5 +- .../__tests__/GoBack.test.tsx | 6 +- 38 files changed, 415 insertions(+), 411 deletions(-) diff --git a/app/src/organisms/ChangePipette/__tests__/Instructions.test.tsx b/app/src/organisms/ChangePipette/__tests__/Instructions.test.tsx index 4d58def85ac..2c95300838e 100644 --- a/app/src/organisms/ChangePipette/__tests__/Instructions.test.tsx +++ b/app/src/organisms/ChangePipette/__tests__/Instructions.test.tsx @@ -55,14 +55,14 @@ describe('Instructions', () => { ) }) it('renders 1st page of the detach pipette flow', () => { - const { getByText, getByRole, getByAltText } = render(props) - getByText('Loosen the screws') - getByText( + render(props) + 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.' ) - getByAltText('detach-left-single-GEN1-screws') - const goBack = getByRole('button', { name: 'Go back' }) - const cont = getByRole('button', { name: 'Continue' }) + screen.getByAltText('detach-left-single-GEN1-screws') + const goBack = screen.getByRole('button', { name: 'Go back' }) + const cont = screen.getByRole('button', { name: 'Continue' }) fireEvent.click(goBack) expect(props.back).toHaveBeenCalled() fireEvent.click(cont) @@ -74,16 +74,16 @@ describe('Instructions', () => { ...props, currentStepCount: 2, } - const { getByText, getByRole, getByAltText } = render(props) - getByText('Remove the pipette') - getByText( + render(props) + 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.' ) - getByAltText('detach-left-single-GEN1-tab') - const goBack = getByRole('button', { name: 'Go back' }) + screen.getByAltText('detach-left-single-GEN1-tab') + const goBack = screen.getByRole('button', { name: 'Go back' }) fireEvent.click(goBack) expect(props.prevStep).toHaveBeenCalled() - getByText('mock check pipettes button') + screen.getByText('mock check pipettes button') }) it('renders the attach flow when no pipette is selected', () => { @@ -102,9 +102,9 @@ describe('Instructions', () => { currentStepCount: 0, attachedWrong: false, } - const { getByText, getByRole } = render(props) - getByText('Choose a pipette to attach') - const goBack = getByRole('button', { name: 'Go back' }) + render(props) + screen.getByText('Choose a pipette to attach') + const goBack = screen.getByRole('button', { name: 'Go back' }) fireEvent.click(goBack) expect(props.back).toHaveBeenCalled() expect(screen.queryByText('Continue')).not.toBeInTheDocument() @@ -126,19 +126,19 @@ describe('Instructions', () => { currentStepCount: 1, attachedWrong: false, } - const { getByText, getByRole, getByAltText } = render(props) - getByText('Insert screws') - getByText( + render(props) + screen.getByText('Insert screws') + screen.getByText( 'Using a 2.5 mm screwdriver, insert the the three screws on the back of the pipette.' ) - getByText( + screen.getByText( 'Starting with screw #1, tighten the screws with a clockwise motion.' ) - getByAltText('attach-left-single-GEN1-screws') - const goBack = getByRole('button', { name: 'Go back' }) + screen.getByAltText('attach-left-single-GEN1-screws') + const goBack = screen.getByRole('button', { name: 'Go back' }) fireEvent.click(goBack) expect(props.setWantedName).toHaveBeenCalled() - const cont = getByRole('button', { name: 'Continue' }) + const cont = screen.getByRole('button', { name: 'Continue' }) fireEvent.click(cont) expect(props.nextStep).toHaveBeenCalled() }) @@ -159,16 +159,16 @@ describe('Instructions', () => { currentStepCount: 2, attachedWrong: false, } - const { getByText, getByRole, getByAltText } = render(props) - getByText('Attach the pipette') - getByText( + render(props) + screen.getByText('Attach the pipette') + screen.getByText( 'Push in the white connector tab until you feel it plug into the pipette.' ) - getByAltText('attach-left-single-GEN1-tab') - const goBack = getByRole('button', { name: 'Go back' }) + screen.getByAltText('attach-left-single-GEN1-tab') + const goBack = screen.getByRole('button', { name: 'Go back' }) fireEvent.click(goBack) expect(props.prevStep).toHaveBeenCalled() - getByText('mock check pipettes button') + screen.getByText('mock check pipettes button') }) it('renders the attach flow 1st page when a p10 8 channel is selected', () => { @@ -187,18 +187,18 @@ describe('Instructions', () => { currentStepCount: 1, attachedWrong: false, } - const { getByText, getByRole, getByAltText } = render(props) - getByText('Insert screws') - getByText( + render(props) + screen.getByText('Insert screws') + screen.getByText( 'Using a 2.5 mm screwdriver, insert the the three screws on the back of the pipette.' ) - getByText( + screen.getByText( nestedTextMatcher( 'Starting with screw #1, loosely tighten the screws with a clockwise motion. You will tighten them fully in a later step.' ) ) - getByAltText('attach-left-multi-GEN1-screws') - const cont = getByRole('button', { name: 'Continue' }) + screen.getByAltText('attach-left-multi-GEN1-screws') + const cont = screen.getByRole('button', { name: 'Continue' }) fireEvent.click(cont) expect(props.nextStep).toHaveBeenCalled() }) @@ -219,16 +219,16 @@ describe('Instructions', () => { currentStepCount: 2, attachedWrong: false, } - const { getByText, getByRole, getByAltText } = render(props) - getByText('Attach the pipette') - getByText( + render(props) + screen.getByText('Attach the pipette') + screen.getByText( 'Push in the white connector tab until you feel it plug into the pipette.' ) - getByAltText('attach-left-multi-GEN1-tab') - const goBack = getByRole('button', { name: 'Go back' }) + screen.getByAltText('attach-left-multi-GEN1-tab') + const goBack = screen.getByRole('button', { name: 'Go back' }) fireEvent.click(goBack) expect(props.prevStep).toHaveBeenCalled() - getByText('mock check pipettes button') + screen.getByText('mock check pipettes button') }) it('renders the attach flow 2nd page when a p10 8 channel is selected and the pipette is wrong', () => { @@ -247,15 +247,15 @@ describe('Instructions', () => { currentStepCount: 2, attachedWrong: true, } - const { getByText, getByRole, getByAltText } = render(props) - getByText('Attach the pipette') - getByText( + render(props) + screen.getByText('Attach the pipette') + screen.getByText( 'Push in the white connector tab until you feel it plug into the pipette.' ) - getByAltText('attach-left-multi-GEN1-tab') - const goBack = getByRole('button', { name: 'Go back' }) + screen.getByAltText('attach-left-multi-GEN1-tab') + const goBack = screen.getByRole('button', { name: 'Go back' }) fireEvent.click(goBack) expect(props.prevStep).toHaveBeenCalled() - getByText('mock check pipettes button') + screen.getByText('mock check pipettes button') }) }) diff --git a/app/src/organisms/CommandText/__tests__/CommandText.test.tsx b/app/src/organisms/CommandText/__tests__/CommandText.test.tsx index 3cb3dac0a96..c7a8d316f43 100644 --- a/app/src/organisms/CommandText/__tests__/CommandText.test.tsx +++ b/app/src/organisms/CommandText/__tests__/CommandText.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { it, expect, describe } from 'vitest' +import { screen } from '@testing-library/react' import { FLEX_ROBOT_TYPE, @@ -39,15 +40,15 @@ describe('CommandText', () => { ) expect(command).not.toBeUndefined() if (command != null) { - const { getByText } = renderWithProviders( + renderWithProviders( , { i18nInstance: i18n } - )[0] - getByText( + ) + screen.getByText( 'Aspirating 100 µL from well A1 of NEST 1 Well Reservoir 195 mL in Slot 5 at 150 µL/sec' ) } @@ -58,15 +59,15 @@ describe('CommandText', () => { ) expect(command).not.toBeUndefined() if (command != null) { - const { getByText } = renderWithProviders( + renderWithProviders( , { i18nInstance: i18n } - )[0] - getByText( + ) + screen.getByText( 'Dispensing 100 µL into well A1 of NEST 96 Well Plate 100 µL PCR Full Skirt (1) in Magnetic Module GEN2 in Slot 1 at 300 µL/sec' ) } @@ -84,21 +85,21 @@ describe('CommandText', () => { } as DispenseRunTimeCommand expect(pushOutDispenseCommand).not.toBeUndefined() if (pushOutDispenseCommand != null) { - const { getByText } = renderWithProviders( + renderWithProviders( , { i18nInstance: i18n } - )[0] - getByText( + ) + screen.getByText( 'Dispensing 100 µL into well A1 of NEST 96 Well Plate 100 µL PCR Full Skirt (1) in Magnetic Module GEN2 in Slot 1 at 300 µL/sec and pushing out 10 µL' ) } }) it('renders correct text for dispenseInPlace', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { } />, { i18nInstance: i18n } - )[0] - getByText('Dispensing 50 µL in place at 300 µL/sec') + ) + screen.getByText('Dispensing 50 µL in place at 300 µL/sec') }) it('renders correct text for blowout', () => { const dispenseCommand = mockCommandTextData.commands.find( @@ -127,21 +128,21 @@ describe('CommandText', () => { } as BlowoutRunTimeCommand expect(blowoutCommand).not.toBeUndefined() if (blowoutCommand != null) { - const { getByText } = renderWithProviders( + renderWithProviders( , { i18nInstance: i18n } - )[0] - getByText( + ) + screen.getByText( 'Blowing out at well A1 of NEST 96 Well Plate 100 µL PCR Full Skirt (1) in Magnetic Module GEN2 in Slot 1 at 300 µL/sec' ) } }) it('renders correct text for blowOutInPlace', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { } />, { i18nInstance: i18n } - )[0] - getByText('Blowing out in place at 300 µL/sec') + ) + screen.getByText('Blowing out in place at 300 µL/sec') }) it('renders correct text for aspirateInPlace', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { } />, { i18nInstance: i18n } - )[0] - getByText('Aspirating 10 µL in place at 300 µL/sec') + ) + screen.getByText('Aspirating 10 µL in place at 300 µL/sec') }) it('renders correct text for moveToWell', () => { const dispenseCommand = mockCommandTextData.commands.find( @@ -189,19 +190,19 @@ describe('CommandText', () => { } as MoveToWellRunTimeCommand expect(moveToWellCommand).not.toBeUndefined() if (moveToWellCommand != null) { - const { getByText } = renderWithProviders( + renderWithProviders( , { i18nInstance: i18n } - )[0] - 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', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText( + ) + screen.getByText( 'Moving Opentrons 96 Tip Rack 300 µL using gripper from Slot 9 to Slot 5' ) }) it('renders correct text for moveToAddressableArea for Waste Chutes', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { } />, { i18nInstance: i18n } - )[0] - getByText('Moving to Waste Chute') + ) + screen.getByText('Moving to Waste Chute') }) it('renders correct text for moveToAddressableArea for Fixed Trash', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { } />, { i18nInstance: i18n } - )[0] - getByText('Moving to Fixed Trash') + ) + screen.getByText('Moving to Fixed Trash') }) it('renders correct text for moveToAddressableArea for Trash Bins', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { } />, { i18nInstance: i18n } - )[0] - getByText('Moving to Trash Bin in D3') + ) + screen.getByText('Moving to Trash Bin in D3') }) it('renders correct text for moveToAddressableAreaForDropTip for Trash Bin', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { } />, { i18nInstance: i18n } - )[0] - getByText('Moving to Trash Bin in D3') + ) + screen.getByText('Moving to Trash Bin in D3') }) it('renders correct text for moveToAddressableArea for slots', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { } />, { i18nInstance: i18n } - )[0] - getByText('Moving to D3') + ) + screen.getByText('Moving to D3') }) it('renders correct text for configureForVolume', () => { const command = { @@ -339,15 +340,15 @@ describe('CommandText', () => { }, } as ConfigureForVolumeRunTimeCommand - const { getByText } = renderWithProviders( + renderWithProviders( , { i18nInstance: i18n } - )[0] - getByText('Configure P300 Single-Channel GEN1 to aspirate 1 µL') + ) + screen.getByText('Configure P300 Single-Channel GEN1 to aspirate 1 µL') }) it('renders correct text for prepareToAspirate', () => { const command = { @@ -357,15 +358,15 @@ describe('CommandText', () => { }, } as PrepareToAspirateRunTimeCommand - const { getByText } = renderWithProviders( + renderWithProviders( , { i18nInstance: i18n } - )[0] - getByText('Preparing P300 Single-Channel GEN1 to aspirate') + ) + screen.getByText('Preparing P300 Single-Channel GEN1 to aspirate') }) it('renders correct text for dropTip', () => { const command = mockCommandTextData.commands.find( @@ -373,19 +374,19 @@ describe('CommandText', () => { ) expect(command).not.toBeUndefined() if (command != null) { - const { getByText } = renderWithProviders( + renderWithProviders( , { i18nInstance: i18n } - )[0] - getByText('Dropping tip in A1 of Fixed Trash') + ) + screen.getByText('Dropping tip in A1 of Fixed Trash') } }) it('renders correct text for dropTip into a labware', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { } />, { i18nInstance: i18n } - )[0] - 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', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { } />, { i18nInstance: i18n } - )[0] - getByText('Dropping tip in place') + ) + screen.getByText('Dropping tip in place') }) it('renders correct text for pickUpTip', () => { const command = mockCommandTextData.commands.find( @@ -429,15 +430,15 @@ describe('CommandText', () => { ) expect(command).not.toBeUndefined() if (command != null) { - const { getByText } = renderWithProviders( + renderWithProviders( , { i18nInstance: i18n } - )[0] - getByText( + ) + screen.getByText( 'Picking up tip(s) from A1 of Opentrons 96 Tip Rack 300 µL in Slot 9' ) } @@ -448,15 +449,15 @@ describe('CommandText', () => { ) expect(command).not.toBeNull() if (command != null) { - const { getByText } = renderWithProviders( + renderWithProviders( , { i18nInstance: i18n } - )[0] - getByText('Load P300 Single-Channel GEN1 in Left Mount') + ) + screen.getByText('Load P300 Single-Channel GEN1 in Left Mount') } }) it('renders correct text for loadModule', () => { @@ -465,15 +466,15 @@ describe('CommandText', () => { ) expect(command).not.toBeNull() if (command != null) { - const { getByText } = renderWithProviders( + renderWithProviders( , { i18nInstance: i18n } - )[0] - getByText('Load Magnetic Module GEN2 in Slot 1') + ) + screen.getByText('Load Magnetic Module GEN2 in Slot 1') } }) it('renders correct text for loadLabware that is category adapter in slot', () => { @@ -481,50 +482,50 @@ describe('CommandText', () => { c => c.commandType === 'loadLabware' ) const loadLabwareCommand = loadLabwareCommands[0] - const { getByText } = renderWithProviders( + renderWithProviders( , { i18nInstance: i18n } - )[0] - getByText('Load Opentrons 96 Flat Bottom Adapter in Slot 2') + ) + screen.getByText('Load Opentrons 96 Flat Bottom Adapter in Slot 2') }) it('renders correct text for loadLabware in slot', () => { const loadLabwareCommands = mockCommandTextData.commands.filter( c => c.commandType === 'loadLabware' ) const loadTipRackCommand = loadLabwareCommands[2] - const { getByText } = renderWithProviders( + renderWithProviders( , { i18nInstance: i18n } - )[0] - getByText('Load Opentrons 96 Tip Rack 300 µL in Slot 9') + ) + screen.getByText('Load Opentrons 96 Tip Rack 300 µL in Slot 9') }) it('renders correct text for loadLabware in module', () => { const loadLabwareCommands = mockCommandTextData.commands.filter( c => c.commandType === 'loadLabware' ) const loadOnModuleCommand = loadLabwareCommands[3] - const { getByText } = renderWithProviders( + renderWithProviders( , { i18nInstance: i18n } - )[0] - getByText( + ) + screen.getByText( 'Load NEST 96 Well Plate 100 µL PCR Full Skirt in Magnetic Module GEN2 in Slot 1' ) }) it('renders correct text for loadLabware in adapter', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText( + ) + screen.getByText( 'Load mock displayName in Opentrons 96 Flat Bottom Adapter in Slot 2' ) }) @@ -573,15 +574,15 @@ describe('CommandText', () => { location: 'offDeck', }, } as LoadLabwareRunTimeCommand - const { getByText } = renderWithProviders( + renderWithProviders( , { i18nInstance: i18n } - )[0] - getByText('Load NEST 96 Well Plate 100 µL PCR Full Skirt off deck') + ) + screen.getByText('Load NEST 96 Well Plate 100 µL PCR Full Skirt off deck') }) it('renders correct text for loadLiquid', () => { const loadLabwareCommands = mockCommandTextData.commands.filter( @@ -614,7 +615,7 @@ describe('CommandText', () => { }, ], } - const { getByText } = renderWithProviders( + renderWithProviders( { command={loadLiquidCommand} />, { i18nInstance: i18n } - )[0] - getByText('Load Water into fakeDisplayName') + ) + screen.getByText('Load Water into fakeDisplayName') }) it('renders correct text for temperatureModule/setTargetTemperature', () => { const mockTemp = 20 - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - 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 - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText('Waiting for Temperature Module to reach 20°C') + ) + screen.getByText('Waiting for Temperature Module to reach 20°C') }) it('renders correct text for temperatureModule/waitForTemperature with no specified temp', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - 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 - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText( + ) + screen.getByText( 'Setting Thermocycler block temperature to 20°C with hold time of 0 seconds after target reached' ) }) it('renders correct text for thermocycler/setTargetLidTemperature', () => { const mockTemp = 20 - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText('Setting Thermocycler lid temperature to 20°C') + ) + screen.getByText('Setting Thermocycler lid temperature to 20°C') }) it('renders correct text for heaterShaker/setTargetTemperature', () => { const mockTemp = 20 - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText('Setting Target Temperature of Heater-Shaker to 20°C') + ) + screen.getByText('Setting Target Temperature of Heater-Shaker to 20°C') }) it('renders correct text for thermocycler/runProfile on Desktop', () => { const mockProfileSteps = [ { holdSeconds: 10, celsius: 20 }, { holdSeconds: 30, celsius: 40 }, ] - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText( + ) + screen.getByText( 'Thermocycler starting 2 repetitions of cycle composed of the following steps:' ) - getByText('temperature: 20°C, seconds: 10') - getByText('temperature: 40°C, seconds: 30') + screen.getByText('temperature: 20°C, seconds: 10') + screen.getByText('temperature: 40°C, seconds: 30') }) it('renders correct text for thermocycler/runProfile on ODD', () => { const mockProfileSteps = [ { holdSeconds: 10, celsius: 20 }, { holdSeconds: 30, celsius: 40 }, ] - const { getByText, queryByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText( + ) + screen.getByText( 'Thermocycler starting 2 repetitions of cycle composed of the following steps:' ) - getByText('temperature: 20°C, seconds: 10') + screen.getByText('temperature: 20°C, seconds: 10') expect( - queryByText('temperature: 40°C, seconds: 30') + screen.queryByText('temperature: 40°C, seconds: 30') ).not.toBeInTheDocument() }) it('renders correct text for heaterShaker/setAndWaitForShakeSpeed', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText( + ) + screen.getByText( 'Setting Heater-Shaker to shake at 1000 rpm and waiting until reached' ) }) it('renders correct text for moveToSlot', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText('Moving to Slot 1') + ) + screen.getByText('Moving to Slot 1') }) it('renders correct text for moveRelative', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText('Moving 10 mm along x axis') + ) + screen.getByText('Moving 10 mm along x axis') }) it('renders correct text for moveToCoordinates', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText('Moving to (X: 1, Y: 2, Z: 3)') + ) + screen.getByText('Moving to (X: 1, Y: 2, Z: 3)') }) it('renders correct text for commands with no parsed params', () => { const expectedCopyByCommandType: { @@ -959,7 +960,7 @@ describe('CommandText', () => { } as const Object.entries(expectedCopyByCommandType).forEach( ([commandType, expectedCopy]) => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] + ) expect(expectedCopy).not.toBeUndefined() - if (expectedCopy != null) getByText(expectedCopy) + if (expectedCopy != null) screen.getByText(expectedCopy) } ) }) it('renders correct text for waitForDuration', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText('Pausing for 42 seconds. THIS IS A MESSAGE') + ) + screen.getByText('Pausing for 42 seconds. THIS IS A MESSAGE') }) it('renders correct text for legacy pause with message', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText('THIS IS A MESSAGE') + ) + screen.getByText('THIS IS A MESSAGE') }) it('renders correct text for legacy pause without message', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText('Pausing protocol') + ) + screen.getByText('Pausing protocol') }) it('renders correct text for waitForResume with message', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText('THIS IS A MESSAGE') + ) + screen.getByText('THIS IS A MESSAGE') }) it('renders correct text for waitForResume without message', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText('Pausing protocol') + ) + screen.getByText('Pausing protocol') }) it('renders correct text for legacy delay with time', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText('Pausing for 42 seconds. THIS IS A MESSAGE') + ) + screen.getByText('Pausing for 42 seconds. THIS IS A MESSAGE') }) it('renders correct text for legacy delay wait for resume with message', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText('THIS IS A MESSAGE') + ) + screen.getByText('THIS IS A MESSAGE') }) it('renders correct text for legacy delay wait for resume without message', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText('Pausing protocol') + ) + screen.getByText('Pausing protocol') }) it('renders correct text for custom command type with legacy command text', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText('SOME LEGACY COMMAND') + ) + screen.getByText('SOME LEGACY COMMAND') }) it('renders correct text for custom command type with arbitrary params', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText( + ) + screen.getByText( 'custom: {"thunderBolts":true,"lightning":"yup","veryVeryFrightening":1}' ) }) it('renders correct text for move labware manually off deck', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText( + ) + screen.getByText( 'Manually move Opentrons 96 Tip Rack 300 µL from Slot 9 to off deck' ) }) it('renders correct text for move labware manually to module', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText( + ) + screen.getByText( 'Manually move NEST 96 Well Plate 100 µL PCR Full Skirt (1) from Magnetic Module GEN2 in Slot 1 to Slot A3' ) }) it('renders correct text for move labware with gripper off deck', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText( + ) + screen.getByText( 'Moving Opentrons 96 Tip Rack 300 µL using gripper from Slot 9 to off deck' ) }) it('renders correct text for move labware with gripper to waste chute', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText( + ) + screen.getByText( 'Moving Opentrons 96 Tip Rack 300 µL using gripper from Slot 9 to Waste Chute' ) }) it('renders correct text for move labware with gripper to module', () => { - const { getByText } = renderWithProviders( + renderWithProviders( { { i18nInstance: i18n, } - )[0] - getByText( + ) + screen.getByText( 'Moving NEST 96 Well Plate 100 µL PCR Full Skirt (1) using gripper from Magnetic Module GEN2 in Slot 1 to Magnetic Module GEN2 in Slot 1' ) }) diff --git a/app/src/organisms/ConfigurePipette/__tests__/ConfigFormSubmitButton.test.tsx b/app/src/organisms/ConfigurePipette/__tests__/ConfigFormSubmitButton.test.tsx index 63619e717c3..ddc9feadf47 100644 --- a/app/src/organisms/ConfigurePipette/__tests__/ConfigFormSubmitButton.test.tsx +++ b/app/src/organisms/ConfigurePipette/__tests__/ConfigFormSubmitButton.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { it, expect, describe, beforeEach } from 'vitest' +import { screen } from '@testing-library/react' import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' @@ -21,16 +22,16 @@ describe('ConfigFormSubmitButton', () => { }) it('renders bottom button text and is not disabled', () => { - const { getByRole } = render(props) - getByRole('button', { name: 'Confirm' }) + render(props) + screen.getByRole('button', { name: 'Confirm' }) }) it('renders bottom button text and disabled', () => { props = { disabled: true, formId: 'id', } - const { getByRole } = render(props) - const button = getByRole('button', { name: 'Confirm' }) + render(props) + const button = screen.getByRole('button', { name: 'Confirm' }) expect(button).toBeDisabled() }) }) diff --git a/app/src/organisms/ConfigurePipette/__tests__/ConfigurePipette.test.tsx b/app/src/organisms/ConfigurePipette/__tests__/ConfigurePipette.test.tsx index 213d0a0a41e..117a6586f76 100644 --- a/app/src/organisms/ConfigurePipette/__tests__/ConfigurePipette.test.tsx +++ b/app/src/organisms/ConfigurePipette/__tests__/ConfigurePipette.test.tsx @@ -11,6 +11,7 @@ import { getConfig } from '../../../redux/config' import type { DispatchApiRequestType } from '../../../redux/robot-api' import type { State } from '../../../redux/types' +import { screen } from '@testing-library/react' vi.mock('../../../redux/robot-api') vi.mock('../../../redux/config') @@ -56,9 +57,9 @@ describe('ConfigurePipette', () => { }) it('renders correct number of text boxes given the pipette settings data supplied by getAttachedPipetteSettingsFieldsById', () => { - const { getAllByRole } = render(props) + render(props) - const inputs = getAllByRole('textbox') + const inputs = screen.getAllByRole('textbox') expect(inputs.length).toBe(13) }) }) diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/__tests__/SecureLabwareModal.test.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/__tests__/SecureLabwareModal.test.tsx index 25c59b4e364..0a24039444d 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLabware/__tests__/SecureLabwareModal.test.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLabware/__tests__/SecureLabwareModal.test.tsx @@ -31,9 +31,9 @@ describe('SecureLabwareModal', () => { ) }) it('should render magnetic module type modal and call onCloseClick when button is pressed', () => { - const { getByRole } = render(props) + render(props) expect(props.onCloseClick).not.toHaveBeenCalled() - const closeButton = getByRole('button', { name: 'close' }) + const closeButton = screen.getByRole('button', { name: 'close' }) fireEvent.click(closeButton) expect(props.onCloseClick).toHaveBeenCalled() }) diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/LiquidsLabwareDetailsModal.test.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/LiquidsLabwareDetailsModal.test.tsx index be5c0931b64..3fdeb7f4682 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/LiquidsLabwareDetailsModal.test.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/LiquidsLabwareDetailsModal.test.tsx @@ -101,11 +101,11 @@ describe('LiquidsLabwareDetailsModal', () => { vi.resetAllMocks() }) it('should render slot name and labware name', () => { - const [{ getByText, getAllByText, getByRole }] = render(props) - getByRole('heading', { name: 'Slot Number' }) - getByText('5') - getByRole('heading', { name: 'Labware name' }) - getAllByText('mock labware name') + render(props) + screen.getByRole('heading', { name: 'Slot Number' }) + screen.getByText('5') + screen.getByRole('heading', { name: 'Labware name' }) + screen.getAllByText('mock labware name') }) it('should render LiquidDetailCard when correct props are passed', () => { render(props) diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/NotConfiguredModal.test.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/NotConfiguredModal.test.tsx index 955b827ec66..bf5f7d14812 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/NotConfiguredModal.test.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/NotConfiguredModal.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 { describe, it, beforeEach, vi, expect } from 'vitest' import { renderWithProviders } from '../../../../../__testing-utils__' import { TRASH_BIN_ADAPTER_FIXTURE } from '@opentrons/shared-data' @@ -38,13 +38,13 @@ describe('NotConfiguredModal', () => { } as unknown) as UseQueryResult) }) it('renders the correct text and button works as expected', () => { - const { getByText, getByRole } = render(props) - getByText('Add Trash bin to B3') - getByText( + render(props) + screen.getByText('Add Trash bin to B3') + screen.getByText( 'Add this hardware to your deck configuration. It will be referenced during protocol analysis.' ) - getByText('Trash bin') - fireEvent.click(getByRole('button', { name: 'Add' })) + screen.getByText('Trash bin') + fireEvent.click(screen.getByRole('button', { name: 'Add' })) expect(mockUpdate).toHaveBeenCalled() }) }) diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesMap.test.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesMap.test.tsx index 6158a0fa665..17522ebdfb5 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesMap.test.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesMap.test.tsx @@ -233,9 +233,9 @@ describe('SetupModulesMap', () => { ) .thenReturn(
mock module info {mockTCModule.model}
) - const { getByText } = render(props) - getByText('mock module info magneticModuleV2') - getByText('mock module info thermocyclerModuleV1') + render(props) + screen.getByText('mock module info magneticModuleV2') + screen.getByText('mock module info thermocyclerModuleV1') }) it('renders Moam with the correct module in the correct slot', () => { diff --git a/app/src/organisms/Devices/ProtocolRun/__tests__/BackToTopButton.test.tsx b/app/src/organisms/Devices/ProtocolRun/__tests__/BackToTopButton.test.tsx index 2bde946a897..4113d2c131c 100644 --- a/app/src/organisms/Devices/ProtocolRun/__tests__/BackToTopButton.test.tsx +++ b/app/src/organisms/Devices/ProtocolRun/__tests__/BackToTopButton.test.tsx @@ -58,8 +58,8 @@ describe('BackToTopButton', () => { }) it('should be enabled with no tooltip if there are no missing Ids', () => { - const { getByRole } = render() - const button = getByRole('link', { name: 'Back to top' }) + render() + const button = screen.getByRole('link', { name: 'Back to top' }) expect(button).not.toBeDisabled() expect(button.getAttribute('href')).toEqual( '/devices/otie/protocol-runs/1/setup' diff --git a/app/src/organisms/Devices/ProtocolRun/__tests__/LabwareInfoOverlay.test.tsx b/app/src/organisms/Devices/ProtocolRun/__tests__/LabwareInfoOverlay.test.tsx index 8ff94806bdd..84a5edaca1b 100644 --- a/app/src/organisms/Devices/ProtocolRun/__tests__/LabwareInfoOverlay.test.tsx +++ b/app/src/organisms/Devices/ProtocolRun/__tests__/LabwareInfoOverlay.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { when } from 'vitest-when' +import { screen } from '@testing-library/react' import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest' import { getLabwareDisplayName, @@ -103,21 +104,21 @@ describe('LabwareInfoOverlay', () => { }) it('should render the labware display name if present', () => { - const { getByText } = render(props) - getByText('fresh tips') + render(props) + screen.getByText('fresh tips') }) it('should render the labware def display name if no user displayName present', () => { - const { getByText } = render({ + render({ ...props, displayName: null, }) - getByText('mock definition display name') + screen.getByText('mock definition display name') }) it('should render NOT render the offset data label when offset data does not exist', () => { - const { queryByText } = render(props) - expect(queryByText('Labware Offsets')).toBeNull() + render(props) + expect(screen.queryByText('Labware Offsets')).toBeNull() }) it('should render the offset data when offset data exists', () => { @@ -135,10 +136,10 @@ describe('LabwareInfoOverlay', () => { ], }, } as any) - const { getByText } = render(props) - getByText('Offset Data') - getByText(nestedTextMatcher('X1.0')) - getByText(nestedTextMatcher('Y2.0')) - getByText(nestedTextMatcher('Z3.0')) + render(props) + screen.getByText('Offset Data') + screen.getByText(nestedTextMatcher('X1.0')) + screen.getByText(nestedTextMatcher('Y2.0')) + screen.getByText(nestedTextMatcher('Z3.0')) }) }) diff --git a/app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolDropTipBanner.test.tsx b/app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolDropTipBanner.test.tsx index 52312e9c3a8..0f8b391aa57 100644 --- a/app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolDropTipBanner.test.tsx +++ b/app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolDropTipBanner.test.tsx @@ -23,10 +23,10 @@ describe('Module Update Banner', () => { }) it('displays appropriate banner text', () => { - const { getByText, queryByText } = render(props) - getByText('Tips may be attached.') - queryByText('You may want to remove tips') - getByText('Remove tips') + render(props) + screen.getByText('Tips may be attached.') + screen.queryByText('You may want to remove tips') + screen.getByText('Remove tips') }) it('launches the drop tip wizard when clicking on the appropriate banner text', () => { diff --git a/app/src/organisms/Devices/ProtocolRun/__tests__/SetupTipLengthCalibrationButton.test.tsx b/app/src/organisms/Devices/ProtocolRun/__tests__/SetupTipLengthCalibrationButton.test.tsx index e0951ae689f..993e14080f5 100644 --- a/app/src/organisms/Devices/ProtocolRun/__tests__/SetupTipLengthCalibrationButton.test.tsx +++ b/app/src/organisms/Devices/ProtocolRun/__tests__/SetupTipLengthCalibrationButton.test.tsx @@ -89,8 +89,8 @@ describe('SetupTipLengthCalibrationButton', () => { }) it('button launches the tip length calibration wizard when clicked - recalibration', () => { - const { getByText } = render({ hasCalibrated: true }) - const recalibrateBtn = getByText('Recalibrate') + render({ hasCalibrated: true }) + const recalibrateBtn = screen.getByText('Recalibrate') fireEvent.click(recalibrateBtn) expect(mockTipLengthCalLauncher).toHaveBeenCalled() }) diff --git a/app/src/organisms/Devices/__tests__/RobotStatusHeader.test.tsx b/app/src/organisms/Devices/__tests__/RobotStatusHeader.test.tsx index 38d73b9a944..c93299ebf85 100644 --- a/app/src/organisms/Devices/__tests__/RobotStatusHeader.test.tsx +++ b/app/src/organisms/Devices/__tests__/RobotStatusHeader.test.tsx @@ -140,10 +140,10 @@ describe('RobotStatusHeader', () => { }) it('does not render a running protocol banner when a protocol is not running', () => { - const [{ queryByText }] = render(props) + render(props) - expect(queryByText('fake protocol name;')).toBeFalsy() - expect(queryByText('Go to Run')).toBeFalsy() + expect(screen.queryByText('fake protocol name;')).toBeFalsy() + expect(screen.queryByText('Go to Run')).toBeFalsy() }) it('renders a running protocol banner when a protocol is running', () => { @@ -200,9 +200,8 @@ describe('RobotStatusHeader', () => { }) it('renders a usb icon when only connected locally', () => { - const [{ getByLabelText }] = render(props) - - getByLabelText('usb') + render(props) + screen.getByLabelText('usb') }) it('does not render a wifi or ethernet icon when discovery client cannot find a healthy robot at its network connection ip addresses', () => { diff --git a/app/src/organisms/FirmwareUpdateModal/__tests__/FirmwareUpdateModal.test.tsx b/app/src/organisms/FirmwareUpdateModal/__tests__/FirmwareUpdateModal.test.tsx index a889ece33fd..377c38a3bf4 100644 --- a/app/src/organisms/FirmwareUpdateModal/__tests__/FirmwareUpdateModal.test.tsx +++ b/app/src/organisms/FirmwareUpdateModal/__tests__/FirmwareUpdateModal.test.tsx @@ -86,9 +86,9 @@ describe('FirmwareUpdateModal', () => { } as any, } as SubsystemUpdateProgressData, } as any) - const { getByText, getByLabelText } = render(props) - getByLabelText('spinner') - getByText('Checking for updates...') + render(props) + screen.getByLabelText('spinner') + screen.getByText('Checking for updates...') }) it('calls proceed if no update is needed', async () => { vi.mocked(useInstrumentsQuery).mockReturnValue({ diff --git a/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateInProgressModal.test.tsx b/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateInProgressModal.test.tsx index c08bef6b4ea..6d0ccf2c12b 100644 --- a/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateInProgressModal.test.tsx +++ b/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateInProgressModal.test.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import { describe, it, beforeEach } from 'vitest' import '@testing-library/jest-dom/vitest' +import { screen } from '@testing-library/react' import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { UpdateInProgressModal } from '../UpdateInProgressModal' @@ -19,14 +20,14 @@ describe('UpdateInProgressModal', () => { } }) it('renders pipette text', () => { - const { getByText } = render(props) - getByText('Updating pipette firmware...') + render(props) + screen.getByText('Updating pipette firmware...') }) it('renders Hepa/UV text', () => { props = { subsystem: 'hepa_uv', } - const { getByText } = render(props) - getByText('Updating HEPA/UV Module firmware...') + render(props) + screen.getByText('Updating HEPA/UV Module firmware...') }) }) diff --git a/app/src/organisms/HowCalibrationWorksModal/__tests__/HowCalibrationWorksModal.test.tsx b/app/src/organisms/HowCalibrationWorksModal/__tests__/HowCalibrationWorksModal.test.tsx index 3b4fa2da449..66727487559 100644 --- a/app/src/organisms/HowCalibrationWorksModal/__tests__/HowCalibrationWorksModal.test.tsx +++ b/app/src/organisms/HowCalibrationWorksModal/__tests__/HowCalibrationWorksModal.test.tsx @@ -21,51 +21,51 @@ describe('HowCalibrationWorksModal', () => { }) it('should render the correct header', () => { - const { getByText } = render(props) - getByText('How Robot Calibration Works') + render(props) + screen.getByText('How Robot Calibration Works') }) it('should render the correct body', () => { - const { getByRole, getByText } = render(props) - getByText( + render(props) + 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(getByRole('heading', { name: 'Deck Calibration' })).toBeTruthy() - getByText( + 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.' ) - getByText('Perform Deck Calibration during new robot setup.') - getByText('Redo Deck Calibration if you relocate your robot.') + screen.getByText('Perform Deck Calibration during new robot setup.') + screen.getByText('Redo Deck Calibration if you relocate your robot.') expect( - getByRole('heading', { name: 'Tip Length Calibration' }) + screen.getByRole('heading', { name: 'Tip Length Calibration' }) ).toBeTruthy() - getByText( + screen.getByText( 'This measures the Z distance between the bottom of the tip and the pipette’s nozzle. If you redo the tip length calibration for the tip you used to calibrate a pipette, you will also have to redo that Pipette Offset Calibration.' ) - getByText( + screen.getByText( 'Perform Tip Length Calibration for each new tip type used on a pipette.' ) expect( - getByRole('heading', { name: 'Pipette Offset Calibration' }) + screen.getByRole('heading', { name: 'Pipette Offset Calibration' }) ).toBeTruthy() - getByText( + screen.getByText( 'This measures a pipette’s X, Y and Z values in relation to the pipette mount and the deck. Pipette Offset Calibration relies on Deck Calibration and Tip Length Calibration.' ) - getByText( + screen.getByText( 'Perform Pipette Offset calibration the first time you attach a pipette to a new mount.' ) - getByText( + screen.getByText( 'Redo Pipette Offset Calibration after performing Deck Calibration.' ) - getByText( + screen.getByText( 'Redo Pipette Offset Calibration after performing Tip Length Calibration for the tip you used to calibrate the pipette.' ) }) it('should render a link to the learn more page', () => { - const { getByRole } = render(props) + render(props) expect( - getByRole('link', { + screen.getByRole('link', { name: 'Learn more about robot calibration', }).getAttribute('href') ).toBe( diff --git a/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx b/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx index d5c31e5cf3a..32fc828c943 100644 --- a/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx +++ b/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { screen, findByText } from '@testing-library/react' +import { screen } from '@testing-library/react' import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest' import { when } from 'vitest-when' import '@testing-library/jest-dom/vitest' @@ -66,9 +66,9 @@ describe('IncompatibleModuleTakeover', () => { ;['desktop', 'odd'].forEach(target => { it(`should render nothing on ${target} when no incompatible modules are attached`, () => { getRenderer([])({ ...props, isOnDevice: target === 'odd' }) - expect(screen.findByTestId(TOP_PORTAL_ID)).resolves.toBeEmptyDOMElement() + expect(screen.getByTestId(TOP_PORTAL_ID)).resolves.toBeEmptyDOMElement() expect( - screen.findByTestId(MODAL_PORTAL_ID) + screen.getByTestId(MODAL_PORTAL_ID) ).resolves.toBeEmptyDOMElement() expect(screen.queryByText(/TEST ELEMENT/)).toBeNull() }) @@ -79,8 +79,7 @@ describe('IncompatibleModuleTakeover', () => { ...props, isOnDevice: true, }) - const container = await screen.findByTestId(TOP_PORTAL_ID) - await findByText(container, 'TEST ELEMENT ODD') + screen.getByText('TEST ELEMENT ODD') }) it('should render the modal body on desktop when incompatible modules are attached', async () => { @@ -88,7 +87,6 @@ describe('IncompatibleModuleTakeover', () => { ...props, isOnDevice: false, }) - const container = await screen.findByTestId(MODAL_PORTAL_ID) - await findByText(container, 'TEST ELEMENT DESKTOP') + screen.getByText('TEST ELEMENT DESKTOP') }) }) diff --git a/app/src/organisms/LabwareDetails/__tests__/Gallery.test.tsx b/app/src/organisms/LabwareDetails/__tests__/Gallery.test.tsx index 5a2a8378f16..8af2a4ad0d3 100644 --- a/app/src/organisms/LabwareDetails/__tests__/Gallery.test.tsx +++ b/app/src/organisms/LabwareDetails/__tests__/Gallery.test.tsx @@ -21,17 +21,17 @@ describe('Gallery', () => { it('renders one main SVG and no mini images if definition contains no images', () => { labwareImages.mock_definition = [] - const [{ queryAllByTestId }] = render(props) + render(props) screen.getByTestId('gallery_main_svg') - expect(queryAllByTestId('gallery_mini_image')).toHaveLength(0) + expect(screen.queryAllByTestId('gallery_mini_image')).toHaveLength(0) }) it('renders one main SVG and two mini images if definition contains one image', () => { - const [{ queryAllByTestId }] = render(props) + render(props) screen.getByTestId('gallery_main_svg') - expect(queryAllByTestId('gallery_mini_image')).toHaveLength(2) + expect(screen.queryAllByTestId('gallery_mini_image')).toHaveLength(2) }) it('renders image in main image when mini image is clicked', () => { diff --git a/app/src/organisms/LabwarePositionCheck/__tests__/CheckItem.test.tsx b/app/src/organisms/LabwarePositionCheck/__tests__/CheckItem.test.tsx index d6499d95469..748da0c01a5 100644 --- a/app/src/organisms/LabwarePositionCheck/__tests__/CheckItem.test.tsx +++ b/app/src/organisms/LabwarePositionCheck/__tests__/CheckItem.test.tsx @@ -105,8 +105,8 @@ describe('CheckItem', () => { }, ]) ) - const { getByRole } = render(props) - fireEvent.click(getByRole('button', { name: 'Confirm placement' })) + render(props) + fireEvent.click(screen.getByRole('button', { name: 'Confirm placement' })) await new Promise((resolve, reject) => setTimeout(resolve)) expect(props.chainRunCommands).toHaveBeenNthCalledWith( 1, @@ -160,8 +160,8 @@ describe('CheckItem', () => { }, ]) ) - const { getByRole } = render(props) - fireEvent.click(getByRole('button', { name: 'Confirm placement' })) + render(props) + fireEvent.click(screen.getByRole('button', { name: 'Confirm placement' })) await new Promise((resolve, reject) => setTimeout(resolve)) expect(props.chainRunCommands).toHaveBeenNthCalledWith( @@ -213,8 +213,8 @@ describe('CheckItem', () => { }, ]) ) - const { getByRole } = render(props) - fireEvent.click(getByRole('button', { name: 'Confirm placement' })) + render(props) + fireEvent.click(screen.getByRole('button', { name: 'Confirm placement' })) await new Promise((resolve, reject) => setTimeout(resolve)) expect(props.chainRunCommands).toHaveBeenNthCalledWith( @@ -258,9 +258,9 @@ describe('CheckItem', () => { labwareId: mockCompletedAnalysis.labware[1].id, adapterId: 'labwareId2', } - const { getByText } = render(props) - getByText('Prepare labware in Slot D1') - getByText( + render(props) + screen.getByText('Prepare labware in Slot D1') + screen.getByText( nestedTextMatcher( 'Place a Mock Labware Definition followed by a Mock Labware Definition into Slot D1' ) @@ -283,8 +283,8 @@ describe('CheckItem', () => { }, ]) ) - const { getByRole } = render(props) - fireEvent.click(getByRole('button', { name: 'Confirm placement' })) + render(props) + fireEvent.click(screen.getByRole('button', { name: 'Confirm placement' })) await new Promise((resolve, reject) => setTimeout(resolve)) expect(props.chainRunCommands).toHaveBeenNthCalledWith( @@ -341,8 +341,8 @@ describe('CheckItem', () => { }, ], } - const { getByRole } = render(props) - fireEvent.click(getByRole('button', { name: 'Go back' })) + render(props) + fireEvent.click(screen.getByRole('button', { name: 'Go back' })) await new Promise((resolve, reject) => setTimeout(resolve)) expect(props.chainRunCommands).toHaveBeenNthCalledWith( @@ -391,8 +391,8 @@ describe('CheckItem', () => { }, ], } - const { getByRole } = render(props) - fireEvent.click(getByRole('button', { name: 'Confirm position' })) + render(props) + fireEvent.click(screen.getByRole('button', { name: 'Confirm position' })) await new Promise((resolve, reject) => setTimeout(resolve)) expect(props.chainRunCommands).toHaveBeenNthCalledWith( @@ -459,7 +459,7 @@ describe('CheckItem', () => { ], }, } - const { getByRole } = render(props) + render(props) await new Promise((resolve, reject) => setTimeout(resolve)) expect(props.chainRunCommands).toHaveBeenNthCalledWith( @@ -480,7 +480,7 @@ describe('CheckItem', () => { ], false ) - fireEvent.click(getByRole('button', { name: 'Confirm placement' })) + fireEvent.click(screen.getByRole('button', { name: 'Confirm placement' })) expect(props.chainRunCommands).toHaveBeenNthCalledWith( 2, @@ -562,8 +562,8 @@ describe('CheckItem', () => { ]) ) - const { getByRole } = render(props) - fireEvent.click(getByRole('button', { name: 'Confirm position' })) + render(props) + fireEvent.click(screen.getByRole('button', { name: 'Confirm position' })) await new Promise((resolve, reject) => setTimeout(resolve)) expect(props.chainRunCommands).toHaveBeenNthCalledWith( @@ -664,8 +664,8 @@ describe('CheckItem', () => { }, ]) ) - const { getByRole } = render(props) - fireEvent.click(getByRole('button', { name: 'Confirm placement' })) + render(props) + fireEvent.click(screen.getByRole('button', { name: 'Confirm placement' })) await new Promise((resolve, reject) => setTimeout(resolve)) expect(props.chainRunCommands).toHaveBeenNthCalledWith( diff --git a/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx b/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx index 7c611f4031b..b0de531d6c8 100644 --- a/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx @@ -183,11 +183,11 @@ describe('ThermocyclerModuleData', () => { }) it('renders thermocycler gen 1 block temperature data', () => { - const { getByText, getByTitle } = render(props) + render(props) - getByText('Block') - getByTitle('tc_target_temp') - getByTitle('tc_current_temp') + screen.getByText('Block') + screen.getByTitle('tc_target_temp') + screen.getByTitle('tc_current_temp') }) it('renders all 3 of the thermocycler gen 2 status labels', () => { diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx index fc2f21a3034..25e040583a7 100644 --- a/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx +++ b/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx @@ -275,14 +275,14 @@ describe('RecentRunProtocolCard', () => { vi.mocked(useRobotInitializationStatus).mockReturnValue( INIT_STATUS.INITIALIZING ) - const [{ getByText }] = render(props) - getByText('mock Skeleton') + render(props) + screen.getByText('mock Skeleton') }) it('should render the skeleton when the robot server is unresponsive', () => { vi.mocked(useRobotInitializationStatus).mockReturnValue(null) - const [{ getByText }] = render(props) - getByText('mock Skeleton') + render(props) + screen.getByText('mock Skeleton') }) it('should push to protocol details if protocol contains runtime parameters', () => { diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/BeforeBeginning.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/BeforeBeginning.test.tsx index 2f791defe81..8c6529973a9 100644 --- a/app/src/organisms/PipetteWizardFlows/__tests__/BeforeBeginning.test.tsx +++ b/app/src/organisms/PipetteWizardFlows/__tests__/BeforeBeginning.test.tsx @@ -232,16 +232,16 @@ describe('BeforeBeginning', () => { attachedPipettes: { left: mockAttachedPipetteInformation, right: null }, flowType: FLOWS.DETACH, } - const { getByText, getByAltText, getByRole } = render(props) - getByText('Before you begin') - getByText( + render(props) + screen.getByText('Before you begin') + screen.getByText( 'To get started, remove labware from the deck and clean up the working area to make detachment easier. Also gather the needed equipment shown to the right.' ) - getByAltText('2.5 mm Hex Screwdriver') - getByText( + screen.getByAltText('2.5 mm Hex Screwdriver') + screen.getByText( 'Provided with the robot. Using another size can strip the instruments’s screws.' ) - const proceedBtn = 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__/DetachPipette.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/DetachPipette.test.tsx index cc72ca21f06..7222e856496 100644 --- a/app/src/organisms/PipetteWizardFlows/__tests__/DetachPipette.test.tsx +++ b/app/src/organisms/PipetteWizardFlows/__tests__/DetachPipette.test.tsx @@ -50,16 +50,16 @@ describe('DetachPipette', () => { vi.mocked(InProgressModal).mockReturnValue(
mock in progress
) }) it('returns the correct information, buttons work as expected for single mount pipettes', () => { - const { getByText, getByTestId, getByLabelText } = render(props) - getByText('Loosen screws and detach Flex 1-Channel 1000 μL') - getByText( + render(props) + screen.getByText('Loosen screws and detach Flex 1-Channel 1000 μL') + screen.getByText( 'Hold the pipette in place and loosen the pipette screws. (The screws are captive and will not come apart from the pipette.) Then carefully remove the pipette.' ) - getByTestId( + screen.getByTestId( '/app/src/assets/videos/pipette-wizard-flows/Pipette_Detach_1_L.webm' ) - getByText('Continue') - const backBtn = getByLabelText('back') + screen.getByText('Continue') + const backBtn = screen.getByLabelText('back') fireEvent.click(backBtn) expect(props.goBack).toHaveBeenCalled() }) diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/DetachProbe.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/DetachProbe.test.tsx index 236cf20cf79..0430b6dfbb0 100644 --- a/app/src/organisms/PipetteWizardFlows/__tests__/DetachProbe.test.tsx +++ b/app/src/organisms/PipetteWizardFlows/__tests__/DetachProbe.test.tsx @@ -40,18 +40,18 @@ describe('DetachProbe', () => { vi.mocked(InProgressModal).mockReturnValue(
mock in progress
) }) it('returns the correct information, buttons work as expected', () => { - const { getByText, getByTestId, getByRole, getByLabelText } = render(props) - getByText('Remove calibration probe') - getByText( + render(props) + screen.getByText('Remove calibration probe') + screen.getByText( 'Unlock the calibration probe, remove it from the nozzle, and return it to its storage location.' ) - getByTestId( + screen.getByTestId( '/app/src/assets/videos/pipette-wizard-flows/Pipette_Detach_Probe_1.webm' ) - const proceedBtn = getByRole('button', { name: 'Complete calibration' }) + const proceedBtn = screen.getByRole('button', { name: 'Complete calibration' }) fireEvent.click(proceedBtn) expect(props.proceed).toHaveBeenCalled() - const backBtn = getByLabelText('back') + const backBtn = screen.getByLabelText('back') fireEvent.click(backBtn) expect(props.goBack).toHaveBeenCalled() }) @@ -60,23 +60,23 @@ describe('DetachProbe', () => { ...props, isRobotMoving: true, } - const { getByText } = render(props) - getByText('mock in progress') + render(props) + screen.getByText('mock in progress') }) it('returns the correct information when there is an error message', () => { props = { ...props, errorMessage: 'error shmerror', } - const { getByText, getByTestId, getByRole } = render(props) - getByText('Remove calibration probe') - getByText( + render(props) + screen.getByText('Remove calibration probe') + screen.getByText( 'Unlock the calibration probe, remove it from the nozzle, and return it to its storage location.' ) - getByTestId( + screen.getByTestId( '/app/src/assets/videos/pipette-wizard-flows/Pipette_Detach_Probe_1.webm' ) - const proceedBtn = getByRole('button', { name: 'Exit calibration' }) + const proceedBtn = screen.getByRole('button', { name: 'Exit calibration' }) fireEvent.click(proceedBtn) expect(props.proceed).toHaveBeenCalled() expect(screen.queryByLabelText('back')).not.toBeInTheDocument() diff --git a/app/src/organisms/ProtocolAnalysisFailure/__tests__/ProtocolAnalysisFailure.test.tsx b/app/src/organisms/ProtocolAnalysisFailure/__tests__/ProtocolAnalysisFailure.test.tsx index 77efb2b4543..a2b0d712d54 100644 --- a/app/src/organisms/ProtocolAnalysisFailure/__tests__/ProtocolAnalysisFailure.test.tsx +++ b/app/src/organisms/ProtocolAnalysisFailure/__tests__/ProtocolAnalysisFailure.test.tsx @@ -44,8 +44,8 @@ describe('ProtocolAnalysisFailure', () => { expect(screen.queryByRole('button', { name: 'close' })).toBeNull() }) it('dispatches reanalyze action on click', () => { - const [{ getByRole }, store] = render() - const reanalyzeButton = getByRole('button', { name: 'Reanalyze' }) + const store = render()[1] + const reanalyzeButton = screen.getByRole('button', { name: 'Reanalyze' }) fireEvent.click(reanalyzeButton) expect(store.dispatch).toHaveBeenCalledWith( analyzeProtocol('fakeProtocolKey') diff --git a/app/src/organisms/ProtocolDetails/__tests__/ProtocolLabwareDetails.test.tsx b/app/src/organisms/ProtocolDetails/__tests__/ProtocolLabwareDetails.test.tsx index 14f1f956295..17498a47ec0 100644 --- a/app/src/organisms/ProtocolDetails/__tests__/ProtocolLabwareDetails.test.tsx +++ b/app/src/organisms/ProtocolDetails/__tests__/ProtocolLabwareDetails.test.tsx @@ -83,11 +83,11 @@ describe('ProtocolLabwareDetails', () => { }) it('should render an opentrons labware', () => { - const { getByText } = render(props) - getByText('Labware name') - getByText('NEST 96 Well Plate 100 µL PCR Full Skirt') - getByText('Quantity') - getByText('1') + render(props) + screen.getByText('Labware name') + screen.getByText('NEST 96 Well Plate 100 µL PCR Full Skirt') + screen.getByText('Quantity') + screen.getByText('1') }) it('should render two quantites of the same opentrons labware', () => { diff --git a/app/src/organisms/ProtocolDetails/__tests__/RobotConfigurationDetails.test.tsx b/app/src/organisms/ProtocolDetails/__tests__/RobotConfigurationDetails.test.tsx index 1e3955ae89a..fcc3f0eeaa4 100644 --- a/app/src/organisms/ProtocolDetails/__tests__/RobotConfigurationDetails.test.tsx +++ b/app/src/organisms/ProtocolDetails/__tests__/RobotConfigurationDetails.test.tsx @@ -160,8 +160,8 @@ describe('RobotConfigurationDetails', () => { isLoading: false, robotType: OT2_STANDARD_MODEL, } - const { queryByText } = render(props) - expect(queryByText('extension mount')).not.toBeInTheDocument() + render(props) + expect(screen.queryByText('extension mount')).not.toBeInTheDocument() }) it('renders the magnetic module when the protocol contains a magnetic module', () => { diff --git a/app/src/organisms/ProtocolsLanding/__tests__/ProtocolList.test.tsx b/app/src/organisms/ProtocolsLanding/__tests__/ProtocolList.test.tsx index e9006c507c4..0e6cd8131d4 100644 --- a/app/src/organisms/ProtocolsLanding/__tests__/ProtocolList.test.tsx +++ b/app/src/organisms/ProtocolsLanding/__tests__/ProtocolList.test.tsx @@ -136,8 +136,8 @@ describe('ProtocolList', () => { }) it('renders Alphabetical as the sort key when alphabetical was selected last time', () => { - const { getByText } = render(props) - getByText('Alphabetical') + render(props) + screen.getByText('Alphabetical') }) it('renders Oldest updates as the sort key when oldest was selected last time', () => { diff --git a/app/src/organisms/ProtocolsLanding/__tests__/ProtocolOverflowMenu.test.tsx b/app/src/organisms/ProtocolsLanding/__tests__/ProtocolOverflowMenu.test.tsx index a3d3036edee..dcf090f7c62 100644 --- a/app/src/organisms/ProtocolsLanding/__tests__/ProtocolOverflowMenu.test.tsx +++ b/app/src/organisms/ProtocolsLanding/__tests__/ProtocolOverflowMenu.test.tsx @@ -74,10 +74,10 @@ describe('ProtocolOverflowMenu', () => { }) it('should call reanalyze when clicking reanalyze', () => { - const [{ getByTestId, getByText }, store] = render() - const button = getByTestId('ProtocolOverflowMenu_overflowBtn') + const store = render()[1] + const button = screen.getByTestId('ProtocolOverflowMenu_overflowBtn') fireEvent.click(button) - const reanalyzeButton = getByText('Reanalyze') + const reanalyzeButton = screen.getByText('Reanalyze') fireEvent.click(reanalyzeButton) expect(store.dispatch).toHaveBeenCalledWith( diff --git a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx index 44bcb21836c..7ee65e54083 100644 --- a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx +++ b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx @@ -288,7 +288,7 @@ describe('ModuleCalibrationOverflowMenu', () => { it('should be disabled when e-stop button is pressed', () => { when(useIsEstopNotDisengaged).calledWith(ROBOT_NAME).thenReturn(true) - const [{ getByLabelText }] = render(props) - expect(getByLabelText('ModuleCalibrationOverflowMenu')).toBeDisabled() + render(props) + expect(screen.getByLabelText('ModuleCalibrationOverflowMenu')).toBeDisabled() }) }) diff --git a/app/src/organisms/RobotSettingsCalibration/__tests__/CalibrationDataDownload.test.tsx b/app/src/organisms/RobotSettingsCalibration/__tests__/CalibrationDataDownload.test.tsx index b9d365c2542..3aec090b394 100644 --- a/app/src/organisms/RobotSettingsCalibration/__tests__/CalibrationDataDownload.test.tsx +++ b/app/src/organisms/RobotSettingsCalibration/__tests__/CalibrationDataDownload.test.tsx @@ -241,8 +241,8 @@ describe('CalibrationDataDownload', () => { it('renders disabled button when e-stop is pressed', () => { when(useIsFlex).calledWith(ROBOT_NAME).thenReturn(true) when(useIsEstopNotDisengaged).calledWith(ROBOT_NAME).thenReturn(true) - const [{ getByRole }] = render() - const downloadButton = getByRole('button', { + render() + const downloadButton = screen.getByRole('button', { name: 'Download calibration logs', }) expect(downloadButton).toBeDisabled() diff --git a/app/src/organisms/RobotSettingsCalibration/__tests__/RobotSettingsPipetteOffsetCalibration.test.tsx b/app/src/organisms/RobotSettingsCalibration/__tests__/RobotSettingsPipetteOffsetCalibration.test.tsx index 0970efc2187..230a26c3fe8 100644 --- a/app/src/organisms/RobotSettingsCalibration/__tests__/RobotSettingsPipetteOffsetCalibration.test.tsx +++ b/app/src/organisms/RobotSettingsCalibration/__tests__/RobotSettingsPipetteOffsetCalibration.test.tsx @@ -87,7 +87,7 @@ describe('RobotSettingsPipetteOffsetCalibration', () => { it('renders Not calibrated yet when no pipette offset calibrations data', () => { vi.mocked(usePipetteOffsetCalibrations).mockReturnValue(null) - const [{ getByText }] = render() - getByText('No pipette attached') + render() + screen.getByText('No pipette attached') }) }) diff --git a/app/src/organisms/UpdateRobotBanner/__tests__/UpdateRobotBanner.test.tsx b/app/src/organisms/UpdateRobotBanner/__tests__/UpdateRobotBanner.test.tsx index 11a395d74bc..605965dc379 100644 --- a/app/src/organisms/UpdateRobotBanner/__tests__/UpdateRobotBanner.test.tsx +++ b/app/src/organisms/UpdateRobotBanner/__tests__/UpdateRobotBanner.test.tsx @@ -38,11 +38,11 @@ describe('UpdateRobotBanner', () => { }) it('should display correct information', () => { - const { getByText, getByRole } = render(props) - getByText( + render(props) + screen.getByText( 'A robot software update is required to run protocols with this version of the Opentrons App.' ) - const btn = getByRole('button', { name: 'View update' }) + const btn = screen.getByRole('button', { name: 'View update' }) fireEvent.click(btn) expect(handleUpdateBuildroot).toHaveBeenCalled() }) @@ -65,8 +65,8 @@ describe('UpdateRobotBanner', () => { autoUpdateDisabledReason: null, updateFromFileDisabledReason: null, }) - const { getByText } = render(props) - getByText( + render(props) + screen.getByText( 'A robot software update is required to run protocols with this version of the Opentrons App.' ) }) diff --git a/app/src/pages/ConnectViaEthernet/__tests__/ConnectViaEthernet.test.tsx b/app/src/pages/ConnectViaEthernet/__tests__/ConnectViaEthernet.test.tsx index 9986a33ca5e..404f0c9f95c 100644 --- a/app/src/pages/ConnectViaEthernet/__tests__/ConnectViaEthernet.test.tsx +++ b/app/src/pages/ConnectViaEthernet/__tests__/ConnectViaEthernet.test.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import { MemoryRouter } from 'react-router-dom' import { vi, it, describe, beforeEach, afterEach } from 'vitest' +import { screen } from '@testing-library/react' import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' @@ -50,8 +51,8 @@ describe('ConnectViaEthernet', () => { }) it('should render TitleHeader component and DisplayConnectionStatus component', () => { - const [{ getByText }] = render() - getByText('mock TitleHeader') - getByText('mock DisplayConnectionStatus') + render() + screen.getByText('mock TitleHeader') + screen.getByText('mock DisplayConnectionStatus') }) }) diff --git a/app/src/pages/ConnectViaEthernet/__tests__/DisplayConnectionStatus.test.tsx b/app/src/pages/ConnectViaEthernet/__tests__/DisplayConnectionStatus.test.tsx index 2242bdd034d..76c195f3ff6 100644 --- a/app/src/pages/ConnectViaEthernet/__tests__/DisplayConnectionStatus.test.tsx +++ b/app/src/pages/ConnectViaEthernet/__tests__/DisplayConnectionStatus.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 { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' @@ -37,39 +37,39 @@ describe('DisplayConnectionStatus', () => { }) it('should render text, icon, and buttons when the connection status is connected', () => { - const [{ getByText, getByTestId }] = render(props) - getByTestId('Ethernet_connected_icon') - getByText('Successfully connected!') - getByText('View network details') - getByText('Continue') + render(props) + screen.getByTestId('Ethernet_connected_icon') + screen.getByText('Successfully connected!') + screen.getByText('View network details') + screen.getByText('Continue') }) it('should render text, icon, and buttons when the connection status is not connected', () => { props.isConnected = false - const [{ getByText, getByTestId }] = render(props) - getByTestId('Ethernet_not_connected_icon') - getByText('No network found') - getByText( + render(props) + screen.getByTestId('Ethernet_not_connected_icon') + screen.getByText('No network found') + screen.getByText( 'Connect an Ethernet cable to the back of the robot and a network switch or hub.' ) - getByText('View network details') + screen.getByText('View network details') }) it('should call a mock function when tapping view network details button when the connection status is connected', () => { - const [{ getByText }] = render(props) - fireEvent.click(getByText('View network details')) + render(props) + fireEvent.click(screen.getByText('View network details')) expect(mockFunc).toHaveBeenCalled() }) it('should call a mock function when tapping view network details button when the connection status is not connected', () => { - const [{ getByText }] = render(props) - fireEvent.click(getByText('View network details')) + render(props) + fireEvent.click(screen.getByText('View network details')) expect(mockFunc).toHaveBeenCalled() }) it('should call a mock push when tapping continue button', () => { - const [{ getByText }] = render(props) - fireEvent.click(getByText('Continue')) + render(props) + fireEvent.click(screen.getByText('Continue')) expect(mockPush).toHaveBeenCalledWith( '/robot-settings/update-robot-during-onboarding' ) diff --git a/app/src/pages/ConnectViaEthernet/__tests__/TitleHeader.test.tsx b/app/src/pages/ConnectViaEthernet/__tests__/TitleHeader.test.tsx index 4767b564a8b..67921d8203c 100644 --- a/app/src/pages/ConnectViaEthernet/__tests__/TitleHeader.test.tsx +++ b/app/src/pages/ConnectViaEthernet/__tests__/TitleHeader.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 { renderWithProviders } from '../../../__testing-utils__' import { TitleHeader } from '../../../pages/ConnectViaEthernet/TitleHeader' @@ -30,14 +30,14 @@ describe('TitleHeader', () => { }) it('should render text and button', () => { - const [{ getByText, getByTestId }] = render(props) - getByText('Ethernet') - getByTestId('Ethernet_header_back_button') + render(props) + screen.getByText('Ethernet') + screen.getByTestId('Ethernet_header_back_button') }) it('should call a mock function when tapping back button', () => { - const [{ getByTestId }] = render(props) - fireEvent.click(getByTestId('Ethernet_header_back_button')) + render(props) + fireEvent.click(screen.getByTestId('Ethernet_header_back_button')) expect(mockPush).toHaveBeenCalledWith('/network-setup') }) }) diff --git a/app/src/pages/Devices/DeviceDetails/__tests__/DeviceDetails.test.tsx b/app/src/pages/Devices/DeviceDetails/__tests__/DeviceDetails.test.tsx index 6f3255d90c7..6c20bf55094 100644 --- a/app/src/pages/Devices/DeviceDetails/__tests__/DeviceDetails.test.tsx +++ b/app/src/pages/Devices/DeviceDetails/__tests__/DeviceDetails.test.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import { vi, it, describe, expect, beforeEach } from 'vitest' import { when } from 'vitest-when' +import { screen } from '@testing-library/react' import { MemoryRouter, Route } from 'react-router-dom' import { renderWithProviders } from '../../../../__testing-utils__' @@ -48,9 +49,9 @@ describe('DeviceDetails', () => { }) it('redirects to devices page when a robot is not found and not scanning', () => { - const [{ getByText }] = render('/devices/otie') + render('/devices/otie') - getByText('devices page') + screen.getByText('devices page') }) it('renders null when a robot is not found and discovery client is scanning', () => { diff --git a/protocol-designer/src/components/modals/CreateFileWizard/__tests__/GoBack.test.tsx b/protocol-designer/src/components/modals/CreateFileWizard/__tests__/GoBack.test.tsx index d87a6f80317..a88ece96648 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/__tests__/GoBack.test.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/__tests__/GoBack.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { it, describe, beforeEach, expect, vi } from 'vitest' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../localization' import { GoBack } from '../GoBack' @@ -21,9 +21,9 @@ describe('GoBack', () => { }) it('the go back renders and clicking on it calls prop', () => { - const { getByLabelText } = render(props) + render(props) - fireEvent.click(getByLabelText('GoBack_button')) + fireEvent.click(screen.getByLabelText('GoBack_button')) expect(props.onClick).toHaveBeenCalled() }) }) From d0d9ae3664a6a22b7ce566f3b3adb4affcea4b43 Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Fri, 31 May 2024 15:55:48 -0400 Subject: [PATCH 04/10] test(app, components, protocol-designer): testing library lint rules to error, fix all occurences Promote the two previously demoted testing library eslint rules back to error and correct all outstanding occurences. --- app/src/App/__tests__/DesktopApp.test.tsx | 35 +++--- .../MenuList/__tests__/OverflowBtn.test.tsx | 10 +- .../__tests__/FloatingActionButton.test.tsx | 4 +- .../__tests__/UpdateBanner.test.tsx | 4 +- .../__tests__/CalibrateTipLength.test.tsx | 4 +- .../Introduction/__tests__/Body.test.tsx | 21 ++-- .../__tests__/InvalidationWarning.test.tsx | 13 +- .../__tests__/ChooseTipRack.test.tsx | 30 ++--- .../__tests__/ChosenTipRackRender.test.tsx | 7 +- .../useConfirmCrashRecovery.test.tsx | 31 ++--- .../__tests__/CalibrationTaskList.test.tsx | 4 +- .../__tests__/ChangePipette.test.tsx | 94 +++++++-------- .../__tests__/CheckPipettesButton.test.tsx | 28 ++--- .../__tests__/ClearDeckModal.test.tsx | 16 +-- .../__tests__/ConfirmPipette.test.tsx | 112 ++++++++++-------- .../__tests__/ExitModal.test.tsx | 26 ++-- .../__tests__/InstructionStep.test.tsx | 19 +-- .../__tests__/LevelPipette.test.tsx | 22 ++-- .../__tests__/PipetteSelection.test.tsx | 7 +- .../CalibrationHealthCheckResults.test.tsx | 19 +-- .../__tests__/CalibrationResult.test.tsx | 37 +++--- .../__tests__/RenderMountInformation.test.tsx | 19 +-- .../__tests__/RenderResult.test.tsx | 13 +- .../__tests__/ResultsSummary.test.tsx | 18 +-- .../__tests__/CommandText.test.tsx | 16 ++- .../__tests__/ConfigFormResetButton.test.tsx | 14 +-- .../HowCalibrationWorksModal.test.tsx | 12 +- .../IncompatibleModuleTakeover.test.tsx | 4 +- .../__tests__/AttachProbe.test.tsx | 12 +- .../__tests__/BeforeBeginning.test.tsx | 4 +- .../__tests__/DetachProbe.test.tsx | 4 +- .../ModuleCalibrationOverflowMenu.test.tsx | 4 +- .../__tests__/EmergencyStop.test.tsx | 4 +- .../InstrumentDetailOverflowMenu.test.tsx | 8 +- .../__tests__/NetworkSetupMenu.test.tsx | 4 +- .../__tests__/RobotSettingsDashboard.test.tsx | 4 +- 36 files changed, 368 insertions(+), 315 deletions(-) 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') From db251f9541eddbbc10f0f0e5bd6017eb08f24d40 Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Fri, 31 May 2024 16:29:50 -0400 Subject: [PATCH 05/10] test fixups --- .eslintrc.js | 1 - .../useConfirmCrashRecovery.test.tsx | 30 +++++++++++++++++-- .../IncompatibleModuleTakeover.test.tsx | 4 +-- 3 files changed, 29 insertions(+), 6 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 7819df30d4c..99151bd8b87 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -103,7 +103,6 @@ module.exports = { '@typescript-eslint/no-unnecessary-boolean-literal-compare': 'warn', '@typescript-eslint/no-unsafe-argument': 'warn', '@typescript-eslint/consistent-indexed-object-style': 'warn', - '@typescript-eslint/no-confusing-void-expression': 'warn', '@typescript-eslint/ban-types': 'warn', '@typescript-eslint/non-nullable-type-assertion-style': 'warn', '@typescript-eslint/await-thenable': 'warn', diff --git a/app/src/organisms/CalibrationPanels/__tests__/useConfirmCrashRecovery.test.tsx b/app/src/organisms/CalibrationPanels/__tests__/useConfirmCrashRecovery.test.tsx index 3aa917aedeb..6f91202bd04 100644 --- a/app/src/organisms/CalibrationPanels/__tests__/useConfirmCrashRecovery.test.tsx +++ b/app/src/organisms/CalibrationPanels/__tests__/useConfirmCrashRecovery.test.tsx @@ -72,10 +72,34 @@ describe('useConfirmCrashRecovery', () => { fireEvent.click(screen.getByRole('button', { name: 'Start over' })) // the confirmation should now not be null expect(result.current[1]).not.toBeNull() + }) + + it('renders the modal with the right props when you click back', () => { + const { result } = renderHook( + () => + useConfirmCrashRecovery({ + ...mockProps, + sendCommands: mockSendCommands, + }), + { + wrapper: ({ children }) => ( + {children} + ), + } + ) + // the explicitly rerender to incorporate newly non-null confirmation - renderWithProviders(
{result.current[1] ?? result.current[0]}
, { - i18nInstance: i18n, - }) + const [{ rerender }] = renderWithProviders( +
{result.current[1] ?? result.current[0]}
, + { + i18nInstance: i18n, + } + ) + + // click the link to launch the modal + fireEvent.click(screen.getByRole('button', { name: 'Start over' })) + + rerender(
{result.current[1] ?? result.current[0]}
) // click the "back" link in the confirmation const closeConfirmationButton = screen.getByRole('button', { diff --git a/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx b/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx index 1db12c649f1..017f9f25c48 100644 --- a/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx +++ b/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx @@ -66,8 +66,8 @@ describe('IncompatibleModuleTakeover', () => { ;['desktop', 'odd'].forEach(target => { 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.queryByTestId(TOP_PORTAL_ID)).toBeEmptyDOMElement() + expect(screen.queryByTestId(MODAL_PORTAL_ID)).toBeEmptyDOMElement() expect(screen.queryByText(/TEST ELEMENT/)).toBeNull() }) }) From 99c8d1f64d935f8f6677f4de270216104c792e5c Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Fri, 31 May 2024 16:54:11 -0400 Subject: [PATCH 06/10] mostly auto fix void expression from arrow function --- app-shell-odd/src/config/index.ts | 8 +- app-shell-odd/src/discovery.ts | 53 +++++---- app-shell-odd/src/http.ts | 4 +- app-shell-odd/src/main.ts | 4 +- app-shell-odd/src/notifications/connect.ts | 18 ++- app-shell-odd/src/notifications/index.ts | 4 +- app-shell-odd/src/notifications/subscribe.ts | 4 +- .../src/notifications/unsubscribe.ts | 3 +- app-shell-odd/src/restart.ts | 12 +- app-shell-odd/src/system-update/index.ts | 42 ++++--- .../src/system-update/release-files.ts | 4 +- app-shell-odd/src/systemd.ts | 26 ++-- app-shell-odd/src/usb.ts | 8 +- app-shell/src/discovery.ts | 14 ++- app-shell/src/http.ts | 5 +- app-shell/src/labware/index.ts | 7 +- app-shell/src/main.ts | 4 +- app-shell/src/notifications/connect.ts | 22 +++- app-shell/src/notifications/subscribe.ts | 4 +- app-shell/src/notifications/unsubscribe.ts | 3 +- app-shell/src/robot-update/index.ts | 15 +-- app-shell/src/system-info/index.ts | 4 +- .../src/system-info/network-interfaces.ts | 6 +- app-shell/src/system-info/usb-devices.ts | 4 +- app-shell/src/update.ts | 28 +++-- app/src/App/hooks.ts | 8 +- app/src/App/index.tsx | 4 +- .../DesignTokens/Colors/Colors.stories.tsx | 4 +- app/src/atoms/Banner/Banner.stories.tsx | 4 +- app/src/atoms/Banner/index.tsx | 4 +- app/src/atoms/InputField/index.tsx | 4 +- .../atoms/ProgressBar/ProgressBar.stories.tsx | 11 +- app/src/atoms/Snackbar/Snackbar.stories.tsx | 7 +- app/src/atoms/Toast/ODDToast.stories.tsx | 7 +- app/src/atoms/Toast/Toast.stories.tsx | 9 +- app/src/atoms/Toast/index.tsx | 13 +- app/src/atoms/Tooltip/Tooltip.stories.tsx | 4 +- app/src/atoms/buttons/BackButton.tsx | 8 +- app/src/logger.ts | 28 +++-- .../BackgroundOverlay.stories.tsx | 12 +- app/src/molecules/CardButton/index.tsx | 4 +- .../molecules/CollapsibleSection/index.tsx | 8 +- .../FileUpload/FileUpload.stories.tsx | 4 +- .../GenericWizardTile.stories.tsx | 8 +- .../InstrumentCard/InstrumentCard.stories.tsx | 24 +++- .../PipetteSelect/PipetteSelect.stories.tsx | 3 +- app/src/molecules/UpdateBanner/index.tsx | 8 +- app/src/molecules/UploadInput/index.tsx | 8 +- app/src/organisms/Alerts/AlertsModal.tsx | 10 +- .../organisms/ApplyHistoricOffsets/index.tsx | 8 +- app/src/organisms/CalibrateDeck/index.tsx | 8 +- .../CalibratePipetteOffset/index.tsx | 8 +- .../AskForCalibrationBlockModal.tsx | 4 +- .../organisms/CalibrateTipLength/index.tsx | 8 +- .../CalibrationPanels/Introduction/index.tsx | 10 +- .../useConfirmCrashRecovery.tsx | 4 +- .../organisms/CalibrationStatusCard/index.tsx | 4 +- .../organisms/CalibrationTaskList/index.tsx | 12 +- .../ChangePipette/ConfirmPipette.tsx | 4 +- .../organisms/ChangePipette/Instructions.tsx | 8 +- app/src/organisms/ChangePipette/index.tsx | 43 +++++-- .../ChooseProtocolSlideout/index.tsx | 30 +++-- .../organisms/ChooseRobotSlideout/index.tsx | 15 ++- .../index.tsx | 11 +- .../useCreateRunFromProtocol.ts | 8 +- .../ConfigurePipette/ConfigErrorBanner.tsx | 4 +- .../AddFixtureModal.tsx | 6 +- .../DeckConfigurationDiscardChangesModal.tsx | 4 +- .../DeckFixtureSetupInstructionsModal.tsx | 12 +- .../DeviceDetailsDeckConfiguration/index.tsx | 4 +- .../ConnectionTroubleshootingModal.tsx | 4 +- .../Devices/HistoricalProtocolRun.tsx | 12 +- .../HistoricalProtocolRunOverflowMenu.tsx | 7 +- .../Devices/PipetteCard/FlexPipetteCard.tsx | 25 +++- .../PipetteCard/PipetteOverflowMenu.tsx | 25 +++- .../PipetteRecalibrationWarning.tsx | 4 +- .../organisms/Devices/PipetteCard/index.tsx | 24 +++- .../ProtocolRun/ProtocolDropTipBanner.tsx | 4 +- .../Devices/ProtocolRun/ProtocolRunHeader.tsx | 19 ++- .../Devices/ProtocolRun/ProtocolRunSetup.tsx | 18 ++- .../Devices/ProtocolRun/RunFailedModal.tsx | 4 +- .../Devices/ProtocolRun/RunTimer.tsx | 8 +- .../SetupFlexPipetteCalibrationItem.tsx | 12 +- .../SetupGripperCalibrationItem.tsx | 4 +- .../SetupLabware/LabwareListItem.tsx | 8 +- .../ProtocolRun/SetupLabware/index.tsx | 6 +- .../SetupLiquids/LiquidDetailCard.tsx | 4 +- .../SetupLiquids/SetupLiquidsList.tsx | 4 +- .../SetupLiquids/SetupLiquidsMap.tsx | 35 ++++-- .../OT2MultipleModulesHelp.tsx | 4 +- .../SetupModuleAndDeck/SetupFixtureList.tsx | 16 ++- .../SetupModuleAndDeck/SetupModulesList.tsx | 20 +++- .../UnMatchedModuleWarning.tsx | 4 +- .../SetupTipLengthCalibrationButton.tsx | 8 +- app/src/organisms/Devices/RobotCard.tsx | 4 +- .../Devices/RobotOverviewOverflowMenu.tsx | 16 ++- .../DeviceResetSlideout.tsx | 16 +-- .../FactoryModeSlideout.tsx | 4 +- .../AdvancedTab/RobotServerVersion.tsx | 4 +- .../RobotSettings/RobotSettingsAdvanced.tsx | 20 +++- .../RobotSettings/RobotSettingsNetworking.tsx | 8 +- .../RobotUpdateProgressModal.tsx | 8 +- .../UpdateBuildroot/UpdateRobotModal.tsx | 4 +- .../UpdateBuildroot/ViewUpdateModal.tsx | 10 +- .../organisms/Devices/RobotStatusHeader.tsx | 8 +- .../Devices/hooks/useCalibrationTaskList.ts | 36 ++++-- .../DropTipWizard/BeforeBeginning.tsx | 8 +- .../DropTipWizard/ChooseLocation.tsx | 20 +++- .../organisms/DropTipWizard/JogToPosition.tsx | 14 ++- app/src/organisms/DropTipWizard/index.tsx | 24 ++-- app/src/organisms/DropTipWizard/utils.tsx | 4 +- .../RecoveryOptions/CancelRun.tsx | 4 +- .../RecoveryOptions/RetryStep.tsx | 4 +- .../RecoveryOptions/SelectRecoveryOption.tsx | 4 +- .../utils/useRouteUpdateActions.ts | 8 +- .../FirmwareUpdateModal/UpdateNeededModal.tsx | 4 +- app/src/organisms/GripperCard/index.tsx | 12 +- .../GripperWizardFlows/MountGripper.tsx | 6 +- .../organisms/GripperWizardFlows/MovePin.tsx | 16 ++- .../GripperWizardFlows/UnmountGripper.tsx | 4 +- .../organisms/GripperWizardFlows/index.tsx | 8 +- .../AttachedInstrumentMountItem.tsx | 4 +- .../ProtocolInstrumentMountItem.tsx | 8 +- .../PauseInterventionContent.tsx | 8 +- .../LabwareCard/CustomLabwareOverflowMenu.tsx | 4 +- app/src/organisms/LabwareDetails/Gallery.tsx | 4 +- .../StyledComponents/ExpandingTitle.tsx | 3 +- app/src/organisms/LabwareDetails/index.tsx | 4 +- app/src/organisms/LabwareOffsetTabs/index.tsx | 12 +- .../LabwarePositionCheck/AttachProbe.tsx | 8 +- .../LabwarePositionCheck/DetachProbe.tsx | 8 +- .../IntroScreen/index.tsx | 12 +- .../LabwarePositionCheck/PickUpTip.tsx | 8 +- .../LabwarePositionCheck/ResultsSummary.tsx | 8 +- .../TerseOffsetTable.stories.tsx | 4 +- .../ModuleCard/AboutModuleSlideout.tsx | 4 +- .../ModuleCard/ConfirmAttachmentModal.tsx | 4 +- app/src/organisms/ModuleCard/ErrorInfo.tsx | 12 +- .../ModuleCard/HeaterShakerSlideout.tsx | 4 +- .../ModuleCard/MagneticModuleSlideout.tsx | 4 +- .../ModuleCard/TemperatureModuleSlideout.tsx | 4 +- .../ModuleCard/TestShakeSlideout.tsx | 12 +- .../ModuleCard/ThermocyclerModuleSlideout.tsx | 4 +- app/src/organisms/ModuleCard/hooks.tsx | 56 ++++++--- app/src/organisms/ModuleCard/index.tsx | 28 +++-- .../organisms/Navigation/NavigationMenu.tsx | 4 +- .../RestartRobotConfirmationModal.tsx | 4 +- .../NetworkSettings/DisplayWifiList.tsx | 8 +- .../SelectAuthenticationType.tsx | 4 +- .../organisms/NetworkSettings/SetWifiSsid.tsx | 8 +- .../NetworkSettings/WifiConnectionDetails.tsx | 8 +- .../RobotDashboard/RecentRunProtocolCard.tsx | 3 +- .../RunningProtocol/ConfirmCancelRunModal.tsx | 8 +- .../RunningProtocol/RunFailedModal.tsx | 4 +- .../PipetteWizardFlows/ChoosePipette.tsx | 32 +++-- .../PipetteWizardFlows/DetachPipette.tsx | 4 +- .../PipetteWizardFlows/ProbeNotAttached.tsx | 6 +- .../organisms/PipetteWizardFlows/Results.tsx | 4 +- .../organisms/PipetteWizardFlows/index.tsx | 8 +- .../ProtocolLabwareDetails.tsx | 4 +- app/src/organisms/ProtocolDetails/index.tsx | 32 +++-- .../ProtocolSetupDeckConfiguration/index.tsx | 4 +- .../ProtocolSetupInstruments/index.tsx | 4 +- .../LabwareMapViewModal.tsx | 9 +- .../organisms/ProtocolSetupLabware/index.tsx | 14 ++- .../ProtocolSetupLiquids/LiquidDetails.tsx | 8 +- .../organisms/ProtocolSetupLiquids/index.tsx | 8 +- .../FixtureTable.tsx | 8 +- .../ModulesAndDeckMapViewModal.tsx | 4 +- .../SetupInstructionsModal.tsx | 4 +- .../ProtocolSetupModulesAndDeck/index.tsx | 14 ++- .../AnalysisFailedModal.tsx | 4 +- .../ProtocolSetupParameters/ChooseEnum.tsx | 8 +- .../ProtocolSetupParameters/ChooseNumber.tsx | 8 +- .../ViewOnlyParameters.tsx | 4 +- .../ProtocolSetupParameters/index.tsx | 32 +++-- .../ProtocolUpload/hooks/useCloneRun.ts | 4 +- .../hooks/useCloseCurrentRun.ts | 4 +- .../ProtocolsLanding/ProtocolCard.tsx | 4 +- .../ProtocolsLanding/ProtocolList.tsx | 62 ++++++++-- .../ProtocolsLanding/ProtocolOverflowMenu.tsx | 4 +- .../ProtocolsLanding/ProtocolUploadInput.tsx | 4 +- .../QuickTransferFlow/SelectDestLabware.tsx | 4 +- .../QuickTransferFlow/SelectSourceLabware.tsx | 4 +- .../QuickTransferFlow/SummaryAndSettings.tsx | 16 +-- .../QuickTransferFlow/VolumeEntry.tsx | 4 +- app/src/organisms/QuickTransferFlow/index.tsx | 16 ++- .../ModuleCalibrationOverflowMenu.tsx | 4 +- .../CalibrationHealthCheck.tsx | 4 +- .../RobotSettingsGripperCalibration.tsx | 8 +- .../RobotSettingsCalibration/index.tsx | 4 +- .../RobotSettingsDashboard/DeviceReset.tsx | 8 +- .../NetworkSettings/NetworkDetailsModal.tsx | 4 +- .../RobotSettingsJoinOtherNetwork.tsx | 4 +- .../RobotSettingsSelectAuthenticationType.tsx | 4 +- .../RobotSettingsSetWifiCred.tsx | 4 +- .../NetworkSettings/RobotSettingsWifi.tsx | 8 +- .../RobotSettingsWifiConnect.tsx | 12 +- .../NetworkSettings/WifiConnectionDetails.tsx | 4 +- .../NetworkSettings/index.tsx | 18 ++- .../RobotSettingsDashboard/Privacy.tsx | 4 +- .../RobotSettingsDashboard/RobotName.tsx | 6 +- .../RobotSystemVersion.tsx | 8 +- .../RobotSystemVersionModal.tsx | 8 +- .../RobotSettingsDashboard/TextSize.tsx | 12 +- .../TouchScreenSleep.tsx | 4 +- .../TouchscreenBrightness.tsx | 12 +- .../organisms/TakeoverModal/TakeoverModal.tsx | 8 +- .../organisms/TaskList/TaskList.stories.tsx | 112 +++++++++++++----- app/src/organisms/TaskList/index.tsx | 10 +- app/src/organisms/UpdateAppModal/index.tsx | 8 +- app/src/organisms/UpdateRobotBanner/index.tsx | 8 +- app/src/pages/AppSettings/GeneralSettings.tsx | 34 ++++-- .../DisplayConnectionStatus.tsx | 8 +- .../pages/ConnectViaEthernet/TitleHeader.tsx | 4 +- app/src/pages/ConnectViaUSB/index.tsx | 8 +- .../pages/ConnectViaWifi/JoinOtherNetwork.tsx | 4 +- .../SelectAuthenticationType.tsx | 4 +- app/src/pages/ConnectViaWifi/SetWifiCred.tsx | 4 +- .../ConnectViaWifi/WifiConnectStatus.tsx | 8 +- app/src/pages/ConnectViaWifi/index.tsx | 4 +- app/src/pages/DeckConfiguration/index.tsx | 4 +- .../hooks/useDashboardCalibrateTipLength.tsx | 4 +- .../DevicesLanding/NewRobotSetupHelp.tsx | 12 +- .../Devices/ProtocolRunDetails/index.tsx | 4 +- app/src/pages/EmergencyStop/index.tsx | 4 +- .../InstrumentDetailOverflowMenu.tsx | 4 +- app/src/pages/InstrumentDetail/index.tsx | 4 +- .../PipetteRecalibrationODDWarning.tsx | 6 +- app/src/pages/Labware/index.tsx | 26 ++-- app/src/pages/NameRobot/index.tsx | 4 +- .../DeleteProtocolConfirmationModal.tsx | 4 +- .../ProtocolDashboard/LongPressModal.tsx | 4 +- .../ProtocolDashboard/PinnedProtocol.tsx | 4 +- .../pages/ProtocolDashboard/ProtocolCard.tsx | 16 ++- app/src/pages/ProtocolDetails/index.tsx | 40 +++++-- .../ProtocolSetup/ConfirmAttachedModal.tsx | 4 +- app/src/pages/ProtocolSetup/index.tsx | 28 +++-- app/src/pages/RobotDashboard/WelcomeModal.tsx | 4 +- .../RobotSettingsList.tsx | 32 +++-- .../pages/RobotSettingsDashboard/index.tsx | 12 +- app/src/pages/RunSummary/index.tsx | 8 +- .../UpdateRobotDuringOnboarding.tsx | 10 +- app/src/pages/Welcome/index.tsx | 4 +- app/src/redux/analytics/epic.ts | 4 +- app/src/redux/analytics/hooks.ts | 2 +- app/src/redux/analytics/mixpanel.ts | 2 +- app/src/redux/shell/epic.ts | 4 +- app/src/redux/shell/remote.ts | 4 +- .../resources/deck_configuration/hooks.tsx | 4 +- components/src/forms/InputField.stories.tsx | 4 +- components/src/forms/RadioGroup.stories.tsx | 4 +- components/src/forms/SelectField.tsx | 4 +- .../DeckConfigurator.stories.tsx | 16 ++- .../DeckConfigurator/EmptyConfigFixture.tsx | 4 +- .../DeckConfigurator/HeaterShakerFixture.tsx | 4 +- .../DeckConfigurator/MagneticBlockFixture.tsx | 4 +- .../StagingAreaConfigFixture.tsx | 4 +- .../TemperatureModuleFixture.tsx | 4 +- .../DeckConfigurator/ThermocyclerFixture.tsx | 4 +- .../TrashBinConfigFixture.tsx | 4 +- .../WasteChuteConfigFixture.tsx | 4 +- components/src/hooks/useDrag.ts | 8 +- components/src/hooks/useIdle.ts | 8 +- components/src/hooks/useInterval.ts | 4 +- components/src/hooks/useLongPress.ts | 8 +- .../src/hooks/useSelectDeckLocation/index.tsx | 57 +++++---- components/src/hooks/useSwipe.ts | 10 +- components/src/hooks/useTimeout.ts | 4 +- .../src/instrument/PipetteSelect.stories.tsx | 3 +- .../src/interaction-enhancers/useHover.ts | 19 ++- components/src/molecules/RoundTab.stories.tsx | 16 ++- components/src/tooltips/HoverTooltip.tsx | 14 +-- components/src/tooltips/usePopper.ts | 4 +- discovery-client/src/cli.ts | 4 +- .../organisms/CreateLabwareSandbox/index.tsx | 4 +- .../src/analytics/AnalyticsOptInModal.tsx | 14 ++- .../src/components/labware-ui/Gallery.tsx | 7 +- .../src/components/labware-ui/LoadName.tsx | 11 +- .../src/components/ui/TableTitle.tsx | 4 +- .../website-navigation/MobileList.tsx | 27 +++-- .../components/website-navigation/NavList.tsx | 27 +++-- .../components/ImportLabware.tsx | 4 +- labware-library/src/labware-creator/index.tsx | 12 +- .../BatchEditForm/makeBatchEditFieldProps.ts | 4 +- .../src/components/ColorPicker/index.tsx | 8 +- .../src/components/DeckSetup/index.tsx | 7 +- protocol-designer/src/components/FilePage.tsx | 12 +- .../components/FileSidebar/FileSidebar.tsx | 8 +- .../src/components/IngredientsList/index.tsx | 16 ++- .../LabwareSelectionModal/LabwareItem.tsx | 4 +- .../LabwareSelectionModal.tsx | 32 +++-- .../src/components/LiquidPlacementModal.tsx | 4 +- .../components/LiquidsPage/LiquidEditForm.tsx | 4 +- .../src/components/LiquidsSidebar/index.tsx | 4 +- .../src/components/OffDeckLabwareButton.tsx | 10 +- .../FeatureFlagCard/FeatureFlagCard.tsx | 4 +- .../src/components/StepCreationButton.tsx | 12 +- .../fields/BlowoutZOffsetField.tsx | 12 +- .../fields/ChangeTipField/index.tsx | 4 +- .../StepEditForm/fields/CheckboxRowField.tsx | 4 +- .../fields/DisposalVolumeField.tsx | 8 +- .../fields/PathField/PathField.tsx | 4 +- .../StepEditForm/fields/TextField.tsx | 4 +- .../fields/TipPositionField/index.tsx | 12 +- .../StepEditForm/fields/ToggleRowField.tsx | 4 +- .../components/StepEditForm/forms/MixForm.tsx | 3 +- .../forms/MoveLiquidForm/index.tsx | 4 +- .../StepEditForm/forms/PauseForm.tsx | 4 +- .../modals/CreateFileWizard/MetadataTile.tsx | 13 +- .../CreateFileWizard/ModulesAndOtherTile.tsx | 16 ++- .../CreateFileWizard/PipetteTipsTile.tsx | 16 ++- .../CreateFileWizard/PipetteTypeTile.tsx | 14 ++- .../modals/CreateFileWizard/RobotTypeTile.tsx | 6 +- .../CreateFileWizard/StagingAreaTile.tsx | 6 +- .../modals/CreateFileWizard/index.tsx | 4 +- .../EditMultipleModulesModal.tsx | 8 +- .../modals/FilePipettesModal/index.tsx | 4 +- .../components/modules/AdditionalItemsRow.tsx | 10 +- .../components/modules/MultipleModulesRow.tsx | 6 +- .../components/modules/StagingAreasModal.tsx | 8 +- .../components/modules/StagingAreasRow.tsx | 12 +- .../src/components/steplist/ContextMenu.tsx | 4 +- .../steplist/MultiChannelSubstep.tsx | 8 +- .../src/components/steplist/StepItem.tsx | 4 +- .../src/components/steplist/SubstepRow.tsx | 8 +- .../steplist/test/mergeSubstepsFns.test.ts | 8 +- .../useCreateMaintenanceCommandMutation.ts | 4 +- ...MaintenanceRunLabwareDefinitionMutation.ts | 4 +- .../useDeleteMaintenanceRunMutation.ts | 4 +- .../useUpdatePipetteSettingsMutation.ts | 4 +- .../src/runs/useCreateCommandMutation.ts | 8 +- .../useCreateLabwareDefinitionMutation.ts | 8 +- .../runs/useCreateLabwareOffsetMutation.ts | 8 +- .../src/runs/useCreateLiveCommandMutation.ts | 8 +- .../src/runs/useDeleteRunMutation.ts | 8 +- .../src/runs/useDismissCurrentRunMutation.ts | 8 +- .../src/runs/useRunActionMutations.ts | 24 ++-- .../subsystems/useUpdateSubsystemMutation.ts | 4 +- usb-bridge/node-client/src/usb-agent.ts | 11 +- 340 files changed, 2339 insertions(+), 975 deletions(-) diff --git a/app-shell-odd/src/config/index.ts b/app-shell-odd/src/config/index.ts index 7c8d3f1ce8a..99021414f62 100644 --- a/app-shell-odd/src/config/index.ts +++ b/app-shell-odd/src/config/index.ts @@ -83,23 +83,23 @@ export function registerConfig(dispatch: Dispatch): (action: Action) => void { ) if (path === 'devtools') { - systemd.setRemoteDevToolsEnabled(Boolean(nextValue)).catch(err => + systemd.setRemoteDevToolsEnabled(Boolean(nextValue)).catch(err => { log().debug('Something wrong when setting remote dev tools', { err, }) - ) + }) } // Note (kj:08/03/2023) change touchscreen brightness if (path === 'onDeviceDisplaySettings.brightness') { - systemd.updateBrightness(String(nextValue)).catch(err => + systemd.updateBrightness(String(nextValue)).catch(err => { log().debug( 'Something wrong when updating the touchscreen brightness', { err, } ) - ) + }) } log().debug('Updating config', { path, nextValue }) diff --git a/app-shell-odd/src/discovery.ts b/app-shell-odd/src/discovery.ts index 20aa74eebca..97d9c3809f0 100644 --- a/app-shell-odd/src/discovery.ts +++ b/app-shell-odd/src/discovery.ts @@ -63,17 +63,17 @@ const migrateLegacyServices = ( const { ip, port } = service return ip != null ? [ - { - ip, - port, - seen: false, - healthStatus: null, - serverHealthStatus: null, - healthError: null, - serverHealthError: null, - advertisedModel: null, - }, - ] + { + ip, + port, + seen: false, + healthStatus: null, + serverHealthStatus: null, + healthError: null, + serverHealthError: null, + advertisedModel: null, + }, + ] : [] }) @@ -146,20 +146,25 @@ export function registerDiscovery( switch (action.type) { case UI_INITIALIZED: - case DISCOVERY_START: + case DISCOVERY_START: { handleRobots() - return client.start({ healthPollInterval: FAST_POLL_INTERVAL_MS }) - - case DISCOVERY_FINISH: - return client.start({ healthPollInterval: SLOW_POLL_INTERVAL_MS }) - - case DISCOVERY_REMOVE: - return client.removeRobot( - (action.payload as { robotName: string }).robotName - ) - - case CLEAR_CACHE: - return clearCache() + client.start({ healthPollInterval: FAST_POLL_INTERVAL_MS }) + return + } + + case DISCOVERY_FINISH: { + client.start({ healthPollInterval: SLOW_POLL_INTERVAL_MS }) + return + } + + case DISCOVERY_REMOVE: { + client.removeRobot((action.payload as { robotName: string }).robotName) + return + } + + case CLEAR_CACHE: { + clearCache() + } } } diff --git a/app-shell-odd/src/http.ts b/app-shell-odd/src/http.ts index 6a0371fa282..6392340fbe7 100644 --- a/app-shell-odd/src/http.ts +++ b/app-shell-odd/src/http.ts @@ -78,7 +78,9 @@ export function fetchToFile( // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions if (error) { // if we error out, delete the temp dir to clean up - return remove(destination).then(() => reject(error)) + return remove(destination).then(() => { + reject(error) + }) } resolve(destination) }) diff --git a/app-shell-odd/src/main.ts b/app-shell-odd/src/main.ts index eaea1768078..6a9067f9075 100644 --- a/app-shell-odd/src/main.ts +++ b/app-shell-odd/src/main.ts @@ -120,7 +120,9 @@ function startUp(): void { ipcMain.on('dispatch', (_, action) => { log.debug('Received action via IPC from renderer', { action }) - actionHandlers.forEach(handler => handler(action)) + actionHandlers.forEach(handler => { + handler(action) + }) }) log.silly('Global references', { mainWindow, rendererLogger }) diff --git a/app-shell-odd/src/notifications/connect.ts b/app-shell-odd/src/notifications/connect.ts index 67df09de466..054f537c58c 100644 --- a/app-shell-odd/src/notifications/connect.ts +++ b/app-shell-odd/src/notifications/connect.ts @@ -34,17 +34,23 @@ export function connectAsync(brokerURL: string): Promise { } = { connect: () => { removePromiseListeners() - return resolve(client) + resolve(client) }, // A connection error event will close the connection without a retry. error: (error: Error | string) => { removePromiseListeners() const clientEndPromise = new Promise((resolve, reject) => - client.end(true, {}, () => resolve(error)) + client.end(true, {}, () => { + resolve(error) + }) ) - return clientEndPromise.then(() => reject(error)) + return clientEndPromise.then(() => { + reject(error) + }) + }, + end: () => { + promiseListeners.error(`Couldn't connect to ${brokerURL}`) }, - end: () => promiseListeners.error(`Couldn't connect to ${brokerURL}`), } function removePromiseListeners(): void { @@ -116,6 +122,8 @@ export function establishListeners(): void { export function closeConnectionForcefully(): Promise { const { client } = connectionStore return new Promise((resolve, reject) => - client?.end(true, {}, () => resolve()) + client?.end(true, {}, () => { + resolve() + }) ) } diff --git a/app-shell-odd/src/notifications/index.ts b/app-shell-odd/src/notifications/index.ts index cce5758de72..076159e77f1 100644 --- a/app-shell-odd/src/notifications/index.ts +++ b/app-shell-odd/src/notifications/index.ts @@ -39,7 +39,9 @@ export function establishBrokerConnection(): Promise { notifyLog.debug(`Successfully connected to ${robotName} on ${ip}`) void connectionStore .setConnected(client) - .then(() => establishListeners()) + .then(() => { + establishListeners() + }) .catch((error: Error) => notifyLog.debug(error.message)) }) .catch((error: Error) => { diff --git a/app-shell-odd/src/notifications/subscribe.ts b/app-shell-odd/src/notifications/subscribe.ts index 7f57d6d15a5..db2db1195b6 100644 --- a/app-shell-odd/src/notifications/subscribe.ts +++ b/app-shell-odd/src/notifications/subscribe.ts @@ -51,7 +51,9 @@ export function subscribe(topic: NotifyTopic): Promise { // The client is either already subscribed or the subscription is currently pending. else { void waitUntilActiveOrErrored('subscription', topic) - .then(() => sendDeserializedRefetch(topic)) + .then(() => { + sendDeserializedRefetch(topic) + }) .catch((error: Error) => { notifyLog.debug(error.message) sendDeserializedGenericError(topic) diff --git a/app-shell-odd/src/notifications/unsubscribe.ts b/app-shell-odd/src/notifications/unsubscribe.ts index da9d0935ed2..3d45481a0a9 100644 --- a/app-shell-odd/src/notifications/unsubscribe.ts +++ b/app-shell-odd/src/notifications/unsubscribe.ts @@ -11,7 +11,8 @@ export function unsubscribe(topic: NotifyTopic): Promise { .then(() => { const { client } = connectionStore if (client == null) { - return reject(new Error('Expected hostData, received null.')) + reject(new Error('Expected hostData, received null.')) + return } client.unsubscribe(topic, {}, (error, result) => { diff --git a/app-shell-odd/src/restart.ts b/app-shell-odd/src/restart.ts index d9bbf76836e..3ff0b218582 100644 --- a/app-shell-odd/src/restart.ts +++ b/app-shell-odd/src/restart.ts @@ -12,15 +12,13 @@ export function registerAppRestart(): (action: Action) => unknown { case APP_RESTART: systemd .sendStatus(`restarting app: ${action.payload.message}`) - .catch(err => + .catch(err => { log().debug('Something wrong when sending a message', { err }) - ) + }) console.log(`restarting app: ${action.payload.message}`) - systemd - .restartApp() - .catch(err => - log().debug('Something wrong when resettings the app', { err }) - ) + systemd.restartApp().catch(err => { + log().debug('Something wrong when resettings the app', { err }) + }) break } } diff --git a/app-shell-odd/src/system-update/index.ts b/app-shell-odd/src/system-update/index.ts index 9b5286c212b..99aee5b92bf 100644 --- a/app-shell-odd/src/system-update/index.ts +++ b/app-shell-odd/src/system-update/index.ts @@ -114,10 +114,11 @@ export function registerRobotSystemUpdate(dispatch: Dispatch): Dispatch { const systemFile = massStorageUpdateSet?.system ?? systemUpdateSet?.system if (systemFile == null) { - return dispatch({ + dispatch({ type: 'robotUpdate:UNEXPECTED_ERROR', payload: { message: 'System update file not downloaded' }, }) + return } // eslint-disable-next-line @typescript-eslint/no-floating-promises readFileInfoAndDispatch(dispatch, systemFile) @@ -157,7 +158,7 @@ export function registerRobotSystemUpdate(dispatch: Dispatch): Dispatch { } const getVersionFromOpenedZipIfValid = (zip: StreamZip): Promise => - new Promise((resolve, reject) => + new Promise((resolve, reject) => { Object.values(zip.entries()).forEach(entry => { if ( entry.isFile && @@ -182,7 +183,7 @@ const getVersionFromOpenedZipIfValid = (zip: StreamZip): Promise => } } }) - ) + }) interface FileDetails { path: string @@ -226,8 +227,8 @@ export const getLatestMassStorageUpdateFiles = ( path.endsWith('.zip') ? getVersionFromZipIfValid(path).catch(() => null) : new Promise(resolve => { - resolve(null) - }) + resolve(null) + }) ) ).then(values => { const update = values.reduce( @@ -237,10 +238,10 @@ export const getLatestMassStorageUpdateFiles = ( ? prev : current : current === null - ? prev - : Semver.gt(current.version, prev.version) - ? current - : prev, + ? prev + : Semver.gt(current.version, prev.version) + ? current + : prev, null ) if (update === null) { @@ -323,12 +324,13 @@ export function getLatestSystemUpdateFiles( return cacheUpdateSet(filepaths) }) .then( - updateInfo => + updateInfo => { massStorageUpdateSet === null && - dispatchUpdateInfo({ force: false, ...updateInfo }, dispatch) + dispatchUpdateInfo({ force: false, ...updateInfo }, dispatch) + } ) .catch((error: Error) => { - return dispatch({ + dispatch({ type: 'robotUpdate:DOWNLOAD_ERROR', payload: { error: error.message, target: 'flex' }, }) @@ -347,16 +349,20 @@ export function getCachedSystemUpdateFiles( ): Promise { if (systemUpdateSet) { return getInfoFromUpdateSet(systemUpdateSet) - .then(updateInfo => + .then(updateInfo => { dispatchUpdateInfo({ force: false, ...updateInfo }, dispatch) - ) - .catch(err => console.log(`Could not get info from update set: ${err}`)) + }) + .catch(err => { + console.log(`Could not get info from update set: ${err}`) + }) } else { dispatchUpdateInfo( { version: null, releaseNotes: null, force: false }, dispatch ) - return new Promise(resolve => resolve('no files')) + return new Promise(resolve => { + resolve('no files') + }) } } @@ -366,7 +372,9 @@ function getInfoFromUpdateSet( const version = getLatestVersion() const releaseNotesContentPromise = filepaths.releaseNotes ? readFile(filepaths.releaseNotes, 'utf8') - : new Promise(resolve => resolve(null)) + : new Promise(resolve => { + resolve(null) + }) return releaseNotesContentPromise .then(releaseNotes => ({ version: version, diff --git a/app-shell-odd/src/system-update/release-files.ts b/app-shell-odd/src/system-update/release-files.ts index d9e9903b34e..6ea57648d05 100644 --- a/app-shell-odd/src/system-update/release-files.ts +++ b/app-shell-odd/src/system-update/release-files.ts @@ -121,7 +121,9 @@ export function readUserFileInfo(systemFile: string): Promise { versionInfo, })) - result.finally(() => zip.close()) + result.finally(() => { + zip.close() + }) return result }) diff --git a/app-shell-odd/src/systemd.ts b/app-shell-odd/src/systemd.ts index 5e6d769d2ad..b42b2d0edb2 100644 --- a/app-shell-odd/src/systemd.ts +++ b/app-shell-odd/src/systemd.ts @@ -54,18 +54,30 @@ const provideExports = (): SystemD => { } } else { return { - ready: () => new Promise(resolve => resolve('fake notify done')), + ready: () => + new Promise(resolve => { + resolve('fake notify done') + }), sendStatus: text => - new Promise(resolve => resolve(`fake status done for ${text}`)), + new Promise(resolve => { + resolve(`fake status done for ${text}`) + }), setRemoteDevToolsEnabled: enabled => - new Promise(resolve => resolve(`dev tools set to ${enabled}`)), + new Promise(resolve => { + resolve(`dev tools set to ${enabled}`) + }), getisRobotServerReady: () => - new Promise(resolve => resolve(true)), - restartApp: () => new Promise(resolve => resolve('')), + new Promise(resolve => { + resolve(true) + }), + restartApp: () => + new Promise(resolve => { + resolve('') + }), updateBrightness: text => - new Promise(resolve => + new Promise(resolve => { resolve(`fake brightness ${text} was set`) - ), + }), } } } diff --git a/app-shell-odd/src/usb.ts b/app-shell-odd/src/usb.ts index ebfd8bb7f42..7f33ccba0b8 100644 --- a/app-shell-odd/src/usb.ts +++ b/app-shell-odd/src/usb.ts @@ -29,7 +29,9 @@ const enumerateMassStorage = (path: string): Promise => ? new Promise(resolve => setTimeout(resolve, MOUNT_ENUMERATION_DELAY_MS) ) - : new Promise(resolve => resolve()) + : new Promise(resolve => { + resolve() + }) ) .then(() => fsPromises.readdir(path, { withFileTypes: true })) .then(entries => @@ -37,9 +39,9 @@ const enumerateMassStorage = (path: string): Promise => entries.map(entry => entry.isDirectory() && !isWeirdDirectoryAndShouldSkip(entry.name) ? enumerateMassStorage(join(path, entry.name)) - : new Promise(resolve => + : new Promise(resolve => { resolve([join(path, entry.name)]) - ) + }) ) ) ) diff --git a/app-shell/src/discovery.ts b/app-shell/src/discovery.ts index f7e90bf0fd9..842538be98d 100644 --- a/app-shell/src/discovery.ts +++ b/app-shell/src/discovery.ts @@ -152,22 +152,24 @@ export function registerDiscovery( case UI_INITIALIZED: case DISCOVERY_START: { handleRobots() - return client.start({ + client.start({ healthPollInterval: FAST_POLL_INTERVAL_MS, }) + return } case DISCOVERY_FINISH: { - return client.start({ + client.start({ healthPollInterval: SLOW_POLL_INTERVAL_MS, }) + return } case DISCOVERY_REMOVE: { - return client.removeRobot( - (action.payload as { robotName: string }).robotName - ) + client.removeRobot((action.payload as { robotName: string }).robotName) + return } case CLEAR_CACHE: { - return clearCache() + clearCache() + return } case USB_HTTP_REQUESTS_START: { const usbHttpAgent = getSerialPortHttpAgent() diff --git a/app-shell/src/http.ts b/app-shell/src/http.ts index 32676d40949..0162de45278 100644 --- a/app-shell/src/http.ts +++ b/app-shell/src/http.ts @@ -75,7 +75,10 @@ export function fetchToFile( // its callbacks when the streams are done pump(inputStream, progressReader, outputStream, error => { // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions - if (error) return reject(error) + if (error) { + reject(error) + return + } resolve(destination) }) }) diff --git a/app-shell/src/labware/index.ts b/app-shell/src/labware/index.ts index e5bc4a30846..2d299941440 100644 --- a/app-shell/src/labware/index.ts +++ b/app-shell/src/labware/index.ts @@ -101,11 +101,14 @@ const copyLabware = ( const dir = getFullConfig().labware.directory if (next.type !== VALID_LABWARE_FILE) { - return dispatch(addCustomLabwareFailure(next)) + dispatch(addCustomLabwareFailure(next)) + return } return Definitions.addLabwareFile(next.filename, dir) .then(() => fetchAndValidateCustomLabware(dispatch, ADD_LABWARE)) - .then(() => dispatch(addNewLabwareName(newFile.filename))) + .then(() => { + dispatch(addNewLabwareName(newFile.filename)) + }) }) } diff --git a/app-shell/src/main.ts b/app-shell/src/main.ts index 1f44b0607b9..21ab2c80117 100644 --- a/app-shell/src/main.ts +++ b/app-shell/src/main.ts @@ -113,7 +113,9 @@ function startUp(): void { ipcMain.on('dispatch', (_, action) => { log.debug('Received action via IPC from renderer', { action }) - actionHandlers.forEach(handler => handler(action)) + actionHandlers.forEach(handler => { + handler(action) + }) }) log.silly('Global references', { mainWindow, rendererLogger }) diff --git a/app-shell/src/notifications/connect.ts b/app-shell/src/notifications/connect.ts index ed46b4aa7b6..b1a8499a87c 100644 --- a/app-shell/src/notifications/connect.ts +++ b/app-shell/src/notifications/connect.ts @@ -90,7 +90,9 @@ export function establishConnections( notifyLog.debug(`Successfully connected to ${robotName} on ${ip}`) void connectionStore .setConnected(robotName, client) - .then(() => establishListeners(client, ip, robotName)) + .then(() => { + establishListeners(client, ip, robotName) + }) .catch((error: Error) => notifyLog.debug(error.message)) }) .catch((error: Error) => { @@ -116,17 +118,23 @@ function connectAsync(brokerURL: string): Promise { } = { connect: () => { removePromiseListeners() - return resolve(client) + resolve(client) }, // A connection error event will close the connection without a retry. error: (error: Error | string) => { removePromiseListeners() const clientEndPromise = new Promise((resolve, reject) => - client.end(true, {}, () => resolve(error)) + client.end(true, {}, () => { + resolve(error) + }) ) - return clientEndPromise.then(() => reject(error)) + return clientEndPromise.then(() => { + reject(error) + }) + }, + end: () => { + promiseListeners.error(`Couldn't connect to ${brokerURL}`) }, - end: () => promiseListeners.error(`Couldn't connect to ${brokerURL}`), } function removePromiseListeners(): void { @@ -212,7 +220,9 @@ export function closeConnectionsForcefullyFor( const client = connectionStore.getClient(ip) return new Promise((resolve, reject) => { if (client != null) { - client.end(true, {}, () => resolve()) + client.end(true, {}, () => { + resolve() + }) } }) }) diff --git a/app-shell/src/notifications/subscribe.ts b/app-shell/src/notifications/subscribe.ts index 0fda7b30d31..06cf9fd5123 100644 --- a/app-shell/src/notifications/subscribe.ts +++ b/app-shell/src/notifications/subscribe.ts @@ -62,7 +62,9 @@ export function subscribe(ip: string, topic: NotifyTopic): Promise { robotName, topic, }) - .then(() => sendDeserializedRefetch(ip, topic)) + .then(() => { + sendDeserializedRefetch(ip, topic) + }) .catch((error: Error) => { notifyLog.debug(error.message) sendDeserializedGenericError(ip, topic) diff --git a/app-shell/src/notifications/unsubscribe.ts b/app-shell/src/notifications/unsubscribe.ts index 8a0f3d032cd..524eacbc3ea 100644 --- a/app-shell/src/notifications/unsubscribe.ts +++ b/app-shell/src/notifications/unsubscribe.ts @@ -11,7 +11,8 @@ export function unsubscribe(ip: string, topic: NotifyTopic): Promise { .then(() => { const client = connectionStore.getClient(ip) if (client == null) { - return reject(new Error('Expected hostData, received null.')) + reject(new Error('Expected hostData, received null.')) + return } client.unsubscribe(topic, {}, (error, result) => { diff --git a/app-shell/src/robot-update/index.ts b/app-shell/src/robot-update/index.ts index c74d1f5b534..6e6d9b03363 100644 --- a/app-shell/src/robot-update/index.ts +++ b/app-shell/src/robot-update/index.ts @@ -97,19 +97,20 @@ export function registerRobotUpdate(dispatch: Dispatch): Dispatch { const { host, path, systemFile } = action.payload if (systemFile == null) { - return dispatch({ + dispatch({ type: 'robotUpdate:UNEXPECTED_ERROR', payload: { message: 'Robot update file missing' }, }) + return } // eslint-disable-next-line @typescript-eslint/no-floating-promises - uploadSystemFile(host, path, systemFile, progress => + uploadSystemFile(host, path, systemFile, progress => { dispatch({ type: 'robotUpdate:FILE_UPLOAD_PROGRESS', payload: progress, }) - ) + }) .then(() => ({ type: 'robotUpdate:FILE_UPLOAD_DONE' as const, payload: host.name, @@ -243,15 +244,15 @@ export function checkForRobotUpdate( ) ) .then(filepaths => cacheUpdateSet(filepaths, target)) - .then(updateInfo => + .then(updateInfo => { dispatch({ type: 'robotUpdate:UPDATE_INFO', payload: updateInfo }) - ) - .catch((error: Error) => + }) + .catch((error: Error) => { dispatch({ type: 'robotUpdate:DOWNLOAD_ERROR', payload: { error: error.message, target: target }, }) - ) + }) .then(() => cleanupReleaseFiles(cacheDirForMachineFiles(target), CURRENT_VERSION) ) diff --git a/app-shell/src/system-info/index.ts b/app-shell/src/system-info/index.ts index 806e4432863..76df120b149 100644 --- a/app-shell/src/system-info/index.ts +++ b/app-shell/src/system-info/index.ts @@ -54,7 +54,9 @@ export function registerSystemInfo( const handleDeviceAdd = (device: UsbDevice): void => { // eslint-disable-next-line @typescript-eslint/no-floating-promises - addDriverVersion(device).then(d => dispatch(usbDeviceAdded(d))) + addDriverVersion(device).then(d => { + dispatch(usbDeviceAdded(d)) + }) } const handleDeviceRemove = (d: UsbDevice): void => { diff --git a/app-shell/src/system-info/network-interfaces.ts b/app-shell/src/system-info/network-interfaces.ts index c18d638eb9f..6107b0a00ac 100644 --- a/app-shell/src/system-info/network-interfaces.ts +++ b/app-shell/src/system-info/network-interfaces.ts @@ -33,7 +33,11 @@ export function createNetworkInterfaceMonitor( const pollId = setInterval(monitorActiveInterfaces, pollInterval) - return { stop: () => clearInterval(pollId) } + return { + stop: () => { + clearInterval(pollId) + }, + } function monitorActiveInterfaces(): void { const nextIfaces = getActiveInterfaces() diff --git a/app-shell/src/system-info/usb-devices.ts b/app-shell/src/system-info/usb-devices.ts index 30ed5a53dc2..660f606fd03 100644 --- a/app-shell/src/system-info/usb-devices.ts +++ b/app-shell/src/system-info/usb-devices.ts @@ -260,9 +260,9 @@ export function createUsbDeviceMonitor( } if (typeof onDeviceAdd === 'function') { usb.on('attach', device => { - upstreamDeviceFromUsbDevice(device).then(devices => + upstreamDeviceFromUsbDevice(device).then(devices => { devices.forEach(onDeviceAdd) - ) + }) }) } diff --git a/app-shell/src/update.ts b/app-shell/src/update.ts index afaac30020b..5742904ae8b 100644 --- a/app-shell/src/update.ts +++ b/app-shell/src/update.ts @@ -20,14 +20,19 @@ export function registerUpdate( return function handleAction(action: Action) { switch (action.type) { case UI_INITIALIZED: - case 'shell:CHECK_UPDATE': - return checkUpdate(dispatch) - - case 'shell:DOWNLOAD_UPDATE': - return downloadUpdate(dispatch) - - case 'shell:APPLY_UPDATE': - return autoUpdater.quitAndInstall() + case 'shell:CHECK_UPDATE': { + checkUpdate(dispatch) + return + } + + case 'shell:DOWNLOAD_UPDATE': { + downloadUpdate(dispatch) + return + } + + case 'shell:APPLY_UPDATE': { + autoUpdater.quitAndInstall() + } } } } @@ -81,9 +86,12 @@ interface DownloadingPayload { } function downloadUpdate(dispatch: Dispatch): void { - const onDownloading = (payload: DownloadingPayload): void => + const onDownloading = (payload: DownloadingPayload): void => { dispatch({ type: 'shell:DOWNLOAD_PERCENTAGE', payload }) - const onDownloaded = (): void => done({}) + } + const onDownloaded = (): void => { + done({}) + } const onError = (error: Error): void => { done({ error: PlainObjectError(error) }) } diff --git a/app/src/App/hooks.ts b/app/src/App/hooks.ts index a7db8ed203f..6519f5dac3a 100644 --- a/app/src/App/hooks.ts +++ b/app/src/App/hooks.ts @@ -103,16 +103,16 @@ export function useProtocolReceiptToast(): void { .then(() => { queryClient .invalidateQueries([host, 'protocols']) - .catch((e: Error) => + .catch((e: Error) => { console.error(`error invalidating protocols query: ${e.message}`) - ) + }) }) .then(() => { createLiveCommand({ command: animationCommand, - }).catch((e: Error) => + }).catch((e: Error) => { console.warn(`cannot run status bar animation: ${e.message}`) - ) + }) }) .catch((e: Error) => { console.error(e) diff --git a/app/src/App/index.tsx b/app/src/App/index.tsx index 38aa5df8e98..a2e97c4983c 100644 --- a/app/src/App/index.tsx +++ b/app/src/App/index.tsx @@ -9,7 +9,9 @@ import { DesktopApp } from './DesktopApp' import { OnDeviceDisplayApp } from './OnDeviceDisplayApp' import { TopPortalRoot } from './portal' -const stopEvent = (event: React.MouseEvent): void => event.preventDefault() +const stopEvent = (event: React.MouseEvent): void => { + event.preventDefault() +} export const App = (): JSX.Element | null => { const hasConfigLoaded = useSelector(getConfig) != null diff --git a/app/src/DesignTokens/Colors/Colors.stories.tsx b/app/src/DesignTokens/Colors/Colors.stories.tsx index 692a7c0887f..b316ad3a8db 100644 --- a/app/src/DesignTokens/Colors/Colors.stories.tsx +++ b/app/src/DesignTokens/Colors/Colors.stories.tsx @@ -74,7 +74,9 @@ const Template: Story = args => { width="20rem" height="6rem" borderRadius={BORDERS.borderRadius8} - onClick={() => handleClick(color[0])} + onClick={() => { + handleClick(color[0]) + }} style={{ cursor: 'pointer' }} border={`2px solid ${COLORS.black90}`} > diff --git a/app/src/atoms/Banner/Banner.stories.tsx b/app/src/atoms/Banner/Banner.stories.tsx index 0f3d6210075..d8b6b648900 100644 --- a/app/src/atoms/Banner/Banner.stories.tsx +++ b/app/src/atoms/Banner/Banner.stories.tsx @@ -31,7 +31,9 @@ export const OverriddenExitIcon: Story = { args: { type: 'informing', children: 'Banner component', - onCloseClick: () => console.log('close'), + onCloseClick: () => { + console.log('close') + }, closeButton: ( {'Exit'} diff --git a/app/src/atoms/Banner/index.tsx b/app/src/atoms/Banner/index.tsx index e7d2008521a..1061dd50ac9 100644 --- a/app/src/atoms/Banner/index.tsx +++ b/app/src/atoms/Banner/index.tsx @@ -115,7 +115,9 @@ export function Banner(props: BannerProps): JSX.Element { justifyContent={JUSTIFY_SPACE_BETWEEN} alignItems={ALIGN_CENTER} padding={padding ?? SPACING.spacing8} - onClick={(e: React.MouseEvent) => e.stopPropagation()} + onClick={(e: React.MouseEvent) => { + e.stopPropagation() + }} data-testid={`Banner_${type}`} {...styleProps} > diff --git a/app/src/atoms/InputField/index.tsx b/app/src/atoms/InputField/index.tsx index 5471c322d96..c253dcb4843 100644 --- a/app/src/atoms/InputField/index.tsx +++ b/app/src/atoms/InputField/index.tsx @@ -287,7 +287,9 @@ export const InputField = React.forwardRef( data-testid={props.id} value={value} placeholder={placeHolder} - onWheel={event => event.currentTarget.blur()} // prevent value change with scrolling + onWheel={event => { + event.currentTarget.blur() + }} // prevent value change with scrolling type={props.type} ref={ref} /> diff --git a/app/src/atoms/ProgressBar/ProgressBar.stories.tsx b/app/src/atoms/ProgressBar/ProgressBar.stories.tsx index c54b546f060..398752a8116 100644 --- a/app/src/atoms/ProgressBar/ProgressBar.stories.tsx +++ b/app/src/atoms/ProgressBar/ProgressBar.stories.tsx @@ -26,7 +26,9 @@ const Template: Story> = args => { setProgress(prevProgress => prevProgress + 5) }, 200) - return () => clearInterval(interval) + return () => { + clearInterval(interval) + } } }) return ( @@ -38,7 +40,12 @@ const Template: Story> = args => { > {'Add 5% to the current progress every 0.2 sec'} - setProgress(0)} width="5rem"> + { + setProgress(0) + }} + width="5rem" + > {'reset'} diff --git a/app/src/atoms/Snackbar/Snackbar.stories.tsx b/app/src/atoms/Snackbar/Snackbar.stories.tsx index db73e22d947..80cb9aaed11 100644 --- a/app/src/atoms/Snackbar/Snackbar.stories.tsx +++ b/app/src/atoms/Snackbar/Snackbar.stories.tsx @@ -49,7 +49,12 @@ const DefaultTemplate: Story> = args => { bottom={SPACING.spacing40} zIndex={1000} > - setIsShowSnackbar(false)} /> + { + setIsShowSnackbar(false) + }} + /> )} diff --git a/app/src/atoms/Toast/ODDToast.stories.tsx b/app/src/atoms/Toast/ODDToast.stories.tsx index 9a0fe8db4e9..e66945c9189 100644 --- a/app/src/atoms/Toast/ODDToast.stories.tsx +++ b/app/src/atoms/Toast/ODDToast.stories.tsx @@ -48,7 +48,12 @@ const Template: Story> = args => { bottom={SPACING.spacing16} zIndex={1000} > - setIsShowToast(false)} /> + { + setIsShowToast(false) + }} + /> )} diff --git a/app/src/atoms/Toast/Toast.stories.tsx b/app/src/atoms/Toast/Toast.stories.tsx index a7e583387a4..d8800d2eff7 100644 --- a/app/src/atoms/Toast/Toast.stories.tsx +++ b/app/src/atoms/Toast/Toast.stories.tsx @@ -37,7 +37,14 @@ const TemplateWithTimeout: Story> = args => { - {isShowToast && setIsShowToast(false)} />} + {isShowToast && ( + { + setIsShowToast(false) + }} + /> + )} ) } diff --git a/app/src/atoms/Toast/index.tsx b/app/src/atoms/Toast/index.tsx index 17cf83bad71..9ac9f3974cf 100644 --- a/app/src/atoms/Toast/index.tsx +++ b/app/src/atoms/Toast/index.tsx @@ -391,7 +391,12 @@ export function Toast(props: ToastProps): JSX.Element { {closeText ? ( - onCloseHandler()}> + { + onCloseHandler() + }} + > ) : null} {!closeText && closeButton ? ( - onCloseHandler()}> + { + onCloseHandler() + }} + > > = args => { } React.useEffect(() => { - const timer = setTimeout(() => setShowToolTip(false), 2000) + const timer = setTimeout(() => { + setShowToolTip(false) + }, 2000) return () => { clearTimeout(timer) } diff --git a/app/src/atoms/buttons/BackButton.tsx b/app/src/atoms/buttons/BackButton.tsx index 6fab6a97d75..1395c03ab8f 100644 --- a/app/src/atoms/buttons/BackButton.tsx +++ b/app/src/atoms/buttons/BackButton.tsx @@ -24,7 +24,13 @@ export function BackButton({ marginBottom="1rem" maxWidth="fit-content" // go back in the history stack if no click handler specified - onClick={onClick != null ? onClick : () => history.goBack()} + onClick={ + onClick != null + ? onClick + : () => { + history.goBack() + } + } > diff --git a/app/src/logger.ts b/app/src/logger.ts index 18409a72012..b12c4fb4f4f 100644 --- a/app/src/logger.ts +++ b/app/src/logger.ts @@ -36,13 +36,27 @@ export function createLogger(filename: string): Logger { const label = `app/${filename}` return { - [ERROR]: (message, meta) => log(ERROR, message, label, meta), - [WARN]: (message, meta) => log(WARN, message, label, meta), - [INFO]: (message, meta) => log(INFO, message, label, meta), - [HTTP]: (message, meta) => log(HTTP, message, label, meta), - [VERBOSE]: (message, meta) => log(VERBOSE, message, label, meta), - [DEBUG]: (message, meta) => log(DEBUG, message, label, meta), - [SILLY]: (message, meta) => log(SILLY, message, label, meta), + [ERROR]: (message, meta) => { + log(ERROR, message, label, meta) + }, + [WARN]: (message, meta) => { + log(WARN, message, label, meta) + }, + [INFO]: (message, meta) => { + log(INFO, message, label, meta) + }, + [HTTP]: (message, meta) => { + log(HTTP, message, label, meta) + }, + [VERBOSE]: (message, meta) => { + log(VERBOSE, message, label, meta) + }, + [DEBUG]: (message, meta) => { + log(DEBUG, message, label, meta) + }, + [SILLY]: (message, meta) => { + log(SILLY, message, label, meta) + }, } } diff --git a/app/src/molecules/BackgroundOverlay/BackgroundOverlay.stories.tsx b/app/src/molecules/BackgroundOverlay/BackgroundOverlay.stories.tsx index b915e6be59b..601257c30b0 100644 --- a/app/src/molecules/BackgroundOverlay/BackgroundOverlay.stories.tsx +++ b/app/src/molecules/BackgroundOverlay/BackgroundOverlay.stories.tsx @@ -21,10 +21,18 @@ const Template: Story< {openOverlay ? ( - setOpenOverlay(false)} /> + { + setOpenOverlay(false) + }} + /> ) : ( - setOpenOverlay(true)}> + { + setOpenOverlay(true) + }} + > Click to open the Background Overlay )} diff --git a/app/src/molecules/CardButton/index.tsx b/app/src/molecules/CardButton/index.tsx index 9d67595eb06..42f38cdb7d4 100644 --- a/app/src/molecules/CardButton/index.tsx +++ b/app/src/molecules/CardButton/index.tsx @@ -80,7 +80,9 @@ export function CardButton(props: CardButtonProps): JSX.Element { return ( history.push(destinationPath)} + onClick={() => { + history.push(destinationPath) + }} width="100%" css={CARD_BUTTON_STYLE} backgroundColor={disabled ? COLORS.grey35 : COLORS.blue35} diff --git a/app/src/molecules/CollapsibleSection/index.tsx b/app/src/molecules/CollapsibleSection/index.tsx index c1417ebdc85..603a329b1cd 100644 --- a/app/src/molecules/CollapsibleSection/index.tsx +++ b/app/src/molecules/CollapsibleSection/index.tsx @@ -38,7 +38,9 @@ export function CollapsibleSection( setIsExpanded(!isExpanded)} + onClick={() => { + setIsExpanded(!isExpanded) + }} css={{ cursor: 'pointer', }} @@ -47,7 +49,9 @@ export function CollapsibleSection( {title} setIsExpanded(!isExpanded)} + onClick={() => { + setIsExpanded(!isExpanded) + }} data-testid={ isExpanded ? `CollapsibleSection_collapse_${title}` diff --git a/app/src/molecules/FileUpload/FileUpload.stories.tsx b/app/src/molecules/FileUpload/FileUpload.stories.tsx index 63a5336ad43..5ddaab2698f 100644 --- a/app/src/molecules/FileUpload/FileUpload.stories.tsx +++ b/app/src/molecules/FileUpload/FileUpload.stories.tsx @@ -5,7 +5,9 @@ import { FileUpload } from '.' import type { StoryFn, Meta } from '@storybook/react' const file = new File([testFile], 'a-file-to-test.png') -const handleClick = (): void => console.log('clicked the file') +const handleClick = (): void => { + console.log('clicked the file') +} export default { title: 'App/Molecules/FileUpload', diff --git a/app/src/molecules/GenericWizardTile/GenericWizardTile.stories.tsx b/app/src/molecules/GenericWizardTile/GenericWizardTile.stories.tsx index 1cca001f585..3eebb98ed3c 100644 --- a/app/src/molecules/GenericWizardTile/GenericWizardTile.stories.tsx +++ b/app/src/molecules/GenericWizardTile/GenericWizardTile.stories.tsx @@ -84,7 +84,9 @@ WithBackButton.args = { rightHandBody: rightHandBody, bodyText: body, header: 'example header', - back: () => console.log('back'), + back: () => { + console.log('back') + }, proceedButtonText: 'Continue', } @@ -95,7 +97,9 @@ WithSkeletons.args = { ), bodyText: skeletons, header: , - back: () => console.log('back'), + back: () => { + console.log('back') + }, backIsDisabled: true, proceedButton: {'Continue'}, } diff --git a/app/src/molecules/InstrumentCard/InstrumentCard.stories.tsx b/app/src/molecules/InstrumentCard/InstrumentCard.stories.tsx index dcda23cbf36..7a56a1eba9c 100644 --- a/app/src/molecules/InstrumentCard/InstrumentCard.stories.tsx +++ b/app/src/molecules/InstrumentCard/InstrumentCard.stories.tsx @@ -21,11 +21,15 @@ Attached.args = { menuOverlayItems: [ { label: 'menu option 1', - onClick: () => console.log('item click 1'), + onClick: () => { + console.log('item click 1') + }, }, { label: 'menu option 2', - onClick: () => console.log('item click 2'), + onClick: () => { + console.log('item click 2') + }, }, ], isEstopNotDisengaged: false, @@ -41,11 +45,15 @@ Divider.args = { menuOverlayItems: [ { label: 'menu option 1', - onClick: () => console.log('item click 1'), + onClick: () => { + console.log('item click 1') + }, }, { label: 'menu option 2', - onClick: () => console.log('item click 2'), + onClick: () => { + console.log('item click 2') + }, }, ], isEstopNotDisengaged: false, @@ -61,12 +69,16 @@ Empty.args = { { label: 'menu option 1', disabled: true, - onClick: () => console.log('item click 1'), + onClick: () => { + console.log('item click 1') + }, }, { label: 'menu option 2', disabled: true, - onClick: () => console.log('item click 2'), + onClick: () => { + console.log('item click 2') + }, }, ], isEstopNotDisengaged: false, diff --git a/app/src/molecules/PipetteSelect/PipetteSelect.stories.tsx b/app/src/molecules/PipetteSelect/PipetteSelect.stories.tsx index 9bf2b804a6b..10aaf3d9e8c 100644 --- a/app/src/molecules/PipetteSelect/PipetteSelect.stories.tsx +++ b/app/src/molecules/PipetteSelect/PipetteSelect.stories.tsx @@ -14,8 +14,9 @@ const Template: Story> = ({ const [pipetteNameControlled, setPipetteNameControlled] = React.useState( pipetteName ) - const handleChange = (pipName: string): unknown => + const handleChange = (pipName: string): unknown => { setPipetteNameControlled(pipName) + } return ( setShowBanner(false)} + onCloseClick={() => { + setShowBanner(false) + }} closeButton={closeButtonRendered} > @@ -95,7 +97,9 @@ export const UpdateBanner = ({ textAlign={ALIGN_START} fontSize={TYPOGRAPHY.fontSizeP} textDecoration={TYPOGRAPHY.textDecorationUnderline} - onClick={() => handleUpdateClick()} + onClick={() => { + handleUpdateClick() + }} > {hyperlinkText} diff --git a/app/src/molecules/UploadInput/index.tsx b/app/src/molecules/UploadInput/index.tsx index 45982e20ff2..52ad23ce0c5 100644 --- a/app/src/molecules/UploadInput/index.tsx +++ b/app/src/molecules/UploadInput/index.tsx @@ -127,8 +127,12 @@ export function UploadInput(props: UploadInputProps): JSX.Element | null { onDragOver={handleDragOver} onDragEnter={handleDragEnter} onDragLeave={handleDragLeave} - onMouseEnter={() => setIsHover(true)} - onMouseLeave={() => setIsHover(false)} + onMouseEnter={() => { + setIsHover(true) + }} + onMouseLeave={() => { + setIsHover(false) + }} css={isFileOverDropZone ? DRAG_OVER_STYLES : undefined} > setShowUpdateModal(true), + onLinkClick: () => { + setShowUpdateModal(true) + }, } ) } else if (removeToast && toastIdRef.current) { @@ -93,7 +95,11 @@ export function AlertsModal({ toastIdRef }: AlertsModalProps): JSX.Element { ) : null} {showUpdateModal ? ( - setShowUpdateModal(false)} /> + { + setShowUpdateModal(false) + }} + /> ) : null} ) diff --git a/app/src/organisms/ApplyHistoricOffsets/index.tsx b/app/src/organisms/ApplyHistoricOffsets/index.tsx index d2367927e34..6f0fdcc0497 100644 --- a/app/src/organisms/ApplyHistoricOffsets/index.tsx +++ b/app/src/organisms/ApplyHistoricOffsets/index.tsx @@ -103,7 +103,9 @@ export function ApplyHistoricOffsets( } /> setShowOffsetDataModal(true)} + onClick={() => { + setShowOffsetDataModal(true) + }} css={TYPOGRAPHY.linkPSemiBold} > {t(noOffsetData ? 'learn_more' : 'view_data')} @@ -119,7 +121,9 @@ export function ApplyHistoricOffsets( ? 'what_is_labware_offset_data' : 'stored_offset_data' )} - onClose={() => setShowOffsetDataModal(false)} + onClose={() => { + setShowOffsetDataModal(false) + }} /> } > diff --git a/app/src/organisms/CalibrateDeck/index.tsx b/app/src/organisms/CalibrateDeck/index.tsx index 0bf46344b0f..6385a1165f1 100644 --- a/app/src/organisms/CalibrateDeck/index.tsx +++ b/app/src/organisms/CalibrateDeck/index.tsx @@ -103,11 +103,9 @@ export function CalibrateDeck( } function cleanUpAndExit(): void { - queryClient - .invalidateQueries([host, 'calibration']) - .catch((e: Error) => - console.error(`error invalidating calibration queries: ${e.message}`) - ) + queryClient.invalidateQueries([host, 'calibration']).catch((e: Error) => { + console.error(`error invalidating calibration queries: ${e.message}`) + }) if ( exitBeforeDeckConfigCompletion && currentStep !== Sessions.DECK_STEP_CALIBRATION_COMPLETE diff --git a/app/src/organisms/CalibratePipetteOffset/index.tsx b/app/src/organisms/CalibratePipetteOffset/index.tsx index 9a04ede4116..f579e34104a 100644 --- a/app/src/organisms/CalibratePipetteOffset/index.tsx +++ b/app/src/organisms/CalibratePipetteOffset/index.tsx @@ -98,11 +98,9 @@ export function CalibratePipetteOffset( } function cleanUpAndExit(): void { - queryClient - .invalidateQueries([host, 'calibration']) - .catch((e: Error) => - console.error(`error invalidating calibration queries: ${e.message}`) - ) + queryClient.invalidateQueries([host, 'calibration']).catch((e: Error) => { + console.error(`error invalidating calibration queries: ${e.message}`) + }) if (session?.id != null) { dispatchRequests( Sessions.createSessionCommand(robotName, session.id, { diff --git a/app/src/organisms/CalibrateTipLength/AskForCalibrationBlockModal.tsx b/app/src/organisms/CalibrateTipLength/AskForCalibrationBlockModal.tsx index c767cb4ee39..697b0512946 100644 --- a/app/src/organisms/CalibrateTipLength/AskForCalibrationBlockModal.tsx +++ b/app/src/organisms/CalibrateTipLength/AskForCalibrationBlockModal.tsx @@ -106,9 +106,9 @@ export function AskForCalibrationBlockModal(props: Props): JSX.Element { > ) => + onChange={(e: React.ChangeEvent) => { setRememberPreference(e.currentTarget.checked) - } + }} value={rememberPreference} /> diff --git a/app/src/organisms/CalibrateTipLength/index.tsx b/app/src/organisms/CalibrateTipLength/index.tsx index 8da939ddd48..4ad7681ee34 100644 --- a/app/src/organisms/CalibrateTipLength/index.tsx +++ b/app/src/organisms/CalibrateTipLength/index.tsx @@ -104,11 +104,9 @@ export function CalibrateTipLength( } function cleanUpAndExit(): void { - queryClient - .invalidateQueries([host, 'calibration']) - .catch((e: Error) => - console.error(`error invalidating calibration queries: ${e.message}`) - ) + queryClient.invalidateQueries([host, 'calibration']).catch((e: Error) => { + console.error(`error invalidating calibration queries: ${e.message}`) + }) if (session?.id != null) { dispatchRequests( Sessions.createSessionCommand(robotName, session.id, { diff --git a/app/src/organisms/CalibrationPanels/Introduction/index.tsx b/app/src/organisms/CalibrationPanels/Introduction/index.tsx index 414e68111fb..cf12528244e 100644 --- a/app/src/organisms/CalibrationPanels/Introduction/index.tsx +++ b/app/src/organisms/CalibrationPanels/Introduction/index.tsx @@ -121,7 +121,9 @@ export function Introduction(props: CalibrationPanelProps): JSX.Element { mount={props.mount} chosenTipRack={chosenTipRack} handleChosenTipRack={handleChosenTipRack} - closeModal={() => setShowChooseTipRack(false)} + closeModal={() => { + setShowChooseTipRack(false) + }} robotName={props.robotName} defaultTipracks={props.defaultTipracks} /> @@ -169,7 +171,11 @@ export function Introduction(props: CalibrationPanelProps): JSX.Element { {allowChangeTipRack ? ( - setShowChooseTipRack(true)}> + { + setShowChooseTipRack(true) + }} + > {t('change_tip_rack')} ) : null} diff --git a/app/src/organisms/CalibrationPanels/useConfirmCrashRecovery.tsx b/app/src/organisms/CalibrationPanels/useConfirmCrashRecovery.tsx index cb7742be4e0..ca2910a613c 100644 --- a/app/src/organisms/CalibrationPanels/useConfirmCrashRecovery.tsx +++ b/app/src/organisms/CalibrationPanels/useConfirmCrashRecovery.tsx @@ -34,7 +34,9 @@ export function useConfirmCrashRecovery( {t('jog_too_far_or_bend_tip')} setShowModal(true)} + onClick={() => { + setShowModal(true) + }} css={TYPOGRAPHY.linkPSemiBold} > {t('start_over')} diff --git a/app/src/organisms/CalibrationStatusCard/index.tsx b/app/src/organisms/CalibrationStatusCard/index.tsx index c57ab056bde..78fbf4ffc93 100644 --- a/app/src/organisms/CalibrationStatusCard/index.tsx +++ b/app/src/organisms/CalibrationStatusCard/index.tsx @@ -89,7 +89,9 @@ export function CalibrationStatusCard({ setShowHowCalibrationWorksModal(true)} + onClick={() => { + setShowHowCalibrationWorksModal(true) + }} > {t('see_how_robot_calibration_works')} diff --git a/app/src/organisms/CalibrationTaskList/index.tsx b/app/src/organisms/CalibrationTaskList/index.tsx index 2633f5ffd9c..b6c84c6a2ee 100644 --- a/app/src/organisms/CalibrationTaskList/index.tsx +++ b/app/src/organisms/CalibrationTaskList/index.tsx @@ -110,9 +110,9 @@ export function CalibrationTaskList({ return ( + onClose={() => { history.push(`/devices/${robotName}/robot-settings/calibration`) - } + }} fullPage backgroundColor={COLORS.grey10} childrenPadding={`${SPACING.spacing16} ${SPACING.spacing24} ${SPACING.spacing24} ${SPACING.spacing4}`} @@ -144,9 +144,9 @@ export function CalibrationTaskList({ + onClick={() => { history.push(`/devices/${robotName}/robot-settings/calibration`) - } + }} > {t('device_settings:done')} @@ -176,7 +176,9 @@ export function CalibrationTaskList({ activeIndex={activeIndex} taskList={taskList} taskListStatus={taskListStatus} - generalTaskClickHandler={() => setHasLaunchedWizard(true)} + generalTaskClickHandler={() => { + setHasLaunchedWizard(true) + }} generalTaskDisabledReason={generalTaskDisabledReason} /> diff --git a/app/src/organisms/ChangePipette/ConfirmPipette.tsx b/app/src/organisms/ChangePipette/ConfirmPipette.tsx index 673359586b5..6e53a5507f3 100644 --- a/app/src/organisms/ChangePipette/ConfirmPipette.tsx +++ b/app/src/organisms/ChangePipette/ConfirmPipette.tsx @@ -168,7 +168,9 @@ function TryAgainButton(props: ConfirmPipetteProps): JSX.Element { <> setWrongWantedPipette(actualPipette)} + onClick={() => { + setWrongWantedPipette(actualPipette) + }} disabled={isDisabled} > {t('use_attached_pipette')} diff --git a/app/src/organisms/ChangePipette/Instructions.tsx b/app/src/organisms/ChangePipette/Instructions.tsx index aabf54f121c..304194fd44f 100644 --- a/app/src/organisms/ChangePipette/Instructions.tsx +++ b/app/src/organisms/ChangePipette/Instructions.tsx @@ -86,7 +86,13 @@ export function Instructions(props: Props): JSX.Element { // hide continue button if no pipette is selected const continueButton = noPipetteSelected ? null : ( - nextStep()}>{t('continue')} + { + nextStep() + }} + > + {t('continue')} + ) return ( diff --git a/app/src/organisms/ChangePipette/index.tsx b/app/src/organisms/ChangePipette/index.tsx index 7d1b8568df8..c5b8fc6dbdd 100644 --- a/app/src/organisms/ChangePipette/index.tsx +++ b/app/src/organisms/ChangePipette/index.tsx @@ -105,10 +105,9 @@ export function ChangePipette(props: Props): JSX.Element | null { if (homePipStatus === SUCCESS) closeModal() }, [homePipStatus, closeModal]) - const homePipAndExit = React.useCallback( - () => dispatchApiRequests(home(robotName, PIPETTE, mount)), - [dispatchApiRequests, robotName, mount] - ) + const homePipAndExit = React.useCallback(() => { + dispatchApiRequests(home(robotName, PIPETTE, mount)) + }, [dispatchApiRequests, robotName, mount]) const baseProps = { title: t('pipette_setup'), @@ -143,7 +142,9 @@ export function ChangePipette(props: Props): JSX.Element | null { const exitModal = ( setConfirmExit(false)} + back={() => { + setConfirmExit(false) + }} isDisabled={isButtonDisabled} exit={homePipAndExit} direction={direction} @@ -222,7 +223,11 @@ export function ChangePipette(props: Props): JSX.Element | null { }) } - exitWizardHeader = confirmExit ? undefined : () => setConfirmExit(true) + exitWizardHeader = confirmExit + ? undefined + : () => { + setConfirmExit(true) + } wizardTitle = title contents = confirmExit ? ( @@ -234,11 +239,19 @@ export function ChangePipette(props: Props): JSX.Element | null { attachedWrong: attachedIncorrectPipette, direction, setWantedName, - confirm: () => setWizardStep(CONFIRM), - back: () => setWizardStep(CLEAR_DECK), + confirm: () => { + setWizardStep(CONFIRM) + }, + back: () => { + setWizardStep(CLEAR_DECK) + }, currentStepCount, - nextStep: () => setCurrentStepCount(currentStepCount + 1), - prevStep: () => setCurrentStepCount(currentStepCount - 1), + nextStep: () => { + setCurrentStepCount(currentStepCount + 1) + }, + prevStep: () => { + setCurrentStepCount(currentStepCount - 1) + }, totalSteps: eightChannel ? EIGHT_CHANNEL_STEPS : SINGLE_CHANNEL_STEPS, title: actualPipette?.displayName != null @@ -258,7 +271,11 @@ export function ChangePipette(props: Props): JSX.Element | null { } exitWizardHeader = - success || confirmExit ? undefined : () => setConfirmExit(true) + success || confirmExit + ? undefined + : () => { + setConfirmExit(true) + } let wizardTitleConfirmPipette if (wantedPipette == null && actualPipette == null) { @@ -289,7 +306,9 @@ export function ChangePipette(props: Props): JSX.Element | null { setWizardStep(INSTRUCTIONS) setCurrentStepCount(currentStepCount - 1) }, - nextStep: () => setCurrentStepCount(currentStepCount + 1), + nextStep: () => { + setCurrentStepCount(currentStepCount + 1) + }, wrongWantedPipette: wrongWantedPipette, setWrongWantedPipette: setWrongWantedPipette, setConfirmPipetteLevel: setConfirmPipetteLevel, diff --git a/app/src/organisms/ChooseProtocolSlideout/index.tsx b/app/src/organisms/ChooseProtocolSlideout/index.tsx index 4d01c02d08f..e67f22c8e3e 100644 --- a/app/src/organisms/ChooseProtocolSlideout/index.tsx +++ b/app/src/organisms/ChooseProtocolSlideout/index.tsx @@ -265,8 +265,12 @@ export function ChooseProtocolSlideoutComponent( caption={`${runtimeParam.min}-${runtimeParam.max}`} id={id} error={error} - onBlur={() => setIsInputFocused(false)} - onFocus={() => setIsInputFocused(true)} + onBlur={() => { + setIsInputFocused(false) + }} + onFocus={() => { + setIsInputFocused(true) + }} onChange={e => { const clone = runTimeParametersOverrides.map((parameter, i) => { if (i === index) { @@ -362,10 +366,9 @@ export function ChooseProtocolSlideoutComponent( resetRunTimeParameters?.() } else { setShowRestoreValuesTooltip(true) - setTimeout( - () => setShowRestoreValuesTooltip(false), - TOOLTIP_DELAY_MS - ) + setTimeout(() => { + setShowRestoreValuesTooltip(false) + }, TOOLTIP_DELAY_MS) } }} paddingBottom={SPACING.spacing10} @@ -410,7 +413,9 @@ export function ChooseProtocolSlideoutComponent( const multiPageFooter = currentPage === 1 ? ( setCurrentPage(2)} + onClick={() => { + setCurrentPage(2) + }} width="100%" disabled={isCreatingRun || selectedProtocol == null} > @@ -418,7 +423,12 @@ export function ChooseProtocolSlideoutComponent( ) : ( - setCurrentPage(1)} width="51%"> + { + setCurrentPage(1) + }} + width="51%" + > {t('shared:change_protocol')} handleSelectProtocol(storedProtocol)} + onClick={() => { + handleSelectProtocol(storedProtocol) + }} > setIsInputFocused(false)} - onFocus={() => setIsInputFocused(true)} + onBlur={() => { + setIsInputFocused(false) + }} + onFocus={() => { + setIsInputFocused(true) + }} onChange={e => { const clone = runTimeParametersOverrides.map((parameter, i) => { if (i === index) { @@ -523,10 +527,9 @@ export function ChooseRobotSlideout( resetRunTimeParameters?.() } else { setShowRestoreValuesTooltip(true) - setTimeout( - () => setShowRestoreValuesTooltip(false), - TOOLTIP_DELAY_MS - ) + setTimeout(() => { + setShowRestoreValuesTooltip(false) + }, TOOLTIP_DELAY_MS) } }} paddingBottom={SPACING.spacing10} diff --git a/app/src/organisms/ChooseRobotToRunProtocolSlideout/index.tsx b/app/src/organisms/ChooseRobotToRunProtocolSlideout/index.tsx index 5dd3278bdfe..eb6dd3048de 100644 --- a/app/src/organisms/ChooseRobotToRunProtocolSlideout/index.tsx +++ b/app/src/organisms/ChooseRobotToRunProtocolSlideout/index.tsx @@ -227,7 +227,9 @@ export function ChooseRobotToRunProtocolSlideoutComponent( <> {offsetsComponent} setCurrentPage(2)} + onClick={() => { + setCurrentPage(2) + }} width="100%" disabled={ isCreatingRun || @@ -240,7 +242,12 @@ export function ChooseRobotToRunProtocolSlideoutComponent( ) : ( - setCurrentPage(1)} width="50%"> + { + setCurrentPage(1) + }} + width="50%" + > {t('shared:change_robot')} { - queryClient - .invalidateQueries([host, 'runs']) - .catch((e: Error) => - console.error(`error invalidating runs query: ${e.message}`) - ) + queryClient.invalidateQueries([host, 'runs']).catch((e: Error) => { + console.error(`error invalidating runs query: ${e.message}`) + }) options.onSuccess?.(...args) }, }, diff --git a/app/src/organisms/ConfigurePipette/ConfigErrorBanner.tsx b/app/src/organisms/ConfigurePipette/ConfigErrorBanner.tsx index d93b694932f..35aac004632 100644 --- a/app/src/organisms/ConfigurePipette/ConfigErrorBanner.tsx +++ b/app/src/organisms/ConfigurePipette/ConfigErrorBanner.tsx @@ -16,7 +16,9 @@ export function ConfigErrorBanner(props: Props): JSX.Element | null { return ( setDismissed(true)} + onCloseClick={() => { + setDismissed(true) + }} title={TITLE} >

diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx index c7452bd4ebc..e61a3c76edd 100644 --- a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx +++ b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx @@ -316,9 +316,9 @@ export function AddFixtureModal({ {isOnDevice ? ( - providedFixtureOptions != null ? null : closeModal() - } + onOutsideClick={() => { + if (providedFixtureOptions == null) closeModal() + }} > {t('add_fixture_description')} diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.tsx index 4b0b88c446f..ddff1b5f3fa 100644 --- a/app/src/organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.tsx +++ b/app/src/organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.tsx @@ -51,7 +51,9 @@ export function DeckConfigurationDiscardChangesModal({ setShowConfirmationModal(false)} + onClick={() => { + setShowConfirmationModal(false) + }} /> diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal.tsx index 9d622a4d4d5..a34cbaa7264 100644 --- a/app/src/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal.tsx +++ b/app/src/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal.tsx @@ -38,12 +38,16 @@ export function DeckFixtureSetupInstructionsModal({ iconName: 'information', iconColor: COLORS.black90, hasExitIcon: true, - onClick: () => setShowSetupInstructionsModal(false), + onClick: () => { + setShowSetupInstructionsModal(false) + }, } const modalProps: LegacyModalProps = { title: t('deck_fixture_setup_instructions'), - onClose: () => setShowSetupInstructionsModal(false), + onClose: () => { + setShowSetupInstructionsModal(false) + }, closeOnOutsideClick: true, childrenPadding: SPACING.spacing24, width: '39.3125rem', @@ -54,7 +58,9 @@ export function DeckFixtureSetupInstructionsModal({ {isOnDevice ? ( setShowSetupInstructionsModal(false)} + onOutsideClick={() => { + setShowSetupInstructionsModal(false) + }} > diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx index d28df33bf69..3d8c8099def 100644 --- a/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx +++ b/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx @@ -167,7 +167,9 @@ export function DeviceDetailsDeckConfiguration({ setShowSetupInstructionsModal(true)} + onClick={() => { + setShowSetupInstructionsModal(true) + }} > {t('setup_instructions')} diff --git a/app/src/organisms/Devices/ConnectionTroubleshootingModal.tsx b/app/src/organisms/Devices/ConnectionTroubleshootingModal.tsx index 03cbde6898a..8bf68238190 100644 --- a/app/src/organisms/Devices/ConnectionTroubleshootingModal.tsx +++ b/app/src/organisms/Devices/ConnectionTroubleshootingModal.tsx @@ -62,7 +62,9 @@ export function ConnectionTroubleshootingModal(props: Props): JSX.Element { {t('learn_more_about_troubleshooting_connection')} props.onClose()} + onClick={() => { + props.onClose() + }} alignSelf={ALIGN_FLEX_END} textTransform={TYPOGRAPHY.textTransformCapitalize} > diff --git a/app/src/organisms/Devices/HistoricalProtocolRun.tsx b/app/src/organisms/Devices/HistoricalProtocolRun.tsx index 59deb8f6f2d..67bb660f9aa 100644 --- a/app/src/organisms/Devices/HistoricalProtocolRun.tsx +++ b/app/src/organisms/Devices/HistoricalProtocolRun.tsx @@ -74,7 +74,9 @@ export function HistoricalProtocolRun( width="100%" > setOffsetDrawerOpen(!offsetDrawerOpen)} + onClick={() => { + setOffsetDrawerOpen(!offsetDrawerOpen) + }} role="button" > + onClick={() => { history.push( `${robotName}/protocol-runs/${run.id}/protocolRunDetailsTab?` ) - } + }} css={css` cursor: pointer; `} @@ -105,7 +107,9 @@ export function HistoricalProtocolRun( as="p" width="35%" data-testid={`RecentProtocolRuns_Protocol_${String(protocolKey)}`} - onClick={() => history.push(`/protocols/${protocolKey}`)} + onClick={() => { + history.push(`/protocols/${protocolKey}`) + }} css={CLICK_STYLE} marginRight={SPACING.spacing16} color={COLORS.grey60} diff --git a/app/src/organisms/Devices/HistoricalProtocolRunOverflowMenu.tsx b/app/src/organisms/Devices/HistoricalProtocolRunOverflowMenu.tsx index ad7badae3cd..49eab67c57f 100644 --- a/app/src/organisms/Devices/HistoricalProtocolRunOverflowMenu.tsx +++ b/app/src/organisms/Devices/HistoricalProtocolRunOverflowMenu.tsx @@ -55,7 +55,9 @@ export function HistoricalProtocolRunOverflowMenu( setShowOverflowMenu, } = useMenuHandleClickOutside() const protocolRunOverflowWrapperRef = useOnClickOutside({ - onClickOutside: () => setShowOverflowMenu(false), + onClickOutside: () => { + setShowOverflowMenu(false) + }, }) const { downloadRunLog, isRunLogLoading } = useDownloadRunLog( robotName, @@ -118,10 +120,11 @@ function MenuDropdown(props: MenuDropdownProps): JSX.Element { })?.autoUpdateAction ) const [targetProps, tooltipProps] = useHoverTooltip() - const onResetSuccess = (createRunResponse: Run): void => + const onResetSuccess = (createRunResponse: Run): void => { history.push( `/devices/${robotName}/protocol-runs/${createRunResponse.data.id}/run-preview` ) + } const onDownloadClick: React.MouseEventHandler = e => { e.preventDefault() e.stopPropagation() diff --git a/app/src/organisms/Devices/PipetteCard/FlexPipetteCard.tsx b/app/src/organisms/Devices/PipetteCard/FlexPipetteCard.tsx index 698a9fc2e86..f191115bd17 100644 --- a/app/src/organisms/Devices/PipetteCard/FlexPipetteCard.tsx +++ b/app/src/organisms/Devices/PipetteCard/FlexPipetteCard.tsx @@ -87,7 +87,9 @@ export function FlexPipetteCard({ setSelectedPipette(SINGLE_MOUNT_PIPETTES) } - const handleLaunchPipetteWizardFlows = (flowType: PipetteWizardFlow): void => + const handleLaunchPipetteWizardFlows = ( + flowType: PipetteWizardFlow + ): void => { handlePipetteWizardFlows({ flowType, mount, @@ -95,6 +97,7 @@ export function FlexPipetteCard({ selectedPipette: selectedPipetteForWizard, host, }) + } const handleChoosePipette: React.MouseEventHandler = () => { setShowChoosePipette(true) } @@ -169,12 +172,16 @@ export function FlexPipetteCard({ { label: t('about_pipette'), disabled: attachedPipette == null, - onClick: () => setShowAboutPipetteSlideout(true), + onClick: () => { + setShowAboutPipetteSlideout(true) + }, }, { label: i18n.format(t('drop_tips'), 'capitalize'), disabled: attachedPipette == null || isRunActive, - onClick: () => handleDropTip(), + onClick: () => { + handleDropTip() + }, }, ] return ( @@ -257,7 +264,9 @@ export function FlexPipetteCard({ robotType={FLEX_ROBOT_TYPE} mount={mount} instrumentModelSpecs={pipetteModelSpecs} - closeFlow={() => setShowDropTipWizard(false)} + closeFlow={() => { + setShowDropTipWizard(false) + }} /> ) : null} {attachedPipette?.ok && showAboutPipetteSlideout ? ( @@ -266,7 +275,9 @@ export function FlexPipetteCard({ pipetteName={pipetteDisplayName ?? attachedPipette.instrumentName} firmwareVersion={attachedPipette.firmwareVersion} isExpanded={showAboutPipetteSlideout} - onCloseClick={() => setShowAboutPipetteSlideout(false)} + onCloseClick={() => { + setShowAboutPipetteSlideout(false) + }} /> ) : null} {showChoosePipette ? ( @@ -274,7 +285,9 @@ export function FlexPipetteCard({ proceed={handleAttach} setSelectedPipette={setSelectedPipette} selectedPipette={selectedPipette} - exit={() => setShowChoosePipette(false)} + exit={() => { + setShowChoosePipette(false) + }} mount={mount} /> ) : null} diff --git a/app/src/organisms/Devices/PipetteCard/PipetteOverflowMenu.tsx b/app/src/organisms/Devices/PipetteCard/PipetteOverflowMenu.tsx index 027a5cd1529..02f2c1ec8ae 100644 --- a/app/src/organisms/Devices/PipetteCard/PipetteOverflowMenu.tsx +++ b/app/src/organisms/Devices/PipetteCard/PipetteOverflowMenu.tsx @@ -62,7 +62,9 @@ export const PipetteOverflowMenu = ( > {pipetteDisplayName === 'Empty' ? ( handleChangePipette()} + onClick={() => { + handleChangePipette() + }} disabled={isRunActive} > {t('attach_pipette')} @@ -70,22 +72,35 @@ export const PipetteOverflowMenu = ( ) : ( <> handleChangePipette()} + onClick={() => { + handleChangePipette() + }} disabled={isRunActive} > {t('detach_pipette')} - handleAboutSlideout()}> + { + handleAboutSlideout() + }} + > {t('about_pipette')} - handleDropTip()} disabled={isRunActive}> + { + handleDropTip() + }} + disabled={isRunActive} + > {i18n.format(t('drop_tips'), 'capitalize')} {pipetteSettings != null ? ( handleSettingsSlideout()} + onClick={() => { + handleSettingsSlideout() + }} disabled={isRunActive} > {t('view_pipette_setting')} diff --git a/app/src/organisms/Devices/PipetteCard/PipetteRecalibrationWarning.tsx b/app/src/organisms/Devices/PipetteCard/PipetteRecalibrationWarning.tsx index 5953fb74c0d..16234d85e22 100644 --- a/app/src/organisms/Devices/PipetteCard/PipetteRecalibrationWarning.tsx +++ b/app/src/organisms/Devices/PipetteCard/PipetteRecalibrationWarning.tsx @@ -22,7 +22,9 @@ export const PipetteRecalibrationWarning = (): JSX.Element | null => { iconMarginLeft={SPACING.spacing8} type="warning" size={SPACING.spacing20} - onCloseClick={() => setShowBanner(false)} + onCloseClick={() => { + setShowBanner(false) + }} > { } = useMenuHandleClickOutside() const pipetteDisplayName = pipetteModelSpecs?.displayName const pipetteOverflowWrapperRef = useOnClickOutside({ - onClickOutside: () => setShowOverflowMenu(false), + onClickOutside: () => { + setShowOverflowMenu(false) + }, }) const [showChangePipette, setChangePipette] = React.useState(false) const [showDropTipWizard, setShowDropTipWizard] = React.useState(false) @@ -96,7 +98,9 @@ export const PipetteCard = (props: PipetteCardProps): JSX.Element => { setChangePipette(false)} + closeModal={() => { + setChangePipette(false) + }} /> )} {showDropTipWizard && pipetteModelSpecs != null ? ( @@ -104,7 +108,9 @@ export const PipetteCard = (props: PipetteCardProps): JSX.Element => { robotType={OT2_ROBOT_TYPE} mount={mount} instrumentModelSpecs={pipetteModelSpecs} - closeFlow={() => setShowDropTipWizard(false)} + closeFlow={() => { + setShowDropTipWizard(false) + }} /> ) : null} {showSlideout && @@ -114,7 +120,9 @@ export const PipetteCard = (props: PipetteCardProps): JSX.Element => { setShowSlideout(false)} + onCloseClick={() => { + setShowSlideout(false) + }} isExpanded={true} pipetteId={pipetteId} settings={settings} @@ -124,7 +132,9 @@ export const PipetteCard = (props: PipetteCardProps): JSX.Element => { setShowAboutSlideout(false)} + onCloseClick={() => { + setShowAboutSlideout(false) + }} isExpanded={true} /> )} @@ -188,7 +198,9 @@ export const PipetteCard = (props: PipetteCardProps): JSX.Element => { <> setShowOverflowMenu(false)} + onClick={() => { + setShowOverflowMenu(false) + }} > onLaunchWizardClick(true)} + onClick={() => { + onLaunchWizardClick(true) + }} aria-label="remove-tips" > + const onResetSuccess = (createRunResponse: Run): void => { history.push( `/devices/${robotName}/protocol-runs/${createRunResponse.data.id}/run-preview` ) + } const { pause, play } = useRunControls(runId, onResetSuccess) @@ -460,7 +461,9 @@ export function ProtocolRunHeader({ /> {showConfirmCancelModal ? ( setShowConfirmCancelModal(false)} + onClose={() => { + setShowConfirmCancelModal(false) + }} runId={runId} robotName={robotName} /> @@ -599,9 +602,11 @@ function ActionButton(props: ActionButtonProps): JSX.Element { isResetRunLoading, } = useRunControls(runId, (createRunResponse: Run): void => // redirect to new run after successful reset - history.push( - `/devices/${robotName}/protocol-runs/${createRunResponse.data.id}/run-preview` - ) + { + history.push( + `/devices/${robotName}/protocol-runs/${createRunResponse.data.id}/run-preview` + ) + } ) isResetRunLoadingRef.current = isResetRunLoading const { missingModuleIds } = useUnmatchedModulesForProtocol(robotName, runId) @@ -786,7 +791,9 @@ function ActionButton(props: ActionButtonProps): JSX.Element { isHeaterShakerInProtocol && runId != null && ( setShowIsShakingModal(false)} + closeModal={() => { + setShowIsShakingModal(false) + }} module={activeHeaterShaker} startRun={play} /> diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolRunSetup.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolRunSetup.tsx index f7fc3f21c91..bd0cd4e55f5 100644 --- a/app/src/organisms/Devices/ProtocolRun/ProtocolRunSetup.tsx +++ b/app/src/organisms/Devices/ProtocolRun/ProtocolRunSetup.tsx @@ -197,7 +197,9 @@ export function ProtocolRunSetup({ [MODULE_SETUP_KEY]: { stepInternals: ( setExpandedStepKey(LPC_KEY)} + expandLabwarePositionCheckStep={() => { + setExpandedStepKey(LPC_KEY) + }} robotName={robotName} runId={runId} hasModules={hasModules} @@ -212,7 +214,9 @@ export function ProtocolRunSetup({ stepInternals: ( setExpandedStepKey(LABWARE_SETUP_KEY)} + expandLabwareStep={() => { + setExpandedStepKey(LABWARE_SETUP_KEY) + }} /> ), description: t('labware_position_check_step_description'), @@ -286,11 +290,11 @@ export function ProtocolRunSetup({ label={t('step', { index: index + 1 })} title={setupStepTitle} description={StepDetailMap[stepKey].description} - toggleExpanded={() => + toggleExpanded={() => { stepKey === expandedStepKey ? setExpandedStepKey(null) : setExpandedStepKey(stepKey) - } + }} rightElement={ {showLPCHelpModal ? ( - setShowLPCHelpModal(false)} /> + { + setShowLPCHelpModal(false) + }} + /> ) : null} ) diff --git a/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx b/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx index e03287f5959..2e973225bdd 100644 --- a/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx +++ b/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx @@ -55,7 +55,9 @@ export function RunFailedModal({ const modalProps: LegacyModalProps = { type: 'error', title: t('run_failed_modal_title'), - onClose: () => setShowRunFailedModal(false), + onClose: () => { + setShowRunFailedModal(false) + }, closeOnOutsideClick: true, childrenPadding: SPACING.spacing24, width: '31.25rem', diff --git a/app/src/organisms/Devices/ProtocolRun/RunTimer.tsx b/app/src/organisms/Devices/ProtocolRun/RunTimer.tsx index 337431c7f0c..821db20eedd 100644 --- a/app/src/organisms/Devices/ProtocolRun/RunTimer.tsx +++ b/app/src/organisms/Devices/ProtocolRun/RunTimer.tsx @@ -21,7 +21,13 @@ export function RunTimer({ style?: CSSProp }): JSX.Element { const [now, setNow] = React.useState(Date()) - useInterval(() => setNow(Date()), 500, true) + useInterval( + () => { + setNow(Date()) + }, + 500, + true + ) const endTime = runStatus === RUN_STATUS_STOP_REQUESTED && stoppedAt != null diff --git a/app/src/organisms/Devices/ProtocolRun/SetupFlexPipetteCalibrationItem.tsx b/app/src/organisms/Devices/ProtocolRun/SetupFlexPipetteCalibrationItem.tsx index 86bf857246f..49ed6243cf8 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupFlexPipetteCalibrationItem.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupFlexPipetteCalibrationItem.tsx @@ -74,7 +74,9 @@ export function SetupFlexPipetteCalibrationItem({ setShowFlexPipetteFlow(true)} + onClick={() => { + setShowFlexPipetteFlow(true) + }} > {t('attach_pipette_cta')} @@ -93,7 +95,9 @@ export function SetupFlexPipetteCalibrationItem({ > setShowFlexPipetteFlow(true)} + onClick={() => { + setShowFlexPipetteFlow(true) + }} > {t('calibrate_now')} @@ -108,7 +112,9 @@ export function SetupFlexPipetteCalibrationItem({ setShowFlexPipetteFlow(false)} + closeFlow={() => { + setShowFlexPipetteFlow(false) + }} selectedPipette={ requestedPipetteSpecs?.channels === 96 ? NINETY_SIX_CHANNEL diff --git a/app/src/organisms/Devices/ProtocolRun/SetupGripperCalibrationItem.tsx b/app/src/organisms/Devices/ProtocolRun/SetupGripperCalibrationItem.tsx index f9eaec4b86e..863e62ac2d9 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupGripperCalibrationItem.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupGripperCalibrationItem.tsx @@ -93,7 +93,9 @@ export function SetupGripperCalibrationItem({ setOpenWizardFlowType(null)} + closeFlow={() => { + setOpenWizardFlowType(null) + }} /> ) : null} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx index 3b4d03e9d2a..69f54d53e2c 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx @@ -167,7 +167,9 @@ export function LabwareListItem( color: ${COLORS.black90}; } `} - onClick={() => setSecureLabwareModalType(moduleType)} + onClick={() => { + setSecureLabwareModalType(moduleType) + }} > setSecureLabwareModalType(null)} + onCloseClick={() => { + setSecureLabwareModalType(null) + }} /> )} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/index.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/index.tsx index 82dba6c6cc6..351ab62eca6 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLabware/index.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLabware/index.tsx @@ -79,7 +79,11 @@ export function SetupLabware(props: SetupLabwareProps): JSX.Element { sourceLocation="SetupLabware" /> ) : ( - expandStep(nextStep)}> + { + expandStep(nextStep) + }} + > {t('proceed_to_liquid_setup_step')} )} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx index f2e51bc26c1..025dd2507fb 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx @@ -99,7 +99,9 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element { css={selectedValue === liquidId ? ACTIVE_STYLE : LIQUID_CARD_ODD_STYLE} borderRadius={BORDERS.borderRadius8} backgroundColor={COLORS.white} - onClick={() => setSelectedValue(liquidId)} + onClick={() => { + setSelectedValue(liquidId) + }} width="19.875rem" minHeight="max-content" aria-label="liquidBox_odd" diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx index 4cba71ef386..4dc032bbf59 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx @@ -157,7 +157,9 @@ export function LiquidsListItem(props: LiquidsListItemProps): JSX.Element { labwareId={liquidDetailsLabwareId} liquidId={liquidId} runId={runId} - closeModal={() => setLiquidDetailsLabwareId(null)} + closeModal={() => { + setLiquidDetailsLabwareId(null) + }} /> )} {openItem && ( diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsMap.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsMap.tsx index 623fe6905ad..4a73d6a3906 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsMap.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsMap.tsx @@ -101,11 +101,15 @@ export function SetupLiquidsMap( moduleChildren: topLabwareDefinition != null && topLabwareId != null ? ( setHoverLabwareId(topLabwareId)} - onMouseLeave={() => setHoverLabwareId('')} - onClick={() => - labwareHasLiquid ? setLiquidDetailsLabwareId(topLabwareId) : null - } + onMouseEnter={() => { + setHoverLabwareId(topLabwareId) + }} + onMouseLeave={() => { + setHoverLabwareId('') + }} + onClick={() => { + if (labwareHasLiquid) setLiquidDetailsLabwareId(topLabwareId) + }} cursor={labwareHasLiquid ? 'pointer' : ''} > setHoverLabwareId(topLabwareId)} - onMouseLeave={() => setHoverLabwareId('')} - onClick={() => - labwareHasLiquid - ? setLiquidDetailsLabwareId(topLabwareId) - : null - } + onMouseEnter={() => { + setHoverLabwareId(topLabwareId) + }} + onMouseLeave={() => { + setHoverLabwareId('') + }} + onClick={() => { + if (labwareHasLiquid) + setLiquidDetailsLabwareId(topLabwareId) + }} cursor={labwareHasLiquid ? 'pointer' : ''} > setLiquidDetailsLabwareId(null)} + closeModal={() => { + setLiquidDetailsLabwareId(null) + }} /> )} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/OT2MultipleModulesHelp.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/OT2MultipleModulesHelp.tsx index eaac0c079a6..6c53fbeb797 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/OT2MultipleModulesHelp.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/OT2MultipleModulesHelp.tsx @@ -40,7 +40,9 @@ export function OT2MultipleModulesHelp(): JSX.Element { iconMarginLeft={SPACING.spacing8} size={SPACING.spacing20} type="informing" - onCloseClick={() => setShowMultipleModulesModal(true)} + onCloseClick={() => { + setShowMultipleModulesModal(true) + }} closeButton={ {showNotConfiguredModal ? ( setShowNotConfiguredModal(false)} + onCloseClick={() => { + setShowNotConfiguredModal(false) + }} cutoutId={cutoutId} requiredFixtureId={compatibleCutoutFixtureIds[0]} /> ) : null} {showLocationConflictModal ? ( setShowLocationConflictModal(false)} + onCloseClick={() => { + setShowLocationConflictModal(false) + }} cutoutId={cutoutId} deckDef={deckDef} missingLabwareDisplayName={missingLabwareDisplayName} @@ -200,7 +204,9 @@ export function FixtureListItem({ } `} marginTop={SPACING.spacing4} - onClick={() => setShowSetupInstructionsModal(true)} + onClick={() => { + setShowSetupInstructionsModal(true) + }} > {t('view_setup_instructions')} @@ -220,11 +226,11 @@ export function FixtureListItem({ {!isCurrentFixtureCompatible ? ( + onClick={() => { isConflictingFixtureConfigured ? setShowLocationConflictModal(true) : setShowNotConfiguredModal(true) - } + }} > {t('resolve')} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx index d731f9d5c42..95ce2213872 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx @@ -214,7 +214,9 @@ export function ModulesListItem({ } `} marginTop={SPACING.spacing4} - onClick={() => setShowModuleSetupModal(true)} + onClick={() => { + setShowModuleSetupModal(true) + }} > {t('view_setup_instructions')} @@ -288,7 +290,9 @@ export function ModulesListItem({ <> {showLocationConflictModal && cutoutIdForSlotName != null ? ( setShowLocationConflictModal(false)} + onCloseClick={() => { + setShowLocationConflictModal(false) + }} cutoutId={cutoutIdForSlotName} requiredModule={moduleModel} deckDef={deckDef} @@ -298,7 +302,9 @@ export function ModulesListItem({ {showModuleWizard && attachedModuleMatch != null ? ( setShowModuleWizard(false)} + closeFlow={() => { + setShowModuleWizard(false) + }} isPrepCommandLoading={isCommandMutationLoading} prepCommandErrorMessage={ prepCommandErrorMessage === '' ? undefined : prepCommandErrorMessage @@ -315,7 +321,9 @@ export function ModulesListItem({ > {showModuleSetupModal && heaterShakerModuleFromProtocol != null ? ( setShowModuleSetupModal(false)} + close={() => { + setShowModuleSetupModal(false) + }} moduleDisplayName={ heaterShakerModuleFromProtocol.moduleDef.displayName } @@ -376,7 +384,9 @@ export function ModulesListItem({ /> setShowLocationConflictModal(true)} + onClick={() => { + setShowLocationConflictModal(true) + }} > {t('resolve')} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/UnMatchedModuleWarning.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/UnMatchedModuleWarning.tsx index c7f8025a53d..d007f53064f 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/UnMatchedModuleWarning.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/UnMatchedModuleWarning.tsx @@ -20,7 +20,9 @@ export const UnMatchedModuleWarning = (): JSX.Element | null => { iconMarginLeft={SPACING.spacing8} type="warning" size={SPACING.spacing20} - onCloseClick={() => setShowBanner(false)} + onCloseClick={() => { + setShowBanner(false) + }} > + onClick={() => { tipLengthCalLauncher({ params: { mount, tipRackDefinition }, hasBlockModalResponse: null, invalidateHandler: offsetCalsToDelete !== undefined ? invalidateHandler : undefined, }) - } + }} css={TYPOGRAPHY.labelSemiBold} id="TipRackCalibration_recalibrateTipRackLink" > @@ -131,12 +131,12 @@ export function SetupTipLengthCalibrationButton({ ) : ( <> + onClick={() => { tipLengthCalLauncher({ params: { mount, tipRackDefinition }, hasBlockModalResponse: null, }) - } + }} id="TipRackCalibration_calibrateTipRackButton" disabled={disabled || !isDeckCalibrated} {...targetProps} diff --git a/app/src/organisms/Devices/RobotCard.tsx b/app/src/organisms/Devices/RobotCard.tsx index 280cfaadf32..c375e55dc7f 100644 --- a/app/src/organisms/Devices/RobotCard.tsx +++ b/app/src/organisms/Devices/RobotCard.tsx @@ -70,7 +70,9 @@ export function RobotCard(props: RobotCardProps): JSX.Element | null { minWidth="36rem" padding={SPACING.spacing16} position={POSITION_RELATIVE} - onClick={() => history.push(`/devices/${robotName}`)} + onClick={() => { + history.push(`/devices/${robotName}`) + }} > setShowDisconnectModal(false)} + onCancel={() => { + setShowDisconnectModal(false) + }} robotName={robot.name} />, getTopPortalEl() @@ -133,7 +135,9 @@ export const RobotOverviewOverflowMenu = ( > {isUpdateSoftwareItemVisible ? ( handleUpdateBuildroot(robot)} + onClick={() => { + handleUpdateBuildroot(robot) + }} data-testid={`RobotOverviewOverflowMenu_updateSoftware_${String( robot.name )}`} @@ -202,9 +206,9 @@ export const RobotOverviewOverflowMenu = ( + onClick={() => { history.push(`/devices/${robot.name}/robot-settings`) - } + }} disabled={ robot == null || robot?.status === UNREACHABLE || @@ -227,7 +231,9 @@ export const RobotOverviewOverflowMenu = ( setShowChooseProtocolSlideout(false)} + onCloseClick={() => { + setShowChooseProtocolSlideout(false) + }} /> ) : null} {menuOverlay} diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx index 3b9b3a4c5e4..067de372937 100644 --- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx +++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx @@ -262,12 +262,12 @@ export function DeviceResetSlideout({ calibrationName !== '' && ( + onChange={() => { setResetOptions({ ...resetOptions, [opt.id]: !(resetOptions[opt.id] ?? false), }) - } + }} value={resetOptions[opt.id]} label={calibrationName} /> @@ -296,12 +296,12 @@ export function DeviceResetSlideout({ {runHistoryOption.map(opt => ( + onChange={() => { setResetOptions({ ...resetOptions, [opt.id]: !(resetOptions[opt.id] ?? false), }) - } + }} value={resetOptions[opt.id]} label={t(`clear_option_${snakeCase(opt.id)}`)} /> @@ -318,12 +318,12 @@ export function DeviceResetSlideout({ {bootScriptOption.map(opt => ( + onChange={() => { setResetOptions({ ...resetOptions, [opt.id]: !(resetOptions[opt.id] ?? false), }) - } + }} value={resetOptions[opt.id]} label={t(`clear_option_${snakeCase(opt.id)}`)} /> @@ -340,12 +340,12 @@ export function DeviceResetSlideout({ {sshKeyOption.map(opt => ( + onChange={() => { setResetOptions({ ...resetOptions, [opt.id]: !(resetOptions[opt.id] ?? false), }) - } + }} value={resetOptions[opt.id]} label={t(`clear_option_${snakeCase(opt.id)}`)} /> diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/FactoryModeSlideout.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/FactoryModeSlideout.tsx index 8a01e6a0c56..668f03f4cab 100644 --- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/FactoryModeSlideout.tsx +++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/FactoryModeSlideout.tsx @@ -283,7 +283,9 @@ export function FactoryModeSlideout({ {file == null ? ( handleChooseFile(file)} + onUpload={(file: File) => { + handleChooseFile(file) + }} dragAndDropText={ handleUpdateBuildroot(robot)} + onClick={() => { + handleUpdateBuildroot(robot) + }} textTransform={TYPOGRAPHY.textTransformCapitalize} > {t('reinstall')} diff --git a/app/src/organisms/Devices/RobotSettings/RobotSettingsAdvanced.tsx b/app/src/organisms/Devices/RobotSettings/RobotSettingsAdvanced.tsx index 418e8001269..d084db26828 100644 --- a/app/src/organisms/Devices/RobotSettings/RobotSettingsAdvanced.tsx +++ b/app/src/organisms/Devices/RobotSettings/RobotSettingsAdvanced.tsx @@ -133,7 +133,9 @@ export function RobotSettingsAdvanced({ {showRenameRobotSlideout && ( setShowRenameRobotSlideout(false)} + onCloseClick={() => { + setShowRenameRobotSlideout(false) + }} robotName={robotName} /> )} @@ -141,7 +143,9 @@ export function RobotSettingsAdvanced({ setShowFactoryModeSlideout(false)} + onCloseClick={() => { + setShowFactoryModeSlideout(false) + }} robotName={robotName} sn={sn} /> @@ -149,7 +153,9 @@ export function RobotSettingsAdvanced({ {showDeviceResetSlideout && ( setShowDeviceResetSlideout(false)} + onCloseClick={() => { + setShowDeviceResetSlideout(false) + }} robotName={robotName} updateResetStatus={updateResetStatus} /> @@ -157,7 +163,9 @@ export function RobotSettingsAdvanced({ {showDeviceResetModal && createPortal( setShowDeviceResetModal(false)} + closeModal={() => { + setShowDeviceResetModal(false) + }} isRobotReachable={isRobotReachable} robotName={robotName} resetOptions={resetOptions} @@ -208,7 +216,9 @@ export function RobotSettingsAdvanced({ handleUpdateBuildroot(robot)} + onUpdateStart={() => { + handleUpdateBuildroot(robot) + }} /> {isFlex ? ( <> diff --git a/app/src/organisms/Devices/RobotSettings/RobotSettingsNetworking.tsx b/app/src/organisms/Devices/RobotSettings/RobotSettingsNetworking.tsx index 7297f0d73f5..193ac939c0a 100644 --- a/app/src/organisms/Devices/RobotSettings/RobotSettingsNetworking.tsx +++ b/app/src/organisms/Devices/RobotSettings/RobotSettingsNetworking.tsx @@ -102,7 +102,9 @@ export function RobotSettingsNetworking({ {showDisconnectModal ? createPortal( setShowDisconnectModal(false)} + onCancel={() => { + setShowDisconnectModal(false) + }} robotName={robotName} />, getModalPortalEl() @@ -146,7 +148,9 @@ export function RobotSettingsNetworking({ {canDisconnect && !isRobotBusy ? ( setShowDisconnectModal(true)} + onClick={() => { + setShowDisconnectModal(true) + }} disabled={isEstopNotDisengaged} > {t('disconnect_from_wifi')} diff --git a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx index 52c1d4306b3..a71c278664d 100644 --- a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx +++ b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx @@ -282,9 +282,9 @@ function useStatusBarAnimation(isError: boolean): void { createLiveCommand({ command: updatingCommand, waitUntilComplete: false, - }).catch((e: Error) => + }).catch((e: Error) => { console.warn(`cannot run status bar animation: ${e.message}`) - ) + }) } const startIdleAnimationIfFailed = (): void => { @@ -292,9 +292,9 @@ function useStatusBarAnimation(isError: boolean): void { createLiveCommand({ command: idleCommand, waitUntilComplete: false, - }).catch((e: Error) => + }).catch((e: Error) => { console.warn(`cannot run status bar animation: ${e.message}`) - ) + }) } } diff --git a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx index 4a1ffaec5ea..b0e965a5a46 100644 --- a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx +++ b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx @@ -128,7 +128,9 @@ export function UpdateRobotModal({ {updateType === UPGRADE ? t('remind_me_later') : t('not_now')} dispatchStartRobotUpdate(robotName)} + onClick={() => { + dispatchStartRobotUpdate(robotName) + }} marginRight={SPACING.spacing12} css={FOOTER_BUTTON_STYLE} disabled={updateDisabled} diff --git a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/ViewUpdateModal.tsx b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/ViewUpdateModal.tsx index 37e4177db0d..7a692537a78 100644 --- a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/ViewUpdateModal.tsx +++ b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/ViewUpdateModal.tsx @@ -59,7 +59,11 @@ export function ViewUpdateModal( if (availableAppUpdateVersion && showAppUpdateModal) return createPortal( - setShowAppUpdateModal(false)} />, + { + setShowAppUpdateModal(false) + }} + />, getTopPortalEl() ) @@ -68,7 +72,9 @@ export function ViewUpdateModal( setShowMigrationWarning(false)} + proceed={() => { + setShowMigrationWarning(false) + }} /> ) } diff --git a/app/src/organisms/Devices/RobotStatusHeader.tsx b/app/src/organisms/Devices/RobotStatusHeader.tsx index d3640823d86..681cf1f1324 100644 --- a/app/src/organisms/Devices/RobotStatusHeader.tsx +++ b/app/src/organisms/Devices/RobotStatusHeader.tsx @@ -80,7 +80,9 @@ export function RobotStatusHeader(props: RobotStatusHeaderProps): JSX.Element { currentRunId != null && currentRunStatus != null && displayName != null ? ( e.stopPropagation()} + onClick={(e: React.MouseEvent) => { + e.stopPropagation() + }} > + onClick={() => { history.push(`/devices/${name}/robot-settings/networking`) - } + }} > + onClick: () => { tipLengthCalLauncher({ params: { mount }, hasBlockModalResponse: null, - }), + }) + }, } tipLengthSubTask.isComplete = true @@ -187,7 +188,9 @@ export function useCalibrationTaskList( }) offsetSubTask.cta = { label: t('robot_calibration:recalibrate'), - onClick: () => pipOffsetCalLauncher({ params: { mount } }), + onClick: () => { + pipOffsetCalLauncher({ params: { mount } }) + }, } offsetSubTask.isComplete = true @@ -223,11 +226,12 @@ export function useCalibrationTaskList( ) tipLengthSubTask.cta = { label: t('robot_calibration:calibrate'), - onClick: () => + onClick: () => { tipLengthCalLauncher({ params: { mount }, hasBlockModalResponse: null, - }), + }) + }, } if (tipLengthCalForPipette?.status.markedBad === true) { @@ -241,11 +245,12 @@ export function useCalibrationTaskList( }) tipLengthSubTask.cta = { label: t('robot_calibration:recalibrate'), - onClick: () => + onClick: () => { tipLengthCalLauncher({ params: { mount }, hasBlockModalResponse: null, - }), + }) + }, } tipLengthSubTask.isComplete = true } @@ -266,7 +271,9 @@ export function useCalibrationTaskList( ) offsetSubTask.cta = { label: t('robot_calibration:calibrate'), - onClick: () => pipOffsetCalLauncher({ params: { mount } }), + onClick: () => { + pipOffsetCalLauncher({ params: { mount } }) + }, } if (offsetCalForPipette?.status.markedBad === true) { @@ -280,7 +287,9 @@ export function useCalibrationTaskList( }) offsetSubTask.cta = { label: t('robot_calibration:recalibrate'), - onClick: () => pipOffsetCalLauncher({ params: { mount } }), + onClick: () => { + pipOffsetCalLauncher({ params: { mount } }) + }, } offsetSubTask.isComplete = true } @@ -338,8 +347,9 @@ export function useCalibrationTaskList( } } if (taskList.taskList[0].cta != null) { - taskList.taskList[0].cta.onClick = () => + taskList.taskList[0].cta.onClick = () => { deckCalLauncher({ invalidateHandler }) + } } } @@ -375,12 +385,13 @@ export function useCalibrationTaskList( } } if (taskList.taskList[1].subTasks[0].cta != null) { - taskList.taskList[1].subTasks[0].cta.onClick = () => + taskList.taskList[1].subTasks[0].cta.onClick = () => { tipLengthCalLauncher({ params: { mount: 'left' }, hasBlockModalResponse: null, invalidateHandler, }) + } } } @@ -415,12 +426,13 @@ export function useCalibrationTaskList( } } if (taskList.taskList[2].subTasks[0].cta != null) { - taskList.taskList[2].subTasks[0].cta.onClick = () => + taskList.taskList[2].subTasks[0].cta.onClick = () => { tipLengthCalLauncher({ params: { mount: 'right' }, hasBlockModalResponse: null, invalidateHandler, }) + } } } diff --git a/app/src/organisms/DropTipWizard/BeforeBeginning.tsx b/app/src/organisms/DropTipWizard/BeforeBeginning.tsx index cd21cc3e1a4..04f50b7b9a3 100644 --- a/app/src/organisms/DropTipWizard/BeforeBeginning.tsx +++ b/app/src/organisms/DropTipWizard/BeforeBeginning.tsx @@ -69,7 +69,9 @@ export const BeforeBeginning = ( flowType === 'liquid_and_tips' ? 'primary' : 'secondary' } flex="1" - onClick={() => setFlowType('liquid_and_tips')} + onClick={() => { + setFlowType('liquid_and_tips') + }} buttonText={i18n.format(t('yes_blow_out_liquid'), 'capitalize')} justifyContent={JUSTIFY_FLEX_START} paddingLeft={SPACING.spacing24} @@ -134,7 +136,9 @@ export const BeforeBeginning = ( {t('yes_blow_out_liquid')} setFlowType('only_tips')} + onClick={() => { + setFlowType('only_tips') + }} css={ flowType === 'only_tips' ? SELECTED_OPTIONS_STYLE diff --git a/app/src/organisms/DropTipWizard/ChooseLocation.tsx b/app/src/organisms/DropTipWizard/ChooseLocation.tsx index 7a86da67223..76966798f8f 100644 --- a/app/src/organisms/DropTipWizard/ChooseLocation.tsx +++ b/app/src/organisms/DropTipWizard/ChooseLocation.tsx @@ -69,8 +69,12 @@ export const ChooseLocation = ( if (deckSlot != null) { moveToAddressableArea(deckSlot) - .then(() => handleProceed()) - .catch(e => setErrorDetails({ message: `${e.message}` })) + .then(() => { + handleProceed() + }) + .catch(e => { + setErrorDetails({ message: `${e.message}` }) + }) } } @@ -112,7 +116,11 @@ export const ChooseLocation = ( css={ALIGN_BUTTONS} gridGap={SPACING.spacing8} > - handleGoBack()}> + { + handleGoBack() + }} + > {t('shared:go_back')} @@ -137,7 +145,11 @@ export const ChooseLocation = ( justifyContent={JUSTIFY_SPACE_BETWEEN} gridGap={SPACING.spacing8} > - handleGoBack()}> + { + handleGoBack() + }} + > {t('shared:go_back')} diff --git a/app/src/organisms/DropTipWizard/JogToPosition.tsx b/app/src/organisms/DropTipWizard/JogToPosition.tsx index f7c33c8eb3b..24c769f118e 100644 --- a/app/src/organisms/DropTipWizard/JogToPosition.tsx +++ b/app/src/organisms/DropTipWizard/JogToPosition.tsx @@ -193,7 +193,9 @@ export const JogToPosition = ( setIsRobotInMotion(true) handleProceed() }} - handleGoBack={() => setShowPositionConfirmation(false)} + handleGoBack={() => { + setShowPositionConfirmation(false) + }} isOnDevice={isOnDevice} currentStep={currentStep} /> @@ -221,7 +223,9 @@ export const JogToPosition = ( setShowPositionConfirmation(true)} + onClick={() => { + setShowPositionConfirmation(true) + }} /> @@ -266,7 +270,11 @@ export const JogToPosition = ( {t('shared:go_back')} - setShowPositionConfirmation(true)}> + { + setShowPositionConfirmation(true) + }} + > {t('shared:confirm_position')} diff --git a/app/src/organisms/DropTipWizard/index.tsx b/app/src/organisms/DropTipWizard/index.tsx index bd55591e1da..e1e448998e7 100644 --- a/app/src/organisms/DropTipWizard/index.tsx +++ b/app/src/organisms/DropTipWizard/index.tsx @@ -119,7 +119,9 @@ export function DropTipWizard(props: MaintenanceRunManagerProps): JSX.Element { }) .catch(e => e) }, - onError: error => setErrorDetails({ message: error.message }), + onError: error => { + setErrorDetails({ message: error.message }) + }, }) const { data: maintenanceRunData } = useNotifyCurrentMaintenanceRun({ @@ -155,8 +157,12 @@ export function DropTipWizard(props: MaintenanceRunManagerProps): JSX.Element { ) const { deleteMaintenanceRun } = useDeleteMaintenanceRunMutation({ - onSuccess: () => closeFlow(), - onError: () => closeFlow(), + onSuccess: () => { + closeFlow() + }, + onError: () => { + closeFlow() + }, }) const handleCleanUpAndClose = (homeOnExit: boolean = true): void => { @@ -178,12 +184,16 @@ export function DropTipWizard(props: MaintenanceRunManagerProps): JSX.Element { ], true ) - : new Promise((resolve, reject) => resolve()) + : new Promise((resolve, reject) => { + resolve() + }) ) .catch(error => { console.error(error.message) }) - .finally(() => deleteMaintenanceRun(maintenanceRunData?.data.id)) + .finally(() => { + deleteMaintenanceRun(maintenanceRunData?.data.id) + }) } } @@ -518,7 +528,7 @@ export const DropTipWizardComponent = ( proceed() } }) - .catch(e => + .catch(e => { setSpecificErrorDetails({ message: `Error issuing ${ currentStep === POSITION_AND_BLOWOUT @@ -526,7 +536,7 @@ export const DropTipWizardComponent = ( : 'drop tip' } command: ${e.message}`, }) - ) + }) } }} handleGoBack={goBack} diff --git a/app/src/organisms/DropTipWizard/utils.tsx b/app/src/organisms/DropTipWizard/utils.tsx index e0d094f06ac..005a941abdd 100644 --- a/app/src/organisms/DropTipWizard/utils.tsx +++ b/app/src/organisms/DropTipWizard/utils.tsx @@ -174,7 +174,9 @@ export function useWizardExitHeader({ return () => null } function buildNoHomeCleanUpAndClose(): () => void { - return () => handleCleanUpAndClose(false) + return () => { + handleCleanUpAndClose(false) + } } function buildHandleCleanUpAndClose(): () => void { return handleCleanUpAndClose diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/CancelRun.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/CancelRun.tsx index da9980a21fd..4b69c45ff5f 100644 --- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/CancelRun.tsx +++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/CancelRun.tsx @@ -28,7 +28,9 @@ export function CancelRun({ const { goBackPrevStep, setRobotInMotion } = routeUpdateActions const primaryBtnOnClick = (): Promise => { - return setRobotInMotion(true, ROBOT_CANCELING.ROUTE).then(() => cancelRun()) + return setRobotInMotion(true, ROBOT_CANCELING.ROUTE).then(() => { + cancelRun() + }) } if (isOnDevice) { diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/RetryStep.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/RetryStep.tsx index 283da580c9a..79915142907 100644 --- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/RetryStep.tsx +++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/RetryStep.tsx @@ -29,7 +29,9 @@ export function RetryStep({ const primaryBtnOnClick = (): Promise => { return setRobotInMotion(true, ROBOT_RETRYING_COMMAND.ROUTE) .then(() => retryFailedCommand()) - .then(() => resumeRun()) + .then(() => { + resumeRun() + }) } if (isOnDevice) { diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx index 88206c3eab2..58ef269b5ca 100644 --- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx +++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx @@ -89,7 +89,9 @@ export function RecoveryOptions({ key={`recovery_option_${optionName}`} buttonLabel={optionName} buttonValue={optionName} - onChange={() => setSelectedRoute(recoveryOption)} + onChange={() => { + setSelectedRoute(recoveryOption) + }} isSelected={recoveryOption === selectedRoute} /> ) diff --git a/app/src/organisms/ErrorRecoveryFlows/utils/useRouteUpdateActions.ts b/app/src/organisms/ErrorRecoveryFlows/utils/useRouteUpdateActions.ts index 29ef6078132..f72e65e50f1 100644 --- a/app/src/organisms/ErrorRecoveryFlows/utils/useRouteUpdateActions.ts +++ b/app/src/organisms/ErrorRecoveryFlows/utils/useRouteUpdateActions.ts @@ -47,7 +47,9 @@ export function useRouteUpdateActions( currentRoute, updatedStep, ...routeUpdateActionsParams, - }).then(() => resolve()) + }).then(() => { + resolve() + }) }) }, [currentStep, currentRoute, routeUpdateActionsParams]) @@ -61,7 +63,9 @@ export function useRouteUpdateActions( currentRoute, updatedStep, ...routeUpdateActionsParams, - }).then(() => resolve()) + }).then(() => { + resolve() + }) }) }, [currentStep, currentRoute, routeUpdateActionsParams]) diff --git a/app/src/organisms/FirmwareUpdateModal/UpdateNeededModal.tsx b/app/src/organisms/FirmwareUpdateModal/UpdateNeededModal.tsx index 4b78dba5632..6d590f15da9 100644 --- a/app/src/organisms/FirmwareUpdateModal/UpdateNeededModal.tsx +++ b/app/src/organisms/FirmwareUpdateModal/UpdateNeededModal.tsx @@ -114,7 +114,9 @@ export function UpdateNeededModal(props: UpdateNeededModalProps): JSX.Element { instrument={instrument} isSuccess={updateError === undefined} onClose={() => { - refetchInstruments().catch(error => console.error(error)) + refetchInstruments().catch(error => { + console.error(error) + }) onClose() }} shouldExit={shouldExit} diff --git a/app/src/organisms/GripperCard/index.tsx b/app/src/organisms/GripperCard/index.tsx index dcedcc6ccb4..afc289d2841 100644 --- a/app/src/organisms/GripperCard/index.tsx +++ b/app/src/organisms/GripperCard/index.tsx @@ -118,7 +118,9 @@ export function GripperCard({ { label: t('about_gripper'), disabled: attachedGripper == null, - onClick: () => setShowAboutGripperSlideout(true), + onClick: () => { + setShowAboutGripperSlideout(true) + }, }, ] return ( @@ -192,7 +194,9 @@ export function GripperCard({ setOpenWizardFlowType(null)} + closeFlow={() => { + setOpenWizardFlowType(null) + }} /> ) : null} {attachedGripper?.ok && showAboutGripperSlideout && ( @@ -200,7 +204,9 @@ export function GripperCard({ serialNumber={attachedGripper.serialNumber} firmwareVersion={attachedGripper.firmwareVersion} isExpanded={showAboutGripperSlideout} - onCloseClick={() => setShowAboutGripperSlideout(false)} + onCloseClick={() => { + setShowAboutGripperSlideout(false) + }} /> )} diff --git a/app/src/organisms/GripperWizardFlows/MountGripper.tsx b/app/src/organisms/GripperWizardFlows/MountGripper.tsx index a7049cf447d..d045ea3dafa 100644 --- a/app/src/organisms/GripperWizardFlows/MountGripper.tsx +++ b/app/src/organisms/GripperWizardFlows/MountGripper.tsx @@ -99,7 +99,11 @@ export const MountGripper = ( css={ALIGN_BUTTONS} gridGap={SPACING.spacing8} > - setShowUnableToDetect(false)}> + { + setShowUnableToDetect(false) + }} + > {t('shared:go_back')} diff --git a/app/src/organisms/GripperWizardFlows/MovePin.tsx b/app/src/organisms/GripperWizardFlows/MovePin.tsx index ddc0566b510..cbee97f6d67 100644 --- a/app/src/organisms/GripperWizardFlows/MovePin.tsx +++ b/app/src/organisms/GripperWizardFlows/MovePin.tsx @@ -114,13 +114,21 @@ export const MovePin = (props: MovePinProps): JSX.Element | null => { } proceed() }) - .catch(error => setErrorMessage(error.message)) + .catch(error => { + setErrorMessage(error.message) + }) + }) + .catch(error => { + setErrorMessage(error.message) }) - .catch(error => setErrorMessage(error.message)) }) - .catch(error => setErrorMessage(error.message)) + .catch(error => { + setErrorMessage(error.message) + }) + }) + .catch(error => { + setErrorMessage(error.message) }) - .catch(error => setErrorMessage(error.message)) } } const infoByMovement: { diff --git a/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx b/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx index f0b2467e95d..9f4cae7bf7a 100644 --- a/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx +++ b/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx @@ -111,7 +111,9 @@ export const UnmountGripper = ( > setShowGripperStillDetected(false)} + onClick={() => { + setShowGripperStillDetected(false) + }} > {t('shared:go_back')} diff --git a/app/src/organisms/GripperWizardFlows/index.tsx b/app/src/organisms/GripperWizardFlows/index.tsx index d0cd8073de2..bbf4ad90f0a 100644 --- a/app/src/organisms/GripperWizardFlows/index.tsx +++ b/app/src/organisms/GripperWizardFlows/index.tsx @@ -129,8 +129,12 @@ export function GripperWizardFlows( deleteMaintenanceRun, isLoading: isDeleteLoading, } = useDeleteMaintenanceRunMutation({ - onSuccess: () => closeFlow(), - onError: () => closeFlow(), + onSuccess: () => { + closeFlow() + }, + onError: () => { + closeFlow() + }, }) const handleCleanUpAndClose = (): void => { diff --git a/app/src/organisms/InstrumentMountItem/AttachedInstrumentMountItem.tsx b/app/src/organisms/InstrumentMountItem/AttachedInstrumentMountItem.tsx index 042502275be..1811fbaf706 100644 --- a/app/src/organisms/InstrumentMountItem/AttachedInstrumentMountItem.tsx +++ b/app/src/organisms/InstrumentMountItem/AttachedInstrumentMountItem.tsx @@ -57,7 +57,9 @@ export function AttachedInstrumentMountItem( attachedInstrument == null ? `/instruments` : `/instrument/${mount}` ) }, - closeFlow: () => setWizardProps(null), + closeFlow: () => { + setWizardProps(null) + }, }) } else { history.push(`/instruments/${mount}`) diff --git a/app/src/organisms/InstrumentMountItem/ProtocolInstrumentMountItem.tsx b/app/src/organisms/InstrumentMountItem/ProtocolInstrumentMountItem.tsx index acaf0789918..f96b09ef8b4 100644 --- a/app/src/organisms/InstrumentMountItem/ProtocolInstrumentMountItem.tsx +++ b/app/src/organisms/InstrumentMountItem/ProtocolInstrumentMountItem.tsx @@ -178,7 +178,9 @@ export function ProtocolInstrumentMountItem( {showPipetteWizardFlow ? ( setShowPipetteWizardFlow(false)} + closeFlow={() => { + setShowPipetteWizardFlow(false) + }} selectedPipette={selectedPipette} mount={mount as Mount} pipetteInfo={props.pipetteInfo} @@ -189,7 +191,9 @@ export function ProtocolInstrumentMountItem( setShowGripperWizardFlow(false)} + closeFlow={() => { + setShowGripperWizardFlow(false) + }} onComplete={props.instrumentsRefetch} /> ) : null} diff --git a/app/src/organisms/InterventionModal/PauseInterventionContent.tsx b/app/src/organisms/InterventionModal/PauseInterventionContent.tsx index 5f714a66e6c..38f19579228 100644 --- a/app/src/organisms/InterventionModal/PauseInterventionContent.tsx +++ b/app/src/organisms/InterventionModal/PauseInterventionContent.tsx @@ -82,7 +82,13 @@ interface PauseHeaderProps { function PauseHeader({ startedAt }: PauseHeaderProps): JSX.Element { const { t, i18n } = useTranslation('run_details') const [now, setNow] = React.useState(Date()) - useInterval(() => setNow(Date()), 500, true) + useInterval( + () => { + setNow(Date()) + }, + 500, + true + ) const runTime = startedAt != null ? formatInterval(startedAt, now) : EMPTY_TIMESTAMP diff --git a/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx b/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx index 8a5764ebc8b..d37e9710530 100644 --- a/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx +++ b/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx @@ -52,7 +52,9 @@ export function CustomLabwareOverflowMenu( const dispatch = useDispatch() const [showOverflowMenu, setShowOverflowMenu] = React.useState(false) const overflowMenuRef = useOnClickOutside({ - onClickOutside: () => setShowOverflowMenu(false), + onClickOutside: () => { + setShowOverflowMenu(false) + }, }) const trackEvent = useTrackEvent() diff --git a/app/src/organisms/LabwareDetails/Gallery.tsx b/app/src/organisms/LabwareDetails/Gallery.tsx index 8f3635545f1..3444bc149dc 100644 --- a/app/src/organisms/LabwareDetails/Gallery.tsx +++ b/app/src/organisms/LabwareDetails/Gallery.tsx @@ -71,7 +71,9 @@ export function Gallery(props: GalleryProps): JSX.Element { setCurrentImage(index)} + onClick={() => { + setCurrentImage(index) + }} data-testid="gallery_mini_image" > {img} diff --git a/app/src/organisms/LabwareDetails/StyledComponents/ExpandingTitle.tsx b/app/src/organisms/LabwareDetails/StyledComponents/ExpandingTitle.tsx index dacd79cc549..1e5b1c12930 100644 --- a/app/src/organisms/LabwareDetails/StyledComponents/ExpandingTitle.tsx +++ b/app/src/organisms/LabwareDetails/StyledComponents/ExpandingTitle.tsx @@ -20,8 +20,9 @@ interface ExpandingTitleProps { export function ExpandingTitle(props: ExpandingTitleProps): JSX.Element { const [diagramVisible, setDiagramVisible] = React.useState(false) - const toggleDiagramVisible = (): void => + const toggleDiagramVisible = (): void => { setDiagramVisible(currentDiagramVisible => !currentDiagramVisible) + } const { label, diagram } = props return ( diff --git a/app/src/organisms/LabwareDetails/index.tsx b/app/src/organisms/LabwareDetails/index.tsx index 7787e13f57f..073dbf6d06f 100644 --- a/app/src/organisms/LabwareDetails/index.tsx +++ b/app/src/organisms/LabwareDetails/index.tsx @@ -89,7 +89,9 @@ export function LabwareDetails(props: LabwareDetailsProps): JSX.Element { } React.useEffect(() => { - const timer = setTimeout(() => setShowToolTip(false), 2000) + const timer = setTimeout(() => { + setShowToolTip(false) + }, 2000) return () => { clearTimeout(timer) } diff --git a/app/src/organisms/LabwareOffsetTabs/index.tsx b/app/src/organisms/LabwareOffsetTabs/index.tsx index 1d0a2d20092..0c8bc1e7d16 100644 --- a/app/src/organisms/LabwareOffsetTabs/index.tsx +++ b/app/src/organisms/LabwareOffsetTabs/index.tsx @@ -45,19 +45,25 @@ export function LabwareOffsetTabs({ setCurrentTab('table')} + onClick={() => { + setCurrentTab('table') + }} > {t('table_view')} setCurrentTab('jupyter')} + onClick={() => { + setCurrentTab('jupyter') + }} > {t('jupyter_notebook')} setCurrentTab('cli')} + onClick={() => { + setCurrentTab('cli') + }} > {t('cli_ssh')} diff --git a/app/src/organisms/LabwarePositionCheck/AttachProbe.tsx b/app/src/organisms/LabwarePositionCheck/AttachProbe.tsx index 01a87bee4eb..b995ae9eeee 100644 --- a/app/src/organisms/LabwarePositionCheck/AttachProbe.tsx +++ b/app/src/organisms/LabwarePositionCheck/AttachProbe.tsx @@ -84,7 +84,9 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => { }, ], false - ).catch(error => setFatalError(error.message)) + ).catch(error => { + setFatalError(error.message) + }) }, []) if (pipetteName == null || pipetteMount == null) return null @@ -123,7 +125,9 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => { chainRunCommands(verifyCommands, false) .then(() => { chainRunCommands(homeCommands, false) - .then(() => proceed()) + .then(() => { + proceed() + }) .catch((e: Error) => { setFatalError( `AttachProbe failed to move to safe location after probe attach with message: ${e.message}` diff --git a/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx b/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx index 55575570cce..94ece095e3e 100644 --- a/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx +++ b/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx @@ -70,7 +70,9 @@ export const DetachProbe = (props: DetachProbeProps): JSX.Element | null => { }, ], false - ).catch(error => setFatalError(error.message)) + ).catch(error => { + setFatalError(error.message) + }) }, []) if (pipetteName == null || pipetteMount == null) return null @@ -98,7 +100,9 @@ export const DetachProbe = (props: DetachProbeProps): JSX.Element | null => { ], false ) - .then(() => proceed()) + .then(() => { + proceed() + }) .catch((e: Error) => { setFatalError( `DetachProbe failed to move to safe location after probe detach with message: ${e.message}` diff --git a/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx b/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx index 0ba541c95f6..6647d36a7a1 100644 --- a/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx +++ b/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx @@ -73,7 +73,9 @@ export const IntroScreen = (props: { const handleClickStartLPC = (): void => { const prepCommands = getPrepCommands(protocolData) chainRunCommands(prepCommands, false) - .then(() => proceed()) + .then(() => { + proceed() + }) .catch((e: Error) => { setFatalError( `IntroScreen failed to issue prep commands with message: ${e.message}` @@ -166,7 +168,9 @@ function ViewOffsets(props: ViewOffsetsProps): JSX.Element { display="flex" gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER} - onClick={() => setShowOffsetsModal(true)} + onClick={() => { + setShowOffsetsModal(true) + }} css={VIEW_OFFSETS_BUTTON_STYLE} aria-label="show labware offsets" > @@ -194,7 +198,9 @@ function ViewOffsets(props: ViewOffsetsProps): JSX.Element { width="100%" textTransform={TYPOGRAPHY.textTransformCapitalize} buttonText={t('shared:close')} - onClick={() => setShowOffsetsModal(false)} + onClick={() => { + setShowOffsetsModal(false) + }} /> } > diff --git a/app/src/organisms/LabwarePositionCheck/PickUpTip.tsx b/app/src/organisms/LabwarePositionCheck/PickUpTip.tsx index dfeda1ee216..d2aae2ea872 100644 --- a/app/src/organisms/LabwarePositionCheck/PickUpTip.tsx +++ b/app/src/organisms/LabwarePositionCheck/PickUpTip.tsx @@ -245,7 +245,9 @@ export const PickUpTip = (props: PickUpTipProps): JSX.Element | null => { ], false ) - .then(() => setShowTipConfirmation(true)) + .then(() => { + setShowTipConfirmation(true) + }) .catch((e: Error) => { setFatalError( `PickUpTip failed to move from final position with message: ${e.message}` @@ -312,7 +314,9 @@ export const PickUpTip = (props: PickUpTipProps): JSX.Element | null => { ], false ) - .then(() => proceed()) + .then(() => { + proceed() + }) .catch((e: Error) => { setFatalError( `PickUpTip failed to move to safe location after tip pick up with message: ${e.message}` diff --git a/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx b/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx index aa3b0fac940..1f7939396b6 100644 --- a/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx +++ b/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx @@ -185,7 +185,9 @@ export const ResultsSummary = ( {isOnDevice ? ( handleApplyOffsets(offsetsToApply)} + onClick={() => { + handleApplyOffsets(offsetsToApply) + }} buttonText={i18n.format(t('apply_offsets'), 'capitalize')} iconName={isSubmittingAndClosing ? 'ot-spinner' : null} iconPlacement={isSubmittingAndClosing ? 'startIcon' : null} @@ -200,7 +202,9 @@ export const ResultsSummary = ( > handleApplyOffsets(offsetsToApply)} + onClick={() => { + handleApplyOffsets(offsetsToApply) + }} disabled={isSubmittingAndClosing} > diff --git a/app/src/organisms/LabwarePositionCheck/TerseOffsetTable.stories.tsx b/app/src/organisms/LabwarePositionCheck/TerseOffsetTable.stories.tsx index 8acb76eee45..ef88c401878 100644 --- a/app/src/organisms/LabwarePositionCheck/TerseOffsetTable.stories.tsx +++ b/app/src/organisms/LabwarePositionCheck/TerseOffsetTable.stories.tsx @@ -47,7 +47,9 @@ const Template: Story> = ({ console.log('FAKE BUTTON')} + onClick={() => { + console.log('FAKE BUTTON') + }} buttonText="Apply offsets" /> diff --git a/app/src/organisms/ModuleCard/AboutModuleSlideout.tsx b/app/src/organisms/ModuleCard/AboutModuleSlideout.tsx index a1fe8b1fc9f..5ed57e35f91 100644 --- a/app/src/organisms/ModuleCard/AboutModuleSlideout.tsx +++ b/app/src/organisms/ModuleCard/AboutModuleSlideout.tsx @@ -77,7 +77,9 @@ export const AboutModuleSlideout = ( )}`} css={ALERT_ITEM_STYLE} type="warning" - onCloseClick={() => setShowBanner(false)} + onCloseClick={() => { + setShowBanner(false) + }} > {t('firmware_update_available')} ) => + onChange={(e: React.ChangeEvent) => { setIsDismissed(e.currentTarget.checked) - } + }} value={isDismissed} /> setShowErrorDetails(true)} + onClick={() => { + setShowErrorDetails(true) + }} aria-label="view_error_details" > setShowErrorDetails(false)} + onClose={() => { + setShowErrorDetails(false) + }} > {errorDetails != null ? ( @@ -97,7 +101,9 @@ export function ErrorInfo(props: ErrorInfoProps): JSX.Element | null { setShowErrorDetails(false)} + onClick={() => { + setShowErrorDetails(false) + }} textTransform={TYPOGRAPHY.textTransformCapitalize} marginTop={SPACING.spacing16} > diff --git a/app/src/organisms/ModuleCard/HeaterShakerSlideout.tsx b/app/src/organisms/ModuleCard/HeaterShakerSlideout.tsx index f3d06b1106d..26a28960c42 100644 --- a/app/src/organisms/ModuleCard/HeaterShakerSlideout.tsx +++ b/app/src/organisms/ModuleCard/HeaterShakerSlideout.tsx @@ -122,7 +122,9 @@ export const HeaterShakerSlideout = ( units={unit} autoFocus value={hsValue != null ? Math.round(hsValue) : null} - onChange={e => setHsValue(e.target.valueAsNumber)} + onChange={e => { + setHsValue(e.target.valueAsNumber) + }} type="number" caption={t('module_status_range', { min: inputMin, diff --git a/app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx b/app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx index 347710982f5..627e9889e07 100644 --- a/app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx +++ b/app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx @@ -225,7 +225,9 @@ export const MagneticModuleSlideout = ( units={info.units} value={engageHeightValue} autoFocus - onChange={e => setEngageHeightValue(e.target.value)} + onChange={e => { + setEngageHeightValue(e.target.value) + }} type="number" caption={t('module_status_range', { min: info.disengagedHeight, diff --git a/app/src/organisms/ModuleCard/TemperatureModuleSlideout.tsx b/app/src/organisms/ModuleCard/TemperatureModuleSlideout.tsx index 55b205ee3a4..5337dc158e7 100644 --- a/app/src/organisms/ModuleCard/TemperatureModuleSlideout.tsx +++ b/app/src/organisms/ModuleCard/TemperatureModuleSlideout.tsx @@ -109,7 +109,9 @@ export const TemperatureModuleSlideout = ( temperatureValue != null ? Math.round(temperatureValue) : null } autoFocus - onChange={e => setTemperatureValue(e.target.valueAsNumber)} + onChange={e => { + setTemperatureValue(e.target.valueAsNumber) + }} type="number" caption={t('module_status_range', { min: TEMP_MIN, diff --git a/app/src/organisms/ModuleCard/TestShakeSlideout.tsx b/app/src/organisms/ModuleCard/TestShakeSlideout.tsx index b221d2eed6c..81338f4ee33 100644 --- a/app/src/organisms/ModuleCard/TestShakeSlideout.tsx +++ b/app/src/organisms/ModuleCard/TestShakeSlideout.tsx @@ -256,7 +256,9 @@ export const TestShakeSlideout = ( autoFocus units={RPM} value={shakeValue != null ? Math.round(shakeValue) : null} - onChange={e => setShakeValue(e.target.valueAsNumber)} + onChange={e => { + setShakeValue(e.target.valueAsNumber) + }} type="number" caption={t('min_max_rpm', { min: HS_RPM_MIN, @@ -293,7 +295,9 @@ export const TestShakeSlideout = ( {showModuleSetupModal && ( setShowModuleSetupModal(false)} + close={() => { + setShowModuleSetupModal(false) + }} moduleDisplayName={getModuleDisplayName(module.moduleModel)} /> )} @@ -302,7 +306,9 @@ export const TestShakeSlideout = ( marginTop={SPACING.spacing4} css={TYPOGRAPHY.linkPSemiBold} id="HeaterShaker_Attachment_Instructions" - onClick={() => setShowModuleSetupModal(true)} + onClick={() => { + setShowModuleSetupModal(true) + }} > {t('show_attachment_instructions')} diff --git a/app/src/organisms/ModuleCard/ThermocyclerModuleSlideout.tsx b/app/src/organisms/ModuleCard/ThermocyclerModuleSlideout.tsx index 8ec9b9fec9f..a8d3438d6b5 100644 --- a/app/src/organisms/ModuleCard/ThermocyclerModuleSlideout.tsx +++ b/app/src/organisms/ModuleCard/ThermocyclerModuleSlideout.tsx @@ -144,7 +144,9 @@ export const ThermocyclerModuleSlideout = ( units={CELSIUS} value={tempValue != null ? Math.round(tempValue) : null} autoFocus - onChange={e => setTempValue(e.target.valueAsNumber)} + onChange={e => { + setTempValue(e.target.valueAsNumber) + }} type="number" caption={t('module_status_range', { min: tempRanges.min, diff --git a/app/src/organisms/ModuleCard/hooks.tsx b/app/src/organisms/ModuleCard/hooks.tsx index 5f2f7622f2e..3c9d3dce6c3 100644 --- a/app/src/organisms/ModuleCard/hooks.tsx +++ b/app/src/organisms/ModuleCard/hooks.tsx @@ -140,7 +140,9 @@ export function useModuleOverflowMenu( id={`about_module_${String(module.moduleModel)}`} data-testid={`about_module_${String(module.moduleModel)}`} disabled={isIncompatibleWithOT3} - onClick={() => handleAboutClick()} + onClick={() => { + handleAboutClick() + }} > {t('overflow_menu_about')} @@ -150,7 +152,9 @@ export function useModuleOverflowMenu( handleInstructionsClick()} + onClick={() => { + handleInstructionsClick() + }} whiteSpace="nowrap" > {t('heater_shaker:show_attachment_instructions')} @@ -164,15 +168,17 @@ export function useModuleOverflowMenu( id={`test_shake_${String(module.moduleModel)}`} data-testid={`test_shake_${String(module.moduleModel)}`} disabled={isDisabled} - onClick={() => + onClick={() => { handleDeactivationCommand('heaterShaker/deactivateShaker') - } + }} > {t('heater_shaker:deactivate_shaker')} ) : ( handleTestShakeClick()} + onClick={() => { + handleTestShakeClick() + }} key={`hs_test_shake_btn_${String(module.moduleModel)}`} disabled={isDisabled} > @@ -228,8 +234,12 @@ export function useModuleOverflowMenu( const sendBlockTempCommand = module.moduleType === THERMOCYCLER_MODULE_TYPE && module.data.targetTemperature != null - ? () => handleDeactivationCommand('thermocycler/deactivateBlock') - : () => handleSlideoutClick(false) + ? () => { + handleDeactivationCommand('thermocycler/deactivateBlock') + } + : () => { + handleSlideoutClick(false) + } const thermoSetBlockTempBtn = ( handleDeactivationCommand('thermocycler/deactivateLid') - : () => handleSlideoutClick(true), + ? () => { + handleDeactivationCommand('thermocycler/deactivateLid') + } + : () => { + handleSlideoutClick(true) + }, }, { setSetting: @@ -282,8 +296,12 @@ export function useModuleOverflowMenu( menuButtons: [aboutModuleBtn], onClick: module.data.status !== 'idle' - ? () => handleDeactivationCommand('temperatureModule/deactivate') - : () => handleSlideoutClick(false), + ? () => { + handleDeactivationCommand('temperatureModule/deactivate') + } + : () => { + handleSlideoutClick(false) + }, }, ], magneticModuleType: [ @@ -297,8 +315,12 @@ export function useModuleOverflowMenu( menuButtons: [aboutModuleBtn], onClick: module.data.status !== 'disengaged' - ? () => handleDeactivationCommand('magneticModule/disengage') - : () => handleSlideoutClick(false), + ? () => { + handleDeactivationCommand('magneticModule/disengage') + } + : () => { + handleSlideoutClick(false) + }, }, ], heaterShakerModuleType: [ @@ -319,8 +341,12 @@ export function useModuleOverflowMenu( module.moduleType === HEATERSHAKER_MODULE_TYPE && module.data.temperatureStatus !== 'idle' && module.data.status !== 'idle' - ? () => handleDeactivationCommand('heaterShaker/deactivateHeater') - : () => handleSlideoutClick(false), + ? () => { + handleDeactivationCommand('heaterShaker/deactivateHeater') + } + : () => { + handleSlideoutClick(false) + }, }, ], } diff --git a/app/src/organisms/ModuleCard/index.tsx b/app/src/organisms/ModuleCard/index.tsx index 52f3ed99f65..945b9857b8f 100644 --- a/app/src/organisms/ModuleCard/index.tsx +++ b/app/src/organisms/ModuleCard/index.tsx @@ -110,7 +110,9 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => { setShowOverflowMenu, } = useMenuHandleClickOutside() const moduleOverflowWrapperRef = useOnClickOutside({ - onClickOutside: () => setShowOverflowMenu(false), + onClickOutside: () => { + setShowOverflowMenu(false) + }, }) const [showSlideout, setShowSlideout] = React.useState(false) const [hasSecondary, setHasSecondary] = React.useState(false) @@ -258,7 +260,9 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => { {showCalModal ? ( setShowCalModal(false)} + closeFlow={() => { + setShowCalModal(false) + }} isPrepCommandLoading={isCommandMutationLoading} prepCommandErrorMessage={ prepCommandErrorMessage === '' ? undefined : prepCommandErrorMessage @@ -267,7 +271,9 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => { ) : null} {showHSWizard && module.moduleType === HEATERSHAKER_MODULE_TYPE && ( setShowHSWizard(false)} + close={() => { + setShowHSWizard(false) + }} moduleDisplayName={getModuleDisplayName(module.moduleModel)} /> )} @@ -276,14 +282,18 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => { module={module} isSecondary={hasSecondary} showSlideout={showSlideout} - onCloseClick={() => setShowSlideout(false)} + onCloseClick={() => { + setShowSlideout(false) + }} /> )} {showAboutModule && ( setShowAboutModule(false)} + onCloseClick={() => { + setShowAboutModule(false) + }} firmwareUpdateClick={handleFirmwareUpdateClick} /> )} @@ -291,7 +301,9 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => { setShowTestShake(false)} + onCloseClick={() => { + setShowTestShake(false) + }} /> )} @@ -454,7 +466,9 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => { setShowOverflowMenu(false)} + onClick={() => { + setShowOverflowMenu(false) + }} > history.push('/deck-configuration')} + onClick={() => { + history.push('/deck-configuration') + }} > diff --git a/app/src/organisms/Navigation/RestartRobotConfirmationModal.tsx b/app/src/organisms/Navigation/RestartRobotConfirmationModal.tsx index 40884546868..d231f2deda5 100644 --- a/app/src/organisms/Navigation/RestartRobotConfirmationModal.tsx +++ b/app/src/organisms/Navigation/RestartRobotConfirmationModal.tsx @@ -61,7 +61,9 @@ export function RestartRobotConfirmationModal({ setShowRestartRobotConfirmationModal(false)} + onClick={() => { + setShowRestartRobotConfirmationModal(false) + }} /> history.push('/network-setup')} + onClickBack={() => { + history.push('/network-setup') + }} /> ) : null} handleNetworkPress(nw.ssid)} + onClick={() => { + handleNetworkPress(nw.ssid) + }} > {nw.ssid} diff --git a/app/src/organisms/NetworkSettings/SelectAuthenticationType.tsx b/app/src/organisms/NetworkSettings/SelectAuthenticationType.tsx index 9314f174bc0..01c20afac8c 100644 --- a/app/src/organisms/NetworkSettings/SelectAuthenticationType.tsx +++ b/app/src/organisms/NetworkSettings/SelectAuthenticationType.tsx @@ -115,7 +115,9 @@ export function SelectAuthenticationType({ width="100%" alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_CENTER} - onClick={() => setShowAlternativeSecurityTypeModal(true)} + onClick={() => { + setShowAlternativeSecurityTypeModal(true) + }} padding={`${SPACING.spacing16} ${SPACING.spacing24}`} > setInputSsid(e.target.value)} + onChange={e => { + setInputSsid(e.target.value) + }} type="text" error={errorMessage} - onBlur={e => e.target.focus()} + onBlur={e => { + e.target.focus() + }} autoFocus /> diff --git a/app/src/organisms/NetworkSettings/WifiConnectionDetails.tsx b/app/src/organisms/NetworkSettings/WifiConnectionDetails.tsx index 28fd4caab75..e2378ad3b05 100644 --- a/app/src/organisms/NetworkSettings/WifiConnectionDetails.tsx +++ b/app/src/organisms/NetworkSettings/WifiConnectionDetails.tsx @@ -87,14 +87,16 @@ export function WifiConnectionDetails({ flex="1" buttonType="secondary" buttonText={t('view_network_details')} - onClick={() => setShowNetworkDetailsModal(true)} + onClick={() => { + setShowNetworkDetailsModal(true) + }} /> + onClick={() => { history.push('/robot-settings/update-robot-during-onboarding') - } + }} /> diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx index 2f640e7e522..786a6192584 100644 --- a/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx +++ b/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx @@ -92,8 +92,9 @@ export function ProtocolWithLastRun({ const trackEvent = useTrackEvent() // TODO(BC, 08/29/23): reintroduce this analytics event when we refactor the hook to fetch data lazily (performance concern) // const { trackProtocolRunEvent } = useTrackProtocolRunEvent(runData.id) - const onResetSuccess = (createRunResponse: Run): void => + const onResetSuccess = (createRunResponse: Run): void => { history.push(`runs/${createRunResponse.data.id}/setup`) + } const { cloneRun } = useCloneRun(runData.id, onResetSuccess) const robotInitStatus = useRobotInitializationStatus() const isRobotInitializing = diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx index 7aaf9007c1a..a7f3436e300 100644 --- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx +++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx @@ -89,7 +89,9 @@ export function ConfirmCancelRunModal({ setShowConfirmCancelRunModal(false)} + onOutsideClick={() => { + setShowConfirmCancelRunModal(false) + }} > setShowConfirmCancelRunModal(false)} + onClick={() => { + setShowConfirmCancelRunModal(false) + }} /> setShowRunFailedModal(false)} + onOutsideClick={() => { + setShowRunFailedModal(false) + }} > { title={startCase(t('attach_pipette', { mount: mount }))} currentStep={0} totalSteps={3} - onExit={showExitConfirmation ? exit : () => setShowExitConfirmation(true)} + onExit={ + showExitConfirmation + ? exit + : () => { + setShowExitConfirmation(true) + } + } /> ) return createPortal( @@ -152,7 +158,9 @@ export const ChoosePipette = (props: ChoosePipetteProps): JSX.Element => { > {showExitConfirmation ? ( setShowExitConfirmation(false)} + goBack={() => { + setShowExitConfirmation(false) + }} proceed={exit} flowType={FLOWS.ATTACH} isOnDevice={isOnDevice} @@ -174,7 +182,9 @@ export const ChoosePipette = (props: ChoosePipetteProps): JSX.Element => { setSelectedPipette(SINGLE_MOUNT_PIPETTES)} + onClick={() => { + setSelectedPipette(SINGLE_MOUNT_PIPETTES) + }} > { setSelectedPipette(NINETY_SIX_CHANNEL)} + onClick={() => { + setSelectedPipette(NINETY_SIX_CHANNEL) + }} > { > {showExitConfirmation ? ( setShowExitConfirmation(false)} + goBack={() => { + setShowExitConfirmation(false) + }} proceed={exit} flowType={FLOWS.ATTACH} isOnDevice={isOnDevice} @@ -233,7 +247,9 @@ export const ChoosePipette = (props: ChoosePipetteProps): JSX.Element => { > setSelectedPipette(SINGLE_MOUNT_PIPETTES)} + onClick={() => { + setSelectedPipette(SINGLE_MOUNT_PIPETTES) + }} > { setSelectedPipette(NINETY_SIX_CHANNEL)} + onClick={() => { + setSelectedPipette(NINETY_SIX_CHANNEL) + }} > { gridGap={SPACING.spacing8} > setShowPipetteStillAttached(false)} + onClick={() => { + setShowPipetteStillAttached(false) + }} marginLeft={SPACING.spacing32} > diff --git a/app/src/organisms/PipetteWizardFlows/ProbeNotAttached.tsx b/app/src/organisms/PipetteWizardFlows/ProbeNotAttached.tsx index b73111af420..221a280cbab 100644 --- a/app/src/organisms/PipetteWizardFlows/ProbeNotAttached.tsx +++ b/app/src/organisms/PipetteWizardFlows/ProbeNotAttached.tsx @@ -49,7 +49,11 @@ export const ProbeNotAttached = ( css={ALIGN_BUTTONS} gridGap={SPACING.spacing8} > - setShowUnableToDetect(false)}> + { + setShowUnableToDetect(false) + }} + > {t('shared:go_back')} diff --git a/app/src/organisms/PipetteWizardFlows/Results.tsx b/app/src/organisms/PipetteWizardFlows/Results.tsx index 5f652f3f895..5a9a7778971 100644 --- a/app/src/organisms/PipetteWizardFlows/Results.tsx +++ b/app/src/organisms/PipetteWizardFlows/Results.tsx @@ -293,7 +293,9 @@ export const Results = (props: ResultsProps): JSX.Element => { )} setNumberOfTryAgains(numberOfTryAgains + 1)} + proceed={() => { + setNumberOfTryAgains(numberOfTryAgains + 1) + }} proceedButtonText={i18n.format(t('try_again'), 'capitalize')} setFetching={setFetching} isFetching={isFetching} diff --git a/app/src/organisms/PipetteWizardFlows/index.tsx b/app/src/organisms/PipetteWizardFlows/index.tsx index d1bec49c543..3d7b8c21854 100644 --- a/app/src/organisms/PipetteWizardFlows/index.tsx +++ b/app/src/organisms/PipetteWizardFlows/index.tsx @@ -192,8 +192,12 @@ export const PipetteWizardFlows = ( deleteMaintenanceRun, isLoading: isDeleteLoading, } = useDeleteMaintenanceRunMutation({ - onSuccess: () => closeFlow(), - onError: () => closeFlow(), + onSuccess: () => { + closeFlow() + }, + onError: () => { + closeFlow() + }, }) const handleCleanUpAndClose = (): void => { diff --git a/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx b/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx index 0f208869825..442db78e207 100644 --- a/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx +++ b/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx @@ -201,7 +201,9 @@ export const LabwareDetailOverflowMenu = ( {showLabwareDetailSlideout ? ( setShowLabwareDetailSlideout(false)} + onClose={() => { + setShowLabwareDetailSlideout(false) + }} /> ) : null} , diff --git a/app/src/organisms/ProtocolDetails/index.tsx b/app/src/organisms/ProtocolDetails/index.tsx index 1be2faa6390..3f03be5e9e2 100644 --- a/app/src/organisms/ProtocolDetails/index.tsx +++ b/app/src/organisms/ProtocolDetails/index.tsx @@ -180,7 +180,9 @@ const ReadMoreContent = (props: ReadMoreContentProps): JSX.Element => { role="button" css={TYPOGRAPHY.linkPSemiBold} marginTop={SPACING.spacing8} - onClick={() => setIsReadMore(!isReadMore)} + onClick={() => { + setIsReadMore(!isReadMore) + }} > {isReadMore ? i18n.format(t('read_more'), 'capitalize') @@ -381,7 +383,9 @@ export function ProtocolDetails( ? createPortal( setShowDeckViewModal(false)} + onClose={() => { + setShowDeckViewModal(false) + }} > {deckMap} , @@ -395,13 +399,17 @@ export function ProtocolDetails( > setShowChooseRobotToRunProtocolSlideout(false)} + onCloseClick={() => { + setShowChooseRobotToRunProtocolSlideout(false) + }} showSlideout={showChooseRobotToRunProtocolSlideout} storedProtocolData={props} /> setShowSendProtocolToFlexSlideout(false)} + onCloseClick={() => { + setShowSendProtocolToFlexSlideout(false) + }} storedProtocolData={props} /> @@ -482,7 +490,9 @@ export function ProtocolDetails( `} > handleRunProtocolButtonClick()} + onClick={() => { + handleRunProtocolButtonClick() + }} data-testid="ProtocolDetails_runProtocol" disabled={analysisStatus === 'loading'} > @@ -534,12 +544,12 @@ export function ProtocolDetails( right={SPACING.spacing2} > + handleRunProtocol={() => { setShowChooseRobotToRunProtocolSlideout(true) - } - handleSendProtocolToFlex={() => + }} + handleSendProtocolToFlex={() => { setShowSendProtocolToFlexSlideout(true) - } + }} storedProtocolData={props} data-testid="ProtocolDetails_overFlowMenu" /> @@ -574,7 +584,9 @@ export function ProtocolDetails( height={SPACING.spacing24} width={SPACING.spacing24} css={ZOOM_ICON_STYLE} - onClick={() => setShowDeckViewModal(true)} + onClick={() => { + setShowDeckViewModal(true) + }} > setShowConfigurationModal(false)} + closeModal={() => { + setShowConfigurationModal(false) + }} providedFixtureOptions={providedFixtureOptions} isOnDevice /> diff --git a/app/src/organisms/ProtocolSetupInstruments/index.tsx b/app/src/organisms/ProtocolSetupInstruments/index.tsx index 09341e71bcf..36e0b4afb37 100644 --- a/app/src/organisms/ProtocolSetupInstruments/index.tsx +++ b/app/src/organisms/ProtocolSetupInstruments/index.tsx @@ -53,7 +53,9 @@ export function ProtocolSetupInstruments({ > setSetupScreen('prepare to run')} + onClick={() => { + setSetupScreen('prepare to run') + }} /> {getShowPipetteCalibrationWarning(attachedInstruments) && ( diff --git a/app/src/organisms/ProtocolSetupLabware/LabwareMapViewModal.tsx b/app/src/organisms/ProtocolSetupLabware/LabwareMapViewModal.tsx index e4b353944d2..e663d4dc9b9 100644 --- a/app/src/organisms/ProtocolSetupLabware/LabwareMapViewModal.tsx +++ b/app/src/organisms/ProtocolSetupLabware/LabwareMapViewModal.tsx @@ -79,7 +79,9 @@ export function LabwareMapViewModal( nestedLabwareDef: topLabwareDefinition, onLabwareClick: topLabwareDefinition != null && topLabwareId != null - ? () => handleLabwareClick(topLabwareDefinition, topLabwareId) + ? () => { + handleLabwareClick(topLabwareDefinition, topLabwareId) + } : undefined, moduleChildren: null, } @@ -99,8 +101,9 @@ export function LabwareMapViewModal( labwareLocation: { slotName }, definition: topLabwareDefinition, topLabwareId, - onLabwareClick: () => - handleLabwareClick(topLabwareDefinition, topLabwareId), + onLabwareClick: () => { + handleLabwareClick(topLabwareDefinition, topLabwareId) + }, labwareChildren: null, } } diff --git a/app/src/organisms/ProtocolSetupLabware/index.tsx b/app/src/organisms/ProtocolSetupLabware/index.tsx index e1dbcae4911..992b5ef1a25 100644 --- a/app/src/organisms/ProtocolSetupLabware/index.tsx +++ b/app/src/organisms/ProtocolSetupLabware/index.tsx @@ -225,7 +225,9 @@ export function ProtocolSetupLabware({ deckDef={deckDef} attachedProtocolModuleMatches={attachedProtocolModuleMatches} handleLabwareClick={handleLabwareClick} - onCloseClick={() => setShowDeckMapModal(false)} + onCloseClick={() => { + setShowDeckMapModal(false) + }} initialLoadedLabwareByAdapter={initialLoadedLabwareByAdapter} /> ) : null} @@ -275,7 +277,9 @@ export function ProtocolSetupLabware({ )} setSetupScreen('prepare to run')} + onClick={() => { + setSetupScreen('prepare to run') + }} /> - setShowDeckMapModal(true)} /> + { + setShowDeckMapModal(true) + }} + /> ) } diff --git a/app/src/organisms/ProtocolSetupLiquids/LiquidDetails.tsx b/app/src/organisms/ProtocolSetupLiquids/LiquidDetails.tsx index 05e2378f772..5005d872ac4 100644 --- a/app/src/organisms/ProtocolSetupLiquids/LiquidDetails.tsx +++ b/app/src/organisms/ProtocolSetupLiquids/LiquidDetails.tsx @@ -76,7 +76,9 @@ export function LiquidDetails(props: LiquidDetailsProps): JSX.Element { labwareId={labwareIdModal} liquidId={liquid.id} runId={runId} - closeModal={() => setLabwareIdModal(null)} + closeModal={() => { + setLabwareIdModal(null) + }} /> )} @@ -97,7 +99,9 @@ export function LiquidDetails(props: LiquidDetailsProps): JSX.Element { setLabwareIdModal(labware.labwareId)} + onClick={() => { + setLabwareIdModal(labware.labwareId) + }} > diff --git a/app/src/organisms/ProtocolSetupLiquids/index.tsx b/app/src/organisms/ProtocolSetupLiquids/index.tsx index af886000ab2..ad717ae64c8 100644 --- a/app/src/organisms/ProtocolSetupLiquids/index.tsx +++ b/app/src/organisms/ProtocolSetupLiquids/index.tsx @@ -44,7 +44,9 @@ export function ProtocolSetupLiquids({ <> setSetupScreen('prepare to run')} + onClick={() => { + setSetupScreen('prepare to run') + }} /> setOpenItem(prevOpenItem => !prevOpenItem)} + onClick={() => { + setOpenItem(prevOpenItem => !prevOpenItem) + }} aria-label={`Liquids_${liquid.id}`} > setShowLocationConflictModal(true) + ? () => { + setShowLocationConflictModal(true) + } : () => { setCutoutId(cutoutId) setProvidedFixtureOptions(compatibleCutoutFixtureIds) @@ -186,7 +188,9 @@ function FixtureTableItem({ {showLocationConflictModal ? ( setShowLocationConflictModal(false)} + onCloseClick={() => { + setShowLocationConflictModal(false) + }} cutoutId={cutoutId} requiredFixtureId={compatibleCutoutFixtureIds[0]} isOnDevice={true} diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/ModulesAndDeckMapViewModal.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/ModulesAndDeckMapViewModal.tsx index 37d9ba6c3b0..13ade7df2d0 100644 --- a/app/src/organisms/ProtocolSetupModulesAndDeck/ModulesAndDeckMapViewModal.tsx +++ b/app/src/organisms/ProtocolSetupModulesAndDeck/ModulesAndDeckMapViewModal.tsx @@ -57,7 +57,9 @@ export function ModulesAndDeckMapViewModal({ setShowDeckMapModal(false)} + onOutsideClick={() => { + setShowDeckMapModal(false) + }} > setShowSetupInstructionsModal(false)} + onOutsideClick={() => { + setShowSetupInstructionsModal(false) + }} > setSetupScreen('prepare to run')} + onClickBack={() => { + setSetupScreen('prepare to run') + }} buttonText={i18n.format(t('setup_instructions'), 'titleCase')} buttonType="tertiaryLowLight" iconName="information" iconPlacement="startIcon" - onClickButton={() => setShowSetupInstructionsModal(true)} + onClickButton={() => { + setShowSetupInstructionsModal(true) + }} /> - setShowDeckMapModal(true)} /> + { + setShowDeckMapModal(true) + }} + /> ) } diff --git a/app/src/organisms/ProtocolSetupParameters/AnalysisFailedModal.tsx b/app/src/organisms/ProtocolSetupParameters/AnalysisFailedModal.tsx index f52aa8a2265..26a5120620d 100644 --- a/app/src/organisms/ProtocolSetupParameters/AnalysisFailedModal.tsx +++ b/app/src/organisms/ProtocolSetupParameters/AnalysisFailedModal.tsx @@ -42,7 +42,9 @@ export function AnalysisFailedModal({ return ( setShowAnalysisFailedModal(false)} + onOutsideClick={() => { + setShowAnalysisFailedModal(false) + }} > + onClickButton={() => { resetValueDisabled ? makeSnackbar(t('no_custom_values')) : setParameter(parameter.default, parameter.variableName) - } + }} /> handleOnClick(option.value)} + onChange={() => { + handleOnClick(option.value) + }} isSelected={option.value === rawValue} /> ) diff --git a/app/src/organisms/ProtocolSetupParameters/ChooseNumber.tsx b/app/src/organisms/ProtocolSetupParameters/ChooseNumber.tsx index a5dbef5224f..02cba23365d 100644 --- a/app/src/organisms/ProtocolSetupParameters/ChooseNumber.tsx +++ b/app/src/organisms/ProtocolSetupParameters/ChooseNumber.tsx @@ -94,11 +94,11 @@ export function ChooseNumber({ }} buttonType="tertiaryLowLight" buttonText={t('restore_default')} - onClickButton={() => + onClickButton={() => { resetValueDisabled ? makeSnackbar(t('no_custom_values')) : setParamValue(String(parameter.default)) - } + }} /> e.target.focus()} + onBlur={e => { + e.target.focus() + }} onChange={e => { const updatedValue = parameter.type === 'int' diff --git a/app/src/organisms/ProtocolSetupParameters/ViewOnlyParameters.tsx b/app/src/organisms/ProtocolSetupParameters/ViewOnlyParameters.tsx index 3ce9169f77f..f155779a39b 100644 --- a/app/src/organisms/ProtocolSetupParameters/ViewOnlyParameters.tsx +++ b/app/src/organisms/ProtocolSetupParameters/ViewOnlyParameters.tsx @@ -41,7 +41,9 @@ export function ViewOnlyParameters({ <> setSetupScreen('prepare to run')} + onClickBack={() => { + setSetupScreen('prepare to run') + }} inlineNotification={{ type: 'neutral', heading: t('values_are_view_only'), diff --git a/app/src/organisms/ProtocolSetupParameters/index.tsx b/app/src/organisms/ProtocolSetupParameters/index.tsx index c99e38c39b5..b6fbfd52a3c 100644 --- a/app/src/organisms/ProtocolSetupParameters/index.tsx +++ b/app/src/organisms/ProtocolSetupParameters/index.tsx @@ -104,11 +104,9 @@ export function ProtocolSetupParameters({ const { createRun, isLoading } = useCreateRunMutation({ onSuccess: data => { - queryClient - .invalidateQueries([host, 'runs']) - .catch((e: Error) => - console.error(`could not invalidate runs cache: ${e.message}`) - ) + queryClient.invalidateQueries([host, 'runs']).catch((e: Error) => { + console.error(`could not invalidate runs cache: ${e.message}`) + }) }, }) const handleConfirmValues = (): void => { @@ -143,7 +141,9 @@ export function ProtocolSetupParameters({ <> history.goBack()} + onClickBack={() => { + history.goBack() + }} onClickButton={handleConfirmValues} buttonText={t('confirm_values')} iconName={isLoading || startSetup ? 'ot-spinner' : undefined} @@ -152,7 +152,9 @@ export function ProtocolSetupParameters({ buttonType: 'tertiaryLowLight', buttonText: t('restore_defaults'), disabled: isLoading || startSetup, - onClick: () => showResetValuesModal(true), + onClick: () => { + showResetValuesModal(true) + }, }} /> handleSetParameter(parameter)} + onClickSetupStep={() => { + handleSetParameter(parameter) + }} detail={formatRunTimeParameterValue(parameter, t)} description={parameter.description} fontSize="h4" @@ -185,7 +189,9 @@ export function ProtocolSetupParameters({ if (chooseValueScreen != null) { children = ( setChooseValueScreen(null)} + handleGoBack={() => { + setChooseValueScreen(null) + }} parameter={chooseValueScreen} setParameter={updateParameters} rawValue={chooseValueScreen.value} @@ -195,7 +201,9 @@ export function ProtocolSetupParameters({ if (showNumericalInputScreen != null) { children = ( setShowNumericalInputScreen(null)} + handleGoBack={() => { + setShowNumericalInputScreen(null) + }} parameter={showNumericalInputScreen} setParameter={updateParameters} /> @@ -208,7 +216,9 @@ export function ProtocolSetupParameters({ showResetValuesModal(false)} + handleGoBack={() => { + showResetValuesModal(false) + }} /> ) : null} {children} diff --git a/app/src/organisms/ProtocolUpload/hooks/useCloneRun.ts b/app/src/organisms/ProtocolUpload/hooks/useCloneRun.ts index fe6e3ab3649..ecf4fabcad5 100644 --- a/app/src/organisms/ProtocolUpload/hooks/useCloneRun.ts +++ b/app/src/organisms/ProtocolUpload/hooks/useCloneRun.ts @@ -32,9 +32,9 @@ export function useCloneRun( 'protocols', protocolKey, ]) - Promise.all([invalidateRuns, invalidateProtocols]).catch((e: Error) => + Promise.all([invalidateRuns, invalidateProtocols]).catch((e: Error) => { console.error(`error invalidating runs query: ${e.message}`) - ) + }) if (onSuccessCallback != null) onSuccessCallback(response) }, }) diff --git a/app/src/organisms/ProtocolUpload/hooks/useCloseCurrentRun.ts b/app/src/organisms/ProtocolUpload/hooks/useCloseCurrentRun.ts index 00eb0d73bbd..811ac95e223 100644 --- a/app/src/organisms/ProtocolUpload/hooks/useCloseCurrentRun.ts +++ b/app/src/organisms/ProtocolUpload/hooks/useCloseCurrentRun.ts @@ -24,7 +24,9 @@ export function useCloseCurrentRun(): { if (currentRunId != null) { dismissCurrentRun(currentRunId, { ...options, - onError: () => console.warn('failed to dismiss current'), + onError: () => { + console.warn('failed to dismiss current') + }, }) } } diff --git a/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx b/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx index 585aaa2277b..8c096d81d5a 100644 --- a/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx +++ b/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx @@ -99,7 +99,9 @@ export function ProtocolCard(props: ProtocolCardProps): JSX.Element | null { minWidth="36rem" padding={SPACING.spacing16} position="relative" - onClick={() => history.push(`/protocols/${protocolKey}`)} + onClick={() => { + history.push(`/protocols/${protocolKey}`) + }} > (false) const sortBy = useSelector(getProtocolsDesktopSortKey) ?? 'alphabetical' const [showSortByMenu, setShowSortByMenu] = React.useState(false) - const toggleSetShowSortByMenu = (): void => setShowSortByMenu(!showSortByMenu) + const toggleSetShowSortByMenu = (): void => { + setShowSortByMenu(!showSortByMenu) + } const { t } = useTranslation('protocol_info') const { storedProtocols } = props const [ @@ -134,14 +136,18 @@ export function ProtocolList(props: ProtocolListProps): JSX.Element | null { <> setShowChooseRobotToRunProtocolSlideout(false)} + onCloseClick={() => { + setShowChooseRobotToRunProtocolSlideout(false) + }} showSlideout={showChooseRobotToRunProtocolSlideout} storedProtocolData={selectedProtocol} /> setShowSendProtocolToFlexSlideout(false)} + onCloseClick={() => { + setShowSendProtocolToFlexSlideout(false) + }} storedProtocolData={selectedProtocol} /> @@ -203,22 +209,46 @@ export function ProtocolList(props: ProtocolListProps): JSX.Element | null { right="7rem" flexDirection={DIRECTION_COLUMN} > - handleProtocolsSortKey('alphabetical')}> + { + handleProtocolsSortKey('alphabetical') + }} + > {t('shared:alphabetical')} - handleProtocolsSortKey('reverse')}> + { + handleProtocolsSortKey('reverse') + }} + > {t('shared:reverse')} - handleProtocolsSortKey('recent')}> + { + handleProtocolsSortKey('recent') + }} + > {t('most_recent_updates')} - handleProtocolsSortKey('oldest')}> + { + handleProtocolsSortKey('oldest') + }} + > {t('oldest_updates')} - handleProtocolsSortKey('flex')}> + { + handleProtocolsSortKey('flex') + }} + > {t('robot_type_first', { robotType: FLEX })} - handleProtocolsSortKey('ot2')}> + { + handleProtocolsSortKey('ot2') + }} + > {t('robot_type_first', { robotType: OT2 })} @@ -229,7 +259,11 @@ export function ProtocolList(props: ProtocolListProps): JSX.Element | null { backgroundColor={COLORS.transparent} /> ) : null} - setShowImportProtocolSlideout(true)}> + { + setShowImportProtocolSlideout(true) + }} + > {t('import')} @@ -253,11 +287,15 @@ export function ProtocolList(props: ProtocolListProps): JSX.Element | null { setShowImportProtocolSlideout(false)} + onCloseClick={() => { + setShowImportProtocolSlideout(false) + }} > setShowImportProtocolSlideout(false)} + onUpload={() => { + setShowImportProtocolSlideout(false) + }} /> diff --git a/app/src/organisms/ProtocolsLanding/ProtocolOverflowMenu.tsx b/app/src/organisms/ProtocolsLanding/ProtocolOverflowMenu.tsx index a653849eb98..3baf35b8483 100644 --- a/app/src/organisms/ProtocolsLanding/ProtocolOverflowMenu.tsx +++ b/app/src/organisms/ProtocolsLanding/ProtocolOverflowMenu.tsx @@ -112,7 +112,9 @@ export function ProtocolOverflowMenu( e.stopPropagation()} + onClick={(e: React.MouseEvent) => { + e.stopPropagation() + }} > handleUpload(file)} + onUpload={(file: File) => { + handleUpload(file) + }} uploadText={t('valid_file_types')} dragAndDropText={ diff --git a/app/src/organisms/QuickTransferFlow/SelectDestLabware.tsx b/app/src/organisms/QuickTransferFlow/SelectDestLabware.tsx index 5cc42cfaa97..705dcaf01f1 100644 --- a/app/src/organisms/QuickTransferFlow/SelectDestLabware.tsx +++ b/app/src/organisms/QuickTransferFlow/SelectDestLabware.tsx @@ -99,7 +99,9 @@ export function SelectDestLabware( key={category} title={category} isSelected={category === selectedCategory} - onClick={() => setSelectedCategory(category)} + onClick={() => { + setSelectedCategory(category) + }} height={SPACING.spacing60} > {t(category)} diff --git a/app/src/organisms/QuickTransferFlow/SelectSourceLabware.tsx b/app/src/organisms/QuickTransferFlow/SelectSourceLabware.tsx index 3524d7dd3c7..b070ce22443 100644 --- a/app/src/organisms/QuickTransferFlow/SelectSourceLabware.tsx +++ b/app/src/organisms/QuickTransferFlow/SelectSourceLabware.tsx @@ -100,7 +100,9 @@ export function SelectSourceLabware( key={category} title={category} isSelected={category === selectedCategory} - onClick={() => setSelectedCategory(category)} + onClick={() => { + setSelectedCategory(category) + }} height={SPACING.spacing60} > {t(category)} diff --git a/app/src/organisms/QuickTransferFlow/SummaryAndSettings.tsx b/app/src/organisms/QuickTransferFlow/SummaryAndSettings.tsx index 9458df10c75..355056ffd30 100644 --- a/app/src/organisms/QuickTransferFlow/SummaryAndSettings.tsx +++ b/app/src/organisms/QuickTransferFlow/SummaryAndSettings.tsx @@ -69,11 +69,9 @@ export function SummaryAndSettings( const { createRun } = useCreateRunMutation( { onSuccess: data => { - queryClient - .invalidateQueries([host, 'runs']) - .catch((e: Error) => - console.error(`error invalidating runs query: ${e.message}`) - ) + queryClient.invalidateQueries([host, 'runs']).catch((e: Error) => { + console.error(`error invalidating runs query: ${e.message}`) + }) history.push(`/runs/${data.data.id}/setup`) }, }, @@ -103,7 +101,9 @@ export function SummaryAndSettings( setShowSaveOrRunModal(true)} + onClickButton={() => { + setShowSaveOrRunModal(true) + }} secondaryButtonProps={exitButtonProps} /> setSelectedCategory(category)} + onClick={() => { + setSelectedCategory(category) + }} height={SPACING.spacing60} > {t(category)} diff --git a/app/src/organisms/QuickTransferFlow/VolumeEntry.tsx b/app/src/organisms/QuickTransferFlow/VolumeEntry.tsx index 351f72bacd9..e1214d49045 100644 --- a/app/src/organisms/QuickTransferFlow/VolumeEntry.tsx +++ b/app/src/organisms/QuickTransferFlow/VolumeEntry.tsx @@ -111,7 +111,9 @@ export function VolumeEntry(props: VolumeEntryProps): JSX.Element { > setVolume(e)} + onChange={e => { + setVolume(e) + }} /> diff --git a/app/src/organisms/QuickTransferFlow/index.tsx b/app/src/organisms/QuickTransferFlow/index.tsx index f91a3af3871..972651ce636 100644 --- a/app/src/organisms/QuickTransferFlow/index.tsx +++ b/app/src/organisms/QuickTransferFlow/index.tsx @@ -37,7 +37,9 @@ export const QuickTransferFlow = (): JSX.Element => { confirm: confirmExit, showConfirmation: showConfirmExit, cancel: cancelExit, - } = useConditionalConfirm(() => history.push('protocols'), true) + } = useConditionalConfirm(() => { + history.push('protocols') + }, true) const exitButtonProps: React.ComponentProps = { buttonType: 'tertiaryLowLight', @@ -47,15 +49,21 @@ export const QuickTransferFlow = (): JSX.Element => { const sharedMiddleStepProps = { state, dispatch, - onBack: () => setCurrentStep(prevStep => prevStep - 1), - onNext: () => setCurrentStep(prevStep => prevStep + 1), + onBack: () => { + setCurrentStep(prevStep => prevStep - 1) + }, + onNext: () => { + setCurrentStep(prevStep => prevStep + 1) + }, exitButtonProps, } const contentInOrder: JSX.Element[] = [ setCurrentStep(prevStep => prevStep + 1)} + onNext={() => { + setCurrentStep(prevStep => prevStep + 1) + }} exitButtonProps={exitButtonProps} />, , diff --git a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/ModuleCalibrationOverflowMenu.tsx b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/ModuleCalibrationOverflowMenu.tsx index 275e9490011..4a19f4305ff 100644 --- a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/ModuleCalibrationOverflowMenu.tsx +++ b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/ModuleCalibrationOverflowMenu.tsx @@ -59,7 +59,9 @@ export function ModuleCalibrationOverflowMenu({ const [targetProps, tooltipProps] = useHoverTooltip() const OverflowMenuRef = useOnClickOutside({ - onClickOutside: () => setShowOverflowMenu(false), + onClickOutside: () => { + setShowOverflowMenu(false) + }, }) const { chainLiveCommands, isCommandMutationLoading } = useChainLiveCommands() diff --git a/app/src/organisms/RobotSettingsCalibration/CalibrationHealthCheck.tsx b/app/src/organisms/RobotSettingsCalibration/CalibrationHealthCheck.tsx index f5a92e89ca7..821f6fec11a 100644 --- a/app/src/organisms/RobotSettingsCalibration/CalibrationHealthCheck.tsx +++ b/app/src/organisms/RobotSettingsCalibration/CalibrationHealthCheck.tsx @@ -166,7 +166,9 @@ export function CalibrationHealthCheck({ setShowCalBlockModal(false)} + closePrompt={() => { + setShowCalBlockModal(false) + }} />, getTopPortalEl() ) diff --git a/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx b/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx index f485371fc2d..526eb07c074 100644 --- a/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx +++ b/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx @@ -64,7 +64,9 @@ export function RobotSettingsGripperCalibration( setShowOverflowMenu, } = useMenuHandleClickOutside() const calsOverflowWrapperRef = useOnClickOutside({ - onClickOutside: () => setShowOverflowMenu(false), + onClickOutside: () => { + setShowOverflowMenu(false) + }, }) const [showWizardFlow, setShowWizardFlow] = React.useState(false) const isEstopNotDisengaged = useIsEstopNotDisengaged(robotName) @@ -132,7 +134,9 @@ export function RobotSettingsGripperCalibration( setShowWizardFlow(false)} + closeFlow={() => { + setShowWizardFlow(false) + }} /> ) : null} {showOverflowMenu ? ( diff --git a/app/src/organisms/RobotSettingsCalibration/index.tsx b/app/src/organisms/RobotSettingsCalibration/index.tsx index bedce1c3c9e..629f63d14c8 100644 --- a/app/src/organisms/RobotSettingsCalibration/index.tsx +++ b/app/src/organisms/RobotSettingsCalibration/index.tsx @@ -315,7 +315,9 @@ export function RobotSettingsCalibration({ )} {showHowCalibrationWorksModal ? ( setShowHowCalibrationWorksModal(false)} + onCloseClick={() => { + setShowHowCalibrationWorksModal(false) + }} /> ) : null} {isFlex ? ( diff --git a/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx b/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx index 9f0dc5bc6cb..94104eadee9 100644 --- a/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx +++ b/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx @@ -191,7 +191,9 @@ export function DeviceReset({ heading: t('device_resets_cannot_be_undone'), type: 'alert', }} - onClickBack={() => setCurrentOption(null)} + onClickBack={() => { + setCurrentOption(null) + }} /> + onChange={() => { setResetOptions({ ...resetOptions, [option.id]: !(resetOptions[option.id] ?? false), }) - } + }} /> setShowNetworkDetailModal(false)} + onOutsideClick={() => { + setShowNetworkDetailModal(false) + }} > setCurrentOption('RobotSettingsWifi')} + onClickBack={() => { + setCurrentOption('RobotSettingsWifi') + }} onClickButton={handleContinue} /> setCurrentOption('RobotSettingsWifi')} + onClickBack={() => { + setCurrentOption('RobotSettingsWifi') + }} onClickButton={() => { selectedAuthType !== 'none' ? setCurrentOption('RobotSettingsSetWifiCred') diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/RobotSettingsSetWifiCred.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/RobotSettingsSetWifiCred.tsx index dba614896a1..7dcf8024b74 100644 --- a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/RobotSettingsSetWifiCred.tsx +++ b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/RobotSettingsSetWifiCred.tsx @@ -31,7 +31,9 @@ export function RobotSettingsSetWifiCred({ setCurrentOption('RobotSettingsWifi')} + onClickBack={() => { + setCurrentOption('RobotSettingsWifi') + }} onClickButton={handleConnect} /> diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/RobotSettingsWifi.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/RobotSettingsWifi.tsx index 6e70d87d5da..2126b7a2610 100644 --- a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/RobotSettingsWifi.tsx +++ b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/RobotSettingsWifi.tsx @@ -31,14 +31,16 @@ export function RobotSettingsWifi({ setCurrentOption('NetworkSettings')} + onClickBack={() => { + setCurrentOption('NetworkSettings') + }} /> + handleJoinAnotherNetwork={() => { setCurrentOption('RobotSettingsJoinOtherNetwork') - } + }} handleNetworkPress={(ssid: string) => { setSelectedSsid(ssid) setCurrentOption('RobotSettingsSelectAuthenticationType') diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/RobotSettingsWifiConnect.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/RobotSettingsWifiConnect.tsx index e6236bb0871..40ba28cdd14 100644 --- a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/RobotSettingsWifiConnect.tsx +++ b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/RobotSettingsWifiConnect.tsx @@ -50,7 +50,9 @@ export function RobotSettingsWifiConnect({ setCurrentOption('RobotSettingsWifi')} + onClickBack={() => { + setCurrentOption('RobotSettingsWifi') + }} /> + handleTryAgain={() => { isInvalidPassword ? setCurrentOption('RobotSettingsSetWifiCred') : handleConnect() - } - handleChangeNetwork={() => setCurrentOption('RobotSettingsWifi')} + }} + handleChangeNetwork={() => { + setCurrentOption('RobotSettingsWifi') + }} /> diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/WifiConnectionDetails.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/WifiConnectionDetails.tsx index 2f0a288912c..b3165509e56 100644 --- a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/WifiConnectionDetails.tsx +++ b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/WifiConnectionDetails.tsx @@ -89,7 +89,9 @@ export function WifiConnectionDetails({ padding={SPACING.spacing24} backgroundColor={COLORS.green35} borderRadius={BORDERS.borderRadius12} - onClick={() => setShowNetworkDetailModal(true)} + onClick={() => { + setShowNetworkDetailModal(true) + }} alignItems={ALIGN_CENTER} > setCurrentOption(null)} + onClickBack={() => { + setCurrentOption(null) + }} /> setCurrentOption('RobotSettingsWifi')} + onClick={() => { + setCurrentOption('RobotSettingsWifi') + }} /> setCurrentOption('EthernetConnectionDetails')} + onClick={() => { + setCurrentOption('EthernetConnectionDetails') + }} /> @@ -151,7 +157,11 @@ function NetworkSettingButton({ /> - console.log('setup')}> + { + console.log('setup') + }} + > diff --git a/app/src/organisms/RobotSettingsDashboard/Privacy.tsx b/app/src/organisms/RobotSettingsDashboard/Privacy.tsx index 7f8963b15e8..fadb78c12fc 100644 --- a/app/src/organisms/RobotSettingsDashboard/Privacy.tsx +++ b/app/src/organisms/RobotSettingsDashboard/Privacy.tsx @@ -49,7 +49,9 @@ export function Privacy({ setCurrentOption(null)} + onClickBack={() => { + setCurrentOption(null) + }} /> - setCurrentOption(null)}> + { + setCurrentOption(null) + }} + > diff --git a/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx b/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx index 40b04d34fd9..b0214343560 100644 --- a/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx +++ b/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx @@ -67,7 +67,9 @@ export function RobotSystemVersion({ } : undefined } - onClickBack={() => setCurrentOption(null)} + onClickBack={() => { + setCurrentOption(null) + }} /> setShowModal(true)} + onClick={() => { + setShowModal(true) + }} /> ) : null} diff --git a/app/src/organisms/RobotSettingsDashboard/RobotSystemVersionModal.tsx b/app/src/organisms/RobotSettingsDashboard/RobotSystemVersionModal.tsx index 8e2a8675f18..703f252c82e 100644 --- a/app/src/organisms/RobotSettingsDashboard/RobotSystemVersionModal.tsx +++ b/app/src/organisms/RobotSettingsDashboard/RobotSystemVersionModal.tsx @@ -59,13 +59,17 @@ export function RobotSystemVersionModal({ setShowModal(false)} + onClick={() => { + setShowModal(false) + }} buttonText={t('not_now')} buttonType="secondary" /> history.push('/robot-settings/update-robot')} + onClick={() => { + history.push('/robot-settings/update-robot') + }} buttonText={t('shared:update')} /> diff --git a/app/src/organisms/RobotSettingsDashboard/TextSize.tsx b/app/src/organisms/RobotSettingsDashboard/TextSize.tsx index cb33eeb1404..94d6b2623a8 100644 --- a/app/src/organisms/RobotSettingsDashboard/TextSize.tsx +++ b/app/src/organisms/RobotSettingsDashboard/TextSize.tsx @@ -47,7 +47,9 @@ export function TextSize({ setCurrentOption }: TextSizeProps): JSX.Element { setCurrentOption(null)} + onClick={() => { + setCurrentOption(null) + }} data-testid="DisplayTextSize_back_button" > @@ -75,7 +77,9 @@ export function TextSize({ setCurrentOption }: TextSizeProps): JSX.Element { justifyContent={JUSTIFY_CENTER} > handleClick('down')} + onClick={() => { + handleClick('down') + }} data-testid="DisplayTextSize_decrease" > @@ -88,7 +92,9 @@ export function TextSize({ setCurrentOption }: TextSizeProps): JSX.Element { handleClick('up')} + onClick={() => { + handleClick('up') + }} data-testid="DisplayTextSize_increase" > diff --git a/app/src/organisms/RobotSettingsDashboard/TouchScreenSleep.tsx b/app/src/organisms/RobotSettingsDashboard/TouchScreenSleep.tsx index 29a672c31b4..20a80964358 100644 --- a/app/src/organisms/RobotSettingsDashboard/TouchScreenSleep.tsx +++ b/app/src/organisms/RobotSettingsDashboard/TouchScreenSleep.tsx @@ -57,7 +57,9 @@ export function TouchScreenSleep({ setCurrentOption(null)} + onClickBack={() => { + setCurrentOption(null) + }} /> setCurrentOption(null)} + onClickBack={() => { + setCurrentOption(null) + }} /> handleClick('down')} + onClick={() => { + handleClick('down') + }} data-testid="TouchscreenBrightness_decrease" > @@ -109,7 +113,9 @@ export function TouchscreenBrightness({ handleClick('up')} + onClick={() => { + handleClick('up') + }} data-testid="TouchscreenBrightness_increase" > diff --git a/app/src/organisms/TakeoverModal/TakeoverModal.tsx b/app/src/organisms/TakeoverModal/TakeoverModal.tsx index c87f33fc150..8d54c777022 100644 --- a/app/src/organisms/TakeoverModal/TakeoverModal.tsx +++ b/app/src/organisms/TakeoverModal/TakeoverModal.tsx @@ -50,7 +50,9 @@ export function TakeoverModal(props: TakeoverModalProps): JSX.Element { setShowConfirmTerminateModal(false)} + onClick={() => { + setShowConfirmTerminateModal(false) + }} buttonText={t('continue_activity')} width="50%" /> @@ -102,7 +104,9 @@ export function TakeoverModal(props: TakeoverModalProps): JSX.Element { setShowConfirmTerminateModal(true)} + onClick={() => { + setShowConfirmTerminateModal(true) + }} > {t('terminate')} diff --git a/app/src/organisms/TaskList/TaskList.stories.tsx b/app/src/organisms/TaskList/TaskList.stories.tsx index 5fe047c3124..b17bf6204d2 100644 --- a/app/src/organisms/TaskList/TaskList.stories.tsx +++ b/app/src/organisms/TaskList/TaskList.stories.tsx @@ -26,7 +26,9 @@ CompletedTaskList.args = { description: 'this is the first subtask', cta: { label: 'do this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, ], @@ -37,7 +39,9 @@ CompletedTaskList.args = { 'the second task happens after the first, and has longer text so that we can see what it looks like with longer text', cta: { label: 'do the second thing', - onClick: () => console.log('click 2'), + onClick: () => { + console.log('click 2') + }, }, subTasks: [], }, @@ -50,7 +54,9 @@ CompletedTaskList.args = { description: 'this is the first subtask', cta: { label: 'do this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, { @@ -58,7 +64,9 @@ CompletedTaskList.args = { description: 'this is the second subtask', cta: { label: 'calibrate this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, { @@ -67,7 +75,9 @@ CompletedTaskList.args = { isComplete: true, cta: { label: 'calibrate this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, ], @@ -81,7 +91,9 @@ CompletedTaskList.args = { description: 'this is the first subtask', cta: { label: 'do this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, ], @@ -92,7 +104,9 @@ CompletedTaskList.args = { isComplete: true, cta: { label: 'redo', - onClick: () => console.log('redo'), + onClick: () => { + console.log('redo') + }, }, subTasks: [], }, @@ -113,7 +127,9 @@ CompletedTaskListWithFinalSubtask.args = { description: 'this is the first subtask', cta: { label: 'do this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, ], @@ -124,7 +140,9 @@ CompletedTaskListWithFinalSubtask.args = { 'the second task happens after the first, and has longer text so that we can see what it looks like with longer text', cta: { label: 'do the second thing', - onClick: () => console.log('click 2'), + onClick: () => { + console.log('click 2') + }, }, subTasks: [], }, @@ -137,7 +155,9 @@ CompletedTaskListWithFinalSubtask.args = { description: 'this is the first subtask', cta: { label: 'do this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, ], @@ -148,7 +168,9 @@ CompletedTaskListWithFinalSubtask.args = { isComplete: true, cta: { label: 'redo', - onClick: () => console.log('redo'), + onClick: () => { + console.log('redo') + }, }, subTasks: [], }, @@ -161,7 +183,9 @@ CompletedTaskListWithFinalSubtask.args = { description: 'this is the first subtask', cta: { label: 'do this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, { @@ -169,7 +193,9 @@ CompletedTaskListWithFinalSubtask.args = { description: 'this is the second subtask', cta: { label: 'calibrate this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, { @@ -178,7 +204,9 @@ CompletedTaskListWithFinalSubtask.args = { isComplete: true, cta: { label: 'calibrate this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, ], @@ -200,7 +228,9 @@ InProgressTaskList.args = { description: 'this is the first subtask', cta: { label: 'do this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, ], @@ -211,7 +241,9 @@ InProgressTaskList.args = { 'the second task happens after the first, and has longer text so that we can see what it looks like with longer text', cta: { label: 'do the second thing', - onClick: () => console.log('click 2'), + onClick: () => { + console.log('click 2') + }, }, subTasks: [], }, @@ -224,7 +256,9 @@ InProgressTaskList.args = { description: 'this is the first subtask', cta: { label: 'do this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, { @@ -232,7 +266,9 @@ InProgressTaskList.args = { description: 'this is the second subtask', cta: { label: 'calibrate this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, { @@ -241,7 +277,9 @@ InProgressTaskList.args = { isComplete: true, cta: { label: 'calibrate this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, ], @@ -255,7 +293,9 @@ InProgressTaskList.args = { description: 'this is the first subtask', cta: { label: 'do this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, ], @@ -266,7 +306,9 @@ InProgressTaskList.args = { isComplete: true, cta: { label: 'redo', - onClick: () => console.log('redo'), + onClick: () => { + console.log('redo') + }, }, subTasks: [], }, @@ -287,7 +329,9 @@ InProgressTaskListwithFinalSubtask.args = { description: 'this is the first subtask', cta: { label: 'do this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, ], @@ -298,7 +342,9 @@ InProgressTaskListwithFinalSubtask.args = { 'the second task happens after the first, and has longer text so that we can see what it looks like with longer text', cta: { label: 'do the second thing', - onClick: () => console.log('click 2'), + onClick: () => { + console.log('click 2') + }, }, subTasks: [], }, @@ -311,7 +357,9 @@ InProgressTaskListwithFinalSubtask.args = { description: 'this is the first subtask', cta: { label: 'do this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, ], @@ -322,7 +370,9 @@ InProgressTaskListwithFinalSubtask.args = { isComplete: true, cta: { label: 'redo', - onClick: () => console.log('redo'), + onClick: () => { + console.log('redo') + }, }, subTasks: [], }, @@ -335,7 +385,9 @@ InProgressTaskListwithFinalSubtask.args = { description: 'this is the first subtask', cta: { label: 'do this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, { @@ -343,7 +395,9 @@ InProgressTaskListwithFinalSubtask.args = { description: 'this is the second subtask', cta: { label: 'calibrate this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, { @@ -352,7 +406,9 @@ InProgressTaskListwithFinalSubtask.args = { isComplete: true, cta: { label: 'calibrate this', - onClick: () => console.log('click 1'), + onClick: () => { + console.log('click 1') + }, }, }, ], diff --git a/app/src/organisms/TaskList/index.tsx b/app/src/organisms/TaskList/index.tsx index 7675845b15b..259f1dcb095 100644 --- a/app/src/organisms/TaskList/index.tsx +++ b/app/src/organisms/TaskList/index.tsx @@ -144,8 +144,8 @@ function ProgressTrackerItem({ isTaskListComplete || isPastSubTask ? COLORS.blue50 : subTask.isComplete === true - ? COLORS.grey40 - : 'initial' + ? COLORS.grey40 + : 'initial' } border={TASK_CONNECTOR_STYLE} borderColor={isFutureSubTask ? COLORS.grey40 : COLORS.blue50} @@ -165,8 +165,8 @@ function ProgressTrackerItem({ isFinalSubTaskOfTaskList ? COLORS.transparent : isTaskListComplete || isPastSubTask - ? COLORS.blue50 - : COLORS.grey40 + ? COLORS.blue50 + : COLORS.grey40 } marginTop={`-${SPACING.spacing8}`} marginBottom={ @@ -375,7 +375,7 @@ function Task({ gridGap={SPACING.spacing24} // click to open the subtask drawer if subtasks are present cursor={hasSubTasks ? 'pointer' : ''} - onClick={() => (hasSubTasks ? setIsTaskOpen(!isTaskOpen) : null)} + onClick={() => { if (hasSubTasks) setIsTaskOpen(!isTaskOpen) }} > closeModal(true)} + onClose={() => { + closeModal(true) + }} css={LEGACY_MODAL_STYLE} > @@ -179,7 +181,9 @@ export function UpdateAppModal(props: UpdateAppModalProps): JSX.Element { {!downloading && !downloaded && error == null ? ( closeModal(true)} + onClose={() => { + closeModal(true) + }} closeOnOutsideClick={true} footer={appUpdateFooter} maxHeight="80%" diff --git a/app/src/organisms/UpdateRobotBanner/index.tsx b/app/src/organisms/UpdateRobotBanner/index.tsx index e372b256627..7595a95a338 100644 --- a/app/src/organisms/UpdateRobotBanner/index.tsx +++ b/app/src/organisms/UpdateRobotBanner/index.tsx @@ -35,7 +35,9 @@ export function UpdateRobotBanner( robot !== null && robot.healthStatus === 'ok' ? ( e.stopPropagation()} + onClick={(e: React.MouseEvent) => { + e.stopPropagation() + }} flexDirection={DIRECTION_COLUMN} > @@ -43,7 +45,9 @@ export function UpdateRobotBanner( {t('branded:robot_software_update_required')} handleUpdateBuildroot(robot)} + onClick={() => { + handleUpdateBuildroot(robot) + }} css={TYPOGRAPHY.pRegular} textDecoration={TYPOGRAPHY.textDecorationUnderline} > diff --git a/app/src/pages/AppSettings/GeneralSettings.tsx b/app/src/pages/AppSettings/GeneralSettings.tsx index 553f0e56356..355004f16e9 100644 --- a/app/src/pages/AppSettings/GeneralSettings.tsx +++ b/app/src/pages/AppSettings/GeneralSettings.tsx @@ -111,13 +111,17 @@ export function GeneralSettings(): JSX.Element { > setShowUpdateBanner(false)} + onCloseClick={() => { + setShowUpdateBanner(false) + }} > {t('branded:opentrons_app_update_available_variation')} setShowUpdateModal(true)} + onClick={() => { + setShowUpdateModal(true) + }} marginLeft={SPACING.spacing4} > {t('view_update')} @@ -135,7 +139,9 @@ export function GeneralSettings(): JSX.Element { {showConnectRobotSlideout && ( setShowConnectRobotSlideout(false)} + onCloseClick={() => { + setShowConnectRobotSlideout(false) + }} /> )} @@ -166,7 +172,9 @@ export function GeneralSettings(): JSX.Element { setShowUpdateModal(true)} + onClick={() => { + setShowUpdateModal(true) + }} id="GeneralSettings_softwareUpdate" > {t('view_software_update')} @@ -192,7 +200,9 @@ export function GeneralSettings(): JSX.Element { setShowPreviousVersionModal(true)} + onClick={() => { + setShowPreviousVersionModal(true) + }} id="GeneralSettings_previousVersionLink" > {t('restore_previous')} @@ -242,7 +252,9 @@ export function GeneralSettings(): JSX.Element { setShowConnectRobotSlideout(true)} + onClick={() => { + setShowConnectRobotSlideout(true) + }} > {t('setup_connection')} @@ -250,13 +262,19 @@ export function GeneralSettings(): JSX.Element { {showUpdateModal ? createPortal( - setShowUpdateModal(false)} />, + { + setShowUpdateModal(false) + }} + />, getTopPortalEl() ) : null} {showPreviousVersionModal ? ( setShowPreviousVersionModal(false)} + closeModal={() => { + setShowPreviousVersionModal(false) + }} /> ) : null} diff --git a/app/src/pages/ConnectViaEthernet/DisplayConnectionStatus.tsx b/app/src/pages/ConnectViaEthernet/DisplayConnectionStatus.tsx index 0c968ad25a4..7a64d30a723 100644 --- a/app/src/pages/ConnectViaEthernet/DisplayConnectionStatus.tsx +++ b/app/src/pages/ConnectViaEthernet/DisplayConnectionStatus.tsx @@ -85,15 +85,17 @@ export function DisplayConnectionStatus({ flex="1" buttonType={isConnected ? 'secondary' : 'primary'} buttonText={t('view_network_details')} - onClick={() => setShowNetworkDetailsModal(true)} + onClick={() => { + setShowNetworkDetailsModal(true) + }} /> {isConnected ? ( + onClick={() => { history.push('/robot-settings/update-robot-during-onboarding') - } + }} /> ) : null} diff --git a/app/src/pages/ConnectViaEthernet/TitleHeader.tsx b/app/src/pages/ConnectViaEthernet/TitleHeader.tsx index 1b7782ae81b..eea0f6e28cd 100644 --- a/app/src/pages/ConnectViaEthernet/TitleHeader.tsx +++ b/app/src/pages/ConnectViaEthernet/TitleHeader.tsx @@ -31,7 +31,9 @@ export function TitleHeader({ title }: TitleHeaderProps): JSX.Element { position={POSITION_RELATIVE} > history.push('/network-setup')} + onClick={() => { + history.push('/network-setup') + }} data-testid={`${title}_header_back_button`} > history.push('/network-setup')} + onClick={() => { + history.push('/network-setup') + }} position={POSITION_ABSOLUTE} > @@ -98,7 +100,9 @@ export function ConnectViaUSB(): JSX.Element { history.push('/emergency-stop')} + onClick={() => { + history.push('/emergency-stop') + }} /> ) : ( diff --git a/app/src/pages/ConnectViaWifi/JoinOtherNetwork.tsx b/app/src/pages/ConnectViaWifi/JoinOtherNetwork.tsx index 2b58d0ba585..bb2595f28f3 100644 --- a/app/src/pages/ConnectViaWifi/JoinOtherNetwork.tsx +++ b/app/src/pages/ConnectViaWifi/JoinOtherNetwork.tsx @@ -36,7 +36,9 @@ export function JoinOtherNetwork({ setCurrentOption('WifiList')} + onClickBack={() => { + setCurrentOption('WifiList') + }} onClickButton={handleContinue} /> setCurrentOption('WifiList')} + onClickBack={() => { + setCurrentOption('WifiList') + }} onClickButton={() => { selectedAuthType !== 'none' ? setCurrentOption('SetWifiCred') diff --git a/app/src/pages/ConnectViaWifi/SetWifiCred.tsx b/app/src/pages/ConnectViaWifi/SetWifiCred.tsx index 1ce4394ad33..ebb0964b484 100644 --- a/app/src/pages/ConnectViaWifi/SetWifiCred.tsx +++ b/app/src/pages/ConnectViaWifi/SetWifiCred.tsx @@ -28,7 +28,9 @@ export function SetWifiCred({ setCurrentOption('SelectAuthType')} + onClickBack={() => { + setCurrentOption('SelectAuthType') + }} onClickButton={handleConnect} /> diff --git a/app/src/pages/ConnectViaWifi/WifiConnectStatus.tsx b/app/src/pages/ConnectViaWifi/WifiConnectStatus.tsx index 9d0e8d53481..bbf336e8276 100644 --- a/app/src/pages/ConnectViaWifi/WifiConnectStatus.tsx +++ b/app/src/pages/ConnectViaWifi/WifiConnectStatus.tsx @@ -54,13 +54,15 @@ export function WifiConnectStatus({ + handleTryAgain={() => { isInvalidPassword ? setCurrentOption('SetWifiCred') : handleConnect() - } + }} isInvalidPassword={isInvalidPassword} - handleChangeNetwork={() => setCurrentOption('WifiList')} + handleChangeNetwork={() => { + setCurrentOption('WifiList') + }} /> diff --git a/app/src/pages/ConnectViaWifi/index.tsx b/app/src/pages/ConnectViaWifi/index.tsx index fb3fcc98077..4530503a69c 100644 --- a/app/src/pages/ConnectViaWifi/index.tsx +++ b/app/src/pages/ConnectViaWifi/index.tsx @@ -73,7 +73,9 @@ export function ConnectViaWifi(): JSX.Element { currentScreen = ( setCurrentOption('JoinOtherNetwork')} + handleJoinAnotherNetwork={() => { + setCurrentOption('JoinOtherNetwork') + }} handleNetworkPress={(ssid: string) => { setSelectedSsid(ssid) setCurrentOption('SelectAuthType') diff --git a/app/src/pages/DeckConfiguration/index.tsx b/app/src/pages/DeckConfiguration/index.tsx index 6c92af7c3c8..f520b825177 100644 --- a/app/src/pages/DeckConfiguration/index.tsx +++ b/app/src/pages/DeckConfiguration/index.tsx @@ -53,7 +53,9 @@ export function DeckConfigurationEditor(): JSX.Element { } const secondaryButtonProps: React.ComponentProps = { - onClick: () => setShowSetupInstructionsModal(true), + onClick: () => { + setShowSetupInstructionsModal(true) + }, buttonText: i18n.format(t('setup_instructions'), 'titleCase'), buttonType: 'tertiaryLowLight', iconName: 'information', diff --git a/app/src/pages/Devices/CalibrationDashboard/hooks/useDashboardCalibrateTipLength.tsx b/app/src/pages/Devices/CalibrationDashboard/hooks/useDashboardCalibrateTipLength.tsx index 1e3870c4b0e..86a4eee93b3 100644 --- a/app/src/pages/Devices/CalibrationDashboard/hooks/useDashboardCalibrateTipLength.tsx +++ b/app/src/pages/Devices/CalibrationDashboard/hooks/useDashboardCalibrateTipLength.tsx @@ -163,7 +163,9 @@ export function useDashboardCalibrateTipLength( } }} titleBarTitle={t('tip_length_calibration')} - closePrompt={() => setShowCalBlockModal(false)} + closePrompt={() => { + setShowCalBlockModal(false) + }} /> ) : null} {startingSession ? ( diff --git a/app/src/pages/Devices/DevicesLanding/NewRobotSetupHelp.tsx b/app/src/pages/Devices/DevicesLanding/NewRobotSetupHelp.tsx index c0632154baf..e9f571a9131 100644 --- a/app/src/pages/Devices/DevicesLanding/NewRobotSetupHelp.tsx +++ b/app/src/pages/Devices/DevicesLanding/NewRobotSetupHelp.tsx @@ -30,7 +30,9 @@ export function NewRobotSetupHelp(): JSX.Element { setShowNewRobotHelpModal(true)} + onClick={() => { + setShowNewRobotHelpModal(true) + }} > {t('see_how_to_setup_new_robot')} @@ -38,7 +40,9 @@ export function NewRobotSetupHelp(): JSX.Element { ? createPortal( setShowNewRobotHelpModal(false)} + onClose={() => { + setShowNewRobotHelpModal(false) + }} > @@ -48,7 +52,9 @@ export function NewRobotSetupHelp(): JSX.Element { {t('learn_more_about_new_robot_setup')} setShowNewRobotHelpModal(false)} + onClick={() => { + setShowNewRobotHelpModal(false) + }} alignSelf={ALIGN_FLEX_END} textTransform={TYPOGRAPHY.textTransformCapitalize} > diff --git a/app/src/pages/Devices/ProtocolRunDetails/index.tsx b/app/src/pages/Devices/ProtocolRunDetails/index.tsx index 2d92e3ae705..4a668021ce4 100644 --- a/app/src/pages/Devices/ProtocolRunDetails/index.tsx +++ b/app/src/pages/Devices/ProtocolRunDetails/index.tsx @@ -182,7 +182,9 @@ function PageContents(props: PageContentsProps): JSX.Element { React.useEffect(() => { if (jumpedIndex != null) { - setTimeout(() => setJumpedIndex(null), JUMPED_STEP_HIGHLIGHT_DELAY_MS) + setTimeout(() => { + setJumpedIndex(null) + }, JUMPED_STEP_HIGHLIGHT_DELAY_MS) } }, [jumpedIndex]) diff --git a/app/src/pages/EmergencyStop/index.tsx b/app/src/pages/EmergencyStop/index.tsx index 30e77967b42..2e0d60077ca 100644 --- a/app/src/pages/EmergencyStop/index.tsx +++ b/app/src/pages/EmergencyStop/index.tsx @@ -98,7 +98,9 @@ export function EmergencyStop(): JSX.Element { flex="1" buttonText={i18n.format(t('shared:continue'), 'capitalize')} disabled={!isEstopConnected} - onClick={() => history.push('/robot-settings/rename-robot')} + onClick={() => { + history.push('/robot-settings/rename-robot') + }} /> diff --git a/app/src/pages/InstrumentDetail/InstrumentDetailOverflowMenu.tsx b/app/src/pages/InstrumentDetail/InstrumentDetailOverflowMenu.tsx index 5be7034e8fb..c15702b0f60 100644 --- a/app/src/pages/InstrumentDetail/InstrumentDetailOverflowMenu.tsx +++ b/app/src/pages/InstrumentDetail/InstrumentDetailOverflowMenu.tsx @@ -119,7 +119,9 @@ const InstrumentDetailsOverflowMenu = NiceModal.create( {instrument.mount !== 'extension' ? ( setShowDropTipWizard(true)} + onClick={() => { + setShowDropTipWizard(true) + }} > { + onClick={() => { handleInstrumentDetailOverflowMenu(instrument, host) - } + }} > { /> - setShowBanner(false)}> + { + setShowBanner(false) + }} + > ('alphabetical') const [showSortByMenu, setShowSortByMenu] = React.useState(false) - const toggleSetShowSortByMenu = (): void => setShowSortByMenu(!showSortByMenu) + const toggleSetShowSortByMenu = (): void => { + setShowSortByMenu(!showSortByMenu) + } const trackEvent = useTrackEvent() const [filterBy, setFilterBy] = React.useState('all') const { makeToast } = useToaster() @@ -93,7 +95,9 @@ export function Labware(): JSX.Element { ] = React.useState(null) const sortOverflowWrapperRef = useOnClickOutside({ - onClickOutside: () => setShowSortByMenu(false), + onClickOutside: () => { + setShowSortByMenu(false) + }, }) React.useEffect(() => { if (labwareFailureMessage != null) { @@ -127,7 +131,11 @@ export function Labware(): JSX.Element { > {t('labware')} - setShowAddLabwareSlideout(true)}> + { + setShowAddLabwareSlideout(true) + }} + > {t('import')} @@ -234,12 +242,12 @@ export function Labware(): JSX.Element { + onClick={() => { trackEvent({ name: ANALYTICS_OPEN_LABWARE_CREATOR_FROM_BOTTOM_OF_LABWARE_LIBRARY_LIST, properties: {}, }) - } + }} href={LABWARE_CREATOR_HREF} css={TYPOGRAPHY.darkLinkLabelSemiBold} > @@ -255,13 +263,17 @@ export function Labware(): JSX.Element { {showAddLabwareSlideout && ( setShowAddLabwareSlideout(false)} + onCloseClick={() => { + setShowAddLabwareSlideout(false) + }} /> )} {currentLabwareDef != null && ( setCurrentLabwareDef(null)} + onClose={() => { + setCurrentLabwareDef(null) + }} /> )} diff --git a/app/src/pages/NameRobot/index.tsx b/app/src/pages/NameRobot/index.tsx index 3823525ccb4..0cc737dcabb 100644 --- a/app/src/pages/NameRobot/index.tsx +++ b/app/src/pages/NameRobot/index.tsx @@ -267,7 +267,9 @@ export function NameRobot(): JSX.Element { value={field.value} error={fieldState.error?.message && ''} textAlign={TYPOGRAPHY.textAlignCenter} - onBlur={e => e.target.focus()} + onBlur={e => { + e.target.focus() + }} /> )} /> diff --git a/app/src/pages/ProtocolDashboard/DeleteProtocolConfirmationModal.tsx b/app/src/pages/ProtocolDashboard/DeleteProtocolConfirmationModal.tsx index baad8d70846..bb21e5e7815 100644 --- a/app/src/pages/ProtocolDashboard/DeleteProtocolConfirmationModal.tsx +++ b/app/src/pages/ProtocolDashboard/DeleteProtocolConfirmationModal.tsx @@ -67,9 +67,9 @@ export function DeleteProtocolConfirmationModal({ .then(() => queryClient .invalidateQueries([host, 'protocols']) - .catch((e: Error) => + .catch((e: Error) => { console.error(`error invalidating runs query: ${e.message}`) - ) + }) ) .then(() => { setShowIcon(false) diff --git a/app/src/pages/ProtocolDashboard/LongPressModal.tsx b/app/src/pages/ProtocolDashboard/LongPressModal.tsx index d80826a7037..ecec24785a3 100644 --- a/app/src/pages/ProtocolDashboard/LongPressModal.tsx +++ b/app/src/pages/ProtocolDashboard/LongPressModal.tsx @@ -100,7 +100,9 @@ export function LongPressModal({ header={t('too_many_pins_header')} subText={t('too_many_pins_body')} buttonText={i18n.format(t('shared:close'), 'capitalize')} - handleCloseMaxPinsAlert={() => longpress?.setIsLongPressed(false)} + handleCloseMaxPinsAlert={() => { + longpress?.setIsLongPressed(false) + }} /> ) : ( diff --git a/app/src/pages/ProtocolDashboard/PinnedProtocol.tsx b/app/src/pages/ProtocolDashboard/PinnedProtocol.tsx index 749d0c70fbc..75bc1676326 100644 --- a/app/src/pages/ProtocolDashboard/PinnedProtocol.tsx +++ b/app/src/pages/ProtocolDashboard/PinnedProtocol.tsx @@ -112,7 +112,9 @@ export function PinnedProtocol(props: { justifyContent={JUSTIFY_SPACE_BETWEEN} maxWidth={cardStyleBySize[cardSize].width} minWidth={cardStyleBySize[cardSize].width} - onClick={() => handleProtocolClick(longpress, protocol.id)} + onClick={() => { + handleProtocolClick(longpress, protocol.id) + }} overflowWrap={OVERFLOW_WRAP_ANYWHERE} padding={SPACING.spacing24} ref={longpress.ref} diff --git a/app/src/pages/ProtocolDashboard/ProtocolCard.tsx b/app/src/pages/ProtocolDashboard/ProtocolCard.tsx index 1ddb0ac6099..ad7167423f2 100644 --- a/app/src/pages/ProtocolDashboard/ProtocolCard.tsx +++ b/app/src/pages/ProtocolDashboard/ProtocolCard.tsx @@ -123,7 +123,9 @@ export function ProtocolCard(props: { const failedAnalysisHeader: ModalHeaderBaseProps = { title: i18n.format(t('protocol_analysis_failed'), 'capitalize'), hasExitIcon: true, - onClick: () => setShowFailedAnalysisModal(false), + onClick: () => { + setShowFailedAnalysisModal(false) + }, } const handleDeleteProtocol = (): void => { @@ -143,9 +145,9 @@ export function ProtocolCard(props: { .then(() => queryClient .invalidateQueries([host, 'protocols']) - .catch((e: Error) => + .catch((e: Error) => { console.error(`error invalidating runs query: ${e.message}`) - ) + }) ) .then(() => { setShowIcon(false) @@ -177,7 +179,9 @@ export function ProtocolCard(props: { borderRadius={BORDERS.borderRadius16} marginBottom={SPACING.spacing8} gridGap={SPACING.spacing48} - onClick={() => handleProtocolClick(longpress, protocol.id)} + onClick={() => { + handleProtocolClick(longpress, protocol.id) + }} padding={SPACING.spacing24} ref={longpress.ref} css={PUSHED_STATE_STYLE} @@ -247,7 +251,9 @@ export function ProtocolCard(props: { (isFailedAnalysis && longpress.isLongPressed)) && ( setShowFailedAnalysisModal(false)} + onOutsideClick={() => { + setShowFailedAnalysisModal(false) + }} > (true) const [startSetup, setStartSetup] = React.useState(false) - const toggleTruncate = (): void => setTruncate(value => !value) + const toggleTruncate = (): void => { + setTruncate(value => !value) + } let displayedTitle = title ?? null if (displayedTitle !== null && displayedTitle.length > 92 && truncate) { @@ -110,7 +112,9 @@ const ProtocolHeader = ({ history.push('/protocols')} + onClick={() => { + history.push('/protocols') + }} width="3rem" > @@ -197,7 +201,9 @@ const ProtocolSectionTabs = ({ setCurrentOption(option)} + onClick={() => { + setCurrentOption(option) + }} > {option} @@ -369,11 +375,9 @@ export function ProtocolDetails(): JSX.Element | null { const { createRun } = useCreateRunMutation({ onSuccess: data => { - queryClient - .invalidateQueries([host, 'runs']) - .catch((e: Error) => - console.error(`could not invalidate runs cache: ${e.message}`) - ) + queryClient.invalidateQueries([host, 'runs']).catch((e: Error) => { + console.error(`could not invalidate runs cache: ${e.message}`) + }) }, }) @@ -415,7 +419,9 @@ export function ProtocolDetails(): JSX.Element | null { Promise.all(referencingRunIds?.map(runId => deleteRun(host, runId))) ) .then(() => deleteProtocol(host, protocolId)) - .then(() => history.push('/protocols')) + .then(() => { + history.push('/protocols') + }) .catch((e: Error) => { console.error(`error deleting resources: ${e.message}`) history.push('/protocols') @@ -451,7 +457,9 @@ export function ProtocolDetails(): JSX.Element | null { {!isProtocolFetching ? ( setShowConfirmationDeleteProtocol(false)} + onOutsideClick={() => { + setShowConfirmationDeleteProtocol(false) + }} header={deleteModalHeader} > @@ -464,7 +472,9 @@ export function ProtocolDetails(): JSX.Element | null { setShowConfirmationDeleteProtocol(false)} + onClick={() => { + setShowConfirmationDeleteProtocol(false) + }} buttonText={i18n.format(t('shared:cancel'), 'capitalize')} width="50%" /> @@ -490,7 +500,9 @@ export function ProtocolDetails(): JSX.Element | null { header={t('too_many_pins_header')} subText={t('too_many_pins_body')} buttonText={i18n.format(t('shared:close'), 'capitalize')} - handleCloseMaxPinsAlert={() => setShowMaxPinsAlert(false)} + handleCloseMaxPinsAlert={() => { + setShowMaxPinsAlert(false) + }} /> )} {/* Empty box to detect scrolling */} @@ -540,7 +552,9 @@ export function ProtocolDetails(): JSX.Element | null { buttonText={t('protocol_info:delete_protocol')} buttonType="alertSecondary" iconName="trash" - onClick={() => setShowConfirmationDeleteProtocol(true)} + onClick={() => { + setShowConfirmationDeleteProtocol(true) + }} width="100%" /> diff --git a/app/src/pages/ProtocolSetup/ConfirmAttachedModal.tsx b/app/src/pages/ProtocolSetup/ConfirmAttachedModal.tsx index 8c4ca73769a..13eb691a81d 100644 --- a/app/src/pages/ProtocolSetup/ConfirmAttachedModal.tsx +++ b/app/src/pages/ProtocolSetup/ConfirmAttachedModal.tsx @@ -46,7 +46,9 @@ export function ConfirmAttachedModal({ flex="1" buttonType="secondary" buttonText={i18n.format(t('shared:cancel'), 'capitalize')} - onClick={() => onCloseClick()} + onClick={() => { + onCloseClick() + }} /> + onClick={() => { !disabled ? onClickSetupStep() : makeDisabledReasonSnackbar() - } + }} width="100%" > setShowConfirmCancelModal(true) + ? () => { + setShowConfirmCancelModal(true) + } : onConfirmCancelClose } /> @@ -712,14 +714,18 @@ function PrepareToRun({ {!isLoading ? ( <> setSetupScreen('instruments')} + onClickSetupStep={() => { + setSetupScreen('instruments') + }} title={t('instruments')} detail={instrumentsDetail} status={instrumentsStatus} disabled={speccedInstrumentCount === 0} /> setSetupScreen('modules')} + onClickSetupStep={() => { + setSetupScreen('modules') + }} title={t('deck_hardware')} detail={modulesDetail} subDetail={modulesSubDetail} @@ -748,7 +754,9 @@ function PrepareToRun({ disabledReason={lpcDisabledReason} /> setSetupScreen('view only parameters')} + onClickSetupStep={() => { + setSetupScreen('view only parameters') + }} title={t('parameters')} detail={parametersDetail} subDetail={null} @@ -756,7 +764,9 @@ function PrepareToRun({ disabled={!hasRunTimeParameters} /> setSetupScreen('labware')} + onClickSetupStep={() => { + setSetupScreen('labware') + }} title={t('labware')} detail={labwareDetail} subDetail={labwareSubDetail} @@ -764,7 +774,9 @@ function PrepareToRun({ disabled={labwareDetail == null} /> setSetupScreen('liquids')} + onClickSetupStep={() => { + setSetupScreen('liquids') + }} title={t('liquids')} status="general" detail={ diff --git a/app/src/pages/RobotDashboard/WelcomeModal.tsx b/app/src/pages/RobotDashboard/WelcomeModal.tsx index 548c17fb5b8..dc5343f5dfa 100644 --- a/app/src/pages/RobotDashboard/WelcomeModal.tsx +++ b/app/src/pages/RobotDashboard/WelcomeModal.tsx @@ -40,9 +40,9 @@ export function WelcomeModal({ createLiveCommand({ command: animationCommand, waitUntilComplete: false, - }).catch((e: Error) => + }).catch((e: Error) => { console.warn(`cannot run status bar animation: ${e.message}`) - ) + }) } const handleCloseModal = (): void => { diff --git a/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx b/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx index ddbfb61b27c..3cd0b477ec9 100644 --- a/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx +++ b/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx @@ -88,14 +88,18 @@ export function RobotSettingsList(props: RobotSettingsListProps): JSX.Element { settingName={t('network_settings')} dataTestId="RobotSettingButton_network_settings" settingInfo={networkConnection?.connectionStatus} - onClick={() => setCurrentOption('NetworkSettings')} + onClick={() => { + setCurrentOption('NetworkSettings') + }} iconName="wifi" /> setCurrentOption('RobotName')} + onClick={() => { + setCurrentOption('RobotName') + }} iconName="flex-robot" /> @@ -107,7 +111,9 @@ export function RobotSettingsList(props: RobotSettingsListProps): JSX.Element { ? `v${robotServerVersion}` : t('robot_settings_advanced_unknown') } - onClick={() => setCurrentOption('RobotSystemVersion')} + onClick={() => { + setCurrentOption('RobotSystemVersion') + }} iconName="update" rightElement={ @@ -136,20 +142,26 @@ export function RobotSettingsList(props: RobotSettingsListProps): JSX.Element { setCurrentOption('TouchscreenSleep')} + onClick={() => { + setCurrentOption('TouchscreenSleep') + }} iconName="sleep" /> setCurrentOption('TouchscreenBrightness')} + onClick={() => { + setCurrentOption('TouchscreenBrightness') + }} iconName="brightness" /> setCurrentOption('Privacy')} + onClick={() => { + setCurrentOption('Privacy') + }} iconName="privacy" /> setCurrentOption('DeviceReset')} + onClick={() => { + setCurrentOption('DeviceReset') + }} iconName="reset" /> setCurrentOption('UpdateChannel')} + onClick={() => { + setCurrentOption('UpdateChannel') + }} iconName="update-channel" /> ) case 'UpdateChannel': - return setCurrentOption(null)} /> + return ( + { + setCurrentOption(null) + }} + /> + ) case 'RobotSettingsWifi': return ( @@ -214,7 +220,9 @@ export function RobotSettingsDashboard(): JSX.Element { case 'EthernetConnectionDetails': return ( setCurrentOption('NetworkSettings')} + handleGoBack={() => { + setCurrentOption('NetworkSettings') + }} /> ) diff --git a/app/src/pages/RunSummary/index.tsx b/app/src/pages/RunSummary/index.tsx index e0f678ec424..d4fa048be56 100644 --- a/app/src/pages/RunSummary/index.tsx +++ b/app/src/pages/RunSummary/index.tsx @@ -148,7 +148,9 @@ export function RunSummary(): JSX.Element { FLEX_ROBOT_TYPE, host, setPipettesWithTip - ).catch(e => console.log(`Error launching Tip Attachment Modal: ${e}`)) + ).catch(e => { + console.log(`Error launching Tip Attachment Modal: ${e}`) + }) } else { closeCurrentRun() history.push('/') @@ -164,7 +166,9 @@ export function RunSummary(): JSX.Element { FLEX_ROBOT_TYPE, host, setPipettesWithTip - ).catch(e => console.log(`Error launching Tip Attachment Modal: ${e}`)) + ).catch(e => { + console.log(`Error launching Tip Attachment Modal: ${e}`) + }) } else { if (!isResetRunLoading) { setShowRunAgainSpinner(true) diff --git a/app/src/pages/UpdateRobot/UpdateRobotDuringOnboarding.tsx b/app/src/pages/UpdateRobot/UpdateRobotDuringOnboarding.tsx index 315e923c731..117f37cf758 100644 --- a/app/src/pages/UpdateRobot/UpdateRobotDuringOnboarding.tsx +++ b/app/src/pages/UpdateRobot/UpdateRobotDuringOnboarding.tsx @@ -91,7 +91,9 @@ export function UpdateRobotDuringOnboarding(): JSX.Element { /> dispatchStartRobotUpdate(robotName)} + onClick={() => { + dispatchStartRobotUpdate(robotName) + }} buttonText={i18n.format(t('shared:try_again'), 'capitalize')} /> @@ -101,7 +103,11 @@ export function UpdateRobotDuringOnboarding(): JSX.Element { ) : localRobot === null || localRobot.status === UNREACHABLE || robotUpdateType !== 'upgrade' ? ( - history.push('/emergency-stop')} /> + { + history.push('/emergency-stop') + }} + /> ) : ( history.push('/network-setup')} + onClick={() => { + history.push('/network-setup') + }} /> diff --git a/app/src/redux/analytics/epic.ts b/app/src/redux/analytics/epic.ts index 74412be7e1e..3a199dbee67 100644 --- a/app/src/redux/analytics/epic.ts +++ b/app/src/redux/analytics/epic.ts @@ -47,9 +47,9 @@ const sendAnalyticsEventEpic: Epic = (action$, state$) => { const [maybeEvent, maybeConfig] = args return Boolean(maybeEvent && maybeConfig) }), - tap(([event, config]: [AnalyticsEvent, AnalyticsConfig]) => + tap(([event, config]: [AnalyticsEvent, AnalyticsConfig]) => { trackEvent(event, config) - ), + }), ignoreElements() ) } diff --git a/app/src/redux/analytics/hooks.ts b/app/src/redux/analytics/hooks.ts index 023c867241e..33968c78e8e 100644 --- a/app/src/redux/analytics/hooks.ts +++ b/app/src/redux/analytics/hooks.ts @@ -16,5 +16,5 @@ export function useTrackEvent(): (e: AnalyticsEvent) => void { const config: Config['analytics'] | undefined = useSelector( (state: State) => getConfig(state)?.analytics ) - return event => config && trackEvent(event, config) + return event => { if (config != null) trackEvent(event, config) } } diff --git a/app/src/redux/analytics/mixpanel.ts b/app/src/redux/analytics/mixpanel.ts index 4a59b5211ff..924d4b5b312 100644 --- a/app/src/redux/analytics/mixpanel.ts +++ b/app/src/redux/analytics/mixpanel.ts @@ -81,7 +81,7 @@ function initializeMixpanelInstanceOnce( if (!hasBeenInitialized && MIXPANEL_ID) { hasBeenInitialized = true log.debug('Initializing Mixpanel', { config }) - return mixpanel.init(MIXPANEL_ID, MIXPANEL_OPTS) + mixpanel.init(MIXPANEL_ID, MIXPANEL_OPTS) } } } diff --git a/app/src/redux/shell/epic.ts b/app/src/redux/shell/epic.ts index 73b5cb42849..58a8458b6c5 100644 --- a/app/src/redux/shell/epic.ts +++ b/app/src/redux/shell/epic.ts @@ -25,9 +25,9 @@ const sendActionToShellEpic: Epic = action$ => action$.pipe( // @ts-expect-error protect against absent meta key on action filter(a => a.meta != null && a.meta.shell != null && a.meta.shell), - tap((shellAction: Action) => + tap((shellAction: Action) => { ipcRenderer.send('dispatch', shellAction) - ), + }), ignoreElements() ) diff --git a/app/src/redux/shell/remote.ts b/app/src/redux/shell/remote.ts index 5717e5bdeaf..6692c6dca04 100644 --- a/app/src/redux/shell/remote.ts +++ b/app/src/redux/shell/remote.ts @@ -104,6 +104,8 @@ export function appShellListener({ remote.ipcRenderer.on( 'notify', (_, shellHostname, shellTopic, shellMessage) => { - callbackStore[shellHostname]?.[shellTopic]?.forEach(cb => cb(shellMessage)) + callbackStore[shellHostname]?.[shellTopic]?.forEach(cb => { + cb(shellMessage) + }) } ) diff --git a/app/src/resources/deck_configuration/hooks.tsx b/app/src/resources/deck_configuration/hooks.tsx index a3bf96173c3..42b1e657a02 100644 --- a/app/src/resources/deck_configuration/hooks.tsx +++ b/app/src/resources/deck_configuration/hooks.tsx @@ -191,7 +191,9 @@ export function useDeckConfigurationEditingTools( targetCutoutId != null ? ( setTargetCutoutId(null)} + closeModal={() => { + setTargetCutoutId(null) + }} isOnDevice={isOnDevice} /> ) : null, diff --git a/components/src/forms/InputField.stories.tsx b/components/src/forms/InputField.stories.tsx index 8d8b79bec96..c6d98531ff1 100644 --- a/components/src/forms/InputField.stories.tsx +++ b/components/src/forms/InputField.stories.tsx @@ -24,7 +24,9 @@ const Template: Story> = ({ error={error} secondaryCaption={secondaryCaption} value={controlledValue} - onChange={e => setControlledValue(e.target.value)} + onChange={e => { + setControlledValue(e.target.value) + }} /> ) diff --git a/components/src/forms/RadioGroup.stories.tsx b/components/src/forms/RadioGroup.stories.tsx index 0694c2bd89c..696adcfb60f 100644 --- a/components/src/forms/RadioGroup.stories.tsx +++ b/components/src/forms/RadioGroup.stories.tsx @@ -28,7 +28,9 @@ const Template: Story> = ({ setControlledValue(e.target.value)} + onChange={e => { + setControlledValue(e.target.value) + }} /> ) diff --git a/components/src/forms/SelectField.tsx b/components/src/forms/SelectField.tsx index a07e55156a9..3ae91bf492a 100644 --- a/components/src/forms/SelectField.tsx +++ b/components/src/forms/SelectField.tsx @@ -84,9 +84,9 @@ export function SelectField(props: SelectFieldProps): JSX.Element { const value = (opt as SelectOption).value onValueChange?.(name, value, e) }} - onBlur={() => onLoseFocus && onLoseFocus(name)} + onBlur={() => { if (onLoseFocus != null) onLoseFocus(name) }} /> - {caption &&

{caption}

} + {caption != null ?

{caption}

: null} ) } diff --git a/components/src/hardware-sim/DeckConfigurator/DeckConfigurator.stories.tsx b/components/src/hardware-sim/DeckConfigurator/DeckConfigurator.stories.tsx index f29b2cffc02..322f7a3281d 100644 --- a/components/src/hardware-sim/DeckConfigurator/DeckConfigurator.stories.tsx +++ b/components/src/hardware-sim/DeckConfigurator/DeckConfigurator.stories.tsx @@ -80,15 +80,23 @@ const staticFixtures = [ export const Default = Template.bind({}) Default.args = { deckConfig, - handleClickAdd: cutoutId => console.log(`add at ${cutoutId}`), - handleClickRemove: cutoutId => console.log(`remove at ${cutoutId}`), + handleClickAdd: cutoutId => { + console.log(`add at ${cutoutId}`) + }, + handleClickRemove: cutoutId => { + console.log(`remove at ${cutoutId}`) + }, } export const ReadOnly = Template.bind({}) ReadOnly.args = { deckConfig, - handleClickAdd: cutoutId => console.log(`add at ${cutoutId}`), - handleClickRemove: cutoutId => console.log(`remove at ${cutoutId}`), + handleClickAdd: cutoutId => { + console.log(`add at ${cutoutId}`) + }, + handleClickRemove: cutoutId => { + console.log(`remove at ${cutoutId}`) + }, readOnly: true, } diff --git a/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx index d790f2e922d..7904d45b271 100644 --- a/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx @@ -84,7 +84,9 @@ export function EmptyConfigFixture( > handleClickAdd(fixtureLocation)} + onClick={() => { + handleClickAdd(fixtureLocation) + }} > diff --git a/components/src/hardware-sim/DeckConfigurator/HeaterShakerFixture.tsx b/components/src/hardware-sim/DeckConfigurator/HeaterShakerFixture.tsx index a28448d0c51..a8691c3a22e 100644 --- a/components/src/hardware-sim/DeckConfigurator/HeaterShakerFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/HeaterShakerFixture.tsx @@ -85,7 +85,9 @@ export function HeaterShakerFixture( cursor={handleClickRemove != null ? 'pointer' : 'default'} onClick={ handleClickRemove != null - ? () => handleClickRemove(fixtureLocation, cutoutFixtureId) + ? () => { + handleClickRemove(fixtureLocation, cutoutFixtureId) + } : () => {} } > diff --git a/components/src/hardware-sim/DeckConfigurator/MagneticBlockFixture.tsx b/components/src/hardware-sim/DeckConfigurator/MagneticBlockFixture.tsx index d266402d0dd..9e320691ddc 100644 --- a/components/src/hardware-sim/DeckConfigurator/MagneticBlockFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/MagneticBlockFixture.tsx @@ -116,7 +116,9 @@ export function MagneticBlockFixture( cursor={handleClickRemove != null ? 'pointer' : 'default'} onClick={ handleClickRemove != null - ? () => handleClickRemove(fixtureLocation, cutoutFixtureId) + ? () => { + handleClickRemove(fixtureLocation, cutoutFixtureId) + } : () => {} } > diff --git a/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx index 8f343977931..7cf99c37994 100644 --- a/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx @@ -73,7 +73,9 @@ export function StagingAreaConfigFixture( cursor={handleClickRemove != null ? 'pointer' : 'default'} onClick={ handleClickRemove != null - ? () => handleClickRemove(fixtureLocation, cutoutFixtureId) + ? () => { + handleClickRemove(fixtureLocation, cutoutFixtureId) + } : () => {} } > diff --git a/components/src/hardware-sim/DeckConfigurator/TemperatureModuleFixture.tsx b/components/src/hardware-sim/DeckConfigurator/TemperatureModuleFixture.tsx index bda080fbec6..59419808f15 100644 --- a/components/src/hardware-sim/DeckConfigurator/TemperatureModuleFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/TemperatureModuleFixture.tsx @@ -86,7 +86,9 @@ export function TemperatureModuleFixture( cursor={handleClickRemove != null ? 'pointer' : 'default'} onClick={ handleClickRemove != null - ? () => handleClickRemove(fixtureLocation, cutoutFixtureId) + ? () => { + handleClickRemove(fixtureLocation, cutoutFixtureId) + } : () => {} } > diff --git a/components/src/hardware-sim/DeckConfigurator/ThermocyclerFixture.tsx b/components/src/hardware-sim/DeckConfigurator/ThermocyclerFixture.tsx index ec2971a6bb6..0c680bafa0c 100644 --- a/components/src/hardware-sim/DeckConfigurator/ThermocyclerFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/ThermocyclerFixture.tsx @@ -72,7 +72,9 @@ export function ThermocyclerFixture( cursor={handleClickRemove != null ? 'pointer' : 'default'} onClick={ handleClickRemove != null - ? () => handleClickRemove(fixtureLocation, cutoutFixtureId) + ? () => { + handleClickRemove(fixtureLocation, cutoutFixtureId) + } : () => {} } > diff --git a/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx index 8b6d174c4d6..9fe12c06c52 100644 --- a/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx @@ -83,7 +83,9 @@ export function TrashBinConfigFixture( cursor={handleClickRemove != null ? 'pointer' : 'default'} onClick={ handleClickRemove != null - ? () => handleClickRemove(fixtureLocation, cutoutFixtureId) + ? () => { + handleClickRemove(fixtureLocation, cutoutFixtureId) + } : () => {} } > diff --git a/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx index 13bf151a0d9..c9e2ea56467 100644 --- a/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx @@ -80,7 +80,9 @@ export function WasteChuteConfigFixture( cursor={handleClickRemove != null ? 'pointer' : 'default'} onClick={ handleClickRemove != null - ? () => handleClickRemove(fixtureLocation, cutoutFixtureId) + ? () => { + handleClickRemove(fixtureLocation, cutoutFixtureId) + } : () => {} } > diff --git a/components/src/hooks/useDrag.ts b/components/src/hooks/useDrag.ts index 8a89de19c09..5245909cc03 100644 --- a/components/src/hooks/useDrag.ts +++ b/components/src/hooks/useDrag.ts @@ -80,7 +80,11 @@ export const useDrag = (position: ElementPosition): UseDragResult => { }, position: elementPosition, isEnabled, - enable: () => setIsEnabled(true), - disable: () => setIsEnabled(false), + enable: () => { + setIsEnabled(true) + }, + disable: () => { + setIsEnabled(false) + }, } } diff --git a/components/src/hooks/useIdle.ts b/components/src/hooks/useIdle.ts index ad519c441ca..7fea9f832ca 100644 --- a/components/src/hooks/useIdle.ts +++ b/components/src/hooks/useIdle.ts @@ -53,10 +53,14 @@ export function useIdle( }, idleTime) } - events.forEach(event => document.addEventListener(event, handleEvents)) + events.forEach(event => { + document.addEventListener(event, handleEvents) + }) return () => { - events.forEach(event => document.removeEventListener(event, handleEvents)) + events.forEach(event => { + document.removeEventListener(event, handleEvents) + }) } }, [events, idleTime]) diff --git a/components/src/hooks/useInterval.ts b/components/src/hooks/useInterval.ts index 3f053589e60..19ec5289b55 100644 --- a/components/src/hooks/useInterval.ts +++ b/components/src/hooks/useInterval.ts @@ -30,7 +30,9 @@ export function useInterval( if (delay !== null && delay > 0) { if (immediate) tick() const id = setInterval(tick, delay) - return () => clearInterval(id) + return () => { + clearInterval(id) + } } }, [delay, immediate]) } diff --git a/components/src/hooks/useLongPress.ts b/components/src/hooks/useLongPress.ts index 2556720032f..04b23c815ee 100644 --- a/components/src/hooks/useLongPress.ts +++ b/components/src/hooks/useLongPress.ts @@ -73,7 +73,11 @@ export const useLongPress = (): UseLongPressResult => { isTapped, setIsLongPressed, setIsTapped, - enable: () => setIsEnabled(true), - disable: () => setIsEnabled(false), + enable: () => { + setIsEnabled(true) + }, + disable: () => { + setIsEnabled(false) + }, } } diff --git a/components/src/hooks/useSelectDeckLocation/index.tsx b/components/src/hooks/useSelectDeckLocation/index.tsx index 4716e535fc6..ff9e3333833 100644 --- a/components/src/hooks/useSelectDeckLocation/index.tsx +++ b/components/src/hooks/useSelectDeckLocation/index.tsx @@ -115,10 +115,10 @@ export function DeckLocationSelect({ ): void => { if (isDisabled) { setHoveredData({ - slot: slot, - slotPosition: slotPosition, - isDisabled: isDisabled, - disabledReason: disabledReason, + slot, + slotPosition, + isDisabled, + disabledReason, }) } else { setHoveredData(null) @@ -131,9 +131,8 @@ export function DeckLocationSelect({ return ( {deckDef.locations.addressableAreas // only render standard slot fixture components @@ -200,25 +199,24 @@ export function DeckLocationSelect({ cutoutId={cutoutId} fixtureBaseColor={fill} slotClipColor={COLORS.white} - onClick={() => - !isDisabled && - setSelectedLocation != null && - setSelectedLocation(slotLocation) - } + onClick={() => { + if (!isDisabled && setSelectedLocation != null) + setSelectedLocation(slotLocation) + }} cursor={ setSelectedLocation == null || isDisabled || isSelected ? 'default' : 'pointer' } deckDefinition={deckDef} - onMouseEnter={() => + onMouseEnter={() => { handleMouseEnter( slot, slotPosition, isDisabled, disabledReason ) - } + }} onMouseLeave={handleMouseLeave} /> @@ -228,11 +226,10 @@ export function DeckLocationSelect({ slotBaseColor={fill} slotName={slot.id} slotClipColor={COLORS.white} - onClick={() => - !isDisabled && - setSelectedLocation != null && - setSelectedLocation(slotLocation) - } + onClick={() => { + if (!isDisabled && setSelectedLocation != null) + setSelectedLocation(slotLocation) + }} cursor={ setSelectedLocation == null || isDisabled || isSelected ? 'default' @@ -296,14 +293,14 @@ export function DeckLocationSelect({ innerDivProps={ hoveredData.slot.id[0] === 'A' ? { - maxWidth: '25rem', - maxHeight: '10rem', - width: 'fit-content', - } + maxWidth: '25rem', + maxHeight: '10rem', + width: 'fit-content', + } : { - maxWidth: '20rem', - width: 'fit-content', - } + maxWidth: '20rem', + width: 'fit-content', + } } > {hoveredData.disabledReason != null ? t('location_occupied', { - fixture: getFixtureDisplayName( - hoveredData.disabledReason - ).toLowerCase(), - }) + fixture: getFixtureDisplayName( + hoveredData.disabledReason + ).toLowerCase(), + }) : 'Slot unavailable'} diff --git a/components/src/hooks/useSwipe.ts b/components/src/hooks/useSwipe.ts index 84bb3469330..10405c80175 100644 --- a/components/src/hooks/useSwipe.ts +++ b/components/src/hooks/useSwipe.ts @@ -27,7 +27,7 @@ export const useSwipe = (): UseSwipeResult => { if (!event.swipe) return swipeDirs.forEach( - dir => event.swipe[dir] && setSwipeType(`${str}-${dir}`) + dir => { if (event.swipe[dir] != null) setSwipeType(`${str}-${dir}`) } ) }) } @@ -56,7 +56,11 @@ export const useSwipe = (): UseSwipeResult => { isEnabled, setSwipeType, swipeType, - enable: () => setIsEnabled(true), - disable: () => setIsEnabled(false), + enable: () => { + setIsEnabled(true) + }, + disable: () => { + setIsEnabled(false) + }, } } diff --git a/components/src/hooks/useTimeout.ts b/components/src/hooks/useTimeout.ts index fbc997df4ae..8e499c7e71e 100644 --- a/components/src/hooks/useTimeout.ts +++ b/components/src/hooks/useTimeout.ts @@ -25,7 +25,9 @@ export function useTimeout( savedCallback.current != null && savedCallback.current() if (delay !== null) { const id = setTimeout(currentCallback, delay) - return () => clearTimeout(id) + return () => { + clearTimeout(id) + } } }, [delay]) } diff --git a/components/src/instrument/PipetteSelect.stories.tsx b/components/src/instrument/PipetteSelect.stories.tsx index c6dcf050663..461aa6b0e9d 100644 --- a/components/src/instrument/PipetteSelect.stories.tsx +++ b/components/src/instrument/PipetteSelect.stories.tsx @@ -14,8 +14,9 @@ const Template: Story> = ({ const [pipetteNameControlled, setPipetteNameControlled] = React.useState( pipetteName ) - const handleChange = (pipName: string): unknown => + const handleChange = (pipName: string): unknown => { setPipetteNameControlled(pipName) + } return ( setHovered(value)) as TimerHandler, + (() => { + setHovered(value) + }) as TimerHandler, delay ) } else { @@ -60,14 +62,23 @@ export function useHover(options: UseHoverOptions = {}): UseHoverResult { const handlers = useMemo( () => ({ - onPointerEnter: () => handleHoverChange(true, enterDelay), - onPointerLeave: () => handleHoverChange(false, leaveDelay), + onPointerEnter: () => { + handleHoverChange(true, enterDelay) + }, + onPointerLeave: () => { + handleHoverChange(false, leaveDelay) + }, }), [handleHoverChange, enterDelay, leaveDelay] ) // cleanup timeout on unmount - useEffect(() => () => clearTimeout(timeoutRef.current), []) + useEffect( + () => () => { + clearTimeout(timeoutRef.current) + }, + [] + ) return [hovered, handlers] } diff --git a/components/src/molecules/RoundTab.stories.tsx b/components/src/molecules/RoundTab.stories.tsx index fc0821c793d..340aedeccbd 100644 --- a/components/src/molecules/RoundTab.stories.tsx +++ b/components/src/molecules/RoundTab.stories.tsx @@ -27,7 +27,9 @@ const Tabs = (): JSX.Element => { setStep('setup')} + onClick={() => { + setStep('setup') + }} tabName={'setup'} > @@ -37,7 +39,9 @@ const Tabs = (): JSX.Element => { setStep('parameters')} + onClick={() => { + setStep('parameters') + }} > {'Parameters'} @@ -46,7 +50,9 @@ const Tabs = (): JSX.Element => { setStep('module controls')} + onClick={() => { + setStep('module controls') + }} > {'Module Controls'} @@ -55,7 +61,9 @@ const Tabs = (): JSX.Element => { setStep('run preview')} + onClick={() => { + setStep('run preview') + }} > {'Run Preview'} diff --git a/components/src/tooltips/HoverTooltip.tsx b/components/src/tooltips/HoverTooltip.tsx index 5141c2ace0f..a79e5818297 100644 --- a/components/src/tooltips/HoverTooltip.tsx +++ b/components/src/tooltips/HoverTooltip.tsx @@ -56,18 +56,16 @@ export class HoverTooltip extends React.Component< delayedOpen: () => void = () => { if (this.closeTimeout) clearTimeout(this.closeTimeout) - this.openTimeout = window.setTimeout( - () => this.setState({ isOpen: true }), - OPEN_DELAY_MS - ) + this.openTimeout = window.setTimeout(() => { + this.setState({ isOpen: true }) + }, OPEN_DELAY_MS) } delayedClose: () => void = () => { if (this.openTimeout) clearTimeout(this.openTimeout) - this.closeTimeout = window.setTimeout( - () => this.setState({ isOpen: false }), - CLOSE_DELAY_MS - ) + this.closeTimeout = window.setTimeout(() => { + this.setState({ isOpen: false }) + }, CLOSE_DELAY_MS) } render(): JSX.Element { diff --git a/components/src/tooltips/usePopper.ts b/components/src/tooltips/usePopper.ts index 6277e9e50ca..97b8b5e3ac9 100644 --- a/components/src/tooltips/usePopper.ts +++ b/components/src/tooltips/usePopper.ts @@ -20,7 +20,9 @@ const makeUpdateStateModifier = ( name: 'updateUsePopperState', enabled: true, phase: 'write', - fn: ({ state }) => handleStateUpdate(state.placement, state.styles), + fn: ({ state }) => { + handleStateUpdate(state.placement, state.styles) + }, }) const makeOffsetModifier = (offset: number): Partial> => ({ diff --git a/discovery-client/src/cli.ts b/discovery-client/src/cli.ts index 539bd6d0af6..d39ef832fbc 100755 --- a/discovery-client/src/cli.ts +++ b/discovery-client/src/cli.ts @@ -99,7 +99,9 @@ const browse = (argv: Argv): void => { const log = createLogger(argv) createClient(argv, robots => { - robots.forEach(robot => log.info('%o\n\n', robot)) + robots.forEach(robot => { + log.info('%o\n\n', robot) + }) }) log.warn('Browsing for services') diff --git a/labware-designer/src/organisms/CreateLabwareSandbox/index.tsx b/labware-designer/src/organisms/CreateLabwareSandbox/index.tsx index 998254c1bb7..902600dfd71 100644 --- a/labware-designer/src/organisms/CreateLabwareSandbox/index.tsx +++ b/labware-designer/src/organisms/CreateLabwareSandbox/index.tsx @@ -168,7 +168,9 @@ export function CreateLabwareSandbox(): JSX.Element { setLabwareSlot(e.target.value)} + onChange={e => { + setLabwareSlot(e.target.value) + }} > {SLOT_OPTIONS.map(slot => (