Skip to content

Commit

Permalink
✅ [open-formulieren/open-forms#5016] Stories for referentielijsten op…
Browse files Browse the repository at this point in the history
…tions
  • Loading branch information
stevenbal committed Jan 28, 2025
1 parent 81779d0 commit 75b0595
Show file tree
Hide file tree
Showing 9 changed files with 641 additions and 0 deletions.
6 changes: 6 additions & 0 deletions .storybook/decorators.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
DEFAULT_PREFILL_ATTRIBUTES,
DEFAULT_PREFILL_PLUGINS,
DEFAULT_REGISTRATION_ATTRIBUTES,
DEFAULT_SERVICES,
DEFAULT_VALIDATOR_PLUGINS,
sleep,
} from '@/tests/sharedUtils';
Expand Down Expand Up @@ -61,6 +62,7 @@ export const BuilderContextDecorator: Decorator = (Story, context) => {
context.parameters.builder?.defaultValidatorPlugins || DEFAULT_VALIDATOR_PLUGINS;
const defaultRegistrationAttributes =
context.parameters.builder?.defaultRegistrationAttributes || DEFAULT_REGISTRATION_ATTRIBUTES;
const defaultServices = context.parameters.builder?.defaultServices || DEFAULT_SERVICES;
const defaultPrefillPlugins =
context.parameters.builder?.defaultPrefillPlugins || DEFAULT_PREFILL_PLUGINS;
const defaultPrefillAttributes =
Expand All @@ -86,6 +88,10 @@ export const BuilderContextDecorator: Decorator = (Story, context) => {
await sleep(context.parameters?.builder?.registrationAttributesDelay || 0);
return context?.args?.registrationAttributes || defaultRegistrationAttributes;
},
getServices: async () => {
await sleep(context.parameters?.builder?.servicesDelay || 0);
return context?.args?.services || defaultServices;
},
getPrefillPlugins: async () => {
await sleep(context.parameters?.builder?.prefillPluginsDelay || 0);
return context?.args?.prefillPlugins || defaultPrefillPlugins;
Expand Down
4 changes: 4 additions & 0 deletions src/components/ComponentConfiguration.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {Meta, StoryFn, StoryObj} from '@storybook/react';
import {expect, fireEvent, fn, userEvent, waitFor, within} from '@storybook/test';
import React from 'react';

import {ReferentielijstenServiceOption} from '@/components/builder/values/referentielijsten/service';
import {
CONFIDENTIALITY_LEVELS,
DEFAULT_AUTH_PLUGINS,
Expand Down Expand Up @@ -75,6 +76,7 @@ interface TemplateArgs {
validatorPlugins: ValidatorOption[];
registrationAttributes: RegistrationAttributeOption[];
prefillPlugins: PrefillPluginOption[];
services: ReferentielijstenServiceOption[];
prefillAttributes: Record<string, PrefillAttributeOption[]>;
fileTypes: Array<{value: string; label: string}>;
isNew: boolean;
Expand All @@ -91,6 +93,7 @@ const Template: StoryFn<TemplateArgs> = ({
registrationAttributes,
prefillPlugins,
prefillAttributes,
services,
supportedLanguageCodes,
fileTypes,
isNew,
Expand All @@ -107,6 +110,7 @@ const Template: StoryFn<TemplateArgs> = ({
getFormComponents={() => otherComponents}
getValidatorPlugins={async () => validatorPlugins}
getRegistrationAttributes={async () => registrationAttributes}
getServices={async () => services}
getPrefillPlugins={async () => prefillPlugins}
getPrefillAttributes={async (plugin: string) => prefillAttributes[plugin]}
getFileTypes={async () => fileTypes}
Expand Down
57 changes: 57 additions & 0 deletions src/components/builder/values/values-config.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ import {Meta, StoryObj} from '@storybook/react';
import {expect, fireEvent, fn, userEvent, waitFor, within} from '@storybook/test';
import {Form, Formik} from 'formik';

import selectboxes from '@/registry/selectboxes';
import {BuilderContextDecorator} from '@/sb-decorators';
import {withFormik} from '@/sb-decorators';
import {DEFAULT_SERVICES} from '@/tests/sharedUtils';

import ValuesConfig from './values-config';

Expand Down Expand Up @@ -300,3 +303,57 @@ export const SelectVariable: SelectStory = {
},
},
};

export const SelectReferentielijsten: SelectStory = {
...Select,

decorators: [withFormik, BuilderContextDecorator],
parameters: {
formik: {
initialValues: {
openForms: {
dataSrc: 'referentielijsten',
itemsExpression: {code: 'table1', service: 'referentielijsten-api'},
},
data: {},
},
},
builder: {enableContext: true},
},
};

export const SelectboxesReferentielijsten: SelectboxesStory = {
...SelectBoxes,

decorators: [withFormik, BuilderContextDecorator],
parameters: {
formik: {
initialValues: {
openForms: {
dataSrc: 'referentielijsten',
itemsExpression: {code: 'table1', service: 'referentielijsten-api'},
},
data: {},
},
},
builder: {enableContext: true},
},
};

export const RadioReferentielijsten: RadioStory = {
...Radio,

decorators: [withFormik, BuilderContextDecorator],
parameters: {
formik: {
initialValues: {
openForms: {
dataSrc: 'referentielijsten',
itemsExpression: {code: 'table1', service: 'referentielijsten-api'},
},
data: {},
},
},
builder: {enableContext: true},
},
};
158 changes: 158 additions & 0 deletions src/registry/radio/radio-referentielijsten.stories.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
import {Meta, StoryObj} from '@storybook/react';
import {expect, fn, userEvent, within} from '@storybook/test';

import ComponentEditForm from '@/components/ComponentEditForm';
import {BuilderContextDecorator} from '@/sb-decorators';
import {rsSelect} from '@/utils/storybookTestHelpers';

export default {
title: 'Builder components/Radio/Referentielijsten',
component: ComponentEditForm,
decorators: [BuilderContextDecorator],
parameters: {
builder: {enableContext: true},
},
args: {
isNew: true,
component: {
id: 'wqimsadk',
type: 'radio',
key: 'radio',
label: 'A radio field',
dataSrc: 'values',
dataType: 'string',
openForms: {
dataSrc: 'manual',
translations: {},
},
data: {values: [{value: '', label: ''}]},
values: [{value: '', label: ''}],
defaultValue: '',
},
onCancel: fn(),
onRemove: fn(),
onSubmit: fn(),
builderInfo: {
title: 'Select',
icon: 'plus-square',
group: 'basic',
weight: 60,
schema: {},
},
},
} as Meta<typeof ComponentEditForm>;

type Story = StoryObj<typeof ComponentEditForm>;

export const StoreValuesInComponent: Story = {
name: 'On save: store proper values in the component',
play: async ({canvasElement, step, args}) => {
const canvas = within(canvasElement);

await step('Fill in options', async () => {
const dataSourceInput = canvas.getByLabelText('Data source');
await rsSelect(dataSourceInput, 'Referentielijsten API');

const serviceInput = canvas.getByLabelText('Referentielijsten service');
await rsSelect(serviceInput, 'Referentielijsten');

const codeInput = canvas.getByLabelText('Referentielijsten table code');
await userEvent.type(codeInput, 'tabel1');

await userEvent.click(canvas.getByRole('button', {name: 'Save'}));

expect(args.onSubmit).toHaveBeenCalledWith(
expect.objectContaining({
openForms: {
code: 'tabel1',
dataSrc: 'referentielijsten',
service: 'referentielijsten',
translations: {},
},
type: 'radio',
})
);
});
},
};

export const SwitchToVariableResetOptions: Story = {
name: 'On switch from referentielijsten to variable: reset the options',
play: async ({canvasElement, step, args}) => {
const canvas = within(canvasElement);

await step('Fill in options', async () => {
const dataSourceInput = canvas.getByLabelText('Data source');
await rsSelect(dataSourceInput, 'Referentielijsten API');

const serviceInput = canvas.getByLabelText('Referentielijsten service');
await rsSelect(serviceInput, 'Referentielijsten');

const codeInput = canvas.getByLabelText('Referentielijsten table code');
await userEvent.type(codeInput, 'tabel1');

await rsSelect(dataSourceInput, 'From variable');

const itemsExpressionInput = canvas.getByTestId('jsonEdit');
await userEvent.clear(itemsExpressionInput);
await userEvent.type(itemsExpressionInput, '"foo"');

await userEvent.click(canvas.getByRole('button', {name: 'Save'}));

expect(args.onSubmit).toHaveBeenCalledWith(
expect.objectContaining({
openForms: {
dataSrc: 'variable',
itemsExpression: 'foo',
translations: {},
},
type: 'radio',
})
);
});
},
};

export const SwitchToManualResetOptions: Story = {
name: 'On switch from referentielijsten to manual: reset the options',
play: async ({canvasElement, step, args}) => {
const canvas = within(canvasElement);

await step('Fill in options', async () => {
const dataSourceInput = canvas.getByLabelText('Data source');
await rsSelect(dataSourceInput, 'Referentielijsten API');

const serviceInput = canvas.getByLabelText('Referentielijsten service');
await rsSelect(serviceInput, 'Referentielijsten');

const codeInput = canvas.getByLabelText('Referentielijsten table code');
await userEvent.type(codeInput, 'tabel1');

await rsSelect(dataSourceInput, 'Manually fill in');

const labelInput = canvas.getByTestId('input-values[0].label');
await userEvent.type(labelInput, 'Foo');

await userEvent.click(canvas.getByRole('button', {name: 'Save'}));

expect(args.onSubmit).toHaveBeenCalledWith(
expect.objectContaining({
openForms: {
dataSrc: 'manual',
translations: {},
},
type: 'radio',
values: [
{
label: 'Foo',
value: 'foo',
openForms: {
translations: {},
},
},
],
})
);
});
},
};
Loading

0 comments on commit 75b0595

Please sign in to comment.