@kadconsulting/dry
Version:
KAD Reusable Component Library
417 lines • 21.7 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 } from '@testing-library/react';
import DisplayXs from './DisplayXs';
describe('DisplayXs', () => {
it('renders with a dry-prepended className', () => {
// ARRANGE
const { container } = render(_jsx(DisplayXs, {}));
// ASSERT
expect(container.firstChild).toHaveClass('dry-displayXs');
});
it('renders with a dry-typography className', () => {
// ARRANGE
const { container } = render(_jsx(DisplayXs, {}));
// ASSERT
expect(container.firstChild).toHaveClass('dry-typography');
});
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(DisplayXs, { 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(DisplayXs, { "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(DisplayXs, { "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(DisplayXs, { "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(DisplayXs, { "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(DisplayXs, { "data-testid": testId }));
// ASSERT
expect(screen.getByTestId(testId)).toBeInTheDocument();
});
it('renders its children', () => {
// ARRANGE
const testId = 'test-subject';
const testValue = 'Hello world';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, children: testValue }));
// ASSERT
expect(screen.getByTestId(testId)).toHaveTextContent(testValue);
});
it('renders with the correct defaults', () => {
// ARRANGE
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId }));
// ASSERT
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--weight-regular');
expect(node).toHaveClass('dry-typography--text-align-left');
expect(node).toHaveClass('dry-typography--font-style-normal');
expect(node).toHaveClass('dry-typography--text-decoration-none');
expect(node).toHaveClass('dry-displayXs--color-fontColorDisplayXs');
});
it('renders with the regular weight', () => {
// ARRANGE
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, weight: 'regular' }));
const node = screen.getByTestId(testId);
// ASSERT
expect(node).toHaveClass('dry-typography--weight-regular');
expect(node).not.toHaveClass('dry-typography--weight-bold');
expect(node).not.toHaveClass('dry-typography--weight-semibold');
expect(node).not.toHaveClass('dry-typography--weight-medium');
expect(node).not.toHaveClass('dry-typography--weight-initial');
expect(node).not.toHaveClass('dry-typography--weight-inherit');
expect(node).not.toHaveClass('dry-typography--weight-unset');
});
it('renders with semibold weight', () => {
// ARRANGE
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, weight: 'semibold' }));
// ASSERT
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--weight-semibold');
expect(node).not.toHaveClass('dry-typography--weight-bold');
expect(node).not.toHaveClass('dry-typography--weight-medium');
expect(node).not.toHaveClass('dry-typography--weight-regular');
expect(node).not.toHaveClass('dry-typography--weight-initial');
expect(node).not.toHaveClass('dry-typography--weight-inherit');
expect(node).not.toHaveClass('dry-typography--weight-unset');
});
it('renders with bold weight', () => {
// ARRANGE
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, weight: 'bold' }));
// ASSERT
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--weight-bold');
expect(node).not.toHaveClass('dry-typography--weight-medium');
expect(node).not.toHaveClass('dry-typography--weight-regular');
expect(node).not.toHaveClass('dry-typography--weight-semibold');
});
it('renders with medium weight', () => {
// ARRANGE
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, weight: 'medium' }));
// ASSERT
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--weight-medium');
expect(node).not.toHaveClass('dry-typography--weight-bold');
expect(node).not.toHaveClass('dry-typography--weight-regular');
expect(node).not.toHaveClass('dry-typography--weight-semibold');
});
it('renders with normal font-style', () => {
// ARRANGE
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId }));
// ASSERT
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--font-style-normal');
expect(node).not.toHaveClass('dry-typography--font-style-italic');
expect(node).not.toHaveClass('dry-typography--font-style-oblique');
});
it('renders with italic font-style', () => {
// ARRANGE
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, fontStyle: 'italic' }));
// ASSERT
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--font-style-italic');
expect(node).not.toHaveClass('dry-typography--font-style-normal');
expect(node).not.toHaveClass('dry-typography--font-style-oblique');
});
it('renders with oblique font-style', () => {
// ARRANGE
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, fontStyle: 'oblique' }));
// ASSERT
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--font-style-oblique');
expect(node).not.toHaveClass('dry-typography--font-style-italic');
expect(node).not.toHaveClass('dry-typography--font-style-normal');
expect(node).not.toHaveClass('dry-typography--font-style-initial');
expect(node).not.toHaveClass('dry-typography--font-style-inherit');
expect(node).not.toHaveClass('dry-typography--font-style-unset');
});
it('renders with initial font-style', () => {
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, fontStyle: 'initial' }));
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--font-style-initial');
expect(node).not.toHaveClass('dry-typography--font-style-oblique');
expect(node).not.toHaveClass('dry-typography--font-style-italic');
expect(node).not.toHaveClass('dry-typography--font-style-normal');
expect(node).not.toHaveClass('dry-typography--font-style-inherit');
expect(node).not.toHaveClass('dry-typography--font-style-unset');
});
it('renders with inherit font-style', () => {
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, fontStyle: 'inherit' }));
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--font-style-inherit');
expect(node).not.toHaveClass('dry-typography--font-style-oblique');
expect(node).not.toHaveClass('dry-typography--font-style-italic');
expect(node).not.toHaveClass('dry-typography--font-style-normal');
expect(node).not.toHaveClass('dry-typography--font-style-initial');
expect(node).not.toHaveClass('dry-typography--font-style-unset');
});
it('renders with unset font-style', () => {
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, fontStyle: 'unset' }));
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--font-style-unset');
expect(node).not.toHaveClass('dry-typography--font-style-oblique');
expect(node).not.toHaveClass('dry-typography--font-style-italic');
expect(node).not.toHaveClass('dry-typography--font-style-normal');
expect(node).not.toHaveClass('dry-typography--font-style-initial');
expect(node).not.toHaveClass('dry-typography--font-style-inherit');
});
it('renders with none text-decoration', () => {
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, textDecoration: 'none' }));
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--text-decoration-none');
expect(node).not.toHaveClass('dry-typography--text-decoration-underline');
expect(node).not.toHaveClass('dry-typography--text-decoration-line-through');
expect(node).not.toHaveClass('dry-typography--text-decoration-initial');
expect(node).not.toHaveClass('dry-typography--text-decoration-inherit');
expect(node).not.toHaveClass('dry-typography--text-decoration-unset');
});
it('renders with underline text-decoration', () => {
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, textDecoration: 'underline' }));
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--text-decoration-underline');
expect(node).not.toHaveClass('dry-typography--text-decoration-none');
expect(node).not.toHaveClass('dry-typography--text-decoration-line-through');
expect(node).not.toHaveClass('dry-typography--text-decoration-initial');
expect(node).not.toHaveClass('dry-typography--text-decoration-inherit');
expect(node).not.toHaveClass('dry-typography--text-decoration-unset');
});
it('renders with line-through text-decoration', () => {
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, textDecoration: 'line-through' }));
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--text-decoration-line-through');
expect(node).not.toHaveClass('dry-typography--text-decoration-none');
expect(node).not.toHaveClass('dry-typography--text-decoration-underline');
expect(node).not.toHaveClass('dry-typography--text-decoration-initial');
expect(node).not.toHaveClass('dry-typography--text-decoration-inherit');
expect(node).not.toHaveClass('dry-typography--text-decoration-unset');
});
it('renders with initial text-decoration', () => {
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, textDecoration: 'initial' }));
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--text-decoration-initial');
expect(node).not.toHaveClass('dry-typography--text-decoration-line-through');
expect(node).not.toHaveClass('dry-typography--text-decoration-underline');
expect(node).not.toHaveClass('dry-typography--text-decoration-none');
expect(node).not.toHaveClass('dry-typography--text-decoration-inherit');
expect(node).not.toHaveClass('dry-typography--text-decoration-unset');
});
it('renders with inherit text-decoration', () => {
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, textDecoration: 'inherit' }));
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--text-decoration-inherit');
expect(node).not.toHaveClass('dry-typography--text-decoration-line-through');
expect(node).not.toHaveClass('dry-typography--text-decoration-underline');
expect(node).not.toHaveClass('dry-typography--text-decoration-none');
expect(node).not.toHaveClass('dry-typography--text-decoration-initial');
expect(node).not.toHaveClass('dry-typography--text-decoration-unset');
});
it('renders with unset text-decoration', () => {
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, textDecoration: 'unset' }));
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--text-decoration-unset');
expect(node).not.toHaveClass('dry-typography--text-decoration-line-through');
expect(node).not.toHaveClass('dry-typography--text-decoration-underline');
expect(node).not.toHaveClass('dry-typography--text-decoration-none');
expect(node).not.toHaveClass('dry-typography--text-decoration-initial');
expect(node).not.toHaveClass('dry-typography--text-decoration-inherit');
});
it('renders with default text-align of left', () => {
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId }));
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--text-align-left');
expect(node).not.toHaveClass('dry-typography--text-align-center');
expect(node).not.toHaveClass('dry-typography--text-align-right');
expect(node).not.toHaveClass('dry-typography--text-align-justify');
expect(node).not.toHaveClass('dry-typography--text-align-initial');
expect(node).not.toHaveClass('dry-typography--text-align-inherit');
expect(node).not.toHaveClass('dry-typography--text-align-unset');
});
it('renders with left text-align', () => {
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, textAlign: 'left' }));
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--text-align-left');
expect(node).not.toHaveClass('dry-typography--text-align-center');
expect(node).not.toHaveClass('dry-typography--text-align-right');
expect(node).not.toHaveClass('dry-typography--text-align-justify');
expect(node).not.toHaveClass('dry-typography--text-align-initial');
expect(node).not.toHaveClass('dry-typography--text-align-inherit');
expect(node).not.toHaveClass('dry-typography--text-align-unset');
});
it('renders with center text-align', () => {
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, textAlign: 'center' }));
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--text-align-center');
expect(node).not.toHaveClass('dry-typography--text-align-left');
expect(node).not.toHaveClass('dry-typography--text-align-right');
expect(node).not.toHaveClass('dry-typography--text-align-justify');
expect(node).not.toHaveClass('dry-typography--text-align-initial');
expect(node).not.toHaveClass('dry-typography--text-align-inherit');
expect(node).not.toHaveClass('dry-typography--text-align-unset');
});
it('renders with right text-align', () => {
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, textAlign: 'right' }));
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--text-align-right');
expect(node).not.toHaveClass('dry-typography--text-align-left');
expect(node).not.toHaveClass('dry-typography--text-align-center');
expect(node).not.toHaveClass('dry-typography--text-align-justify');
expect(node).not.toHaveClass('dry-typography--text-align-initial');
expect(node).not.toHaveClass('dry-typography--text-align-inherit');
expect(node).not.toHaveClass('dry-typography--text-align-unset');
});
it('renders with justify text-align', () => {
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, textAlign: 'justify' }));
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--text-align-justify');
expect(node).not.toHaveClass('dry-typography--text-align-left');
expect(node).not.toHaveClass('dry-typography--text-align-center');
expect(node).not.toHaveClass('dry-typography--text-align-right');
expect(node).not.toHaveClass('dry-typography--text-align-initial');
expect(node).not.toHaveClass('dry-typography--text-align-inherit');
expect(node).not.toHaveClass('dry-typography--text-align-unset');
});
it('renders with initial text-align', () => {
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, textAlign: 'initial' }));
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--text-align-initial');
expect(node).not.toHaveClass('dry-typography--text-align-left');
expect(node).not.toHaveClass('dry-typography--text-align-center');
expect(node).not.toHaveClass('dry-typography--text-align-right');
expect(node).not.toHaveClass('dry-typography--text-align-justify');
expect(node).not.toHaveClass('dry-typography--text-align-inherit');
expect(node).not.toHaveClass('dry-typography--text-align-unset');
});
it('renders with inherit text-align', () => {
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, textAlign: 'inherit' }));
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--text-align-inherit');
expect(node).not.toHaveClass('dry-typography--text-align-left');
expect(node).not.toHaveClass('dry-typography--text-align-center');
expect(node).not.toHaveClass('dry-typography--text-align-right');
expect(node).not.toHaveClass('dry-typography--text-align-justify');
expect(node).not.toHaveClass('dry-typography--text-align-initial');
expect(node).not.toHaveClass('dry-typography--text-align-unset');
});
it('renders with unset text-align', () => {
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, textAlign: 'unset' }));
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--text-align-unset');
expect(node).not.toHaveClass('dry-typography--text-align-left');
expect(node).not.toHaveClass('dry-typography--text-align-center');
expect(node).not.toHaveClass('dry-typography--text-align-right');
expect(node).not.toHaveClass('dry-typography--text-align-justify');
expect(node).not.toHaveClass('dry-typography--text-align-initial');
expect(node).not.toHaveClass('dry-typography--text-align-inherit');
});
it('allows vertical rhythm to be disabled', () => {
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, verticalRhythm: false }));
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--no-vertical-rhythm');
});
it('allows vertical rhythm to be disabled', () => {
const testId = 'test-subject';
// ACT
render(_jsx(DisplayXs, { "data-testid": testId, verticalRhythm: false }));
const node = screen.getByTestId(testId);
expect(node).toHaveClass('dry-typography--no-vertical-rhythm');
});
});
//# sourceMappingURL=DisplayXs.test.js.map