@kadconsulting/dry
Version:
KAD Reusable Component Library
88 lines • 5.09 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Accordion from './Accordion';
// Mock the Icon component
jest.mock('../Icons/Icon/Icon', () => ({
__esModule: true,
default: ({ Path }) => _jsx("div", { "data-testid": 'mock-icon', children: Path.name }),
}));
describe('Accordion', () => {
const defaultProps = {
parentContent: _jsx("div", { children: "Parent Content" }),
children: _jsx("div", { children: "Accordion Content" }),
};
it('renders with the correct class', () => {
const { container } = render(_jsx(Accordion, { ...defaultProps }));
expect(container.firstChild).toHaveClass('accordion');
});
it('renders parent content and subtitle', () => {
render(_jsx(Accordion, { ...defaultProps, subTitle: 'Subtitle' }));
expect(screen.getByText('Parent Content')).toBeInTheDocument();
expect(screen.getByText('Subtitle')).toBeInTheDocument();
});
it('opens and closes when the button is clicked (uncontrolled mode)', async () => {
render(_jsx(Accordion, { ...defaultProps }));
const toggleButton = screen.getByRole('button', { name: /ChevronDown/i });
expect(screen.queryByText('Accordion Content')).not.toBeInTheDocument();
await userEvent.click(toggleButton);
expect(screen.getByText('Accordion Content')).toBeInTheDocument();
expect(screen.getByRole('button', { name: /ChevronUp/i })).toBeInTheDocument();
await userEvent.click(toggleButton);
expect(screen.queryByText('Accordion Content')).not.toBeInTheDocument();
});
it('calls onOpenStateChange when the open state changes', async () => {
const onOpenStateChange = jest.fn();
render(_jsx(Accordion, { ...defaultProps, onOpenStateChange: onOpenStateChange }));
const toggleButton = screen.getByRole('button', { name: /ChevronDown/i });
await userEvent.click(toggleButton);
expect(onOpenStateChange).toHaveBeenCalledWith(true);
await userEvent.click(toggleButton);
expect(onOpenStateChange).toHaveBeenCalledWith(false);
});
it('respects initialOpenState prop', () => {
const { rerender } = render(_jsx(Accordion, { ...defaultProps, initialOpenState: true }));
expect(screen.getByText('Accordion Content')).toBeInTheDocument();
rerender(_jsx(Accordion, { ...defaultProps, initialOpenState: false }));
expect(screen.queryByText('Accordion Content')).not.toBeInTheDocument();
});
it('works in controlled mode', async () => {
const onOpenStateChange = jest.fn();
const { rerender } = render(_jsx(Accordion, { ...defaultProps, open: false, onOpenStateChange: onOpenStateChange }));
const toggleButton = screen.getByRole('button', { name: /ChevronDown/i });
expect(screen.queryByText('Accordion Content')).not.toBeInTheDocument();
await userEvent.click(toggleButton);
expect(onOpenStateChange).toHaveBeenCalledWith(true);
expect(screen.queryByText('Accordion Content')).not.toBeInTheDocument();
rerender(_jsx(Accordion, { ...defaultProps, open: true, onOpenStateChange: onOpenStateChange }));
expect(screen.getByText('Accordion Content')).toBeInTheDocument();
});
it('renders delete button when onDelete prop is provided', async () => {
const onDelete = jest.fn();
render(_jsx(Accordion, { ...defaultProps, onDelete: onDelete }));
const deleteButton = screen.getByRole('button', { name: /Trash01/i });
expect(deleteButton).toBeInTheDocument();
await userEvent.click(deleteButton);
expect(onDelete).toHaveBeenCalled();
});
it('does not render delete button when onDelete prop is not provided', () => {
render(_jsx(Accordion, { ...defaultProps }));
expect(screen.queryByRole('button', { name: /Trash01/i })).not.toBeInTheDocument();
});
it('applies custom styles and className', () => {
const { container } = render(_jsx(Accordion, { ...defaultProps, style: { backgroundColor: 'red' }, className: 'custom-class', triggerStyle: { color: 'blue' }, contentOuterClassName: 'content-class' }));
expect(container.firstChild).toHaveClass('custom-class');
expect(container.firstChild).toHaveStyle('background-color: red');
// Note: We can't easily test triggerStyle and contentOuterClassName without
// making assumptions about the Collapsible component's internal structure
});
it('respects collapsible prop', () => {
render(_jsx(Accordion, { ...defaultProps, collapsible: false }));
expect(screen.queryByRole('button', { name: /ChevronDown/i })).not.toBeInTheDocument();
});
it('handles data-* attributes', () => {
render(_jsx(Accordion, { ...defaultProps, "data-testid": 'test-accordion' }));
expect(screen.getByTestId('test-accordion')).toBeInTheDocument();
});
});
//# sourceMappingURL=Accordion.test.js.map