feat(components): add pipette render component (#8414)

* feat(components): add pipette render component

* make testing utils a first class directory

#8379

app/src/organisms/Alerts/__tests__/Alerts.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { mountWithStore } from '@opentrons/components/__utils__'
+import { mountWithStore } from '@opentrons/components'
 import * as AppAlerts from '../../../redux/alerts'
 import { Alerts } from '..'
 import { LostConnectionAlert } from '../LostConnectionAlert'

app/src/organisms/CalibratePipetteOffset/__tests__/useCalibratePipetteOffset.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import uniqueId from 'lodash/uniqueId'
-import { mountWithStore } from '@opentrons/components/__utils__'
+import { mountWithStore } from '@opentrons/components'
 import { act } from 'react-dom/test-utils'
 
 import * as RobotApi from '../../../redux/robot-api'

app/src/organisms/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react'
-import { mountWithStore } from '@opentrons/components/__utils__'
+import {
+  WrapperWithStore,
+  mountWithStore,
+  CheckboxField,
+} from '@opentrons/components'
 import { act } from 'react-dom/test-utils'
 
 import { AskForCalibrationBlockModal } from '../AskForCalibrationBlockModal'
-import { CheckboxField } from '@opentrons/components'
 import { setUseTrashSurfaceForTipCal } from '../../../redux/calibration'
 
-import type { WrapperWithStore } from '@opentrons/components/__utils__'
-
 type RenderReturnType = WrapperWithStore<
   React.ComponentProps<typeof AskForCalibrationBlockModal>
 >

app/src/organisms/CalibrationPanels/__tests__/ChooseTipRack.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { mountWithStore } from '@opentrons/components/__utils__'
+import { mountWithStore } from '@opentrons/components'
 
 import { mockAttachedPipette } from '../../../redux/pipettes/__fixtures__'
 import { mockDeckCalTipRack } from '../../../redux/sessions/__fixtures__'
@@ -17,7 +17,7 @@ import { getAttachedPipettes } from '../../../redux/pipettes'
 import { ChooseTipRack } from '../ChooseTipRack'
 import type { AttachedPipettesByMount } from '../../../redux/pipettes/types'
 import type { ReactWrapper } from 'enzyme'
-import type { WrapperWithStore } from '@opentrons/components/__utils__'
+import type { WrapperWithStore } from '@opentrons/components'
 
 jest.mock('../../../redux/pipettes/selectors')
 jest.mock('../../../redux/calibration/')

app/src/organisms/ChangePipette/__tests__/ConfirmPipette.test.tsx

@@ -2,11 +2,11 @@ import * as React from 'react'
 import {
   mountWithStore,
   WrapperWithStore,
-} from '@opentrons/components/__utils__'
-
+  TitleBar,
+  Icon,
+} from '@opentrons/components'
 import { ConfirmPipette } from '../ConfirmPipette'
 import { CheckPipettesButton } from '../CheckPipettesButton'
-import { TitleBar, Icon } from '@opentrons/components'
 
 import type { Action, State } from '../../../redux/types'
 import type { PipetteOffsetCalibration } from '../../../redux/calibration/types'

app/src/organisms/ProtocolModuleList/__tests__/ProtocolModuleList.test.tsx

@@ -1,9 +1,13 @@
 import * as React from 'react'
 import { StaticRouter } from 'react-router-dom'
-import { mountWithProviders } from '@opentrons/components/__utils__'
-
+import {
+  mountWithProviders,
+  Box,
+  Flex,
+  ListItem,
+  Tooltip,
+} from '@opentrons/components'
 import { i18n } from '../../../i18n'
-import { Box, Flex, ListItem, Tooltip } from '@opentrons/components'
 import { mockMagneticModule } from '../../../redux/modules/__fixtures__'
 import * as robotSelectors from '../../../redux/robot/selectors'
 import * as moduleSelectors from '../../../redux/modules/selectors'

app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/ExtraAttentionWarning.test.tsx

@@ -4,7 +4,7 @@ import { fireEvent, screen } from '@testing-library/react'
 import {
   partialComponentPropsMatcher,
   renderWithProviders,
-} from '@opentrons/components/__utils__'
+} from '@opentrons/components'
 import { i18n } from '../../../../../i18n'
 import { ExtraAttentionWarning } from '../ExtraAttentionWarning'
 import { SecureLabwareModal } from '../SecureLabwareModal'
@@ -17,7 +17,7 @@ const mockSecureLabwareModal = SecureLabwareModal as jest.MockedFunction<
 const render = (props: React.ComponentProps<typeof ExtraAttentionWarning>) => {
   return renderWithProviders(<ExtraAttentionWarning {...props} />, {
     i18nInstance: i18n,
-  })
+  })[0]
 }
 
 describe('ExtraAttentionWarning', () => {

app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareInfoOverlay.test.tsx

@@ -5,7 +5,7 @@ import {
   LabwareDefinition2,
 } from '@opentrons/shared-data'
 import fixture_tiprack_300_ul from '@opentrons/shared-data/labware/fixtures/2/fixture_tiprack_300_ul.json'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../../i18n'
 import { LabwareInfoOverlay } from '../LabwareInfoOverlay'
 
@@ -25,7 +25,7 @@ const render = (props: React.ComponentProps<typeof LabwareInfoOverlay>) => {
     {
       i18nInstance: i18n,
     }
-  )
+  )[0]
 }
 
 const mockGetLabwareDisplayName = getLabwareDisplayName as jest.MockedFunction<
@@ -55,7 +55,7 @@ describe('LabwareInfoOverlay', () => {
     getByText('Offset Data')
   })
   // eslint-disable-next-line jest/no-disabled-tests
-  it.skip('should renders labware offset data', () => {
+  it.skip('should render labware offset data', () => {
     // implement when data is available
   })
 })

app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareSetup.test.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react'
 import { when, resetAllWhenMocks } from 'jest-when'
 import { StaticRouter } from 'react-router-dom'
-import { LabwareRender, RobotWorkSpace, Module } from '@opentrons/components'
+import {
+  renderWithProviders,
+  componentPropsMatcher,
+  partialComponentPropsMatcher,
+  LabwareRender,
+  RobotWorkSpace,
+  Module,
+} from '@opentrons/components'
 import {
   inferModuleOrientationFromXCoordinate,
   LabwareDefinition2,
@@ -11,11 +18,6 @@ import {
 import fixture_tiprack_300_ul from '@opentrons/shared-data/labware/fixtures/2/fixture_tiprack_300_ul.json'
 import standardDeckDef from '@opentrons/shared-data/deck/definitions/2/ot2_standard.json'
 import { fireEvent, screen } from '@testing-library/react'
-import {
-  renderWithProviders,
-  componentPropsMatcher,
-  partialComponentPropsMatcher,
-} from '@opentrons/components/__utils__'
 import { i18n } from '../../../../../i18n'
 import { LabwareSetup } from '..'
 import { LabwareSetupModal } from '../LabwareSetupModal'
@@ -94,7 +96,7 @@ const render = () => {
     {
       i18nInstance: i18n,
     }
-  )
+  )[0]
 }
 
 const STUBBED_ORIENTATION_VALUE = 'left'

app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareSetupModal.test.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react'
 import { fireEvent } from '@testing-library/react'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../../i18n'
 import { LabwareSetupModal } from '../LabwareSetupModal'
 
 const render = (props: React.ComponentProps<typeof LabwareSetupModal>) => {
   return renderWithProviders(<LabwareSetupModal {...props} />, {
     i18nInstance: i18n,
-  })
+  })[0]
 }
 
 describe('LabwareSetupModal', () => {

app/src/organisms/ProtocolSetup/RunSetupCard/ModuleSetup/__tests__/ModuleInfo.test.tsx

@@ -2,13 +2,13 @@ import React from 'react'
 import '@testing-library/jest-dom'
 import { ModuleModel, ModuleType } from '@opentrons/shared-data'
 import { ModuleInfo } from '../ModuleInfo'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../../i18n'
 
 const render = (props: React.ComponentProps<typeof ModuleInfo>) => {
   return renderWithProviders(<ModuleInfo {...props} />, {
     i18nInstance: i18n,
-  })
+  })[0]
 }
 const mockTCModule = {
   labwareOffset: { x: 3, y: 3, z: 3 },

app/src/organisms/ProtocolSetup/RunSetupCard/ModuleSetup/__tests__/ModuleSetup.test.tsx

@@ -2,13 +2,13 @@ import * as React from 'react'
 import '@testing-library/jest-dom'
 import { when, resetAllWhenMocks } from 'jest-when'
 import { StaticRouter } from 'react-router-dom'
-import { RobotWorkSpace } from '@opentrons/components'
-import standardDeckDef from '@opentrons/shared-data/deck/definitions/2/ot2_standard.json'
 import {
   renderWithProviders,
   partialComponentPropsMatcher,
   componentPropsMatcher,
-} from '@opentrons/components/__utils__'
+  RobotWorkSpace,
+} from '@opentrons/components'
+import standardDeckDef from '@opentrons/shared-data/deck/definitions/2/ot2_standard.json'
 import { i18n } from '../../../../../i18n'
 import { ModuleSetup } from '..'
 import { ModuleInfo } from '../ModuleInfo'
@@ -74,7 +74,7 @@ const render = (props: React.ComponentProps<typeof ModuleSetup>) => {
     {
       i18nInstance: i18n,
     }
-  )
+  )[0]
 }
 
 const STUBBED_ORIENTATION_VALUE = 'left'

app/src/organisms/ProtocolSetup/RunSetupCard/ModuleSetup/__tests__/MultipleModuleModal.test.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react'
 import { fireEvent } from '@testing-library/react'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../../i18n'
 import { MultipleModulesModal } from '../MultipleModulesModal'
 
 const render = (props: React.ComponentProps<typeof MultipleModulesModal>) => {
   return renderWithProviders(<MultipleModulesModal {...props} />, {
     i18nInstance: i18n,
-  })
+  })[0]
 }
 
 describe('MultipleModulesModal', () => {

app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/CalibrationItem.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import '@testing-library/jest-dom'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 
 import { i18n } from '../../../../../i18n'
 import { CalibrationItem } from '../CalibrationItem'
@@ -15,7 +15,7 @@ describe('CalibrationItem', () => {
     return renderWithProviders(
       <CalibrationItem {...{ subText, calibratedDate, title, button }} />,
       { i18nInstance: i18n }
-    )
+    )[0]
   }
 
   it('renders all nodes with prop contents', () => {

app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/DeckCalibration.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import '@testing-library/jest-dom'
 import { fireEvent } from '@testing-library/react'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 import { mockDeckCalData } from '../../../../../redux/calibration/__fixtures__'
 import * as calibrationSelectors from '../../../../../redux/calibration/selectors'
 
@@ -13,17 +13,15 @@ jest.mock('../../../../../redux/calibration/selectors')
 const mockGetDeckCalData = calibrationSelectors.getDeckCalibrationData as jest.MockedFunction<
   typeof calibrationSelectors.getDeckCalibrationData
 >
+const render = () => {
+  return renderWithProviders(<DeckCalibration robotName="robot name" />, {
+    i18nInstance: i18n,
+  })[0]
+}
 
 describe('DeckCalibration', () => {
-  let render: () => ReturnType<typeof renderWithProviders>
-
   beforeEach(() => {
     mockGetDeckCalData.mockReturnValue(mockDeckCalData)
-    render = () => {
-      return renderWithProviders(<DeckCalibration robotName="robot name" />, {
-        i18nInstance: i18n,
-      })
-    }
   })
 
   afterEach(() => {

app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/PipetteCalibration.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import '@testing-library/jest-dom'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../../i18n'
 import { mockProtocolPipetteTipRackCalInfo } from '../../../../../redux/pipettes/__fixtures__'
 import { PipetteCalibration } from '../PipetteCalibration'
@@ -25,7 +25,7 @@ describe('PipetteCalibration', () => {
         }}
       />,
       { i18nInstance: i18n }
-    )
+    )[0]
   }
 
   afterEach(() => {

app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/RobotCalibration.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import '@testing-library/jest-dom'
 import { fireEvent } from '@testing-library/react'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../../i18n'
 import * as PipetteOffset from '../../../../../redux/calibration/pipette-offset'
 import * as TipLength from '../../../../../redux/calibration/tip-length'
@@ -67,7 +67,7 @@ describe('RobotCalibration', () => {
     jest.useRealTimers()
   })
   it('calls fetches data on mount and on a 10s interval', () => {
-    const { store } = render()
+    const store = render()[1]
 
     expect(store.dispatch).toHaveBeenNthCalledWith(
       1,
@@ -86,7 +86,7 @@ describe('RobotCalibration', () => {
   })
 
   it('renders all text titles and button', () => {
-    const { getByRole } = render()
+    const { getByRole } = render()[0]
     expect(getByRole('heading', { name: 'Required Pipettes' })).toBeTruthy()
     expect(
       getByRole('heading', { name: 'Required Tip Length Calibrations' })
@@ -101,18 +101,18 @@ describe('RobotCalibration', () => {
     ).toBeTruthy()
   })
   it('changes Proceed CTA copy based on next step', () => {
-    const { getByRole } = render({ nextStep: 'labware_setup_step' })
+    const { getByRole } = render({ nextStep: 'labware_setup_step' })[0]
     expect(
       getByRole('button', { name: 'Proceed to Labware Setup' })
     ).toBeTruthy()
   })
   it('calls the expandStep function on click', () => {
-    const { getByRole } = render()
+    const { getByRole } = render()[0]
     fireEvent.click(getByRole('button', { name: 'Proceed to Module Setup' }))
     expect(mockExpandStep).toHaveBeenCalled()
   })
   it('does not the expandStep function on click if button is disabled', () => {
-    const { getByRole } = render({ calibrationStatus: { complete: false } })
+    const { getByRole } = render({ calibrationStatus: { complete: false } })[0]
     fireEvent.click(getByRole('button', { name: 'Proceed to Module Setup' }))
     expect(mockExpandStep).not.toHaveBeenCalled()
   })

app/src/organisms/ProtocolSetup/RunSetupCard/__tests__/ProceedToRunCta.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import '@testing-library/jest-dom'
 import { StaticRouter } from 'react-router-dom'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../i18n'
 import * as hooks from '../hooks'
 import { ProceedToRunCta } from '../ProceedToRunCta'
@@ -53,7 +53,7 @@ const render = (props: React.ComponentProps<typeof ProceedToRunCta>) => {
     {
       i18nInstance: i18n,
     }
-  )
+  )[0]
 }
 describe('ProceedToRunCta', () => {
   let props: React.ComponentProps<typeof ProceedToRunCta>

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import '@testing-library/jest-dom'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 
 import { i18n } from '../../../i18n'
 import { CollapsibleStep } from '../RunSetupCard/CollapsibleStep'
@@ -29,7 +29,7 @@ describe('CollapsibleStep', () => {
         }}
       />,
       { i18nInstance: i18n }
-    )
+    )[0]
   }
   let toggleExpandedMock: jest.MockedFunction<() => void>