add unit test

Author: shiyaochen

protocol-designer/src/assets/localization/en/tooltip.json

@@ -37,7 +37,7 @@
       "aspirate_mmFromBottom": "Adjust tip position for aspirate",
       "aspirate_touchTip_checkbox": "Touch tip to each side of the well after aspirating",
       "aspirate_touchTip_mmFromTop": "Distance from the top of the well",
-      "aspirate_retract": " Withdraw the tip from the liquid after aspirating",
+      "aspirate_retract": "Withdraw the tip from the liquid after aspirating",
       "aspirate_submerge": "Lower the tip into the liquid before aspirating",
       "aspirate_wells": "First select a source labware",
       "blowout_checkbox": "Blow extra air through the tip",

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLiquidTools/MultiInputField.tsx

@@ -27,7 +27,7 @@ interface MultiInputFieldProps {
   tooltipContent: string
   propsForFields: FieldPropsByName
   fields: StepInputFieldProps[]
-  wellPosition?: boolean | null
+  isWellPosition?: boolean | null
   labwareId?: string | null
 }
 
@@ -36,7 +36,7 @@ export function MultiInputField(props: MultiInputFieldProps): JSX.Element {
     name,
     tab,
     tooltipContent,
-    wellPosition,
+    isWellPosition,
     fields,
     propsForFields,
     labwareId,
@@ -82,7 +82,7 @@ export function MultiInputField(props: MultiInputFieldProps): JSX.Element {
               errorToShow={errorToShow}
             />
           ))}
-          {wellPosition != null && (
+          {isWellPosition != null && (
             <PositionField
               padding="0"
               prefix={tab}

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLiquidTools/__tests__/MultiInputField.test.tsx

@@ -0,0 +1,72 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
+import { i18n } from '../../../../../../../assets/localization'
+import { renderWithProviders } from '../../../../../../../__testing-utils__'
+import { MultiInputField } from '../MultiInputField'
+
+import type { ComponentProps } from 'react'
+import { COLORS } from '@opentrons/components'
+
+const render = (props: ComponentProps<typeof MultiInputField>) => {
+  return renderWithProviders(<MultiInputField {...props} />, {
+    i18nInstance: i18n,
+  })
+}
+
+describe('MultiInputField', () => {
+  let props: ComponentProps<typeof MultiInputField>
+
+  beforeEach(() => {
+    props = {
+      name: 'Submerge',
+      tab: 'aspirate',
+      tooltipContent: 'some tooltip content',
+      fields: [
+        {
+          fieldTitle: 'submerge speed',
+          fieldKey: 'submerge_speed',
+          units: 'mm/s',
+        },
+        {
+          fieldTitle: 'submerge delay seconds',
+          fieldKey: 'submerge_delay_seconds',
+          units: 'mm',
+        },
+      ],
+      propsForFields: {
+        aspirate_submerge_speed: {
+          onFieldFocus: vi.fn(),
+          onFieldBlur: vi.fn(),
+          errorToShow: null,
+          disabled: false,
+          name: 'aspirate_submerge_speed',
+          updateValue: vi.fn(),
+          value: null,
+        },
+      },
+    }
+  })
+
+  it('should render input fields with caption and units wrapped by ListItem', () => {
+    render(props)
+    screen.getByText('Submerge')
+    screen.getByTestId('information_icon')
+    const listItem = screen.getByTestId('ListItem_noActive')
+    expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.grey20}`)
+    screen.getByText('submerge speed')
+    screen.getByText('mm/s')
+    screen.getByText('submerge delay seconds')
+    screen.getByText('mm')
+    const inputs = screen.getAllByRole('textbox', { name: '' })
+    expect(inputs).toHaveLength(2)
+    fireEvent.change(inputs[0], { target: { value: ['5'] } })
+    expect(
+      props.propsForFields.aspirate_submerge_speed.updateValue
+    ).toHaveBeenCalled()
+  })
+
+  it('should render a well position listbutton when isWellPosition is true', () => {
+    props.isWellPosition = true
+    render(props)
+  })
+})

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLiquidTools/index.tsx

@@ -362,7 +362,7 @@ export function MoveLiquidTools(props: StepFormProps): JSX.Element {
             tooltipContent={t(`tooltip:step_fields.defaults.${tab}_retract`)}
             propsForFields={propsForFields}
             fields={getFields('retract')}
-            wellPosition={true}
+            isWellPosition={true}
             labwareId={
               formData[
                 getLabwareFieldForPositioningField(