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

KAD Reusable Component Library

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 } from '@testing-library/react';
import LoadingOverlay from './LoadingOverlay';
// Mock the useLoadingMessage hook
jest.mock('../../hooks/useLoadingMessage', () => ({
    __esModule: true,
    default: jest.fn((isLoading, componentName) => `Loading ${componentName}...`),
}));
describe('LoadingOverlay', () => {
    const defaultProps = {
        isLoading: true,
        componentName: 'Test Component',
        logo: { src: 'test-logo.png' },
    };
    it('renders with a loading-overlay className', () => {
        // ARRANGE
        const { container } = render(_jsx(LoadingOverlay, { ...defaultProps }));
        // ASSERT
        expect(container.firstChild).toHaveClass('loading-overlay');
    });
    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(LoadingOverlay, { ...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(LoadingOverlay, { ...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(LoadingOverlay, { ...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(LoadingOverlay, { ...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(LoadingOverlay, { ...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(LoadingOverlay, { ...defaultProps, "data-testid": testId }));
        // ASSERT
        expect(screen.getByTestId(testId)).toBeInTheDocument();
    });
    it('renders the logo with correct src', () => {
        // ARRANGE
        const logoSrc = 'test-logo.png';
        // ACT
        render(_jsx(LoadingOverlay, { ...defaultProps, logo: { src: logoSrc } }));
        // ASSERT
        const logoElement = screen.getByAltText('Logo');
        expect(logoElement).toHaveAttribute('src', logoSrc);
        expect(logoElement).toHaveClass('logo-animate');
    });
    it('renders the loading message with correct component name', () => {
        // ARRANGE
        const componentName = 'Custom Component';
        // ACT
        render(_jsx(LoadingOverlay, { ...defaultProps, componentName: componentName }));
        // ASSERT
        expect(screen.getByText(`Loading ${componentName}...`)).toBeInTheDocument();
    });
    it('does not render when isLoading is false', () => {
        // ARRANGE
        const testId = 'test-subject';
        // ACT
        const { container } = render(_jsx(LoadingOverlay, { ...defaultProps, isLoading: false, "data-testid": testId }));
        // ASSERT
        expect(container.firstChild).toBeNull();
        expect(screen.queryByTestId(testId)).not.toBeInTheDocument();
    });
    it('uses "Unknown Component" as default component name', () => {
        // ARRANGE
        const props = { ...defaultProps, componentName: undefined };
        // ACT
        render(_jsx(LoadingOverlay, { ...props }));
        // ASSERT
        expect(screen.getByText('Loading Unknown Component...')).toBeInTheDocument();
    });
    it('applies logo-container class to the logo wrapper', () => {
        // ARRANGE & ACT
        const { container } = render(_jsx(LoadingOverlay, { ...defaultProps }));
        // ASSERT
        expect(container.querySelector('.logo-container')).toBeInTheDocument();
    });
    it('applies loading-overlay__text class to the message', () => {
        // ARRANGE & ACT
        render(_jsx(LoadingOverlay, { ...defaultProps }));
        // ASSERT
        const messageElement = screen.getByText(/Loading/);
        expect(messageElement).toHaveClass('loading-overlay__text');
    });
});
//# sourceMappingURL=LoadingOverlay.test.js.map