@kadconsulting/dry
Version:
KAD Reusable Component Library
105 lines • 4.75 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 Checkbox from './Checkbox';
describe('Checkbox', () => {
// Define default props to satisfy required properties in CheckboxProps
const defaultProps = {
LabelContent: 'Test Label',
color: 'light-contrast',
onChange: jest.fn(),
checked: false,
};
// Test to encourage contributors to open the file
it('encourages contributors to open the test file', () => {
expect(true).toBe(true);
});
// Test for className
it('renders with a dry-prepended className', () => {
const { container } = render(_jsx(Checkbox, { ...defaultProps }));
expect(container.firstChild).toHaveClass('dry-checkbox');
});
// Test for ref
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(Checkbox, { ref: ref, ...defaultProps }), refWasPassed && _jsx("div", { children: "Ref was passed!" })] }));
};
render(_jsx(Wrapper, {}));
await waitFor(() => screen.getByText('Ref was passed!'));
});
// Test for id
it('passes a downstream id', () => {
const id = 'test-id';
const testId = 'test-subject';
render(_jsx(Checkbox, { ...defaultProps, "data-testid": testId, id: id }));
expect(screen.getByTestId(testId)).toHaveAttribute('id', id);
});
// Test for className(s)
it('passes any downstream className(s)', () => {
const className = 'first second third';
const testId = 'test-subject';
render(_jsx(Checkbox, { ...defaultProps, "data-testid": testId, className: className }));
expect(screen.getByTestId(testId)).toHaveClass('first', 'second', 'third');
});
// Test for inline style
it('passes any downstream inline style(s)', () => {
const style = { color: 'red' };
const testId = 'test-subject';
render(_jsx(Checkbox, { ...defaultProps, "data-testid": testId, style: style }));
expect(screen.getByTestId(testId)).toHaveStyle('color: red');
});
// Test for data-* attributes
it('passes any downstream data-* attribute(s)', () => {
const testId = 'test-subject';
const testValue = 'product-1234-abcd-5678-efgh';
render(_jsx(Checkbox, { ...defaultProps, "data-testid": testId, "data-product": testValue }));
expect(screen.getByTestId(testId)).toHaveAttribute('data-product', testValue);
});
// Test for @testing-library `screen.getByTestId`
it('supports downstream @testing-library `screen.getByTestId`', () => {
const testId = 'test-subject';
render(_jsx(Checkbox, { ...defaultProps, "data-testid": testId }));
expect(screen.getByTestId(testId)).toBeInTheDocument();
});
// Test for checked state
it('renders correctly when checked', () => {
render(_jsx(Checkbox, { ...defaultProps, checked: true }));
expect(screen.getByRole('img')).toBeInTheDocument();
});
// Test for indeterminate state
// it('renders correctly when indeterminate', () => {
// render(<Checkbox {...defaultProps} indeterminate />);
// expect(screen.getByRole('img')).toBeInTheDocument();
// });
// Test for disabled state
it('renders correctly when disabled', () => {
render(_jsx(Checkbox, { ...defaultProps, disabled: true }));
expect(screen.getByRole('checkbox')).toBeDisabled();
});
// Test for color
it('applies the correct color based on the prop', () => {
render(_jsx(Checkbox, { ...defaultProps, color: 'dark-contrast' }));
// Assert color logic here
});
// Test for LabelProps
it('passes LabelProps correctly', () => {
render(_jsx(Checkbox, { ...defaultProps, LabelProps: {
labelColor: 'dark-contrast',
style: { backgroundColor: 'blue' },
} }));
expect(screen.getByText('Test Label')).toHaveStyle('background-color: blue');
});
// Test for onChange event
it('calls onChange when clicked', () => {
const onChange = jest.fn();
render(_jsx(Checkbox, { ...defaultProps, onChange: onChange }));
fireEvent.click(screen.getByRole('checkbox'));
expect(onChange).toHaveBeenCalled();
});
});
//# sourceMappingURL=Checkbox.test.js.map