From 53636d8558d49791cc0fb274a6364788db5a4a30 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Mon, 25 Nov 2024 14:08:14 +0000
Subject: [PATCH] add unit test for Dropdown field component

---
 .../cms/Feedback/Dropdownfield.spec.tsx       | 73 +++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/app/components/cms/Feedback/Dropdownfield.spec.tsx

diff --git a/src/app/components/cms/Feedback/Dropdownfield.spec.tsx b/src/app/components/cms/Feedback/Dropdownfield.spec.tsx
new file mode 100644
index 00000000..61b54503
--- /dev/null
+++ b/src/app/components/cms/Feedback/Dropdownfield.spec.tsx
@@ -0,0 +1,73 @@
+import { render, screen } from '@/config/test-utils'
+
+import DropdownField from './DropdownField'
+
+describe('Dropdownfield Component', () => {
+  const mockProps = {
+    label: 'What would you like to see on the dashboard in the future?',
+    helpText: 'Pick one option from the list.',
+    cleanName: 'what_would_you_like_to_see_on_the_dashboard_in_the_future',
+    choices: 'Option 1, Option 2, Option 3',
+  }
+
+  it('should render the label correctly', () => {
+    render(<DropdownField {...mockProps} />)
+
+    const labelElement = screen.getByText('What would you like to see on the dashboard in the future?')
+    expect(labelElement).toBeInTheDocument()
+  })
+
+  it('should render help text if provided', () => {
+    render(<DropdownField {...mockProps} />)
+
+    const helpTextElement = screen.getByText('Pick one option from the list.')
+    expect(helpTextElement).toBeInTheDocument()
+  })
+
+  it('should not render help text if not provided', () => {
+    render(<DropdownField {...{ ...mockProps, helpText: '' }} />)
+
+    const helpTextElement = screen.queryByText('Pick one option from the list.')
+    expect(helpTextElement).toBeNull()
+  })
+
+  it('should render the default "Choose an option" option', () => {
+    render(<DropdownField {...mockProps} />)
+
+    const defaultOption = screen.getByText('Choose an option')
+    expect(defaultOption).toBeInTheDocument()
+  })
+
+  it('should render options based on choices string with commas', () => {
+    render(<DropdownField {...mockProps} />)
+
+    const options = screen.getAllByRole('option')
+    expect(options).toHaveLength(4) // 3 options + 1 default option
+    expect(screen.getByText('Option 1')).toBeInTheDocument()
+    expect(screen.getByText('Option 2')).toBeInTheDocument()
+    expect(screen.getByText('Option 3')).toBeInTheDocument()
+  })
+
+  it('should render options based on choices string with newline', () => {
+    const propsWithNewlineChoices = {
+      ...mockProps,
+      choices: 'Option 1\r\nOption 2\r\nOption 3',
+    }
+    render(<DropdownField {...propsWithNewlineChoices} />)
+
+    const options = screen.getAllByRole('option')
+    expect(options).toHaveLength(4) // 3 options + 1 default option
+    expect(screen.getByText('Choose an option')).toBeInTheDocument()
+    expect(screen.getByText('Option 1')).toBeInTheDocument()
+    expect(screen.getByText('Option 2')).toBeInTheDocument()
+    expect(screen.getByText('Option 3')).toBeInTheDocument()
+  })
+
+  it('should correctly render the cleanName in the select input', () => {
+    render(<DropdownField {...mockProps} />)
+
+    const selectElement = screen.getByRole('combobox')
+    expect(selectElement).toHaveAttribute('name', 'what_would_you_like_to_see_on_the_dashboard_in_the_future')
+    expect(selectElement).toHaveAttribute('id', 'what_would_you_like_to_see_on_the_dashboard_in_the_future')
+  })
+})