refactor(app): fix LPC button

closes #8494

app/src/organisms/ProtocolSetup/LabwarePositionCheck/IntroScreen.tsx

@@ -42,7 +42,7 @@ const DECK_LAYER_BLOCKLIST = [
  'screwHoles',
 ]
 
-const DECK_MAP_VIEWBOX = '-80 -100 550 560'
+const DECK_MAP_VIEWBOX = '-80 -100 570 540'
 
 export const IntroScreen = (props: {
  setCurrentLabwareCheckStep: (stepNumber: number) => void
@@ -82,7 +82,7 @@ export const IntroScreen = (props: {
  primaryPipetteMount={primaryPipetteMount}
  secondaryPipetteMount={secondaryPipetteMount}
  />
- <Box width="60%" padding={SPACING_3}>
+ <Box width="60%" paddingTop={SPACING_3}>
  <RobotWorkSpace
  deckDef={standardDeckDef as any}
  viewBox={DECK_MAP_VIEWBOX}
@@ -136,11 +136,7 @@ export const IntroScreen = (props: {
  </RobotWorkSpace>
  </Box>
  </Flex>
- <Flex
- justifyContent={JUSTIFY_CENTER}
- marginTop="-4rem"
- marginBottom={SPACING_4}
- >
+ <Flex justifyContent={JUSTIFY_CENTER} marginBottom={SPACING_4}>
  <PrimaryBtn
  title={t('start_position_check', {
  initial_labware_slot: firstStepLabwareSlot,

app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/IntroScreen.test.tsx

@@ -14,6 +14,7 @@ import { PositionCheckNav } from '../PositionCheckNav'
 import { useIntroInfo } from '../hooks'
 import { IntroScreen } from '../IntroScreen'
 import type { Section } from '../types'
+import { fireEvent } from '@testing-library/dom'
 
 jest.mock('../hooks')
 jest.mock('../PositionCheckNav')
@@ -59,7 +60,7 @@ describe('IntroScreen', () => {
 
  beforeEach(() => {
  props = {
- setCurrentLabwareCheckStep: () => {},
+ setCurrentLabwareCheckStep: jest.fn(),
  }
  when(mockRobotWorkSpace)
  .mockReturnValue(<div></div>) // this (default) empty div will be returned when RobotWorkSpace isn't called with expected props
@@ -115,4 +116,13 @@ describe('IntroScreen', () => {
  )
  getByText('Mock Position Check Nav')
  })
+ it('should call setCurrentLabwareCheckStep when the CTA button is pressed', () => {
+ const { getByRole } = render(props)
+ expect(props.setCurrentLabwareCheckStep).not.toHaveBeenCalled()
+ const genericStepScreenButton = getByRole('button', {
+ name: 'begin labware position check, move to Slot 2',
+ })
+ fireEvent.click(genericStepScreenButton)
+ expect(props.setCurrentLabwareCheckStep).toHaveBeenCalled()
+ })
 })

app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/LabwarePositionCheck.test.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react'
+import { resetAllWhenMocks, when } from 'jest-when'
+import { renderWithProviders } from '@opentrons/components/src/testing/utils'
+import { fireEvent } from '@testing-library/dom'
+import { i18n } from '../../../../i18n'
+import { LabwarePositionCheck } from '../index'
+import { GenericStepScreen } from '../GenericStepScreen'
+import { IntroScreen } from '../IntroScreen'
+import { useSteps } from '../hooks'
+import { LabwarePositionCheckStep } from '../types'
+
+jest.mock('../GenericStepScreen')
+jest.mock('../IntroScreen')
+jest.mock('../hooks')
+
+const mockGenericStepScreen = GenericStepScreen as jest.MockedFunction<
+ typeof GenericStepScreen
+>
+const mockIntroScreen = IntroScreen as jest.MockedFunction<typeof IntroScreen>
+const mockUseSteps = useSteps as jest.MockedFunction<typeof useSteps>
+
+const PICKUP_TIP_LABWARE_ID = 'PICKUP_TIP_LABWARE_ID'
+const PRIMARY_PIPETTE_ID = 'PRIMARY_PIPETTE_ID'
+
+const render = (props: React.ComponentProps<typeof LabwarePositionCheck>) => {
+ return renderWithProviders(<LabwarePositionCheck {...props} />, {
+ i18nInstance: i18n,
+ })[0]
+}
+
+describe('LabwarePositionCheck', () => {
+ let props: React.ComponentProps<typeof LabwarePositionCheck>
+ beforeEach(() => {
+ props = {
+ onCloseClick: jest.fn(),
+ }
+ when(mockUseSteps)
+ .calledWith()
+ .mockReturnValue([
+ {
+ commands: [
+ {
+ command: 'pickUpTip',
+ params: {
+ pipette: PRIMARY_PIPETTE_ID,
+ labware: PICKUP_TIP_LABWARE_ID,
+ },
+ },
+ ],
+ labwareId:
+ '1d57fc10-67ad-11ea-9f8b-3b50068bd62d:opentrons/opentrons_96_filtertiprack_200ul/1',
+ section: 'PRIMARY_PIPETTE_TIPRACKS',
+ } as LabwarePositionCheckStep,
+ ])
+ mockIntroScreen.mockReturnValue(<div>Mock Intro Screen Component </div>)
+ mockGenericStepScreen.mockReturnValue(null)
+ })
+ afterEach(() => {
+ resetAllWhenMocks()
+ jest.resetAllMocks()
+ })
+ it('renders LabwarePositionCheck header and button and no components', () => {
+ const { getByRole } = render(props)
+ getByRole('heading', {
+ name: 'Labware Position Check',
+ })
+ getByRole('button', {
+ name: 'exit',
+ })
+ })
+ it('renders LabwarePositionCheck header and exit button is pressed', () => {
+ const { getByRole } = render(props)
+ expect(props.onCloseClick).not.toHaveBeenCalled()
+ const exitButton = getByRole('button', {
+ name: 'exit',
+ })
+ fireEvent.click(exitButton)
+ expect(props.onCloseClick).toHaveBeenCalled()
+ })
+
+ it('renders LabwarePositionCheck with IntroScreen component', () => {
+ const { getByText } = render(props)
+ getByText('Mock Intro Screen Component')
+ })
+})