@kadconsulting/dry
Version:
KAD Reusable Component Library
271 lines • 12.9 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import ContentSection from './ContentSection';
import { useEffect, useRef, useState } from 'react';
import { render, screen, waitFor } from '@testing-library/react';
const TestComponent = (props) => (_jsxs(ContentSection, { ...props, children: [_jsx(ContentSection.Column1, { children: "Column 1" }), _jsx(ContentSection.Column2, { children: "Column 2" })] }));
describe('ContentSection', () => {
it('renders with a dry-prepended className', () => {
// ARRANGE
const { container } = render(_jsx(TestComponent, {}));
// ASSERT
expect(container.firstChild).toHaveClass('dry-content-section');
});
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: [_jsxs(ContentSection, { ref: ref, children: [_jsx(ContentSection.Column1, { children: "Column 1" }), _jsx(ContentSection.Column2, { children: "Column 2" })] }), 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(TestComponent, { "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(TestComponent, { "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(TestComponent, { "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(TestComponent, { "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(TestComponent, { "data-testid": testId }));
// ASSERT
expect(screen.getByTestId(testId)).toBeInTheDocument();
});
it('renders column 1 when passed as a child', () => {
// ARRANGE
const testId = 'test-subject';
// ACT
render(_jsxs(ContentSection, { children: [_jsx(ContentSection.Column1, { "data-testid": testId, children: "Column 1" }), _jsx(ContentSection.Column2, { children: "Column 2" })] }));
// ASSERT
expect(screen.getByTestId(testId)).toHaveTextContent('Column 1');
});
it('renders column 2 when passed as a child', () => {
// ARRANGE
const testId = 'test-subject';
// ACT
render(_jsxs(ContentSection, { children: [_jsx(ContentSection.Column1, { children: "Column 1" }), _jsx(ContentSection.Column2, { "data-testid": testId, children: "Column 2" })] }));
// ASSERT
expect(screen.getByTestId(testId)).toHaveTextContent('Column 2');
});
it('renders a content container whose classname dictates the flex-direction', () => {
// ACT
const { container } = render(_jsxs(ContentSection, { children: [_jsx(ContentSection.Column1, { children: "Column 1" }), _jsx(ContentSection.Column2, { children: "Column 2" })] }));
const contentContainer = container.getElementsByClassName('dry-content-section__container');
// ASSERT
expect(contentContainer).toHaveLength(1);
expect(contentContainer[0]).toHaveClass('dry-content-section__container');
});
it('renders with the correct default mobileFlexDirection ("column")', () => {
// ACT
const { container } = render(_jsxs(ContentSection, { children: [_jsx(ContentSection.Column1, { children: "Column 1" }), _jsx(ContentSection.Column2, { children: "Column 2" })] }));
const contentContainer = container.getElementsByClassName('dry-content-section__container');
// ASSERT
expect(contentContainer[0]).toHaveClass('dry-content-section__container--mobile-column');
});
it('renders with the correct flex-direction when mobileFlexDirection is "column" (explicit)', () => {
// ACT
const { container } = render(_jsxs(ContentSection, { mobileFlexDirection: 'column', children: [_jsx(ContentSection.Column1, { children: "Column 1" }), _jsx(ContentSection.Column2, { children: "Column 2" })] }));
const contentContainer = container.getElementsByClassName('dry-content-section__container');
// ASSERT
expect(contentContainer[0]).toHaveClass('dry-content-section__container--mobile-column');
});
it('renders with the correct flex-direction when mobileFlexDirection is "column-reverse"', () => {
// ACT
const { container } = render(_jsxs(ContentSection, { mobileFlexDirection: 'column-reverse', children: [_jsx(ContentSection.Column1, { children: "Column 1" }), _jsx(ContentSection.Column2, { children: "Column 2" })] }));
const contentContainer = container.getElementsByClassName('dry-content-section__container');
// ASSERT
expect(contentContainer[0]).toHaveClass('dry-content-section__container--mobile-column-reverse');
});
});
describe('ContentSection.Column1', () => {
it('renders with a dry-prepended className', () => {
// ARRANGE
const { container } = render(_jsx(ContentSection.Column1, { children: "Column 1" }));
// ASSERT
expect(container.firstChild).toHaveClass('dry-content-section__column1');
});
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(ContentSection.Column1, { ref: ref, children: "Column 1" }), 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(ContentSection.Column1, { "data-testid": testId, id: id, children: "Column 1" }));
// 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(ContentSection.Column1, { "data-testid": testId, className: className, children: "Column 1" }));
// 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(ContentSection.Column1, { "data-testid": testId, style: style, children: "Column 1" }));
// 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(ContentSection.Column1, { "data-testid": testId, "data-product": testValue, children: "Column 1" }));
// ASSERT
expect(screen.getByTestId(testId)).toHaveAttribute('data-product', testValue);
});
it('supports downstream @testing-library `screen.getByTestId`', () => {
// ARRANGE
const testId = 'test-subject';
// ACT
render(_jsx(ContentSection.Column1, { "data-testid": testId, children: "Column 1" }));
// ASSERT
expect(screen.getByTestId(testId)).toBeInTheDocument();
});
it('renders its children', () => {
// ARRANGE
const testId = 'test-subject';
// ACT
render(_jsx(ContentSection.Column1, { "data-testid": testId, children: "Column 1" }));
// ASSERT
expect(screen.getByTestId(testId)).toHaveTextContent('Column 1');
});
});
describe('ContentSection.Column2', () => {
it('renders with a dry-prepended className', () => {
// ARRANGE
const { container } = render(_jsx(ContentSection.Column2, { children: "Column 2" }));
// ASSERT
expect(container.firstChild).toHaveClass('dry-content-section__column2');
});
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(ContentSection.Column2, { ref: ref, children: "Column 2" }), 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(ContentSection.Column2, { "data-testid": testId, id: id, children: "Column 2" }));
// 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(ContentSection.Column2, { "data-testid": testId, className: className, children: "Column 2" }));
// 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(ContentSection.Column2, { "data-testid": testId, style: style, children: "Column 2" }));
// 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(ContentSection.Column2, { "data-testid": testId, "data-product": testValue, children: "Column 2" }));
// ASSERT
expect(screen.getByTestId(testId)).toHaveAttribute('data-product', testValue);
});
it('supports downstream @testing-library `screen.getByTestId`', () => {
// ARRANGE
const testId = 'test-subject';
// ACT
render(_jsx(ContentSection.Column2, { "data-testid": testId, children: "Column 2" }));
// ASSERT
expect(screen.getByTestId(testId)).toBeInTheDocument();
});
it('renders its children', () => {
// ARRANGE
const testId = 'test-subject';
// ACT
render(_jsx(ContentSection.Column2, { "data-testid": testId, children: "Column 2" }));
// ASSERT
expect(screen.getByTestId(testId)).toHaveTextContent('Column 2');
});
});
//# sourceMappingURL=ContentSection.test.js.map