test: add tests for FieldRenderer to validate select field rendering and option handling

Author: BryanttV

src/field-renderer/tests/FieldRenderer.test.jsx

@@ -348,4 +348,135 @@ describe('FieldRendererTests', () => {
     // Note: Select fields don't show help text in the current implementation
     // This test documents the current behavior
   });
+
+  it('should render select field with options as object format', () => {
+    const fieldData = {
+      type: 'select',
+      label: 'Favorite Language',
+      name: 'favorite-language-field',
+      options: {
+        '': '---------',
+        python: 'Python',
+        javascript: 'JavaScript',
+        java: 'Java',
+        go: 'Go',
+      },
+    };
+
+    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const select = container.querySelector('select#favorite-language-field');
+    const label = container.querySelector('label');
+
+    expect(select.type).toEqual('select-one');
+    expect(label.textContent).toContain(fieldData.label);
+
+    // Verify all options are rendered
+    const options = select.querySelectorAll('option');
+    expect(options.length).toBeGreaterThan(0);
+
+    // Check if specific options exist
+    const pythonOption = Array.from(options).find((opt) => opt.value === 'python');
+    expect(pythonOption).toBeTruthy();
+    expect(pythonOption.textContent).toEqual('Python');
+
+    const javascriptOption = Array.from(options).find((opt) => opt.value === 'javascript');
+    expect(javascriptOption).toBeTruthy();
+    expect(javascriptOption.textContent).toEqual('JavaScript');
+  });
+
+  it('should handle selection change with object format options', () => {
+    const fieldData = {
+      type: 'select',
+      label: 'Favorite Language',
+      name: 'favorite-language-field',
+      options: {
+        '': '---------',
+        python: 'Python',
+        javascript: 'JavaScript',
+        java: 'Java',
+        go: 'Go',
+      },
+    };
+
+    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const select = container.querySelector('select#favorite-language-field');
+
+    fireEvent.change(select, { target: { value: 'python' } });
+    expect(value).toEqual('python');
+
+    fireEvent.change(select, { target: { value: 'javascript' } });
+    expect(value).toEqual('javascript');
+  });
+
+  it('should render all options correctly from object format', () => {
+    const fieldData = {
+      type: 'select',
+      label: 'Programming Language',
+      name: 'language-field',
+      options: {
+        '': '---------',
+        python: 'Python',
+        javascript: 'JavaScript',
+        java: 'Java',
+        go: 'Go',
+      },
+    };
+
+    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const select = container.querySelector('select#language-field');
+    const options = select.querySelectorAll('option');
+
+    // Should have default option + 5 from object (including empty string)
+    const optionValues = Array.from(options).map((opt) => opt.value);
+    const optionLabels = Array.from(options).map((opt) => opt.textContent);
+
+    // Check that all expected values are present
+    expect(optionValues).toContain('python');
+    expect(optionValues).toContain('javascript');
+    expect(optionValues).toContain('java');
+    expect(optionValues).toContain('go');
+
+    // Check that all expected labels are present
+    expect(optionLabels).toContain('Python');
+    expect(optionLabels).toContain('JavaScript');
+    expect(optionLabels).toContain('Java');
+    expect(optionLabels).toContain('Go');
+  });
+
+  it('should handle select field with array format options (backwards compatibility)', () => {
+    const fieldData = {
+      type: 'select',
+      label: 'Year',
+      name: 'year-field',
+      options: [
+        ['2020', '2020'],
+        ['2021', '2021'],
+        ['2022', '2022'],
+      ],
+    };
+
+    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const select = container.querySelector('select#year-field');
+
+    fireEvent.change(select, { target: { value: '2021' } });
+    expect(value).toEqual('2021');
+
+    // Verify options are rendered correctly
+    const options = select.querySelectorAll('option');
+    const yearOption = Array.from(options).find((opt) => opt.value === '2021');
+    expect(yearOption).toBeTruthy();
+    expect(yearOption.textContent).toEqual('2021');
+  });
+
+  it('should return null if options is not an array or object', () => {
+    const fieldData = {
+      type: 'select',
+      label: 'Invalid Options',
+      name: 'invalid-field',
+      options: 'invalid-string',
+    };
+
+    const { container } = render(<FieldRenderer fieldData={fieldData} onChangeHandler={() => {}} />);
+    expect(container.innerHTML).toEqual('');
+  });
 });