@kadconsulting/dry
Version:
KAD Reusable Component Library
104 lines • 5.03 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Textarea from './Textarea';
describe('Textarea', () => {
const defaultProps = {
label: 'Test Label',
};
it('renders with default and custom class names', () => {
const { container } = render(_jsx(Textarea, { ...defaultProps, className: 'custom-class' }));
expect(container.firstChild).toHaveClass('dry-textarea custom-class');
});
it('renders label and handles label color', () => {
render(_jsx(Textarea, { ...defaultProps, labelColor: 'dark-contrast' }));
// Assuming you have a way to assert styles or classes based on label colors
expect(screen.getByText('Test Label')).toHaveStyle({
color: 'some-dark-color',
});
});
// it('displays line numbers when enabled', () => {
// render(<Textarea {...defaultProps} lineNumbers />);
// expect(screen.getByClass('line-numbers')).toBeInTheDocument();
// });
it('handles text input, focus, and blur events', async () => {
const onFocus = jest.fn();
const onBlur = jest.fn();
render(_jsx(Textarea, { ...defaultProps, onFocus: onFocus, onBlur: onBlur }));
const textarea = screen.getByRole('textbox');
userEvent.type(textarea, 'Hello');
expect(textarea).toHaveValue('Hello');
userEvent.click(textarea);
expect(onFocus).toHaveBeenCalledTimes(1);
userEvent.tab();
expect(onBlur).toHaveBeenCalledTimes(1);
});
it('handles async validation', async () => {
const asyncValidation = jest.fn().mockResolvedValue('Async Error');
render(_jsx(Textarea, { ...defaultProps, asyncValidation: asyncValidation }));
const textarea = screen.getByRole('textbox');
userEvent.type(textarea, 'Hello');
await waitFor(() => {
expect(screen.getByText('Async Error')).toBeInTheDocument();
});
});
it('handles rich text formatting for bold and italic', () => {
render(_jsx(Textarea, { ...defaultProps, richTextFormatting: true }));
const textarea = screen.getByRole('textbox');
// Simulate Ctrl+B for bold
fireEvent.keyDown(textarea, { key: 'b', ctrlKey: true });
// Assuming applyFormatting function sets the value to '**'
expect(textarea).toHaveValue('**');
// Simulate Ctrl+I for italic
fireEvent.keyDown(textarea, { key: 'i', ctrlKey: true });
// Assuming applyFormatting function sets the value to '_'
expect(textarea).toHaveValue('**_');
});
it('handles cut operation', () => {
render(_jsx(Textarea, { ...defaultProps, richTextFormatting: true }));
const textarea = screen.getByRole('textbox');
userEvent.type(textarea, 'Hello');
// Simulate cut operation
fireEvent.cut(textarea);
// Assuming handleCut function modifies clipboard and removes the selected text
// Clipboard testing might depend on your test environment
// expect(clipboardContent).toBe('Cut: Hello');
});
it('handles copy operation', () => {
render(_jsx(Textarea, { ...defaultProps, richTextFormatting: true }));
const textarea = screen.getByRole('textbox');
userEvent.type(textarea, 'Hello');
// Simulate copy operation
fireEvent.copy(textarea);
// Assuming handleCopy function modifies clipboard
// Clipboard testing might depend on your test environment
// expect(clipboardContent).toBe('Copy: Hello');
});
it('handles paste operation', () => {
render(_jsx(Textarea, { ...defaultProps, richTextFormatting: true }));
const textarea = screen.getByRole('textbox');
// Simulate paste operation
fireEvent.paste(textarea, { clipboardData: { getData: () => 'World' } });
// Assuming handlePaste function modifies pasted content
expect(textarea).toHaveValue('Pasted: World');
});
it('is read-only when readOnly prop is true', () => {
render(_jsx(Textarea, { ...defaultProps, readOnly: true }));
const textarea = screen.getByRole('textbox');
expect(textarea).toHaveAttribute('readonly');
});
it('is disabled when disabled prop is true', () => {
render(_jsx(Textarea, { ...defaultProps, disabled: true }));
const textarea = screen.getByRole('textbox');
expect(textarea).toBeDisabled();
});
it('handles tab key when tabHandling is true', () => {
render(_jsx(Textarea, { ...defaultProps, tabHandling: true }));
const textarea = screen.getByRole('textbox');
// Simulate Tab key press
fireEvent.keyDown(textarea, { key: 'Tab' });
// Assuming handleKeyDown function sets the value to '\t' (Tab character)
expect(textarea).toHaveValue('\t');
});
});
//# sourceMappingURL=Textarea.test.js.map