Skip to content

Commit

Permalink
👌 [open-formulieren/open-forms#4420] PR feedback
Browse files Browse the repository at this point in the history 
* use prefix for AddressNL SubcomponentValidation and useManageValidatorsTranslations
* remove unnecessary waitFor blocks in AddressNL stories
  • Loading branch information
@stevenbal
stevenbal committed Aug 16, 2024
1 parent 4950e7d commit d6feb8a
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 47 deletions.
5 changes: 3 additions & 2 deletions src/components/builder/validate/i18n.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,11 @@ import {DataMap, Panel, Tab, TabList, TabPanel, Tabs, TextField} from '../../for

export function useManageValidatorsTranslations<S extends SchemaWithValidation>(
keys: PossibleValidatorErrorKeys<S>[],
field: string = 'translatedErrors'
prefix: string = ''
): void {
const fieldName = `${prefix}${prefix ? '.' : ''}translatedErrors`;
const {supportedLanguageCodes} = useContext(BuilderContext);
const [{value}, , {setValue}] = useField<S['translatedErrors']>(field);
const [{value}, , {setValue}] = useField<S['translatedErrors']>(fieldName);

useEffect(() => {
const newValue = value
Expand Down
66 changes: 28 additions & 38 deletions src/registry/addressNL/edit.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,11 @@ export const PostcodeValidationTabWithoutConfiguration: Story = {
await step('Navigate to validation tab and open Postcode validation', async () => {
await userEvent.click(canvas.getByRole('link', {name: 'Validation'}));
await userEvent.click(canvas.getAllByText('Postcode')[0]);
await waitFor(async () => {
expect(await canvas.findByText('Regular expression for postcode')).toBeVisible();
expect(await canvas.findByText('NL')).toBeVisible();
expect(await canvas.findByText('EN')).toBeVisible();
expect(await canvas.findByText('Error code')).toBeVisible();
expect(await canvas.findByDisplayValue('pattern')).toBeVisible();
});
expect(await canvas.findByText('Regular expression for postcode')).toBeVisible();
expect(await canvas.findByText('NL')).toBeVisible();
expect(await canvas.findByText('EN')).toBeVisible();
expect(await canvas.findByText('Error code')).toBeVisible();
expect(await canvas.findByDisplayValue('pattern')).toBeVisible();
});
},
};
Expand All @@ -54,13 +52,11 @@ export const CityValidationTabWithoutConfiguration: Story = {
await step('Navigate to validation tab and open City validation', async () => {
await userEvent.click(canvas.getByRole('link', {name: 'Validation'}));
await userEvent.click(canvas.getAllByText('City')[0]);
await waitFor(async () => {
expect(await canvas.findByText('Regular expression for city')).toBeVisible();
expect(await canvas.findByText('NL')).toBeVisible();
expect(await canvas.findByText('EN')).toBeVisible();
expect(await canvas.findByText('Error code')).toBeVisible();
expect(await canvas.findByDisplayValue('pattern')).toBeVisible();
});
expect(await canvas.findByText('Regular expression for city')).toBeVisible();
expect(await canvas.findByText('NL')).toBeVisible();
expect(await canvas.findByText('EN')).toBeVisible();
expect(await canvas.findByText('Error code')).toBeVisible();
expect(await canvas.findByDisplayValue('pattern')).toBeVisible();
});
},
};
Expand Down Expand Up @@ -94,20 +90,18 @@ export const PostcodeValidationTabWithConfiguration: Story = {
await step('Navigate to validation tab and open Postcode validation', async () => {
await userEvent.click(canvas.getByRole('link', {name: 'Validation'}));
await userEvent.click(canvas.getAllByText('Postcode')[0]);
await waitFor(async () => {
const patternInput = canvas.getByLabelText(
'Regular expression for postcode'
) as HTMLInputElement;
expect(patternInput).toBeVisible();
expect(patternInput.value).toBe('1017 [A-Za-z]{2}');
const patternInput = canvas.getByLabelText(
'Regular expression for postcode'
) as HTMLInputElement;
expect(patternInput).toBeVisible();
expect(patternInput.value).toBe('1017 [A-Za-z]{2}');

expect(await canvas.findByDisplayValue('pattern')).toBeVisible();
expect(await canvas.findByDisplayValue('Postcode moet 1017 XX zijn')).toBeVisible();
expect(await canvas.findByDisplayValue('pattern')).toBeVisible();
expect(await canvas.findByDisplayValue('Postcode moet 1017 XX zijn')).toBeVisible();

await userEvent.click(await canvas.findByText('EN'));
expect(await canvas.findByDisplayValue('pattern')).toBeVisible();
expect(await canvas.findByDisplayValue('Postal code must be 1017 XX')).toBeVisible();
});
await userEvent.click(await canvas.findByText('EN'));
expect(await canvas.findByDisplayValue('pattern')).toBeVisible();
expect(await canvas.findByDisplayValue('Postal code must be 1017 XX')).toBeVisible();
});
},
};
Expand Down Expand Up @@ -141,20 +135,16 @@ export const CityValidationTabWithConfiguration: Story = {
await step('Navigate to validation tab and open City validation', async () => {
await userEvent.click(canvas.getByRole('link', {name: 'Validation'}));
await userEvent.click(canvas.getAllByText('City')[0]);
await waitFor(async () => {
const patternInput = canvas.getByLabelText(
'Regular expression for city'
) as HTMLInputElement;
expect(patternInput).toBeVisible();
expect(patternInput.value).toBe('Amsterdam');
const patternInput = canvas.getByLabelText('Regular expression for city') as HTMLInputElement;
expect(patternInput).toBeVisible();
expect(patternInput.value).toBe('Amsterdam');

expect(await canvas.findByDisplayValue('pattern')).toBeVisible();
expect(await canvas.findByDisplayValue('De stad moet Amsterdam zijn')).toBeVisible();
expect(await canvas.findByDisplayValue('pattern')).toBeVisible();
expect(await canvas.findByDisplayValue('De stad moet Amsterdam zijn')).toBeVisible();

await userEvent.click(await canvas.findByText('EN'));
expect(await canvas.findByDisplayValue('pattern')).toBeVisible();
expect(await canvas.findByDisplayValue('The city must be Amsterdam')).toBeVisible();
});
await userEvent.click(await canvas.findByText('EN'));
expect(await canvas.findByDisplayValue('pattern')).toBeVisible();
expect(await canvas.findByDisplayValue('The city must be Amsterdam')).toBeVisible();
});
},
};
15 changes: 8 additions & 7 deletions src/registry/addressNL/edit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,15 @@ type PostcodeSchema = AddressSubComponents['postcode'];
type CitySchema = AddressSubComponents['city'];

export interface SubcomponentValidationProps {
prefix: string;
component: keyof AddressSubComponents;
label: React.ReactNode;
tooltip: string;
placeholder: string;
}

export const SubcomponentValidation: React.FC<SubcomponentValidationProps> = ({
prefix,
component,
label,
tooltip,
Expand All @@ -54,7 +56,7 @@ export const SubcomponentValidation: React.FC<SubcomponentValidationProps> = ({
return (
<>
<TextField
name={`openForms.components.${component}.validate.pattern`}
name={`${prefix}.${component}.validate.pattern`}
label={label}
tooltip={tooltip}
placeholder={placeholder}
Expand All @@ -69,7 +71,7 @@ export const SubcomponentValidation: React.FC<SubcomponentValidationProps> = ({
{supportedLanguageCodes.map(code => (
<TabPanel key={code}>
<DataMap
name={`openForms.components.${component}.translatedErrors.${code}`}
name={`${prefix}.${component}.translatedErrors.${code}`}
keyLabel={
<FormattedMessage
description="Label for translation of validation error code"
Expand Down Expand Up @@ -154,12 +156,9 @@ const EditForm: EditFormDefinition<AddressNLComponentSchema> = () => {

Validate.useManageValidatorsTranslations<PostcodeSchema>(
['pattern'],

Check failure on line 158 in src/registry/addressNL/edit.tsx

View workflow job for this annotation

GitHub Actions / Create 'production' build 

Type 'string' is not assignable to type 'never'.
`openForms.components.postcode.translatedErrors`
);
Validate.useManageValidatorsTranslations<CitySchema>(
['pattern'],
`openForms.components.city.translatedErrors`
`openForms.components.postcode`
);
Validate.useManageValidatorsTranslations<CitySchema>(['pattern'], `openForms.components.city`);

Check failure on line 161 in src/registry/addressNL/edit.tsx

View workflow job for this annotation

GitHub Actions / Create 'production' build 

Type 'string' is not assignable to type 'never'.

return (
<Tabs>
Expand Down Expand Up @@ -225,6 +224,7 @@ const EditForm: EditFormDefinition<AddressNLComponentSchema> = () => {
initialCollapsed
>
<SubcomponentValidation
prefix="openForms.components"
component="postcode"
label={
<FormattedMessage
Expand Down Expand Up @@ -260,6 +260,7 @@ const EditForm: EditFormDefinition<AddressNLComponentSchema> = () => {
initialCollapsed
>
<SubcomponentValidation
prefix="openForms.components"
component="city"
label={
<FormattedMessage
Expand Down

0 comments on commit d6feb8a

Please sign in to comment.