test: add unit tests according changes

Author: BryanttV

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

@@ -200,4 +200,152 @@ describe('FieldRendererTests', () => {
 
     expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('You must agree to our Honor Code');
   });
+
+  it('should render placeholder for text field', () => {
+    const fieldData = {
+      type: 'text',
+      label: 'Company',
+      name: 'company-field',
+      placeholder: 'Enter your company name',
+    };
+
+    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const input = container.querySelector('input#company-field');
+
+    expect(input.placeholder).toEqual('Enter your company name');
+  });
+
+  it('should render placeholder for textarea field', () => {
+    const fieldData = {
+      type: 'textarea',
+      label: 'Goals',
+      name: 'goals-field',
+      placeholder: 'Share your learning goals',
+    };
+
+    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const input = container.querySelector('#goals-field');
+
+    expect(input.placeholder).toEqual('Share your learning goals');
+  });
+
+  it('should apply maxLength restriction to text field', () => {
+    const fieldData = {
+      type: 'text',
+      label: 'Company',
+      name: 'company-field',
+      restrictions: {
+        max_length: 50,
+      },
+    };
+
+    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const input = container.querySelector('input#company-field');
+
+    expect(input.maxLength).toEqual(50);
+  });
+
+  it('should apply maxLength restriction to textarea field', () => {
+    const fieldData = {
+      type: 'textarea',
+      label: 'Goals',
+      name: 'goals-field',
+      restrictions: {
+        max_length: 200,
+      },
+    };
+
+    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const input = container.querySelector('#goals-field');
+
+    expect(input.maxLength).toEqual(200);
+  });
+
+  it('should show help text when field has focus and instructions are provided', () => {
+    const fieldData = {
+      type: 'text',
+      label: 'Username',
+      name: 'username-field',
+      instructions: 'Username must be between 2-30 characters',
+    };
+
+    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const input = container.querySelector('input#username-field');
+
+    // Help text should not be visible initially
+    expect(container.textContent).not.toContain('Username must be between 2-30 characters');
+
+    // Focus the field
+    fireEvent.focus(input);
+
+    // Help text should now be visible
+    expect(container.textContent).toContain('Username must be between 2-30 characters');
+
+    // Blur the field
+    fireEvent.blur(input);
+
+    // Help text should be hidden again
+    expect(container.textContent).not.toContain('Username must be between 2-30 characters');
+  });
+
+  it('should show help text for textarea when focused', () => {
+    const fieldData = {
+      type: 'textarea',
+      label: 'Goals',
+      name: 'goals-field',
+      instructions: 'Please describe your learning goals in detail',
+    };
+
+    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const input = container.querySelector('#goals-field');
+
+    // Help text should not be visible initially
+    expect(container.textContent).not.toContain('Please describe your learning goals in detail');
+
+    // Focus the field
+    fireEvent.focus(input);
+
+    // Help text should now be visible
+    expect(container.textContent).toContain('Please describe your learning goals in detail');
+  });
+
+  it('should not show help text if instructions are not provided', () => {
+    const fieldData = {
+      type: 'text',
+      label: 'Company',
+      name: 'company-field',
+    };
+
+    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const input = container.querySelector('input#company-field');
+
+    // Focus the field
+    fireEvent.focus(input);
+
+    // No help text should be rendered since instructions are not provided
+    const feedbackElement = container.querySelector('.form-control-feedback');
+    expect(feedbackElement).toBeNull();
+  });
+
+  it('should show help text for select field when focused', () => {
+    const fieldData = {
+      type: 'select',
+      label: 'Country',
+      name: 'country-field',
+      options: [['us', 'United States'], ['ca', 'Canada']],
+      instructions: 'Select your country of residence',
+    };
+
+    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const select = container.querySelector('select#country-field');
+
+    // Help text should not be visible initially
+    expect(container.textContent).not.toContain('Select your country of residence');
+
+    // Focus the field
+    fireEvent.focus(select);
+
+    // Note: Select fields don't show help text in the current implementation
+    // This test documents the current behavior
+  });
 });

src/register/components/tests/ConfigurableRegistrationForm.test.jsx

@@ -419,5 +419,55 @@ describe('ConfigurableRegistrationForm', () => {
 
       expect(professionErrorElement.textContent).toEqual(professionError);
     });
+
+    it('should normalize object-style error messages from backend', () => {
+      const professionErrorMessage = { required: 'Enter your profession' };
+      useThirdPartyAuthContext.mockReturnValue({
+        currentProvider: null,
+        platformName: '',
+        providers: [],
+        secondaryProviders: [],
+        handleInstitutionLogin: jest.fn(),
+        handleInstitutionLogout: jest.fn(),
+        isInstitutionAuthActive: false,
+        institutionLogin: false,
+        pipelineDetails: {},
+        thirdPartyAuthContext: {
+          autoSubmitRegForm: false,
+          currentProvider: null,
+          finishAuthUrl: null,
+          pipelineUserDetails: null,
+          providers: [],
+          secondaryProviders: [],
+          errorMessage: null,
+        },
+        fieldDescriptions: {
+          profession: {
+            name: 'profession', type: 'text', label: 'Profession', error_message: professionErrorMessage,
+          },
+        },
+        optionalFields: [],
+        setThirdPartyAuthContextBegin: jest.fn(),
+        setThirdPartyAuthContextSuccess: jest.fn(),
+        setThirdPartyAuthContextFailure: jest.fn(),
+        setEmailSuggestionContext: jest.fn(),
+        clearThirdPartyAuthErrorMessage: jest.fn(),
+      });
+
+      const { getByLabelText, container } = render(
+        routerWrapper(renderWrapper(<RegistrationPage {...props} />)),
+      );
+
+      const professionInput = getByLabelText('Profession');
+      fireEvent.focus(professionInput);
+      fireEvent.blur(professionInput);
+
+      const submitButton = container.querySelector('button.btn-brand');
+      fireEvent.click(submitButton);
+
+      const professionErrorElement = container.querySelector('#profession-error');
+
+      expect(professionErrorElement.textContent).toEqual('Enter your profession');
+    });
   });
 });

src/register/data/tests/utils.test.js

@@ -1,4 +1,38 @@
-import { isFormValid } from '../utils';
+import { isFormValid, normalizeErrorMessage } from '../utils';
+
+describe('normalizeErrorMessage', () => {
+  it('should return the error message if it is a string', () => {
+    const errorMessage = 'This field is required';
+    expect(normalizeErrorMessage(errorMessage)).toBe('This field is required');
+  });
+
+  it('should extract the first value from an object error message', () => {
+    const errorMessage = { required: 'This field is required' };
+    expect(normalizeErrorMessage(errorMessage)).toBe('This field is required');
+  });
+
+  it('should handle multiple keys in object and return first value', () => {
+    const errorMessage = { required: 'Required field', min_length: 'Too short' };
+    const result = normalizeErrorMessage(errorMessage);
+    expect(['Required field', 'Too short']).toContain(result);
+  });
+
+  it('should return empty string if error message is null', () => {
+    expect(normalizeErrorMessage(null)).toBe('');
+  });
+
+  it('should return empty string if error message is undefined', () => {
+    expect(normalizeErrorMessage(undefined)).toBe('');
+  });
+
+  it('should return empty string if error message is an empty object', () => {
+    expect(normalizeErrorMessage({})).toBe('');
+  });
+
+  it('should return empty string if error message is an empty string', () => {
+    expect(normalizeErrorMessage('')).toBe('');
+  });
+});
 
 describe('Payload validation', () => {
   let formatMessage;