diff --git a/app/src/App/index.tsx b/app/src/App/index.tsx index 732186cf92e..848f9828655 100644 --- a/app/src/App/index.tsx +++ b/app/src/App/index.tsx @@ -57,7 +57,9 @@ export const AppComponent = (): JSX.Element => { + + @@ -76,10 +78,8 @@ export const AppComponent = (): JSX.Element => { - - ) diff --git a/app/src/organisms/ProtocolSetup/LabwareOffsetSuccessToast.tsx b/app/src/organisms/ProtocolSetup/LabwareOffsetSuccessToast.tsx index 723a9625bcd..92363832bb8 100644 --- a/app/src/organisms/ProtocolSetup/LabwareOffsetSuccessToast.tsx +++ b/app/src/organisms/ProtocolSetup/LabwareOffsetSuccessToast.tsx @@ -7,8 +7,8 @@ import { SPACING_2, } from '@opentrons/components' import { useTranslation } from 'react-i18next' -import { useCurrentProtocolRun } from '../ProtocolUpload/hooks' import { Portal } from '../../App/portal' +import { useCurrentProtocolRun } from '../ProtocolUpload/hooks' interface LabwareOffsetSuccessToastProps { onCloseClick: () => unknown @@ -22,7 +22,7 @@ export function LabwareOffsetSuccessToast( const labwareOffsets = currentRunData?.labwareOffsets return ( - + void + onCloseClick: () => unknown }): JSX.Element | null => { const { savePositionCommandData } = props const [offsets, setLabwareOffsets] = React.useState([]) @@ -36,7 +37,6 @@ export const SummaryScreen = (props: { .catch((e: Error) => console.error(`error getting labware offsetsL ${e.message}`) ) - const [showLPCSuccessToast, setShowLPCSuccessToast] = React.useState(true) if (introInfo == null) return null if (protocolData == null) return null @@ -73,14 +73,11 @@ export const SummaryScreen = (props: { - showLPCSuccessToast && ( - setShowLPCSuccessToast(false)} - /> - ) - } - id={'Lpc_summaryScreen_applyOffsetButton'} + onClick={() => { + props.onLabwarePositionCheckComplete() + props.onCloseClick() + }} + id={'SummaryScreen_applyOffsetButton'} > {t('close_and_apply_offset_data')} diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/LabwarePositionCheck.test.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/LabwarePositionCheck.test.tsx index 38220382771..b9b32767027 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/LabwarePositionCheck.test.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/LabwarePositionCheck.test.tsx @@ -58,6 +58,7 @@ describe('LabwarePositionCheck', () => { beforeEach(() => { props = { onCloseClick: jest.fn(), + onLabwarePositionCheckComplete: jest.fn(), } when(mockUseSteps) .calledWith() diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/SummaryScreen.test.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/SummaryScreen.test.tsx index 041ba51777d..c9c78f31abc 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/SummaryScreen.test.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/SummaryScreen.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { when } from 'jest-when' +import { fireEvent } from '@testing-library/dom' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../../i18n' import { useProtocolDetails } from '../../../RunDetails/hooks' @@ -9,15 +10,12 @@ import { SummaryScreen } from '../SummaryScreen' import { LabwareOffsetsSummary } from '../LabwareOffsetsSummary' import { useIntroInfo, useLabwareOffsets } from '../hooks' import { Section } from '../types' -import { LabwareOffsetSuccessToast } from '../../LabwareOffsetSuccessToast' -import { fireEvent, getByText, screen } from '@testing-library/dom' jest.mock('../SectionList') jest.mock('../hooks') jest.mock('../DeckMap') jest.mock('../../../RunDetails/hooks') jest.mock('../LabwareOffsetsSummary') -jest.mock('../../LabwareOffsetSuccessToast') const mockSectionList = SectionList as jest.MockedFunction const mockUseIntroInfo = useIntroInfo as jest.MockedFunction< @@ -26,7 +24,6 @@ const mockUseIntroInfo = useIntroInfo as jest.MockedFunction< const mockUseProtocolDetails = useProtocolDetails as jest.MockedFunction< typeof useProtocolDetails > - const mockDeckmap = DeckMap as jest.MockedFunction const mockLabwareOffsetsSummary = LabwareOffsetsSummary as jest.MockedFunction< @@ -35,9 +32,6 @@ const mockLabwareOffsetsSummary = LabwareOffsetsSummary as jest.MockedFunction< const mockUseLabwareOffsets = useLabwareOffsets as jest.MockedFunction< typeof useLabwareOffsets > -const mockLabwareOffsetsSuccessToast = LabwareOffsetSuccessToast as jest.MockedFunction< - typeof LabwareOffsetSuccessToast -> const MOCK_SECTIONS = ['PRIMARY_PIPETTE_TIPRACKS' as Section] const LABWARE_DEF_ID = 'LABWARE_DEF_ID' @@ -51,6 +45,8 @@ const render = () => { return renderWithProviders( , { i18nInstance: i18n, @@ -62,9 +58,6 @@ describe('SummaryScreen', () => { beforeEach(() => { mockSectionList.mockReturnValue(
Mock SectionList
) mockDeckmap.mockReturnValue(
Mock DeckMap
) - mockLabwareOffsetsSuccessToast.mockReturnValue( -
Mock LabwareOffsetSuccessToast
- ) mockLabwareOffsetsSummary.mockReturnValue(
Mock Labware Offsets Summary
) @@ -107,13 +100,11 @@ describe('SummaryScreen', () => { getByText('Mock Labware Offsets Summary') getByText('Labware Position Check Complete') }) - it('renders button and clicks it', () => { + it('renders apply offset button and clicks it', () => { const { getByRole } = render() - expect(screen.queryByText('Mock LabwareOffsetSuccessToast')).toBeNull() const button = getByRole('button', { name: 'Close and apply labware offset data', }) fireEvent.click(button) - expect(screen.queryByText('Mock LabwareOffsetSuccessToast')).not.toBeNull() }) }) diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/index.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/index.tsx index ccda3913f23..d6eefe8fd32 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/index.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/index.tsx @@ -23,6 +23,7 @@ import type { SavePositionCommandData } from './types' interface LabwarePositionCheckModalProps { onCloseClick: () => unknown + onLabwarePositionCheckComplete: () => void } export const LabwarePositionCheck = ( props: LabwarePositionCheckModalProps @@ -34,7 +35,6 @@ export const LabwarePositionCheck = ( setSavePositionCommandData, ] = React.useState({}) const [isRestartingRun, setIsRestartingRun] = React.useState(false) - const { confirm: confirmExitLPC, showConfirmation, @@ -139,7 +139,11 @@ export const LabwarePositionCheck = ( }, }} > - + ) } else if (currentCommandIndex !== 0) { diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareSetup.test.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareSetup.test.tsx index 806d6f0401d..eacf60dc8e1 100644 --- a/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareSetup.test.tsx +++ b/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareSetup.test.tsx @@ -19,6 +19,7 @@ import fixture_tiprack_300_ul from '@opentrons/shared-data/labware/fixtures/2/fi import standardDeckDef from '@opentrons/shared-data/deck/definitions/2/ot2_standard.json' import { fireEvent, screen } from '@testing-library/react' import { i18n } from '../../../../../i18n' +import { LabwareOffsetSuccessToast } from '../../../LabwareOffsetSuccessToast' import { LabwarePositionCheck } from '../../../LabwarePositionCheck' import { useModuleRenderInfoById, @@ -38,6 +39,7 @@ jest.mock('../LabwareInfoOverlay') jest.mock('../ExtraAttentionWarning') jest.mock('../../../hooks') jest.mock('../utils/getModuleTypesThatRequireExtraAttention') +jest.mock('../../../LabwareOffsetSuccessToast') jest.mock('@opentrons/components', () => { const actualComponents = jest.requireActual('@opentrons/components') return { @@ -87,6 +89,9 @@ const mockUseModuleRenderInfoById = useModuleRenderInfoById as jest.MockedFuncti const mockLabwarePostionCheck = LabwarePositionCheck as jest.MockedFunction< typeof LabwarePositionCheck > +const mockLabwareOffsetSuccessToast = LabwareOffsetSuccessToast as jest.MockedFunction< + typeof LabwareOffsetSuccessToast +> const deckSlotsById = standardDeckDef.locations.orderedSlots.reduce( (acc, deckSlot) => ({ ...acc, [deckSlot.id]: deckSlot }), @@ -143,6 +148,13 @@ describe('LabwareSetup', () => { .mockImplementation(({ onCloseClick }) => (
mock LabwareOffsetModal
)) + when(mockLabwareOffsetSuccessToast) + .calledWith( + componentPropsMatcher({ + onCloseClick: expect.anything(), + }) + ) + .mockReturnValue(
mock LabwareOffsetSuccessToast
) when(mockLabwareRender) .mockReturnValue(
) // this (default) empty div will be returned when LabwareRender isn't called with expected labware definition @@ -339,4 +351,16 @@ describe('LabwareSetup', () => { const { getByText } = render() getByText('mock extra attention warning with magnetic module and TC') }) + it('should render LPC success toast when apply LPC offsets button is clicked', () => { + expect(screen.queryByText('mock LabwareOffsetSuccessToast')).toBeNull() + when(mockLabwarePostionCheck) + .calledWith( + partialComponentPropsMatcher({ + onLabwarePositionCheckComplete: expect.anything(), + }) + ) + .mockImplementation(({ onLabwarePositionCheckComplete }) => ( +
+ )) + }) }) diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/index.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/index.tsx index b4bf23fe688..58b2bcb4c21 100644 --- a/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/index.tsx +++ b/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/index.tsx @@ -34,6 +34,7 @@ import { LabwareInfoOverlay } from './LabwareInfoOverlay' import { LabwareOffsetModal } from './LabwareOffsetModal' import { getModuleTypesThatRequireExtraAttention } from './utils/getModuleTypesThatRequireExtraAttention' import { ExtraAttentionWarning } from './ExtraAttentionWarning' +import { LabwareOffsetSuccessToast } from '../../LabwareOffsetSuccessToast' const DECK_LAYER_BLOCKLIST = [ 'calibrationMarkings', @@ -67,8 +68,15 @@ export const LabwareSetup = (): JSX.Element | null => { showLabwarePositionCheckModal, setShowLabwarePositionCheckModal, ] = React.useState(false) + const [showLPCSuccessToast, setShowLPCSuccessToast] = React.useState(false) + return ( + {showLPCSuccessToast && ( + setShowLPCSuccessToast(false)} + /> + )} {showLabwareHelpModal && ( setShowLabwareHelpModal(false)} @@ -77,6 +85,7 @@ export const LabwareSetup = (): JSX.Element | null => { {showLabwarePositionCheckModal && ( setShowLabwarePositionCheckModal(false)} + onLabwarePositionCheckComplete={() => setShowLPCSuccessToast(true)} /> )} { jest.resetAllMocks() }) - it('renders LPC success toast and is clickable', () => { + it('renders LPC success toast and is clickable with 0 offsets', () => { const { getByText } = render(props) const successToast = getByText('No Labware Offsets created') fireEvent.click(successToast) }) - it('renders LPC success toast and is clickable', () => { + it('renders LPC success toast and is clickable with 2 offsets', () => { mockAlertItem.mockReturnValue(
2 Labware Offsets created
) when(mockUseCurrentProtocolRun) .calledWith()