From 0c73ad69948121e6ad54c91f9069cfe79efcc664 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Tue, 17 Dec 2024 16:43:06 +0100
Subject: [PATCH] test: add test for empty option

---
 .../ModelSingleSelect.test.tsx                | 99 ++++++++-----------
 1 file changed, 40 insertions(+), 59 deletions(-)

diff --git a/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelect.test.tsx b/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelect.test.tsx
index b6a9276d..5f790021 100644
--- a/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelect.test.tsx
+++ b/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelect.test.tsx
@@ -2,8 +2,9 @@
 import { render, fireEvent, waitFor } from '@testing-library/react'
 import React from 'react'
 import { ComponentWithProvider } from '../../../testUtils/TestComponentWithRouter'
+import { PlainResourceQuery } from '../../../types'
 import { ModelSingleSelect } from './ModelSingleSelect'
-import { PlainResourceQuery, ResultQuery } from '../../../types'
+
 const categoryCombos = [
     {
         displayName: 'Births',
@@ -152,66 +153,43 @@ describe('<CategoryComboSelect />', () => {
         // expect(noneOption).toBeInTheDocument()
     })
 
-    // it('should add an "empty" option when not required', async () => {
-    //     const onChange = jest.fn()
-    //     const dataResolvers = {
-    //         categoryCombos: categoryCombosResolver,
-    //     }
-
-    //     const result = render(
-    //         <ComponentWithProvider dataForCustomProvider={dataResolvers}>
-    //             <CategoryComboSelect onChange={onChange} />
-    //         </ComponentWithProvider>
-    //     )
-
-    //     const selectInput = result.getByTestId('dhis2-uicore-select-input')
-    //     fireEvent.click(selectInput)
-
-    //     const noneLabel = await result.findByText('None', {
-    //         selector: '[data-test="dhis2-uicore-singleselectoption"]',
-    //     })
-    //     const selectedLabel = await result.findByText(/No value/, {
-    //         selector: '[data-test="dhis2-uicore-singleselectoption"]',
-    //     })
-
-    //     expect(noneLabel).toBeInTheDocument()
-    //     expect(selectedLabel).toBeInTheDocument()
-    //     // We'd find a single option if we didn't wait for this. The test would
-    //     // subsequently fail as there'd be exactly one categoryCombo option
-    //     await waitFor(() => {
-    //         const allOptions = result.getAllByTestId(
-    //             'dhis2-uicore-singleselectoption'
-    //         )
-
-    //         expect(allOptions).toHaveLength(categoryCombos.length + 2)
-    //     })
-    // })
+    it('should add an "empty" option when showNoValueOption is true', async () => {
+        const onChange = jest.fn()
+        const dataResolvers = {
+            categoryCombos: categoryCombosResolver,
+        }
 
-    // it('should not add an "empty" option when not required', async () => {
-    //     const onChange = jest.fn()
-    //     const dataResolvers = {
-    //         categoryCombos: categoryCombosResolver,
-    //     }
+        const result = render(
+            <ComponentWithProvider dataForCustomProvider={dataResolvers}>
+                <ModelSingleSelect
+                    onChange={onChange}
+                    query={{ resource: 'categoryCombos' }}
+                    showNoValueOption
+                    selected={categoryCombos[0]}
+                />
+            </ComponentWithProvider>
+        )
 
-    //     const result = render(
-    //         <ComponentWithProvider dataForCustomProvider={dataResolvers}>
-    //             <CategoryComboSelect required onChange={onChange} />
-    //         </ComponentWithProvider>
-    //     )
+        const selectInput = result.getByTestId('dhis2-uicore-select-input')
+        fireEvent.click(selectInput)
 
-    //     const selectInput = result.getByTestId('dhis2-uicore-select-input')
-    //     fireEvent.click(selectInput)
+        await waitFor(() => {
+            const allOptions = result.getAllByTestId(
+                'dhis2-uicore-singleselectoption'
+            )
+            expect(allOptions[0]).toHaveTextContent('No value')
+        })
 
-    //     // We'd find a single option if we didn't wait for this. The test would
-    //     // subsequently fail as there'd be exactly one categoryCombo option
-    //     await waitFor(() => {
-    //         const allOptions = result.getAllByTestId(
-    //             'dhis2-uicore-singleselectoption'
-    //         )
+        const noValueOption = await result.findByText(/No value/, {
+            selector: '[data-test="dhis2-uicore-singleselectoption"]',
+        })
+        fireEvent.click(noValueOption)
 
-    //         expect(allOptions).toHaveLength(categoryCombos.length + 1)
-    //     })
-    // })
+        await waitFor(() => {
+            expect(onChange).toHaveBeenCalledTimes(1)
+            expect(onChange).toHaveBeenCalledWith(undefined)
+        })
+    })
 
     it('should display the selected option, even when not loaded', async () => {
         const onChange = jest.fn()
@@ -233,9 +211,12 @@ describe('<CategoryComboSelect />', () => {
             </ComponentWithProvider>
         )
 
-        const selectedLabel = await result.findByText(selectedNotInData.displayName, {
-            selector: '.root',
-        })
+        const selectedLabel = await result.findByText(
+            selectedNotInData.displayName,
+            {
+                selector: '.root',
+            }
+        )
         expect(selectedLabel).toBeTruthy()
     })