-
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.
Browse files
Browse the repository at this point in the history
…7446) * (PC-33482) feat(NC): create priceSchema * (PC-33482) feat(NC): create formatCurrencyFromCentsWithoutCurrenySymbol * (PC-33482) feat(NC): remove useless tests in formatCurrencyFromCents * (PC-33482) feat(NC): create PriceInputController * (PC-33482) feat(NC): update PriceModal to use new currency * (PC-33482) feat(NC): update Price and SearchFilter * (PC-33482) feat(NC): use it instead test in priceSchema tests * (PC-33482) feat(NC): change after review
- Loading branch information
1 parent
3926630
commit 1ff7dcb
Showing
19 changed files
with
697 additions
and
653 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.