refactor(labware-creator): factor out description and file sections (#…

…7866)

Closes #7801

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

@@ -0,0 +1,62 @@
+import React from 'react'
+import { when } from 'jest-when'
+import { FormikConfig } from 'formik'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { getDefaultFormState, LabwareFields } from '../../../fields'
+import { isEveryFieldHidden } from '../../../utils'
+import { Description } from '../../sections/Description'
+import { wrapInFormik } from '../../utils/wrapInFormik'
+
+jest.mock('../../../utils')
+
+const isEveryFieldHiddenMock = isEveryFieldHidden as jest.MockedFunction<
+ typeof isEveryFieldHidden
+>
+
+let formikConfig: FormikConfig<LabwareFields>
+
+describe('Description', () => {
+ beforeEach(() => {
+ formikConfig = {
+ initialValues: getDefaultFormState(),
+ onSubmit: jest.fn(),
+ }
+
+ when(isEveryFieldHiddenMock)
+ .calledWith(['brand', 'brandId'], formikConfig.initialValues)
+ .mockReturnValue(false)
+ })
+
+ afterEach(() => {
+ jest.restoreAllMocks()
+ })
+
+ it('should render fields when fields are visible', () => {
+ render(wrapInFormik(<Description />, formikConfig))
+ expect(screen.getByRole('heading')).toHaveTextContent(/description/i)
+
+ // TODO IMMEDIATELY: changes from 7715 ???
+ screen.getByRole('textbox', { name: /^brand$/i })
+ screen.getByRole('textbox', { name: /manufacturer\/catalog #/i })
+ })
+
+ it('should render alert when error is present', () => {
+ const FAKE_ERROR = 'ahh'
+ formikConfig.initialErrors = { brand: FAKE_ERROR }
+ formikConfig.initialTouched = { brand: true }
+ render(wrapInFormik(<Description />, formikConfig))
+
+ // TODO(IL, 2021-05-26): AlertItem should have role="alert", then we can `getByRole('alert', {name: FAKE_ERROR})`
+ screen.getByText(FAKE_ERROR)
+ })
+
+ it('should not render when all of the fields are hidden', () => {
+ when(isEveryFieldHiddenMock)
+ .calledWith(['brand', 'brandId'], formikConfig.initialValues)
+ .mockReturnValue(true)
+
+ const { container } = render(wrapInFormik(<Description />, formikConfig))
+ expect(container.firstChild).toBe(null)
+ })
+})

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

@@ -0,0 +1,75 @@
+import React from 'react'
+import { when } from 'jest-when'
+import { FormikConfig } from 'formik'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { getDefaultFormState, LabwareFields } from '../../../fields'
+import { isEveryFieldHidden } from '../../../utils'
+import { Export } from '../../sections/Export'
+import { wrapInFormik } from '../../utils/wrapInFormik'
+
+jest.mock('../../../utils')
+
+const isEveryFieldHiddenMock = isEveryFieldHidden as jest.MockedFunction<
+ typeof isEveryFieldHidden
+>
+
+let formikConfig: FormikConfig<LabwareFields>
+let onExportClick: (e: any) => unknown
+
+describe('Export', () => {
+ beforeEach(() => {
+ formikConfig = {
+ initialValues: getDefaultFormState(),
+ onSubmit: jest.fn(),
+ }
+
+ onExportClick = jest.fn()
+
+ when(isEveryFieldHiddenMock)
+ .calledWith(['pipetteName'], formikConfig.initialValues)
+ .mockReturnValue(false)
+ })
+
+ afterEach(() => {
+ jest.restoreAllMocks()
+ })
+
+ it('should render headings & fields when section is visible', () => {
+ render(wrapInFormik(<Export onExportClick={onExportClick} />, formikConfig))
+
+ const headings = screen.getAllByRole('heading')
+ expect(headings).toHaveLength(2)
+ expect(headings[0]).toHaveTextContent(/labware test protocol/i)
+ expect(headings[1]).toHaveTextContent(/please test your definition file/i)
+
+ screen.getByText(
+ 'Your file will be exported with a protocol that will help you test and troubleshoot your labware definition on the robot. ' +
+ 'The protocol requires a Single Channel pipette on the right mount of your robot.'
+ )
+
+ screen.getByRole('textbox', { name: /test pipette/i })
+ screen.getByRole('button', { name: /export/i })
+ })
+
+ it('should render alert when error is present', () => {
+ const FAKE_ERROR = 'ahh'
+ formikConfig.initialErrors = { pipetteName: FAKE_ERROR }
+ formikConfig.initialTouched = { pipetteName: true }
+ render(wrapInFormik(<Export onExportClick={onExportClick} />, formikConfig))
+
+ // TODO(IL, 2021-05-26): AlertItem should have role="alert", then we can `getByRole('alert', {name: FAKE_ERROR})`
+ screen.getByText(FAKE_ERROR)
+ })
+
+ it('should not render when all of the fields are hidden', () => {
+ when(isEveryFieldHiddenMock)
+ .calledWith(['pipetteName'], formikConfig.initialValues)
+ .mockReturnValue(true)
+
+ const { container } = render(
+ wrapInFormik(<Export onExportClick={onExportClick} />, formikConfig)
+ )
+ expect(container.firstChild).toBe(null)
+ })
+})

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

@@ -0,0 +1,62 @@
+import React from 'react'
+import { when } from 'jest-when'
+import { FormikConfig } from 'formik'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { getDefaultFormState, LabwareFields } from '../../../fields'
+import { isEveryFieldHidden } from '../../../utils'
+import { File } from '../../sections/File'
+import { wrapInFormik } from '../../utils/wrapInFormik'
+
+jest.mock('../../../utils')
+
+const isEveryFieldHiddenMock = isEveryFieldHidden as jest.MockedFunction<
+ typeof isEveryFieldHidden
+>
+
+let formikConfig: FormikConfig<LabwareFields>
+
+describe('File', () => {
+ beforeEach(() => {
+ formikConfig = {
+ initialValues: getDefaultFormState(),
+ onSubmit: jest.fn(),
+ }
+
+ when(isEveryFieldHiddenMock)
+ .calledWith(['loadName', 'displayName'], formikConfig.initialValues)
+ .mockReturnValue(false)
+ })
+
+ afterEach(() => {
+ jest.restoreAllMocks()
+ })
+
+ it('should render fields when fields are visible', () => {
+ render(wrapInFormik(<File />, formikConfig))
+ expect(screen.getByRole('heading')).toHaveTextContent(/file/i)
+
+ // TODO IMMEDIATELY: changes from 7715
+ screen.getByRole('textbox', { name: /display name/i })
+ screen.getByRole('textbox', { name: /api load name/i })
+ })
+
+ it('should render alert when error is present', () => {
+ const FAKE_ERROR = 'ahh'
+ formikConfig.initialErrors = { displayName: FAKE_ERROR }
+ formikConfig.initialTouched = { displayName: true }
+ render(wrapInFormik(<File />, formikConfig))
+
+ // TODO(IL, 2021-05-26): AlertItem should have role="alert", then we can `getByRole('alert', {name: FAKE_ERROR})`
+ screen.getByText(FAKE_ERROR)
+ })
+
+ it('should not render when all of the fields are hidden', () => {
+ when(isEveryFieldHiddenMock)
+ .calledWith(['loadName', 'displayName'], formikConfig.initialValues)
+ .mockReturnValue(true)
+
+ const { container } = render(wrapInFormik(<File />, formikConfig))
+ expect(container.firstChild).toBe(null)
+ })
+})

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

@@ -0,0 +1,46 @@
+import React from 'react'
+import { FormikConfig } from 'formik'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { getDefaultFormState, LabwareFields } from '../../../fields'
+import { Preview } from '../../sections/Preview'
+import { wrapInFormik } from '../../utils/wrapInFormik'
+import { FORM_LEVEL_ERRORS } from '../../../formLevelValidation'
+
+// NOTE(IL, 2021-05-18): eventual dependency on definitions.tsx which uses require.context
+// would break this test (though it's not directly used)
+jest.mock('../../../../definitions')
+
+let formikConfig: FormikConfig<LabwareFields>
+
+describe('Preview', () => {
+ beforeEach(() => {
+ formikConfig = {
+ initialValues: getDefaultFormState(),
+ onSubmit: jest.fn(),
+ }
+ })
+
+ afterEach(() => {
+ jest.restoreAllMocks()
+ })
+
+ it('should render the preview section', () => {
+ render(wrapInFormik(<Preview />, formikConfig))
+ expect(screen.getByRole('heading')).toHaveTextContent(/check your work/i)
+ screen.getByText(
+ 'Check that the size, spacing, and shape of your wells looks correct.'
+ )
+ screen.getByText('Add missing info to see labware preview')
+ })
+
+ it('should render form-level alerts when form-level errors are present', () => {
+ const FAKE_ERROR = 'ahh'
+ // @ts-expect-error: fake form-level error
+ formikConfig.initialErrors = { [FORM_LEVEL_ERRORS]: { FAKE_ERROR } }
+ render(wrapInFormik(<Preview />, formikConfig))
+
+ // TODO(IL, 2021-05-26): AlertItem should have role="alert", then we can `getByRole('alert', {name: FAKE_ERROR})`
+ screen.getByText(FAKE_ERROR)
+ })
+})

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

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { useFormikContext } from 'formik'
+import { LabwareFields } from '../../fields'
+import { isEveryFieldHidden } from '../../utils'
+import { FormAlerts } from '../alerts/FormAlerts'
+import { TextField } from '../TextField'
+import { SectionBody } from './SectionBody'
+
+import styles from '../../styles.css'
+
+const Content = (): JSX.Element => (
+ <div className={styles.flex_row}>
+ <div className={styles.brand_column}>
+ <TextField name="brand" />
+ </div>
+ <div className={styles.brand_id_column}>
+ <TextField name="brandId" caption="Separate multiple by comma" />
+ </div>
+ </div>
+)
+
+export const Description = (): JSX.Element | null => {
+ const fieldList: Array<keyof LabwareFields> = ['brand', 'brandId']
+ const { values, errors, touched } = useFormikContext<LabwareFields>()
+
+ if (isEveryFieldHidden(fieldList, values)) {
+ return null
+ }
+
+ return (
+ <SectionBody label="Description">
+ <FormAlerts touched={touched} errors={errors} fieldList={fieldList} />
+ <Content />
+ </SectionBody>
+ )
+}