@kadconsulting/dry
Version:
KAD Reusable Component Library
134 lines • 5.36 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
// @ts-nocheck
// CLI Version 1.0.1
// Component Version 1.0.0
import { useEffect, useRef, useState } from 'react';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import NewToggle from './NewToggle';
describe('NewToggle', () => {
const defaultProps = {
text: 'Toggle me',
checked: false,
onChange: jest.fn(),
};
it('renders with a toggle className', () => {
// ARRANGE
const { container } = render(_jsx(NewToggle, { ...defaultProps }));
// ASSERT
expect(container.firstChild).toHaveClass('toggle');
});
it('passes a ref to its outermost element', async () => {
// ARRANGE
const Wrapper = () => {
const ref = useRef(null);
const [refWasPassed, setRefWasPassed] = useState(false);
useEffect(() => {
setRefWasPassed(!!ref.current);
}, []);
return (_jsxs(_Fragment, { children: [_jsx(NewToggle, { ...defaultProps, ref: ref }), refWasPassed && _jsx("div", { children: "Ref was passed!" })] }));
};
render(_jsx(Wrapper, {}));
// ASSERT
await waitFor(() => screen.getByText('Ref was passed!'));
});
it('passes a downstream id', () => {
// ARRANGE
const id = 'test-id';
const testId = 'test-subject';
// ACT
render(_jsx(NewToggle, { ...defaultProps, "data-testid": testId, id: id }));
// ASSERT
expect(screen.getByTestId(testId)).toHaveAttribute('id', id);
});
it('passes any downstream className(s)', () => {
// ARRANGE
const className = 'first second third';
const testId = 'test-subject';
// ACT
render(_jsx(NewToggle, { ...defaultProps, "data-testid": testId, className: className }));
// ASSERT
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)', () => {
// ARRANGE
const style = { color: 'red' };
const testId = 'test-subject';
// ACT
render(_jsx(NewToggle, { ...defaultProps, "data-testid": testId, style: style }));
// ASSERT
expect(screen.getByTestId(testId)).toHaveStyle('color: red');
});
it('passes any downstream data-* attribute(s)', () => {
// ARRANGE
const testId = 'test-subject';
const testValue = 'product-1234-abcd-5678-efgh';
// ACT
render(_jsx(NewToggle, { ...defaultProps, "data-testid": testId, "data-product": testValue }));
// ASSERT
expect(screen.getByTestId(testId)).toHaveAttribute('data-product', testValue);
});
it('supports downstream @testing-library `screen.getByTestId`', () => {
// ARRANGE
const testId = 'test-subject';
// ACT
render(_jsx(NewToggle, { ...defaultProps, "data-testid": testId }));
// ASSERT
expect(screen.getByTestId(testId)).toBeInTheDocument();
});
it('renders the text prop correctly', () => {
// ARRANGE
const text = 'Custom Toggle Text';
// ACT
render(_jsx(NewToggle, { ...defaultProps, text: text }));
// ASSERT
expect(screen.getByText(text)).toBeInTheDocument();
});
it('renders a checkbox input', () => {
// ARRANGE & ACT
render(_jsx(NewToggle, { ...defaultProps }));
// ASSERT
expect(screen.getByRole('checkbox')).toBeInTheDocument();
});
it('checkbox is checked when checked prop is true', () => {
// ARRANGE & ACT
render(_jsx(NewToggle, { ...defaultProps, checked: true }));
// ASSERT
expect(screen.getByRole('checkbox')).toBeChecked();
});
it('checkbox is unchecked when checked prop is false', () => {
// ARRANGE & ACT
render(_jsx(NewToggle, { ...defaultProps, checked: false }));
// ASSERT
expect(screen.getByRole('checkbox')).not.toBeChecked();
});
it('calls onChange when checkbox is clicked', () => {
// ARRANGE
const onChange = jest.fn();
render(_jsx(NewToggle, { ...defaultProps, onChange: onChange }));
// ACT
fireEvent.click(screen.getByRole('checkbox'));
// ASSERT
expect(onChange).toHaveBeenCalledTimes(1);
});
it('renders a slider element', () => {
// ARRANGE & ACT
render(_jsx(NewToggle, { ...defaultProps }));
// ASSERT
expect(screen.getByTestId('toggle-slider')).toBeInTheDocument();
});
it('applies correct classes for checked state', () => {
// ARRANGE & ACT
const { container } = render(_jsx(NewToggle, { ...defaultProps, checked: true }));
// ASSERT
expect(container.querySelector('.slider')).toHaveClass('checked');
});
it('applies correct classes for unchecked state', () => {
// ARRANGE & ACT
const { container } = render(_jsx(NewToggle, { ...defaultProps, checked: false }));
// ASSERT
expect(container.querySelector('.slider')).not.toHaveClass('checked');
});
});
//# sourceMappingURL=NewToggle.test.js.map