83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
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');
|
|
});
|
|
});
|