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

Panel component

import { PanelElement } from '../../panel/src/panel.js';
window.customElements.define('vp-panel', PanelElement);

describe('Accordion tests', () => {
    beforeAll(() => {
        document.body.innerHTML = `
        <vp-panel summary="something one" open>
            <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-panel>
            <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>`;
    });

    it('should be open', () => {
        const panel = document.querySelectorAll('vp-panel')[0];

        expect(panel.open).toBe(true);
    });

    it('should be closed', () => {
        const panel = document.querySelectorAll('vp-panel')[1];

        expect(panel.open).toBe(false);
    });

    it('should set summary text', () => {
        const panel = document.querySelectorAll('vp-panel')[0];
        const summary = panel.shadowRoot.querySelector('.summary');

        expect(summary.innerHTML).toBe('something one');
    });

    it('should set summary to default text', () => {
        const panel = document.querySelectorAll('vp-panel')[2];
        const summary = panel.shadowRoot.querySelector('.summary');

        expect(summary.innerHTML).toBe('Panel');
    });

    it('should toggle open state', () => {
        const panel = document.querySelectorAll('vp-panel')[0];
        const summary = panel.shadowRoot.querySelector('.summary');

        expect(panel.open).toBe(true);

        summary.click();

        expect(panel.open).toBe(false);

        summary.click();

        expect(panel.open).toBe(true);
    });
});