@amsterdam/design-system-react/dist/src/Accordion/AccordionSection.test.js

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
import { fireEvent, render, screen } from '@testing-library/react';
import { createRef } from 'react';
import { describe, expect, it, vi } from 'vitest';
import { Accordion } from './Accordion';
describe('AccordionSection', () => {
    const testLabel = 'Test title';
    const testContent = 'Test content';
    it('renders an accordion section', () => {
        const { container } = render(_jsx(Accordion.Section, { label: testLabel, children: testContent }));
        const accordionSection = container.querySelector('.ams-accordion__section');
        expect(accordionSection).toBeInTheDocument();
        expect(accordionSection).toBeVisible();
    });
    it('renders the accordion section BEM class names', () => {
        const { container } = render(_jsx(Accordion.Section, { label: testLabel, children: testContent }));
        const button = screen.getByRole('button', {
            name: testLabel,
        });
        const section = container.querySelector('.ams-accordion__panel');
        expect(button).toHaveClass('ams-accordion__button');
        expect(section).toBeInTheDocument();
    });
    it('adds and removes --expanded class when the button is clicked', () => {
        const { getByText } = render(_jsx(Accordion.Section, { label: testLabel, children: testContent }));
        const button = screen.getByRole('button', {
            name: testLabel,
        });
        const sectionContent = getByText(testContent);
        expect(sectionContent).not.toHaveClass('ams-accordion__panel--expanded');
        fireEvent.click(button);
        expect(sectionContent).toHaveClass('ams-accordion__panel--expanded');
        fireEvent.click(button);
        expect(sectionContent).not.toHaveClass('ams-accordion__panel--expanded');
    });
    it('adds --expanded class when defaultExpanded prop is true', () => {
        const { getByText } = render(_jsx(Accordion.Section, { defaultExpanded: true, label: testLabel, children: testContent }));
        const sectionContent = getByText(testContent);
        expect(sectionContent).toHaveClass('ams-accordion__panel--expanded');
    });
    it('still supports the deprecated expanded prop', () => {
        const { getByText } = render(_jsx(Accordion.Section, { expanded: true, label: testLabel, children: testContent }));
        const sectionContent = getByText(testContent);
        expect(sectionContent).toHaveClass('ams-accordion__panel--expanded');
    });
    it('lets defaultExpanded take priority over expanded', () => {
        const { getByText } = render(_jsx(Accordion.Section, { defaultExpanded: false, expanded: true, label: testLabel, children: testContent }));
        const sectionContent = getByText(testContent);
        expect(sectionContent).not.toHaveClass('ams-accordion__panel--expanded');
    });
    it('warns when the deprecated expanded prop is used', () => {
        const spy = vi.spyOn(console, 'warn').mockImplementation(() => { });
        render(_jsx(Accordion.Section, { expanded: true, label: testLabel, children: testContent }));
        expect(spy).toHaveBeenCalledWith('Accordion.Section: The `expanded` prop is deprecated. Use `defaultExpanded` instead.');
        spy.mockRestore();
    });
    it('renders a section HTML tag by default', () => {
        render(_jsx(Accordion, { headingLevel: 2, children: _jsx(Accordion.Section, { label: testLabel, children: testContent }) }));
        const sectionQuery = screen.queryByRole('region');
        expect(sectionQuery).toBeInTheDocument();
    });
    it('does not render a section HTML tag when the sectionAs is "div"', () => {
        render(_jsx(Accordion, { headingLevel: 2, sectionAs: "div", children: _jsx(Accordion.Section, { label: testLabel, children: testContent }) }));
        const sectionQuery = screen.queryByRole('region');
        expect(sectionQuery).not.toBeInTheDocument();
    });
    it('renders an accessible heading', () => {
        render(_jsx(Accordion, { headingLevel: 3, children: _jsx(Accordion.Section, { label: testLabel, children: testContent }) }));
        const heading = screen.getByRole('heading', {
            level: 3,
            name: testLabel,
        });
        expect(heading).toBeInTheDocument();
        expect(heading).toBeVisible();
    });
    it('renders the allowed levels correctly', () => {
        render(_jsxs(_Fragment, { children: [_jsx(Accordion, { headingLevel: 2, children: _jsx(Accordion.Section, { label: "Level 2", children: testContent }) }), _jsx(Accordion, { headingLevel: 4, children: _jsx(Accordion.Section, { label: "Level 4", children: testContent }) })] }));
        const headingLevel2 = screen.getByRole('heading', {
            level: 2,
            name: 'Level 2',
        });
        const headingLevel4 = screen.getByRole('heading', {
            level: 4,
            name: 'Level 4',
        });
        expect(headingLevel2).toBeInTheDocument();
        expect(headingLevel4).toBeInTheDocument();
    });
    it('renders an icon', () => {
        render(_jsx(Accordion.Section, { label: testLabel, children: testContent }));
        const button = screen.getByRole('button', {
            name: testLabel,
        });
        const icon = button ? button.querySelector('svg:only-child') : null;
        expect(icon).toBeInTheDocument();
    });
    it('renders an extra class name', () => {
        const { container } = render(_jsx(Accordion.Section, { className: "test", label: testLabel, children: testContent }));
        const accordionSection = container.querySelector('.ams-accordion__section');
        expect(accordionSection).toHaveClass('test');
    });
    it('supports ForwardRef in React', () => {
        const ref = createRef();
        const { container } = render(_jsx(Accordion.Section, { label: testLabel, ref: ref, children: testContent }));
        const accordionSection = container.querySelector('.ams-accordion__section');
        expect(ref.current).toBe(accordionSection);
    });
    it('passes additional props', () => {
        const { container } = render(_jsx(Accordion.Section, { "aria-hidden": false, "data-test": "data-test", id: "id", label: testLabel }));
        const component = container.querySelector(':only-child');
        expect(component).toHaveAttribute('aria-hidden', 'false');
        expect(component).toHaveAttribute('id', 'id');
        expect(component).toHaveAttribute('data-test', 'data-test');
    });
});