refactor(labware-creator): Break out height section and add tests (#7763

)

labware-library/src/labware-creator/components/__tests__/sections/Height.test.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { FormikConfig } from 'formik'
+import { when } from 'jest-when'
+import { render, screen } from '@testing-library/react'
+import { getDefaultFormState, LabwareFields } from '../../../fields'
+import { Height } from '../../sections/Height'
+import { getFormAlerts } from '../../utils/getFormAlerts'
+import { TextField } from '../../TextField'
+import { wrapInFormik } from '../../utils/wrapInFormik'
+import { getHeightAlerts } from '../../utils/getHeightAlerts'
+
+jest.mock('../../TextField')
+jest.mock('../../utils/getFormAlerts')
+jest.mock('../../utils/getHeightAlerts')
+
+const getFormAlertsMock = getFormAlerts as jest.MockedFunction<
+  typeof getFormAlerts
+>
+const textFieldMock = TextField as jest.MockedFunction<typeof TextField>
+
+const getHeightAlertsMock = getHeightAlerts as jest.MockedFunction<
+  typeof getHeightAlerts
+>
+
+const formikConfig: FormikConfig<LabwareFields> = {
+  initialValues: getDefaultFormState(),
+  onSubmit: jest.fn(),
+}
+
+describe('Height Section with Alerts', () => {
+  beforeEach(() => {
+    textFieldMock.mockImplementation(args => {
+      return <div>labwareZDimension text field</div>
+    })
+
+    when(getFormAlertsMock)
+      .calledWith({
+        values: getDefaultFormState(),
+        touched: {},
+        errors: {},
+        fieldList: ['labwareType', 'labwareZDimension'],
+      })
+      .mockReturnValue([<div key="mock key">mock alerts</div>])
+
+    when(getHeightAlertsMock)
+      .calledWith(getDefaultFormState(), {})
+      .mockReturnValue(<div>mock getHeightAlertsMock alerts</div>)
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  it('should render with the correct information', () => {
+    render(wrapInFormik(<Height />, formikConfig))
+    expect(screen.getByText('Height'))
+    expect(
+      screen.getByText(
+        'The height measurement informs the robot of the top and bottom of your labware.'
+      )
+    )
+    expect(screen.getByText('mock alerts'))
+    expect(screen.getByText('labwareZDimension text field'))
+    expect(screen.getByText('mock getHeightAlertsMock alerts'))
+  })
+
+  it('should update title and instructions when tubeRack is selected', () => {
+    formikConfig.initialValues.labwareType = 'tubeRack'
+    render(wrapInFormik(<Height />, formikConfig))
+    expect(screen.getByText('Total Height'))
+    expect(screen.getByText('Place your tubes inside the rack.'))
+  })
+
+  it('should update title and instructions when aluminumBlock is selected', () => {
+    formikConfig.initialValues.labwareType = 'aluminumBlock'
+    render(wrapInFormik(<Height />, formikConfig))
+    expect(screen.getByText('Total Height'))
+    expect(screen.getByText('Put your labware on top of the aluminum block.'))
+  })
+})

labware-library/src/labware-creator/components/sections/Height.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react'
+import { useFormikContext } from 'formik'
+import { makeMaskToDecimal } from '../../fieldMasks'
+import { LabwareFields } from '../../fields'
+import { getFormAlerts } from '../utils/getFormAlerts'
+import { getHeightAlerts } from '../utils/getHeightAlerts'
+import { TextField } from '../TextField'
+import { HeightImg } from '../diagrams'
+import { HeightGuidingText } from '../HeightGuidingText'
+import { SectionBody } from './SectionBody'
+
+import styles from '../../styles.css'
+
+const maskTo2Decimal = makeMaskToDecimal(2)
+
+const getContent = (values: LabwareFields): JSX.Element => (
+  <div className={styles.flex_row}>
+    <div className={styles.instructions_column}>
+      <HeightGuidingText labwareType={values.labwareType} />
+    </div>
+    <div className={styles.diagram_column}>
+      <HeightImg
+        labwareType={values.labwareType}
+        aluminumBlockChildType={values.aluminumBlockChildType}
+      />
+    </div>
+    <div className={styles.form_fields_column}>
+      <TextField
+        name="labwareZDimension"
+        inputMasks={[maskTo2Decimal]}
+        units="mm"
+      />
+    </div>
+  </div>
+)
+
+export const Height = (): JSX.Element => {
+  const fieldList: Array<keyof LabwareFields> = [
+    'labwareType',
+    'labwareZDimension',
+  ]
+  const { values, errors, touched } = useFormikContext<LabwareFields>()
+
+  return (
+    <div className={styles.new_definition_section}>
+      <SectionBody
+        label={
+          // @ts-expect-error(IL, 2021-03-24): `includes` doesn't want to take null/undefined
+          ['aluminumBlock', 'tubeRack'].includes(values.labwareType)
+            ? 'Total Height'
+            : 'Height'
+        }
+      >
+        <>
+          {getFormAlerts({ values, touched, errors, fieldList })}
+          {getHeightAlerts(values, touched)}
+          {getContent(values)}
+        </>
+      </SectionBody>
+    </div>
+  )
+}

labware-library/src/labware-creator/index.tsx

@@ -35,15 +35,15 @@ import { LinkOut } from './components/LinkOut'
 import { RadioField } from './components/RadioField'
 import { Section } from './components/Section'
 import { TextField } from './components/TextField'
-import { HeightGuidingText } from './components/HeightGuidingText'
+
 import { ImportErrorModal } from './components/ImportErrorModal'
 import { CreateNewDefinition } from './components/sections/CreateNewDefinition'
 import { UploadExisting } from './components/sections/UploadExisting'
 import { Regularity } from './components/sections/Regularity'
-import { getHeightAlerts } from './components/utils/getHeightAlerts'
+
 import { Footprint } from './components/sections/Footprint'
+import { Height } from './components/sections/Height'
 import {
-  HeightImg,
   GridImg,
   WellXYImg,
   XYSpacingImg,
@@ -469,35 +469,7 @@ export const LabwareCreator = (): JSX.Element => {
                   {/* PAGE 1 - Labware */}
                   <Regularity />
                   <Footprint />
-                  <Section
-                    label={
-                      // @ts-expect-error(IL, 2021-03-24): `includes` doesn't want to take null/undefined
-                      ['aluminumBlock', 'tubeRack'].includes(values.labwareType)
-                        ? 'Total Height'
-                        : 'Height'
-                    }
-                    fieldList={['labwareZDimension']}
-                    additionalAlerts={getHeightAlerts(values, touched)}
-                  >
-                    <div className={styles.flex_row}>
-                      <div className={styles.instructions_column}>
-                        <HeightGuidingText labwareType={values.labwareType} />
-                      </div>
-                      <div className={styles.diagram_column}>
-                        <HeightImg
-                          labwareType={values.labwareType}
-                          aluminumBlockChildType={values.aluminumBlockChildType}
-                        />
-                      </div>
-                      <div className={styles.form_fields_column}>
-                        <TextField
-                          name="labwareZDimension"
-                          inputMasks={[maskTo2Decimal]}
-                          units="mm"
-                        />
-                      </div>
-                    </div>
-                  </Section>
+                  <Height />
                   <Section
                     label="Grid"
                     fieldList={[