@kadconsulting/dry
Version:
KAD Reusable Component Library
93 lines • 4.91 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import DropdownSelect from './DropdownSelect';
describe('DropdownSelect', () => {
const defaultProps = {
name: 'TestSelect',
value: '',
options: [{ label: 'Option1', value: 'Option1' }, { label: 'Option2', value: 'Option2' }, { label: 'Option3', value: 'Option3' }],
onChange: () => { },
};
it('renders dropdown with given options and default value', () => {
render(_jsx(DropdownSelect, { ...defaultProps }));
expect(screen.getByRole('combobox')).toBeInTheDocument();
expect(screen.getByRole('option', { name: 'Select TestSelect' })).toBeInTheDocument();
expect(screen.getByRole('option', { name: 'Option1' })).toBeInTheDocument();
expect(screen.getByRole('option', { name: 'Option2' })).toBeInTheDocument();
expect(screen.getByRole('option', { name: 'Option3' })).toBeInTheDocument();
});
it('changes value when an option is selected', () => {
const handleChange = jest.fn((e) => {
expect(e.target.value).toBe('Option1');
});
render(_jsx(DropdownSelect, { ...defaultProps, onChange: handleChange }));
fireEvent.change(screen.getByRole('combobox'), {
target: { value: 'Option1' },
});
expect(handleChange).toHaveBeenCalledTimes(1);
});
it('renders label when provided', () => {
const label = 'Test Label';
render(_jsx(DropdownSelect, { ...defaultProps, label: label }));
expect(screen.getByText(label)).toBeInTheDocument();
});
it('does not render when isVisible is false', () => {
render(_jsx(DropdownSelect, { ...defaultProps, isVisible: false }));
expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
});
it('disables dropdown and shows loading spinner when isLoading is true', () => {
render(_jsx(DropdownSelect, { ...defaultProps, isLoading: true }));
expect(screen.getByRole('combobox')).toBeDisabled();
expect(screen.getByRole('status')).toBeInTheDocument(); // Assuming LoadingSpinner has role="status"
});
// Existing tests for className, id, data-testid, etc., can remain unchanged.
it('renders with a dry-prepended className', () => {
const { container } = render(_jsx(DropdownSelect, { ...defaultProps }));
expect(container.firstChild).toHaveClass('dry-dropdown-select');
});
it('passes a ref to its outermost element', async () => {
const Wrapper = () => {
const ref = useRef(null);
const [refWasPassed, setRefWasPassed] = useState(false);
useEffect(() => {
setRefWasPassed(!!ref.current);
}, []);
return (_jsxs(_Fragment, { children: [_jsx(DropdownSelect, { ref: ref, ...defaultProps }), refWasPassed && _jsx("div", { children: "Ref was passed!" })] }));
};
render(_jsx(Wrapper, {}));
await waitFor(() => screen.getByText('Ref was passed!'));
});
it('passes a downstream id', () => {
const id = 'test-id';
const testId = 'test-subject';
render(_jsx(DropdownSelect, { ...defaultProps, "data-testid": testId, id: id }));
expect(screen.getByTestId(testId)).toHaveAttribute('id', id);
});
it('passes any downstream className(s)', () => {
const className = 'first second third';
const testId = 'test-subject';
render(_jsx(DropdownSelect, { ...defaultProps, "data-testid": testId, className: className }));
expect(screen.getByTestId(testId)).toHaveClass('first');
expect(screen.getByTestId(testId)).toHaveClass('second');
expect(screen.getByTestId(testId)).toHaveClass('third');
});
it('passes any downstream inline style(s)', () => {
const style = { color: 'red' };
const testId = 'test-subject';
render(_jsx(DropdownSelect, { ...defaultProps, "data-testid": testId, style: style }));
expect(screen.getByTestId(testId)).toHaveStyle('color: red');
});
it('passes any downstream data-* attribute(s)', () => {
const testId = 'test-subject';
const testValue = 'product-1234-abcd-5678-efgh';
render(_jsx(DropdownSelect, { ...defaultProps, "data-testid": testId, "data-product": testValue }));
expect(screen.getByTestId(testId)).toHaveAttribute('data-product', testValue);
});
it('supports downstream @testing-library `screen.getByTestId`', () => {
const testId = 'test-subject';
render(_jsx(DropdownSelect, { ...defaultProps, "data-testid": testId }));
expect(screen.getByTestId(testId)).toBeInTheDocument();
});
});
//# sourceMappingURL=DropdownSelect.test.js.map