feat(app): update pipette attach flow to include calibration

app/src/components/CalibratePipetteOffset/__tests__/useCalibratePipetteOffset.test.js

@@ -0,0 +1,130 @@
+// @flow
+import * as React from 'react'
+import uniqueId from 'lodash/uniqueId'
+import { mountWithStore } from '@opentrons/components/__utils__'
+import { act } from 'react-dom/test-utils'
+
+import * as RobotApi from '../../../robot-api'
+import * as Sessions from '../../../sessions'
+import { mockPipetteOffsetCalibrationSessionAttributes } from '../../../sessions/__fixtures__'
+
+import { useCalibratePipetteOffset } from '../useCalibratePipetteOffset'
+
+import type { State } from '../../../types'
+import type { SessionType } from '../../../sessions'
+
+jest.mock('../../../sessions/selectors')
+jest.mock('../../../robot-api/selectors')
+jest.mock('lodash/uniqueId')
+
+const mockUniqueId: JestMockFn<[string | void], string> = uniqueId
+const mockGetRobotSessionOfType: JestMockFn<
+  [State, string, SessionType],
+  $Call<typeof Sessions.getRobotSessionOfType, State, string, SessionType>
+> = Sessions.getRobotSessionOfType
+const mockGetRequestById: JestMockFn<
+  [State, string],
+  $Call<typeof RobotApi.getRequestById, State, string>
+> = RobotApi.getRequestById
+
+describe('useCalibratePipetteOffset hook', () => {
+  let startCalibration
+  let CalWizardComponent
+  const robotName = 'robotName'
+  const mountString = 'left'
+  const onComplete = jest.fn()
+
+  const TestUseCalibratePipetteOffset = () => {
+    const [_startCalibration, _CalWizardComponent] = useCalibratePipetteOffset(
+      robotName,
+      {
+        mount: mountString,
+        shouldRecalibrateTipLength: false,
+        hasCalibrationBlock: false,
+        tipRackDefinition: null,
+      },
+      onComplete
+    )
+    React.useEffect(() => {
+      startCalibration = _startCalibration
+      CalWizardComponent = _CalWizardComponent
+    })
+    return <>{CalWizardComponent}</>
+  }
+
+  beforeEach(() => {
+    let mockIdCounter = 0
+    mockUniqueId.mockImplementation(() => `mockId_${mockIdCounter++}`)
+  })
+
+  afterEach(() => {
+    jest.resetAllMocks()
+  })
+
+  it('returns start callback, and no wizard if session not present', () => {
+    const { store } = mountWithStore(<TestUseCalibratePipetteOffset />, {
+      initialState: { robotApi: {}, sessions: {} },
+    })
+    expect(typeof startCalibration).toBe('function')
+    expect(CalWizardComponent).toBe(null)
+
+    act(() => startCalibration())
+
+    expect(store.dispatch).toHaveBeenCalledWith({
+      ...Sessions.ensureSession(
+        robotName,
+        Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION,
+        {
+          mount: mountString,
+          shouldRecalibrateTipLength: false,
+          hasCalibrationBlock: false,
+          tipRackDefinition: null,
+        }
+      ),
+      meta: { requestId: expect.any(String) },
+    })
+  })
+
+  it('wizard should appear after create request succeeds with session and close on closeWizard', () => {
+    const seshId = 'fake-session-id'
+    const mockPipOffsetCalSession = {
+      id: seshId,
+      ...mockPipetteOffsetCalibrationSessionAttributes,
+      details: {
+        ...mockPipetteOffsetCalibrationSessionAttributes.details,
+        currentStep: Sessions.PIP_OFFSET_STEP_CALIBRATION_COMPLETE,
+      },
+    }
+    const { store, wrapper } = mountWithStore(
+      <TestUseCalibratePipetteOffset />,
+      {
+        initialState: { robotApi: {} },
+      }
+    )
+    mockGetRobotSessionOfType.mockReturnValue(mockPipOffsetCalSession)
+    mockGetRequestById.mockReturnValue({
+      status: RobotApi.SUCCESS,
+      response: {
+        method: 'POST',
+        ok: true,
+        path: '/',
+        status: 200,
+      },
+    })
+    act(() => startCalibration())
+    wrapper.setProps({})
+    expect(CalWizardComponent).not.toBe(null)
+
+    wrapper
+      .find('button[title="Return tip to tip rack and exit"]')
+      .invoke('onClick')()
+    wrapper.setProps({})
+    expect(store.dispatch).toHaveBeenCalledWith({
+      ...Sessions.deleteSession(robotName, seshId),
+      meta: { requestId: expect.any(String) },
+    })
+    wrapper.setProps({}) // update so delete request can be handled on success
+    expect(CalWizardComponent).toBe(null)
+    expect(onComplete).toHaveBeenCalled()
+  })
+})

app/src/components/CalibratePipetteOffset/index.js

@@ -97,14 +97,7 @@ const PANEL_STYLE_PROPS_BY_STEP: {
 export function CalibratePipetteOffset(
   props: CalibratePipetteOffsetParentProps
 ): React.Node {
-  const {
-    session,
-    robotName,
-    closeWizard,
-    dispatchRequests,
-    showSpinner,
-    hasBlock,
-  } = props
+  const { session, robotName, dispatchRequests, showSpinner, hasBlock } = props
   const { currentStep, instrument, labware } = session?.details || {}
 
   const {
@@ -147,7 +140,6 @@ export function CalibratePipetteOffset(
         Sessions.deleteSession(robotName, session.id)
       )
     }
-    closeWizard()
   }
 
   if (!session || !tipRack) {

app/src/components/InstrumentSettings/PipetteOffsetCalibrationControl.js → app/src/components/CalibratePipetteOffset/useCalibratePipetteOffset.js

@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react'
 import { useSelector } from 'react-redux'
-import { SecondaryBtn, SPACING_2 } from '@opentrons/components'
 
 import * as RobotApi from '../../robot-api'
 import * as Sessions from '../../sessions'
@@ -10,34 +9,44 @@ import type { State } from '../../types'
 import type {
   SessionCommandString,
   PipetteOffsetCalibrationSession,
+  PipetteOffsetCalibrationSessionParams,
 } from '../../sessions/types'
-import type { Mount } from '../../pipettes/types'
 import type { RequestState } from '../../robot-api/types'
 
 import { Portal } from '../portal'
 import { CalibratePipetteOffset } from '../CalibratePipetteOffset'
 
-type Props = {|
-  robotName: string,
-  mount: Mount,
-|}
-
 // pipette calibration commands for which the full page spinner should not appear
 const spinnerCommandBlockList: Array<SessionCommandString> = [
   Sessions.sharedCalCommands.JOG,
 ]
 
-const BUTTON_TEXT = 'Calibrate offset'
-
-export function PipetteOffsetCalibrationControl(props: Props): React.Node {
-  const { robotName, mount } = props
-
+export function useCalibratePipetteOffset(
+  robotName: string,
+  sessionParams: $Shape<PipetteOffsetCalibrationSessionParams>,
+  onComplete: (() => mixed) | null = null
+): [() => void, React.Node | null] {
   const [showWizard, setShowWizard] = React.useState(false)
 
   const trackedRequestId = React.useRef<string | null>(null)
   const deleteRequestId = React.useRef<string | null>(null)
   const createRequestId = React.useRef<string | null>(null)
 
+  const pipOffsetCalSession = useSelector<
+    State,
+    PipetteOffsetCalibrationSession | null
+  >((state: State) => {
+    const session: Sessions.Session | null = Sessions.getRobotSessionOfType(
+      state,
+      robotName,
+      Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION
+    )
+    return session &&
+      session.sessionType === Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION
+      ? session
+      : null
+  })
+
   const [dispatchRequests] = RobotApi.useDispatchApiRequests(
     dispatchedAction => {
       if (dispatchedAction.type === Sessions.ENSURE_SESSION) {
@@ -79,20 +88,28 @@ export function PipetteOffsetCalibrationControl(props: Props): React.Node {
         : null
     )?.status === RobotApi.SUCCESS
 
+  const closeWizard = React.useCallback(() => {
+    onComplete && onComplete()
+    setShowWizard(false)
+  }, [onComplete])
+
   React.useEffect(() => {
     if (shouldOpen) {
       setShowWizard(true)
       createRequestId.current = null
     }
     if (shouldClose) {
-      setShowWizard(false)
+      closeWizard()
       deleteRequestId.current = null
     }
-  }, [shouldOpen, shouldClose])
-
-  const hasCalibrationBlock = false
-  const shouldRecalibrateTipLength = false
-  const tipRackDefinition = null
+  }, [shouldOpen, shouldClose, closeWizard])
+
+  const {
+    mount,
+    shouldRecalibrateTipLength = false,
+    hasCalibrationBlock = false,
+    tipRackDefinition = null,
+  } = sessionParams
   const handleStartPipOffsetCalSession = () => {
     dispatchRequests(
       Sessions.ensureSession(
@@ -108,42 +125,18 @@ export function PipetteOffsetCalibrationControl(props: Props): React.Node {
     )
   }
 
-  const pipOffsetCalSession = useSelector<
-    State,
-    PipetteOffsetCalibrationSession | null
-  >((state: State) => {
-    const session: Sessions.Session | null = Sessions.getRobotSessionOfType(
-      state,
-      robotName,
-      Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION
-    )
-    return session &&
-      session.sessionType === Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION
-      ? session
-      : null
-  })
-
-  return (
-    <>
-      <SecondaryBtn
-        width="11rem"
-        marginTop={SPACING_2}
-        padding={SPACING_2}
-        onClick={handleStartPipOffsetCalSession}
-      >
-        {BUTTON_TEXT}
-      </SecondaryBtn>
-      {showWizard && (
-        <Portal>
-          <CalibratePipetteOffset
-            session={pipOffsetCalSession}
-            robotName={robotName}
-            closeWizard={() => setShowWizard(false)}
-            showSpinner={showSpinner}
-            dispatchRequests={dispatchRequests}
-          />
-        </Portal>
-      )}
-    </>
-  )
+  return [
+    handleStartPipOffsetCalSession,
+    showWizard ? (
+      <Portal>
+        <CalibratePipetteOffset
+          session={pipOffsetCalSession}
+          robotName={robotName}
+          closeWizard={closeWizard}
+          showSpinner={showSpinner}
+          dispatchRequests={dispatchRequests}
+        />
+      </Portal>
+    ) : null,
+  ]
 }