@amsterdam/design-system-react/dist/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 { Accordion } from './Accordion';
import '@testing-library/jest-dom';
describe('Accordion section', () => {
    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 heading = screen.getByRole('heading', {
            name: testLabel,
        });
        const button = screen.getByRole('button', {
            name: testLabel,
        });
        const section = container.querySelector('.ams-accordion__panel');
        expect(heading).toHaveClass('ams-heading ams-accordion__header');
        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 expanded prop is true', () => {
        const { getByText } = render(_jsx(Accordion.Section, { expanded: true, label: testLabel, children: testContent }));
        const sectionContent = getByText(testContent);
        expect(sectionContent).toHaveClass('ams-accordion__panel--expanded');
    });
    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);
    });
});