-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ad41e8b
commit fee0221
Showing
18 changed files
with
669 additions
and
651 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
66 changes: 66 additions & 0 deletions
66
src/features/search/components/PriceInputController/PriceInputController.native.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import React from 'react' | ||
| import { useForm, ErrorOption } from 'react-hook-form' | ||
|
|
||
| import { render, screen, userEvent } from 'tests/utils' | ||
|
|
||
| import { PriceInputController } from './PriceInputController' | ||
|
|
||
| type PriceForm = { | ||
| price: string | ||
| } | ||
|
|
||
| const user = userEvent.setup() | ||
|
|
||
| describe('<PriceInputController />', () => { | ||
| it('should not show error when form input is valid', () => { | ||
| renderPriceInputController({}) | ||
|
|
||
| expect(screen.queryByText('error')).not.toBeOnTheScreen() | ||
| }) | ||
|
|
||
| it('should show error when form input is invalid', () => { | ||
| renderPriceInputController({ | ||
| error: { type: 'custom', message: 'error' }, | ||
| }) | ||
|
|
||
| expect(screen.getByText('error')).toBeOnTheScreen() | ||
| }) | ||
|
|
||
| it('should display custom error message when error is set', async () => { | ||
| renderPriceInputController({ | ||
| error: { type: 'custom', message: 'Prix invalide' }, | ||
| }) | ||
|
|
||
| const input = screen.getByPlaceholderText('Prix') | ||
| await user.type(input, 'abc') | ||
|
|
||
| expect(screen.getByText('Prix invalide')).toBeOnTheScreen() | ||
| }) | ||
| }) | ||
|
|
||
| const renderPriceInputController = ({ | ||
| error, | ||
| isDisabled, | ||
| }: { | ||
| error?: ErrorOption | ||
| isDisabled?: boolean | ||
| }) => { | ||
| const PriceForm = () => { | ||
| const { control, setError } = useForm<PriceForm>({ | ||
| defaultValues: { price: '' }, | ||
| }) | ||
|
|
||
| error && setError('price', error) | ||
| return ( | ||
| <PriceInputController | ||
| control={control} | ||
| name="price" | ||
| label="Prix" | ||
| placeholder="Prix" | ||
| accessibilityId="price-input" | ||
| isDisabled={isDisabled} | ||
| /> | ||
| ) | ||
| } | ||
| render(<PriceForm />) | ||
| } |
64 changes: 64 additions & 0 deletions
64
src/features/search/components/PriceInputController/PriceInputController.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import React, { PropsWithChildren, ReactElement } from 'react' | ||
| import { Control, Controller, FieldPath, FieldValues } from 'react-hook-form' | ||
|
|
||
| import { InputError } from 'ui/components/inputs/InputError' | ||
| import { TextInput } from 'ui/components/inputs/TextInput' | ||
| import { getSpacing } from 'ui/theme/spacing' | ||
|
|
||
| interface Props<TFieldValues extends FieldValues, TName> | ||
| extends Omit<React.ComponentProps<typeof TextInput>, 'value' | 'onChangeText'> { | ||
| name: TName | ||
| control: Control<TFieldValues> | ||
| label: string | ||
| placeholder?: string | ||
| rightLabel?: string | ||
| isDisabled?: boolean | ||
| accessibilityId: string | ||
| } | ||
|
|
||
| export const PriceInputController = < | ||
| TFieldValues extends FieldValues = FieldValues, | ||
| TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, | ||
| >({ | ||
| name, | ||
| control, | ||
| label, | ||
| placeholder, | ||
| rightLabel, | ||
| isDisabled, | ||
| accessibilityId, | ||
| ...textInputProps | ||
| }: PropsWithChildren<Props<TFieldValues, TName>>): ReactElement => { | ||
| return ( | ||
| <Controller | ||
| control={control} | ||
| name={name} | ||
| render={({ field: { onChange, onBlur, value }, fieldState: { error } }) => ( | ||
| <React.Fragment> | ||
| <TextInput | ||
| value={value} | ||
| onChangeText={onChange} | ||
| onBlur={onBlur} | ||
| label={label} | ||
| placeholder={placeholder} | ||
| rightLabel={rightLabel} | ||
| disabled={isDisabled} | ||
| isError={!!error && value.length > 0} | ||
| textContentType="none" | ||
| accessibilityDescribedBy={accessibilityId} | ||
| keyboardType="numeric" | ||
| autoComplete="off" | ||
| autoCapitalize="none" | ||
| {...textInputProps} | ||
| /> | ||
| <InputError | ||
| visible={!!error} | ||
| messageId={error?.message} | ||
| relatedInputId={accessibilityId} | ||
| numberOfSpacesTop={getSpacing(0.5)} | ||
| /> | ||
| </React.Fragment> | ||
| )} | ||
| /> | ||
| ) | ||
| } |
Oops, something went wrong.