fix(app): connect pipette settings form's submit button (#11288)

vabruzzo · web-flow · commit 14228ac5540d · 2022-08-05T13:31:39.000-04:00
diff --git a/app/src/organisms/ConfigurePipette/ConfigForm.tsx b/app/src/organisms/ConfigurePipette/ConfigForm.tsx
@@ -40,8 +40,8 @@ export interface ConfigFormProps {
   settings: PipetteSettingsFieldsMap
   updateInProgress: boolean
   updateSettings: (fields: PipetteSettingsFieldsUpdate) => unknown
-  closeModal: () => unknown
   groupLabels: string[]
+  formId: string
   __showHiddenFields: boolean
 }
 
@@ -184,7 +184,7 @@ export class ConfigForm extends React.Component<ConfigFormProps> {
   }
 
   render(): JSX.Element {
-    const { updateInProgress } = this.props
+    const { updateInProgress, formId } = this.props
     const fields = this.getVisibleFields()
     const UNKNOWN_KEYS = this.getUnknownKeys()
     const plungerFields = this.getFieldsByKey(PLUNGER_KEYS, fields)
@@ -217,7 +217,7 @@ export class ConfigForm extends React.Component<ConfigFormProps> {
           }
           return (
             <Box overflowY="scroll">
-              <Form>
+              <Form id={formId}>
                 <ConfigFormResetButton
                   onClick={handleReset}
                   disabled={updateInProgress}
diff --git a/app/src/organisms/ConfigurePipette/ConfigFormSubmitButton.tsx b/app/src/organisms/ConfigurePipette/ConfigFormSubmitButton.tsx
@@ -9,12 +9,13 @@ import {
 import { PrimaryButton } from '../../atoms/buttons'
 export interface ConfigFormSubmitButtonProps {
   disabled: boolean
+  formId: string
 }
 
 export function ConfigFormSubmitButton(
   props: ConfigFormSubmitButtonProps
 ): JSX.Element {
-  const { disabled } = props
+  const { disabled, formId } = props
   const { t } = useTranslation('shared')
 
   return (
@@ -24,7 +25,7 @@ export function ConfigFormSubmitButton(
       textTransform={TEXT_TRANSFORM_UPPERCASE}
       boxShadow={'0px -4px 12px rgba(0, 0, 0, 0.15)'}
     >
-      <PrimaryButton type={'submit'} disabled={disabled}>
+      <PrimaryButton type="submit" form={formId} disabled={disabled}>
         {t('confirm')}
       </PrimaryButton>
     </Flex>
diff --git a/app/src/organisms/ConfigurePipette/__tests__/ConfigFormSubmitButton.test.tsx b/app/src/organisms/ConfigurePipette/__tests__/ConfigFormSubmitButton.test.tsx
@@ -14,6 +14,7 @@ describe('ConfigFormSubmitButton', () => {
   beforeEach(() => {
     props = {
       disabled: false,
+      formId: 'id',
     }
   })
   afterEach(() => {
@@ -27,6 +28,7 @@ describe('ConfigFormSubmitButton', () => {
   it('renders bottom button text and disabled', () => {
     props = {
       disabled: true,
+      formId: 'id',
     }
     const { getByRole } = render(props)
     const button = getByRole('button', { name: 'Confirm' })
diff --git a/app/src/organisms/ConfigurePipette/__tests__/ConfigurePipette.test.tsx b/app/src/organisms/ConfigurePipette/__tests__/ConfigurePipette.test.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react'
+import { when, resetAllWhenMocks } from 'jest-when'
+import { renderWithProviders } from '@opentrons/components'
+import { i18n } from '../../../i18n'
+import * as RobotApi from '../../../redux/robot-api'
+import { ConfigurePipette } from '../../ConfigurePipette'
+import { getAttachedPipetteSettingsFieldsById } from '../../../redux/pipettes'
+import { mockPipetteSettingsFieldsMap } from '../../../redux/pipettes/__fixtures__'
+import { getConfig } from '../../../redux/config'
+
+import type { DispatchApiRequestType } from '../../../redux/robot-api'
+import type { State } from '../../../redux/types'
+
+jest.mock('../../../redux/robot-api')
+jest.mock('../../../redux/config')
+jest.mock('../../../redux/pipettes')
+
+const mockGetConfig = getConfig as jest.MockedFunction<typeof getConfig>
+const mockUseDispatchApiRequest = RobotApi.useDispatchApiRequest as jest.MockedFunction<
+  typeof RobotApi.useDispatchApiRequest
+>
+const mockGetRequestById = RobotApi.getRequestById as jest.MockedFunction<
+  typeof RobotApi.getRequestById
+>
+const mockGetAttachedPipetteSettingsFieldsById = getAttachedPipetteSettingsFieldsById as jest.MockedFunction<
+  typeof getAttachedPipetteSettingsFieldsById
+>
+
+const render = (props: React.ComponentProps<typeof ConfigurePipette>) => {
+  return renderWithProviders(<ConfigurePipette {...props} />, {
+    i18nInstance: i18n,
+  })[0]
+}
+
+const mockRobotName = 'mockRobotName'
+
+describe('ConfigurePipette', () => {
+  let dispatchApiRequest: DispatchApiRequestType
+  let props: React.ComponentProps<typeof ConfigurePipette>
+
+  beforeEach(() => {
+    props = {
+      pipetteId: 'id',
+      robotName: mockRobotName,
+      updateRequest: { status: 'pending' },
+      updateSettings: jest.fn(),
+      closeModal: jest.fn(),
+      formId: 'id',
+    }
+    when(mockGetRequestById)
+      .calledWith((undefined as any) as State, 'id')
+      .mockReturnValue({
+        status: RobotApi.SUCCESS,
+        response: {
+          method: 'POST',
+          ok: true,
+          path: '/',
+          status: 200,
+        },
+      })
+    mockGetConfig.mockReturnValue({} as any)
+    when(mockGetAttachedPipetteSettingsFieldsById)
+      .calledWith((undefined as any) as State, mockRobotName, 'id')
+      .mockReturnValue(mockPipetteSettingsFieldsMap)
+    dispatchApiRequest = jest.fn()
+    when(mockUseDispatchApiRequest)
+      .calledWith()
+      .mockReturnValue([dispatchApiRequest, ['id']])
+  })
+  afterEach(() => {
+    jest.resetAllMocks()
+    resetAllWhenMocks()
+  })
+
+  it('renders correct number of text boxes given the pipette settings data supplied by getAttachedPipetteSettingsFieldsById', () => {
+    const { getAllByRole } = render(props)
+
+    const inputs = getAllByRole('textbox')
+    expect(inputs.length).toBe(9)
+  })
+})
diff --git a/app/src/organisms/ConfigurePipette/index.tsx b/app/src/organisms/ConfigurePipette/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
+import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { Box } from '@opentrons/components'
-import { usePipetteSettingsQuery } from '@opentrons/react-api-client'
 import { SUCCESS, FAILURE, PENDING } from '../../redux/robot-api'
 import { useFeatureFlag } from '../../redux/config'
 import { ConfigForm } from './ConfigForm'
@@ -10,22 +10,33 @@ import type {
   AttachedPipette,
   PipetteSettingsFieldsUpdate,
 } from '../../redux/pipettes/types'
+import { getAttachedPipetteSettingsFieldsById } from '../../redux/pipettes'
 import type { RequestState } from '../../redux/robot-api/types'
+import type { State } from '../../redux/types'
 
-const PIPETTE_SETTINGS_POLL_MS = 5000
 interface Props {
-  closeModal: () => unknown
+  closeModal: () => void
   pipetteId: AttachedPipette['id']
   updateRequest: RequestState | null
   updateSettings: (fields: PipetteSettingsFieldsUpdate) => void
+  robotName: string
+  formId: string
 }
 
 export function ConfigurePipette(props: Props): JSX.Element {
-  const { closeModal, pipetteId, updateRequest, updateSettings } = props
+  const {
+    closeModal,
+    pipetteId,
+    updateRequest,
+    updateSettings,
+    robotName,
+    formId,
+  } = props
   const { t } = useTranslation('device_details')
-  const settings = usePipetteSettingsQuery({
-    refetchInterval: PIPETTE_SETTINGS_POLL_MS,
-  })?.data
+
+  const settings = useSelector((state: State) =>
+    getAttachedPipetteSettingsFieldsById(state, robotName, pipetteId)
+  )
   const groupLabels = [
     t('plunger_positions'),
     t('tip_pickup_drop'),
@@ -54,12 +65,11 @@ export function ConfigurePipette(props: Props): JSX.Element {
       {updateError && <ConfigErrorBanner message={updateError} />}
       {settings != null && pipetteId != null && (
         <ConfigForm
-          //  @ts-expect-error: pipetteId and settings should not be undefined
-          settings={settings[pipetteId].fields}
+          settings={settings}
           updateInProgress={updateRequest?.status === PENDING}
           updateSettings={updateSettings}
-          closeModal={closeModal}
           groupLabels={groupLabels}
+          formId={formId}
           __showHiddenFields={__showHiddenFields}
         />
       )}
diff --git a/app/src/organisms/Devices/PipetteCard/PipetteSettingsSlideout.tsx b/app/src/organisms/Devices/PipetteCard/PipetteSettingsSlideout.tsx
@@ -28,7 +28,7 @@ const FETCH_PIPETTES_INTERVAL_MS = 5000
 interface PipetteSettingsSlideoutProps {
   robotName: string
   pipetteName: PipetteModelSpecs['displayName']
-  onCloseClick: () => unknown
+  onCloseClick: () => void
   isExpanded: boolean
   pipetteId: AttachedPipette['id']
 }
@@ -47,6 +47,7 @@ export const PipetteSettingsSlideout = (
   const updateRequest = useSelector((state: State) =>
     latestRequestId != null ? getRequestById(state, latestRequestId) : null
   )
+  const FORM_ID = `configurePipetteForm_${pipetteId}`
 
   useInterval(
     () => {
@@ -62,7 +63,10 @@ export const PipetteSettingsSlideout = (
       onCloseClick={onCloseClick}
       isExpanded={isExpanded}
       footer={
-        <ConfigFormSubmitButton disabled={updateRequest?.status === PENDING} />
+        <ConfigFormSubmitButton
+          disabled={updateRequest?.status === PENDING}
+          formId={FORM_ID}
+        />
       }
     >
       <Flex data-testid={`PipetteSettingsSlideout_${robotName}_${pipetteId}`}>
@@ -71,6 +75,8 @@ export const PipetteSettingsSlideout = (
           pipetteId={pipetteId}
           updateRequest={updateRequest}
           updateSettings={updateSettings}
+          robotName={robotName}
+          formId={FORM_ID}
         />
       </Flex>
     </Slideout>
diff --git a/app/src/organisms/Devices/PipetteCard/__tests__/PipetteSettingsSlideout.test.tsx b/app/src/organisms/Devices/PipetteCard/__tests__/PipetteSettingsSlideout.test.tsx
@@ -1,28 +1,42 @@
 import * as React from 'react'
-import { resetAllWhenMocks } from 'jest-when'
-import { renderWithProviders } from '@opentrons/components'
+import { resetAllWhenMocks, when } from 'jest-when'
+import { waitFor } from '@testing-library/dom'
 import { fireEvent } from '@testing-library/react'
+import { renderWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../i18n'
 import * as RobotApi from '../../../../redux/robot-api'
-import { ConfigurePipette } from '../../../ConfigurePipette'
+import {
+  getAttachedPipetteSettingsFieldsById,
+  updatePipetteSettings,
+} from '../../../../redux/pipettes'
+import { getConfig } from '../../../../redux/config'
 import { PipetteSettingsSlideout } from '../PipetteSettingsSlideout'
 
-import { mockLeftSpecs } from '../../../../redux/pipettes/__fixtures__'
+import {
+  mockLeftSpecs,
+  mockPipetteSettingsFieldsMap,
+} from '../../../../redux/pipettes/__fixtures__'
 
 import type { DispatchApiRequestType } from '../../../../redux/robot-api'
+import type { UpdatePipetteSettingsAction } from '../../../../redux/pipettes/types'
 
-jest.mock('../../../ConfigurePipette')
 jest.mock('../../../../redux/robot-api')
+jest.mock('../../../../redux/config')
+jest.mock('../../../../redux/pipettes')
 
-const mockConfigurePipette = ConfigurePipette as jest.MockedFunction<
-  typeof ConfigurePipette
->
+const mockGetConfig = getConfig as jest.MockedFunction<typeof getConfig>
 const mockUseDispatchApiRequest = RobotApi.useDispatchApiRequest as jest.MockedFunction<
   typeof RobotApi.useDispatchApiRequest
 >
 const mockGetRequestById = RobotApi.getRequestById as jest.MockedFunction<
   typeof RobotApi.getRequestById
 >
+const mockGetAttachedPipetteSettingsFieldsById = getAttachedPipetteSettingsFieldsById as jest.MockedFunction<
+  typeof getAttachedPipetteSettingsFieldsById
+>
+const mockUpdatePipetteSettings = updatePipetteSettings as jest.MockedFunction<
+  typeof updatePipetteSettings
+>
 
 const render = (
   props: React.ComponentProps<typeof PipetteSettingsSlideout>
@@ -32,7 +46,7 @@ const render = (
   })[0]
 }
 
-const mockRobotName = 'mock robotName'
+const mockRobotName = 'mockRobotName'
 
 describe('PipetteSettingsSlideout', () => {
   let dispatchApiRequest: DispatchApiRequestType
@@ -56,24 +70,65 @@ describe('PipetteSettingsSlideout', () => {
         status: 200,
       },
     })
+    mockGetConfig.mockReturnValue({} as any)
+    mockGetAttachedPipetteSettingsFieldsById.mockReturnValue(
+      mockPipetteSettingsFieldsMap
+    )
     dispatchApiRequest = jest.fn()
-    mockUseDispatchApiRequest.mockReturnValue([dispatchApiRequest, ['id']])
-    mockConfigurePipette.mockReturnValue(<div>mock configure pipette</div>)
+    when(mockUseDispatchApiRequest)
+      .calledWith()
+      .mockReturnValue([dispatchApiRequest, ['id']])
   })
   afterEach(() => {
     jest.resetAllMocks()
-  })
-  afterEach(() => {
     resetAllWhenMocks()
   })
 
-  it('renders correct text', () => {
-    const { getByText, getByRole } = render(props)
+  it('renders correct heading and number of text boxes', () => {
+    const { getByRole, getAllByRole } = render(props)
+
+    getByRole('heading', { name: 'Left Pipette Settings' })
+    const inputs = getAllByRole('textbox')
+    expect(inputs.length).toBe(9)
+  })
+
+  it('renders close button that calls props.onCloseClick when clicked', () => {
+    const { getByRole } = render(props)
 
-    getByText('Left Pipette Settings')
-    getByText('mock configure pipette')
     const button = getByRole('button', { name: /exit/i })
     fireEvent.click(button)
     expect(props.onCloseClick).toHaveBeenCalled()
   })
+
+  it('renders confirm button and calls dispatchApiRequest with updatePipetteSettings action object when clicked', async () => {
+    const { getByRole } = render(props)
+    const button = getByRole('button', { name: 'Confirm' })
+
+    when(mockUpdatePipetteSettings)
+      .calledWith(
+        mockRobotName,
+        props.pipetteId,
+        expect.objectContaining({
+          blowout: 2,
+          bottom: 3,
+          dropTip: 1,
+          dropTipCurrent: null,
+          dropTipSpeed: null,
+          pickUpCurrent: null,
+          pickUpDistance: null,
+          plungerCurrent: null,
+          top: 4,
+        })
+      )
+      .mockReturnValue({
+        type: 'pipettes:UPDATE_PIPETTE_SETTINGS',
+      } as UpdatePipetteSettingsAction)
+
+    fireEvent.click(button)
+    await waitFor(() => {
+      expect(dispatchApiRequest).toHaveBeenCalledWith({
+        type: 'pipettes:UPDATE_PIPETTE_SETTINGS',
+      })
+    })
+  })
 })
diff --git a/app/src/redux/pipettes/__fixtures__/index.ts b/app/src/redux/pipettes/__fixtures__/index.ts
diff --git a/app/src/redux/pipettes/selectors.ts b/app/src/redux/pipettes/selectors.ts
