@kadconsulting/dry
Version:
KAD Reusable Component Library
99 lines • 4.9 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 { MemoryRouter } from 'react-router-dom';
import DropdownItem from './DropdownItem';
describe('DropdownItem', () => {
const sampleItems = [
{
label: 'Item 1',
path: 'item1',
note: 'Note 1',
handleClick: () => console.log('add logic'),
},
{
label: 'Item 2',
path: 'item2',
disabled: true,
handleClick: () => console.log('add logic'),
},
{
label: 'Item 3',
path: 'item3',
handleClick: () => console.log('add logic'),
},
];
const defaultProps = {
label: 'Sample Label',
icon: _jsx("span", { children: "Icon" }),
items: sampleItems,
};
it('renders with given label and icon', () => {
render(_jsx(MemoryRouter, { children: _jsx(DropdownItem, { ...defaultProps }) }));
expect(screen.getByText('Sample Label')).toBeInTheDocument();
expect(screen.getByText('Icon')).toBeInTheDocument();
});
it('renders dropdown items when opened', () => {
render(_jsx(MemoryRouter, { children: _jsx(DropdownItem, { ...defaultProps }) }));
fireEvent.click(screen.getByText('Sample Label'));
expect(screen.getByText('Item 1')).toBeInTheDocument();
expect(screen.getByText('Item 2')).toBeInTheDocument();
expect(screen.getByText('Item 3')).toBeInTheDocument();
});
it('hides dropdown items when closed', () => {
render(_jsx(MemoryRouter, { children: _jsx(DropdownItem, { ...defaultProps }) }));
fireEvent.click(screen.getByText('Sample Label')); // Open
fireEvent.click(screen.getByText('Sample Label')); // Close
expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
expect(screen.queryByText('Item 2')).not.toBeInTheDocument();
expect(screen.queryByText('Item 3')).not.toBeInTheDocument();
});
it('renders with a dry-prepended className', () => {
const { container } = render(_jsx(MemoryRouter, { children: _jsx(DropdownItem, { ...defaultProps }) }));
expect(container.firstChild).toHaveClass('dry-dropdown-item');
});
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(DropdownItem, { ref: ref, ...defaultProps }), refWasPassed && _jsx("div", { children: "Ref was passed!" })] }));
};
render(_jsx(MemoryRouter, { children: _jsx(Wrapper, {}) }));
await waitFor(() => screen.getByText('Ref was passed!'));
});
it('passes a downstream id', () => {
const id = 'test-id';
const testId = 'test-subject';
render(_jsx(MemoryRouter, { children: _jsx(DropdownItem, { ...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(MemoryRouter, { children: _jsx(DropdownItem, { ...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(MemoryRouter, { children: _jsx(DropdownItem, { ...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(MemoryRouter, { children: _jsx(DropdownItem, { ...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(MemoryRouter, { children: _jsx(DropdownItem, { ...defaultProps, "data-testid": testId }) }));
expect(screen.getByTestId(testId)).toBeInTheDocument();
});
});
//# sourceMappingURL=DropdownItem.test.js.map