trurl-master / jsdom-testing-mocks Goto Github PK

'use client';

import { v4 as uuidv4 } from 'uuid';
import { Heading } from '@components/Heading/Heading';
import styles from './Accordion.module.scss';
import { useRef, useState } from 'react';

type AccordionProps = {
    label: React.ReactNode;
    children: React.ReactNode;
};

export const Accordion = (props: AccordionProps) => {
    const { label, children } = props;
    const detailsRef = useRef<HTMLDetailsElement>(null);
    const labelRef = useRef<HTMLElement>(null);
    const contentRef = useRef<HTMLDivElement>(null);
    const [animation, setAnimation] = useState<Animation | null>(null);
    const [isClosing, setIsClosing] = useState(false);
    const [isExpanding, setIsExpanding] = useState(false);
    const id = uuidv4();

    const onLabelClick = (e: React.MouseEvent<HTMLElement>): void => {
        e.preventDefault();

        if (!detailsRef.current || !contentRef.current) return;

        detailsRef.current.style.overflow = 'hidden';

        if (isClosing || !detailsRef.current.open) {
            open();
            return;
        }

        if (isExpanding || detailsRef.current.open) {
            shrink();
            return;
        }
    };

    const shrink = () => {
        if (!detailsRef.current || !labelRef.current || !contentRef.current) return;

        // Set the element as "being closing"
        setIsClosing(true);

        // Store the current height of the element
        const startHeight = `${detailsRef.current.offsetHeight}px`;

        // Calculate the height of the summary
        const endHeight = `${detailsRef.current.offsetHeight - contentRef.current.offsetHeight}px`;

        // If there is already an animation running
        if (animation) {
            // Cancel the current animation
            animation.cancel();
        }

        // Start a WAAPI animation
        const currentAnimation = detailsRef.current.animate(
            {
                // Set the keyframes from the startHeight to endHeight
                height: [startHeight, endHeight],
            },
            {
                duration: 400,
                easing: 'ease-in-out',
            },
        );

        // Set animation state
        setAnimation(currentAnimation);

        // When the animation is complete, call onAnimationFinish()
        currentAnimation.onfinish = () => onAnimationFinish(false);

        // If the animation is cancelled, isClosing variable is set to false
        currentAnimation.oncancel = () => setIsClosing(false);
    };

    const open = () => {
        if (!detailsRef.current) return;

        detailsRef.current.style.height = `${detailsRef.current.offsetHeight}px`;

        detailsRef.current.open = true;

        window.requestAnimationFrame(() => expand());
    };

    const expand = () => {
        if (!detailsRef.current || !labelRef.current || !contentRef.current) return;

        // Set the element as "being expanding"
        setIsExpanding(true);

        // Get the current fixed height of the element
        const startHeight = `${detailsRef.current.offsetHeight}px`;

        // Calculate the open height of the element (summary height + content height)
        const endHeight = `${detailsRef.current.offsetHeight + contentRef.current.offsetHeight}px`;

        // If there is already an animation running
        if (animation) {
            // Cancel the current animation
            animation.cancel();
        }

        // Start a WAAPI animation
        const currentAnimation = detailsRef.current.animate(
            {
                // Set the keyframes from the startHeight to endHeight
                height: [startHeight, endHeight],
            },
            {
                duration: 400,
                easing: 'ease-in-out',
            },
        );

        // Set animation state
        setAnimation(currentAnimation);

        // When the animation is complete, call onAnimationFinish()
        currentAnimation.onfinish = () => onAnimationFinish(true);
        // If the animation is cancelled, isExpanding variable is set to false
        currentAnimation.oncancel = () => setIsExpanding(false);
    };

    const onAnimationFinish = (open: boolean) => {
        if (!detailsRef.current || !labelRef.current || !contentRef.current) return;

        // Set the open attribute based on the parameter
        detailsRef.current.open = open;

        labelRef.current.setAttribute('aria-expanded', `${open}`);

        // Clear the stored animation
        setAnimation(null);

        // Reset isClosing & isExpanding
        setIsClosing(false);
        setIsExpanding(false);

        // Remove the overflow hidden and the fixed height
        detailsRef.current.style.height = detailsRef.current.style.overflow = '';
    };

    return (
        <div
            className={`${styles['accordion-wrapper']}`}
            onClick={onLabelClick}
            aria-controls={id}
            aria-expanded="false"
            role="button"
            tabIndex={0}
        >
            <details ref={detailsRef as React.LegacyRef<HTMLDetailsElement>} className={`${styles['accordion']}`}>
                <summary
                    tabIndex={-1}
                    role="decoration"
                    ref={labelRef as React.LegacyRef<HTMLElement>}
                    className={`${styles['label']}`}
                >
                    <Heading className={`${styles['heading']}`} semanticLevel={4} styledLevel={6}>
                        {label}
                    </Heading>
                </summary>

                <div id={id} ref={contentRef as React.LegacyRef<HTMLDivElement>} className={`${styles['content']}`}>
                    {children}
                </div>
            </details>
        </div>
    );
};

import { screen, render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Accordion } from '../Accordion';
import { mockAnimationsApi } from 'jsdom-testing-mocks';

mockAnimationsApi();

describe('Accordion', () => {
    it('should render', () => {
        render(<Accordion label="Label">Content</Accordion>);
        expect(screen.getByText('Label')).toBeInTheDocument();
    });

    it('should open and close', async () => {
        render(<Accordion label="Label">Content</Accordion>);

        const wrapper = screen.getByRole('button');
        const details = screen.getByRole('group');

        expect(details.getAttribute('open')).toBeNull();

        await userEvent.click(wrapper);
        const animation = details.getAnimations(); // <!-- Always empty array -->

        expect(details.getAttribute('open')).not.toBeNull();
    });
});