@axinom/mosaic-ui 0.69.0-rc.2 → 0.69.0-rc.21

package/src/components/FormElements/TextArea/TextArea.spec.tsx

@@ -1,39 +1,48 @@
-import { shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { TextArea } from './TextArea';
 
 describe('TextArea', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<TextArea name={'test-name'} />);
+    const { container } = render(<TextArea name={'test-name'} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('displays a label', () => {
     const mockLabel = 'mockLabel';
-    const wrapper = shallow(<TextArea name={'test-name'} label={mockLabel} />);
+    const { container } = render(
+      <TextArea name={'test-name'} label={mockLabel} />,
+    );
 
-    const label = wrapper.dive().find('label');
+    const label = container.querySelector('label');
 
-    expect(label.text()).toBe(mockLabel);
+    expect(label?.textContent).toBe(mockLabel);
   });
 
   it('sets textarea field using the value prop and emits updated values', () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const mockValue = 'test-value';
     const mockValueUpdated = 'updated-test-value';
-    const wrapper = shallow(
+    const { container, rerender } = render(
       <TextArea name={'test-name'} value={mockValue} onChange={spy} />,
     );
 
-    const textarea = wrapper.find('textarea');
+    const textarea = container.querySelector('textarea') as HTMLTextAreaElement;
 
-    expect(textarea.prop('value')).toEqual(mockValue);
+    expect(textarea.value).toEqual(mockValue);
 
-    textarea.simulate('change', { target: { value: mockValueUpdated } });
+    fireEvent.change(textarea, { target: { value: mockValueUpdated } });
 
     expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy).toHaveBeenCalledWith({ target: { value: mockValueUpdated } });
+
+    // For controlled components, rerender with the new value to see the change
+    rerender(
+      <TextArea name={'test-name'} value={mockValueUpdated} onChange={spy} />,
+    );
+
+    expect(textarea.value).toBe(mockValueUpdated);
   });
 
   it('uses optional props when passed in', () => {
@@ -49,19 +58,25 @@ describe('TextArea', () => {
       value: '',
     } as Record<string, unknown>;
 
-    const wrapper = shallow(<TextArea name={'test-name'} {...mockProps} />);
+    const { container } = render(
+      <TextArea name={'test-name'} {...mockProps} />,
+    );
 
-    const textarea = wrapper.find('textarea');
-    const textareaProps = textarea.props();
-    expect(textareaProps).toEqual(expect.objectContaining(mockProps));
+    const textarea = container.querySelector('textarea') as HTMLTextAreaElement;
+    // Note: autofocus is not reliably testable in jsdom
+    expect(textarea.disabled).toBe(mockProps.disabled);
+    expect(textarea.id).toBe(mockProps.id);
+    expect(textarea.name).toBe(mockProps.name);
+    expect(textarea.placeholder).toBe(mockProps.placeholder);
+    expect(textarea.value).toBe(mockProps.value);
   });
 
   it('raises change, blur, and focus events', () => {
-    const changeSpy = jest.fn();
-    const blurSpy = jest.fn();
-    const focusSpy = jest.fn();
+    const changeSpy = vi.fn();
+    const blurSpy = vi.fn();
+    const focusSpy = vi.fn();
     const mockValue = 'test textarea';
-    const wrapper = shallow(
+    const { container } = render(
       <TextArea
         name={'test-name'}
         onChange={changeSpy}
@@ -70,28 +85,28 @@ describe('TextArea', () => {
       />,
     );
 
-    const textarea = wrapper.find('textarea');
+    const textarea = container.querySelector('textarea') as HTMLTextAreaElement;
 
-    textarea.simulate('change', { target: { value: mockValue } });
+    fireEvent.change(textarea, { target: { value: mockValue } });
     expect(changeSpy).toHaveBeenCalledTimes(1);
 
-    textarea.simulate('blur');
+    fireEvent.blur(textarea);
     expect(blurSpy).toHaveBeenCalledTimes(1);
 
-    textarea.simulate('focus');
+    fireEvent.focus(textarea);
     expect(focusSpy).toHaveBeenCalledTimes(1);
   });
 
   it('applies error styling and renders error message when an error is passed', () => {
     const mockErrorMessage = 'test-error-message';
-    const wrapper = shallow(
+    const { container } = render(
       <TextArea name={'test-name'} error={mockErrorMessage} />,
     );
 
-    const errorMsg = wrapper.dive().find('small');
-    const errorStyling = wrapper.find('textarea');
+    const errorMsg = container.querySelector('small');
+    const errorStyling = container.querySelector('textarea');
 
-    expect(errorMsg.text()).toBe(mockErrorMessage);
-    expect(errorStyling.hasClass('hasError')).toBe(true);
+    expect(errorMsg?.textContent).toBe(mockErrorMessage);
+    expect(errorStyling?.classList.contains('hasError')).toBe(true);
   });
 });