@kadconsulting/dry
Version:
KAD Reusable Component Library
79 lines • 3.59 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import Badge from './Badge';
import { useEffect, useRef, useState } from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import { SECONDARY_COLORS, SEMANTIC_COLORS } from '../../internal/constants';
describe('Badge', () => {
it('renders with a dry-prepended className', () => {
// ARRANGE
const { container } = render(_jsx(Badge, { children: "Hello World" }));
// ASSERT
expect(Array.from(container.firstElementChild?.classList ?? []).includes('dry-badge')).toBeTruthy();
});
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(Badge, { ref: ref, children: "Hello world" }), refWasPassed && _jsx("div", { children: "Ref was passed!" })] }));
};
render(_jsx(Wrapper, {}));
// ASSERT
await waitFor(() => screen.getByText('Ref was passed!'));
});
it('renders its children in a child with a dry-badge__content class', () => {
// ARRANGE
const children = 'Hello world';
// ACT
render(_jsx(Badge, { children: children }));
// ASSERT
expect(screen.getByText(children)).toBeInTheDocument();
expect(screen.getByText(children)).toHaveClass('dry-badge__content');
});
it('renders the correct defaults', () => {
// ARRANGE
const { container } = render(_jsx(Badge, { children: "Hello world" }));
// ASSERT
expect(container.firstElementChild).toHaveClass('dry-badge--sm'); // Size
expect(container.firstElementChild).toHaveClass('dry-badge--medium'); // Variant
expect(container.firstElementChild).toHaveClass('dry-badge--primary'); // Color
});
it('renders the appropriate size', () => {
// ARRANGE
const sizes = ['sm', 'md', 'lg'];
// ACT
render(_jsx(_Fragment, { children: sizes.map((size) => (_jsx(Badge, { size: size, children: "Hello world" }, size))) }));
// ASSERT
screen.getAllByText('Hello world').forEach((badgeContent, i) => {
expect(badgeContent.parentElement).toHaveClass(`dry-badge--${sizes[i]}`);
});
});
it('renders the appropriate variant', () => {
// ARRANGE
const variants = [
'light',
'medium',
'dark',
'outline',
];
// ACT
render(_jsx(_Fragment, { children: variants.map((variant) => (_jsx(Badge, { variant: variant, children: "Hello world" }, variant))) }));
// ASSERT
expect(screen.getAllByText('Hello world').forEach((badgeContent, i) => {
expect(badgeContent.parentElement).toHaveClass(`dry-badge--${variants[i]}`);
}));
});
it('renders the appropriate color', () => {
const colors = [...SEMANTIC_COLORS, ...SECONDARY_COLORS];
// ACT
render(_jsx(_Fragment, { children: colors.map((color) => (_jsx(Badge, { color: color, children: "Hello world" }, color))) }));
// ASSERT
expect(screen.getAllByText('Hello world').forEach((badgeContent, i) => {
expect(badgeContent.parentElement).toHaveClass(`dry-badge--${colors[i]}`);
}));
});
});
//# sourceMappingURL=Badge.test.js.map