@vpaulo/vp-accordion/src/accordion.test.js

Accordion component

import { AccordionElement } from './accordion.js';
import { PanelElement } from '../../panel/src/panel.js';

window.customElements.define('vp-accordion', AccordionElement);
window.customElements.define('vp-panel', PanelElement);

describe('Accordion tests', () => {
    beforeAll(() => {
        document.body.innerHTML = `
        <vp-accordion>
			<vp-panel summary="something one">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem eligendi itaque aut ea reprehenderit optio hic voluptates impedit, placeat vitae dolor qui sapiente eos, numquam maiores repudiandae inventore dolores ut?</p>
            </vp-panel>
			<vp-panel summary="something two">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem eligendi itaque aut ea reprehenderit optio hic voluptates impedit, placeat vitae dolor qui sapiente eos, numquam maiores repudiandae inventore dolores ut?</p>
            </vp-panel>
		</vp-accordion>
		<vp-accordion multiple>
			<vp-panel summary="something three">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem eligendi itaque aut ea reprehenderit optio hic voluptates impedit, placeat vitae dolor qui sapiente eos, numquam maiores repudiandae inventore dolores ut?</p>
            </vp-panel>
			<vp-panel summary="something four">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem eligendi itaque aut ea reprehenderit optio hic voluptates impedit, placeat vitae dolor qui sapiente eos, numquam maiores repudiandae inventore dolores ut?</p>
            </vp-panel>
		</vp-accordion>`;
    });

    it('should open multiple panels', () => {
        const accordion = document.querySelector('vp-accordion[multiple]');
        const [...panels] = accordion.querySelectorAll('vp-panel');

        expect(panels[0].open).toBe(false);
        expect(panels[1].open).toBe(false);

        panels[0].shadowRoot.querySelector('.summary').click();

        expect(panels[0].open).toBe(true);
        expect(panels[1].open).toBe(false);

        panels[1].shadowRoot.querySelector('.summary').click();

        expect(panels[0].open).toBe(true);
        expect(panels[1].open).toBe(true);
    });

    it('should open one panel only', () => {
        const accordion = document.querySelector('vp-accordion');
        const [...panels] = accordion.querySelectorAll('vp-panel');

        expect(panels[0].open).toBe(false);
        expect(panels[1].open).toBe(false);

        panels[0].shadowRoot.querySelector('.summary').click();

        expect(panels[0].open).toBe(true);
        expect(panels[1].open).toBe(false);

        panels[1].shadowRoot.querySelector('.summary').click();

        expect(panels[0].open).toBe(false);
        expect(panels[1].open).toBe(true);
    });
});