fix(app): fix Numerical keyboard switching issue (#15044)

* fix(app): fix Numerical keyboard switching issue

app/src/organisms/ProtocolSetupParameters/ChooseNumber.tsx

@@ -152,7 +152,7 @@ export function ChooseNumber({
           <NumericalKeyboard
             keyboardRef={keyboardRef}
             isDecimal={parameter.type === 'float'}
-            hasHyphen
+            hasHyphen={min < 0 || max < min}
             onChange={e => {
               handleKeyboardInput(e)
             }}

app/src/organisms/ProtocolSetupParameters/__tests__/ChooseNumber.test.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react'
+import { it, describe, beforeEach, vi, expect } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+import { renderWithProviders } from '../../../__testing-utils__'
+import { i18n } from '../../../i18n'
+import { useToaster } from '../../ToasterOven'
+import { mockRunTimeParameterData } from '../../../pages/ProtocolDetails/fixtures'
+import { ChooseNumber } from '../ChooseNumber'
+
+import type { NumberParameter } from '@opentrons/shared-data'
+
+vi.mock('../../ToasterOven')
+
+const mockHandleGoBack = vi.fn()
+const mockIntNumberParameterData = mockRunTimeParameterData[5] as NumberParameter
+const mockFloatNumberParameterData = mockRunTimeParameterData[6] as NumberParameter
+const mockSetParameter = vi.fn()
+const mockMakeSnackbar = vi.fn()
+
+const render = (props: React.ComponentProps<typeof ChooseNumber>) => {
+  return renderWithProviders(<ChooseNumber {...props} />, {
+    i18nInstance: i18n,
+  })
+}
+
+describe('ChooseNumber', () => {
+  let props: React.ComponentProps<typeof ChooseNumber>
+
+  beforeEach(() => {
+    props = {
+      handleGoBack: mockHandleGoBack,
+      parameter: mockIntNumberParameterData,
+      setParameter: mockSetParameter,
+    }
+    vi.clearAllMocks()
+    vi.mocked(useToaster).mockReturnValue({
+      makeSnackbar: mockMakeSnackbar,
+      makeToast: vi.fn(),
+      eatToast: vi.fn(),
+    })
+  })
+
+  it('should render text and numerical keyboard non decimal and no negative number', () => {
+    render(props)
+    expect(screen.queryByRole('button', { name: '.' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: '-' })).not.toBeInTheDocument()
+  })
+
+  it('should render text and numerical keyboard non decimal and negative number', () => {
+    const mockNegativeIntNumberParameterData = {
+      ...mockIntNumberParameterData,
+      min: -2,
+    }
+    props = { ...props, parameter: mockNegativeIntNumberParameterData }
+    render(props)
+    expect(screen.queryByRole('button', { name: '.' })).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '-' })).toBeInTheDocument()
+  })
+
+  it('should render text and numerical keyboard decimal and no negative number', () => {
+    props = { ...props, parameter: mockFloatNumberParameterData }
+    render(props)
+    expect(screen.getByRole('button', { name: '.' })).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: '-' })).not.toBeInTheDocument()
+  })
+
+  it('should render text and numerical keyboard decimal and negative number', () => {
+    const mockNegativeFloatNumberParameterData = {
+      ...mockFloatNumberParameterData,
+      min: -10.2,
+    }
+    props = { ...props, parameter: mockNegativeFloatNumberParameterData }
+    console.log(mockNegativeFloatNumberParameterData)
+    render(props)
+    expect(screen.getByRole('button', { name: '.' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '-' })).toBeInTheDocument()
+  })
+
+  it('should call mock function when tapping go back button', () => {
+    render(props)
+    fireEvent.click(screen.getAllByRole('button')[0])
+    expect(mockHandleGoBack).toHaveBeenCalled()
+  })
+
+  it('should render error message when inputting an out of range number', () => {
+    render(props)
+    const numKey = screen.getByRole('button', { name: '1' })
+    fireEvent.click(numKey)
+    fireEvent.click(numKey)
+    screen.getByText('Value must be between 1-10')
+  })
+
+  it('should call mock snack bar function when inputting an out of range number', () => {
+    render(props)
+    const numKey = screen.getByRole('button', { name: '1' })
+    fireEvent.click(numKey)
+    fireEvent.click(numKey)
+    fireEvent.click(screen.getAllByRole('button')[0])
+    expect(mockMakeSnackbar).toHaveBeenCalledWith('Value must be in range')
+  })
+})