A few more test cases, code review cleanup

app/src/organisms/QuickTransferFlow/VolumeEntry.tsx

@@ -31,7 +31,9 @@ export function VolumeEntry(props: VolumeEntryProps): JSX.Element {
  const { i18n, t } = useTranslation(['quick_transfer', 'shared'])
  const keyboardRef = React.useRef(null)
 
- const [volume, setVolume] = React.useState<string>('')
+ const [volume, setVolume] = React.useState<string>(
+ state.volume ? state.volume.toString() : ''
+ )
  const volumeRange = getVolumeLimits(state)
  let headerCopy = t('set_transfer_volume')
  let textEntryCopy = t('volume_per_well')

app/src/organisms/QuickTransferFlow/__tests__/SelectSourceLabware.test.tsx

@@ -86,4 +86,16 @@ describe('SelectSourceLabware', () => {
  render({ ...props, state: { pipette: { channels: 8 } as any } })
  screen.getByText('Tube racks')
  })
+
+ it('enables continue button if you select a labware', () => {
+ render(props)
+ const continueBtn = screen.getByTestId('ChildNavigation_Primary_Button')
+ expect(continueBtn).toBeDisabled()
+ const labwareOption = screen.getByText('Bio-Rad 384 Well Plate 50 µL')
+ fireEvent.click(labwareOption)
+ expect(continueBtn).toBeEnabled()
+ fireEvent.click(continueBtn)
+ expect(props.onNext).toHaveBeenCalled()
+ expect(props.dispatch).toHaveBeenCalled()
+ })
 })

app/src/organisms/QuickTransferFlow/__tests__/VolumeEntry.test.tsx

@@ -6,10 +6,12 @@ import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { InputField } from '../../../atoms/InputField'
 import { NumericalKeyboard } from '../../../atoms/SoftwareKeyboard'
+import { getVolumeLimits } from '../utils'
 import { VolumeEntry } from '../VolumeEntry'
 
 vi.mock('../../../atoms/InputField')
 vi.mock('../../../atoms/SoftwareKeyboard')
+vi.mock('../utils')
 
 const render = (props: React.ComponentProps<typeof VolumeEntry>) => {
  return renderWithProviders(<VolumeEntry {...props} />, {
@@ -39,6 +41,7 @@ describe('VolumeEntry', () => {
  },
  dispatch: vi.fn(),
  }
+ vi.mocked(getVolumeLimits).mockReturnValue({ min: 5, max: 50 })
  })
  afterEach(() => {
  vi.resetAllMocks()
@@ -113,4 +116,43 @@ describe('VolumeEntry', () => {
  {}
  )
  })
+
+ it('calls on next and dispatch if you press continue when volume is non-null and within range', () => {
+ render({
+ ...props,
+ state: {
+ sourceWells: ['A1', 'A2'],
+ destinationWells: ['A1'],
+ volume: 20,
+ },
+ })
+ const continueBtn = screen.getByTestId('ChildNavigation_Primary_Button')
+ expect(continueBtn).toBeEnabled()
+ fireEvent.click(continueBtn)
+ expect(vi.mocked(props.onNext)).toHaveBeenCalled()
+ expect(vi.mocked(props.dispatch)).toHaveBeenCalled()
+ })
+
+ it('displays an error and disables continue when volume is outside of range', () => {
+ render({
+ ...props,
+ state: {
+ sourceWells: ['A1', 'A2'],
+ destinationWells: ['A1'],
+ volume: 90,
+ },
+ })
+ const continueBtn = screen.getByTestId('ChildNavigation_Primary_Button')
+ expect(continueBtn).toBeDisabled()
+ expect(vi.mocked(InputField)).toHaveBeenCalledWith(
+ {
+ title: 'Aspirate volume per well (µL)',
+ error: 'Value must be between 5-50',
+ readOnly: true,
+ type: 'text',
+ value: '90',
+ },
+ {}
+ )
+ })
 })

app/src/organisms/QuickTransferFlow/index.tsx

@@ -38,12 +38,6 @@
  cancel: cancelExit,
  } = useConditionalConfirm(() => history.push('protocols'), true)
 
- const exitButtonProps: React.ComponentProps<typeof SmallButton> = {
- buttonType: 'tertiaryLowLight',
- buttonText: i18n.format(t('shared:exit'), 'capitalize'),
- onClick: confirmExit,
- }
-
  React.useEffect(() => {
  if (state.volume != null) {
  // until summary screen is implemented, log the final state and close flow
@@ -53,88 +47,36 @@
  }
  }, [state.volume])
 
- let modalContent: JSX.Element | null = null
- if (currentStep === 1) {
- modalContent = (
- <CreateNewTransfer
- onNext={() => setCurrentStep(prevStep => prevStep + 1)}
- exitButtonProps={exitButtonProps}
- />
- )
- } else if (currentStep === 2) {
- modalContent = (
- <SelectPipette
- state={state}
- dispatch={dispatch}
- onBack={() => setCurrentStep(prevStep => prevStep - 1)}
- onNext={() => setCurrentStep(prevStep => prevStep + 1)}
- exitButtonProps={exitButtonProps}
- />
- )
- } else if (currentStep === 3) {
- modalContent = (
- <SelectTipRack
- state={state}
- dispatch={dispatch}
- onBack={() => setCurrentStep(prevStep => prevStep - 1)}
- onNext={() => setCurrentStep(prevStep => prevStep + 1)}
- exitButtonProps={exitButtonProps}
- />
- )
- } else if (currentStep === 4) {
- modalContent = (
- <SelectSourceLabware
- state={state}
- dispatch={dispatch}
- onBack={() => setCurrentStep(prevStep => prevStep - 1)}
- onNext={() => setCurrentStep(prevStep => prevStep + 1)}
- exitButtonProps={exitButtonProps}
- />
- )
- } else if (currentStep === 5) {
- modalContent = (
- <SelectSourceWells
- state={state}
- dispatch={dispatch}
- onBack={() => setCurrentStep(prevStep => prevStep - 1)}
- onNext={() => setCurrentStep(prevStep => prevStep + 1)}
- exitButtonProps={exitButtonProps}
- />
- )
- } else if (currentStep === 6) {
- modalContent = (
- <SelectDestLabware
- state={state}
- dispatch={dispatch}
- onBack={() => setCurrentStep(prevStep => prevStep - 1)}
- onNext={() => setCurrentStep(prevStep => prevStep + 1)}
- exitButtonProps={exitButtonProps}
- />
- )
- } else if (currentStep === 7) {
- modalContent = (
- <SelectDestWells
- state={state}
- dispatch={dispatch}
- onBack={() => setCurrentStep(prevStep => prevStep - 1)}
- onNext={() => setCurrentStep(prevStep => prevStep + 1)}
- exitButtonProps={exitButtonProps}
- />
- )
- } else if (currentStep === 8) {
- modalContent = (
- <VolumeEntry
- state={state}
- dispatch={dispatch}
- onBack={() => setCurrentStep(prevStep => prevStep - 1)}
- onNext={() => {}}
- exitButtonProps={exitButtonProps}
- />
- )
- } else {
- modalContent = null
+ const exitButtonProps: React.ComponentProps<typeof SmallButton> = {
+ buttonType: 'tertiaryLowLight',
+ buttonText: i18n.format(t('shared:exit'), 'capitalize'),
+ onClick: confirmExit,
+ }
+ const sharedMiddleStepProps = {
+ state,
+ dispatch,
+ onBack: () => setCurrentStep(prevStep => prevStep - 1),
+ onNext: () => {
+ console.log('next step')
+ setCurrentStep(prevStep => prevStep + 1)
+ },
+ exitButtonProps,
  }
 
+ const modalContentInOrder: JSX.Element[] = [
+ <CreateNewTransfer
+ onNext={() => setCurrentStep(prevStep => prevStep + 1)}
+ exitButtonProps={exitButtonProps}
+ />,
+ <SelectPipette {...sharedMiddleStepProps} />,
+ <SelectTipRack {...sharedMiddleStepProps} />,
+ <SelectSourceLabware {...sharedMiddleStepProps} />,
+ <SelectSourceWells {...sharedMiddleStepProps} />,
+ <SelectDestLabware {...sharedMiddleStepProps} />,
+ <SelectDestWells {...sharedMiddleStepProps} />,
+ <VolumeEntry {...sharedMiddleStepProps} onNext={() => {}} />,
+ ]
+
  return (
  <>
  {showConfirmExit ? (
@@ -147,7 +89,7 @@
  position={POSITION_STICKY}
  top="0"
  />
- {modalContent}
+ {modalContentInOrder[currentStep]}
  </>
  )}
  </>