Added unit Tests for form field components

jest.config.js

@@ -7,5 +7,9 @@ module.exports = {
     '^.+\\.(t|j)sx?$': 'ts-jest'
   },
   setupFilesAfterEnv: ['<rootDir>/packages/react-sdk-components/tests/setupTests.js'],
-  coverageDirectory: 'tests/coverage'
+  moduleNameMapper: {
+    '\\.css$': 'identity-obj-proxy' // Mock CSS imports
+  },
+  coverageDirectory: 'tests/coverage',
+  watchman: false
 };

package.json

@@ -98,7 +98,6 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-sonarjs": "^3.0.5",
-    "typescript-eslint": "^8.45.0",
     "html-webpack-plugin": "^5.6.4",
     "http-server": "^14.1.1",
     "istanbul": "^0.4.5",
@@ -119,6 +118,7 @@
     "ts-jest": "^29.4.1",
     "ts-loader": "^9.5.2",
     "typescript": "^5.9.2",
+    "typescript-eslint": "^8.45.0",
     "webpack": "^5.101.2",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.2"

packages/react-sdk-components/src/components/field/AutoComplete/AutoComplete.tsx

@@ -71,7 +71,8 @@ export default function AutoComplete(props: AutoCompleteProps) {
     status,
     helperText,
     hideLabel,
-    onRecordChange
+    onRecordChange,
+    disabled
   } = props;
 
   const context = getPConnect().getContextName();
@@ -210,6 +211,7 @@ export default function AutoComplete(props: AutoCompleteProps) {
           required={required}
           error={status === 'error'}
           label={label}
+          disabled={disabled}
           data-test-id={testId}
         />
       )}

packages/react-sdk-components/src/components/field/Checkbox/Checkbox.tsx

@@ -221,7 +221,7 @@ export default function CheckboxComponent(props: CheckboxProps) {
               onBlur={() => {
                 thePConn.getValidationApi().validate(selectedvalues, selectionList);
               }}
-              data-testid={`${testId}:${element.value}`}
+              data-test-id={`${testId}:${element.value}`}
             />
           }
           key={index}

packages/react-sdk-components/src/components/field/DateTime/DateTime.tsx

@@ -63,7 +63,7 @@ export default function DateTime(props: DateTimeProps) {
   const testProps: any = { 'data-test-id': testId };
 
   const handleChange = (date) => {
-    const timeZoneDateTime = (dayjs as any).tz(date.format('YYYY-MM-DDTHH:mm:ss'), timezone);
+    const timeZoneDateTime = (dayjs as any).tz(date?.format('YYYY-MM-DDTHH:mm:ss'), timezone);
     const changeValue = timeZoneDateTime && timeZoneDateTime.isValid() ? timeZoneDateTime.toISOString() : '';
     setDateValue(timeZoneDateTime);
     handleEvent(actions, 'changeNblur', propName, changeValue);

packages/react-sdk-components/src/components/field/RadioButtons/RadioButtons.tsx

@@ -44,7 +44,8 @@ export default function RadioButtons(props: RadioButtonsProps) {
     datasource,
     imagePosition,
     imageSize,
-    showImageDescription
+    showImageDescription,
+    disabled
   } = props;
   const [theSelectedButton, setSelectedButton] = useState(value);
 
@@ -147,7 +148,7 @@ export default function RadioButtons(props: RadioButtonsProps) {
                 localePath,
                 thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
               )}
-              control={<Radio key={theOption.key} color='primary' disabled={readOnly} />}
+              control={<Radio key={theOption.key} color='primary' disabled={disabled || readOnly} />}
             />
           );
         })}

packages/react-sdk-components/tests/unit/components/forms/Autocomplete/index.test.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import AutoComplete from '../../../../../src/components/field/AutoComplete';
+import TextInput from '../../../../../src/components/field/TextInput';
+import handleEvent from '../../../../../src/components/helpers/event-utils';
+
+jest.mock('../../../../../src/components/helpers/event-utils');
+jest.mock('../../../../../src/components/helpers/utils', () => ({
+  getDataPage: jest.fn(),
+  getOptionList: jest.fn((value) => {
+    return value.datasource;
+  })
+}));
+jest.mock('../../../../../src/bridge/helpers/sdk_component_map', () => ({
+  getComponentFromMap: jest.fn(() => require('../FieldValueList').default)
+}));
+
+const updateFieldValue = jest.fn();
+const triggerFieldChange = jest.fn();
+const updateDirtyCheckChangeList = jest.fn();
+const validate = jest.fn();
+const clearErrorMessages = jest.fn();
+const [ignoreSuggestion, acceptSuggestion] = [jest.fn(), jest.fn()];
+const defaultProps = {
+  getPConnect: jest.fn(
+    () =>
+      ({
+        getActionsApi: () => ({ updateFieldValue, triggerFieldChange }),
+        getStateProps: () => ({
+          value: '.autoComplete'
+        }),
+        getValidationApi: () => ({
+          validate
+        }),
+        getContextName() {
+          return 'app/primary_1/workarea_1';
+        },
+        getDataObject() {
+          return;
+        },
+        updateDirtyCheckChangeList,
+        clearErrorMessages,
+        ignoreSuggestion,
+        acceptSuggestion
+      }) as any
+  ),
+  label: 'AutoComplete',
+  required: true,
+  disabled: false,
+  value: '',
+  validatemessage: '',
+  status: '',
+  readOnly: false,
+  testId: 'autoCompleteTestId',
+  fieldMetadata: {},
+  helperText: '',
+  displayMode: '',
+  hideLabel: false,
+  placeholder: '',
+  onChange: jest.fn(),
+  listType: 'associated',
+  columns: [],
+  datasource: [
+    { key: 'option1', value: 'Option 1' },
+    { key: 'option2', value: 'Option 2' },
+    { key: 'option3', value: 'Option 3' },
+    { key: 'option4', value: 'Option 4' }
+  ]
+};
+
+describe('AutoComplete Component', () => {
+  test('renders with required attribute', () => {
+    const props = { ...defaultProps };
+    props.required = true;
+    const { rerender } = render(<AutoComplete {...props} />);
+    expect(screen.getAllByText('AutoComplete')[0]).toHaveClass('Mui-required');
+
+    props.required = false;
+    rerender(<AutoComplete {...props} />);
+    expect(screen.getAllByText('AutoComplete')[1]).not.toHaveAttribute('Mui-required');
+  });
+
+  test('renders with disabled attribute', () => {
+    const props = { ...defaultProps };
+    props.disabled = true;
+    const { rerender } = render(<AutoComplete {...props} />);
+    expect(screen.getByText('AutoComplete')).toHaveClass('Mui-disabled');
+
+    props.disabled = false;
+    rerender(<AutoComplete {...props} />);
+    expect(screen.getByText('AutoComplete')).not.toHaveClass('disabled');
+  });
+
+  test('renders with readOnly attribute', () => {
+    const props = { ...defaultProps };
+    props.readOnly = true;
+    const { getByTestId, rerender } = render(<TextInput {...props} />);
+    expect(getByTestId('autoCompleteTestId')).toHaveAttribute('readonly');
+
+    props.readOnly = false;
+    rerender(<AutoComplete {...props} />);
+    expect(getByTestId('autoCompleteTestId')).not.toHaveAttribute('readonly');
+  });
+
+  test('renders with label', () => {
+    const props = { ...defaultProps };
+    const { getByText } = render(<AutoComplete {...props} />);
+    expect(getByText('AutoComplete')).toBeVisible();
+  });
+
+  test('renders in DISPLAY_ONLY mode', () => {
+    const props = { ...defaultProps };
+    props.displayMode = 'DISPLAY_ONLY';
+    props.value = 'Hi there!';
+    const { getByText } = render(<AutoComplete {...props} />);
+    expect(getByText('Hi there!')).toBeVisible();
+  });
+
+  test('renders in STACKED_LARGE_VAL mode', () => {
+    const props = { ...defaultProps };
+    props.displayMode = 'STACKED_LARGE_VAL';
+    props.value = 'Hi there!';
+    const { getByText } = render(<AutoComplete {...props} />);
+    expect(getByText('Hi there!')).toBeVisible();
+  });
+
+  test('does not invoke onBlur handler for readOnly fields', () => {
+    const props = { ...defaultProps };
+    props.readOnly = true;
+    const { getByTestId } = render(<TextInput {...props} />);
+    fireEvent.change(getByTestId('autoCompleteTestId'), { target: { value: 'Option 1' } });
+    fireEvent.blur(getByTestId('autoCompleteTestId'));
+    expect(handleEvent).not.toHaveBeenCalled();
+  });
+
+  test('invokes handlers for blur and change events', () => {
+    const props = { ...defaultProps };
+    const { getByRole, getByText } = render(<AutoComplete {...props} />);
+    const input = getByRole('combobox');
+    fireEvent.change(input, { target: { value: 'Option 1' } });
+    fireEvent.click(getByText('Option 1'));
+    fireEvent.blur(input);
+    expect(handleEvent).toHaveBeenCalled();
+  });
+
+  test('invokes handlers for blur and change events', () => {
+    const props = { ...defaultProps };
+    const { getByRole } = render(<AutoComplete {...props} />);
+    const input = getByRole('combobox');
+    fireEvent.change(input, { target: { value: 'Option 1' } });
+    fireEvent.blur(input);
+    expect(handleEvent).toHaveBeenCalled();
+  });
+
+  test('handles input value changes correctly', () => {
+    const props = { ...defaultProps };
+    const { getByRole, getByText } = render(<AutoComplete {...props} />);
+    const input = getByRole('combobox');
+    fireEvent.change(input, { target: { value: 'Option 1' } });
+    expect(getByText('Option 1')).toBeVisible();
+  });
+});