@kadconsulting/dry/dist/src/components/HeadingSection/HeadingSection.test.js

KAD Reusable Component Library

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
// CLI Version 1.1.0
// Component Version 1.0.0
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
// External imports
import { useEffect, useRef, useState } from 'react';
// Local imports
import HeadingSection from './HeadingSection';
// Hooks
describe('HeadingSection', () => {
    it('encourages contributors to open the test file', () => {
        expect(false).toBe(true);
    });
    it('renders with a dry-prepended className', () => {
        // ARRANGE
        const { container } = render(_jsx(HeadingSection, { heading: 'Test Heading', supportingText: 'Test Text' }));
        // ASSERT
        expect(container.firstChild).toHaveClass('dry-headingsection');
    });
    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(HeadingSection, { ref: ref, heading: 'Test Heading', supportingText: 'Test Text' }), 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(HeadingSection, { "data-testid": testId, id: id, heading: 'Test Heading', supportingText: 'Test Text' }));
        // 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(HeadingSection, { "data-testid": testId, className: className, heading: 'Test Heading', supportingText: 'Test Text' }));
        // 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(HeadingSection, { "data-testid": testId, style: style, heading: 'Test Heading', supportingText: 'Test Text' }));
        // 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(HeadingSection, { "data-testid": testId, "data-product": testValue, heading: 'Test Heading', supportingText: 'Test Text' }));
        // ASSERT
        expect(screen.getByTestId(testId)).toHaveAttribute('data-product', testValue);
    });
    it('supports downstream @testing-library `screen.getByTestId`', () => {
        // ARRANGE
        const testId = 'test-subject';
        // ACT
        render(_jsx(HeadingSection, { "data-testid": testId, heading: 'Test Heading', supportingText: 'Test Text' }));
        // ASSERT
        expect(screen.getByTestId(testId)).toBeInTheDocument();
    });
    it('renders heading and supporting text correctly', () => {
        // ARRANGE
        const heading = 'Test Heading';
        const supportingText = 'Test Supporting Text';
        // ACT
        render(_jsx(HeadingSection, { heading: heading, supportingText: supportingText }));
        // ASSERT
        expect(screen.getByText(heading)).toBeInTheDocument();
        expect(screen.getByText(supportingText)).toBeInTheDocument();
    });
    it('renders button when buttonInfo is provided', () => {
        // ARRANGE
        const buttonInfo = { buttonText: 'Click me', buttonLink: '#' };
        // ACT
        render(_jsx(HeadingSection, { heading: 'Test', supportingText: 'Test', buttonInfo: buttonInfo }));
        // ASSERT
        expect(screen.getByText('Click me')).toBeInTheDocument();
    });
    it('calls onClick when button is clicked', () => {
        // ARRANGE
        const onClick = jest.fn();
        const buttonInfo = { buttonText: 'Click me', buttonLink: '#' };
        // ACT
        render(_jsx(HeadingSection, { heading: 'Test', supportingText: 'Test', buttonInfo: buttonInfo, onClick: onClick }));
        fireEvent.click(screen.getByText('Click me'));
        // ASSERT
        expect(onClick).toHaveBeenCalledTimes(1);
    });
    it('shows loading overlay when button is clicked', async () => {
        // ARRANGE
        const buttonInfo = { buttonText: 'Click me', buttonLink: '#' };
        const logoImage = 'test-logo.png';
        // ACT
        render(_jsx(HeadingSection, { heading: 'Test', supportingText: 'Test', buttonInfo: buttonInfo, logoImage: logoImage }));
        fireEvent.click(screen.getByText('Click me'));
        // ASSERT
        await waitFor(() => {
            expect(screen.getByText('Heading Section')).toBeInTheDocument();
        });
    });
});
//# sourceMappingURL=HeadingSection.test.js.map