From 8ce241d1929c8cff6fac4a5d5abf71da41059e7e Mon Sep 17 00:00:00 2001
From: Vincent <vdegraaf.vincent@gmail.com>
Date: Thu, 13 Mar 2025 13:06:05 +0100
Subject: [PATCH] Refactor RadioGroup counter

---
 src/components/Accordion/Accordion.tsx        |  2 +-
 .../components/FilterForm/FilterForm.tsx      |  4 ++--
 .../FilterForm/__tests__/FilterForm.test.tsx  | 24 +++++++++++++------
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 3849f492bf..d0c76c8f5b 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -9,7 +9,7 @@ import { Button, ButtonContent, Content, Wrapper, Border } from './styled'
 type Props = {
   id: string
   title: string
-  count: number | string
+  count?: number | string
   onToggle?: (open: boolean) => void
   children: React.ReactNode
 }
diff --git a/src/signals/incident-management/components/FilterForm/FilterForm.tsx b/src/signals/incident-management/components/FilterForm/FilterForm.tsx
index ac80576ebf..6e836dd875 100644
--- a/src/signals/incident-management/components/FilterForm/FilterForm.tsx
+++ b/src/signals/incident-management/components/FilterForm/FilterForm.tsx
@@ -555,7 +555,7 @@ const FilterForm = ({
             <Accordion
               id="feedback"
               title="Feedback"
-              count={state.options.feedback?.length ?? ''}
+              count={state.options.feedback && '1'}
             >
               <RadioGroup
                 defaultValue={state.options.feedback}
@@ -595,7 +595,7 @@ const FilterForm = ({
             <Accordion
               id="punctuality"
               title="Doorlooptijd"
-              count={state.options.punctuality?.length ?? ''}
+              count={state.options.punctuality && '1'}
             >
               <RadioGroup
                 defaultValue={state.options.punctuality}
diff --git a/src/signals/incident-management/components/FilterForm/__tests__/FilterForm.test.tsx b/src/signals/incident-management/components/FilterForm/__tests__/FilterForm.test.tsx
index 5066f33073..e77efc49b2 100644
--- a/src/signals/incident-management/components/FilterForm/__tests__/FilterForm.test.tsx
+++ b/src/signals/incident-management/components/FilterForm/__tests__/FilterForm.test.tsx
@@ -108,9 +108,7 @@ const withContext = (
   )
 }
 
-// TODO: these tests broke when updating MSW, should be fixed
-// eslint-disable-next-line jest/no-disabled-tests
-describe.skip('signals/incident-management/components/FilterForm', () => {
+describe('signals/incident-management/components/FilterForm', () => {
   beforeEach(() => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -376,10 +374,20 @@ describe.skip('signals/incident-management/components/FilterForm', () => {
 
   it('should render a list of punctuality options', () => {
     const { container } = render(withContext(<FilterForm {...formProps} />))
+    const node = container.querySelectorAll(
+      'input[type="radio"][name="punctuality"]'
+    )
 
-    expect(
-      container.querySelectorAll('input[type="radio"][name="punctuality"]')
-    ).toHaveLength(dataLists.punctuality.length + 1) // by default, a radio button with an empty value is rendered
+    expect(node).toHaveLength(dataLists.punctuality.length + 1) // by default, a radio button with an empty value is rendered
+
+    const test2 = screen.getByLabelText('Binnen de afhandeltermijn')
+
+    userEvent.click(test2)
+
+    // The radioGroup counter shows (1) when an option is selected
+    const punctualityCounter = screen.getByText(/(1)/)
+
+    expect(punctualityCounter).toBeInTheDocument()
   })
 
   it('should render a list of source options', () => {
@@ -576,7 +584,9 @@ describe.skip('signals/incident-management/components/FilterForm', () => {
     })
   })
 
-  describe('assigned_user_email', () => {
+  // TODO: these tests broke when updating MSW, should be fixed
+  // eslint-disable-next-line jest/no-disabled-tests
+  describe.skip('assigned_user_email', () => {
     const label = /toegewezen aan/i
     const notAssignedLabel = 'Niet toegewezen'
     const submitLabel = 'Filter'