legg til listevalidering for checkbox group (#3894)

* legg til listevalidering for checkbox group

* fjern minLegth i label

Author: sirimykland

packages/form-hooks/src/RhfCheckboxGroup/RhfCheckboxGroup.spec.tsx

@@ -5,7 +5,7 @@ import { expect } from 'vitest';
 
 import * as stories from './RhfCheckboxGroup.stories';
 
-const { Default } = composeStories(stories);
+const { Default, MedValidering } = composeStories(stories);
 
 describe('RhfCheckboxGroup', () => {
   it('skal sette verdi', async () => {
@@ -23,4 +23,23 @@ describe('RhfCheckboxGroup', () => {
     await userEvent.click(screen.getByText('Verdi 1'));
     expect(screen.getByLabelText('Verdi 1')).toBeChecked();
   });
+
+  it('skal gi feil ved ingen valgte elementer', async () => {
+    await MedValidering.run();
+    expect(screen.getByText('Dette er en checkboks med validering')).toBeInTheDocument();
+
+    const checkboxes = screen.getAllByLabelText(/Verdi /);
+
+    await userEvent.click(checkboxes[0]);
+    await userEvent.click(checkboxes[2]);
+
+    await userEvent.click(screen.getByText('Submit'));
+
+    expect(await screen.findByText('Du må velge minst ett element')).toBeInTheDocument();
+
+    await userEvent.click(checkboxes[0]);
+    await userEvent.click(checkboxes[1]);
+
+    expect(screen.getByText('Verdi 1 og 2 kan ikke velges samtidig')).toBeInTheDocument();
+  });
 });

packages/form-hooks/src/RhfCheckboxGroup/RhfCheckboxGroup.stories.tsx

@@ -10,15 +10,19 @@ const meta = {
   args: {
     isReadOnly: false,
     isEdited: false,
-    control: undefined, // This will be provided by the decorator
+    control: undefined,
+    children: [
+      <Checkbox key="verdi1" value="verdi1">
+        Verdi 1
+      </Checkbox>,
+      <Checkbox key="verdi2" value="verdi2">
+        Verdi 2
+      </Checkbox>,
+      <Checkbox key="verdi3" value="verdi3">
+        Verdi 3
+      </Checkbox>,
+    ],
   },
-  render: args => (
-    <RhfCheckboxGroup {...args}>
-      <Checkbox value="verdi1">Verdi 1</Checkbox>
-      <Checkbox value="verdi2">Verdi 2</Checkbox>
-      <Checkbox value="verdi3">Verdi 3</Checkbox>
-    </RhfCheckboxGroup>
-  ),
   decorators: rhfDecorator({ checkboxpanelpre: ['verdi1', 'verdi3'] }),
 } satisfies Meta<typeof RhfCheckboxGroup>;
 
@@ -49,3 +53,17 @@ export const ReadOnlyMedOverstyrtMarkering: Story = {
     name: 'checkboxpanelpre',
   },
 };
+
+export const MedValidering: Story = {
+  args: {
+    validate: [
+      checkedElements => (checkedElements.length < 1 ? 'Du må velge minst ett element' : undefined),
+      checkedElements =>
+        checkedElements.includes('verdi1') && checkedElements.includes('verdi2')
+          ? 'Verdi 1 og 2 kan ikke velges samtidig'
+          : undefined,
+    ],
+    label: 'Dette er en checkboks med validering',
+    name: 'checkboxpanelpre',
+  },
+};

packages/form-hooks/src/RhfCheckboxGroup/RhfCheckboxGroup.tsx

@@ -17,7 +17,7 @@ export interface CheckboxProps {
 type Props<T extends FieldValues> = {
   label?: string | ReactNode;
   description?: string;
-  validate?: ((value: string | number) => ValidationReturnType)[];
+  validate?: ((values: (string | number)[]) => ValidationReturnType)[];
   onChange?: (value: any) => void;
   isReadOnly?: boolean;
   hideLegend?: boolean;
@@ -37,10 +37,9 @@ export const RhfCheckboxGroup = <T extends FieldValues>({
   isEdited = false,
   size = 'small',
   children,
-  ...controllerProps
+  name,
+  control,
 }: Props<T>) => {
-  const { name, control } = controllerProps;
-
   const {
     formState: { errors },
   } = useFormContext();