add unit tests

tests/components/MDXEditorField.test.tsx

@@ -0,0 +1,82 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { MDXEditorField } from '../../src/components/MDXEditorField';
+
+describe('MDXEditorField', () => {
+    it('renders label and change handler in editable mode', () => {
+        const onChange = vi.fn();
+
+        render(
+            <MDXEditorField
+                label="Content"
+                markdown=""
+                onChange={onChange}
+                themeClassName="light-theme"
+                editorClassName="extra-editor"
+                plugins={[]}
+            />,
+        );
+
+        expect(screen.getByText('Content')).toHaveClass('ui-label');
+        fireEvent.change(screen.getByLabelText('Markdown Editor'), {
+            target: { value: '# Hello' },
+        });
+        expect(onChange).toHaveBeenCalledWith('# Hello');
+        expect(screen.getByLabelText('Markdown Editor')).toHaveAttribute(
+            'data-class-name',
+            'light-theme extra-editor',
+        );
+    });
+
+    it('renders preview and disabled classes when disabled', () => {
+        render(
+            <MDXEditorField
+                label="Content"
+                markdown="Disabled content"
+                disabled
+                themeClassName="dark-theme"
+                plugins={[]}
+            />,
+        );
+
+        const label = screen.getByText('Content');
+        expect(label).toHaveClass('ui-label-disabled');
+        expect(screen.getByTestId('md-preview')).toHaveTextContent('Disabled content');
+        expect(screen.getByTestId('md-preview')).toHaveAttribute('data-class-name', 'dark-theme');
+        expect(screen.queryByLabelText('Markdown Editor')).not.toBeInTheDocument();
+        expect(document.querySelector('.post-mdx-editor--disabled')).toBeTruthy();
+    });
+
+    it('renders read-only preview without label when label is omitted', () => {
+        render(
+            <MDXEditorField
+                markdown="Read only content"
+                readOnly
+                themeClassName="dark-theme"
+                plugins={[]}
+            />,
+        );
+
+        expect(screen.queryByText('Content')).not.toBeInTheDocument();
+        expect(screen.getByTestId('md-preview')).toHaveTextContent('Read only content');
+    });
+
+    it('supports wrapper style/class overrides and error rendering', () => {
+        render(
+            <MDXEditorField
+                label="Content"
+                markdown=""
+                themeClassName="light-theme"
+                plugins={[]}
+                editorWrapperClassName="editor-wrapper"
+                editorWrapperStyle={{ borderWidth: '2px' }}
+                error="Content is required"
+            />,
+        );
+
+        const wrapper = document.querySelector('.editor-wrapper');
+        expect(wrapper).toHaveClass('post-mdx-editor--enabled');
+        expect(wrapper).toHaveStyle({ borderWidth: '2px' });
+        expect(screen.getByText('Content is required')).toHaveClass('ui-error');
+    });
+});