From 2698e2f255824aff1b8558691afdd93d91fe82c6 Mon Sep 17 00:00:00 2001 From: Jethary Rader Date: Mon, 11 Oct 2021 18:04:55 -0400 Subject: [PATCH 01/12] add section props to generic step screen --- .../GenericStepScreen.tsx | 86 ++++++++++++++++++- .../LabwarePositionCheckStepDetail.tsx | 2 +- .../LabwarePositionCheck/index.tsx | 10 ++- 3 files changed, 90 insertions(+), 8 deletions(-) diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx index eb865f7bb45..b0f7654b5dd 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx @@ -1,13 +1,91 @@ import * as React from 'react' +import { useTranslation } from 'react-i18next' +import { capitalize } from 'lodash' +import { + ALIGN_CENTER, + Box, + C_DARK_GRAY, + C_DISABLED, + C_NEAR_WHITE, + C_WHITE, + DIRECTION_COLUMN, + DIRECTION_ROW, + Flex, + FONT_SIZE_CAPTION, + JUSTIFY_CENTER, + JUSTIFY_FLEX_START, + JUSTIFY_SPACE_BETWEEN, + SIZE_1, + SPACING_2, + SPACING_4, + SPACING_5, + Text, + TEXT_ALIGN_CENTER, +} from '@opentrons/components' import { LabwarePositionCheckStepDetail } from './LabwarePositionCheckStepDetail' -import type { LabwarePositionCheckStep } from './types' +import type { LabwarePositionCheckStep, Section } from './types' +import { useIntroInfo } from './hooks' interface GenericStepScreenProps { selectedStep: LabwarePositionCheckStep setCurrentLabwareCheckStep: (stepNumber: number) => void + activeSection: Section + sections: Section[] } -export const GenericStepScreen = ( +export function GenericStepScreen( props: GenericStepScreenProps -): JSX.Element | null => { - return +): JSX.Element | null { + const { activeSection, sections } = props + const { t } = useTranslation('labware_position_check') + const introInfo = useIntroInfo() + if (introInfo == null) return null + const { primaryPipetteMount, secondaryPipetteMount } = introInfo + return ( + + + + {sections.map((section, index) => ( + + + {index + 1} + + + + {t(`${section.toLowerCase()}_section`, { + primary_mount: capitalize(primaryPipetteMount), + secondary_mount: capitalize(secondaryPipetteMount), + })} + + + + ))} + + + + + + + ) } diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/LabwarePositionCheckStepDetail.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/LabwarePositionCheckStepDetail.tsx index 7eeccf13b9b..1420d209564 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/LabwarePositionCheckStepDetail.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/LabwarePositionCheckStepDetail.tsx @@ -68,7 +68,7 @@ export const LabwarePositionCheckStepDetail = ( width="60%" justifyContent={JUSTIFY_CENTER} marginTop={SPACING_4} - marginLeft="30%" + marginLeft="35%" boxShadow="1px 1px 1px rgba(0, 0, 0, 0.25)" borderRadius="4px" backgroundColor={C_NEAR_WHITE} diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/index.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/index.tsx index ccbf517f46c..56f894f6284 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/index.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/index.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' import { ModalPage } from '@opentrons/components' import { Portal } from '../../../App/portal' -import { useSteps } from './hooks' +import { useIntroInfo, useSteps } from './hooks' import { IntroScreen } from './IntroScreen' import { GenericStepScreen } from './GenericStepScreen' @@ -17,11 +17,13 @@ export const LabwarePositionCheck = ( ): JSX.Element | null => { const { t } = useTranslation(['labware_position_check', 'shared']) const steps = useSteps() + const introInfo = useIntroInfo() const [currentLabwareCheckStep, setCurrentLabwareCheckStep] = React.useState< number | null >(null) - // placeholder for next steps - console.log(currentLabwareCheckStep) + const [sectionIndex] = React.useState(0) + if (introInfo == null) return null + const { sections } = introInfo return ( @@ -40,6 +42,8 @@ export const LabwarePositionCheck = ( ) : ( Date: Tue, 12 Oct 2021 14:03:47 -0400 Subject: [PATCH 02/12] create positionchecknav test --- .../GenericStepScreen.tsx | 82 +++--------------- .../LabwarePositionCheck/PositionCheckNav.tsx | 86 +++++++++++++------ .../__tests__/GenericStepScreen.test.tsx | 40 ++++++++- .../__tests__/LabwarePositionCheck.test.tsx | 3 + .../__tests__/PositionCheckNav.test.tsx | 79 +++++++++++++++++ .../LabwarePositionCheck/index.tsx | 8 +- 6 files changed, 191 insertions(+), 107 deletions(-) create mode 100644 app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/PositionCheckNav.test.tsx diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx index b0f7654b5dd..62e4b00943f 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx @@ -1,87 +1,31 @@ import * as React from 'react' -import { useTranslation } from 'react-i18next' -import { capitalize } from 'lodash' -import { - ALIGN_CENTER, - Box, - C_DARK_GRAY, - C_DISABLED, - C_NEAR_WHITE, - C_WHITE, - DIRECTION_COLUMN, - DIRECTION_ROW, - Flex, - FONT_SIZE_CAPTION, - JUSTIFY_CENTER, - JUSTIFY_FLEX_START, - JUSTIFY_SPACE_BETWEEN, - SIZE_1, - SPACING_2, - SPACING_4, - SPACING_5, - Text, - TEXT_ALIGN_CENTER, -} from '@opentrons/components' +import { ALIGN_START, Flex } from '@opentrons/components' import { LabwarePositionCheckStepDetail } from './LabwarePositionCheckStepDetail' -import type { LabwarePositionCheckStep, Section } from './types' +import { PositionCheckNav } from './PositionCheckNav' +import type { LabwarePositionCheckStep } from './types' import { useIntroInfo } from './hooks' interface GenericStepScreenProps { selectedStep: LabwarePositionCheckStep setCurrentLabwareCheckStep: (stepNumber: number) => void - activeSection: Section - sections: Section[] } export function GenericStepScreen( props: GenericStepScreenProps ): JSX.Element | null { - const { activeSection, sections } = props - const { t } = useTranslation('labware_position_check') const introInfo = useIntroInfo() + const [sectionIndex] = React.useState(0) if (introInfo == null) return null - const { primaryPipetteMount, secondaryPipetteMount } = introInfo + const { sections, primaryPipetteMount, secondaryPipetteMount } = introInfo + return ( - - - {sections.map((section, index) => ( - - - {index + 1} - - - - {t(`${section.toLowerCase()}_section`, { - primary_mount: capitalize(primaryPipetteMount), - secondary_mount: capitalize(secondaryPipetteMount), - })} - - - - ))} - + + diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/PositionCheckNav.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/PositionCheckNav.tsx index 222606e249d..3ea05da93db 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/PositionCheckNav.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/PositionCheckNav.tsx @@ -15,6 +15,10 @@ import { TEXT_ALIGN_CENTER, FONT_SIZE_CAPTION, Text, + C_DISABLED, + Icon, + SPACING_3, + COLOR_SUCCESS, } from '@opentrons/components' import type { Section } from './types' interface Props { @@ -22,6 +26,7 @@ interface Props { currentSection: Section primaryPipetteMount: string secondaryPipetteMount: string + completedSections?: Section[] } export function PositionCheckNav(props: Props): JSX.Element { @@ -30,45 +35,70 @@ export function PositionCheckNav(props: Props): JSX.Element { sections, primaryPipetteMount, secondaryPipetteMount, + completedSections, } = props const { t } = useTranslation('labware_position_check') return ( - {sections.map((section, index) => ( - - - {index + 1} - - - - {t(`${section.toLowerCase()}_section`, { - primary_mount: capitalize(primaryPipetteMount), - secondary_mount: capitalize(secondaryPipetteMount), - })} - - - - ))} + {sections.map((section, index) => { + const sectionColor = + completedSections != null && !completedSections.includes(section) + ? C_DISABLED + : C_DARK_GRAY + const isCompleted = + completedSections != null && completedSections.includes(section) + return ( + + + {isCompleted ? ( + + ) : ( + index + 1 + )} + + + + {t(`${section.toLowerCase()}_section`, { + primary_mount: capitalize(primaryPipetteMount), + secondary_mount: capitalize(secondaryPipetteMount), + })} + + + + ) + })} ) } diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/GenericStepScreen.test.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/GenericStepScreen.test.tsx index 8c9bd03ffd3..28eeec9b04e 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/GenericStepScreen.test.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/GenericStepScreen.test.tsx @@ -7,15 +7,29 @@ import { import { i18n } from '../../../../i18n' import { GenericStepScreen } from '../GenericStepScreen' import { LabwarePositionCheckStepDetail } from '../LabwarePositionCheckStepDetail' +import { PositionCheckNav } from '../PositionCheckNav' +import { useIntroInfo } from '../hooks' +import { Section } from '../types' jest.mock('../LabwarePositionCheckStepDetail') +jest.mock('../PositionCheckNav') +jest.mock('../hooks') const mockLabwarePositionCheckStepDetail = LabwarePositionCheckStepDetail as jest.MockedFunction< typeof LabwarePositionCheckStepDetail > +const mockPositionCheckNav = PositionCheckNav as jest.MockedFunction< + typeof PositionCheckNav +> +const mockUseIntroInfo = useIntroInfo as jest.MockedFunction< + typeof useIntroInfo +> + const PICKUP_TIP_LABWARE_ID = 'PICKUP_TIP_LABWARE_ID' const PRIMARY_PIPETTE_ID = 'PRIMARY_PIPETTE_ID' -const mockLabwarePositionCheckStepTipRack = { +const MOCK_SECTION = ['PRIMARY_PIPETTE_TIPRACKS' as Section] + +const MOCK_LABWARE_POSITION_CHECK_STEP_TIP_RACK = { labwareId: '1d57fc10-67ad-11ea-9f8b-3b50068bd62d:opentrons/opentrons_96_filtertiprack_200ul/1', section: '', @@ -41,19 +55,39 @@ describe('GenericStepScreen', () => { beforeEach(() => { props = { - selectedStep: mockLabwarePositionCheckStepTipRack, + selectedStep: MOCK_LABWARE_POSITION_CHECK_STEP_TIP_RACK, setCurrentLabwareCheckStep: () => {}, } when(mockLabwarePositionCheckStepDetail) .calledWith( partialComponentPropsMatcher({ - selectedStep: mockLabwarePositionCheckStepTipRack, + selectedStep: MOCK_LABWARE_POSITION_CHECK_STEP_TIP_RACK, }) ) .mockReturnValue(
Mock Labware Position Check Step Detail
) + + mockPositionCheckNav.mockReturnValue(
Mock Position Check Nav
) + when(mockUseIntroInfo).calledWith().mockReturnValue({ + primaryTipRackSlot: '1', + primaryTipRackName: 'Opentrons 96 Filter Tip Rack 200 µL', + primaryPipetteMount: 'left', + secondaryPipetteMount: '', + numberOfTips: 1, + firstStepLabwareSlot: '2', + sections: MOCK_SECTION, + }) }) it('renders LabwarePositionCheckStepDetail component', () => { const { getByText } = render(props) expect(getByText('Mock Labware Position Check Step Detail')).toBeTruthy() }) + it('renders GenericStepScreenNav component', () => { + const { getByText } = render(props) + expect(getByText('Mock Position Check Nav')).toBeTruthy() + }) + it('renders null if useIntroInfo is null', () => { + mockUseIntroInfo.mockReturnValue(null) + const { container } = render(props) + expect(container.firstChild).toBeNull() + }) }) diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/LabwarePositionCheck.test.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/LabwarePositionCheck.test.tsx index d7785e9a4bd..18da9e9faaa 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/LabwarePositionCheck.test.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/LabwarePositionCheck.test.tsx @@ -16,6 +16,7 @@ jest.mock('../hooks') const mockGenericStepScreen = GenericStepScreen as jest.MockedFunction< typeof GenericStepScreen > + const mockIntroScreen = IntroScreen as jest.MockedFunction const mockUseSteps = useSteps as jest.MockedFunction @@ -53,12 +54,14 @@ describe('LabwarePositionCheck', () => { } as LabwarePositionCheckStep, ]) mockIntroScreen.mockReturnValue(
Mock Intro Screen Component
) + mockGenericStepScreen.mockReturnValue(null) }) afterEach(() => { resetAllWhenMocks() jest.resetAllMocks() }) + it('renders LabwarePositionCheck header and button and no components', () => { const { getByRole } = render(props) getByRole('heading', { diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/PositionCheckNav.test.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/PositionCheckNav.test.tsx new file mode 100644 index 00000000000..459e8cd3e07 --- /dev/null +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/PositionCheckNav.test.tsx @@ -0,0 +1,79 @@ +import { renderWithProviders } from '@opentrons/components' +import * as React from 'react' +import { i18n } from '../../../../i18n' +import { PositionCheckNav } from '../PositionCheckNav' +import { Section } from '../types' + +const MOCK_SECTIONS_1_PIPETTE_2_STEPS = [ + 'PRIMARY_PIPETTE_TIPRACKS', + 'RETURN_TIP', +] as Section[] +const MOCK_SECTIONS_2_PIPETTES_3_STEPS = [ + 'PRIMARY_PIPETTE_TIPRACKS', + 'SECONDARY_PIPETTE_TIPRACKS', + 'RETURN_TIP', +] as Section[] +const MOCK_SECTIONS_2_PIPETTES_4_STEPS = [ + 'PRIMARY_PIPETTE_TIPRACKS', + 'SECONDARY_PIPETTE_TIPRACKS', + 'CHECK_REMAINING_LABWARE_WITH_PRIMARY_PIPETTE', + 'RETURN_TIP', + ] as Section[] + +const render = (props: React.ComponentProps) => { + return renderWithProviders(, { + i18nInstance: i18n, + })[0] +} + +describe('PositionCheckNav', () => { + let props: React.ComponentProps + + beforeEach(() => { + props = { + sections: MOCK_SECTIONS_1_PIPETTE_2_STEPS, + currentSection: 'PRIMARY_PIPETTE_TIPRACKS', + primaryPipetteMount: 'left', + secondaryPipetteMount: '', + } + }) + it('renders a 2 step Nav with 1 pipette', () => { + const { getByText } = render(props) + expect(getByText('1')).toBeTruthy() + expect(getByText('Check tipracks with Left Pipette')).toBeTruthy() + expect(getByText('2')).toBeTruthy() + expect(getByText('Return tip')).toBeTruthy() + }) + it('renders a 3 step Nav with 2 pipettes', () => { + props = { + sections: MOCK_SECTIONS_2_PIPETTES_3_STEPS, + currentSection: 'PRIMARY_PIPETTE_TIPRACKS', + primaryPipetteMount: 'left', + secondaryPipetteMount: 'right', + } + const { getByText } = render(props) + expect(getByText('1')).toBeTruthy() + expect(getByText('Check tipracks with Left Pipette')).toBeTruthy() + expect(getByText('2')).toBeTruthy() + expect(getByText('Check tipracks with Right Pipette')).toBeTruthy() + expect(getByText('3')).toBeTruthy() + expect(getByText('Return tip')).toBeTruthy() + }) + it('renders a 4 step Nav with 2 pipettes', () => { + props = { + sections: MOCK_SECTIONS_2_PIPETTES_4_STEPS, + currentSection: 'PRIMARY_PIPETTE_TIPRACKS', + primaryPipetteMount: 'left', + secondaryPipetteMount: 'right', + } + const { getByText } = render(props) + expect(getByText('1')).toBeTruthy() + expect(getByText('Check tipracks with Left Pipette')).toBeTruthy() + expect(getByText('2')).toBeTruthy() + expect(getByText('Check tipracks with Right Pipette')).toBeTruthy() + expect(getByText('3')).toBeTruthy() + expect(getByText('Check remaining labware with Left Pipette')).toBeTruthy() + expect(getByText('4')).toBeTruthy() + expect(getByText('Return tip')).toBeTruthy() + }) +}) diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/index.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/index.tsx index 56f894f6284..0b7b1f3e498 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/index.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/index.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' import { ModalPage } from '@opentrons/components' import { Portal } from '../../../App/portal' -import { useIntroInfo, useSteps } from './hooks' +import { useSteps } from './hooks' import { IntroScreen } from './IntroScreen' import { GenericStepScreen } from './GenericStepScreen' @@ -17,13 +17,9 @@ export const LabwarePositionCheck = ( ): JSX.Element | null => { const { t } = useTranslation(['labware_position_check', 'shared']) const steps = useSteps() - const introInfo = useIntroInfo() const [currentLabwareCheckStep, setCurrentLabwareCheckStep] = React.useState< number | null >(null) - const [sectionIndex] = React.useState(0) - if (introInfo == null) return null - const { sections } = introInfo return ( @@ -42,8 +38,6 @@ export const LabwarePositionCheck = ( ) : ( Date: Tue, 12 Oct 2021 14:22:10 -0400 Subject: [PATCH 03/12] feat(app): extend PositionCheckNav component for Generic Step Screen closes #8500 --- .../__tests__/GenericStepScreen.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/GenericStepScreen.test.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/GenericStepScreen.test.tsx index 28eeec9b04e..32f04d57c87 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/GenericStepScreen.test.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/GenericStepScreen.test.tsx @@ -29,7 +29,7 @@ const PICKUP_TIP_LABWARE_ID = 'PICKUP_TIP_LABWARE_ID' const PRIMARY_PIPETTE_ID = 'PRIMARY_PIPETTE_ID' const MOCK_SECTION = ['PRIMARY_PIPETTE_TIPRACKS' as Section] -const MOCK_LABWARE_POSITION_CHECK_STEP_TIP_RACK = { +const MOCK_LABWARE_POSITION_CHECK_STEP_TIPRACK = { labwareId: '1d57fc10-67ad-11ea-9f8b-3b50068bd62d:opentrons/opentrons_96_filtertiprack_200ul/1', section: '', @@ -55,13 +55,13 @@ describe('GenericStepScreen', () => { beforeEach(() => { props = { - selectedStep: MOCK_LABWARE_POSITION_CHECK_STEP_TIP_RACK, + selectedStep: MOCK_LABWARE_POSITION_CHECK_STEP_TIPRACK, setCurrentLabwareCheckStep: () => {}, } when(mockLabwarePositionCheckStepDetail) .calledWith( partialComponentPropsMatcher({ - selectedStep: MOCK_LABWARE_POSITION_CHECK_STEP_TIP_RACK, + selectedStep: MOCK_LABWARE_POSITION_CHECK_STEP_TIPRACK, }) ) .mockReturnValue(
Mock Labware Position Check Step Detail
) From 71c24048b3b4a89acd2d59cca1edf79d254ab640 Mon Sep 17 00:00:00 2001 From: Jethary Rader Date: Tue, 12 Oct 2021 14:42:54 -0400 Subject: [PATCH 04/12] increase test coverage --- .../__tests__/PositionCheckNav.test.tsx | 43 +++++++++++++------ 1 file changed, 29 insertions(+), 14 deletions(-) diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/PositionCheckNav.test.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/PositionCheckNav.test.tsx index 459e8cd3e07..4d1e2d1f93e 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/PositionCheckNav.test.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/PositionCheckNav.test.tsx @@ -14,11 +14,11 @@ const MOCK_SECTIONS_2_PIPETTES_3_STEPS = [ 'RETURN_TIP', ] as Section[] const MOCK_SECTIONS_2_PIPETTES_4_STEPS = [ - 'PRIMARY_PIPETTE_TIPRACKS', - 'SECONDARY_PIPETTE_TIPRACKS', - 'CHECK_REMAINING_LABWARE_WITH_PRIMARY_PIPETTE', - 'RETURN_TIP', - ] as Section[] + 'PRIMARY_PIPETTE_TIPRACKS', + 'SECONDARY_PIPETTE_TIPRACKS', + 'CHECK_REMAINING_LABWARE_WITH_PRIMARY_PIPETTE', + 'RETURN_TIP', +] as Section[] const render = (props: React.ComponentProps) => { return renderWithProviders(, { @@ -39,9 +39,9 @@ describe('PositionCheckNav', () => { }) it('renders a 2 step Nav with 1 pipette', () => { const { getByText } = render(props) - expect(getByText('1')).toBeTruthy() + expect(getByText('1')).toHaveStyle('backgroundColor: #00c3e6') expect(getByText('Check tipracks with Left Pipette')).toBeTruthy() - expect(getByText('2')).toBeTruthy() + expect(getByText('2')).toHaveStyle('backgroundColor: C_DISABLED') expect(getByText('Return tip')).toBeTruthy() }) it('renders a 3 step Nav with 2 pipettes', () => { @@ -52,11 +52,11 @@ describe('PositionCheckNav', () => { secondaryPipetteMount: 'right', } const { getByText } = render(props) - expect(getByText('1')).toBeTruthy() + expect(getByText('1')).toHaveStyle('backgroundColor: #00c3e6') expect(getByText('Check tipracks with Left Pipette')).toBeTruthy() - expect(getByText('2')).toBeTruthy() + expect(getByText('2')).toHaveStyle('backgroundColor: C_DISABLED') expect(getByText('Check tipracks with Right Pipette')).toBeTruthy() - expect(getByText('3')).toBeTruthy() + expect(getByText('3')).toHaveStyle('backgroundColor: C_DISABLED') expect(getByText('Return tip')).toBeTruthy() }) it('renders a 4 step Nav with 2 pipettes', () => { @@ -67,13 +67,28 @@ describe('PositionCheckNav', () => { secondaryPipetteMount: 'right', } const { getByText } = render(props) - expect(getByText('1')).toBeTruthy() + expect(getByText('1')).toHaveStyle('backgroundColor: #00c3e6') expect(getByText('Check tipracks with Left Pipette')).toBeTruthy() - expect(getByText('2')).toBeTruthy() + expect(getByText('2')).toHaveStyle('backgroundColor: C_DISABLED') expect(getByText('Check tipracks with Right Pipette')).toBeTruthy() - expect(getByText('3')).toBeTruthy() + expect(getByText('3')).toHaveStyle('backgroundColor: C_DISABLED') expect(getByText('Check remaining labware with Left Pipette')).toBeTruthy() - expect(getByText('4')).toBeTruthy() + expect(getByText('4')).toHaveStyle('backgroundColor: C_DISABLED') + expect(getByText('Return tip')).toBeTruthy() + }) + it('renders a 3 step Nav with 2 pipettes and on the second step', () => { + props = { + sections: MOCK_SECTIONS_2_PIPETTES_3_STEPS, + currentSection: 'SECONDARY_PIPETTE_TIPRACKS', + primaryPipetteMount: 'left', + secondaryPipetteMount: 'right', + completedSections: ['PRIMARY_PIPETTE_TIPRACKS'], + } + const { getByText } = render(props) + expect(getByText('Check tipracks with Left Pipette')).toBeTruthy() + expect(getByText('2')).toHaveStyle('backgroundColor: #00c3e6') + expect(getByText('Check tipracks with Right Pipette')).toBeTruthy() + expect(getByText('3')).toHaveStyle('backgroundColor: C_DISABLED') expect(getByText('Return tip')).toBeTruthy() }) }) From ed03c83969ef84f4f054f46930278a071766af20 Mon Sep 17 00:00:00 2001 From: Jethary Rader Date: Tue, 12 Oct 2021 17:33:26 -0400 Subject: [PATCH 05/12] clean up file --- .../LabwarePositionCheck/PositionCheckNav.tsx | 30 +++++++++++-------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/PositionCheckNav.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/PositionCheckNav.tsx index 3ea05da93db..9d56f6e105f 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/PositionCheckNav.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/PositionCheckNav.tsx @@ -1,7 +1,6 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' import capitalize from 'lodash/capitalize' - import { Flex, Box, @@ -50,25 +49,27 @@ export function PositionCheckNav(props: Props): JSX.Element { backgroundColor={C_NEAR_WHITE} > {sections.map((section, index) => { - const sectionColor = + const sectionTextOrBackgroundColor = completedSections != null && !completedSections.includes(section) ? C_DISABLED : C_DARK_GRAY const isCompleted = completedSections != null && completedSections.includes(section) + let iconBackgroundColor = C_DISABLED + if (section === currentSection) { + iconBackgroundColor = '#00c3e6' + } else if (isCompleted === true) { + iconBackgroundColor = 'transparent' + } else { + iconBackgroundColor = sectionTextOrBackgroundColor + } return ( {isCompleted ? ( @@ -88,7 +90,11 @@ export function PositionCheckNav(props: Props): JSX.Element { {t(`${section.toLowerCase()}_section`, { primary_mount: capitalize(primaryPipetteMount), From 3261c8a4c3db1e1808b58e3aae3f25e7f3746b0e Mon Sep 17 00:00:00 2001 From: Jethary Rader Date: Wed, 13 Oct 2021 10:06:58 -0400 Subject: [PATCH 06/12] add compeltedSections prop value --- .../GenericStepScreen.tsx | 2 +- .../__tests__/PositionCheckNav.test.tsx | 24 +++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx index 62e4b00943f..43619b825e7 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx @@ -16,7 +16,6 @@ export function GenericStepScreen( const [sectionIndex] = React.useState(0) if (introInfo == null) return null const { sections, primaryPipetteMount, secondaryPipetteMount } = introInfo - return ( @@ -25,6 +24,7 @@ export function GenericStepScreen( secondaryPipetteMount={secondaryPipetteMount} sections={sections} currentSection={sections[sectionIndex]} + completedSections={[sections[sectionIndex - 1]]} /> diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/PositionCheckNav.test.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/PositionCheckNav.test.tsx index 4d1e2d1f93e..efd0c651e00 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/PositionCheckNav.test.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/PositionCheckNav.test.tsx @@ -40,9 +40,9 @@ describe('PositionCheckNav', () => { it('renders a 2 step Nav with 1 pipette', () => { const { getByText } = render(props) expect(getByText('1')).toHaveStyle('backgroundColor: #00c3e6') - expect(getByText('Check tipracks with Left Pipette')).toBeTruthy() + getByText('Check tipracks with Left Pipette') expect(getByText('2')).toHaveStyle('backgroundColor: C_DISABLED') - expect(getByText('Return tip')).toBeTruthy() + getByText('Return tip') }) it('renders a 3 step Nav with 2 pipettes', () => { props = { @@ -53,11 +53,11 @@ describe('PositionCheckNav', () => { } const { getByText } = render(props) expect(getByText('1')).toHaveStyle('backgroundColor: #00c3e6') - expect(getByText('Check tipracks with Left Pipette')).toBeTruthy() + getByText('Check tipracks with Left Pipette') expect(getByText('2')).toHaveStyle('backgroundColor: C_DISABLED') - expect(getByText('Check tipracks with Right Pipette')).toBeTruthy() + getByText('Check tipracks with Right Pipette') expect(getByText('3')).toHaveStyle('backgroundColor: C_DISABLED') - expect(getByText('Return tip')).toBeTruthy() + getByText('Return tip') }) it('renders a 4 step Nav with 2 pipettes', () => { props = { @@ -68,13 +68,13 @@ describe('PositionCheckNav', () => { } const { getByText } = render(props) expect(getByText('1')).toHaveStyle('backgroundColor: #00c3e6') - expect(getByText('Check tipracks with Left Pipette')).toBeTruthy() + getByText('Check tipracks with Left Pipette') expect(getByText('2')).toHaveStyle('backgroundColor: C_DISABLED') - expect(getByText('Check tipracks with Right Pipette')).toBeTruthy() + getByText('Check tipracks with Right Pipette') expect(getByText('3')).toHaveStyle('backgroundColor: C_DISABLED') - expect(getByText('Check remaining labware with Left Pipette')).toBeTruthy() + getByText('Check remaining labware with Left Pipette') expect(getByText('4')).toHaveStyle('backgroundColor: C_DISABLED') - expect(getByText('Return tip')).toBeTruthy() + getByText('Return tip') }) it('renders a 3 step Nav with 2 pipettes and on the second step', () => { props = { @@ -85,10 +85,10 @@ describe('PositionCheckNav', () => { completedSections: ['PRIMARY_PIPETTE_TIPRACKS'], } const { getByText } = render(props) - expect(getByText('Check tipracks with Left Pipette')).toBeTruthy() + getByText('Check tipracks with Left Pipette') expect(getByText('2')).toHaveStyle('backgroundColor: #00c3e6') - expect(getByText('Check tipracks with Right Pipette')).toBeTruthy() + getByText('Check tipracks with Right Pipette') expect(getByText('3')).toHaveStyle('backgroundColor: C_DISABLED') - expect(getByText('Return tip')).toBeTruthy() + getByText('Return tip') }) }) From 870023b319f047a64dd6d1e008b1fdc62923eaa1 Mon Sep 17 00:00:00 2001 From: Jethary Rader Date: Wed, 13 Oct 2021 10:51:46 -0400 Subject: [PATCH 07/12] remove extra spaces --- .../LabwarePositionCheck/LabwarePositionCheckStepDetail.tsx | 2 +- .../__tests__/LabwarePositionCheck.test.tsx | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/LabwarePositionCheckStepDetail.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/LabwarePositionCheckStepDetail.tsx index 1420d209564..7eeccf13b9b 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/LabwarePositionCheckStepDetail.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/LabwarePositionCheckStepDetail.tsx @@ -68,7 +68,7 @@ export const LabwarePositionCheckStepDetail = ( width="60%" justifyContent={JUSTIFY_CENTER} marginTop={SPACING_4} - marginLeft="35%" + marginLeft="30%" boxShadow="1px 1px 1px rgba(0, 0, 0, 0.25)" borderRadius="4px" backgroundColor={C_NEAR_WHITE} diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/LabwarePositionCheck.test.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/LabwarePositionCheck.test.tsx index 18da9e9faaa..d7785e9a4bd 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/LabwarePositionCheck.test.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/LabwarePositionCheck.test.tsx @@ -16,7 +16,6 @@ jest.mock('../hooks') const mockGenericStepScreen = GenericStepScreen as jest.MockedFunction< typeof GenericStepScreen > - const mockIntroScreen = IntroScreen as jest.MockedFunction const mockUseSteps = useSteps as jest.MockedFunction @@ -54,14 +53,12 @@ describe('LabwarePositionCheck', () => { } as LabwarePositionCheckStep, ]) mockIntroScreen.mockReturnValue(
Mock Intro Screen Component
) - mockGenericStepScreen.mockReturnValue(null) }) afterEach(() => { resetAllWhenMocks() jest.resetAllMocks() }) - it('renders LabwarePositionCheck header and button and no components', () => { const { getByRole } = render(props) getByRole('heading', { From 8e4e4b79a0cfbaad59a92a7e1baedf0a219a5404 Mon Sep 17 00:00:00 2001 From: Jethary Rader Date: Wed, 13 Oct 2021 11:09:12 -0400 Subject: [PATCH 08/12] fix genericStepScreen styling --- .../LabwarePositionCheck/GenericStepScreen.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx index 43619b825e7..bb533926075 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx @@ -1,5 +1,11 @@ import * as React from 'react' -import { ALIGN_START, Flex } from '@opentrons/components' +import { + ALIGN_CENTER, + Box, + Flex, + JUSTIFY_SPACE_BETWEEN, + SPACING_3, +} from '@opentrons/components' import { LabwarePositionCheckStepDetail } from './LabwarePositionCheckStepDetail' import { PositionCheckNav } from './PositionCheckNav' import type { LabwarePositionCheckStep } from './types' @@ -17,8 +23,8 @@ export function GenericStepScreen( if (introInfo == null) return null const { sections, primaryPipetteMount, secondaryPipetteMount } = introInfo return ( - - + + - + - + - + ) } From 4ebbb0ce6e41b6d524d813486a109b83f15a7d1b Mon Sep 17 00:00:00 2001 From: Jethary Rader Date: Wed, 13 Oct 2021 11:27:17 -0400 Subject: [PATCH 09/12] revert export function change back to export const --- .../ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx index bb533926075..259cb17dcad 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx @@ -15,9 +15,9 @@ interface GenericStepScreenProps { selectedStep: LabwarePositionCheckStep setCurrentLabwareCheckStep: (stepNumber: number) => void } -export function GenericStepScreen( +export const GenericStepScreen = ( props: GenericStepScreenProps -): JSX.Element | null { +): JSX.Element | null => { const introInfo = useIntroInfo() const [sectionIndex] = React.useState(0) if (introInfo == null) return null From a28ca07198417964399545bee7824ecaa9a95482 Mon Sep 17 00:00:00 2001 From: Jethary Rader Date: Wed, 13 Oct 2021 12:49:55 -0400 Subject: [PATCH 10/12] rename PositionCheckNav to SectionList --- .../LabwarePositionCheck/GenericStepScreen.tsx | 4 ++-- .../LabwarePositionCheck/IntroScreen.tsx | 4 ++-- .../{PositionCheckNav.tsx => SectionList.tsx} | 2 +- .../__tests__/GenericStepScreen.test.tsx | 12 +++++------- .../__tests__/IntroScreen.test.tsx | 12 +++++------- ...ositionCheckNav.test.tsx => SectionList.test.tsx} | 10 +++++----- 6 files changed, 20 insertions(+), 24 deletions(-) rename app/src/organisms/ProtocolSetup/LabwarePositionCheck/{PositionCheckNav.tsx => SectionList.tsx} (97%) rename app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/{PositionCheckNav.test.tsx => SectionList.test.tsx} (91%) diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx index 259cb17dcad..cb023de3b40 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx @@ -7,7 +7,7 @@ import { SPACING_3, } from '@opentrons/components' import { LabwarePositionCheckStepDetail } from './LabwarePositionCheckStepDetail' -import { PositionCheckNav } from './PositionCheckNav' +import { SectionList } from './SectionList' import type { LabwarePositionCheckStep } from './types' import { useIntroInfo } from './hooks' @@ -25,7 +25,7 @@ export const GenericStepScreen = ( return ( - - -const mockPositionCheckNav = PositionCheckNav as jest.MockedFunction< - typeof PositionCheckNav -> +const mockSectionList = SectionList as jest.MockedFunction const mockUseIntroInfo = useIntroInfo as jest.MockedFunction< typeof useIntroInfo > @@ -66,7 +64,7 @@ describe('GenericStepScreen', () => { ) .mockReturnValue(
Mock Labware Position Check Step Detail
) - mockPositionCheckNav.mockReturnValue(
Mock Position Check Nav
) + mockSectionList.mockReturnValue(
Mock SectionList
) when(mockUseIntroInfo).calledWith().mockReturnValue({ primaryTipRackSlot: '1', primaryTipRackName: 'Opentrons 96 Filter Tip Rack 200 µL', @@ -83,7 +81,7 @@ describe('GenericStepScreen', () => { }) it('renders GenericStepScreenNav component', () => { const { getByText } = render(props) - expect(getByText('Mock Position Check Nav')).toBeTruthy() + expect(getByText('Mock SectionList')).toBeTruthy() }) it('renders null if useIntroInfo is null', () => { mockUseIntroInfo.mockReturnValue(null) diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/IntroScreen.test.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/IntroScreen.test.tsx index 9e576a475f7..a525712b4fe 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/IntroScreen.test.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/IntroScreen.test.tsx @@ -11,14 +11,14 @@ import standardDeckDef from '@opentrons/shared-data/deck/definitions/2/ot2_stand import { LabwareDefinition2 } from '@opentrons/shared-data' import fixture_tiprack_300_ul from '@opentrons/shared-data/labware/fixtures/2/fixture_tiprack_300_ul.json' import { useModuleRenderInfoById, useLabwareRenderInfoById } from '../../hooks' -import { PositionCheckNav } from '../PositionCheckNav' +import { SectionList } from '../SectionList' import { useIntroInfo, useLabwareIdsBySection } from '../hooks' import { IntroScreen, INTERVAL_MS } from '../IntroScreen' import type { Section } from '../types' import { fireEvent } from '@testing-library/dom' jest.mock('../hooks') -jest.mock('../PositionCheckNav') +jest.mock('../Sectionlist') jest.mock('../../hooks') jest.mock('@opentrons/components', () => { const actualComponents = jest.requireActual('@opentrons/components') @@ -42,9 +42,7 @@ const mockUseIntroInfo = useIntroInfo as jest.MockedFunction< typeof useIntroInfo > const mockUseInterval = useInterval as jest.MockedFunction -const mockPositionCheckNav = PositionCheckNav as jest.MockedFunction< - typeof PositionCheckNav -> +const mockSectionList = SectionList as jest.MockedFunction const mockRobotWorkSpace = RobotWorkSpace as jest.MockedFunction< typeof RobotWorkSpace > @@ -107,7 +105,7 @@ describe('IntroScreen', () => { firstStepLabwareSlot: '2', sections: MOCK_SECTIONS, }) - mockPositionCheckNav.mockReturnValue(
Mock Position Check Nav
) + mockSectionList.mockReturnValue(
Mock Section List
) }) afterEach(() => { resetAllWhenMocks() @@ -125,7 +123,7 @@ describe('IntroScreen', () => { getByText( 'When you check a labware, the OT-2’s pipette nozzle or attached tip will stop at the center of the A1 well. If the pipette nozzle or tip is not centered, you can reveal the OT-2’s jog controls to make an adjustment. This Labware Offset will be applied to the entire labware. Offset data is measured to the nearest 1/10th mm and can be made in the X, Y and/or Z directions.' ) - getByText('Mock Position Check Nav') + getByText('Mock Section List') }) it('should call setCurrentLabwareCheckStep when the CTA button is pressed', () => { const { getByRole } = render(props) diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/PositionCheckNav.test.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/SectionList.test.tsx similarity index 91% rename from app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/PositionCheckNav.test.tsx rename to app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/SectionList.test.tsx index efd0c651e00..6d395b5660d 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/PositionCheckNav.test.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/SectionList.test.tsx @@ -1,7 +1,7 @@ import { renderWithProviders } from '@opentrons/components' import * as React from 'react' import { i18n } from '../../../../i18n' -import { PositionCheckNav } from '../PositionCheckNav' +import { SectionList } from '../SectionList' import { Section } from '../types' const MOCK_SECTIONS_1_PIPETTE_2_STEPS = [ @@ -20,14 +20,14 @@ const MOCK_SECTIONS_2_PIPETTES_4_STEPS = [ 'RETURN_TIP', ] as Section[] -const render = (props: React.ComponentProps) => { - return renderWithProviders(, { +const render = (props: React.ComponentProps) => { + return renderWithProviders(, { i18nInstance: i18n, })[0] } -describe('PositionCheckNav', () => { - let props: React.ComponentProps +describe('SectionList', () => { + let props: React.ComponentProps beforeEach(() => { props = { From 2da5499bc3717882c0d5f147c83fc4f29c3bb03f Mon Sep 17 00:00:00 2001 From: Jethary Rader Date: Wed, 13 Oct 2021 13:10:42 -0400 Subject: [PATCH 11/12] fix jest test --- .../LabwarePositionCheck/__tests__/IntroScreen.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/IntroScreen.test.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/IntroScreen.test.tsx index a525712b4fe..4866d0956b5 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/IntroScreen.test.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/IntroScreen.test.tsx @@ -18,7 +18,7 @@ import type { Section } from '../types' import { fireEvent } from '@testing-library/dom' jest.mock('../hooks') -jest.mock('../Sectionlist') +jest.mock('../SectionList') jest.mock('../../hooks') jest.mock('@opentrons/components', () => { const actualComponents = jest.requireActual('@opentrons/components') From 5c8c5794bbc00a96cd59f181b82579ba4806e932 Mon Sep 17 00:00:00 2001 From: Jethary Rader Date: Wed, 13 Oct 2021 14:15:59 -0400 Subject: [PATCH 12/12] address pr changes --- .../LabwarePositionCheck/GenericStepScreen.tsx | 2 +- .../LabwarePositionCheck/SectionList.tsx | 17 +++++++++-------- .../__tests__/GenericStepScreen.test.tsx | 6 +++--- .../__tests__/SectionList.test.tsx | 8 ++++---- 4 files changed, 17 insertions(+), 16 deletions(-) diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx index cb023de3b40..28be75d9c5c 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/GenericStepScreen.tsx @@ -8,8 +8,8 @@ import { } from '@opentrons/components' import { LabwarePositionCheckStepDetail } from './LabwarePositionCheckStepDetail' import { SectionList } from './SectionList' -import type { LabwarePositionCheckStep } from './types' import { useIntroInfo } from './hooks' +import type { LabwarePositionCheckStep } from './types' interface GenericStepScreenProps { selectedStep: LabwarePositionCheckStep diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/SectionList.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/SectionList.tsx index 614ecbd531b..34dbb931bba 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/SectionList.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/SectionList.tsx @@ -18,6 +18,7 @@ import { Icon, SPACING_3, COLOR_SUCCESS, + C_SELECTED_DARK, } from '@opentrons/components' import type { Section } from './types' interface Props { @@ -49,19 +50,19 @@ export function SectionList(props: Props): JSX.Element { backgroundColor={C_NEAR_WHITE} > {sections.map((section, index) => { - const sectionTextOrBackgroundColor = + const sectionTextColor = completedSections != null && !completedSections.includes(section) ? C_DISABLED : C_DARK_GRAY const isCompleted = completedSections != null && completedSections.includes(section) - let iconBackgroundColor = C_DISABLED + let backgroundColor = C_DISABLED if (section === currentSection) { - iconBackgroundColor = '#00c3e6' + backgroundColor = C_SELECTED_DARK } else if (isCompleted === true) { - iconBackgroundColor = 'transparent' + backgroundColor = 'transparent' } else { - iconBackgroundColor = sectionTextOrBackgroundColor + backgroundColor = sectionTextColor } return ( @@ -69,7 +70,7 @@ export function SectionList(props: Props): JSX.Element { width={SIZE_1} height={SIZE_1} lineHeight={SIZE_1} - backgroundColor={iconBackgroundColor} + backgroundColor={backgroundColor} color={C_WHITE} borderRadius="50%" marginRight={SPACING_2} @@ -92,8 +93,8 @@ export function SectionList(props: Props): JSX.Element { {t(`${section.toLowerCase()}_section`, { diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/GenericStepScreen.test.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/GenericStepScreen.test.tsx index 2dabd1bc8b7..09b3485120d 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/GenericStepScreen.test.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/GenericStepScreen.test.tsx @@ -25,7 +25,7 @@ const mockUseIntroInfo = useIntroInfo as jest.MockedFunction< const PICKUP_TIP_LABWARE_ID = 'PICKUP_TIP_LABWARE_ID' const PRIMARY_PIPETTE_ID = 'PRIMARY_PIPETTE_ID' -const MOCK_SECTION = ['PRIMARY_PIPETTE_TIPRACKS' as Section] +const MOCK_SECTIONS = ['PRIMARY_PIPETTE_TIPRACKS' as Section] const MOCK_LABWARE_POSITION_CHECK_STEP_TIPRACK = { labwareId: @@ -72,7 +72,7 @@ describe('GenericStepScreen', () => { secondaryPipetteMount: '', numberOfTips: 1, firstStepLabwareSlot: '2', - sections: MOCK_SECTION, + sections: MOCK_SECTIONS, }) }) it('renders LabwarePositionCheckStepDetail component', () => { @@ -81,7 +81,7 @@ describe('GenericStepScreen', () => { }) it('renders GenericStepScreenNav component', () => { const { getByText } = render(props) - expect(getByText('Mock SectionList')).toBeTruthy() + getByText('Mock SectionList') }) it('renders null if useIntroInfo is null', () => { mockUseIntroInfo.mockReturnValue(null) diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/SectionList.test.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/SectionList.test.tsx index 6d395b5660d..6cdde906bbc 100644 --- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/SectionList.test.tsx +++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/SectionList.test.tsx @@ -39,7 +39,7 @@ describe('SectionList', () => { }) it('renders a 2 step Nav with 1 pipette', () => { const { getByText } = render(props) - expect(getByText('1')).toHaveStyle('backgroundColor: #00c3e6') + expect(getByText('1')).toHaveStyle('backgroundColor: C_SELECTED_DARK') getByText('Check tipracks with Left Pipette') expect(getByText('2')).toHaveStyle('backgroundColor: C_DISABLED') getByText('Return tip') @@ -52,7 +52,7 @@ describe('SectionList', () => { secondaryPipetteMount: 'right', } const { getByText } = render(props) - expect(getByText('1')).toHaveStyle('backgroundColor: #00c3e6') + expect(getByText('1')).toHaveStyle('backgroundColor: C_SELECTED_DARK') getByText('Check tipracks with Left Pipette') expect(getByText('2')).toHaveStyle('backgroundColor: C_DISABLED') getByText('Check tipracks with Right Pipette') @@ -67,7 +67,7 @@ describe('SectionList', () => { secondaryPipetteMount: 'right', } const { getByText } = render(props) - expect(getByText('1')).toHaveStyle('backgroundColor: #00c3e6') + expect(getByText('1')).toHaveStyle('backgroundColor: C_SELECTED_DARK') getByText('Check tipracks with Left Pipette') expect(getByText('2')).toHaveStyle('backgroundColor: C_DISABLED') getByText('Check tipracks with Right Pipette') @@ -86,7 +86,7 @@ describe('SectionList', () => { } const { getByText } = render(props) getByText('Check tipracks with Left Pipette') - expect(getByText('2')).toHaveStyle('backgroundColor: #00c3e6') + expect(getByText('2')).toHaveStyle('backgroundColor: C_SELECTED_DARK') getByText('Check tipracks with Right Pipette') expect(getByText('3')).toHaveStyle('backgroundColor: C_DISABLED') getByText('Return tip')