From b8e109bd5bb55a0afdec57efc30f809a23060be7 Mon Sep 17 00:00:00 2001 From: Jethary Date: Tue, 2 Apr 2024 13:40:08 -0400 Subject: [PATCH] snackbar and bool render --- .../ProtocolSetupParameters/ChooseEnum.tsx | 40 +++++------------- .../__tests__/ChooseEnum.test.tsx | 42 ++++--------------- .../ProtocolSetupParameters.test.tsx | 11 ++++- .../ProtocolSetupParameters/index.tsx | 14 ++++--- 4 files changed, 36 insertions(+), 71 deletions(-) diff --git a/app/src/organisms/ProtocolSetupParameters/ChooseEnum.tsx b/app/src/organisms/ProtocolSetupParameters/ChooseEnum.tsx index 8e808ac8335..e2f97e5e894 100644 --- a/app/src/organisms/ProtocolSetupParameters/ChooseEnum.tsx +++ b/app/src/organisms/ProtocolSetupParameters/ChooseEnum.tsx @@ -29,22 +29,16 @@ export function ChooseEnum({ const { makeSnackbar } = useToaster() const { t } = useTranslation(['protocol_setup', 'shared']) - if (parameter.type !== 'bool' && parameter.type !== 'str') { + if (parameter.type !== 'str') { console.error( - `parameter type is expected to be boolean or string for parameter ${parameter.displayName}` + `parameter type is expected to be a string for parameter ${parameter.displayName}` ) } - const options = parameter.type === 'str' ? parameter.choices : [true, false] + const options = parameter.type === 'str' ? parameter.choices : undefined const handleOnClick = (newValue: string | number | boolean): void => { setParameter(newValue, parameter.variableName) } - React.useEffect(() => { - if (rawValue === parameter.default) { - makeSnackbar(t('no_custom_values')) - } - }, [rawValue]) - return ( <> { setParameter(parameter.default, parameter.variableName) + makeSnackbar(t('no_custom_values')) }} /> {options?.map(option => { - const isBoolean = option === true || option === false return ( handleOnClick(isBoolean ? option : option.value)} - isSelected={ - isBoolean ? option === rawValue : option.value === rawValue - } + key={`${option.value}`} + data-testid={`${option.value}`} + buttonLabel={option.displayName} + buttonValue={`${option.value}`} + onChange={() => handleOnClick(option.value)} + isSelected={option.value === rawValue} /> ) })} diff --git a/app/src/organisms/ProtocolSetupParameters/__tests__/ChooseEnum.test.tsx b/app/src/organisms/ProtocolSetupParameters/__tests__/ChooseEnum.test.tsx index f636ea84911..fc040832c93 100644 --- a/app/src/organisms/ProtocolSetupParameters/__tests__/ChooseEnum.test.tsx +++ b/app/src/organisms/ProtocolSetupParameters/__tests__/ChooseEnum.test.tsx @@ -18,41 +18,8 @@ describe('ChooseEnum', () => { beforeEach(() => { props = { - handleGoBack: vi.fn(), - parameter: { - displayName: 'Dry Run', - variableName: 'dry_run', - description: 'a dry run description', - type: 'bool', - default: false, - value: false, - }, setParameter: vi.fn(), - rawValue: false, - } - }) - - it('should render the text and buttons work for a boolean param', () => { - render(props) - screen.getByText('Choose Dry Run') - const btn = screen.getByRole('button', { name: 'Restore default values' }) - screen.getByText('On') - screen.getByText('Off') - const trueOption = screen.getByRole('label', { name: 'On' }) - const falseOption = screen.getByRole('label', { name: 'Off' }) - expect(falseOption).toHaveStyle(`background-color: ${COLORS.blue60}`) - expect(trueOption).toHaveStyle(`background-color: ${COLORS.blue40}`) - fireEvent.click(btn) - expect(props.setParameter).toHaveBeenCalled() - }) - it('renders the back icon and calls the prop', () => { - render(props) - fireEvent.click(screen.getAllByRole('button')[0]) - expect(props.handleGoBack).toHaveBeenCalled() - }) - it('should render the text and buttons for choice param', () => { - props = { - ...props, + handleGoBack: vi.fn(), parameter: { displayName: 'Default Module Offsets', variableName: 'DEFAULT_OFFSETS', @@ -77,6 +44,13 @@ describe('ChooseEnum', () => { }, rawValue: '1', } + }) + it('renders the back icon and calls the prop', () => { + render(props) + fireEvent.click(screen.getAllByRole('button')[0]) + expect(props.handleGoBack).toHaveBeenCalled() + }) + it('should render the text and buttons for choice param', () => { render(props) screen.getByText('no offsets') screen.getByText('temp offset') diff --git a/app/src/organisms/ProtocolSetupParameters/__tests__/ProtocolSetupParameters.test.tsx b/app/src/organisms/ProtocolSetupParameters/__tests__/ProtocolSetupParameters.test.tsx index 6cd98e471d5..1dc55314d59 100644 --- a/app/src/organisms/ProtocolSetupParameters/__tests__/ProtocolSetupParameters.test.tsx +++ b/app/src/organisms/ProtocolSetupParameters/__tests__/ProtocolSetupParameters.test.tsx @@ -55,11 +55,18 @@ describe('ProtocolSetupParameters', () => { screen.getByText('Dry Run') screen.getByText('a dry run description') }) - it('renders the ChooseEnum component when a boolean param is selected', () => { + it('renders the ChooseEnum component when a str param is selected', () => { render(props) - fireEvent.click(screen.getByText('Dry Run')) + fireEvent.click(screen.getByText('Default Module Offsets')) screen.getByText('mock ChooseEnum') }) + it('renders the other setting when boolean param is selected', () => { + render(props) + screen.getByText('Off') + expect(screen.getAllByText('On')).toHaveLength(3) + fireEvent.click(screen.getByText('Dry Run')) + expect(screen.getAllByText('On')).toHaveLength(4) + }) it('renders the back icon and calls useHistory', () => { render(props) fireEvent.click(screen.getAllByRole('button')[0]) diff --git a/app/src/organisms/ProtocolSetupParameters/index.tsx b/app/src/organisms/ProtocolSetupParameters/index.tsx index f44be38019f..84b732b84d0 100644 --- a/app/src/organisms/ProtocolSetupParameters/index.tsx +++ b/app/src/organisms/ProtocolSetupParameters/index.tsx @@ -257,7 +257,14 @@ export function ProtocolSetupParameters({ hasIcon={!(parameter.type === 'bool')} status="general" title={parameter.displayName} - onClickSetupStep={() => setChooseValueScreen(parameter)} + onClickSetupStep={() => + parameter.type === 'bool' + ? updateParameters( + parameter.value === true ? false : true, + parameter.variableName + ) + : setChooseValueScreen(parameter) + } detail={formatRunTimeParameterValue(parameter, t)} description={parameter.description} fontSize="h4" @@ -268,10 +275,7 @@ export function ProtocolSetupParameters({ ) - if ( - chooseValueScreen != null && - (chooseValueScreen.type === 'bool' || chooseValueScreen.type === 'str') - ) { + if (chooseValueScreen != null && chooseValueScreen.type === 'str') { children = ( setChooseValueScreen(null)}